Crea tu propio logo Web 2.0
Posted on | Octubre 30, 2006
Tutorial paso a paso
Este post es el primero de una serie de publicaciones que espero poder realizar con tips y trucos relacionados con
diseño web. Hoy tendremos un tutorial para crear un logo estilo "Web 2.0". Cualquier duda o sugerencia, no duden en contactarse conmigo. Esta es una manera manual de realizar este tipo de
diseño, por lo que uno cuenta con mayor control de lo que puede hacer, incrementando así la variedad de resultados. Para este tutorial necesitas:
- Macromedia
Fireworks (de preferencia versión 8 o MX 2004)
- Conocimientos básicos del programa
Listos? Ok.. empecemos!
Crearemos un logo de texto con al cual le daremos un estilo "webdospuntocerezco".
- Abrimos el Fireworks
- En un nuevo archivo escribimos el texto deseado (tu eliges la tipografía, tamaño, color, etc), en este caso el texto será: "My First Logo"
- Seleccionas el texto y haciendo clic derecho en el texto escogemos la opción "Convert to Paths" (Ctrl+Shift+P), esto convertirá el texto en curvas.
- Ya teniendo el texto en curvas es importante
"unir" todas las letras de la palabra como una sola curva, para lo que, con el texto seleccionado, vamos al Menú de "Modify" y seleccionamos la opción
"Combine Paths / Join" (Ctrl+J).
- El siguiente paso
es aplicar el "degradé" al texto en curvas. Aquí también podrán usar los colores al gusto. La recomendación es usar un color base, en este caso,
un verde claro y el color alterno, el verde más obscuro. Nótese que el degradé se aplica uniformemente a todo el texto. Si no se hubiere combinado el texto en curvas, el
degradé se aplicaría individualmente en cada letra, lo cual no es un efecto deseado en este caso.
src="http://www.mmcdesign.com/blog/wp-content/uploads/2006/10/5.gif" id="image52" alt="Combien Paths" />
- El degradé se puede aplicar de arriba hacia abajo, o viceversa,
según el efecto que se quiera lograr.
- Adicionalmente podemos agregar el efecto espejo al texto siguiendo estos sencillos pasos. Selecciona el texto creado hasta ahora y duplícalo (Copy – Paste por ejemplo).
Ubícalo directamente debajo del texto acual e inviértelo verticalmente (Flip Vertical) con el menú "Modify / Transform / Flip Vertical".
- Una vez duplicado e invertido, procedemos
a crear un recuadro que cubrirá el texto invertido inferior. Seleccionamos la herramienta del Rectángulo (U) y dibujamos uno cuadro que cubra la mencionada parte. Una vez
logrado esto, aplicamos un degradé de blanco a negro en este recuadro de la misma forma que aplicamos el degradé en el paso 5. Nótese que la parte planca del degradé debe ir
en la parte superior y la parte negra en la inferior.
id="image56" />
- Llegó el momento de "enmascarar" el texto inferior con el recuadro en degradé que acabamos de dibujar. Para esto,
seleccionamos ambos elementos, el texto inferior y el recuadro (ojo que el recuadro debe estar en una capa superior al texto, es decir, lo debe cubrir completamente). Vamos al menú
"Modify / Mask / Group as Mask". Notarán que ahora el texto inferior se va difuminando hacia abajo, que es el efecto que logra la máscara del degradé de blanco
a negro.
- Para mejorar
el efecto, reduciremos la opacidad del texto inferior que acabamos de enmascarar. Esto es al gusto, pero se sugiere para este caso una opacidad de entre 40% y 50%.
- Estamos prácticamente listos, algunos
sugieren que un logo, o en su defecto, algun elemento o sitio que cumpla con los "parámetros" del Web 2.0, debe ser BETA!. Hagamos entonces un logo "Beta". Utiliza para esto
cualquier tipografía con un color que haga un cierto contraste y escribe la palabra "Beta" con un tamaño de letra más pequeño que el usado para el logo en si. Por
ejemplo:
- Y listo! A continuación lo
puedes exportar preferentemente como un JPG, ya que los degradés presentes requieren mayor cantidad de colores para mostrarse óptimamente. De aquí en adelante puedes experimentar con
otros elementos a los que les puedes dar el efecto Web 2.0, que no es más que el uso racional de degradés y el tag Beta… claro, también estarás a la moda con esta
tendencia.
Si te sirvió este tutorial, dale tu voto en Digg!
Comments
31 Responses to “Crea tu propio logo Web 2.0”
Leave a Reply
Recomendados
- Más fuentes y tipografías
para descargar (Gratis!)
(4.00 out of 5) - BitNami: Aplicaciones web empaquetadas y listas para instalar! (4.00 out of 5)
- Notas acerca de HTML y su correcta visualización en e-mails (4.00 out of 5)
- Tips y trucos de CSS (muy útiles) (4.00 out of 5)
- Layouts en CSS de 3 columnas fijas (4.00 out of 5)
- Por qué mi sitio se ve diferente entre navegadores (4.00 out of 5)
- Stemplate: Templates de elementos web
(3.86 out of 5) - La importancia de los Meta Tags (3.80 out of 5)
Comentarios Recientes
- chiropody manchester en Safari: Ahora para Windows!
- recursos humanos en 15 Tipografías de alta calidad para descargar (gratis!)
- diseño web en 15 Tipografías de alta calidad para descargar (gratis!)
- Nelson en Crea formularios web en línea… Gratis!
- izlesene en La guía de recursos definitiva para desarrollo con Adobe AIR
- nicolás Reyners en Tutorial: Perfila imágenes con un par de clics
Desde Twitter
- No se puede conectar a Twitter
Octubre 31st, 2006 @ 9:23
Bastante bueno el tutorial…ya me
acordé lo de enmascarar que me habías explicado pero por no anotar se me olvidó jeje.
Espero ver más tutoriales de estos por aquí porque la verdad que siempre es bueno tener una guía básica de como
hacer ciertas elementos gráficos.
Octubre 31st, 2006 @ 10:31
Crea tu propio logo
Web 2.0…
Este tutorial explica la creación de un logo estilo Web 2.0 en 11 simples pasos y sólo utilizando Macromedia Fireworks y conocimientos básicos del programa y de diseño….
Octubre 31st, 2006 @ 11:09
Interesante el tutorial como
guía técnica, pero aun no estoy muy de acuerdo con la deficion de “Cosas Web 2.0″ para mí la definición de Web 2.0 es más un concepto de funcionalidad mas no gráfico…
Creo que haré un post así…
Saludos.
Noviembre 20th, 2006 @ 8:48
jonny
Noviembre 21st, 2006 @ 11:48
muy buen tutorial…me pareció excelente …. gracias
Noviembre 27th, 2006 @ 12:58
Otra excelente
recomendación para hacer un logo avanzado!
http://www.garysimon.net/logotutorial/
Diciembre 3rd, 2006 @ 18:14
hahaha! excelente!
muchas gracias por tu tutorial,
Michael.
Andres.
ps.: la recomendacion que nos has dado es, simplemente, fantastica. la mas util de todas!!! =]
Enero 9th, 2007 @ 13:15
gracias por el tutorial! haber que tal me
queda… saludos
http://elgeek.com
Enero 9th, 2007 @ 13:32
[...] Como me sugirieron algunos lectores de esta web, acabo de cambiar el logo anterior por uno mas “onda web 2.0″. Espero que les guste, a continuacion les dejo 2 enlaces para que
creen el suyo utilizando Fireworks o Photoshop… les sugiero que utilizen estos softwares ya que nos permiten personalizar aun mas el diseño del logo en vez de utilizar alguno de esos “sitios webs
generadores de logos 2.0″. Tutorial: Crear un logo estilo web 2.0 (estilo espejo) (Photoshop) Crea tu propio logo Web 2.0 (Fireworks) [...]
Enero 13th, 2007 @ 20:27
[...] Michael Müller C. | Diseño y Desarrollo Web, Estándares, CSS, HTML y
más! | Guayaquil, Ecuador | Web Design Blog » Crea tu propio logo Web 2.0: [...]
Abril 1st, 2007 @ 1:29
Quien me puede ayudar, le agradeceré mucho. En la
universidad me piden que haga un deber en los siguientes términos: Ubique a un blogger especializado que tenga una bitácora sobre periodismo digital y hágale una entrevista-perfil a cerca de las 5
experiencias que más conocimientos le ha dado en el manejo de nuevos medios. 5 errores que por experiencia personal todo periodista digital debe evitar y los 5 bloggers que recomienda leer para estar al día
con el sector. Favor si por ahí tienen un amigo que sepa algo de este asunto, díganle que me ayude. Gracias…..mi correo: espectador90@yahoo.com.es
Abril 12th, 2007 @ 9:57
hola no entiendo esta pag.si ustedes
pueden ayudarme porfavor escribame a mi correo chicho_12_01@hotmail.com
Abril 12th, 2007 @ 10:23
Y qué es lo que no entiendes?
Abril 18th, 2007 @ 2:33
esta muy bueno para iniciacion,
despues de praticar esto le agarras la medida al firework
Mayo 2nd, 2007 @ 11:32
Gracias.
Marzo 15th, 2010 @ 13:58
[...] Special thanks to Michael, although i dont understand his language his pics are quite useful. [...]
Mayo 22nd, 2007 @ 18:01
Chvre Mic, muchas gracias ya practique seguiré.
Junio 7th, 2007 @ 12:10
Yo flipo con lo que se puede
diseñar… y yo que esos programas no los usaba pa na…
Agosto 14th, 2007 @ 17:34
mega distribuciones
Agosto 29th, 2007 @ 18:34
Excelente, me
sirviobastante
Septiembre 10th, 2007 @ 10:04
[...] Links .:Mynix Theme .:Tutorial crea tu propio Logo en Fireworks [...]
Octubre 24th, 2007 @ 14:59
Muy bueno lo voy a
probar
Diciembre 22nd, 2007 @ 18:31
¿Y como podríamos hacer que el logo entrar girando desde un
lateral?
¿Sería muy complicado?
Diciembre 23rd, 2007 @ 16:40
n
Enero 15th, 2008 @ 8:01
[...] Photoshop: designvitality – 51 Efectos para texto [Ingles] emmaalvarez – 55 Efectos para fotos [Ingles] gomediazine – Tutorial de como convertir una foto en silueta. [Ingles] hernandavos – 25
Tutoriales descargables en formato PDF. hernandavos – Recopilacion de 100 Pinceles gratis. art-dept – Galeria de pupilas hl2spain – Tutorial de como hacer el efecto de una cinta adhesiva [Español] mmcdesign
- Crear logo estilo Web 2.0 [Español] entrebits – Fundir dos imagenes con herramienta degradado [Español] entrebits – Como hacer animaciones en Photoshop CS3 [Español] [...]
Marzo 1st, 2008 @ 7:40
Church
Logos – Salient Features for Church Logo Design…
The proper logo with compatible characteristics can boom your market value within a short span of time….
Marzo 21st, 2008 @ 21:38
gracias muy bueno
Abril 2nd, 2008 @ 9:42
Uh, buenisimo, gracias!! pense que era mas dificil. Posta que un logo
al estilo Web 2.0 levanta mucho una web.
Abril 6th, 2008 @ 16:31
Abril 6th, 2008 @ 16:31
Mayo 3rd, 2008 @ 16:16
no pude hacer lo de… (El degradé se puede aplicar de
arriba hacia abajo, o viceversa, según el efecto que se quiera lograr)….
ni en las letras ni en el recuadro, un desastre, si me pueden ayudar… gracias