Actualmente en el diseño web se usan bastante las formas geométricas, y sobre todo las formas triangulares, sin duda es uno de los efectos con photoshop más solicitados. Además vamos a darle un efecto vintage photoshop que tanto se lleva ahora para vender.
En este rápido tutorial verás lo fácil que es crear este efecto vintage en tus backgrounds o fondos que emplees ya sea en la web, banners y otros diseños.
Añadiré el nombre de las ventanas y efectos tanto en inglés como en español, según el idioma de tu Photoshop.
Imagen original
Resultado tras el tutorial con el efecto photoshop
Paso 1
Abre la foto del tutorial o la que tú quieras en Photoshop (Ctrl+O o Cmd +O). Recuerda redimensionar la imagen según el tamaño de tu banner o background web que quieras crear.
Paso 2
Duplica la capa Fondo / Background dos veces, lo más sencillo es seleccionar esta capa y usar el atajo Ctrl + J o Cmd + J. El camino más largo es seleccionarla y darle a Click derecho > Duplicar capa.
Paso 3
Hacemos una Transformación Libre / Free Transform a la Capa 1 copia (Ctrl+T o Cmd+T ) o Edición > Transformación libre / Edit > Free Transform.
Con la transformación libre ejecutada, vamos al panel de arriba y modificamos el valor del Sesgado Horizontal / Horizontal Skew a 45º. Debes introducir este valor (45) en la letra H:
Pulsa Enter para aplicar la transformación.
Paso 4
Aquí viene lo divertido, siguiendo con la Capa 1 copia, vamos a Filtro > Pixelizar > Mosaico / Filter > Pixelate > Mosaic y ajustamos el Tamaño de la celda según nuestra imagen (en mi caso 29).
El objetivo es que veas en pantalla unos cuadrados o efecto pixelado más o menos así:
Paso 5
Ahora vamos a transformar esta capa al lado contrario (seguimos con Capa 1 copia), activa la Transformación libre con Ctrl+T o Cmd+T e introduce el valor -45º en la H (Sesgado Horizontal) del panel de arriba. Pulsa Enter para aplicar la transformación:
Paso 6
Terminamos con esta capa dejándola con opacidad al 50%. En la ventana de capas puedes bajarle este porcentaje:
Paso 7
Ahora por fin pasamos a la Capa 1, la seleccionamos y le hacemos otra Transformación libre (Ctrl/Cmd+T o Edición > Transformación libre), modificamos una vez más el sesgado horizontal a -45º:
Pulsa Enter para aplicar la transformación.
Paso 8
Ahora aplicamos el mismo filtro mosaico a esta Capa 1. Puedes hacerlo de forma muy rápida con el atajo Ctrl + F o Cmd + F, esto hace que Photoshop te aplique a la capa el último filtro usado:
Paso 9
A esta Capa 1 la volvemos a transformar y a modificarle el sesgado horizontal a 45º, usando la herramienta de Transformación libre(Ctrl+T o Cmd+T):
Paso 10
Ahora haz un zoom a tu diseño con Ctrl+ o Cmd+ y observarás que los triángulos no están bien alineados.
Para solucionarlo debes desplazar la Capa 1 a la izquierda o a la derecha con las flechas del teclado <- o -> hasta que veas los triángulos alineados.
Asegúrate de tener activada la herramienta mover del panel de la izquierda (pulsa V para activarla) y de tener seleccionada la Capa 1 en la ventana de capas:
Triángulo desalineados
Alineamos los triángulos hasta que coincidan y formen cuadrados
Deberías tener una imagen parecida a esta ahora (ya tenemos uno de los efectos photoshop más cotizados!:D):
Paso 11
Vamos a darle el efecto vintage al banner. Para ello vamos a usar una de las acciones photoshop con efectos instagram que ofrece este pack gratuito, pulsa abajo en Free Download.
Descomprime el zip y en el Photoshop ve a la pestaña Ventana > Acciones o Window > Actions, una vez ahí despliega el pequeño botón de la esquina superior derecha y dale a Cargar acciones. Selecciona el fichero Instant Vidster by SparkleStock.atn de la carpeta que hemos descomprimido.
Yo he usado la que se llama Stinson, selecciónala y dale al botón play del panel Acciones. Con esto ya logramos el efecto vintage photoshop :D.
Paso 12
Y para finalizar, le añadiremos un texto con una tipografía acorde al estilo. Para ello voy a usar la fuente Manteka, podéis descargarla gratis de behance.
Usa la herramienta texto (pulsa T para activarla) y selecciona esta tipografía. Juega con los tamaños y encaja la tipografía en los huecos de los cuadrados+triángulos.
Resultado final
Descargar el PSD | 1.52 MB
Se acabó, espero que te haya servido este tutorial para realizar un banner con efecto vintage photoshop.
¿Tienes alguna duda?, no dudes en comentar. 🙂
Muy buen tutorial, estaba buscando algo parecido.
Gracias por el aporte