¿Cómo dibujar vectores isométricos?

16

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

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

El resultado final debería estar cerca de esto: http://www.twigital.co.uk/

Me pregunto si conoces un buen software para dibujar cosas isométricas a partir del cual pueda generarlo como un vector (.eps o .ai) para poder importar a Illustrator y aumentar los colores y otras cosas.

Si no conoce un software especialmente para esto, ¿alguna vez ha hecho ilustraciones isométricas en Illustrator? Cualquier metodo? ¿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 la realidad, sino realmente una convención útil para mediciones y otras cosas]

iso (igual) métrica (medición)

En un dibujo isométrico , todos los bordes de un cubo serían paralelos en conjuntos de cuatro. (2 líneas paralelas significan que las líneas nunca se encontrarán sin importar cuánto tiempo las dibuje)

DIBUJO PERSPECTIVO:

[Las convenciones de 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 tal como es en 2D (papel / pantalla) nunca es como es realmente la realidad.]

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

En el dibujo en perspectiva , los bordes se irán estrechando 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) Supongo que no es posible lograr una vista isométrica de varios 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 una perspectiva de 1 punto: las líneas se encontrarán en un punto en el horizonte, 2 puntos: líneas se reunirá en 2 puntos en el horizonte, 3 puntos ... te haces una idea ...

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

!!! Pero si construye la cuadrícula manualmente, es posible , puede aprender cómo hacerlo o puede descargar uno que ya está hecho aquí . Después de hacer todo en este tutorial, seleccione todas las líneas que ha creado y vaya a Ver> Guías> Hacer guías . Esta es la respuesta a 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 posicionados 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. .

Flavio Frantz
fuente
1
Hasta ahora, la mejor opción que he encontrado es lo que has comentado en la respuesta de @Johannes: convierte las líneas en cuadrícula. Está lejos de las vistas isométricas que ofrece cualquier software CAD 3D (o generalmente cualquier 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).
Jari Keinänen

Respuestas:

11

Para twigital, el diseñador ( Chris ) usó Illustrator, una cuadrícula y la herramienta 3D Rotate. Observe que tiene preajustes 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 el dibujo y el dimensionamiento isométricos.

Tengo algunos recursos más para compartir. En base a este tutorial , he registrado los pasos anteriores como acciones para que pueda activarlos utilizando métodos abreviados de teclado:

  • Izquierda = CMD + Shift + F1
  • Arriba = CMD + Shift + F2
  • Derecha = CMD + Shift + F3

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

Es bastante simple crear las acciones desde cero también.

También he hecho algunas grabaciones de pantalla:

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

arcos isométricos

Hay 3 cosas principales que pueden no ser evidentes en el video 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 las diferentes piezas encajen
  • al ensamblar objetos con partes repetidas, usando símbolos en lugar de grupos

para hacer ajustes más fáciles

George Profenza
fuente
+ 1 para CADtools para Adobe Illustrator CS3, CS4, CS5 y CS5.5 enlace al complemento. Y la configuración isométrica de la herramienta Rotación 3D también es buena. Estos son una especie de métodos "integrados en el software" para hacer un dibujo isométrico correcto y preciso ... pero ese complemento CADtools es un poco caro.
Flavius ​​Frantz
1
Vale la pena señalar que el tutorial de SSR tiene un error tipográfico 86.062% debe 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.
Joojaa
1

Illustrator CS5 tiene una gran herramienta nueva llamada "Perspectiva". Esta herramienta le permite configurar una cuadrícula de perspectiva 2D o 3D que lo ayuda a dibujar cosas para darles dimensión. "Adhiere" 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

Dibujo de ilustraciones en perspectiva

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

Y aquí hay algunos tutoriales 3D diversos , 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 "True 3D", es simplemente un objeto 2D con la ilusión de 3D (al igual que isométrico).

Toma 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, hay un mejor software para esto, pero creo que esta es una de sus mejores apuestas para hacerlo dentro de Illustrator. La herramienta de perspectiva tarda un poco en acostumbrarse, 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 vertical (solo en ángulo) mientras que los otros ejemplos miran más directamente al objeto. Pero así es como decidieron hacer su imagen.

Hanna
fuente
Uhum, tengo CS5, noto la cuadrícula de perspectiva, pero ¿puedes configurarla para que entres en modo "isométrico"? Porque la isométrica no es 3D, es 2D, pero se ve un poco en 3D, eso es todo ... y en los gráficos isométricos no hay perspectiva ... [ en.wikipedia.org/wiki/Isometric_projection ]
Flavius ​​Frantz
3
hasta ahora hice manualmente mi cuadrícula con líneas simples en Illustrator, luego las seleccioné todas y fui a Ver> Guías> Hacer 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 Smart Guides eneable conseguí lo que quería ... no completamente, pero cerca ...
Flavius ​​Frantz
@Flavius: Esa es la forma de hacerlo. Deberías hacer de esto una respuesta.
Alan Gilbertson
Editado para aclaraciones. Esperemos que esto tenga más sentido ahora.
Hanna
@Johannes [He editado mi pregunta para aclarar algunas cosas, principalmente para mí y para personas como yo que no hacen que estas cosas sean fáciles] Por favor explique cómo hacer esto con la cuadrícula de perspectiva en Illustrator CS5 y logre algo como el ejemplo en la pregunta, o su ejemplo, pero preferiría el mío, es decir, varios objetos dibujados y luego dispuestos en un lienzo en una materia isométrica.
Flavius ​​Frantz
1

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, puedes hacer fácilmente texto en 3D y objetos básicos en 3D como cubos, cilindros y demás.

Además, lo que tenía en mente era la función Make2D . Le 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í a líneas y de eso traje a Illustrator. La imagen

Si lo que quiere es llenarlo de color ... puede ser un trabajo un poco tedioso, ya que necesita unir rutas antes de poder llenarlo. Seleccione 2 o más líneas y Ctrl + J.

Joonas
fuente
opción interesante ... lo investigaré
Flavius ​​Frantz
+1 para la recomendación de software 3D que tiene la opción de exportar y luego importar a Illustrator. será útil no solo en este caso ...
Flavius ​​Frantz
1

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", es un estudio de caso completo por derecho propio.

Alan Gilbertson
fuente
Él él ... por supuesto, apareció, lo pedí, ¿no? : P: P [jooooke]. Gran tutorial, lo revisaré más tarde esta noche, gracias por el aviso. :)
Flavius ​​Frantz
¡Pero por supuesto! Hay una cuadrícula isométrica lista para usar incluida con el tutorial, que podría ahorrar algo de tiempo. :)
Alan Gilbertson