Guia Tutorial: Texto semitransparente en 10 pasos

|



No suelo crear guías ni tutoriales por 2 motivos, el primero es que en la web hay muchísimos colgados y muy bien logrados, que modificando un poco o tomando parte de ellos se puede hacer casi cualquier cosa, no soy un vanguardista o innovador (estimo que muy pocos tienen ese talento), pero si evolucionar o hacer algo "mejor" (mas funcional o estético según su función) a lo que está hecho. El otro que puedo decir que es mas personal: al crear un tutoríal se nos "cierra" de a poco nuestro rango de imaginación, llegando a ser este muy ínfimo y hasta, en casos muy particulares, llegar a la total dependencia de estas guías para poder crear cualquier diseño.


Pasemos a la guía, van a necesitar básicamente una tipografía estilo bold ( ya que con fuentes light o de poco peso los textos se pierden) en mi caso Impact, Photoshop, la imagen de fondo y tener mínima práctica con el uso del programa ( no es complejo, digamos que una guía Dummies pero que te puede sacar de un apuro).

1- Crean un nuevo archivo en photoshop (aquí de 801 x 207 px).

2- Hacemos una nueva capa y colocamos la imagen que deseamos tener de fondo, donde el texto se va a poner transparente.


3- Clic en Herramienta de texto horizontal, escribimos el texto que va a quedar en transparente (gamemania en mi caso) y lo colocamos en la posición final. Es importante que elijan donde va a quedar por que una vez ubicado ya no se puede mover ( en realidad es movible pero tendrían que volver a empezar a partir del paso 3).
4- Vamos ventana capas> y seleccionamos la capa del texto, allí bajamos la opacidad al 70% (lo pueden variar).
5-  Clic derecho en la capa 1 (capa de la imagen) y Duplicamos la capa, la nombramos "capa texto".

6- Vamos a la capa del texto, seleccionamos la herramienta Varita mágica y hacemos clic fuera del campo donde esta el texto, luego con shift+Clic izq. seleccionamos los ojos de las tipografías que quedaron sin selección (en mi caso serían los ojos de las letras A).

7- Luego de tener la selección del texto hacemos clic en "capa texto" y presionamos CRTL C+ CRTL V (copiar+pegar) se nos genera una nueva capa con la misma forma del texto.  Nos quedaría como en la imagen que les muestro.

8- Bien aquí no voy a poner todas las imágenes así que lean en detalle. Ahora en la ventana de capas hacemos clic en el ojito de la visibilidad del texto (gamemania) para poder trabajar mejor. Ahora vamos a la capa texto2, vamos a la opción capa> estilo de capa
> sombra paralela (opacidad 45, distancia 0, extensión 23, tamaño 10)
> Bisel y relieve (Estructura >profundidad 21, tamaño 5, suavidad 0. Sombra > Angulo -90 altitud 30, modo resaltado opacidad 71%, modo de sombra opacidad 5%)
9- Ventana capas, clic derecho en el texto > rasterizar texto. Luego Barra de herramientas> herramienta de marco rectangular> seleccionamos la mitad inferior del texto (tomamos como referencia el final del ojo de las letras A) y luego lo eliminamos (Supr).
10- ventana de capas en el texto que hemos recortado, allí vamos al final de la ventana y clickeamos el botón de añadir mascara de capa. Una vez creada clickeamos esa marcara, seleccionamos la herramienta degradado (nos fijamos que de un lado este en negro y del otro en transparencia), y lo aplicamos ( como guía  toman la parte superior de la caja de texto y lo bajan hasta el final de misma o un poco más, según su gusto).
Y despues de haber leido todo esto ese sería el resultado final. Se puede dar un poco mas de contraste haciendo clic a la "capa texto2"en capa> estilo de capa>trazo (tamaño 3, opacidad 12%, color blanco).
 Podes bajar el ejemplo con todas las capas en psd desde este Link.

0 comentarios: