Vision board: burning desires
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.
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.
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)
Ya que estamos en la sección de degradado (gradient) vamos a seleccionar el estilo angulado (Angle).
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í.
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.
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.
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.
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.
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 |
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.
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.
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.
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 |
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.
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.
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 |
Inner Shadow:
| Blend Mode: Normal #000000 (Negro) |
| Angle: 75% |
| Distance: 20px |
| Spread: 0% |
| Size: 18px |
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% |
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.
