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 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!
Crearemos un logo de texto con al cual le daremos un estilo interesante.
- 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 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.
- 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, 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.
- 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.
- 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%.
- 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.