"> Crear un banner geométrico con efecto vintage en photoshop

Crear un banner geométrico con efecto vintage en photoshop

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

Efecto triángulos photoshop

Resultado tras el tutorial con el efecto photoshop

Banner efecto vintage 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.

Efecto triángulos photoshop

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.

Duplicar capa con photoshop

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:

Transformar con photoshop

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í:

Efecto mosaico photoshop

 

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:

Sesgado horizontal photoshop

 

Paso 6

Terminamos con esta capa dejándola con opacidad al 50%. En la ventana de capas puedes bajarle este porcentaje:

Opacidad photoshop

 

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º:

Efecto mosaico photoshop

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:

Aplicar último filtro photoshop

 

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):

Filtro triángulos photoshop

 

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:

herramienta mover photoshop

Triángulo desalineados

Alineamos los triángulos hasta que coincidan y formen cuadrados

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):

Tutorial photoshop

 

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.

Cargar acciones photoshop

Cargar accion photoshop

acciones-instagram-photoshop

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.

Banner efecto vintage photoshop

 

Resultado final

Banner efecto vintage photoshop

 

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

One Response

  1. Alex 15 enero, 2016 Responder

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *