Tutorial de Illustrator para crear pack de íconos de verano

Ya que el verano llegó, pensé que sería agradable invitarte a un breve tutorial de pack íconos de Adobe Illustrator usando algunos de los accesorios más comunes que normalmente llevarías para las vacaciones. Como siempre, crearemos cada recurso utilizando herramientas y formas geométricas básicas, así que si eres nuevo en Adobe Illustrator, este será en verdad un buen ejercicio de ilustraciones de verano.

Ah, antes de que se me olvide, siempre puedes extender el paquete de íconos de Illustrator visitando GraphicRiver, donde encontrarás una magnífica selección de íconos de verano.

Dicho eso, toma una taza de té helado de menta y entremos en materia para el diseño de verano.

1. Cómo configurar un nuevo archivo para las ilustraciones de verano

Ya que supongo que tendrás abierto Illustrator en segundo plano, ponlo en la pantalla y configuremos un Nuevo documento (Archivo > Nuevo o Control-N) usando los siguientes parámetros para el pack de íconos:

• Número de mesas de trabajo: 1
• Anchura: 800 px
• Altura: 600 px
• Unidades: Pixels

Y de la pestaña Avanzado:

• Modo de color: RGB
• Efectos de rasterizado: Pantalla (72ppp)
• Modo de previsualización: Por defecto

2. Cómo configurar una cuadrícula personalizada para el pack de íconos

Ya que vamos a crear los íconos de verano usando un flujo de trabajo pixel-perfect, desearemos configurar una bonita Cuadrícula para que podamos tener control total sobre nuestras formas de las ilustraciones de verano.

Paso 1

Aplica el submenú Edición > Preferencias > Guías y cuadrícula y ajusta los siguientes parámetros:

• Línea de cuadrícula cada: 1 px
• Subdivisiones: 1

Consejo rápido: puedes aprender más sobre cuadrículas leyendo este detallado artículo sobre Cómo funciona el sistema de cuadrícula de Illustrator.

Paso 2

Una vez que hemos configurado nuestra cuadrícula, todo lo que necesitamos hacer para asegurarnos que nuestras formas luzcan nítidas es habilitar las opciones de Ajustar a cuadrícula y Ajustar al pixel, ubicadas en el menú Ver.

Ahora si eres nuevo en el "flujo de trabajo pixel-perfect", te recomiendo encarecidamente consultar mi tutorial Cómo crear una ilustración pixel-perfect, que te ayudará a ampliar tus habilidades técnicas sobre íconos en Adobe Illustrator en muy poco tiempo.

3. Cómo configurar las capas para los íconos de Illustrator

 Con el nuevo documento creado iniciando el tutorial de Illustrator, sería una buena idea estructurar nuestro proyecto usando un par de capas, ya que de esta manera podemos mantener un flujo de trabajo estable enfocándonos en un ícono a la vez.

Dicho eso, activa el panel Capas y crea un total de cinco capas, que renombraremos de la siguiente manera:

• capa 1: reference grids (cuadrículas de referencia)
• capa 2: sunglasses (gafas para sol)
• capa 3: sun cream (bronceador)
• capa: inflatable ring (flotador)
• capa 5: shell (concha de mar)

4. Cómo crear las cuadrículas de referencia para el diseño de verano

Las cuadrículas de referencia (o cuadrícula base) son un conjunto de superficies de referencia delimitadas con precisión, que nos permiten elaborar nuestros íconos enfocándonos en el tamaño y la consistencia.

Generalmente, el tamaño de la cuadrícula determina el tamaño de los íconos y siempre debería ser la primera decisión que tomas una vez que inicias un nuevo proyecto, ya que siempre querrás comenzar desde el menor tamaño posible y continuar la elaboración a partir de ese punto.

Ahora, en nuestro caso, vamos a crear el paquete de íconos usando solo un tamaño, más exactamente 128 x 128 px, que es lo suficientemente grande.

Paso 1

Comienza bloqueando todas las capas menos "reference grids" y luego toma la herramienta Rectángulo (M) y crea un cuadrado naranja de 128 x 128 px (#F15A24).

Paso 2

Agrega uno más pequeño de 120 x 120 px (#FFFFFF) que ubicaremos arriba de la forma anterior, ya que actuará como nuestra área de dibujo activa, dándonos así un relleno de 4 px para trabajar.

Paso 3

Selecciona y agrupa los dos cuadrados usando el atajo de teclado Control-G, alineándolos al centro respecto a la mesa de trabajo subyacente. Crea las restantes cuadrículas usando tres copias (Control-C > Control-F tres veces) a una distancia horizontal de 40 px de la original, bloqueando la capa actual antes de pasar a la siguiente sección.

5. Cómo hacer un ícono en Illustrator de gafas para sol

Asumiendo que terminaste de crear las pequeñas cuadriculas de referencia, pasamos a la siguiente capa (esa sería la segunda) y comencemos el proyecto creando nuestro primer ícono de verano.

Paso 1

Comenzamos a trabajar en el lente izquierdo de las gafas creando una forma de elipse de 48 x 44 px, que pondremos de color #FF8C69 y luego la ubicamos a una distancia de 6 px del borde izquierdo del área de dibujo activa y a 8 px de su borde superior.

Paso 2

Ajusta la forma del rectángulo estableciendo el Radio de todas las esquinas a excepción del vértice superior derecho en 22 px desde las Propiedades del rectángulo en el panel Transformar.

Paso 3

Dale a la forma resultante un contorno usando el método Trazo, creando una copia de ella (Control-C), que pegaremos delante (Control-F) y luego la ajustaremos cambiando primero su color a #3D2F2C. Intercambia el Relleno de la copia con su Trazo (Mayúsculas-X), asegurándote de establecer su Grosor en 4 px. Una vez que termines, selecciona y agrupa ambas formas usando el atajo de teclado Control-G antes de continuar al siguiente paso.

Paso 4

Comenzamos a trabajar en la pieza del extremo izquierdo, creando un rectángulo redondeado de 12 x 4 px de color (#3D2F2C) con un Radio del vértice de 2 px, que alinearemos con el borde izquierdo del área de dibujo activa, ubicándolo a una distancia de 16 px de su borde superior.

Paso 5

Crea otro rectángulo más pequeño de 8 x 4 px con el color (#3D2F2C), que alinearemos con el borde derecho de la forma anterior, ubicándolo para que termine superponiendo su mitad superior. Una vez que termines, selecciona y agrupa (Control-G) los dos antes de continuar con el siguiente paso.

Paso 6

Selecciona las formas que acabamos de agrupar y luego colócalas debajo del lente más grande dando clic derecho > Organizar > Enviar detrás.

Paso 7

Finaliza el lente izquierdo agregando un rectángulo de 20 x 4 px con el color (#3D2F2C) arriba de su contorno más grande, colocándolo a una distancia de 4 px de su borde derecho. Una vez que termines, selecciona y agrupa (Control-G) todas las formas de la sección actual antes de continuar con el siguiente paso.

Paso 8

Crea el lente derecho usando una copia del que terminamos recientemente, la cual reflejaremos verticalmente (clic derecho > Transformar > Reflejar > Vertical) y luego colocaremos en el lado opuesto del área de dibujo activa subyacente.

Paso 9

Enlaza los dos lentes usando un rectángulo de 40 x 4 px con el color (#3D2F2C), que centraremos alineado con el borde superior del área de dibujo activa.

Paso 10

Crea las secciones del puente más pequeño usando dos líneas de Trazo con un ancho de 12 px un grosor de 4 px, con un color (#3D2F2C), que apilaremos verticalmente a una distancia de 2 px una de la otra, agrupando (Control-G) y luego alineándolas con el borde superior de los lentes.

Paso 11

Crea la sección de la nariz usando un círculo de 12 x 12 px con un Trazo de un grosor de 4 px y un color (#3D2F2C), que colocaremos debajo de los puentes más pequeños a una distancia de 2 px.

Paso 12

Ajusta la forma del círculo que acabamos de crear, seleccionando su punto de ancla inferior utilizando la herramienta Selección directa (A) y luego eliminándolo presionando la tecla Suprimir. Ya que casi está concluido el trabajo en las gafas, selecciona todas las secciones que las componen y agrúpalas (Control-G) antes de continuar al siguiente paso.

Paso 13

Agrega la sección del cordón izquierdo usando un rectángulo de 12 x 88 px con un Trazo de un grosor de 4 px con un color (#3D2F2C), que alinearemos con el borde inferior del área de dibujo activa, colocándolo a una distancia de 4 px de su borde izquierdo.

Paso 14

Ajusta la sección inferior del cordón estableciendo el Radio de sus vértices inferiores en 6 px dentro de las Propiedades del rectángulo del panel Transformar. Una vez que termines, no olvides colocar la forma resultante debajo de las gafas (clic derecho > Organizar > Enviar detrás) antes de continuar al siguiente paso.

Paso 15

Crea la sección del cordón derecho usando una copia (Control-C > Control-F) de la que acabamos de terminar, que colocaremos en el lado opuesto de las gafas, manteniendo la misma brecha de 4 px entre ella y el borde derecho del área de dibujo activa.

Paso 16

Finaliza el ícono añadiendo la sección del cordón central usando una Trazo de 12 px de ancho y 4 px de grosor con un color (#3D2F2C), que colocaremos debajo de la sección de la nariz, a una distancia de 8 px de su arco superior. Una vez que termines, selecciona y agrupa (Control-G) las partes que componen el ícono en Adobe Illustrator.

6. Cómo crear un bronceador como parte del pack de íconos

Dando por sentado que terminaste tu primer ícono de Illustrator, bloquea su capa y pasa a la siguiente (esa sería la tercera) donde comenzaremos a trabajar en nuestra segunda ilustración de verano.

Paso 1

Crea la tapa del bronceador usando un rectángulo de 40 x 14 px (#89DBCC) que ajustaremos estableciendo el Radio de sus vértices inferiores a 4 px dentro de las Propiedades del rectángulo del panel Transformar. Da a la forma resultante una contorno de 4 px de grosor, un color (#3D2F2C), agrupando (Control-G) y luego alineando el centro de las dos con el borde inferior del área de dibujo activa.

Paso 2

Agrega la pequeña inserción usando un rectángulo de 12 x 6 px con un color (#3D2F2C), que alinearemos al centro con el borde superior de la tapa, asegurándonos seleccionarlos y agrupándolos usando el atajo de teclado Control-G.

Paso 3

Crea la sección del cuello usando un rectángulo de 40 x 8 px con un color (#FF8C69) y un contorno de un grosor de 4 px y color (#3D2F2C), que agruparemos (Control-G) y luego colocaremos arriba de las formas previamente agrupadas.

Paso 4

Comenzamos a trabajar en el cuerpo principal del envase creando un rectángulo de 40 x 8 px con un color (#C5EFE7), que colocaremos arriba de la sección del cuello. Agrega uno ligeramente más ancho de 56 x 8 px con un color (#C5EFE7), que colocaremos a una distancia de 8 px del borde superior del área de dibujo activa.

Paso 5

Abre los trazados de los dos rectángulos añadiendo un punto de ancla al centro de sus bordes interiores utilizando la herramienta Añadir punto de ancla (+) y luego eliminándolos al seleccionarlos usando la herramienta Selección directa (A) e inmediatamente presionando Suprimir.

Paso 6

Une los dos trazados en una sola forma más grande seleccionándolos y luego presionando dos veces el atajo de teclado Control-J.

Paso 7

Da a la forma resultante un contorno de un grosor de 4 px, con un color (#3D2F2C), seleccionando y agrupando los dos usando el atajo de teclado Control-G.

Paso 8

Comenzamos añadiendo detalles al envase creando las dos líneas de texto de muestra usando un rectángulo de 16 x 4 px con un color (#3D2F2C) apilado verticalmente a una distancia de 4 px de otro ligeramente más ancho de 20 x 4 px con un color (#3D2F2C). Agrupa (Control-G) los dos, y luego alinéalos centrados respecto al borde inferior de la sección actual, colocándolos a 10 px.

Paso 9

Crea el pequeño sol utilizando un círculo de 16 x 16 px de color (#FFCF6E) con un contorno de 4 px de grosor, con un color (#3D2F2C), que agruparemos (Control-G) y luego colocaremos arriba de las dos líneas de texto a una distancia de 18 px.

Paso 10

Toma tu tiempo para continuar con el diseño de verano, y dibuja los pequeños rayos de sol usando ocho Trazos de 4 px de grosor con un color (#3D2F2C) con un Extremo redondeado que colocaremos a una distancia de 2 px del contorno del sol. Una vez que termines, selecciona los rayos y el sol y agrúpalos (Control-G) antes de continuar con el siguiente paso.

Consejo rápido: para este paso, recomiendo encarecidamente cambiar al modo de Previsualizacion de pixeles (Alt-Control-Y) para tener control total sobre la colocación de tus puntos de ancla.

Paso 11

Agrega la línea del detalle horizontal usando un Trazo de 56 px de ancho y un grosor de 4 px con color (#3D2F2C), que colocaremos a una distancia de 4 px del borde superior del envase.

Paso 12

Crea las inserciones verticales usando cuadrados de 4 x 4 px  con un color (#3D2F2C) apilados verticalmente a 4 px uno del otro, que agruparemos (Control-G) y luego alinearemos al centro con respecto al borde superior del envase. Una vez que termines, selecciona y agrupa todas las formas que conforman la sección actual antes de continuar con el siguiente paso.

Paso 13

Terminemos el envase y por ende el ícono, añadiendo un rectángulo de 56 x 6 px con color (#FFCF6E) con un contorno de 4 px de grosor, y un color (#3D2F2C), que agruparemos (Control-G) y luego alinearemos al centro con el borde superior del área de dibujo activa. Una vez que termines, selecciona y agrupa (Control-G) todas las secciones que conforman el ícono, antes de continuar con el siguiente paso.

7. Crea el flotador continuando con el tutorial de Illustrator de íconos de verano

Asegúrate de estar en la capa correcta (esa sería la cuarta) y luego haz un acercamiento en nuestra tercera cuadrícula de referencia para que podamos empezar a trabajar en nuestra siguiente ilustración de verano.

Paso 1

Crea la sección inferior del flotador usando un rectángulo redondeado de 104 x 104 px con un color (#89DBCC) con un Radio del vértice de 16 px, que colocaremos al centro del área de dibujo activa subyacente.

Paso 2

Crea el corte circular usando un círculo de 40 x 40 px (resaltado en rojo), que colocaremos en el centro de la forma más grande y luego eliminaremos usando el Modo de forma Menos frente del panel Buscatrazos.

Paso 3

Da a la forma resultante un contorno con un grosor de 4 px, con color (#3D2F2C), seleccionando y agrupando (Control-G) las dos antes de continuar con el siguiente paso.

Paso 4

Crea la sección frontal del flotador utilizando un círculo de 116 x 116 px el cual pondremos de color #9D93E5 y luego alinearemos al centro con las formas previamente agrupadas.

Paso 5

Agrega el recorte circular usando un círculo de 52 x 52 px (resaltado en rojo) que eliminaremos de su cuerpo más grande usando el Modo de forma Menos frente del panel Buscatrazos.

Paso 6

Comenzamos trabajando en el trapezoide superior creando un rectángulo de 32 x 40 px, con color (#FFCF6E), que colocaremos en el centro del borde superior de la cuadrícula de referencia y luego ajustaremos individualmente seleccionando y empujando sus puntos de ancla inferiores hacia el interior a una distancia de 10 px usando la herramienta Mover (clic derecho > Transformar > Mover > Horizontal > + / - 10 px dependiendo de cuál lado comiences).

Paso 7

Da a la forma resultante un contorno de 4 px de grosor, con un color (#3D2F2C), seleccionando y luego agrupando las dos usando el atajo de teclado Control-G.

Paso 8

Crea el trapezoide inferior usando una copia (Control-C > Control-F) del que acabamos de terminar, y el cual reflejaremos horizontalmente (clic derecho > Transformar > Reflejar > Horizontal) y luego alinearemos con el borde inferior de la cuadrícula de referencia subyacente.

Paso 9

Agrega los trapezoides izquierdo y derecho creando una copia (Control-C > Control-F) de los que ya hicimos, y que rotaremos 90° usando la herramienta Rotar (clic derecho > Transformar > Rotar > 90°).

Paso 10

Toma unos momentos y agrega las pequeñas manchas negras de guepardo con el color (#3D2F2C) a cada uno de los trapezoides. Una vez que termines, selecciona individualmente y agrupa (Control-G) cada una de las cuatro secciones, haciendo posteriormente lo mismo para los cuatro.

Paso 11

Aplica una máscara al trapezoide, usando una copia (Control-C) de la sección frontal del flotador, que pegaremos delante (Control-F) y luego convertiremos en Máscara de recorte seleccionándola a ella y a las formas que queremos enmascarar y luego aplicamos clic derecho > Crear máscara de recorte.

Paso 12

Dale a la sección frontal un contorno de 4 px de grosor, con un color (#3D2F2C) usando el método de Trazo, asegurándote de seleccionar y agrupar todas las formas que lo componen usando el atajo de teclado Control-G.

Paso 13

Terminemos el flotador creando la pequeña válvula de aire usando un círculo de 8 x 8 px con un color (#89DBCC), con un contorno de 4 px de grosor y un color (#3D2F2C), al centro del cual añadiremos uno pequeño de 2 x 2 px, con un color (#3D2F2C). Agrupa (Control-G) y coloca las tres formas en la esquina inferior derecha de la sección interior, seleccionando y agrupando (Control-G) todas las secciones que conforman el ícono antes de continuar a la parte final del tutorial sobre cómo hacer íconos en Illustrator.

8. Cómo hacer un ícono en Adobe Illustrator representando una concha de mar

Pasamos a nuestro cuarto y último ícono, así que asumiendo que ya te colocaste en la capa correcta (esa sería la quinta), haz un acercamiento en su cuadrícula de referencia y terminemos.

Paso 1

Comienza trabajando en la sección superior de la concha creando un rectángulo de 24 x 6 px con un color (#3D2F2C), que ajustaremos estableciendo el Radio de sus vértices superiores en 6 px, alineando la forma resultante al centro respecto al borde superior del área de dibujo activa.

Paso 2

Crea la sección del umbo usando una elipse de 36 x 16 px con un color (#6CBAAB), que ajustaremos empujando hacia abajo su punto de ancla inferior a una distancia de 8 px utilizando la herramienta Mover (clic derecho > Transformar > Mover > Vertical > 8 px). Dale a la forma resultante un contorno de 4 px de grosor, con un color (#3D2F2C), agrupando (Control-G) y luego colocando los dos arriba de la forma previa como se observa en la imagen de referencia.

Paso 3

Crea otra elipse más pequeña de 12 x 8 px con un color (#3D2F2C), que alinearemos al centro con respecto al borde superior de la sección previa. Una vez que termines, selecciona y agrupa (Control-G) todas las formas que tenemos hasta ahora antes de continuar al siguiente paso.

Paso 4

Comienza a trabajar en el cuerpo principal de la concha creando una elipse de 92 x 72 px con un color (#89DBCC), que colocaremos a una distancia de 2 px del centro del borde inferior del área de dibujo activa.

Paso 5

Ajusta la forma seleccionando su punto de ancla superior usando la herramienta Selección directa (A) y luego empujándolo hacia arriba a una distancia de 28 px usando la herramienta Mover (clic derecho > Transformar > Mover > Vertical > -28 px) .

Paso 6

Crea la sección interior de la concha usando una elipse de 96 x 56 px con un color (#C5EFE7), que colocaremos a una distancia de 12 px del borde inferior del cuerpo más grande.

Paso 7

Ajusta la forma que acabamos de crear seleccionando y empujando su punto de ancla superior hacia arriba a una distancia de 32 px usando la herramienta Mover (clic derecho > Transformar > Mover > Vertical > -32 px).

Paso 8

Dale a la forma resultante un contorno de 4 px de grosor con un color (#3D2F2C), seleccionando y agrupando (Control-G) los dos componentes.

Paso 9

Crea el anillo vertical usando una elipse de 58 x 164 px con un Trazo de 4 px de grosor, con un color (#3D2F2C), que ajustaremos eliminando su mitad inferior seleccionando y eliminando (con la tecla Suprimir) su punto de ancla inferior. Una vez que termines, coloca la forma resultante en el centro del borde superior de la sección interior.

Paso 10

Agrega la línea del detalle vertical usando un Trazo de 88 px con 4 px de grosor con un color (#3D2F2C), que colocaremos en el centro del borde inferior de la sección interior.

Paso 11

Selecciona y agrupa (Control-G) todas las formas que conforman la sección interior, enmascarándolas después usando una copia (Control-C) del cuerpo más grande de la concha que pegaremos delante (Control-F) y luego usándola como Máscara de recorte (clic derecho > Crear máscara de recorte).

Paso 12

Finaliza el ícono y con él todo el proyecto, añadiendo el contorno de 4 px de grosor, con un color (#3D2F2C) al cuerpo principal de la concha, seleccionando y agrupando (Control-G) todas las formas que la conforman. Una vez que termines, selecciona y agrupa (Control-G) todas las secciones del ícono antes de usar el atajo de teclado Control-S.

¡Se acabó! ¡Ya sabes cómo hacer íconos en Illustrator!

Ahí lo tienen compañeros diseñadores, un bonito y sencillo ejercicio sobre cómo hacer íconos en Illustrator con diseños de verano, usando las herramientas y las formas más básicas. Espero que hayas podido seguir cada paso del tutorial de Illustrator y, lo más importante, hayas aprendido algunas cosas nuevas y útiles en el proceso.