Cómo Crear un Paquete de Íconos con Temática del Amor en Adobe Illustrator

Ya que el Día de San Valentín no está tan leos, pensé que sería agradable darte un inicio prematuro éste año y enseñarte cómo crear un simpático paquete de íconos con temática del amor que pudieras usar en cualquier proyecto personal que involucre a tus seres queridos. Como siempre, vamos a usar algunas de las herramientas básica con las que ya probablemente trabajas diariamente, para que puedas seguir todos y cada uno de los pasos.

Así que sin perder más tiempo, toma una taza de té de rosas, y comencemos.

Oh, y antes de que se me olvide, siempre puedes expandir el proyecto al consultar GraphicRiver dónde puedes encontrar una vasta cantidad de íconos con temática del amor.

1. Cómo Configurar un Nuevo Documento

Ya que estoy seguro de que ya tienes abierto Illustrator en segundo plano, tráelo al frente y configuremos un Nuevo Documento (Archivo > Nuevo o Control-N) usando los siguientes parámetros:

• Número de Mesas de Trabajo: 1
• Anchura: 800 px
• Altura: 600 px
• Unidades: Pixeles

Y de la pestaña Avanzado:

• Modo de Color: RGB
• Efectos de Rasterización: Pantalla (72ppi)
• Modo de Previsualización: Por Defecto

Consejo rápido: algunos de ustedes podrían haber notado que la opción Alinear Nuevos Objetos con Cuadrícula de Pixeles no aparece. Es porque estoy usando la nueva versión CC 2017 del software, dónde se han efectuado grandes cambios sobre cómo Illustrator maneja la manera en que las formas se ajustan a la subyacente Cuadrícula de Pixeles.

2. Cómo Configurar una Cuadrícula Personalizada

Ya que vamos a crear los íconos usando un flujo de trabajo pixel-perfect, vamos a querer configurar una bonita Cuadrícula pequeña para que podamos tener control total sobre nuestras formas- en caso de que estemos usando la versión anterior del software.

Paso 1

Ve al submenú Edición > Preferencias > Guías & 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 al leer este artículo detallado sobre cómo funciona el Sistema de Cuadrícula de Illustrator.

Paso 2

Una vez que hayas configurado nuestra cuadrícula, todo lo que necesitamos hacer para asegurarnos que nuestras formas luzcan nítidas es habilitar la opción Ajustar a Cuadrícula encontrada en el menú Ver, que se transformará  en Ajustar a Pixel cada vez que ingreses en el modo Previsualización de Pixeles.

Ahora, si eres nuevo en todo el "flujo de trabajo pixel-perfect", te recomiendo ampliamente que consultes mi tutorial sobre cómo crear una ilustración pixel-perfect, que te ayudará a ampliar tus habilidades técnicas al instante.

3. Cómo Configurar las Capas

Con el Nuevo Documento creado sería una buena idea estructurar nuestro proyecto usando un par de capas, ya que de ésta manera podemos mantener un flujo de trabajo constante al enfocarnos en un ícono a la vez.

Dicho eso, enfócate en el panel Capas, y crea un total de cuatro capas, que renombraremos como sigue:

• capa 1 : referencie grids (cuadrícula base)
• capa 2: heart balloons (gobos en forma de corazón)
• capa 3: proposal ring (anillo de compromiso)
• capa 4: pastel

4. Cómo Crear las Referencie Grids (Cuadrícula Base)

Las reference grids (o cuadrícula base) son un conjunto de superficies de referencia delimitadas de manera precisa, que nos permiten construir nuestros íconos al enfocarnos en tamaño y consistencia.

Generalmente, el tamaño de la cuadrícula determina el tamaño de los íconos reales, y siempre deberían ser la primera decisión que tomes cuando inicias un nuevo proyecto, ya que siempre querrás comenzar desde el tamaño más chico posible y construir sobre ello.

Ahora, en nuestro caso, vamos a estar creando el paquete de íconos usando sólo un tamaño, más exactamente 128 x 128 px, que es un tamaño adecuado.

Paso 1

Comienza por bloquear todas las capas menos la reference grid (cuadricula base) y luego toma la Herramienta Rectángulo (M) y crea un cuadrado naranja (#f15A24) de 128 x 128 px, que ayudará a definir el tamaño general de tus íconos.

Paso 2

Agrega otro cuadrado más pequeño de 120 x 120 px (#FFFFFF) que actuará como nuestra área activa de dibujo, dándonos así un padding o margen interior de 4 px en todos los costados.

Paso 3

Agrupa los dos cuadrados que conforman la cuadrícula base usando el atajo de teclado Control-G, y luego crea dos copias a una distancia de 40 px una de la otra, asegurando alinearlos con el centro de la Mesa de Trabajo.

Una vez que termines,bloquea la capa actual y dirígente a la siguiente, dónde comenzaremos a trabajar en nuestro primer ícono.

5. Cómo Crear los Globos en Forma de Corazón

Iniciemos el proyecto creando nuestro primer ícono del conjunto, que como puedes ver es una mezcla de tres globos en forma de corazón que tienen la intención de enaltecer el corazón de tu ser amado. Dicho eso, asegúrate de estar en la capa adecuada (esa sería la segunda) y luego haz un acercamiento en la primera cuadrícula base para que podamos comenzar.

Paso 1

Comienza a trabajar en el globo más grande creando un círculo de 48 x 48 px, que pondremos de color #ED664C y luego lo alineamos con la esquina superior izquierda de la subyacente área activa de dibujo,a una distancia de 4 px de su borde superior y a 14 px de su borde izquierdo.

Paso 2

Crea otro círculo de 48 x 48 px, que pondremos de color del mismo valor (#ED664C), y luego lo colocaremos en el lado derecho de la subyacente área activa de dibujo, manteniendo las mismas distancias (4 px de arriba, 14 px de la derecha).

Paso 3

Crea la forma principal para la sección inferior, usando otro círculo de 48 x 48 px (#ED664C) que centraremos alineado con la subyacente área activa de dibujo, colocándolo a una distancia de 36 px de su borde inferior.

Paso 4

Selecciona todos los círculos, y luego únelos en una sola forma más grande usando el Modo de Forma Unificar del panel Buscatrazos.

Paso 5

Limpia la forma resultante al remover los cuatro puntos ancla de en medio que fueron creados una vez que uniste los círculos, al simplemente hacer click-izquierdo en ellos con la Herramienta Eliminar Punto Ancla (-).

Paso 6

Ajusta la nueva forma primero habilitando el modo Previsualización de Pixeles (Alt-Control-Y), y luego seleccionando su manejador inferior del punto ancla izquierdo  arrastrándolo abajo hasta que tengas una distancia de 22 px entre su punto final y origen.

Paso 7

Haz lo mismo para el punto ancla inferior del corazón al seleccionar su manejador izquierdo y arrastrándolo al exerior hasta que tengas una distancia de 16 px entre su punto final y origen.

Una vez que termines, puedes salir del modo Previsualización de Pixeles usando el atajo de teclado Alt-Control-Y.

Paso 8

Una vez que hayas finalizado de hacer los ajustes en la mitad izquierda de corazón, necesitremos llevarlos al lado derecho también. Haremos eso primero cortándolo a la mitad,  luego seleccionando y removiendo sus puntos ancla derechos y presionando Control-J inmediatamente después de cerrar el trazado resultante.

Paso 9

Crea una copia de la forma resultante (Control-C > Control-F) que reflejaremos verticalmente (click-derecho > Transformar > Reflejo > Vertical) y luego lo colocamos en el lado derecho del original, asegurando seleccionar y unir los dos después usando el Modo de Forma Unificar del panel Buscatrazos.

Paso 10

Da a la forma resultante un contorno usando el método Trazo. Crea una copia de ella (Control-C) que pegarás delante (Control-F) y luego ajusta al establecer su color en #252730. Luego intercambia su Relleno con su Trazo (Mayúsculas-X), asegurándote de establecer su Grosor en 8 px y su Vértice en Unión Redondeada.

Una vez que termines, selecciona ambas formas y agrúpalas usando el atajo de teclado Control-G.

Paso 11

Crea la sección enlazada del globo usando un rectángulo de 20 x 12 px, que pondremos de color #C15846 y luego céntralo alineado con la subyacente área activa de dibujo, a una distancia de 24 px de su borde inferior.

Paso 12

Ajusta el rectángulo que acabamos de crear al seleccionar y empujar individualmente sus puntos ancla hacia adentro 4 px (click-derecho > Transformar > Mover > Horizontal > + / - 4 px dependiendo del lado en el que inicies).

Paso 13

Da a la forma resultante un contorno con un grosor de 8 px (#252730) usando el método Trazo, asegurando establecer su Vértice en Unión Redondeada. Una vez que termines, no olvides seleccionar y agrupar las dos formas usando el atajo de teclado Control-G.

Paso 14

Selecciona la Herramienta Pluma (P) y luego dibuja en el pedazo de cuerda que sostiene el globo, usando un grosor de Trazo de 8 px con el color establecido en #252730.

Comienza desde el centro del contorno de la sección enlazada, y ve todo el camino hasta el borde inferior del área activa de dibujo, seleccionando y agrupando (Control-G) todas las formas que tenemos hasta ahora.

Paso 15

Toma una copia (Control-C > Control-F) del corazón con el que acabamos de terminar de trabajar, y úsala para crear una de los más pequeños al escalarlo hacia abajo usando un incremento de valor de 50% (click-derecho > Transformar > Escala > Uniforme > 50%).

Ajusta el contorno de la forma resultante al establecer el Grosor de su Trazo en 8 px, y luego alíneala con el lado izquierdo de la subyacente área activa de dibujo, colocándolo a una distancia de 24 px de su borde inferior.

Paso 16

Establece el color del relleno de la forma de corazón en un rojo más oscuro (#C15846), y luego dibuja en la sección de la cuerda usando un Trazo de 16 px de altura 8 px de grosor (#252730), agrupando (Control-G) y colocándolos debajo del corazón mas grande (click-derecho > Organizar > Enviar detrás).

Paso 17

Crea el globo en forma de corazón del lado derecho, usando una copia del izquierdo (Control-C > Control-F) que alinearemos con el lado opuesto del área activa de dibujo, colocándolo a una distancia de 4 px de su borde inferior.

Una vez que termines, no olvides seleccionar y agrupar todas las secciones que conforman el ícono usando el atajo de teclado Control-G.

6. Cómo Crear el Ícono del Anillo de Compromiso

Asumiendo que ya te has dirigido a la siguente capa (esa sería la tercera), haz un acercamiento sobre la segunda cuadrícula base y comencemos a trabajar en el pequeño anillo de compromiso.

Paso 1

Crea la forma principal del diamante usando un rectángulo de 32 x 12 px, que pondremos de color #52B9D1 y luego lo centramos alineado con la subyacente área activa de dibujo, colocándolo a una distancia de 4 px de su borde superior.

Paso 2

Ajusta la forma que acabamos de crear al seleccionar y empujar individualmente sus puntos ancla superiores hacia adentro 6 px con la ayuda de la herramienta Mover (click-derecho > Tranformar > Mover > + / - 6 px dependiendo de que lado comiences).

Paso 3

Usando la Herramienta Añadir Punto Ancla (+), agrega un nuevo punto ancla al centro del borde inferior de la forma, y luego empújalo hacia abajo a una distancia de 14 px usando la herramienta Mover (click-derecho > Transformar > Mover > Vertical > 14 px).

Paso 4

Da a la forma resultante un contorno usando un Trazo (#252730) con un grosor de 8 px con el Vértice establecido en Unión Redondeada. 

Paso 5

Usando un Trazo (#252730) con un grosor de 8 px dibuja la línea divisora horizontal del diamante conectando sus puntos ancla de en medio, seleccionando y agrupando (Control-G) las tres formas después.

Paso 6

Comienza a trabajar en el anillo al crear un círculo de 86 x 86 px, que pondremos de color #EAA74E y luego los centramos alineado con la subyacente área activa de dibujo, a una distancia de 4 px de su borde inferior.

Paso 7

Crea un círculo más pequeño de 54 x 54 px (resaltado de naranja), que centraremos alineado con el previo y luego lo cortamos usando el Modo de Forma Menos Frente del panel Buscatrazos.

Paso 8

Termina el ícono al dar a la forma resultante un contorno (#252730) con un grosor de 8 px, seleccionando  agrupando (Control-G) las dos, y haciendo lo mismo después para todas las secciones que la conforman.

7. Cómo Crear el Ícono del Pastel

Ahora estamos con nuestro tercer y último ícono, así que asumiendo que ya estás posicionado en la última capa, haz un acercamiento en su cuadrícula base y terminemos ésto.

Paso 1

Crea una pequeña bandeja dorada usando un rectángulo de 112 x 12 px, que pondremos de color #EAA74E y luego céntralo alineado con la subyacente área activa de dibujo, a una distancia de 4 px de su borde inferior.

Paso 2

Ajusta la forma que acabamos de crear,al seleccionar y empujar individualmente sus puntos ancla inferiores hacia adentro a una distancia de 4 px usando la herramienta Mover (click-derecho > Transformar > Mover > Horizontal > + / - 4 px dependiendo del lado en el que comiences).

Paso 3

Da a la forma resultante un contorno (#252730) con un grosor de 8 px con una Unión Redondeada, y luego selecciona y agrupa ambas formas usando el atajo de teclado Control-G.

Paso 4

Crea la sección inferior del pastel usando un rectángulo de 84 x 28 px, que pondremos de color #AD584D, y luego céntralo alineado con la forma rellena de la bandeja dorada, a una distancia de 0 px.

Paso 5

Ajusta la forma que acabamos de crear seleccionando sus vértices superiores usando la Herramienta Selección Directa (A) y luego estableciendo su Radio en 8 px dentro del panel Transformar.

Paso 6

Agrega una sección de chocolate blanco, usando una copia (Control-C > Control-F) de la café, que ajustaremos estableciendo su color en #E2BFA1, y luego seleccionando sus puntos ancla inferiores y empujándolos hacia arriba 16 px (click-derecho > Tranformar > Mover > Vertical > - 16 px).

Paso 7

Da a la sección inferior del pastel un contorno usando un Trazo de un grosor de 8 px que pondremos de color #252730.

Paso 8

Termina ésta sección del pastel al dibujar la línea divisora horizontal que separa la sección del chocolate blanco del cuerpo café, usando el mismo Trazo (#252730) con un grosor de 8 px.

Una vez que termines, selecciona y agrupa todas las formas que lo componen usando el atajo de teclado Control-G.

Paso 9

Comienza trabajando en la sección central del pastel al crear un rectángulo de 60 x 24 px (#AD584D), que ajustaremos al establecer el Radio de sus vértices superiores en 8 px. Céntralo alineado con la forma resultante con la base del pastel, verticalmente apilándolas a una distancia de 0 px.

Paso 10

Agrega la sección de chocolate blanco al crear una copia (Control-C > Control-F) de la forma del paso previo, que pondremos de color #E2BFA1 y luego ajusta al seleccionar y empujar sus puntos ancla inferiores hacia arriba a una distancia de 12 px (click-derecho > Transformar > Mover > Vertical > -12 px).

Paso 11

Finaliza ésta sección del pastel al agregar el Trazo (#252730) con un grosor de 8 px seguido por la línea divisora horizontal. Una vez que termines, no olvides seleccionar y agrupar (Control-G) todas sus formas que lo componen.

Paso 12

Crea la sección superior del pastel usando un rectángulo de 36 x 20 px (#AD584D), que ajustaremos al establecer el Radio de sus vértices superiores en 8 px, colocando la forma resultante arriba de la previamente creada.

Paso 13

Agrega una copia (Control-C > Control-F) de la forma que acabamos de crear, y luego comienza a ajustarla al cambiar primero su color a #E2BFA1, y luego seleccionando y empujando sus puntos ancla inferiores hacia arriba a una distancia de 10 px (click-derecho > Transformar > Mover > Vertical > - 10 px).

Paso 14

Al igual que lo hicimos con todas las secciones del pastel, toma tu tiempo y agrega el contorno principal y la pequeña línea divisora horizontal usando un Trazo (#252730) de un grosor de 8 px, agrupando (Control-G) las cuatro formas depués.

Paso 15

Comienza a trabajar en el pequeño corazón al crear un círculo de 16 x 16 px (#ED664C) que colocaremos a una distancia de 4 px del borde superior del área activa de dibujo, y a 45 px de su borde izquierdo.

Paso 16

Crea la sección derecha del corazón usando otro círculo de 16 x 16 px (#ED664C), que colocaremos en el otro lado del área activa de dibujo, a una distancia de 45 px de su borde derecho.

Paso 17

Agrega la sección inferior del corazón usando otro círculo de 16 x 16 px, que pondremos de color #ED664C y luego céntralo alineándolo con la subyacente área activa de dibujo, verticalmente apilándola con la sección superior del pastel.

Paso 18

Selecciona y une los tres círculos usando el Modo de Forma Unificar del panel Buscatrazos, y luego ajusta la forma final hasta que parezca un corazón al remover los puntos ancla extra y experimentar con sus manejadores.

Paso 19

Finaliza el ícono al dar al corazón un contorno (#252730), con un grosor de 8 px, seleccionando y agrupando (Control-G) las dos formas, y haciendo lo mismo para las formas que conforman todo el ícono.

¡Fabuloso Trabajo, Terminaste!

Ahí lo tienes: un bonito pequeño paquete de íconos para añadir emoción a las cosas, si es para esa persona especial o para un futuro proyecto. Como siempre, espero que te hayas divertido recreando éstas piezas y lo más importante, hayas aprendido algo nuevo e interesante a lo largo del camino.