Crea tu propio logo Web 2.0
Posted on 30. Oct, 2006 by Michael Müller in Diseño Web, Tips Avanzados, Tutoriales
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!
Xavier Donoso
Oct 31st, 2006
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.
meneame.net
Oct 31st, 2006
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….
JavierRomero
Oct 31st, 2006
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.
jonny
Nov 20th, 2006
jonny
pablo
Nov 21st, 2006
muy buen tutorial…me pareció excelente …. gracias
Michael Müller
Nov 27th, 2006
Otra excelente
recomendación para hacer un logo avanzado!
http://www.garysimon.net/logotutorial/
Andres
Dic 3rd, 2006
hahaha! excelente!
muchas gracias por tu tutorial,
Michael.
Andres.
ps.: la recomendacion que nos has dado es, simplemente, fantastica. la mas util de todas!!! =]
elgeek
Ene 9th, 2007
gracias por el tutorial! haber que tal me
queda… saludos
http://elgeek.com
El Geek » “intento de logo 2.0″
Ene 9th, 2007
[...] 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) [...]
..: CRISTIAN ESLAVA | Diseño Gráfico / Web | Maquetación | Flash | Multimedia | 3D | Fotografía :.. » Crea tu propio logo Web 2.0 con FireWorks
Ene 13th, 2007
[...] 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: [...]
Carlos Crespo
Abr 1st, 2007
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
martin colon
Abr 12th, 2007
hola no entiendo esta pag.si ustedes
pueden ayudarme porfavor escribame a mi correo chicho_12_01@hotmail.com
Michael
Abr 12th, 2007
Y qué es lo que no entiendes?
nenesio
Abr 18th, 2007
esta muy bueno para iniciacion,
despues de praticar esto le agarras la medida al firework
Fernando
May 2nd, 2007
Gracias.
Create Web2.0 logo with Fireworks at Technology Bites
Feb 9th, 2012
[...] Special thanks to Michael, although i dont understand his language his pics are quite useful. [...]
caosforever
May 22nd, 2007
Chvre Mic, muchas gracias ya practique seguiré.
viajes gratis
Jun 7th, 2007
Yo flipo con lo que se puede
diseñar… y yo que esos programas no los usaba pa na…
mega distribuciones
Ago 14th, 2007
mega distribuciones
n3st0r
Ago 29th, 2007
Excelente, me
sirviobastante
::VAGONETA::» Blog Archive » En busca de LOGO
Sep 10th, 2007
[...] Links .:Mynix Theme .:Tutorial crea tu propio Logo en Fireworks [...]
nestor j fernandez
Oct 24th, 2007
Muy bueno lo voy a
probar
dameron
Dic 22nd, 2007
¿Y como podríamos hacer que el logo entrar girando desde un
lateral?
¿Sería muy complicado?
habbo creditos gratis
Dic 23rd, 2007
n
Recursos Varios en Jorgelig
Ene 15th, 2008
[...] 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] [...]
Design Logo Ma
Mar 1st, 2008
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….
callas
Mar 21st, 2008
gracias muy bueno
Nixs
Abr 2nd, 2008
Uh, buenisimo, gracias!! pense que era mas dificil. Posta que un logo
al estilo Web 2.0 levanta mucho una web.
cinthia
Abr 6th, 2008
cinthia
Abr 6th, 2008
kenneth
May 3rd, 2008
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
NancyBARRETT23
May 7th, 2010
People deserve good life time and lowest-rate-loans.com or just college loan would make it much better. Just because people’s freedom is based on money.
Habbo Retros
Jun 26th, 2010
Nice Blog! Check Mine at Visit My Blog
newchanel
Abr 14th, 2011
http://www.mmcdesign.com
record
Abr 16th, 2011
tut mojna i pole 1:)
dusman
Abr 20th, 2011
Car tech reviews and ratings, video reviews, user opinions, most popular GPS systems, Bluetooth technology buying guides, prices
Arater
Abr 21st, 2011
A narrow strip of metal or wood, as in a Venetian blind. 2. A movable auxiliary airfoil running along the leading edge of the wing of an airplane.
Bagtre
Abr 21st, 2011
A Slat is a long, thin, flat piece of lumber or plastic. Slat or Slats may also refer to: Leading edge slats fitted to aircraft