Dibuja un icono de brújula con una larga sombra en Adobe Photoshop

En este tutorial, aprenderás cómo diseñar un icono de brújula simple y agradable en Adobe Photoshop, utilizando herramientas como la herramienta Pluma, la herramienta Rectángulo Redondeado y la herramienta Rectángulo. También aprenderás a combinar formas básicas para crear una forma más compleja. Por último, verás cómo añadir una sombra larga al icono. Comencemos.

Recursos del tutorial

Necesitarás los siguientes recursos de forma gratuita para seguir este tutorial.

• 26 motivos de píxeles repetibles de PSDfreemium

1. Preparar el lienzo

Paso 1

Crea un nuevo archivo en Photoshop (Archivo > Nuevo). Establece el tamaño a 500 píxeles × 500 píxeles.

Paso 2

Haz clic en el icono Añadir capa de ajuste en la parte inferior del panel Capas. Selecciona Color uniforme.

Paso 3

Selecciona el color rojo claro (#db687b).

Paso 4

Haz doble clic en la capa de Color uniforme y activa la Superposición de motivo. Utiliza el motivo de píxeles gratuito de PSDfreemium. Establece el modo en Multiplicar con una Opacidad baja, 20%.

Paso 5

Cambia el nombre de la capa a Fondo. Sugiero cambiar el nombre de cada capa para ayudarte a reconocer la función de cada capa.

2. Diseñar la base

Paso 1

En primer lugar, queremos construir la base del icono. Establece el color de primer plano en #3ab2cb. Activa la herramienta Rectángulo redondeado y ajusta el radio a 30 px. Pulsa Shift y arrastra para dibujar un rectángulo redondeado.

Paso 2

Haz doble clic en la forma y activa la superposición de degradado. Selecciona el degradado de blanco a negro. Reduce la opacidad con la Superposición de Modo de Fusión.

Paso 3

Haz una nueva capa y colócala encima de la base del icono. Control-clic en la capa base para hacer una nueva selección basada en su forma. Haz clic con el botón derecho del ratón y selecciona Trazo. En el cuadro de diálogo Trazo, selecciona un color azul más oscuro (#1d6b80) con un ancho de 2 px.

Paso 4

Añadir una máscara de capa a la capa de trazo y rellénala de negro. Pinta la mitad inferior con blanco para mostrar el trazo.

Paso 5

Repite la forma anterior, y añade otro trazo en una nueva capa. Esta vez, utiliza un color azul más claro con un ancho de 1 px.

Paso 6

Añadir una máscara de capa y rellénala con negro para ocultar el trazo. Pintar la parte superior para mostrar parte de la línea de trazo. La combinación del trazo claro en la parte superior y el oscuro en la parte inferior añadirá un efecto 3D a la base.

3. Dibujar la forma

Paso 1

Dibuja una forma circular y luego añade otra forma circular más pequeña dentro de ella con el modo de trayectoria Restar forma frontal. Ahora deberíamos tener una forma en forma de anillo. Para el color de la forma, establece el blanco (#e4ffff).

Paso 2

Añadir un trazado triangular en la parte superior del anillo. Establece el modo de combinar formas.

Paso 3

Añadir otro triángulo en la parte inferior.

Paso 4

Duplica los dos triángulos. Gíralos unos 90º.

Ahora tenemos un triángulo que apunta en cuatro direcciones.

Paso 5

Repite el proceso. Esta vez añade triángulos más pequeños. Gíralos unos 45°.

Paso 6

Haz doble clic en la forma de la capa y luego añade Superposición de degradado y Sombra paralela. Mira la siguiente captura de pantalla para la configuración.

Paso 7

Añadir una forma de anillo más pequeña encima de la forma anterior. Establece el color de la misma a #eaeded.

Paso 8

Añadir una forma de medio triángulo que cubra la mitad del punto de la forma de brújula.

Continúa añadiendo otro medio triángulo que cubra los otros puntos. Esta forma creará la ilusión de que la forma de brújula es una figura extruida, no plana.

Paso 9

Haz doble clic en la forma y elige Superposición de degradado.

Para el degradado, establece el Estilo a Lineal con transición de color de gris (#d7d7d7) a blanco (#ffffff).

Paso 10

Añadir una nueva capa, y asegúrate de que se coloca por encima de todas las demás capas. Control-clic en la forma anterior que acabamos de hacer. Tendremos una nueva selección basada en su forma. Haz clic con el botón derecho del ratón y selecciona Trazo. Establece el Ancho a 1 px, la Ubicación: Interior, con el color #eeefef.

Esto le dará una línea de trazo fino a lo largo de la forma.

Paso 11

Añadir una máscara de capa a la forma de la capa y rellénala con negro. Pinta algunas partes de la línea de trazo con blanco para revelarlas.

Paso 12

Hagamos que la forma parezca realista añadiendo sombra debajo de ella. Añadir una nueva capa y colócala debajo de la forma de la brújula. Haz control-clic en la capa de la forma de la brújula para hacer una nueva selección basada en su forma. Haz clic en Edición > Relleno. Ajusta el Contenido a Negro y luego haz clic en Aceptar para rellenar la selección con negro.

Paso 13

 Elimina la selección usando Control-D. Haz clic en Filtro > Desenfoque > Desenfoque de movimiento. Ajusta el ángulo a -45°.

Paso 14

Suavice la sombra usando un filtro de Desenfoque Gaussiano. Haz clic en Filtro > Desenfoque > Desenfoque gaussiano.

Paso 15

Por ahora, esta no es la sombra que queremos. Para arreglar esto, añadir una máscara de capa a la capa y luego pinta la sombra innecesaria en la parte superior izquierda de la sombra. Sólo necesitamos la sombra en el lado derecho de la forma. Vea la imagen de abajo como referencia. Asegúrate de reducir también la opacidad de la capa para que la sombra sea más sutil.

Paso 16

Vamos a añadir una flecha en el centro de la forma de la brújula. Comienza añadiendo un rectángulo y luego aplica una transformación (Control-T). Primero, gíralo unos 45º. Segundo, aprieta su esquina hasta que tengamos una forma de flecha. Tercero, vuelve a rotarlo.

Paso 17

Haz doble clic en la forma de la flecha y luego aplica el Resplandor interior, la Superposición de degradado y la Sombra paralela con la siguiente configuración.

Paso 18

Queremos que el color de la flecha sea mitad blanco y mitad rojo. Para hacer esto, simplemente duplica la forma (Control-J) y luego elimina sus Estilos de Capa. Establece la máscara de recorte. Haz clic en su punto inferior con la herramienta Pluma para eliminarla.

Paso 19

Añadir una pequeña circunferencia en el centro de la flecha. Haz doble clic en él y luego aplica Resplandor interior, Superposición de degradado y Sombra paralela.

4. Añadir la Sombra

Paso 1

Añadir una nueva capa y colócala entre la forma de la brújula y su flecha. Dibuja una selección poligonal como se ve abajo usando la herramienta Poligonal y luego rellénala de negro. Reduce la Opacidad de la capa al 20%. Haz control-clic en la base del icono y añade una máscara de capa. Ahora, la sombra sólo puede verse en la base del icono.

Paso 2

Para aumentar la ilusión de que la forma de la brújula está extruida, queremos añadir más sombra sobre ella. Haz una nueva capa entre la forma de la brújula y su flecha. Pinta de negro la sombra de la flecha que toca la forma de la brújula.

Paso 3

Añadir otra capa y otra sombra sutil detrás de la flecha. Activa la herramienta Pincel con 0% de dureza y establece la opacidad al 5%. Pinta la sombra detrás de la flecha.

Paso 4

Añadir una nueva capa. Esta vez añada el resaltado al icono. Pinta de blanco la esquina del icono. Reducir la opacidad de la capa.

Repite este paso, pintando el brillo en otras partes del icono hasta que no parezca demasiado plano.

Paso 5

Ahora, vamos a añadir sombra a la base del icono. Haz una nueva capa debajo de la capa base. Haz Control-clic en la capa base, y rellena la selección con negro.

Paso 6

Pulsa Control-D para eliminar la selección. Suaviza la sombra aplicando el Desenfoque Gaussiano.

Paso 7

Puedes duplicar la sombra pulsando Control-J si no estás satisfecho con el resultado y quieres una sombra más oscura. Si la encuentras demasiado oscura, puedes suavizarla reduciendo la Opacidad.

Resultado final

Y este es nuestro resultado final. Espero que disfrutes del tutorial y que ahora entiendas la técnica para crear un icono plano con una sombra larga.