Come disegnare vettori isometrici?


16

Sto cercando preferibilmente soluzioni software "integrate" per Illustrator CS2-5.

Sto cercando di creare queste illustrazioni isometriche per un'app Web. In questo momento ho impostato manualmente una griglia in Adobe Illustrator e facendo i disegni basati su questa griglia - ma non ho guide, nessuno scatto e cose del genere ...

Il risultato finale dovrebbe essere vicino a questo: http://www.twigital.co.uk/

Mi chiedo se sei a conoscenza di un buon software per disegnare roba isometrica da cui posso quindi emetterlo come vettore (.eps o .ai) in modo da poter importare in Illustrator e sfruttare i colori e altre cose?

Se non conosci un software appositamente per questo, hai mai fatto illustrazioni isometriche in Illustrator? Qualche metodo? Qualche consiglio?

Esempio di disegno vettoriale isometrico

MODIFICARE:

Non confondere il disegno isometrico con il disegno prospettico a 1,2 o 3 punti.

DISEGNO ISOMETRICO:

[il sistema isometrico è solo una convenzione / invenzione, utile per molte cose, non per riprodurre ciò che gli occhi vedono nella realtà ma in realtà solo una convenzione utile per misure e altre cose]

iso (uguale) metrico (misura)

In un disegno isometrico , tutti i bordi di un cubo sarebbero paralleli in gruppi di quattro. (2 linee parallele significa che le linee non si incontreranno mai, non importa per quanto tempo le disegni)

DISEGNO PROSPETTIVO:

[Le convenzioni del disegno prospettico (1 punto, 2 punto, 3 punto..e alcuni altri) sono ancora convenzioni ma cercano di imitare ed essere il più vicino possibile a ciò che l'occhio vede nella realtà (3D), ma così com'è su 2D (carta / schermo) non è mai come realmente è la realtà.]

[Un'altra cosa che alcuni potrebbero obiettare è che facciamo del fatto che abbiamo due occhi (solo alcuni dispositivi ottici) * e l'immagine effettivamente unisce (è creata) attraverso un po 'di magia che accade nel cervello, un altro punto sul perché nessuno di questi le convenzioni assomigliano davvero esattamente alla realtà ... ma questo è per la filosofia SE: P] *

Nel disegno prospettico , i bordi si restringerebbero verso uno o più punti di fuga.

Con la griglia prospettica in Illustrator CS 5 ci sono 3 opzioni:

Prospettiva a 1 punto, prospettiva a 2 punti e prospettiva a 3 punti.

Dopo aver elaborato tutte le informazioni dall'alto (le informazioni da Internet ... potrebbero essere errate, sentiti libero di deliberare) Faccio il semplice presupposto che non è possibile ottenere una vista isometrica di più oggetti su una tela (come nel esempio sopra, twigital.co.uk (grazie a George per la sua spiegazione di come è stato fatto nella sua risposta) con una griglia prospettica, cioè con una prospettiva a 1 punto: le linee si incontreranno in un punto sull'orizzonte, 2 punti: linee si incontreranno in 2 punti all'orizzonte, in 3 punti ... avrai l'idea ...

E con una vista isometrica le linee non si incontrano mai , poiché sono parallele. (Penso che puoi anche chiamarlo prospettiva isometrica, ecco perché sono un po 'confuso)

!!! Ma se costruisci la griglia manualmente è possibile , puoi imparare come farlo o puoi scaricarne uno già fatto qui . Dopo aver fatto tutto in questo tutorial, seleziona tutte le linee che hai creato e vai su Visualizza> Guide> Crea guide . Questa è una specie di risposta a questa domanda ma stavo solo cercando una soluzione "integrata" e ...

Ho provato a farlo con la griglia prospettica in Illustrator CS5 ... non ha funzionato per me, se qualcuno lo ha fatto con la griglia prospettica in Illustrator, spiega i passaggi esatti per farlo.

Alcuni potrebbero dire che sottolineo molto su alcune cose sopra, ma se crei un'app complessa con centinaia o solo 50 oggetti posizionati casualmente (in modo isometrico) e gli oggetti non sono perfettamente isometrici, finirai con risultati brutti qua e là (non tutte le linee saranno parallele e sembra male) o se è un'app per misurazioni e proiezioni ridotte di precisione finirai con numeri "cattivi" ... e probabilmente non lo vorrai. .


1
Finora l' opzione migliore che ho trovato è quella che hai commentato nella risposta di @Johannes: converti le linee in griglia. È lontano dalle viste isometriche offerte da qualsiasi software CAD 3D (o generalmente qualsiasi 3D), ma forse è una soluzione sufficiente per un software di illustrazione 2D (che, sì, ha alcuni strumenti per aiutare il disegno con la prospettiva).
Jari Keinänen,

Risposte:


11

Per due anni il designer ( Chris ) ha usato Illustrator, una griglia e lo strumento Ruota 3D. Si noti che ha impostazioni predefinite per le rotazioni isometriche.

Se per impostazione predefinita hai bisogno di qualcosa in più rispetto a quello fornito da Illustrator, prova il plug-in CADtools per Illustrator , che fornisce strumenti per il disegno e il dimensionamento isometrici.

Ho alcune risorse in più da condividere. Sulla base di questo tutorial ho registrato i passaggi precedenti come azioni in modo da poter attivare quelli che utilizzano le scorciatoie da tastiera:

  • Sinistra = CMD + Maiusc + F1
  • In alto = CMD + Maiusc + F2
  • Destra = CMD + Maiusc + F3

Per ottenere questi, tutto ciò che devi fare è scaricare questo file: Isometric.aia e in Illustrator vai su Azioni (Finestra> Azioni) e dal menu contestuale (la piccola icona in alto a destra con la freccia rivolta verso il basso e 2 linee orizzontali (=)) scegli Carica azioni e passa a Isometric.aia

È abbastanza semplice anche creare le azioni da zero.

Ho anche fatto alcune registrazioni dello schermo:

Il file completo degli archi può essere scaricato da qui: iso_arches.ai

archi isometrici

Ci sono 3 cose principali che potrebbero non essere evidenti nel video che saranno utili:

  • utilizzando lo snap a punti / una griglia di riferimento per posizionare gli oggetti più facilmente
  • usando un'unità per moduli in modo che pezzi diversi si incastrino
  • quando si assemblano oggetti con parti ripetute, usando simboli anziché gruppi

per semplificare le modifiche


+ 1 per i link CADtools per Adobe Illustrator CS3, CS4, CS5 e CS5.5 al plug-in. E anche l'impostazione isometrica dello strumento Ruota 3D è buona. Si tratta di metodi "integrati nel software" per eseguire un disegno isometrico corretto e accurato ... ma il plug-in CADtools è piuttosto costoso.
Flavius ​​Frantz l'

1
Vale la pena notare che il tutorial SSR ha un refuso 86,062% dovrebbe essere 86,6060% , perché è il valore di cos (30) e sin (60), dove l'angolo corrisponde alle rotazioni. Se non risolvi questo problema, alla fine sarai nei guai poiché le cose non si allineano esattamente tra le trasformazioni.
joojaa,

1

Illustrator CS5 ha un nuovo fantastico strumento chiamato "Prospettiva". Questo strumento ti consente di impostare una griglia prospettica 2D o 3D che ti aiuta a disegnare le cose per dare loro dimensione. "Attacca" forme e testo su un determinato piano e ne regola le dimensioni e l'angolo a seconda di dove è posizionato.

Ecco alcuni video di Adobe che spiegano esattamente cos'è lo strumento e come utilizzarlo in profondità:

Definizione delle griglie prospettiche

Disegno Illustrazione In Prospettiva

Inoltre, ecco un tutorial video di Terry White, che analizza cose simili.

Ed ecco alcuni tutorial 3D vari , che non utilizzano necessariamente lo strumento Prospettiva in Illustrator.

Penso che questo strumento sia il modo migliore per ottenere quella sensazione isometrica usando Illustrator. Se non hai CS5, dovresti usare alcuni metodi più approssimativi per creare le tue griglie e cosa no.

In alternativa puoi sempre provare a trovare software separato per soddisfare le tue esigenze. Ad ogni modo spero che questo ti aiuti!

MODIFICARE

Per chiarire, lo strumento Prospettiva non è affatto "True 3D", è semplicemente un oggetto 2D con l'illusione del 3D (proprio come isometrico).

Prendi questa immagine per esempio. Questa è un'immagine isometrica e questa immagine potrebbe essere creata con lo strumento prospettiva in Illustrator. Certo, c'è un software migliore là fuori per questo, ma penso che questa sia una delle tue migliori scommesse per farlo all'interno di Illustrator. Lo strumento di prospettiva richiede un po 'di tempo per abituarsi, i tutorial sicuramente aiuteranno in questo.

Penso che la differenza che stai vedendo tra gli esempi che ho pubblicato in precedenza e la tua "sensazione isometrica" ​​sia semplicemente l'angolo dell'immagine. Isometrica è in genere più dall'alto verso il basso (solo in un angolo) mentre gli altri esempi guardano più direttamente l'oggetto. Ma è così che hanno deciso di fare la loro immagine.


Uhum, ho CS5, noto la griglia prospettica, ma puoi impostarla in modo da entrare in modalità "isometrica"? Causa isometrica non è 3D, è 2D, ma sembra un po '3D tutto qui ... e nella grafica isometrica non c'è prospettiva ... [ en.wikipedia.org/wiki/Isometric_projection ]
Flavius ​​Frantz

3
finora ho creato manualmente la mia griglia con linee semplici in Illustrator, quindi le ho selezionate tutte e sono andato a Visualizza> Guide> Crea guide, quindi tutte le mie linee sono ora una griglia isometrica fatta di guide (non solo linee in Illustrator) e con le Smart Guide guidate ho un pò quello che voglio ... non del tutto, ma vicino ...
Flavius ​​Frantz,

@ Flavio: questo è il modo di farlo. Dovresti farne una risposta.
Alan Gilbertson,

A cura di chiarimenti. Spero che questo abbia più senso ora.
Hanna,

@Johannes [Ho modificato la mia domanda per chiarire alcune cose, soprattutto per me e persone come me che non riescono a semplificare queste cose] Spiega come fare questo con la griglia prospettica in Illustrator CS5 e ottenere qualcosa come l'esempio in la domanda, o il tuo esempio, ma preferirei la mia, cioè diversi oggetti disegnati e poi disposti su una tela in una materia isometrica.
Flavius ​​Frantz l'

1

Potrei pensare troppo complicato, ma in entrambi i casi ho pensato che avrei dovuto condividere.

Bene, il mio primo pensiero è stato Rhinoceros , che è un software 3D (per Windows)

Con esso puoi creare facilmente testo 3d e oggetti 3d di base come cubi, cilindri e altro.

Inoltre, quello che avevo in mente era la funzione Make2D . Ti permette di realizzare disegni 2D con oggetti 3d.

È quindi possibile salvare quelle righe in formato .ai.


Ecco un esempio di iPhone (non preciso al 100%) che ho realizzato (molto tempo fa) che ora ho convertito in linee e da quello portato in Illustrator. L'immagine

Se quello che vuoi è riempirlo di colore .. potrebbe essere un lavoro un po 'noioso poiché devi unire i percorsi prima di poterlo riempire .. Seleziona 2 o più righe e Ctrl + J.


opzione interessante ... ci penserò io
Flavius ​​Frantz il

+1 per la raccomandazione software 3D che ha la possibilità di esportare e quindi importare in Illustrator. sarà utile non solo in questo caso ...
Flavius ​​Frantz l'

1

Penso che il tutorial perfetto per i tuoi scopi sia appena apparso sul sito web di Digital Arts . Non è solo un "How To", è un intero caso di studio a sé stante.


Lui lui ... ovviamente si è presentato, l'ho chiesto, no? : P: P [jooooke]. Ottimo tutorial, lo controllerò più tardi questa sera, grazie per il testa a testa. :)
Flavius ​​Frantz,

Ma certo! C'è una griglia isometrica pronta all'uso inclusa nel tutorial, che potrebbe far risparmiare un po 'di tempo. :)
Alan Gilbertson il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.