Advertisement
  1. Design & Illustration
  2. Summer

Tutorial de Illustrator para crear pack de íconos de verano

Scroll to top

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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
Configurando un nuevo documento para el diseño de veranoConfigurando un nuevo documento para el diseño de veranoConfigurando un nuevo documento para el diseño de verano

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
Configurando una cuadrícula personalizada en el tutorial de IllustratorConfigurando una cuadrícula personalizada en el tutorial de IllustratorConfigurando una cuadrícula personalizada en el tutorial de Illustrator

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)
Configurando las capas para los íconos en Adobe IllustratorConfigurando las capas para los íconos en Adobe IllustratorConfigurando las capas para los íconos en Adobe Illustrator

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).

Creando y ubicando la forma principal para la cuadrícula de referencia de los íconos de veranoCreando y ubicando la forma principal para la cuadrícula de referencia de los íconos de veranoCreando y ubicando la forma principal para la cuadrícula de referencia de los íconos de verano

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.

Creando y ubicando la forma principal para el área de dibujo activa de las ilustraciones de veranoCreando y ubicando la forma principal para el área de dibujo activa de las ilustraciones de veranoCreando y ubicando la forma principal para el área de dibujo activa de las ilustraciones de verano

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.

Agregando las cuadrículas de referencia restantes aprendiendo cómo hacer íconos en IllustratorAgregando las cuadrículas de referencia restantes aprendiendo cómo hacer íconos en IllustratorAgregando las cuadrículas de referencia restantes aprendiendo cómo hacer íconos en Illustrator

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.

Creando y ubicando la forma principal del lente izquierdo de las gafas en el ícono de IllustratorCreando y ubicando la forma principal del lente izquierdo de las gafas en el ícono de IllustratorCreando y ubicando la forma principal del lente izquierdo de las gafas en el ícono de Illustrator

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.

Ajustando la forma del lente izquierdo de las gafasAjustando la forma del lente izquierdo de las gafasAjustando la forma del lente izquierdo de las gafas

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.

Añadiendo el contorno al lente izquierdo de las gafas el el pack de íconosAñadiendo el contorno al lente izquierdo de las gafas el el pack de íconosAñadiendo el contorno al lente izquierdo de las gafas el el pack de íconos

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.

Creando y ubicano la forma principal para la sección inferior del extremo izquierdo de las gafas en el ícono de IllustratorCreando y ubicano la forma principal para la sección inferior del extremo izquierdo de las gafas en el ícono de IllustratorCreando y ubicano la forma principal para la sección inferior del extremo izquierdo de las gafas en el ícono de Illustrator

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.

Creando y colocando la forma principal para la sección superior del extremo izquierdo de las gafas el el ícono de Adobe IllustratorCreando y colocando la forma principal para la sección superior del extremo izquierdo de las gafas el el ícono de Adobe IllustratorCreando y colocando la forma principal para la sección superior del extremo izquierdo de las gafas el el ícono de Adobe Illustrator

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.

Colocando el extremo izquierdo de las gafas debajo del lente más grandeColocando el extremo izquierdo de las gafas debajo del lente más grandeColocando el extremo izquierdo de las gafas debajo del lente más grande

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.

Terminando el lente izquierdo de las gafas, uno de los íconos de veranoTerminando el lente izquierdo de las gafas, uno de los íconos de veranoTerminando el lente izquierdo de las gafas, uno de los íconos de verano

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.

Agregando el lente derecho de las gafas en el diseño de veranoAgregando el lente derecho de las gafas en el diseño de veranoAgregando el lente derecho de las gafas en el diseño de verano

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.

Agregando el puente superior a la sección superior de las gafas en la ilustración de veranoAgregando el puente superior a la sección superior de las gafas en la ilustración de veranoAgregando el puente superior a la sección superior de las gafas en la ilustración de verano

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.

Agregando los puentes más pequeños a la sección superior de las gafas al continuar el tutorial de IllustratorAgregando los puentes más pequeños a la sección superior de las gafas al continuar el tutorial de IllustratorAgregando los puentes más pequeños a la sección superior de las gafas al continuar el tutorial de Illustrator

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.

Agregando la sección de la nariz a la sección superior de las gafasAgregando la sección de la nariz a la sección superior de las gafasAgregando la sección de la nariz a la sección superior de las gafas

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.

Ajustando la sección de la nariz en las gafas en el ícono IllustratorAjustando la sección de la nariz en las gafas en el ícono IllustratorAjustando la sección de la nariz en las gafas en el ícono Illustrator

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.

Agregando l sección de la cuerda izquierda a las gafas en el ícono en Adobe IllustratorAgregando l sección de la cuerda izquierda a las gafas en el ícono en Adobe IllustratorAgregando l sección de la cuerda izquierda a las gafas en el ícono en Adobe Illustrator

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.

Ajustando la forma de la sección de la cuerda izquierda de las gafas como parte de los íconos de veranoAjustando la forma de la sección de la cuerda izquierda de las gafas como parte de los íconos de veranoAjustando la forma de la sección de la cuerda izquierda de las gafas como parte de los íconos de verano

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.

Agregando la sección de la cuerda derecha a las gafasAgregando la sección de la cuerda derecha a las gafasAgregando la sección de la cuerda derecha a las gafas

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.

Terminando el ícono de las gafas en el diseño de veranoTerminando el ícono de las gafas en el diseño de veranoTerminando el ícono de las gafas en el diseño de verano

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.

Creando y colocando las formas principales para la tapa del bronceador continuando con el tutorial de IllustratorCreando y colocando las formas principales para la tapa del bronceador continuando con el tutorial de IllustratorCreando y colocando las formas principales para la tapa del bronceador continuando con el tutorial de Illustrator

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.

Agregando la inserción rectangular con la tapa del bronceador como parte de los íconos de veranoAgregando la inserción rectangular con la tapa del bronceador como parte de los íconos de veranoAgregando la inserción rectangular con la tapa del bronceador como parte de los íconos de verano

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.

Agregando la sección del cuello a la tapa del bronceador aprendiendo cómo hacer íconos en IllustratorAgregando la sección del cuello a la tapa del bronceador aprendiendo cómo hacer íconos en IllustratorAgregando la sección del cuello a la tapa del bronceador aprendiendo cómo hacer íconos en Illustrator

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.

Creando y colocando las formas principales para el cuerpo principal de los bronceadores, uno de los íconos de veranoCreando y colocando las formas principales para el cuerpo principal de los bronceadores, uno de los íconos de veranoCreando y colocando las formas principales para el cuerpo principal de los bronceadores, uno de los íconos de verano

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.

Abriendo los trazados de los dos rectángulos que conforman las botellas del bronceador dentro del pack de íconosAbriendo los trazados de los dos rectángulos que conforman las botellas del bronceador dentro del pack de íconosAbriendo los trazados de los dos rectángulos que conforman las botellas del bronceador dentro del pack de íconos

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.

Uniendo los rectángulos que conforman las botellas del bronceador en una sola forma más grande continuando con el tutorial de IllustratorUniendo los rectángulos que conforman las botellas del bronceador en una sola forma más grande continuando con el tutorial de IllustratorUniendo los rectángulos que conforman las botellas del bronceador en una sola forma más grande continuando con el tutorial de Illustrator

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.

Agregando el contorno al cuerpo principal de las botellas de bronceadorAgregando el contorno al cuerpo principal de las botellas de bronceadorAgregando el contorno al cuerpo principal de las botellas de bronceador

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.

Agregando las dos líneas de texto al cuerpo principal de las botellas del bronceador en el diseño de veranoAgregando las dos líneas de texto al cuerpo principal de las botellas del bronceador en el diseño de veranoAgregando las dos líneas de texto al cuerpo principal de las botellas del bronceador en el diseño de verano

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.

Creando y colocando las formas principales para el son de las botellas del bronceador, parte de los íconos en IllustratorCreando y colocando las formas principales para el son de las botellas del bronceador, parte de los íconos en IllustratorCreando y colocando las formas principales para el son de las botellas del bronceador, parte de los íconos en Illustrator

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.

Agregando los rayos del sol al cuerpo principal de las botellas del bronceador, una de las ilustraciones de veranoAgregando los rayos del sol al cuerpo principal de las botellas del bronceador, una de las ilustraciones de veranoAgregando los rayos del sol al cuerpo principal de las botellas del bronceador, una de las ilustraciones de verano

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.

Agregando la línea de detalle horizontal a la sección superior de las botellas del bronceadorAgregando la línea de detalle horizontal a la sección superior de las botellas del bronceadorAgregando la línea de detalle horizontal a la sección superior de las botellas del bronceador

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.

Agregando las inserciones verticales a la sección superior de las botellas del bronceador en el diseño de veranoAgregando las inserciones verticales a la sección superior de las botellas del bronceador en el diseño de veranoAgregando las inserciones verticales a la sección superior de las botellas del bronceador en el diseño de verano

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.

Finalizando el ícono de verano de un bronceadorFinalizando el ícono de verano de un bronceadorFinalizando el ícono de verano de un bronceador

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.

Creando y colocando la forma principal para la sección posterior del flotadorCreando y colocando la forma principal para la sección posterior del flotadorCreando y colocando la forma principal para la sección posterior del flotador

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.

Añadiendo el corte a la sección posterior del flotadorAñadiendo el corte a la sección posterior del flotadorAñadiendo el corte a la sección posterior del flotador

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.

Agregando el contorno a la sección posterior del flotador como parte de los íconos de veranoAgregando el contorno a la sección posterior del flotador como parte de los íconos de veranoAgregando el contorno a la sección posterior del flotador como parte de los íconos de verano

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.

Creando y colocando la forma principal para la sección frontal del flotador continuando con el tutorial de IllustratorCreando y colocando la forma principal para la sección frontal del flotador continuando con el tutorial de IllustratorCreando y colocando la forma principal para la sección frontal del flotador continuando con el tutorial de Illustrator

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.

Añadiendo el corte circular a la sección frontal del flotador dentro del diseño de veranoAñadiendo el corte circular a la sección frontal del flotador dentro del diseño de veranoAñadiendo el corte circular a la sección frontal del flotador dentro del diseño de verano

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).

Creando y colocando la forma principal para el trapezoide superior del flotadorCreando y colocando la forma principal para el trapezoide superior del flotadorCreando y colocando la forma principal para el trapezoide superior del flotador

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.

Agregando el contorno al trapezoide superior del flotador como parte de los íconos de veranoAgregando el contorno al trapezoide superior del flotador como parte de los íconos de veranoAgregando el contorno al trapezoide superior del flotador como parte de los íconos de verano

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.

Agregando el trapezoide inferior del flotador del pack de íconosAgregando el trapezoide inferior del flotador del pack de íconosAgregando el trapezoide inferior del flotador del pack de íconos

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°).

Agregando los trapezoides laterales del flotador al aprender cómo hacer íconos en IllustratorAgregando los trapezoides laterales del flotador al aprender cómo hacer íconos en IllustratorAgregando los trapezoides laterales del flotador al aprender cómo hacer íconos en Illustrator

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.

Añadiendo los puntos de color negro a los trapezoides del flotador en la ilustración de veranoAñadiendo los puntos de color negro a los trapezoides del flotador en la ilustración de veranoAñadiendo los puntos de color negro a los trapezoides del flotador en la ilustración de verano

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.

Aplicando máscara a los trapezoides del flotador en el diseño de veranoAplicando máscara a los trapezoides del flotador en el diseño de veranoAplicando máscara a los trapezoides del flotador en el diseño de verano

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.

Agregando el contorno a la sección frontal del flotador como parte de los íconos IllustratorAgregando el contorno a la sección frontal del flotador como parte de los íconos IllustratorAgregando el contorno a la sección frontal del flotador como parte de los íconos Illustrator

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.

Finalizando el ícono Adobe Illustrator de un flotadorFinalizando el ícono Adobe Illustrator de un flotadorFinalizando el ícono Adobe Illustrator de un flotador

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.

Creando y colocando la forma principal para la sección superior del ícono de verano de una conchaCreando y colocando la forma principal para la sección superior del ícono de verano de una conchaCreando y colocando la forma principal para la sección superior del ícono de verano de una concha

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.

Creando y colocando las formas principales para el umbo del ícono de la concha dentro del tutorial IllustratorCreando y colocando las formas principales para el umbo del ícono de la concha dentro del tutorial IllustratorCreando y colocando las formas principales para el umbo del ícono de la concha dentro del tutorial Illustrator

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.

Agregando la elipse más pequeña al umbo en el ícono de la concha de mar en el diseño de veranoAgregando la elipse más pequeña al umbo en el ícono de la concha de mar en el diseño de veranoAgregando la elipse más pequeña al umbo en el ícono de la concha de mar en el diseño de verano

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.

Creando y colocando la forma principal para el cuerpo principal del ícono de la concha para la ilustración de veranoCreando y colocando la forma principal para el cuerpo principal del ícono de la concha para la ilustración de veranoCreando y colocando la forma principal para el cuerpo principal del ícono de la concha para la ilustración de verano

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) .

Ajustando la forma del cuerpo principal de la concha como parte del pack de íconosAjustando la forma del cuerpo principal de la concha como parte del pack de íconosAjustando la forma del cuerpo principal de la concha como parte del pack de íconos

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.

Creando y colocando la forma principal para la sección del cuerpo interior del ícono de la conchaCreando y colocando la forma principal para la sección del cuerpo interior del ícono de la conchaCreando y colocando la forma principal para la sección del cuerpo interior del ícono de la concha

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).

Ajustando la forma de la sección del cuerpo interior del ícono de la concha dentro del diseño de veranoAjustando la forma de la sección del cuerpo interior del ícono de la concha dentro del diseño de veranoAjustando la forma de la sección del cuerpo interior del ícono de la concha dentro del diseño de verano

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.

Agregando el contorno a la sección del cuerpo interior del ícono de la conchaAgregando el contorno a la sección del cuerpo interior del ícono de la conchaAgregando el contorno a la sección del cuerpo interior del ícono de la concha

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.

Añadiendo el anillo vertical a la sección del cuerpo interior del ícono de la concha Añadiendo el anillo vertical a la sección del cuerpo interior del ícono de la concha Añadiendo el anillo vertical a la sección del cuerpo interior del ícono de la concha

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.

Agregando la línea del detalle vertical a la sección del cuerpo inteior del ícono de la concha casi terminando el tutorial de IllustratorAgregando la línea del detalle vertical a la sección del cuerpo inteior del ícono de la concha casi terminando el tutorial de IllustratorAgregando la línea del detalle vertical a la sección del cuerpo inteior del ícono de la concha casi terminando el tutorial de Illustrator

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).

Enmascarando la sección del cuerpo interior de la concha al aprender cómo hacer íconos en IllustratorEnmascarando la sección del cuerpo interior de la concha al aprender cómo hacer íconos en IllustratorEnmascarando la sección del cuerpo interior de la concha al aprender cómo hacer íconos en Illustrator

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.

Finalizando el ícono de la concha en las ilustraciones de veranoFinalizando el ícono de la concha en las ilustraciones de veranoFinalizando el ícono de la concha en las ilustraciones de verano

¡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.

finished project previewfinished project previewfinished project preview
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.