Dominando otra dimensión: un tutorial de ilustración isométrica

[ad_1]

Las ilustraciones isométricas (figuras bidimensionales que parecen tridimensionales) agregan profundidad y énfasis a los gráficos web y de aplicaciones, mejorando la experiencia y el compromiso del usuario. Por ejemplo, los íconos de puntos isométricos, que tienden a ser más grandes que los íconos de la interfaz, se pueden usar para enfatizar microcopias y llamadas a la acción. Otras imágenes isométricas, como infografías, gráficos y vistas de productos, brindan claridad cuando los usuarios necesitan información detallada del producto o una vista panorámica de un proceso. Por ejemplo, el sitio web de un fabricante de automóviles puede mostrar una vista isométrica ampliada para demostrar la ingeniería de precisión de sus piezas, o una empresa de bienes raíces puede proporcionar una ilustración isométrica para resaltar hitos importantes para los posibles compradores de viviendas.

Las ilustraciones isométricas pueden ser difíciles y llevar mucho tiempo de crear. Sin embargo, pasé varios años creando ilustraciones vectoriales isométricas para clientes y encontré una forma más rápida de crearlas. En este tutorial de ilustración isométrica para diseñadores de UI, explicaré cómo usar el efecto 3D Revolve de Adobe Illustrator para crear objetos isométricos en seis sencillos pasos.

Índice
  1. Cómo crear una ilustración isométrica en Adobe Illustrator
  2. Ejemplos de ilustraciones isométricas en diseño de interfaz de usuario
  3. Da vida a tus diseños de interfaz de usuario con ilustraciones isométricas

Cómo crear una ilustración isométrica en Adobe Illustrator

En Adobe Illustrator, puede crear rápidamente ilustraciones isométricas utilizando los efectos 3D de la herramienta. En este tutorial, crearemos un dibujo isométrico simple de una botella y una etiqueta usando el efecto Girar, pero estos conocimientos también se aplican a los otros efectos 3D de Illustrator, como Extrusión y Bisel.

Paso 1: Dibujar botella y líquido

Cree un nuevo documento de Adobe Illustrator y agregue una referencia de imagen de una botella al documento. Dibuja un contorno de la botella y el líquido dentro. Divide la botella y el líquido por la mitad. El ancho de línea del contorno de la botella define el grosor del vidrio.

Consejo profesional: Copie la ilustración y péguela fuera de la mesa de trabajo como copia de seguridad.

La creación de ilustraciones isométricas comienza con dibujar una imagen de referencia y cortarla por la mitad.  Este tutorial utiliza una botella de cuello corto como ejemplo.
Figura 1A: Inserte una imagen de referencia de una botella. Figura 1B: Dibuja la botella y el líquido. Figura 1C: Dividir la botella por la mitad.

Paso 2: Aplicar el efecto de rotación

Como sugiere el nombre, el efecto de rotación gira la ruta en una dirección circular alrededor de su eje y global (eje de rotación) para crear un objeto 3D. En Adobe Illustrator, la posición del eje de rotación se fija verticalmente. (Es por eso que delineamos la botella y la partimos por la mitad).

Consejo profesional: No use colores de relleno degradados para el contorno de la botella o el objeto líquido. Al final del tutorial, tendrá la opción de agregar degradados, resaltados y otros efectos visuales.

Para encontrar el efecto de rotación, vaya a Efecto > 3D y Materiales > 3D (Clásico) > Rotación (Clásico). En la parte superior del cuadro de diálogo, verá un campo denominado Posición. Elija enlaces isométricos. En Rotación, modifique las siguientes opciones de sombreado de superficie y rotación:

  • Ángulo: Esto define el grado de rotación alrededor del eje del objeto. Cuando se ajusta a 180°, la botella se divide por la mitad verticalmente. Ajuste el ángulo a 360° para crear una botella entera.
  • Desplazamiento: Esto controla la distancia de desplazamiento desde el eje vertical del objeto. Introduzca 0.
  • Superficie: Esto establece las propiedades de material e iluminación del objeto. Elija Sin sombreado.
Asegúrese de que Ángulo, Desplazamiento y Superficie tengan la configuración correcta.
Figura 2A: desagrupe las formas y aplique el efecto de rotación. Figura 2B: Use la configuración resaltada.

Ha creado una botella isométrica de líquido. Ahora es el momento de agregar etiquetas.

Consejo profesional: En este punto, es posible que tenga la tentación de aplicar el efecto Expandir apariencia, pero no lo haga hasta que hayamos creado los subtítulos.

El efecto de rotación le da a la vista isométrica un aspecto 3D redondeado.
Figura 2C: Rellene la forma girada con un color sin degradado. Figura 2D: Áreas donde agregará etiquetas en el paso 3.

Paso 3: Prepare la etiqueta de la botella

Utilice la botella para definir las dimensiones de la etiqueta. En la imagen de ejemplo a continuación, se puede ver la altura de la etiqueta del cuerpo, pero la altura de la etiqueta del cuello no está clara ya que la superficie no es paralela al eje. Una altura aproximada servirá. La longitud de la etiqueta se calcula utilizando la fórmula 2πr para la circunferencia de un círculo.

Cuando esté satisfecho con el diseño de su etiqueta, convierta ambas etiquetas en iconos. El panel Símbolos se encuentra en Ventana > Símbolos. Arrastre y suelte los diseños de etiquetas uno por uno en el panel para crear símbolos.

Consejo profesional: Los íconos en Adobe Illustrator y Sketch funcionan de manera similar.

Estime la altura de las etiquetas usando la fórmula 2πr y luego agregue símbolos.  En este tutorial de 3D Illustrator, un icono en blanco y negro define la botella.
Figura 3A: altura de la etiqueta del cuello y altura de la etiqueta del cuerpo. Figura 3B: Usa la fórmula 2πr para encontrar el perímetro.

Paso 4: haga coincidir la etiqueta con la botella

Siempre que la botella no se haya vectorizado con el efecto Mejora de la apariencia, es completamente editable. Selecciona la botella, luego navega a Ventana > Apariencia > Rotación 3D.

Para hacer coincidir el diseño de la etiqueta con la botella, haga clic en arte de la tarjeta Opción en la parte inferior izquierda del panel Rotar 3D. Esto le permite elegir y personalizar el icono de la botella. Asegúrese de hacer coincidir el icono con la interfaz correcta. Hacer clic Escalar para adaptarsey se asigna la etiqueta a la botella.

Siga los mismos pasos para la etiqueta del cuello.

Combina botellas y etiquetas con la función de rotación.  Use la configuración resaltada para mapear las etiquetas alrededor de la botella.
Figura 4A: Vista previa del arte asociado a la botella. Figura 4B: Use la configuración resaltada.

Paso 5: limpia el archivo

Ahora es el momento de aplicar las curvas Bezier, que se utilizan en gráficos por computadora para crear curvas continuas que parecen suaves en todas las escalas, a su botella. Elija Objeto > Ampliar vista.

Mejorar 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. Combine los elementos con las herramientas Pathfinder o Shape Builder para mantener las cosas organizadas.

La conexión de objetos crea puntos de anclaje no deseados. Acláralos eligiendo Objeto > Trazado > Simplificar. Si usa Illustrator regularmente, descargue el complemento VectorScribe y use la herramienta Eliminar punto de anclaje para perfeccionar este paso.

La representación del vector isométrico debe simplificarse.  Expanda la ilustración de la botella y combine los segmentos para que parezcan menos desordenados.
Figura 5A: Múltiples segmentos creados por el efecto Expandir apariencia. Figura 5B: Múltiples segmentos combinados y simplificados.

Paso 6: refina tu ilustración con colores y degradados

Después de crear su ilustración isométrica, es posible que desee agregar colores y degradados para darle vida a la botella. Agregue reflejos, luces y sombras (organizados en capas separadas) para una apariencia realista, o use trazos y una paleta de colores simplificada para una vibra más gráfica. Si no está seguro de por dónde empezar, explore diferentes combinaciones de colores con el generador de paletas de Illustrator. Con una sólida base de ilustración isométrica, las posibilidades de diseño son infinitas.

La base de la representación isométrica está lista.  Juega con degradados y colores para lograr un efecto más realista.
Figura 6A: Diseño de botella y etiqueta sin procesar. Figura 6B: Botella estilizada con color y degradados.

Ejemplos de ilustraciones isométricas en diseño de interfaz de usuario

Ahora que tiene una manera rápida y fácil de crear ilustraciones isométricas, echemos un vistazo a algunos ejemplos de otros tres diseñadores de Toptal para que su creatividad fluya.

Folleto digital de la conferencia

Štefan Kováč es diseñador de plantillas para el mercado de Adobe Stock. Este ejemplo es una plantilla de folleto de conferencia digital que creó usando trazos simples, formas, marcos de texto y degradados monocromáticos. Para crear estos dibujos, Štefan usó los efectos de InDesign "Rotación +/- 30°" y "Inclinación +/- 30°" para crear una distorsión isométrica.

La ilustración isométrica de Štefan utiliza edificios y caminos en 3D para presentar información como la asistencia a la conferencia y la agenda.
Štefan combina formas, colores, texto y degradados en su ilustración isométrica para el mercado de Adobe Stock.

Guía Oficina Digital

Paulina Jozwik usó ilustraciones isométricas para crear una guía de espacio de oficina digital para Teal Space. Eligió esta técnica porque se usa ampliamente en dibujos arquitectónicos y porque sintió que la naturaleza tridimensional de las imágenes isométricas ayudaría a que sus renderizados se destaquen en el sitio web de Teal Space, que utiliza principalmente elementos de diseño planos.

Esta vista isométrica muestra la estructura y la profundidad.  Completo con notas adhesivas, un monitor, una mesa y sillas, reproduce una sala de conferencias real.
El diseño de Paulina demuestra la profundidad de la ilustración isométrica y ofrece una vista de pájaro realista de un espacio de oficina.

campaña de instagram

Para celebrar el 50.º Día Nacional de Omán, se encargó a Wafa' Babasail que creara una campaña de Instagram única para Asyad Group, una empresa de logística de Oriente Medio. Wafa' utilizó técnicas de ilustración isométrica y proporciones de escala exageradas para crear un mapa que muestra el impacto de gran alcance de la empresa en los puertos marítimos de Omán.

Wafa' destacó los detalles de la marca que se ven en los barcos, contenedores y personajes humanos en su ilustración isométrica para esta campaña.
Usando espacio, color, tipografía, imágenes de referencia e ilustraciones isométricas, Wafa' ilustró la influencia del Grupo Asyad en el Medio Oriente para el 50º Día Nacional de Omán.

Da vida a tus diseños de interfaz de usuario con ilustraciones isométricas

Las ilustraciones isométricas ayudan a los diseñadores a agregar profundidad, dimensión y personalidad a sus proyectos de diseño de interfaz de usuario. Tradicionalmente, crear ilustraciones isométricas ha sido una tarea que consume mucho tiempo, pero no tiene por qué serlo. Ya sea que esté trabajando en un mapa, representación de productos o infografía, los dibujos isométricos son una excelente manera de agregar riqueza y perspectiva a las ilustraciones web y móviles.

Siguiendo el método rápido y fácil descrito en este tutorial, creará impresionantes gráficos isométricos en muy poco tiempo.

[ad_2]

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir