Otra dimensión, nuevo dominio: un tutorial de ilustración isométrica

La ilustración es inigualable en su capacidad para energizar temas comunes y comunicar ideas complejas con claridad visual, pero ¿qué pasa con las ilustraciones isométricas? ¿No son notoriamente difíciles y requieren mucho tiempo? En seis sencillos pasos, este tutorial de ilustración isométrica hace que el proceso sea rápido y sin complicaciones.

¿Necesita animar una página de destino? ¿Visualizar datos aburridos? ¿Añadir ponche a envases blandos? La ilustración es la respuesta en todos los frentes.

En los últimos años, las ilustraciones isométricas han ganado popularidad por la forma en que representan la profundidad tridimensional en un espacio bidimensional. Además, la cuadrícula isométrica niega la necesidad de mantener la ilusión de la perspectiva, una fuente común de frustración en la ilustración.

En Adobe Illustrator, el proceso tradicional de ilustración isométrica es tedioso. Haga una cuadrícula isométrica, dibuje un cuadrado, inclínelo -30°, gírelo -30°, y así sucesivamente. Afortunadamente, hay una mejor manera. Illustrator tiene efectos 3D que hacen que las ilustraciones isométricas sean rápidas y sencillas: "Extrusión y biselado", "Giro" y "Rotación".

Este tutorial demuestra cómo crear ilustraciones isométricas usando "Revolución", pero las ideas también se aplican a los efectos 3D restantes de Illustrator.

¿Listo para impresionar a los clientes, deleitar a los usuarios y aprender los secretos de la ilustración isométrica?

Revolve & Refine: un tutorial de ilustración isométrica

¿Quién no disfruta de una bebida helada? Brindemos por los placeres del refresco líquido diseñando una botella isométrica con etiqueta.

*Consejo profesional: antes de comenzar, busque una referencia de objeto para saber cómo se verá la botella.

Paso #1: Dibuja la botella y el líquido

1.1) Cree un nuevo documento de Adobe Illustrator.

1.2) Añadir la referencia de la botella al documento.

1.3) Dibuja un contorno de la botella y el líquido dentro.

1.4) Divida la botella y el líquido por la mitad (como se ve a continuación).

1.5) El grosor del trazo del contorno de la botella define el grosor del vidrio.

*Consejo profesional: copie y pegue la obra de arte fuera de la mesa de trabajo como copia de seguridad.

Paso #2: Aplicar el efecto de revolución

Como sugiere el nombre, "Revolve" gira la forma alrededor de su eje. En Illustrator, la posición del eje "Revolución" se fija verticalmente. Es por eso que la botella fue delineada y partida por la mitad.

*Consejo profesional: ni el contorno de la botella ni el objeto líquido deben tener degradados como colores de relleno.

2.1) Para encontrar el efecto “Revolución”, vaya a: Efecto > 3D > Revolución…

2.2) En la parte superior de la ventana de diálogo, hay un campo llamado "Posición". Elija "Izquierda isométrica".

2.3) Ángulo: este es el grado de rotación alrededor del eje del objeto. Si se establece en 180°, el resultado será una botella dividida verticalmente por la mitad. Ajuste el ángulo a 360° para una botella completamente girada.

2.4) Desplazamiento: controle la distancia de desplazamiento desde el eje vertical del objeto. Introduzca "0".

2.5) Superficie: establezca el material del objeto y las propiedades de iluminación. Elija "Sin sombreado".

Ta-da! Una botella isométrica con líquido. Es hora de descansar, relajarse y… ¡esperar! Esa botella necesita una etiqueta.

*Consejo profesional: no utilice la función "Expandir apariencia" en la botella hasta que se cree la etiqueta.

Paso #3: Prepare la Etiqueta

3.1) Utilice la botella para definir las dimensiones de la etiqueta.

3.2) En la imagen de ejemplo (abajo), la altura de la etiqueta del cuerpo es aparente, pero la altura de la etiqueta del cuello no está clara porque la superficie no es paralela al eje. Una altura aproximada será suficiente.

3.3) La longitud de la etiqueta se calcula utilizando la fórmula de la circunferencia del círculo 2πr.

3.4) Con una etiqueta diseñada satisfactoriamente, convierta ambas etiquetas en símbolos. La paleta "Símbolos" se encuentra en: Ventana > Símbolos

3.5) Arrastre y suelte individualmente los diseños de etiquetas en la paleta para crear símbolos.

*Nota: los símbolos en Illustrator y Sketch funcionan de manera similar.

Paso #4: Asigne la etiqueta a la botella

Siempre que la botella no se haya vectorizado con la función "Expandir apariencia", es completamente editable.

4.1) Seleccione la botella y visualice la paleta "Apariencia": Ventana > Apariencia

4.2) Luego, elija "Revolución 3D" y aparecerá el cuadro de diálogo anterior.

4.3) Para mapear el diseño a la botella, haga clic en la opción inferior izquierda: "Map Art".

4.4) Esto permite elegir y ajustar un símbolo para la botella.

4.5) Asegúrese de hacer coincidir el símbolo con la superficie correcta (ver más abajo).

4.6) Haga clic en "Escalar para ajustar" y la etiqueta se asigna a la botella.

4.7) Siga los mismos pasos para la etiqueta del cuello.

Paso #5: Evite un archivo desordenado

5.1) Ahora, es hora de convertir la botella en curvas Bézier usando la función "Expandir apariencia": Objeto > Expandir apariencia

Illustrator no está destinado principalmente a la manipulación de objetos 3D. Expandir la apariencia de un objeto crea una colección agrupada de elementos más pequeños que dan la ilusión de un objeto 3D.

5.2) Para mantener las cosas ordenadas, combine los elementos con la herramienta "Pathfinder" o "Shape Builder" (ver más abajo).

*Consejo profesional: unir objetos crea puntos de anclaje no deseados. Redúzcalos yendo a Objeto> Ruta> Simplificar. Para aquellos que usan Illustrator regularmente, se recomienda encarecidamente el complemento VectorScribe y su herramienta de eliminación de puntos.

Paso #6: Agregue vida con colores y degradados

Para el paso final, dale vida a la botella con colores y degradados. Aquí es donde entra en juego el arte individual. Agregue reflejos, luces y sombras para una apariencia realista, o use trazos y una paleta de colores simplificada para una vibra más gráfica. Con una base sólida, las posibilidades estilísticas son infinitas.

¡Saludos a las ilustraciones isométricas!

Las ilustraciones isométricas aportan profundidad, dimensionalidad y personalidad a una amplia gama de proyectos de diseño. Utilice los principios descritos en este tutorial para explorar más posibilidades isométricas y no olvide probar los otros efectos 3D de Illustrator: "Girar" y "Extruir y biselar".

¡Háganos saber lo que piensas! Por favor, deje sus pensamientos, comentarios y comentarios a continuación.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Vida útil visual: por qué las ilustraciones de diseño web se vuelven obsoletas
• Una guía paso a paso para diseñar ilustraciones personalizadas sin ninguna habilidad de dibujo
• Nuevas realidades: VR, AR, MR y el futuro del diseño
• The Designer's Edge: una descripción general de los complementos de Photoshop
• Emojis en evolución: diseño para la nueva cara de la mensajería