¿Cómo dibujar vectores isométricos?

Estoy buscando soluciones de software "incorporadas" para Illustrator CS2-5 preferiblemente.

Estoy tratando de crear estas ilustraciones isométricas para una aplicación web. En este momento, configuré manualmente una cuadrícula en Adobe Illustrator y realicé los dibujos basados ​​en esta cuadrícula, pero no tengo guías, ni instantáneas ni cosas por el estilo...

El resultado final debería ser similar a este: http://www.twigital.co.uk/

Me pregunto si conoce un buen software para dibujar cosas isométricas desde las que pueda generarlas como un vector (.eps o .ai) para poder importarlas a Illustrator y mejorar los colores y otras cosas.

Si no conoces un software especial para esto, ¿alguna vez has hecho ilustraciones isométricas en Illustrator? ¿Algún método? ¿Algun consejo?

Ejemplo de dibujo vectorial isométrico

EDITAR:

No confunda el dibujo isométrico con el dibujo en perspectiva de 1, 2 o 3 puntos.

DIBUJO ISOMÉTRICO:

[el sistema isométrico es solo una convención/invención, útil para muchas cosas, no para reproducir lo que los ojos ven en realidad, sino solo una convención útil para medir y otras cosas]

iso(igual) métrica(medida)

En un dibujo isométrico , todas las aristas de un cubo serían paralelas en conjuntos de cuatro. (2 líneas paralelas significa que las líneas nunca se encontrarán sin importar cuánto tiempo las dibujes)

DIBUJO EN PERSPECTIVA:

[Las convenciones del dibujo en perspectiva (1 punto, 2 puntos, 3 puntos... y algunas otras) siguen siendo convenciones pero intentan imitar y estar lo más cerca posible de lo que el ojo ve en la realidad (3D), pero como es en 2D (papel/pantalla) nunca es como la realidad es en realidad.]

[Otra cosa que algunos pueden argumentar es que debido al hecho de que tenemos dos ojos (solo algunos dispositivos ópticos)* y la imagen en realidad se une (se crea) a través de alguna magia que ocurre en el cerebro, hace otro punto por el cual ninguno de estos las convenciones realmente se parecen a la realidad... pero esto es para la Filosofía SE :P]*

En el dibujo en perspectiva , los bordes se estrecharían hacia uno o más puntos de fuga.

Con la cuadrícula de perspectiva en Illustrator CS 5 hay 3 opciones:

Perspectiva de 1 punto, perspectiva de 2 puntos y perspectiva de 3 puntos.

Después de procesar toda la información de arriba (la información de Internet... podría estar equivocada, siéntase libre de deliberar) asumo simplemente que no es posible lograr una vista isométrica de múltiples objetos en un lienzo (como en el ejemplo anterior, twigital.co.uk (gracias a George por su explicación de cómo se hizo en su respuesta) con una cuadrícula de perspectiva, es decir, con perspectiva de 1 punto: las líneas se encontrarán en un punto en el horizonte, 2 puntos: líneas se encontrarán en 2 puntos en el horizonte, 3 puntos... entiendes la idea...

Y con una vista isométrica, las líneas nunca se encuentran , ya que son paralelas. (Creo que también se le puede llamar perspectiva isométrica, por eso estoy un poco confundido)

!!! Pero si construyes la grilla manualmente, es posible , puedes aprender cómo hacerlo o puedes descargar uno ya hecho aquí . Después de hacer todo en este tutorial, seleccione todas las líneas que ha creado y vaya a Ver> Guías> Crear guías . Esta es una especie de respuesta para esta pregunta, pero solo estaba buscando una solución "incorporada" y ...

Intenté hacer esto con la cuadrícula de perspectiva en Illustrator CS5... no funcionó para mí, si alguien ha hecho esto con la cuadrícula de perspectiva en Illustrator, explique los pasos exactos para hacerlo.

Algunos pueden decir que hago mucho hincapié en algunas cosas anteriores, pero si crea una aplicación compleja con cientos, o solo 50 objetos colocados al azar (de manera isométrica) y los objetos no son perfectamente isométricos, terminará con resultados feos aquí y allá (no todas las líneas serán paralelas y se ve mal) o si es una aplicación para mediciones y proyecciones reducidas de precisión, terminará con números "malos"... y probablemente no quiera eso. .

Hasta ahora, la mejor opción que he encontrado es lo que ha comentado en la respuesta de @Johannes: convertir las líneas en cuadrícula. Está lejos de las vistas isométricas que ofrece cualquier software CAD 3D (o generalmente cualquier software 3D), pero tal vez sea una solución suficiente para un software de ilustración 2D (que, sí, tiene algunas herramientas para ayudar a dibujar con perspectiva).

Respuestas (4)

Para twigital , el diseñador ( Chris ) usó Illustrator, una cuadrícula y la herramienta 3D Rotate. Tenga en cuenta que tiene ajustes preestablecidos para rotaciones isométricas.

Si necesita más de lo que Illustrator proporciona de forma predeterminada, pruebe el complemento CADtools para Illustrator , que proporciona herramientas para dibujar y acotar isométricos.

Tengo algunos recursos más para compartir. Basado en este tutorial , he registrado los pasos anteriores como acciones para que pueda activarlos usando atajos de teclado:

  • Izquierda = CMD + Mayús + F1
  • Arriba = CMD + Mayús + F2
  • Derecha = CMD + Mayús + F3

Para obtenerlos, todo lo que necesita hacer es descargar este archivo: Isometric.aia y en Illustrator, vaya a Acciones (Ventana> Acciones) y desde el menú contextual (el ícono pequeño en la parte superior derecha con la flecha apuntando hacia abajo y 2 líneas horizontales (=)) elija Cargar acciones y vaya a Isometric.aia

También es bastante simple crear las acciones desde cero.

También he hecho algunas grabaciones de pantalla:

El archivo de arcos completo se puede descargar desde aquí: iso_arches.ai

arcos isometricos

Hay 3 cosas principales que pueden no ser evidentes en el video y que serán útiles:

  • usando el ajuste de puntos/una cuadrícula de referencia para colocar objetos más fácilmente
  • usando una unidad para módulos para que diferentes piezas encajen juntas
  • al ensamblar objetos con partes repetitivas, usando símbolos en lugar de grupos

para facilitar los ajustes

+ 1 para las herramientas CAD para Adobe Illustrator CS3, CS4, CS5 y CS5.5 enlace al complemento. Y la configuración isométrica de la herramienta Rotar 3D también es buena. Estos son métodos "incorporados en el software" para hacer un dibujo isométrico correcto y preciso... pero ese complemento de CADtools es un poco costoso.
Vale la pena señalar que el tutorial SSR tiene un error tipográfico 86.062% debería ser 86.602% , porque es el valor de cos(30) y sin(60), donde el ángulo coincide con sus rotaciones. Si no soluciona esto, eventualmente tendrá problemas ya que las cosas no se alinean exactamente entre las transformaciones.

Illustrator CS5 tiene una gran herramienta nueva llamada "Perspectiva". Esta herramienta te permite configurar una cuadrícula de perspectiva 2D o 3D que te ayuda a dibujar cosas para darles dimensión. "Pega" formas y texto a un cierto plano y ajusta su tamaño y ángulo dependiendo de dónde se coloque.

Aquí hay algunos videos de Adobe que explican exactamente qué es la herramienta y cómo usarla en profundidad:

Definición de cuadrículas de perspectiva

Dibujar Obras De Arte En Perspectiva

Además, aquí hay un video tutorial de Terry White, que trata sobre cosas similares.

Y aquí hay algunos tutoriales variados en 3D , que no necesariamente utilizan la herramienta Perspectiva en Illustrator.

Creo que esta herramienta es la mejor manera de obtener esa sensación isométrica con Illustrator. Si no tiene CS5, entonces tendría que usar algunos métodos más toscos para hacer sus propias cuadrículas y otras cosas.

Alternativamente, siempre puede intentar encontrar un software separado para satisfacer sus necesidades. De cualquier manera espero que esto ayude!

EDITAR

Para aclarar, la herramienta Perspectiva de ninguna manera es "Verdadero 3D", es simplemente un objeto 2D con la ilusión de 3D (al igual que isométrica).

Tome esta imagen por ejemplo. Esta es una imagen isométrica, y esta imagen podría hacerse con la herramienta de perspectiva en Illustrator. De acuerdo, existe un mejor software para esto, pero creo que esta es una de sus mejores apuestas para hacerlo dentro de Illustrator. Toma un tiempo acostumbrarse a la herramienta de perspectiva, los tutoriales definitivamente ayudarán con eso.

Creo que la diferencia que está viendo entre los ejemplos que publiqué anteriormente y su "sensación isométrica" ​​es simplemente el ángulo de la imagen. Isométrico es típicamente más de arriba hacia abajo (solo en un ángulo) mientras que los otros ejemplos miran más directamente al objeto. Pero así es como decidieron hacer su imagen.

Uhum, tengo CS5, noto la cuadrícula de perspectiva, pero ¿puedes configurarla para que entre en modo "isométrico"? Porque lo isométrico no es 3D, es 2D, pero parece 3D, eso es todo... y en los gráficos isométricos no hay perspectiva...[ en.wikipedia.org/wiki/Isometric_projection ]
hasta ahora, hice mi cuadrícula manualmente con líneas simples en Illustrator, luego las seleccioné todas y fui a Ver> Guías> Crear guías, por lo que todas mis líneas ahora son una cuadrícula isométrica hecha de guías (no solo líneas en Illustrator) y con las guías inteligentes habilitadas, obtengo lo que quiero... no del todo, pero casi...
@Flavius: Esa es la forma de hacerlo. Deberías hacer de esto una respuesta.
Editado para aclaración. Esperemos que esto tenga más sentido ahora.
@Johannes [He editado mi pregunta para aclarar algunas cosas, principalmente para mí y para personas como yo que no entienden estas cosas tan fácilmente] Explique cómo hacer esto con la cuadrícula de perspectiva en Illustrator CS5 y lograr algo como el ejemplo en la pregunta, o tu ejemplo, pero preferiría el mío, es decir, varios objetos dibujados y luego dispuestos en un lienzo de forma isométrica.
@AlanGilbertson Creo que esta no es la forma de hacerlo, ya que lo intenté un poco y no lo logré, aunque los enlaces son buenos, pero la cuadrícula de Perspectiva ... no ... tal vez no entiendo eso, esperaré más aclaraciones si Johannes responde

Podría estar pensando demasiado complicado, pero de cualquier manera pensé que debería compartir.

Bueno, mi primer pensamiento fue Rhinoceros , que es un software 3D (para Windows)

Con él, puede crear fácilmente texto en 3D y objetos básicos en 3D como cubos, cilindros y otras cosas.

Además, lo que tenía en mente era la función Make2D . Te permite hacer dibujos en 2D a partir de objetos en 3D.

Luego puede guardar esas líneas en formato .ai.

Aquí hay un ejemplo de iphone (no 100% exacto) que hice (hace mucho tiempo) que ahora convertí en líneas y de eso traje a Illustrator. La imagen

Si lo que quieres es llenarlo de color... eso puede ser un trabajo un poco tedioso ya que necesitas unir caminos antes de poder llenarlo... Selecciona 2 o más líneas y Ctrl+J.

opción interesante.. lo miraré
+1 por recomendación de software 3D que tiene la opción de exportar y luego importar a Illustrator. será útil no sólo en este caso...

Creo que el tutorial perfecto para sus propósitos acaba de aparecer en el sitio web de Digital Arts . No es solo un "Cómo hacerlo", es un estudio de caso completo por derecho propio.

Je, je... por supuesto que apareció, yo lo pedí, ¿no? :P :P[jooooke] . Gran tutorial, lo revisaré más tarde esta noche, gracias por el aviso. :)
¡Pero por supuesto! Hay una cuadrícula isométrica lista para usar incluida con el tutorial, que podría ahorrar algo de tiempo. :)
¿Cómo dibujar vectores isométricos?
RespuestasAquíPolítica de privacidad1y, 0v