Crea tu propio logo Web 2.0

October 30th, 2006

Enviar por e-mail

(11 votos, promedio: 3.73 de 4)

Loading ...

Tutorial paso a paso

Mi primero logo web 2.0 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.
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.
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!

Suscríbete a los comentarios con

RSS o haz un

TrackBack a 'Crea tu propio logo Web 2.0'.

31 Comentarios en 'Crea tu propio logo Web 2.0'

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.

Xavier Donoso | October 31st, 2006 a las 9:23 am

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….

meneame.net | October 31st, 2006 a las 10:31 am

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.

JavierRomero | October 31st, 2006 a las 11:09 am

jonny

jonny | November 20th, 2006 a las 8:48 am

muy buen tutorial…me pareciÃ³ excelente …. gracias

pablo | November 21st, 2006 a las 11:48 am

Otra excelente recomendaciÃ³n para hacer un logo avanzado!
http://www.garysimon.net/logotutorial/

Michael MÃ¼ller | November 27th, 2006 a las 12:58 pm

hahaha! excelente!
muchas gracias por tu tutorial, Michael.
Andres.

ps.: la recomendacion que nos has dado es, simplemente, fantastica. la mas util de todas!!! =]

Andres | December 3rd, 2006 a las 6:14 pm

gracias por el tutorial! haber que tal me queda… saludos

http://elgeek.com

elgeek | January 9th, 2007 a las 1:15 pm

[…] 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) […]

El Geek » “intento de logo 2.0″ | January 9th, 2007 a las 1:32 pm

[…] 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: […]

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

Carlos Crespo | April 1st, 2007 a las 1:29 am

hola no entiendo esta pag.si ustedes pueden ayudarme porfavor escribame a mi correo chicho_12_01@hotmail.com

martin colon | April 12th, 2007 a las 9:57 am

Y quÃ© es lo que no entiendes?

Michael | April 12th, 2007 a las 10:23 am

esta muy bueno para iniciacion, despues de praticar esto le agarras la medida al firework

nenesio | April 18th, 2007 a las 2:33 am

Gracias.

Fernando | May 2nd, 2007 a las 11:32 am

[…] Special thanks to Michael, although i dont understand his language his pics are quite useful. […]

Create Web2.0 logo with Fireworks at Technology Bites | May 14th, 2007 a las 8:56 pm

Chvre Mic, muchas gracias ya practique seguirÃ©.

caosforever | May 22nd, 2007 a las 6:01 pm

Yo flipo con lo que se puede diseÃ±ar… y yo que esos programas no los usaba pa na…

viajes gratis | June 7th, 2007 a las 12:10 pm

mega distribuciones

mega distribuciones | August 14th, 2007 a las 5:34 pm

Excelente, me sirviobastante

n3st0r | August 29th, 2007 a las 6:34 pm

[…] Links .:Mynix ThemeÂ .:Tutorial crea tu propio Logo en Fireworks […]

::VAGONETA::» Blog Archive » En busca de LOGO | September 10th, 2007 a las 10:04 am

Muy bueno lo voy a probar

nestor j fernandez | October 24th, 2007 a las 2:59 pm

Â¿Y como podrÃamos hacer que el logo entrar girando desde un lateral?
Â¿SerÃa muy complicado?

dameron | December 22nd, 2007 a las 6:31 pm

n

habbo creditos gratis | December 23rd, 2007 a las 4:40 pm

[…] 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] […]

Recursos Varios en Jorgelig | January 15th, 2008 a las 8:01 am

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….

Design Logo Ma | March 1st, 2008 a las 7:40 am

gracias muy bueno

callas | March 21st, 2008 a las 9:38 pm

Uh, buenisimo, gracias!! pense que era mas dificil. Posta que un logo al estilo Web 2.0 levanta mucho una web.

Nixs | April 2nd, 2008 a las 9:42 am

cinthia | April 6th, 2008 a las 4:31 pm

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

kenneth | May 3rd, 2008 a las 4:16 pm

Comenta aquí