Como crear el icono de Vision Board : BD en Photoshop

Cuantas veces hemos visto iconos que realmente nos trasmiten una esencia gráfica; elementos que muchas veces queremos sacar nosotros mismos pero la falta de práctica hacen que se convierta en algo complicado y por consecuencia lo dejemos a un lado. Los tutoriales que publicamos, más que crear elementos que marcan pauta gráficamente, son guías para que practiques y tengas cada vez más elementos para poder crear por ti mismo diseños que impacten por su gran detalle visual.

Esta ocasión crearemos un icono que personalmente me gusto mucho por el manejo de texturas metálicas y que el realismo esta a un punto de ser excepcional; el logotipo es parte de la marca Vision Board: Burning Desires. Como trato de hacerlo constantemente, el tutorial será fácil de comprender hasta para los principiantes en Photoshop, así que, porque no comenzamos.

Paso 1 – Creando el lienzo

Para comenzar, vamos a crear el lienzo o documento en Photoshop. Este deberá ser de en proporciones idénticas en altura y anchura, yo lo hare con 20x20cm, aunque ustedes si lo desean pueden hacerlo más pequeño. Vamos a manejar también una resolución de 300DPI sobre un modo de color en RGB.

Vision Board tutorial en Photoshop

Paso 2 – Crear la caja

Lo siguiente es crear una caja para el icono. Este tiene las esquinas redondeadas, por lo que la manera más sencilla y rápida es selecciona la herramienta de Rectángulo con esquinas redondeadas (Rounded Rectagle Tool) que esta en nuestra caja de herramientas a la izquierda. Ya que lo tenemos seleccionado el submenú de la parte superior cambiara permitiéndonos darle un radio especifico a las esquinas, ahí es donde seleccionaremos 2cm como lo muestra la siguiente imagen.

Vision Board tutorial en Photoshop

Paso 3 – Agregando la textura metálica

Ya que tenemos los primeros pasos hechos, aquí es donde comienza la parte divertida, agregar las texturas para comenzar a darle realismo. Vamos a seleccionar la capa donde tenemos el cuadrado con esquinas redondeadas y daremos doble click para que nos aparezca el submenú.

Cuando tengamos el submenú vamos a seleccionar Sobreponer degradado (Gradient overlay)

Vision Board tutorial en Photoshop

Ya que estamos en la sección de degradado (gradient) vamos a seleccionar el estilo angulado (Angle).

Vision Board tutorial en Photoshop

Cuando seleccionamos el tipo de degradado que necesitamos, en el elemento superior podremos seleccionar el tipo de gradient que ocuparemos, damos click en esta parte y nos aparecerá un nuevo cuadro de dialogo. Este cuadro tiene degradados ya definidos en la parte superior pero al momento que seleccionemos alguno tenemos la versatilidad de crear y modificar los degradados a nuestra conveniencia, y es precisamente lo que haremos.

Vamos a colocar los siguientes valores en la caja de tonalidades.

Color #7c7c7c en ubicación 3%
Color #6d6d6d en ubicación 9%
Color #ebebeb en ubicación 16%
Color #7c7c7c en ubicación 24%
Color #ebebeb en ubicación 37%
Color #7c7c7c en ubicación 46%
Color #6d6d6d en ubicación 53%
Color #7c7c7c en ubicación 59%
Color #ebebeb en ubicación 67%
Color #7c7c7c en ubicación 79%
Color #ebebeb en ubicación 84%
Color #bdbdbd en ubicacion 87%
Color #ebebeb en ubicación 92%
Color #7c7c7c en ubicación 98%

El resultado del degradado será así.

Crear el degradado metalico

Paso 4 – Convertir en Smart Object

Ya hemos hecho algunos pasos fáciles y no querrás que se te pierdan al seguir con el tutorial; para esto recomiendo convertir nuestra capa en Smart Object, esto nos da beneficios como guardar los pasos anteriores y al agregar nuevos efectos poder modificarlos con sencillos pasos.

¿Como hacemos esto? Simplemente vamos a nuestra ventana de layers damos click secundario en la capa que deseemos convertir en Smart Object.

Smart Object

Paso 5 – Agregar textura

Para agregar la textura usaremos algo de ruido (Noise). El usar este tipo de elementos es común al momento de crear elementos desde cero, como en este caso. Lo que haremos es irnos a Filtro > Ruido > Agregar ruido en la parte superior del menú como se muestra en la imagen.

Agregar textura

Al dar click en Agregar ruido obtendremos un submenú donde vamos a definir la intensidad y tipo de ruido que queremos agregar, en este caso agregaremos 11.86% de ruido con distribución en Gausiano y de forma monocromatica.

Agregar ruido

Paso 6 – Efecto metálico realista

El manejo de las capas nos permite agregar elementos cada vez más elaborados, pero que van dando resultados interesantes. El efecto metálico lo podemos agregar yendo a Filtros > Desenfoque > Desenfoque de movimiento.

Efecto radial

Al dar clic nos lanzará una ventana emergente donde vamos a agregar el desenfoque de movimiento con los siguientes valores:

Cantidad: 70
Metodo: Spin
Calidad: La mejor

Radial

Paso 6 – Agregando los bordes

Ya que tenemos nuestra textura metálica, vamos a comenzar a definir nuestros elementos secundarios. El borde lo agregaremos de manera sencilla. Teniendo nuestro layer (capa) al 100% y duplicaremos la capa presionando Command (Control en Windows) + J (La letra J). Después definiremos el área que ocuparemos con el logotipo, tomando en cuenta el punto Numero 2 – Creando la caja.

Agregando los bordes

Agregando los bordes

Ya que tenemos nuestra caja creada con los bordes como los necesitamos de 2cm por lado, vamos a seleccionar el contorno presionando en Command (Control en Windows) en la capa + Click.

Seleccionando la capa

Ya que tenemos seleccionamos el área, contraeremos el espacio para que nos quede el borde del logotipo; con la capa seleccionada iremos a Seleccionar > Modificar > Contraer para obtener un cuadro de valores donde agregaremos que lo contraiga por 90px como lo muestra la imagen.

Contraer

Contraer

Paso 7 – Agregando volumen

Después de haber contraído la capa vamos a darle volumen con un estilo de Bevel and Emboss. Nos vamos a la capa y damos doble click sobre ella para obtener el recuadro de opciones de capa. Ahí seleccionamos Bevel and Emboss y le añadimos los siguientes valores.

Style: Inner level
Technique: Chisel soft
Depth: 100%
Direction: Up
Size: 16px
Soften: 0px
Shading: 120 grados

Bevel

Paso 8 – Vectorizando

Ya estamos por finalizar. De los últimos pasos es agregar la figura central. Vamos a tomar la figura y vectorizarla con la herramienta pluma. Ya que tenemos la figura hecha, vamos a la ventana de Paths y seleccionamos la capa.

Vectorizando

Con la imagen seleccionada vamos al menú Layer > New Fill layer > Solid color y cuando nos aparezca el cuadro de dialogo vamos a llenarlo con color negro.

Fill layer

Fill layer

Ya que tenemos nuestra figura con un color de relleno vamos a agregar los siguientes elementos en la ventana de opciones de capa:

Drop Shadow:

Blend Mode: Normal #ffffff (Blanco)
Angle: 76%
Distance: 14px
Spread: 0%
Size: 5px

Drop Shadow

Inner Shadow:

Blend Mode: Normal #000000 (Negro)
Angle: 75%
Distance: 20px
Spread: 0%
Size: 18px

Inner Shadow

Bevel and Emboss:

Style: Outer Bevel
Technique: Smooth
Direction: Up
Size: 16px
Soften: 12px
Angle: 127 grados
Altitud: 64 grados
Highliht mode: #ffffff (Blanco) 100%
Shadow mode: Normal 0%

Bevel

Paso final

Ya que se agregaron los últimos pasos, que fueron los anteriores, estamos listos para dar click en OK para hacer el paso final. En tu figura solo deberás cambiar el estilo de la capa de modo Normal a Soft Light y ahí lo tienes, un icono hecho totalmente en Photoshop con una gran calidad en cuanto a trabajo se refiere.

Logotipo final

Espero que este tutorial sea completamente de ayuda para poder crear nuevos elementos gráficos que les ayuden con sus diseños. Cualquier duda, esta totalmente disponible la parte de comentarios.