Cómo Crear Íconos del Clima en Estilo Diseño Plano en Adobe Photoshop

¡Las lluvias de Abril traen las flores de Mayo! Tradicionalmente se sabe que Abril es un período muy lluvioso, cuando el clima cambia inesperadamente del sol brillando en un cielo despejado a lluvias torrrenciales. Sin embargo, cualquier clima tiene su propia belleza, así que ¡inspirémonos y preparémonos para la primavera con éste divertido tutorial! Estaremos trabajando en Adobe Photoshop para crear un conjunto de íconos de clima de Abril en Estilo Diseño Plano, usando formas básicas y texturas con pinceles artísticos.

Adobe Photoshop tiene muchas magníficas herramientas y trucos para crear íconos de una manera rápida y conveniente. Puedes usar las siguientes técnicas para crear no sólamente un conjunto de íconos de clima, sino también cualquier otra clase de íconos en estilo de diseño plano, como íconos de viaje o de acampar, íconos de la naturaleza en estilo diseño plano y otros.

¡Comencemos!

1. Crea un Colorido Ícono de Arcoíris

Paso 1

Comenzaremos creando la franja roja exterior de nuestro arcoíris. Toma la Herramienta Elipse (U) y haz un círculo de 450 x 450 px. Dirígete al panel Propiedades (Ventana > Propiedades) y desde aquí podemos cambiar el tamaño de la forma, su posición, colores y otros parámetros.

Establece el grosor del Trazo en 3 pt, color de Relleno en Ninguno, y ajustemos el color de Trazo. Haz click en el ícono Trazo para abrir la ventana de opciones con muestras de color, y selecciona una de las muestras o haz click en el colorido ícono en la esquina superior derecha para abrir la ventana Color Uniforme y selecciona el color de manera más precisa.

Paso 2

Agreguemos otro aro. Selecciona el círculo rojo en el panel Capas y presiona Control-J para hacer una copia de la capa. Presiona Control-T para transformar la forma y haz una copia un poco más pequeña, colocándola dentro del círculo rojo. Cambia el color de Trazo a naranja en el panel Propiedades.

Paso 3

Haz otra copia (Control-J) para agregar un tercer círculo de un tamaño más pequeño, cambiando el color de Trazo a amarillo.

Paso 4

Continúa agregando círiculos, rellenándolos con colores de arcoíris. Puedes añadir los siete colores o menos, pues no necesitamos hacer nuestro arcoíris super realista y detallado, porque nuestro ícono será demasiado pequeño. Aún si agregan únicamente tres o cuatro aros de diferentes colores, todavía se parecerá a un arcoíris.

Cuando estés satisfecho con el resultado, selecciona todos los aros usando la Herramienta Mover (V) y únelos en un Grupo (Control-G). Dirígete al panel Capas y Duplica el grupo presionando Control-J o al arrastrarlo y soltarlo en el ícono de Crear una Nueva Capa en la parte inferior del panel. De ésta manera hacemos una copia "de respaldo" en caso que decidamos cambiar algunos detalles de nuestro arcoíris durante el trabajo.

Selecciona el primer grupo y ve a Capa > Combinar Grupo, uniendo todos lo aros separados en una capa rasterizada.

Paso 5

Ahora tomemos la Herramienta Marco Rectangular (M), selecciona la mitad inferior del círculo del arcoíris y elimínala.

Paso 6

Creemos un par de voluminosas nubes en los extremos del arcoíris. Toma la Herramienta Elipse (U) y haz un pequeño círculo azul en la esquina inferior izquierda del arcoíris. Agrega unos cuantos círculos más, varianto el tamaño. Agrupa (Control-G) los elementos de la nube y duplica (Control-J) la nube. Une la copia al lado opuesto del arcoíris.

Paso 7

Si deseas cambiar algo, siempre puedes usar nuestra copia "de respaldo" y ajustar la apariencia del arcoíris a tu gusto. En mi caso, he decidido reducir el número de franjas, de ésta manera haciéndolas más gruesas.

Paso 8

Ahora creemos la base de nuestro ícono. Hagamos el ícono redondo al crear un círculo de 545 x 545 px con la Herramienta Elipse (U). Usa el panel Propiedades para establecer el color de Relleno en verde pasto y el color de Trazo en ninguno.

Paso 9

Agreguemos un efecto de sombra larga de moda a nuestro ícono. Haz un cuadrado verde de 350 x 350 px con la Herramienta Rectángulo (U) y rótalo 45 grados con la Herramienta Mover (V). Dirígete al panel Capas y establece el Modo de Fusión en Multiplicar para hacer más oscuro el cuadrado. Luce demasiado oscuro, intenta disminuir la Opacidad un poco.

Paso 10

Ajusta el tamaño y la posición del rectángulo para hacerlo encajar en los lados del arcoíris como se muestra en la captura de pantalla de abajo. Coloca el rectángulo debajo del arcoíris al arrastrarlo manualmente hacia abajo en el panel Capas o al presionar Control-[ varias veces.

Paso 11

Ahora necesitamos cortar la parte del rectángulo que se sale de la base del círculo del ícono. Selecciona el círculo y toma la Herramienta Pluma (P), haz click en el círculo con el botón derecho del mouse, y Crear Selección. Deja las opciones de Crear Selección en la ventana emergente como predeterminadas y ve a Selección > Invertir.

Ahora podemos seleccionar la capa de la sombra en el panel Capas y eliminar la pieza no deseada afuera del círculo.

Paso 12

Usemos la Herramienta Borrador (E) para borrar las piezas innecesarias de la sombra dentro del ícono también.

Haz la base del ícono y la sombra un poco más clara, y ¡voila! ¡Nuestro ícono de arcoíris de estilo diseño plano está listo! Pasemos al siguiente.

2. Crea un Ícono de Sol de Primavera

Paso 1

Ésta vez haremos un ícono de sol. Comienza por crear la base del sol desde un rectángulo amarillo de 260 x 260 px.

Paso 2

Ahora agreguemos algunos estilizados rayos solares. Cambia a la Herramienta Polígono (U) y establece el número de Lados en 3 en el panel de control superior. Haz un triángulo naranja y colócalo arriba del sol. Selecciona el círculo y el triángulo y haz click en Alinear centros horizontales en el panel de control superior y haz las formas perfectamente centradas.

También podemos usar las Guías para marcar el centro del sol. Para hacer ésto, presiona Control-R para hacer visibles las Reglas, haz click en la regla superior y arrastra hacia abajo la Guía horizontal en la Mesa de Trabajo. Haz lo mismo para la guía vertical, haciendo que se crucen las líneas.

Ahora agreguemos más rayos alrededor del sol. Podría parecer complicado, pero es la manera más fácil de crear formas repetidas con transformación.

Selecciona nuestro triángulo y presiona Alt-Control-T para el modo Transformación Libre de Trazado. Encuentra el punto pivote en el centro del triángulo y arrástralo hacia abajo, colocándolo en el centro del círculo amarillo del sol. Notarás que una copia de la capa del triángulo fue creada automáticamente en el panel Capas (ésta funciona únicamente cuando usas las teclas Alt-Control-T para transformación). Rota el triángulo 45 grados al mantener presionada la tecla Mayúsculas, y aplica la transformación.

Ahora presiona varias veces Mayúsculas-Control-Alt-T para crear seis copias más alrededor del sol.

¡Magnífico! Los rayos del sol están listos.

Paso 3

Ya no necesitamos las Guías, así que podemos deshabilitarlas en Ver > Borrar Guías.

Paso 4

Copiemos la base del círculo de nuestro primer ícono y cambia su color de Relleno a azul cielo. Agrega una sombra larga semitransparente debajo del sol.

Paso 5

Borremos esa parte de la sombra alrededor del círculo amarillo del sol. Para éste propósito, toma la Herramienta Marco Elíptico (M) y haz una selección alrededor del círculo amarillo. Ve a Selección > Transformar Selección y modifica la selección para hacerla encajar el espacio entre el círculo amarillo y los rayos solares.

Aplica la transformación y selecciona nuestra capa de la sombra en el panel Capas. Elimina la parte de la sombra alrededor del sol.

¡Terminado! ¡Nuestro ícono del sol está listo! Continuemos.

3. Dibuja un Ícono de Nube de Lluvia

Paso 1

Comienza a formar nuestra nube desde un círculo azul de 200 x 200 px, usando la Herramienta Elipse (U). Agrega círculos más pequeños a ambos lados, haciendo una nube esponjada.

Paso 2

Selecciona todos los círculos y ve a Capa > Combinar Formas. Dirígete al panel Capas, haz click en la capa de la nube combinada con el botón derecho del mouse y Rasterizar Capa para hacerla editable.

Ahora podemos usar la Herramienta Marco Rectangular (M) para seleccionar la parte inferior de la nube y elimínala, haciendo plana la parte inferior de la nube.

Paso 3

Ahora formemos las gotas de lluvia. Usa la Herramienta Elilpse (U) para hacer un círculo azul de 35 x 35 px. Toma la Herramienta Convertir Punto (puedes encontrarlo en el mismo menú desplegable como la Herramienta Pluma (P) y selecciona el punto de ancla superior del círculo. Haz click en el punto de ancla para hacer puntiagudo un vértice. Finalmente, arrastra el punto hacia arriba, formando una gota de lluvia.

Paso 4

Presiona Control-J varias veces para hacer más copias de las gotas y espárcelas debajo de la nube, representando la lluvia.

Paso 5

Agrega una base de círculo amarillo a nuestro ícono y forma una sombra larga. ¡Nuestro ícono de nube de lluvia está terminado! ¡Nos falta únicamente un ícono!

4. Haz un Ícono de Sombrilla

Paso 1

Comencemos a formar nuestra sombrilla de un círculo de 430 x 430 px de color turquesa. Rasteriza la capa en el panel Capas y elimina la mitad inferior del círculo, usando la Herramienta Marco Rectangular (M).

Paso 2

Usa la Herramienta Elipse (U) para formar una fila de círculos en la parte inferior de la forma turquesa. Ajusta el tamaño del grupo de los círculos para hacerlos encajar en la sombrilla. Finalmente, selecciona todos los círculos y únelos en una sola forma en Capa > Combinar Formas.

Paso 3

Cambia a la Herramienta Pluma (P) y click derecho en los círculos para Crear Selección. Selecciona la capa de la forma turquesa en el panel Capas y elimina el área seleccionada para formar la parte inferior puntiaguda de la sombrilla.

Ahora que no necesitamos más los círculos naranja, podemos eliminar ésta capa también.

Paso 4

Creemos el poste de la sombrilla con mango de gancho de madera. Toma la Herramienta de Rectángulo Redondeado (U) y haz una forma sin Relleno y un Trazo naranja de 4 pt de grosor, como se muestra en la imagen de abajo.

Click-derecho en el panel Capas y Rasterizar Capa para hacer el mango editable.

Paso 5

Toma la Herramienta Marco Rectangular (M) y eliminar la pieza superior del mango, dejando únicamente los extremos cortos arriba de la forma turquesa. Luego selecciona y elimina la mitad izquierda de la forma, formando un mango de gancho.

Manteniendo la capa del mango seleccionada,presiona Mayúsculas-Control-[ para colocarla debajo de la forma de la sombrilla turquesa.

Paso 6

Finaliza el ícono de la sombrilla al hacer una base de círculo rosa y agregando una sutil sombra de estilo plano.

¡Maravilloso! Nuestro conjunto de íconos de clima de Abril está lista.

Sin embargo, éste no es el final de éste tutorial. Te puedes detener en éste paso si te gusta el aspecto limpio y minimalista de los íconos. De otra manera, si quieres hacerlos un poco más detallados y texturizados, procedamos y veamos cómo podemos ajustar los íconos, usando algunos de los pinceles artísticos de Adobe Photoshop.

5. Aplica Texturas Ásperas Usando Pinceles

Paso 1

Comencemos con nuestro ícono del sol. Dirígete al panel Capas y selecciona la base del círculo amarillo del sol. Manten presionada la tecla Alt y haz click en Crear una nueva capa. En la ventana emergente, marca la casilla que dice Usar Capa Anterior para Crear Máscara de Recorte.

De ésta manera enlazamos nuestra capa a la capa del sol seleccionada (verás una diminuta flecha junto a la nueva capa). Lo que hace es permitirte dibujar sólamente dentro de los límites del sol amarillo.

Paso 2

Ahora tomemos un bonito pincel de textura para crear un efecto áspero. Puedes usar uno de tus favoritos o algunos de los pinceles preestablecidos de Adobe Photoshop. También puedes encontrar muchísimos pinceles de arte texturizado en Envato Market y pruébalos para crear un nuevo sofisticado aspecto.

Toma la Herramienta Pincel (B) y haz click-derecho para abrir la lista de pinceles (o ve a Ventana > Pinceles). Haz click en el ícono de la rueda dentada en la esquina superior derecha del menú emergente y selecciona Pinceles M de la lista de abajo. Agrega los pinceles a tu lista existente o Sustitúyelos.

Paso 3

Encuentra el Pincel Seco 1 #2 en la lista y selecciónalo. Si no tienes tal conjunto de pinceles en tu versión del programa, trata de abrir otros conjuntos predeterminados, como Pinceles Secos u otros para encontrar un pincel áspero similar.

Paso 4

Selecciona un color amarillo más claro en el panel Color y usa nuestra capa enlazada para dibujar arriba del sol, agregando una sutil textura áspera. Usa un color naranja más oscuro para agregar una sutil sombra en la parte inferior del sol.

Combina los rayos solares en una sola forma y agrega una capa enlazada para hacerlos texturizados también.

Paso 5

Pasemos al ícono del arcoíris y hágamoslo texturizado también. Creamos unas cuantas capas enlazados para el arco del arcoíris y para cada nube y  usa la misma técnica con el pincel artístico.

Paso 6

Continúa usando los pinceles para aplicar texturas ásperas a cada ícono.

Paso 7

Crea una Nueva Capa arriba de la capa Fondo y dibuja sutiles sombras texturizadas de color amarillo claro debajo de cada ícono.

¡Maravilloso! ¡Nuestros Íconos de Clima de Abril Están Listos!

¡Sensacional trabajo! Hemos aprendido a dibujar íconos de clima de estilo diseño plano usando formas básicas y apicando texturas simples, con la ayuda de los pinceles predeterminados de Adobe Photoshop para hacer que nuestros íconos luzcan más detallados y creativos.

Puedes usar éstas técnicas para expandir nuestro conjunto, creando más íconos, o hacer un nuevo conjunto de un tema diferente.

¡Buena Suerte!