Crea tu propio logo Web 2.0 con FireWorks

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

1. Abrimos el Fireworks
2. 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«
3. 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.

   

4. 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).

   

   

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

   

6. El degradé se puede aplicar de arriba hacia abajo, o viceversa, según el efecto que se quiera lograr.

   

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

   

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

   

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

   

10. 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%.

    

11. 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:

    

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

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: