Crea tu propio logo con reflejo!

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 con reflejo. 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:

  • MacromediaFireworks (de preferencia versión 8)
  • Conocimientos básicos del programa

Listos? Ok.. empecemos!

Digg this!

Crearemos un logo de texto con al cual le daremos un estilo interesante.

  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 pasoes 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.
    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, procedemosa 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 vezlogrado 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 blancoa negro.
    11.gif
  10. Para mejorarel efecto, reduciremos la opacidaddel 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. Y listo! A continuación lopuedes 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 conotros elementos a los que les puedes dar el efecto.

myfirstLogo.jpg

13 thoughts on “Crea tu propio logo con reflejo!

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

  2. Pingback: meneame.net

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

  4. hahaha! excelente!
    muchas gracias por tu tutorial,

    Michael.
    Andres.

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

  5. Pingback: El Geek » “intento de logo 2.0″

  6. Pingback: ..: CRISTIAN ESLAVA | Diseño Gráfico / Web | Maquetación | Flash | Multimedia | 3D | Fotografía :.. » Crea tu propio logo Web 2.0 con FireWorks

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

Leave a Reply