Un'altra dimensione, nuova maestria: un tutorial di illustrazione isometrica

L'illustrazione non ha eguali nella sua capacità di dare energia a soggetti ordinari e comunicare idee complesse con chiarezza visiva, ma che dire delle illustrazioni isometriche? Non sono notoriamente difficili e richiedono molto tempo? In sei semplici passaggi, questo tutorial di illustrazione isometrica rende il processo rapido e semplice.

Hai bisogno di ravvivare una landing page? Visualizza dati noiosi? Aggiungere il punch alla confezione blanda? L'illustrazione è la risposta su tutti i fronti.

Negli ultimi anni, le illustrazioni isometriche hanno guadagnato popolarità per il modo in cui rappresentano la profondità tridimensionale nello spazio bidimensionale. Inoltre, la griglia isometrica nega la necessità di mantenere l'illusione della prospettiva, una comune fonte di frustrazione per l'illustrazione.

In Adobe Illustrator, il tradizionale processo di illustrazione isometrica è noioso. Crea una griglia isometrica, disegna un quadrato, inclinalo di -30°, ruotalo di -30°, e così via. Fortunatamente, c'è un modo migliore. Illustrator ha effetti 3D che rendono le illustrazioni isometriche facili e veloci: "Estrudi e smussa", "Rivolgi" e "Ruota".

Questo tutorial mostra come creare illustrazioni isometriche utilizzando "Rivoluzione", ma le informazioni si applicano anche agli effetti 3D rimanenti di Illustrator.

Pronto a stupire i clienti, deliziare gli utenti e apprendere i segreti dell'illustrazione isometrica?

Ruota e perfeziona: un tutorial sull'illustrazione isometrica

A chi non piace una bevanda ghiacciata? Brindiamo alle gioie del rinfresco liquido disegnando una bottiglia isometrica con etichetta.

*Suggerimento avanzato: prima di iniziare, trova un riferimento a un oggetto per informare l'aspetto della bottiglia.

Passaggio 1: disegna la bottiglia e il liquido

1.1) Crea un nuovo documento Adobe Illustrator.

1.2) Aggiungere il riferimento bottiglia al documento.

1.3) Disegna un contorno della bottiglia e del liquido all'interno.

1.4) Dividi a metà la bottiglia e il liquido (come mostrato sotto).

1.5) Lo spessore del tratto del contorno della bottiglia definisce lo spessore del vetro.

*Suggerimento professionale: copia e incolla la grafica al di fuori della tavola da disegno come backup.

Passaggio 2: applica l'effetto Revolve

Come suggerisce il nome, "Revolve" ruota la forma attorno al suo asse. In Illustrator, la posizione dell'asse "Rivoluzione" è fissata verticalmente. Per questo la bottiglia è stata delineata e divisa a metà.

*Suggerimento avanzato: né il contorno della bottiglia né l'oggetto liquido dovrebbero avere sfumature come colori di riempimento.

2.1) Per trovare l'effetto "Rivoluzione", vai su: Effetto > 3D > Rivoluzione...

2.2) Nella parte superiore della finestra di dialogo, c'è un campo etichettato "Posizione". Scegli "Sinistra isometrica".

2.3) Angolo – Questo è il grado di rotazione attorno all'asse dell'oggetto. Se impostato a 180°, il risultato sarà una bottiglia divisa a metà verticalmente. Impostare l'angolo a 360° per una bottiglia completamente ruotata.

2.4) Offset – Controlla la distanza di offset dall'asse verticale dell'oggetto. Immettere "0".

2.5) Superficie – Imposta il materiale dell'oggetto e le proprietà di illuminazione. Scegli "Nessuna ombreggiatura".

Ta-da! Una bottiglia isometrica con liquido. È ora di rilassarti, rilassarti e-aspetta! Quella bottiglia ha bisogno di un'etichetta.

*Suggerimento professionale: non utilizzare la funzione "Espandi aspetto" sulla bottiglia fino a quando non viene creata l'etichetta.

Passaggio 3: preparare l'etichetta

3.1) Utilizzare la bottiglia per definire le dimensioni dell'etichetta.

3.2) Nell'immagine di esempio (sotto), l'altezza dell'etichetta del corpo è evidente, ma l'altezza dell'etichetta del collo non è chiara perché la superficie non è parallela all'asse. Sarà sufficiente un'altezza approssimativa.

3.3) La lunghezza dell'etichetta viene calcolata utilizzando la formula della circonferenza del cerchio 2πr.

3.4) Con un'etichetta progettata in modo soddisfacente, convertire entrambe le etichette in simboli. La tavolozza "Simboli" si trova in: Finestra > Simboli

3.5) Trascina e rilascia individualmente i disegni delle etichette nella tavolozza per creare simboli.

*Nota: i simboli in Illustrator e Sketch funzionano in modo simile.

Passaggio 4: mappa l'etichetta sulla bottiglia

Finché la bottiglia non è stata vettorializzata utilizzando la funzione "Espandi aspetto", è completamente modificabile.

4.1) Selezionare la bottiglia e visualizzare la tavolozza “Aspetto”: Finestra > Aspetto

4.2) Quindi, scegli "Rivoluzione 3D" e viene visualizzata la finestra di dialogo di prima.

4.3) Per mappare il disegno sulla bottiglia, fare clic sull'opzione in basso a sinistra: "Mappa arte".

4.4) Questo permette di scegliere e regolare un simbolo per la bottiglia.

4.5) Assicurarsi di far corrispondere il simbolo alla superficie corretta (vedi sotto).

4.6) Fare clic su "Scale to Fit" e l'etichetta viene mappata sulla bottiglia.

4.7) Seguire la stessa procedura per l'etichetta del collo.

Passaggio 5: evitare un file disordinato

5.1) Ora è il momento di trasformare la bottiglia in curve di Bezier usando la funzione "Espandi aspetto": Oggetto> Espandi aspetto

Illustrator non è pensato principalmente per la manipolazione di oggetti 3D. L'espansione dell'aspetto di un oggetto crea una raccolta raggruppata di elementi più piccoli che danno l'illusione di un oggetto 3D.

5.2) Per mantenere le cose in ordine, combina gli elementi con lo strumento "Pathfinder" o "Shape Builder" (vedi sotto).

*Suggerimento avanzato: l'unione di oggetti crea punti di ancoraggio indesiderati. Riducili andando su Oggetto> Percorso> Semplifica. Per coloro che usano Illustrator regolarmente, il plug-in VectorScribe e il suo strumento di rimozione dei punti sono altamente raccomandati.

Passaggio 6: aggiungi vita con colori e sfumature

Per il passaggio finale, dai vita alla bottiglia con colori e sfumature. È qui che entra in gioco l'arte individuale. Aggiungi riflessi, luci e ombre per un aspetto realistico oppure usa tratti e una tavolozza di colori semplificata per un'atmosfera più grafica. Con una solida base, le possibilità stilistiche sono infinite.

Saluti alle illustrazioni isometriche!

Le illustrazioni isometriche conferiscono profondità, dimensionalità e personalità a un'ampia gamma di progetti di design. Usa i principi delineati in questo tutorial per esplorare più possibilità isometriche e non dimenticare di provare gli altri effetti 3D di Illustrator: "Ruota" ed "Estrudi e smussa".

Fateci sapere cosa ne pensate! Si prega di lasciare i vostri pensieri, commenti e feedback qui sotto.

• • •

Ulteriori letture sul blog di Toptal Design:

• Periodo di validità visivo: perché le illustrazioni di web design diventano obsolete
• Una guida dettagliata alla progettazione di illustrazioni personalizzate senza alcuna abilità di disegno
• Nuove realtà: VR, AR, MR e il futuro del design
• The Designer's Edge: una panoramica dei plugin di Photoshop
• Emoji in evoluzione: progettare per il nuovo volto della messaggistica