Come progettare la tipografia isometrica

Sep 12, 2025
Come si fa

La prospettiva è tutto nel design. Se qualcosa che hai disegnato ha una prospettiva perfetta, aiuterà il tuo lavoro più realistico; In alternativa, Pablo Picasso ha fatto la storia disegnando con un senso molto distorto della realtà intorno a lui.

Disegno isometrico è tanto una scienza come qualsiasi cosa, però. Ha un insieme molto rigido di regole quando si tratta di ciò che va dove. È piuttosto difficile sedersi e disegnare te stesso, ma quando si tratta di Photoshop, puoi creare una guida per qualsiasi cosa.

In questo Photoshop Tutorial. , Stiamo andando a stabilire una perfetta griglia isometrica prima di costruire un mondo su linee di fronte esagonali. In questa immagine ispirata a Londra, rintrarremo il Tamigi isometricamente, e anche creare versioni isometriche dei punti di riferimento. Scoprirai che tutto può essere creato su questa griglia, poiché tiene semplicemente le forme cubiche insieme. Le curve possono semplicemente essere disegnate dall'angolo all'angolo.

Anche tutto nell'immagine seguirà questa struttura. Puoi usare le immagini per copiare, puoi seguire i nostri passi religiosamente o puoi progettare le tue icone dopo i modelli isometrici. È interamente fino a te - entro i limiti dell'isometria, ovviamente.

01. Avvia la griglia

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Inizia creando un nuovo documento di 20 x 20 pixel. Creare una striscia nera verso il basso verso destra e la parte inferiore del documento con lo strumento rettangolare del marquea. Usa la griglia se è necessario, colpendo cmd / ctrl + '.

02. Definisci il tuo modello

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Vai a Modifica e GT; Definisci il modello. Nome e quindi fare clic su OK. Crea un nuovo documento 1920 x 1080 andando in File & GT; nuovo, quindi andare al secchio di vernice (G). Utilizzare il riempimento del modello e su un nuovo livello, riempire con il modello che hai creato.

03. Trasforma il modello

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Ora faremo il modello isometrico! Rendere la larghezza e l'altezza molto più grandi, l'angolo di 35 gradi e posiziona il centro del documento. La griglia dovrebbe essere fatta di forme di diamante.

04. Scegli la tua tavolozza

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Useremo cinque colori diversi per questo, ma diverse sfumature di ciascuna. I colori sono blu royal (# 021574), rosso silenzioso rosso (# F22F50), Spearmint (# 6ec5cf), menta piperita (# 6ecfb0), abbronzatura (# ff935e) e bianco (#ffffff).

05. Disporre il tuo testo

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Utilizzare lo strumento Tipo e creare il testo che si desidera utilizzare attraverso il documento; Andremo con 'Londra, Inghilterra'. Questo è importante, in quanto determinerà le dimensioni, la spaziatura e l'aspetto intero del tuo poster isometrico.

06. Crea alcune lettere

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Creare lettere isometriche con lo strumento Penna, seguendo la guida creata. Questa è una parte di prova e errore del processo e prenderà il più lungo di tutto. Sperimenta con forme e riempire con # 808080 per ora.

07. Lavorare sulle lettere

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Le lettere isometriche dovranno avere un lato che affronta prevalentemente in avanti. Allenati dove le curve sono su ciascuna delle lettere riducendo le opacità. Questo potrebbe richiedere del tempo per capire, e potresti aver bisogno di ridisegnare alcune lettere.

08. Ombra le lettere

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Gruppo ogni serie di strati per ogni lettera. Creare maschere di ritaglio per ciascuna e aggiungere luce o ombra alle lettere in modo che appaiano 3D. Allenati dove la luce è nell'immagine e giudica di conseguenza.

09. Colore e Build Bridges

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Crea nuovi strati di sovrapposizione sopra ciascuna delle lettere e riempire con uno dei tuoi colori. Aggiungi strati di colore, clip e spazzolare in un altro colore per farlo uscire. Quindi, creare ponti tra alcune delle lettere. Colora questo con un altro colore.

10. Creare un altoparlante

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Ora, aggiungeremo oggetti alla scena. Creare una scatola usando la guida isometrica, l'alleggerimento e l'oscuramento di entrambi i lati della scatola per creare prospettive. Creare due cerchi e trasformano questi per adattarsi nella casella lungo la guida; Aggiungi un tratto ai cerchi usando gli stili di livello.

11. Aggiungi una bandiera

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Successivamente, creeremo una bandiera. Ancora una volta, utilizzare lo strumento penna per disegnare lungo la guida, quindi riempire con bianco. Strati clip in questo, e toccare morbide pennellate nere su un lato della bandiera per aggiungere ombra.

12. Pianta alcuni alberi

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Gli alberi sono facili da creare con la penna; Creare un triangolo con i due lati inferiore al rivestimento lungo la guida isometrica e poi scurire un lato. Ripeti questo due volte, quindi aggiungi un ceppo. Colore con uno strato di sovrapposizione.

13. Scaleatori e pianificazione della mappa

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Abbiamo creato scale mobili usando gli stessi metodi che abbiamo utilizzato per creare gli altri oggetti, usando la guida isometrica per disegnare. Dopodiché, abbiamo usato una vera mappa di Londra per tracciare approssimativamente il Tamigi e disegnare un contorno bianco per un po 'd'acqua da riempire.

14. Curva i bordi

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Utilizzare lo strumento penna per curvare i bordi della struttura bianca che hai appena creato e riempire con # 808080. Utilizzare una spazzola morbida e nera per creare l'illusione di uno spazio curvo per l'acqua per sedersi.

15. Riempi con acqua

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Utilizzare lo strumento Penna per selezionare lo spazio grigio in ciascuna delle strutture bianche e cadere dalle strutture superiori e riempirsi di blu su un nuovo livello. Imposta questo strato in luce dura per farlo sembrare del liquido reale. Clip uno strato bianco ed elimina un modello frastagliato nel mezzo per un effetto aggiuntivo.

16. Avvia il lampadario

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Creare un nuovo livello e aggiungi punti nelle intersezioni delle linee come puoi vedere nello screenshot. Selezionare le righe retro di questi punti e riducono la leggerezza a -10 usando tonalità / saturazione (cmd / ctrl + u). Duplica questo verso il basso per creare più punti.

17. Finisci il lampadario

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Creare lo stesso effetto tre volte con più file di punti, quindi ridimensionare i due ultimi. Impila questi per creare un effetto lampadario. Nei nuovi strati del 20%, creare punti bianchi per suggerire la luce che emana verso l'esterno.

18. Crea Big Ben

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Usa una foto stock di Big Ben per disegnare l'orologio con lo strumento penna; Non devi essere così dettagliato, però, ovviamente. Disegnarlo in tonalità di grigio; Disegna la guglia su un lato dell'edificio piuttosto che direttamente verso l'alto.

19. Metti il ​​punto di riferimento

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Colore Big Ben con alcuni strati sovrapposti, duplica il livello e poi capovolgere questo nuovo orizzontalmente. Ridimensiona sia i livelli che gli inclini con la trasformazione gratuita per adattarsi alla guida che hai creato.

20. Tocchi di finitura

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Fare qualsiasi flourishe finale che vorresti aggiungere altro all'immagine; Ciò potrebbe includere stelle sullo sfondo con piccoli punti, una balena nel Tamigi o alterando il colore con una regolazione delle curve.

21. Aggiungi rumore

Hit the icon to open the full-sized image.

Premi l'icona per aprire l'immagine a grandezza naturale.

Infine, seleziona Bianco e nero nei campioni (D). Creare un nuovo livello, riempire con nero (ALT / OPT + Elimina) e vai a Filter & GT; rumore. Scegli il 400%, controlla monocromatico e fai clic su OK. Imposta questo strato in morbida luce, opaco del 10%.

Questo articolo è stato originariamente pubblicato in emissione 271 di Web Designer di Web Design Web Design. Comprare il problema 271. o Iscriviti al web designer .

Articoli Correlati:

  • Creare lettering 3D basato su griglia isometrica in Illustrator
  • Arte vettoriale isometrica è facile
  • Creare un effetto isometrico 3D

Come si fa - Articoli più popolari

Impostazioni sulla privacy di Facebook: Come mantenere il tuo profilo privato

Come si fa Sep 12, 2025

(Immagine di immagine: Alex Blake / Facebook) Le impostazioni della privacy di Facebook possono sembrare un po 'di pa..

Crea arte CSS animata

Come si fa Sep 12, 2025

(Immagine di credito: SCKONG TIFFANY) La creazione di immagini CSS è un modo divertente per praticare le tue abilit�..

Come comprimere le immagini: una Guida di Web Designer

Come si fa Sep 12, 2025

La velocità media di una moderna connessione internet sembrerebbe molto futuristico ai maestri web del passato. Torna nei primi ..

Come costruire un sito di blog con Gatsby

Come si fa Sep 12, 2025

I framework come reagire inviano solo JavaScript ai clienti, che viene quindi utilizzato per creare gli elementi sullo schermo. L..

Alberi scatter con V-ray

Come si fa Sep 12, 2025

L'aggiunta di dettagli alla tua scena è sempre il modo di andare quando vuoi ottenere più realismo nel tuo 3D Art. ..

Colourise GreyScale Lavora in Photoshop

Come si fa Sep 12, 2025

Premi l'icona in alto a destra per vedere l'immagine finale a grandezza naturale Per que..

Impara ad animare per i bambini

Come si fa Sep 12, 2025

Blue Zoo's Bader Badruddin sarà al Vertex il 13 marzo discutendo come completare un colpo di animazione in stile cartone animato..

Come dipingere il vetro curvo su un casco spaziale

Come si fa Sep 12, 2025

I subiti sono divertenti da dipingere, ma la parte del casco può essere complicata per avere diritto, specialmente l'elemento di..

Categorie