Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Vector

Cómo elaborar íconos de comida en arte isométrico en Adobe Illustrator

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

En el siguiente tutorial, aprenderás cómo crear un conjunto minimalista de íconos de comida con estilo isométrico en Adobe Illustrator. Si eres nuevo en el dibujo isométrico entonces este tutorial es para ti porque aprenderás cómo crear tu propia cuadrícula isométrica y los íconos están elaborados usando únicamente formas básicas.

Antes de comenzar, echemos un rápido vistazo a las características importantes de este estilo de diseño:

¿Qué es isométrico?< Significa igualdad de medida. La longitud, altura y anchura de los objetos tienen la misma escala.

¿Qué es una vista isométrica? Es una manera en la que objetos tridimensionales se presentan a través de proyección isométrica en un plano bidimensional.

¿Qué es diseño isométrico? Es un estilo ilustrativo de tendencia y ofrece una única perspectiva en el estilo plano común. No está destinado a ser realista.

¿Cómo dibujas al estilo isométrico? Un ángulo de 30 grados se usa en todos los lados para dar un aspecto 3D. Lados opuestos son mutuamente paralelos, lo que significa que objetos en primer plano son mostrados en la misma escala que los objetos mostrados en el fondo. No hay perspectiva, y no hay puntos de desvanecimiento.

¿Para qué se usan los gráficos isométricos? Se usan por su claridad, simpleza y velocidad de creación. También conocidas como proyecciones isométricas, se usan con éxito en el diseño web, ilustraciones de interfaz de usuario, íconos vectoriales y dibujos técnicos.

Aprender cómo elaborar íconos en este estilo es una magnífica manera de empezar tu aventura en los gráficos isométricos y desarrollar una habilidad que será una base para avanzar. Podrás aplicar estas técnicas en toda clase de diseños vectoriales.

Si estás buscando más íconos isométricos, vectores isométricos o íconos de comida para utilizar en tus increíbles diseños, asegúrate de dirigirte a GraphicRiver y encontrarás una fabulosa selección.

¡Comencemos!

1. Cómo abrir un nuevo documento

Lanza Illustrator y aplica Archivo > Nuevo para abrir un documento en blanco. Escribe un nombre para tu archivo, configura las dimensiones y luego selecciona Pixeles como Unidades y RGB como Modo de color.

A continuación, aplica Edición > Preferencias > General y establece la opción Incrementos de teclado en 1 px, y mientras estás ahí, aplica Unidades para asegurarte que estén establecidas como se observa en la siguiente imagen. Normalmente trabajo con estos ajustes, y te ayudarán durante todo el proceso de dibujo.

how to open a new Illustrator document

2. Cómo crear una cuadrícula isométrica

Paso 1

Cuando aprendes cómo dibujar íconos en una vista isométrica, una parte muy importante del proceso es saber cómo crear tu propia cuadrícula dentro de la mesa de trabajo. Aquí está mi método de crear una rápida y simple cuadrícula isométrica en Illustrator. En unos minutos, estaremos listos para comenzar a dibujar los íconos de comida.

Toma la Herramienta segmento de línea (/) y haz clic en cualquier lugar de tu mesa de trabajo para abrir la ventana Opciones. Escribe 400 px en el campo Longitud y 30 grados en el campo Ángulo porque todo necesita dibujarse en este ángulo en los dibujos isométricos. Coloca la línea en algún parte del lado izquiedo de tu mesa de trabajo de 200 x 200 px y dale un Trazo de 1 pt.

how to draw an isometric line in Illustrator

Paso 2

Con la línea todavía seleccionada, aplica Efecto > Distorsionar y transformar > Transformar. Escribe 18 px en el campo Mover horizontal y elige 30 Copias para multiplicarla. Deberías tener suficientes líneas para cubrir la mesa de trabajo y más. Pulsa OK.

how to create multiple isometric lines on your artoboard

Paso 3

Con la línea aún seleccionada, ve a Objeto > Expandir apariencia para expandir el efecto Transformar aplicado en el paso anterior. Mantén el grupo resultante seleccionado y presiona Centrar seguido de Centrar verticalmente en el panel Alinear mientras te aseguras que esté marcada la opción Alinear con mesa de trabajo.

Con el grupo de líneas aún seleccionado, aplica Objeto > Transformar > Reflejar. Marca Vertical y pulsa Copiar para obtener un reflejo de estas líneas en la mesa de trabajo (2).

how to reflect isometric lines on your artboard

Paso 4

No considero necesario añadir líneas verticales a la cuadrícula, así que selecciona dos grupos de líneas y aplica Ver > Guías > Crear guías. ¡Eso es todo! La cuadrícula isométrica está terminada. Mantenla en una capa separada llamada "grid" y haz una nueva capa arriba de ella para el primer ícono de comida.

Antes de continuar, asegúrate de activar las Guías inteligentes en el menú Ver. También, marca Ajustar a punto y desmarca Ajustar a pixel.

Generalmente no bloqueo la capa "grid" porque las Guías inteligentes funcionan mejor cuando las capas y los objetos no están bloqueados, pero puedes hacerlo si temes moverla por error.

how to create a quick isometric grid in Illustrator

3. Cómo crear un ícono de Sandwich cuadrado isométrico

Paso 1

Cuando creas gráficos isométricos en Illustrator, casi todo comienza desde formas isométricas básicas como cuadrados, rectángulos y círculos. El primer ícono de comida que dibujaremos es un sandwich cuadrado, así que comencemos viendo como dibujar un cuadrado isométrico.

Toma la Herramienta pluma (P) y dibuja el primer trazado, que tiene de longitud siete cuadrados de la cuadrícula. Continúa contando siete cuadrados de la cuadrícula para los otros lados y cierra la forma para obtener un cuadrado isométrico. Dale un color de relleno beige y un Trazo de 2 pt café oscuro. En el panel Trazo, presiona las opciones Extremos redondeado y Unión redondeada. Nombraré esta forma "bottom bread".

how to draw an isometric square using the grid

Paso 2

Usa la Herramienta pluma (P) de nuevo para dibujar el lado izquierdo del pan. La altura de esta forma es de solo un cuadrado de la cuadrícula y la longitud sigue siendo de siete. Aplica una forma de un beige ligeramente más oscuro como el color de relleno y dale un Trazo de 2 pt como antes. Mantendremos los mismos ajustes del trazo durante todo el tutorial para hacer los íconos del mismo estilo.

Dibuja el lado derecho del pan de la misma manera.

how to draw the bottom bread of the isometric food icon

Paso 3

Aquí está cómo elaborar círculos isométricos en Illustrator. Primero, Copia y Pega en el mismo lugar (Mayúsculas-Control-V) el "bottom bread" para que tengas una copia del cuadrado (1). Ve a Efecto > Estilizar > Esquinas redondeadas y aplica un valor de Radio muy elevado como 100 px o tan alto como puedas. Elige Expandir apariencia del menú Objeto para expandir el efecto aplicado y acabas de obtener un círculo isométrico (2). Fácil, ¿no?

Mientras el círculo sigue seleccionado, aplica Objeto > Trazado > Añadir puntos de ancla para agregar puntos adicionales en los lados izquierdo, derecho, arriba y abajo. Estos puntos son útiles cuando se alinea el círculo con la cuadrícula o con otras formas en tu diseño (3).

how to draw an isometric circle in Illustrator

Paso 4

Reduce la escala del círculo obtenido en el paso anterior mientras mantienes presionada la tecla Mayúsculas buscando mantener las proporciones. Luego muévela junto al borde inferior derecho del pan. Rellénala del color indicado y aplica el mismo trazo (1).

Haz un conjunto de copias más pequeñas de este círculo y órdenalas aleatoriamente en la parte superior. Usa los tres tonos de rosa para colorearlas y esta vez no le apliques un trazo. Esta será la "salami slice" (rebanada de salami) en el sandwich, y puedes agrupar todas las formas que la conforman (2).

Haz una copia de "salami slice" (rebanada de salami) y colócala junto al borde inferior izquierdo del pan (3).

how to create the salami slice of the sandwich icon

Paso 5

Copia y Pega en el mismo lugar (Mayúsculas-Control-V) el "bottom bread" (pan inferior) para hacer una copia de él delante de todo. Usa la técnica de Esquinas redondeadas para obtener un nuevo círculo isométrico como se explicó previamente (1).

Mientras el círculo sigue seleccionado, ve a Efecto > Distorsionar y transformar > Zig zag y aplica los ajustes mostrados para obtener los bordes ondulados. Asegúrate de expandir este efecto aplicando Objeto > Expandir apariencia y obtendrás la forma de la lechuga. Rellénala de verde claro y aplica los mismos ajustes del trazo (2).

how to create the lettuce shape of the sandwich icon

Paso 6

Selecciona de nuevo "bottom bread" (pan inferior) y aplica Objeto > Transformar > Escala. Escribe 90% en el campo Escala uniforme y pulsa Copia para obtener una copia más pequeña del cuadrado isométrico. Tráela al frente de todo aplicando Objeto > Organizar > Traer al frente (Mayúsculas-Control-]). Esta será la "cheese slice" (rebanada de queso) en el sandwich, y puedes colorearla de amarillo. Muévela hacia arriba un poco presionando la teclca Flecha hacia arriba en tu teclado un par de veces.

how to create the cheese slice of the sandwich icon

Paso 7

Selecciona todo el pan en la parte inferior del sandwich y luego Copia y Pega en el mismo lugar (Mayúsculas-Control-V) para hacer una copia de él. Agrupa (Control-G) las tres formas y muévelas hacia arriba tres cuadrados de la cuadrícula (1).

Para crear algo de textura en el pan de arriba, coloca aleatoriamente un conjunto de pequeños círculos isométricos como lo hiciste para el salami. Coloréalas de beige y reduce la Opacidad a 35% (2).

how to create the top bread of the sandwich icon

Paso 8

En este punto, el ícono del sandwich está listo, y luce así sin la cuadrícula.

final image of the isometric sandwich food icon

4. Cómo crear un ícono de sandwich rectangular isométrico

Paso 1

Creemos una nueva mesa de trabajo dentro del documento para el segundo ícono. Toma la Herramienta rectángulo (M) y dibuja un nuevo cuadrado de 200 x 200 px; luego aplica Objeto > Mesas de trabajo > Convertir en mesas de trabajo.

Ahora, crea una nueva cuadrícula isométrica como se explicó al inicio del tutorial o copia la existente. Solo asegúrate de alinear la segunda cuadrícula con la Mesa de trabajo 2.

Haz una nueva capa llamada "long sandwich" (sandwich largo) en el panel Capas, y estamos listos para crear el segundo ícono de comida.

how to create a second artboard for the second isometric food icon

Paso 2

Usaremos la misma técnica para crear un círculo isométrico a partir de un cuadrado isométrico, así que toma la Herramienta pluma (P) y dibuja un cuadrado contando cuatro cuadrados de la cuadrícula en cada lado. Haz una copia de él y colócalo en la parte superior derecha de la mesa de trabajo (1).

Con ambos cuadrados seleccionados, ve a Efecto > Estilizar > Esquinas redondeadas y aplica un Radio de 100 px o tan alto como puedas. Elige Expandir apariencia del menú Objeto para expandir el efecto aplicado y obtendrás los dos círculos (2).

how to draw isometric shapes in Illustrator using the grid

Paso 3

Usa la Herramienta selección directa (A) para seleccionar únicamente los puntos indicados y presiona la tecla Suprimir en tu teclado para eliminarlos (1). Obtendrás dos semicírculos.

Todavía usando la Herramienta selección directa (A), selecciona dos extremos correspondientes y presiona Control-J para unirlos (2). Repite lo mismo con los otros dos extremos en la parte superior y prácticamente obtendrás un rectángulo redondeado isométrico. Colorea el pan de beige claro y aplica el mismo Trazo café de 2 pt (3).

how to create an isometric rounded rectangle in Illustrator

Paso 4

Copia y Pega detrás (Control-B) la forma del pan y usa la Herramienta selección directa (A) para seleccionar únicamente los puntos indicados (1). Muévelos hacia abajo un poco presionando la tecla Flecha hacia abajo en tu teclado unas veces. Nombraré la forma resultante "bottom bun" (bollo inferior). Cambia el color de relleno a un tono de beige más oscuro (2).

how to create the bottom bun of the isometric food icon

Paso 5

Ahora que has dominado el dibujo de círculos isométricos, crea y coloca tres en el pan como tomates. Coloréalos de rojo (1).

Haz copias más pequeñas de los tres círculos y remplaza el relleno rojo por el blanco. Esta será la mozzarella en el sandwich (2).

how to create more isometric circles on the sandwich icon

Paso 6

Selecciona la forma del pan y luego Copia y Pega en el mismo lugar (Mayúsculas-Control-V) para hacer una copia de ella delante de todo. Aplica Objeto > Transformar > Mover y escribe -18 px en el campo Vertical y 90 grados en el campo Ángulo. Pulsa OK y obtendrás el bollo superior. Remplaza el color de relleno con un tono de beige más oscuro.

how to create the top bun of the isometric food icon

Paso 7

Agreguemos algunos toques finales. Toma la Herramienta segmento de línea (/) y úsala para dibujar una línea de 40 px de longitud en un Ángulo de 120 grados. Haz tres copias y colócalas en el bollo superior como se muestra en la imagen (1).

Dales un Trazo de 8 pt y selecciona Perfil de anchura 1 en el panel Trazo. Elige Expandir apariencia del menú Objeto para convertir los trazos en formas rellenas, y después de eso, aplica Objeto > Trazado compuesto > Crear (Control-8) (2).

how to add details on the isometric food icon

Paso 8

Selecciona el bollo superior y luego Copia y Pega en el mismo lugar (Mayúsculas-Control-V) para hacer una copia de él delante de todo. Ve a Objeto > Trazado > Desplazamiento y aplica un Desplazamiento de -1 px para obtener una forma ligeramente más pequeña (1).

Ahora selecciona la forma azul y el trazado compuesto negro y presiona Formar intersección en el panel Buscatrazos. Rellena las formas resultantes con un tono de beige más claro y estás serán las barras oblicuas sobre el bollo (2).

how to create slashes on the sandwich icon

Paso 9

En este punto, el ícono de sandwich rectangular está terminada y así es como luce sin la cuadrícula.

final image of the isometric sandwich icon

5. Cómo crear un ícono de sopa isométrico

Paso 1

Crea una tercera mesa de trabajo de 200 x 200 px en tu documento y alinea la cuadrícula isométrica con ella como lo hiciste antes. También crea una nueva capa en el panel Capas llamada "soup" (sopa) y podemos comenzar a crear el tercer ícono de comida.

how to create a third artboard for the third isometric food icon

Paso 2

Dibuja un círculo isométrico a partir de un cuadrado de 10 x 10 como lo aprendiste antes (1). Con el círculo todavía seleccionado, aplica Objeto > Transformar > Escala y escribe 89% en el campo Escala uniforme. Pulsa Copiar para obtener un círculo más pequeño adentro (2).

how to draw a circle using the isometric grid in Illustrator

Paso 3

Haz una copia del círculo negro más grande y cambia el valor de Altura a 130 px en el panel Transformar. Obtendrás la forma ovalada roja (1).

A continuación, selecciona la forma roja junto con una copia del círculo negro y presiona Dividir en el panel Buscatrazos seguido de Desagrupar (Mayúsculas-Control-G). Como resultado, obtendrás tres formas separadas coloreadas de púrpura, rosa y verde en la imagen observada en seguida (2).

Elimina la forma púrpura superior porque no la necesitamos y ahora tenemos el tazón de la sopa (3).

how to distort an isometric circle to create the soup bowl shape

Paso 4

Colorea las formas rosa y verde de gris claro y aplica un Trazo café de 2 pt para mantener el mismo estilo (1). Posteriormente, selecciona los círculos negro y naranja originales y ve a Objeto > Trazado compuesto > Crear (Control-8). Trae el trazado compuesto resultante delante de los otros al aplicar Objeto > Organizar > Traer al frente ( Mayúsculas-Control-]) y este será el borde exterior del tazón. Coloréalo de blanco y aplica los mismos ajustes del trazo (2).

Selecciona el círculo que era rosa; aplica Objeto > Transformar > Escala y escribe 40% en el campo Escala uniforme. Pulsa Copiar y obtendrás un círculo más pequeño. Muévelo hacia la parte inferior del tazón (3).

how to color the soup bowl shapes

Paso 5

Selecciona el borde blanco del tazón y luego aplica Copiar y Pegar delante (Control-F). A continuación, aplica Objeto > Trazado compuesto > Soltar para obtener círculos separados. Por ahora, toma el más pequeño de los dos porque necesitamos crear la sopa (1).

Haz otra copia del círculo naranja y muévelo un poco hacia abajo (el círculo rojo). Con los dos círculos naranja y rojo seleccionados, presiona Formar intersección en el panel Buscatrazos (2). Rellena la forma resultante de la sopa con amarillo claro y aplica el mismo Trazo de 2 pt (3).

how to create the soup shape of the isometric food icon

Paso 6

Ahora, toma el círculo más grande de los dos del paso anterior y muévelo un poco hacia abajo. Toma la Herramienta tijeras (C) y haz clic en los dos puntos indicados para cortar el trazado, y luego elimina el segmento superior (2).

Selecciona el segmento inferior y dale un Trazo rojo de 2 pt para crear una línea decorativa en el tazón (3). Elige Objeto > Expandir para convertir el trazo en una forma rellena.

how to decorate the soup bowl for the isometric food icon

Paso 7

Selecciona la forma principal del tazón y luego aplica Copiar y Pegar en el mismo lugar (Mayúsculas-Control-V) para hacer una copia de ella delante de todo. Aplica Objeto > Trazado > Desplazamiento y aplica un Desplazamiento de -1 px para obtener una forma ligeramente más pequeña. Establece esta forma en trazo-ninguno y relleno-ninguno- aunque por razones visuales la he coloreado de verde (1).

Selecciona esta forma de tazón más pequeña con la franja roja y presiona Formar intersección en el panel Buscatrazos (2).

how to finalize the soup bowl of the isometric food icon

Paso 8

Agreguemos algunos fideos en la sopa. Toma la Herramienta segmento de línea (/) y úsala para dibujar una línea de 111 px de longitud a un Ángulo de 30 grados porque incluso los fideos tienen que ser isométricos cuando se crea arte isométrico. Haz dos copias de esta línea y colócalas en la parte superior izquierda de la sopa (1).

Dales un Trazo de 2 pt; luego aplica Efecto > Distorsionar y Transformar > Zig zag y aplica los ajustes mostrados. Obtendrás el aspecto ondulado de los fideos (2).

how to create isometric noodle for the soup icon

Paso 9

Selecciona la forma de la sopa y luego aplica Copiar y Pegar en el mismo lugar (Mayúsculas-Control-V) para hacer una copia de ella delante de todo. A continuación, aplica Objeto > Trazado > Desplazamiento y aplica un Desplazamiento de -1 px para obtener una forma ligeramente más pequeña. Establece esta copia en trazo-ninguno y relleno-ninguno, aunque por razones visuales la he coloreado de azul (1).

Ahora, selecciona los fideos junto con la forma más pequeña de la sopa y ve a Objeto > Máscara de recorte > Crear (Control-7) (2).

how to mask the isometric noodles for the soup icon

Paso 10

Agreguemos los toques finales en la forma de unos pequeños círculos isométricos con un Trazo verde de 2 pt.

how to finalize the noodle soup icon

Paso 11

En este punto, el ícono de sopa de fideo está listo, y aquí está como se ve el ícono sin la cuadrícula.

final image of the isometric soup food icon

Paso 12

Aquí están las tres mesas de trabajo dentro del documento con los íconos de comida isométricos. Esto te facilita las cosas para guardar los íconos individualmente.

final image of the artoards and isometric food icons

¡Felicidades! Terminaste

Algunos lo llaman arte isométrico, algunos lo llaman una pesadilla. ¿Qué piensas?

El dibujo isométrico es una habilidad útil que hace falta tener, la cual puede ser usada en una variedad de diseños desde diseño de íconos hasta ilustraciones isométricas, dibujo técnico, infografías y mucho más.

Si decides aprender cómo dibujar vectors isométricos y recrear estos íconos de comida, no olvides compartir una imagen de tu diseño. No encantaría verlo.

isometric art food icons final image

¡Expande Tus Habilidades en el Diseño de Íconos!

¿Quieres hacer más íconos o vectores isométricos? Sigue aprendiendo con estos tutoriales recomendados:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.