Cómo Crear un Pack de Íconos con Adobe Photoshop

En este tutorial de Photoshop, vamos a diseñar un pack de íconos en Adobe Photoshop. Los paquetes de íconos deben tener el mismo fondo y tema. Para aprender cómo usar Photoshop para ello, vamos a diseñar un ícono de un sol, un ícono de un copo de hielo y un ícono de RSS.

Sin embargo, si no tienes tiempo de crear un pack de íconos desde cero, Envato Elements es tu mejor opción. ¡La subscripción mensual te ofrece descargas ilimitadas de tantos paquetes de íconos de Photoshop como desees, y más! ¡No dejes de dar una vuelta por Envato Elements para que veas todo lo que incluye!

1. Prepara el Lienzo para los Íconos de Photoshop

Paso 1

Para comenzar este tutorial de Photoshop,  crea un nuevo archivo con un tamaño de 350 px × 350 px. Haz clic en el pequeño cuadro situado junto a la opción Contenido de fondo para cambiar el nuevo color del lienzo.

Paso 2

En el cuadro de diálogo Selector de color, selecciona gris (#e0e0e2) para el color de fondo del lienzo.

Paso 3

Siempre es una buena idea mantener tu trabajo estructurado desde el principio. Crea un nuevo grupo de capas y llámalo sol. Aquí es donde colocaremos todas las capas utilizadas en el ícono del sol.

2. Diseña la Base de los Íconos de Photoshop

Paso 1

Ahora vamos a trabajar en la base de los íconos de Photoshop. Utiliza la herramienta Rectángulo redondeado para dibujar un rectángulo de 83 px × 64 px y 8 px de radio. Para obtener resultados precisos, utiliza el panel Propiedades. En este panel, puedes introducir el tamaño exacto en el cuadro de entrada.

Paso 2

Mantén pulsada la tecla Shift y dibuja otro rectángulo redondeado. Esta nueva forma se añadirá a la anterior. Establecd su tamaño en 36 px × 36 px con un radio de 3 px.

Paso 3

Pulsa Control-T para realizar una transformación y, a continuación, haz clic y arrástralo fuera del cuadro delimitador para girarlo 45°.

Paso 4

Asegúrate de que la forma está en el centro de la forma anterior. Puedes probar su posición arrastrándola y encajándola en la guía del centro de la forma anterior.

Paso 5

Pulsa Intro para confirmar el resultado de la transformación. Puedes encontrar un cuadro de diálogo de confirmación de Photoshop, informándote de que la forma se convertirá en un trazado normal. Esto significa que ya no podrás editarla utilizando el panel de Propiedades. Simplemente haz clic en Sí.

Paso 6

Coloca la forma de tu pack de íconos como en la imagen de abajo.

Este es el resultado con un aumento del 100%.

Paso 7

Dibuja una forma similar encima de la forma anterior que sea 1 px más pequeña. Puedes hacerlo duplicando la forma y modificando sus puntos, o simplemente creando una nueva forma.

Paso 8

Establece su color en #57adf8.

Paso 9

Haz doble clic en la forma y aplica la superposición de trazo y degradado utilizando la siguiente configuración.

Para el degradado, utiliza la siguiente disposición de colores. Para abrir el Editor de degradados y cambiar la configuración del degradado, haz clic en el cuadro de vista previa del degradado.

Paso 10

Reduce la capa del Relleno al 11%. El contenido de la capa será transparente y dejará los estilos de capa intactos.

Este es el resultado. Así se crean las bases para los paquetes de íconos.

3. Añade Sombra a los Íconos de Photoshop

Paso 1

Cómo usar Photoshop para crear paquetes de íconos es fácil. Ahora añadiremos sombras. Crea una nueva capa debajo de la base del ícono. Activa la herramienta Pincel y pinta una sombra debajo del ícono.

Paso 2

Siguiendo con la Herramienta Pincel, añade una sombra más fuerte justo debajo de la punta del ícono.

Paso 3

Haz control-clic en la base del ícono más pequeño para hacer una nueva selección basada en su forma. Crea una nueva capa y pinta de blanco sobre la selección. Asegúrate de utilizar un pincel suave (0% de dureza).

Paso 4

Una vez que haz terminado, elimina la selección usando Control-D y luego reduce la Opacidad de la capa.

Paso 5

Haz otra capa nueva y obtén la selección de la base del ícono pequeño. Rellena la selección con un degradado de blanco a negro. Cambia el modo de fusión de la capa a superposición y reduce su opacidad.

Paso 6

Añade otra capa nueva. Haz una selección elíptica grande en la parte inferior del ícono y luego haz Control-clic en la capa base pequeña para intersectarla. Rellena la selección con un degradado de blanco a negro. Cambia el modo de fusión de la capa a pantalla y reduce su opacidad.

Este es el resultado con un aumento del 100%.

Paso 7

Haz control-clic en la capa base del ícono. Haz una nueva capa en la parte superior y luego haz clic en Editar > Trazo. Ajusta el color a azul más claro y el Ancho: 1 px.

Abajo, puedes ver la diferencia antes y después de añadir un trazo en el ícono.

Paso 8

Añade una máscara de capa en la capa de trazo. Rellénala con negro para ocultar todos los contornos. Pinta algunas partes del trazo con blanco para revelarlas. De esta manera, ahora tenemos el resaltado en el borde del ícono.

Puedes ver el detalle del resaltado en la siguiente imagen.

Paso 9

Añade una capa de ajuste de balance de color sobre el ícono. Vamos a utilizarla para cambiar el color del fondo.

Para facilitar la gestión de la capa, vamos a cambiar su nombre por el de cambiador de color.

Paso 10

Rellena la máscara de capa con negro. Haz una nueva selección basada en la forma del ícono, y luego rellénala con blanco. De esta manera, la capa de ajuste sólo afecta al ícono. Arrastra los controles deslizantes para cambiar el color.

Paso 11

Duplica la base del ícono y cambia el parámetro en Balance de color individualmente. Ya hemos completado las sombras en los paquetes de íconos.

4. Añade los Símbolos a los Íconos de Photoshop

Paso 1

Ya estamos en el último paso de cómo usar Photoshop para crear íconos. Para nuestro primer ícono, agregaremos un símbolo de sol. Empieza dibujando un círculo amarillo.

Paso 2

Aplica los estilos de capa Sombra interior y Resplandor interior utilizando la siguiente configuración. Utiliza #7b6708 para su color y establece ambos modos de fusión en Multiplicar.

Paso 3

Pinta un amarillo más claro en el centro inferior del sol.

Paso 4

Añade una forma elíptica en la mitad superior del sol con un amarillo más brillante para su color.

Paso 5

Dibuja una forma delgada de color claro en la parte superior derecha del sol para su resaltado. Borra una parte con una goma de borrar suave para que quede natural.

Paso 6

El siguiente proceso es añadir la llama del sol. Empieza dibujando dos triángulos amarillos como se ve abajo. Colócalos detrás del sol.

Paso 7

Seleccione ambas formas vectoriales y luego duplícalas: Control-C y luego Control-V. Rota las nuevas formas 45°.

Paso 8

Sigue duplicando y rotando hasta que tengamos un círculo completo de llamas.

Paso 9

Aplica la sombra interior con el color #b48f0b y el brillo exterior con el color #f9dc7e.

 

Paso 10

Para ayudarnos, el sol está ahora oculto a la vista. Dibuja más triángulos amarillos como se ve abajo.

Paso 11

Añade una forma circular en el centro de los triángulos y establece su modo de trayectoria en Subtract.

Ya hemos terminado, así que volvamos a traer las formas de la llamarada y el sol.

Paso 12

Para conseguir un sol realista, necesitamos pintar una forma circular amarilla borrosa detrás del sol. Puedes dibujarla manualmente usando un pincel suave, o dibujar un círculo primero y luego suavizarlo usando un filtro de Desenfoque Gaussiano.

Paso 13

Haz doble clic en la capa del grupo de íconos para añadir un estilo de capa. Añade un Resplandor interior con negro para su color y modo de fusión Multiplicar.

Con este estilo de capa, hemos añadido una silueta oscura al ícono.

Paso 14

A continuación, vamos a añadir un símbolo RSS dentro del ícono. Comienza por dibujar una forma de círculo en la parte superior de la base del ícono.

Paso 15

Duplica y luego pega el trazado (Control-C, Control-V). Pulsa Control-T y luego transfórmalo en una forma más pequeña. Ajusta su modo a Subtract Front Shape.

Paso 16

Duplica el trazado y hazlo más pequeño. Establece su modo en Combinar formas.

Paso 17

Sigue repitiendo los pasos hasta que tenga la siguiente forma.

Paso 18

Añade dos rectángulos y establece su modo a Subtract Front Shape. Ve la imagen de abajo para conocer su posición.

Paso 19

Haz doble clic en los símbolos RSS y luego aplica Resplandor Interior, Degradado y Sombra.

Este es el resultado con un aumento del 100%.

Paso 20

A continuación añade un símbolo de copo de nieve en el tercer ícono. Activa la herramienta de formas personalizadas y carga el conjunto de formas vectoriales de la naturaleza desde la barra de opciones.

Aparecerá un cuadro de diálogo de advertencia, pidiendo que reemplaces o añadas el tema de formas vectoriales de la Naturaleza en las formas ya existentes. Puedes hacer clic en Aceptar.

Paso 21

Selecciona la forma de copo de nieve de la lista desplegable.

Step 22

Haz clic y arrastra para dibujar un símbolo de copo de nieve sobre el ícono.

Este es el resultado con un aumento del 100%. ¡Hemos terminado el pack de íconos!

¡Buen Trabajo! Haz Terminado este Tutorial de Photoshop

Como hemos visto en este tutorial de Photoshop, diseñar un pack de íconos no es tan difícil. Antes de trabajar en el dibujo del símbolo, hay que preparar el tema general. En este caso, el ícono se coloca en una forma de rectángulo redondeado y un triángulo. Espero que hayas disfrutado del tutorial de cómo usar Photoshop y hayas aprendido algo nuevo.

¡No olvides visitar Envato Elements si deseas descargas ilimitadas de los mejores íconos de Photoshop ya listos para usar!