Inspiración: Logotipos
Previous
RANDOM
Noticias
Next

Tutorial:Tipografía tipo hielo

by Checho27/11/2009

Les presentamos aquí nuestro primer tutorial de muchos por venir. Anteriormente habíamos publicado artículos sobre tutoriales pero todos ellos eran referencias de otras páginas.

En este tutorial explicamos como lograr un efecto tipo Hielo en tipografías, aunque se puede usar de igual forma para algún otro elemento como botones.

Pasos-tutorial-Frio-36

Este es el resultado final de este tutorial. Al final del tutorial mostramos algunas otras aplicaciones.

__________________________________

El primer paso es abrir un nuevo documento en Photoshop. Para este tutorial proponemos un documento de 50 x 37 cm a 225 pixeles/pulgada.

Pasos-tutorial-Frio-1

Empezaremos por crear un fondo para resaltar y ambientar nuestro texto. Primero llenaremos el fondo con un patron, para esto seleccionamos del menú Edición>Rellenar (Edit>Fill) en la ventana que se abrira seleccionamos usar Motivo (Pattern) y después seleccionamos algún motivo de la lista. Para cargar una libreria diferente a la que se encuentra activa o para cargar un motivo personalizado lo pueden hacer desde el menú que se carga cuando hacemos click en la flecha del lado derecho de los motivos.

Pasos-tutorial-Frio-2

Si desean cargar una nueva librería, en este caso utilizaremos Patterns (aunque realmente pueden usar cualquiera pues esto no interferirá con el efecto final), después de darle click lo más probable es que nos aparezca un aviso preguntándonos si estamos seguros de que queremos reemplazar la librería actual, dale Aceptar.

Pasos-tutorial-Frio-3

En este caso utilizamos el motivo Woven Wide de la libreria de Patterns y dale click en Aceptar (OK) para cerrar la ventana.

Pasos-tutorial-Frio-4

Podremos ver que nuestro fondo ahora tiene un motivo uniforme pero sin mucho color.

Pasos-tutorial-Frio-5

Para darle algo de color nos vamos a Imagen>Ajustar>Tono/Saturación (Image>Adjust>Hue/Saturation) y seleccionamos las siguientes cantidades. Asegurate de seleccionar la opción de Colorear (Colorize) antes de modificar los valores. Dale Aceptar (OK).

Pasos-tutorial-Frio-6

Para darle un poco más de profundidad al plano usaremos la herramienta Subexponer (Burn Tool).

Pasos-tutorial-Frio-7

Para este tutorial recomendamos seleccionar un pincel predefinido de 300 px con los bordes suaves y una vez seleccionado modificamos el diámetro a 911 px. (No queremos meternos ahorita en explicaciones de las características de las brochas/pinceles pero les recomendamos lo hagan de esta forma).

Pasos-tutorial-Frio-8

En las características de la herramienta Subexponer (Burn Tool) modificamos la Exposición (Exposure) a 15%.

Pasos-tutorial-Frio-9

Y dibujamos en las esquinas de la capa Fondo varias veces hasta obtener un efecto similar al que se muestra en la imagen.|

Pasos-tutorial-Frio-10

Una vez obtenido el fondo pasaremos a trabajar sobre el tema principal de este articulo, el efecto Hielo o Cristal. Empieza escribiendo una frase con la herramienta Texto (Text). Por ahora usaremos la tipografía Arial en un tamaño de 600 px no importa el color del texto pues más adelante lo modificaremos.

Pasos-tutorial-Frio-11

Para aplicar los efectos selecciona la capa del texto y da click derecho sobre ella, del menú que se despliegue selecciona la opción Opciones de Fusión (Blending Options).

Pasos-tutorial-Frio-12

Pasos-tutorial-Frio-13

Se abrirá una ventana con varias opciones y un menú con doce opciones del lado izquierdo.

Pasos-tutorial-Frio-14

Selecciona Superposición de Colores (Color Overlay). Asegúrate de que aparezca una palomita y que se resalte de otro color.  Modifica los valores para que queden de la siguiente forma. Esto sobrepondrá el color azul al texto. Esto se pudo hacer simplemente modificando el color del texto pero esto nos asegura que el efecto funcionara en otros objetos donde no sea tan facil cambiar el color.

Pasos-tutorial-Frio-15

Pasos-tutorial-Frio-16

Ahora modificaremos una opción general de las Opciones de Fusión para que queden de la siguiente forma. Lo más importante es seleccionar la opción Fusionar efectos interiores como un grupo (Blend Interior Effects as Group), para aplicar el modo de fusión de la capa a todos los efectos que modifican los píxeles opacos como Resplandor interior, Satinado, Superposición de colores y Superposición de degradado.

Pasos-tutorial-Frio-17

Ahora selecciona Sombra Paralela (Drop Shadow) e iguala los valores para que concuerden con los que se presentan a continuación, esto creara una sombra azul que simulara la luz que pasa a través del texto.

Pasos-tutorial-Frio-18

Pasos-tutorial-Frio-19

No hace falta que le des en Aceptar (OK) todavía, pero te mostramos una imagen para que veas como debería de verse el texto con los efectos que hemos aplicado hasta ahora.

Pasos-tutorial-Frio-20

Ahora pondremos una Sombra Interior (Inner Shadow) de un color azul oscuro para dar la idea de “volumen” en el texto.

Pasos-tutorial-Frio-21

Pasos-tutorial-Frio-22

De nuevo les dejamos una imagen para que vean el gran cambio que esta sombra interna representa.

Pasos-tutorial-Frio-23

El siguiente paso es poner un Resplandor Interior (Inner Glow). Iguala los valores aquí presentados.

Pasos-tutorial-Frio-24

Pasos-tutorial-Frio-25

Este efecto es muy sutil pero nos ayuda a dar todavía más la idea de volumen en el texto.

Pasos-tutorial-Frio-26

Ya que terminamos con las sombras contiuamos con los brillos, para esto utilizaremos el estiolo Bisel y relieve (Bevel and Emboss). Dejamos aquí los valores.

Pasos-tutorial-Frio-27

Puedes ver como sobresale notoriamente el texto y da la idea de un acabado más cristalino.

Pasos-tutorial-Frio-28

Para continuar con los efectos  de Bisel y relieve seleccionamos Contorno (Contour) con esto logramos una ligera mejoría en el aspecto de volumen, si no logras ver la diferencia puedes modificar los valores drasticamente para que veas la diferencia. Te dejamos los valores sugeridos por nosotros.

Pasos-tutorial-Frio-29

Para la gráfica del contorno necesitamos crear uno propio que sea lo más parecido a este:

Pasos-tutorial-Frio-30

Mostramos aquí los avances.

Pasos-tutorial-Frio-31

El efecto logrado hasta este momento se ve muy bien, pero aplicaremos dos opciones más que terminaran por dar el toque final. El primero es el Satinado (Satin) que hara que el color del texto no sea tan parejo simulando de esta forma ligeras irregularidades en el material.

Pasos-tutorial-Frio-32

Pasos-tutorial-Frio-33

Por último pondremos un Resplandor exterior (Outer Glow) que avivará todavía más la idea de que la luz pasa a travez del texto como si fuera hielo o cristal.

Pasos-tutorial-Frio-34

Pasos-tutorial-Frio-35

Este es el resultado final:

Pasos-tutorial-Frio-36

Se puede modificar el Relleno (Fill) a un 50% para dar la idea de un material menos plástico.

Pasos-tutorial-Frio-37

Pasos-tutorial-Frio-38

_______________________________________________

Les dejo tres ejemplos de diferentes aplicaciones para los que se puede usar este efecto y que da muy buenos resultados con muy pequeños cambios como color o tipografía:

hielo

Simplemente con cambiar la tipografía logramos un efecto que logra capturar mejor la idea de que es texto está formado de hielo. Simplemente tendras que ajustar ligeramente los valores de los efectos hasta que logres el efecto deseado.

Pasos-tutorial-Frio-39

La imagen de arriba se logro con el mismo efecto pero con ligeras modificaciones en los valores de los mismos (distancias de sombras, brillos, etc) y con una tipografía diferente, en este caso DirtyAmes.

Pasos-tutorial-Frio-40

Esta última imagen se logro modificando el color y valores de los efectos utilizados en este tutorial y se aplico a la tipografía Showcard Gothic. Para los detalles en azul se utilizo el mismo efecto sobre letras sueltas de la misma tipografía Showcard Gothic y se posicionaron en la pantalla buscando lograr un diseño llamativo.

5 Comments
Leave a response

Leave a Response

ICONS BY FONTELLO. FONTS BY GOOGLE FONTS.