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.

    Convert to Paths

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

    Texto en curvas

    Combien Paths

  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.

    Combien Paths

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

    6.jpg

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

    9.jpg

  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.

    10.jpg

  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.

    11.gif

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

    12.gif

  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:

    myfirstLogo.jpg

  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:

Escribí esto el 14/01/2007

8 comentarios

  1. Guapis, igual me pongo algún dí­a ;-)

  2. marco dice:

    muy cencillo algo mas profesional hay ?

  3. zagduami dice:

    Muchas Gracias por el tutorial, a pesar del tiempo me sirvió bastante y aprendí­ varias cosas.

  4. felipao dice:

    muy ultil.. gracias

  5. gbytes dice:

    Muchisimas gracias!! muy util el tuto, algo simple y que da estilo!!

  6. galito99 dice:

    muy buena la ayuda

  7. @UROS dice:

    MUY BIEN EXPLICADO Y AÚN QUE PARECIERA DE LO MAS SENCILLO LA VERDAD ES QUE UN BUEN APORTE ME GUSTO LO REALIZE

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies