Share
In questo tutorial imparerai come utilizzare una combinazione del metodo SSR (Scale, Shear, Rotate) e le guide di Adobe Illustrator per creare un robot isometrico. Le immagini isometriche sono perfette per diagrammi e sprite di gioco. Quindi vediamo come rendere questo simpatico robot isometrico ...
Apri un nuovo documento di Illustrator. La dimensione e la risoluzione del documento non sono troppo importanti, quindi scegli qualcosa con cui ti trovi a tuo agio.
Prima di iniziare, è importante definire cosa intendiamo quando diciamo che disegneremo un isometrico oggetto.
La prospettiva isometrica è un modo di disegnare un oggetto 3D in 2D. Viene utilizzato nei disegni tecnici, nelle città dei cartoni animati e nei giochi 2D che vogliono apparire in 3D. La prospettiva isometrica è preferibile rispetto alla prospettiva normale perché tutti gli oggetti avranno le stesse dimensioni, indipendentemente da quanto siano lontani dall'osservatore.
Inizieremo impostando una griglia isometrica per fungere da nostre guide. Le tecniche che ti mostrerò in questo articolo si basano sul metodo SSR, che sta per scala, cesoia, ruotare. Oltre a questo metodo, le guide di Illustrator torneranno utili in seguito quando si allineeranno le forme in prospettiva isometrica.
Creare le guide utilizzando questo suggerimento rapido: Come creare una griglia isometrica in meno di 2 minuti. Quindi, attiva le Smart Guides sotto Visualizza> Guide intelligenti.
Come rapido aggiornamento del metodo SSR, creeremo la parte anteriore, laterale e superiore di un cubo. Inizia disegnando un quadrato usando lo strumento Rettangolo (M) e tenendo premuto Maiusc mentre si trascina il mouse. Crea tre copie del quadrato, che diventerà la parte superiore e i due lati di un cubo isometrico.
Inizieremo facendo il top. Fai clic con il tasto destro del mouse sul cubo e seleziona Trasforma> Scala e inserisci un valore di 86,062% nel campo di input Non uniforme> Verticale. Quindi, fai nuovamente clic con il pulsante destro del mouse e seleziona Trasforma> Inclina, quindi inserisci un angolo di taglio di 30 gradi. Per il passaggio finale, fai clic con il tasto destro del mouse e seleziona Trasforma> Ruota e inserisci un angolo di -30 gradi.
In alternativa, puoi utilizzare la finestra Trasforma con la stessa procedura: modifica semplicemente l'altezza (indicata con H) a 86,062%, quindi la riduzione a 30 gradi e infine la rotazione a -30 gradi. Entrambi i metodi produrranno gli stessi risultati.
Per rendere i lati sinistro e destro del cubo possiamo seguire la stessa procedura, con diversi angoli di taglio e rotazione. Questi valori sono riepilogati nell'immagine qui sotto.
Con queste tecniche sotto le nostre cinture possiamo passare a rendere il nostro personaggio robot. Il robot che farò in questo tutorial è il personaggio principale di un gioco isometrico su cui ho lavorato, Robotok.io.
Iniziare attivando la normale griglia 2D facendo clic su Visualizza> Mostra griglia (Ctrl + "). Poiché il robot è piuttosto rettangolare, possiamo utilizzare lo strumento Rettangolo (M) per visualizzare le principali funzionalità. e anche lo strumento di selezione diretta (A) è utile e ci consente di dare al robot un po 'di carattere.
Usando la parte anteriore del robot come riferimento, possiamo disegnare il lato del robot. Qui ho usato lo strumento Segmento di linea (\) per mettere alcune linee blu dietro l'immagine per aiutare ad allineare le sezioni del corpo del robot. Puoi spostare le linee su e giù in qualsiasi parte del disegno al momento stai lavorando. Avere le parti allineate correttamente renderà i passaggi successivi molto più semplici, quando usiamo queste viste per rendere il robot isometrico.
Creare una copia della vista laterale e cambiare il colore del tratto in grigio. Ora possiamo disegnare le braccia sulla parte superiore della vista laterale, rendendo più facile vedere le nostre nuove linee. Possiamo anche regolare la posizione delle nostre linee orizzontali blu per aiutarci ad allineare la vista laterale del braccio con la parte anteriore.
Il robot ha anche bisogno di uno zaino per contenere tutte le sue cose, quindi disegniamolo nella vista laterale usando lo stesso metodo.
Infine, disegna il retro del robot usando il lato anteriore e il lato come riferimento. Qui ho usato linee più chiare nella parte posteriore della testa per aiutare queste linee a distinguersi dagli altri, poiché mostrano il volume della testa.
Ora che abbiamo i progetti, possiamo iniziare a costruire il robot 3D utilizzando il nostro metodo SSR isometrico e le guide che abbiamo creato in precedenza. Iniziamo lavorando solo con la testa e il corpo (lascia le braccia e lo zaino fuori per ora) del robot per costruire una vista frontale isometrica.
Fai una copia della parte anteriore del robot, rimuovi le braccia e SSR a sinistra (Scala: 86.062%, Cesoia: -30, Ruota: -30). Ripeti il processo SSR con il retro del robot, assicurandoti di rimuovere le braccia.
Ora faremo la stessa cosa con il lato del robot (senza braccia), ma lo trasformeremo nel lato destro (Scala: 86.062%, Cesoia: 30, Ruota: 30). Crea una copia che possiamo usare per l'altro lato del robot.
Per posizionare i due lati del robot, selezionare l'intero lato del robot usando lo strumento Selezione (V) e quindi passare allo Strumento selezione diretta (A).
Trascina il punto di ancoraggio in alto a sinistra per sovrapporlo all'angolo corrispondente nella vista frontale. Quando dice la guida intelligente ancora (nel testo ciano), rilasciare il pulsante del mouse.
Fai la stessa cosa con il lato più lontano del robot. Una volta posizionato il lato più lontano del robot, tenerlo selezionato e premere Ctrl + Maiusc + [per spostare quelle forme dietro le altre.
Allineare la parte posteriore della testa del robot è un po 'più complicato. A questo punto dovremmo disattivare la griglia (Ctrl + ") e accendere le nostre guide isometriche (Ctrl +;). Seleziona l'intero robot (V) e passa allo Strumento selezione diretta (A). Seleziona uno dei punti su la parte superiore anteriore della testa del robot e trascinala per scattare con la guida. Possiamo usare questa linea guida per allineare la parte posteriore del robot con la parte anteriore.
Seleziona il retro (V) e passa allo strumento di selezione diretta (A). Trascina il robot da un punto in cima alla sua testa alla stessa linea con cui abbiamo allineato il davanti. Ora trascinalo lungo questa linea fino a quando il contorno posteriore si allinea solo con i lati della testa del robot.
Ora possiamo selezionare i punti back-of-the-head nella vista laterale (vedi immagine) con lo strumento selezione diretta (A), usando Shift-clic per ottenere entrambi i punti contemporaneamente. Trascina questi punti per abbinarli alla parte posteriore della testa (di nuovo, in attesa della parola ancora appare in testo ciano prima di rilasciarlo). Una volta che questi punti sono a posto, non abbiamo più bisogno del retro del robot e possiamo cancellarlo selezionando tutte le forme con lo Strumento Selezione (V) e premendo Cancella.
Per completare la forma della testa, possiamo usare lo strumento Penna (P) per disegnare nella parte superiore. Fai clic su ciascuno dei 4 punti che compongono la parte superiore della testa del robot, ogni volta che aspetti la parola ancora apparire. Infine, collega l'ultimo spigolo. Premi Ctrl + [alcune volte per spostare questa nuova forma finché non vedi tutte le forme dell'antenna. Se vai troppo lontano, usa Ctrl +] per portarlo di nuovo in avanti.
L'antenna del robot è composta da due pezzi: un cono e una sfera.
Per creare un cono isometrico, iniziamo con due cerchi sovrapposti (passaggio a), uno più grande dell'altro e noi SSR per renderli piatti come la parte superiore di un cubo (passaggio b). Tenendo premuto Maiusc, spostare il cerchio più piccolo in verticale finché la forma non è l'altezza desiderata (passaggio c). Utilizzando lo strumento Aggiungi punto di ancoraggio (+), aggiungi punti ai lati del cerchio inferiore come mostrato (passaggio d). Quindi utilizzare lo strumento selezione diretta (A) per selezionare i punti interni di entrambi i cerchi ed eliminarli utilizzando il tasto Canc (passaggio e). Ritorna allo Strumento Penna (P) e collega i punti rimanenti (passo f) per rendere il tuo cono (passo g).
Successivamente possiamo creare la sfera isometrica per la parte superiore dell'antenna. Disegna un cerchio, e il gioco è fatto! Una sfera isometrica è semplicemente un cerchio regolare (passo h). Posiziona l'antenna sopra la testa del robot.
Successivamente possiamo posizionare il corpo del robot usando le stesse tecniche con cui abbiamo usato la testa. Elimina le forme del collo (poiché non possiamo vedere il collo da questa vista) e il lato lontano del corpo che non è più visibile. Questo aiuterà a ripulire la nostra visione del robot.
Utilizzare lo strumento di selezione (V) per selezionare il lato più vicino del robot (gambe e corpo). Passare allo strumento di selezione diretta (A) e trascinare il lato del corpo di un angolo per allinearlo con l'angolo corrispondente sul lato anteriore.
Ora fai una copia del lato (Ctrl + C, Ctrl + V) e trascina quella copia sul lato più lontano del robot usando lo stesso metodo per allineare i punti (vedi il lato sinistro dell'immagine).
Per disegnare nella parte superiore del corpo, passa a Vista struttura usando Ctrl + Y e usa lo strumento Penna (P) per collegare i quattro punti sulla parte superiore del corpo (allo stesso modo in cui abbiamo fatto la parte superiore della testa). Riattiva la vista premendo Ctrl + Y di nuovo.
Ora ci concentreremo sulle gambe. La vista laterale della gamba è già in posizione, quindi possiamo utilizzarla come guida per il lato anteriore. Usa lo Strumento selezione diretta (A) per selezionare punti a coppie, possiamo spostare le forme per allinearle con i lati. Usa Maiusc-clic per selezionare due punti alla volta e trascinali per allineare con il lato della gamba. Le guide intelligenti ti aiuteranno ad allineare esattamente i punti.
Quando hai finito una gamba, usa lo strumento Selezione (V) per selezionare tutte le forme e fare una copia (Ctrl + C, Ctrl + V). Posiziona la nuova copia come l'altra gamba sul robot. Ora premi Ctrl + Maiusc + [per spostare questa gamba sul livello più basso, in modo che si trovi dietro il corpo del robot. Elimina le forme inutilizzate per ripulire l'immagine.
A questo punto il corpo del robot dovrebbe essere completo e possiamo passare alle braccia.
Per prima cosa, crea una copia del robot e raggruppa la testa e il corpo separatamente. Cambia il colore del tratto in grigio. Isolare le varie forme del braccio e SSR in viste frontali e laterali.
Il braccio è composto da quattro parti: la spalla, la parte superiore del braccio, l'avambraccio e l'artiglio.
Inizieremo lavorando sull'avambraccio, poiché è il più semplice da manipolare. Allineare le forme frontali e laterali delle braccia con il corpo grigio e l'un l'altro. Regola i punti sul lato dell'avambraccio per allinearli in avanti, assicurandoti di selezionare i punti in coppia per mantenere la prospettiva.
Usa lo strumento Penna (P) per riempire il resto dell'avambraccio. Per questo passaggio, aiuta a creare copie di forme da usare come guide (come abbiamo fatto con la testa e il corpo).
La parte difficile delle braccia è il cilindro che collega la spalla all'avambraccio del robot. Per creare questa forma, inizieremo disegnando un cerchio e realizzandone una copia (Ctrl + C, Ctrl + V). Ora SSR un cerchio per essere inserito sul lato del robot, e SSR l'altro per adattarsi sulla parte superiore dell'avambraccio. Posiziona questi cerchi sulla spalla e sulla parte superiore dell'avambraccio come mostrato.
Usa lo strumento Penna (P) per creare una nuova forma simile a quella che collegherebbe i due cerchi (come mostrato). Seleziona i due cerchi e la forma che li collega con lo strumento Selezione (V) e fai clic su Pathfinder> Aggiungi a Area forma, quindi Espandi per unirli in un'unica forma.
Usa Ctrl + [e Ctrl +] per posizionare correttamente questa forma dietro la cresta sull'avambraccio.
Fare il cilindro cavo per la spalla ci richiede di dividerlo in due pezzi: la parte davanti al braccio e la parte dietro di esso.
Inizia facendo una copia del cerchio della spalla sul lato del corpo del robot (Ctrl + C, Ctrl + F). Usando le guide (premi Ctrl +; per accenderle), trascina il secondo cerchio verso l'esterno per dare un po 'di profondità al cilindro della spalla (vedi diagramma sotto).
Usa lo strumento Aggiungi punto di ancoraggio (+) per aggiungere punti sui bordi dei due cerchi (vedi diagramma, aggiungi punti ai cerchi rossi). Ora fai una copia delle forme. Una copia di sarà usata per fare la parte anteriore della spalla, e l'altra per fare la parte posteriore.
Utilizzare lo strumento di selezione diretta (A) per eliminare i punti non necessari su entrambe le copie per terminare con due righe in ciascun caso. Utilizzare lo strumento Penna (P) per ricollegare i punti. Riposiziona i pezzi e li hai: una parte anteriore e una posteriore per la spalla.
Ora possiamo fare l'artiglio del robot usando una tecnica simile a come abbiamo fatto la spalla.
Prendi le forme degli artigli dell'SSR e allineati sulle guide. Quando allineare le forme, basta selezionare un punto su una forma, allinearlo con una linea guida e quindi assicurarsi di posizionare il punto corrispondente sul secondo oggetto nella stessa posizione. Qui ho scelto l'angolo in alto a sinistra del quadrato su ciascun artiglio come punto di riferimento, e come puoi vedere sono entrambi posizionati sulla stessa linea guida.
Crea una copia della parte anteriore dell'artiglio e usa il lato come riferimento di larghezza (come mostrato di seguito) per posizionare questa copia come il retro dell'oggetto.
Dopo aver usato la vista laterale della chela per determinare la larghezza, la forma non è più necessaria e possiamo eliminarla.
Inizieremo a riempire l'artiglio creando la forma verde nell'oggetto sottostante. Crea una copia delle due metà dell'artiglio e cancella tutti i punti che non comporranno il lato dell'artiglio utilizzando lo Strumento selezione diretta (A) e il tasto Canc. Quindi, utilizzare lo strumento Penna (P) per collegare le due metà. Ora possiamo posizionare il lato dell'unghia nel nostro oggetto.
Usando la stessa tecnica possiamo riempire l'interno dell'artiglio (viola), e per completezza possiamo anche creare il bordo inferiore (blu).
Con il braccio anteriore fatto, possiamo usare gli stessi metodi per costruire l'altro braccio del robot.
La maggior parte di questo braccio può essere copiata direttamente dal primo braccio e ottimizzata utilizzando lo strumento di selezione diretta. La mano del robot, ad esempio, è completamente identica, quindi non è necessario ridisegnarla. Ricorda che gli oggetti isometrici hanno le stesse dimensioni, indipendentemente dalla distanza dal visore, a differenza della prospettiva reale, quindi l'artiglio del braccio lontano sarà della stessa dimensione di quello vicino.
L'ultima cosa che aggiungeremo al robot è il suo zaino. Mi piace fare una copia di tutto finora, Raggruppa ciascun braccio in modo indipendente (Ctrl + G) e regola il colore del tratto per renderlo più chiaro. In questo modo possiamo tenere separata ogni parte del corpo per le modifiche future (come rendere la vista posteriore o se vogliamo animare il robot) e ti aiuta a vedere su cosa stai lavorando in questo momento.
Usa il metodo SSR nella vista laterale dello zaino che abbiamo disegnato in precedenza, quindi posizionalo sul lato del robot. Poiché lo zaino è curvo, non ha bisogno di molto lavoro per adattarlo alla prospettiva isometrica. Se non sembra corretto, utilizzare lo strumento Selezione diretta (A) per regolare i singoli punti.
Utilizzare lo strumento Penna (P) per disegnare la parte anteriore della cinghia sopra la spalla del robot.
Qui ho spostato la testa e il braccio davanti in modo da poter vedere facilmente dove andrà lo zaino. Una volta disegnato lo zaino, possiamo aggiungere queste forme.
Ed eccolo! Per unificarlo un po ', selezionare l'intero robot e modificare la larghezza del tratto su un valore. In questo caso ho scelto 1 pt, ma questo dipende da quanto grande hai disegnato il tuo sprite.
Questo robot è ora pronto per alcuni colori!
Il primo passo è cambiare il colore del tratto in qualcosa di meno duro del nero. Qui ho scelto il grigio scuro, ma a seconda del tuo sprite potresti voler mescolare un po 'di colore.
Quindi possiamo riempire alcuni colori di base. Utilizzare lo strumento Selezione (V) per selezionare l'intero robot (eccetto gli occhi) e cambiare il colore di riempimento in grigio.
Seleziona occhi, bocca, pulsante e schermo e cambia questi per avere un colore di riempimento di bianco. Colorare lo zaino arancione e rendere il pulsante rosso.
Il prossimo passo è scegliere una direzione per la fonte di luce. Ho deciso di farlo venire da sinistra, così di fronte al robot.
L'ombreggiatura da qui in avanti può essere dettagliata o semplice come ti piace. Ho scelto di mantenere l'ombreggiatura relativamente semplice e di ignorare il fatto che alcuni oggetti possono proiettare ombre sugli altri. Ciò renderà più semplice l'uso dello sprite nelle animazioni in seguito.
Inizia selezionando tutte le forme che saranno in ombra e cambiando il loro colore di riempimento con un grigio più scuro. Quindi, seleziona tutte le forme che saranno direttamente nella luce e riempili con un grigio più chiaro. Per le forme piatte, questo è facile, ma le ombre sulle superfici curve richiederanno più lavoro.
Per illustrare come possiamo ombreggiare le superfici curve, prendere in considerazione il corpo dello zaino.
Copia questa forma e incolla in avanti usando Ctrl + C, Ctrl + F. Ora elimina il tratto e imposta il colore di riempimento su un arancione scuro.
Ora possiamo usare lo strumento Elimina punto di ancoraggio (-) per ritagliare questa forma, e poi lo strumento Selezione diretta (A) per regolarlo nella forma di un'ombra. Per sistemare il tratto, facciamo un'altra copia del corpo dello zaino e lo incolliamo davanti. Rimuovi il riempimento su questa nuova forma e spostalo in avanti (Ctrl +]) per metterlo davanti alla forma dell'ombra.
Usa questo metodo per creare ombre per il resto dello zaino, così come per le altre superfici curve come i cilindri nelle braccia e l'antenna.
Per dare al robot un po 'più di carattere, possiamo aggiungere alcuni punti salienti alle sue articolazioni e ai suoi piedi.
Qui ho reso i polsi e i piedi di un grigio più scuro, e i gomiti e i piedi più leggeri. Ho anche reso gli occhi un po 'più scuri per farli risaltare. Tieni presente la fonte di luce quando aggiungi più colori, poiché è necessario mantenere l'ombreggiatura coerente.
Per far risaltare maggiormente il robot, possiamo dargli un contorno leggermente più spesso.
Seleziona l'intero robot, Copia e Incolla in primo piano (Ctrl + C, Ctrl + F). Fai clic su Pathfinder> Aggiungi a area forma, quindi espandi per ottenere una singola forma combinata. Cambia il colore di riempimento in bianco in modo da poter chiaramente la nuova forma.
Questa forma sarà probabilmente un po 'caotica (causata dal fatto che alcune forme non sono perfettamente allineate), quindi possiamo usare lo strumento Rimuovi punto di ancoraggio (-) per ripulirlo un po' rimuovendo i punti brutti. Concentrati sull'assicurare che i bordi più esterni siano lisci, poiché sarà tutto ciò che possiamo vedere quando avremo finito.
Ora usa la finestra Traccia per cambiare il tipo di angolo come opzione centrale, "Round Join". Ciò renderà gli angoli lisci. Aumentare la larghezza del tratto di questa forma in 3 pt.
Seleziona la forma del contorno e premi Ctrl + Maiusc + [per inviare questa forma alla parte posteriore.
Ecco un'immagine dei due robot affiancati: uno con il contorno e uno senza. Il contorno unifica la forma del robot e lo aiuterà a distinguersi da uno sfondo più complesso.
Diamo al robot qualcosa su cui stare. Dato che verrà usato su una scacchiera isometrica, una tessera di gioco sembra una buona scelta. Crea un quadrato e poi SSR per renderlo piatto come la cima di un cubo. Posiziona la tessera sotto il robot usando Ctrl + Maiusc + [per spostarla sul retro.
Nell'ultimo passaggio daremo al robot una semplice ombra. Crea un cerchio e SSR per renderlo piatto come la piastrella. Cambia il colore di riempimento in grigio scuro, quindi imposta Opacità su circa il 15%. Posiziona l'ombra sotto tutto tranne il riquadro (Ctrl + Shift + [, quindi Ctrl +] per spostarlo di un livello).
E lì ce l'abbiamo: un adorabile robot isometrico. Usa queste tecniche per creare sprite isometrici per i giochi, per diagrammi tecnici o per aggiungere un punch 3D ai tuoi progetti.
Accentsconagua