Crea un municipio isometrico di Pixel Art in Adobe Photoshop

Cosa starai creando

Se hai esperienza di base e risorse in pixel art isometrici, alla fine dovrai costruire edifici più grandi e importanti. Quindi andiamo con un municipio o un tipo di edificio governativo, con architettura classica e una cupola e colonne.

Avrai bisogno di fare esperienza con gli edifici. Se non lo hai ancora fatto, dai un'occhiata a più lezioni di questa serie, in particolare il personaggio, la casa e le esercitazioni condominiali.

1. Dimensioni

Come al solito, ancora una volta, utilizzeremo un personaggio di pixel art per definire le dimensioni degli elementi su cui lavoreremo.

Passo 1

Questo dovrebbe essere OK per l'altezza di un piano. Un grande edificio come questo normalmente avrebbe livelli molto alti, ma dal momento che avrà più livelli e sarà comunque una cosa grande e ingombrante, terrò l'altezza del livello piuttosto limitata.

Le linee parallele qui sono separate da 80 px. È utile tenerli in multipli di 10 px, perché quando si esegue il movimento alt-nudging e si sposta la copia con i tasti freccia, è sufficiente tenere premuto il tasto Shift, che cambia lo spostamento da 1 px per freccia, quindi premere fino a 10 px.

Passo 2

Daremo al nostro edificio tre piani principali, in modo che le linee parallele sopra vengano duplicate un paio di volte.

Passaggio 3

Questo sarà un edificio piuttosto ampio, quindi qui definiamo la larghezza. Ancora una volta, è utile fare questa misura in multipli di 10 px. Non è necessario, ma è probabile che in seguito sarà più facile posizionare gli elementi se tutte le linee sono suddivise in parti uguali.

Qui, in blu, ho già segnato l'area della facciata che proietterà una certa profondità.

Passaggio 4

In genere non penso che questi edifici siano così stretti, ma possiamo riuscire a mantenere gli elementi architettonici più iconici senza sprecare gran parte dei nostri preziosi pixel immobiliari rendendo il nostro edificio a breve in profondità come questo:

2. Volumi

Le dimensioni della parte principale dell'edificio sono state determinate, ma il nostro municipio non sarà una forma di scatola così semplice.

Passo 1

Iniziamo proiettando l'area d'ingresso, dove in seguito aggiungeremo porte, colonne e alcuni elementi architettonici diversi.

Non ha bisogno di proiettarsi da molto; qui è solo 10 px davanti al resto del muro.

Passo 2

Inizieremo a lavorare sulla cupola e inizieremo creando un quadrato il più ampio possibile, centrato sul tetto dell'edificio. Non importa se è più largo della sporgenza dell'area di ingresso.

Passaggio 3

Lavoriamo su questo quadrato su un nuovo livello. Dovremmo creare un cerchio che segnerà l'impronta della cupola, o almeno la parte in cui la cupola incontra il resto della struttura.

Faremo un quadrato interno leggermente più piccolo.

Trova il suo centro.

E fai un cerchio dal centro verso i bordi del quadrato. Puoi farlo con il Strumento di selezione ellittica. Mentre si preme alt, inizia a fare il cerchio. I bordi dovrebbero incontrare i lati del quadrato interno, ma soprattutto, la larghezza del cerchio dovrebbe essere il doppio dell'altezza; il tooltip dovrebbe darti misure di larghezza e altezza.


Quando hai creato il tuo cerchio, riempilo con un po 'di colore e poi contragga (Seleziona> Modifica> Contratto ... ) la selezione di 1 px ed elimina il riempimento interno.

Conserva una copia di questo come guida per il posizionamento futuro.

Passaggio 4

Sotto la cupola stiamo per aggiungere alcuni muri, non nella stessa forma di cerchio ma quasi. Con lo strumento Poligono crea un poligono a 16 facciate. Cerca di ottenere due lati perfettamente orizzontali (di conseguenza anche i due lati sarebbero verticali)

Questa forma può essere anti-alias: la useremo solo come guida.

Passaggio 5

Sposta il poligono in un nuovo livello e ridimensionalo verticalmente al 50%.

Quindi posizionalo sopra il quadrato con il cerchio e ridimensionalo in modo che corrisponda al cerchio, rendendolo solo leggermente più grande del cerchio.

E su un altro livello ridisegna il poligono ma con delle linee regolari di pixel art, evitando il più possibile il frastagliato, in questo modo:

Ora abbiamo il nostro cerchio e poligono. Puoi sbarazzarti della guida del poligono ora.

Passaggio 6

Prendi il poligono, replicalo e posizionalo all'altezza del pavimento più in alto.

Passaggio 7

Connetti i lati e gli angoli verticalmente e sbarazzati delle linee posteriori.

Passaggio 8

Ora posiziona il cerchio proprio sopra e centrato.

Passaggio 9

Sbarazzati delle linee guida quadrate. Per creare la cupola useremo una sfera, che in isometria, come nella maggior parte delle visualizzazioni, sembrerà un cerchio perfetto; semplicemente assicurati che la larghezza corrisponda alla larghezza del cerchio.

Avremo solo bisogno della parte superiore del cerchio:

Posizionalo sul cerchio e collegalo con linee verticali.

Pulisci le linee posteriori.

E tu hai i contorni per la tua cupola.

Passaggio 10

Sopra la cupola ci sarà una struttura più piccola. La sua impronta sarà ottagonale, ma per prima cosa stabilirne le dimensioni possiamo iniziare con un rettangolo (due volte più largo che alto).

Quindi, analogamente al processo che abbiamo usato con il poligono a 16 facciate, possiamo posizionare un ottagono con altezza e larghezza corrispondenti al rettangolo e usarlo come guida per l'impronta che vogliamo.

Ritraccia l'ottagono, elimina le guide e spostalo nella sua posizione finale, toccando quasi la parte superiore della cupola.

Passaggio 11

Estrudi quello, simile a come è stato fatto con il poligono a 16 facciate.

Passaggio 12

E ora siamo pronti per posizionare la cupola sull'edificio. Dovrebbe essere centrato sulla parte superiore dell'edificio.

E ripulire le linee guida.

Passaggio 13

Aggiungiamo una cupola più piccola in cima alla struttura ottagonale. Inizia con un cerchio che si adatta bene nella forma ottagonale superiore.

E poi un semicerchio per farcela.

Passaggio 14

Crea le linee verticali per i muri.

Passaggio 15

Non abbiamo finito con i volumi principali. Stiamo per aggiungere un tetto, ma prima aggiungiamo un'altra struttura importante. Si chiama frontone e sembra essere un tratto importante in questo tipo di edifici:

È fatto con un triangolo semplice, la linea superiore sinistra è una linea orizzontale diritta e la linea superiore destra è una diagonale 1: 1 perfetta. Quindi è estruso e colorato.

Passaggio 16

Ora aggiungiamo le linee del tetto. Potresti volerlo fare in un nuovo livello.

Poiché l'inclinazione dei lati del tetto sarà la stessa su tutti i lati e avremo una vista a 3/4, le linee più in alto e più in basso saranno verticali diritte. Gli unici che devono essere definiti sono le linee più a sinistra e più a destra. Qui ho scelto di renderli 4: 1. E dai punti in cui quelli incontrano le linee verticali, ci sarà una linea 2: 1 attraverso.

Passaggio 17

Definiamo il punto in cui queste linee del tetto si incontrano con la struttura a cupola e rimuoviamo la parte della linea che dovrebbe essere ostruita dalla struttura a cupola.

Passaggio 18

Vogliamo che l'intera struttura della cupola si posizioni più in alto, appena sopra la linea superiore del tetto. Useremo una forma ottagonale estrusa per appoggiarla.

Crea un ottagono simile a quello sulla sommità della cupola, ma leggermente più largo e alto abbastanza per raggiungere la linea superiore del tetto.

Passaggio 19

Questa nuova forma ottagonale sarà parzialmente coperta dal tetto. Quindi dovremo trovare le linee d'angolo tra le superfici del tetto e i lati ottagonali.

Queste linee sono molto semplici e le abbiamo già utilizzate sul frontone, ma nel caso in cui non si utilizzasse la stessa inclinazione del tetto, avremmo bisogno di trovarle logicamente.

Quindi ecco una versione abbreviata del tetto, e in rosso sono contrassegnati i pixel che fanno il centro di queste linee:

Quindi ora abbiamo solo bisogno di collegare i punti.

Possiamo rimuovere il retro in quanto sarà oscurato dalla struttura a cupola.

E abbiamo praticamente un taglio incrociato del nostro tetto e le linee che dobbiamo usare contro uno dei lati della forma ottagonale.

Passaggio 20

Ecco quelle linee applicate. Funzionano solo per quel lato della forma ottagonale. Avremo bisogno di un'angolazione diversa per il lato anteriore dell'ottagono.

Passaggio 21

L'angolo è abbastanza facile da definire perché il lato destro dell'ottagono si stava già incontrando in basso con la linea del tetto, quindi è sufficiente collegare due punti già definiti:

Cerca di rendere ogni linea regolare anziché frastagliata.

3. Colorare

Tutte le forme principali sono complete. Aggiungiamo il colore!

Passo 1

Ho scelto l'acquamarina per il tetto, molto simile al colore che il rame si trasforma con l'età. Sembrava ripresentarsi nelle mie immagini di riferimento.

E per le pareti una crema leggera, quasi bianca, di colore. Nessuna sorpresa lì.

Passo 2

Aggiungiamo alcune sfumature varie sui muri. È piuttosto facile da fare per i piani principali, ma un po 'più complicato sulla struttura della cupola; avrai bisogno di più colori per quella sezione, anche se non ti consiglio di usare un nuovo colore per ognuna delle sette facce visibili.

Le pareti del poligono a 16 lati che si trovano allo stesso modo delle pareti dei primi tre piani dovrebbero, logicamente, condividere la stessa sfumatura.

Ricordarsi di mantenere una tonalità più chiara per le superfici superiori.

Passaggio 3

Le diverse sezioni del tetto avranno anche un'ombreggiatura diversa. Per la cupola ho scelto semplicemente di fare ombreggiatura con alcuni cerchi concentrici, anche se ci potrebbero essere alternative migliori che potrebbero essere utili per esplorare.

Passaggio 4

Non avremo bisogno di così tante linee scure. Come al solito, vogliamo che gli angoli che escono siano più leggeri delle superfici intorno a loro.

Passaggio 5

Inoltre, non abbiamo bisogno che tutti gli angoli della valle siano neri, solo più scuri delle superfici che li circondano. Questo li rende più morbidi, abbassa il contrasto e aiuta a convogliare l'incontro delle superfici.

4. Dettagli

Potremmo non essere fatti esattamente con i colori, ma è il momento di affrontare il resto degli elementi architettonici: un sacco di dettagli.

Passo 1

Aggiungiamo alcune finestre alla struttura a cupola. Possiamo semplicemente selezionare la linea di fondo della struttura ottagonale e duplicarla alcune volte per creare i bordi superiori e i bordi inferiori delle finestre. Avrai voglia di farlo su un nuovo livello.

Passo 2

Ora definiamo il lato destro e sinistro per le finestre su ciascuna faccia visibile del poligono a 16 facciate.

Passaggio 3

È possibile copiare questi nuovi riquadri della finestra su un nuovo livello e spostarli in modo che diventino l'interno dei bordi della finestra. Questo darà uno spessore al muro intorno.

Non è sufficiente posizionare i rettangoli più in alto - devono corrispondere al muro a cui appartengono, quindi dovrebbero essere più profondi perpendicolarmente rispetto a quel muro.

Passaggio 4

Sbarazzati delle linee extra e unisci.

Passaggio 5

Applica il colore della parete correttamente ombreggiato sui lati visibili e evidenzia gli angoli di punta.

Passaggio 6

E ora usiamo le linee orizzontali per creare dettagli sulle finestre.

Passaggio 7

Quindi aggiungi alcune linee verticalmente per completare le linee principali per le finestre. E riempire con colori appropriati.

Passaggio 8

Ammorbidisci le linee scure rendendole un po 'più chiare. Mi piace aggiungere una linea leggermente più scura come effetto vetro: è pensata per essere il riflesso del bordo della finestra.

Passaggio 9

Ora finiremo la struttura nella parte superiore della cupola. Sarà piuttosto semplice.

Per prima cosa devi creare una piccola colonna, colorarla e ombreggerla. Quindi posiziona la colonna dove vanno gli angoli. Pulisci e aggiungi un pezzettino di muro con alcuni dettagli decorativi.

Passaggio 10

Ecco la struttura superiore tippy posta sopra la cupola.

Il lavoro sulla cupola è completo ora.

Passaggio 11

Aggiungiamo un po 'di dettagli al frontone. Se cerchi riferimenti, questi possono essere molto dettagliati e includere una scena con molte statue di persone. Ma per ora è semplice.

Faremo semplicemente un paio di triangoli concentrici.

Passaggio 12

Aggiungi un po 'di profondità ad esso, colora in modo appropriato, e dovrebbe esserlo per il nostro frontone.

Passaggio 13

Possiamo sbarazzarci della protrusione d'ingresso per il secondo e il terzo livello. Lo avremo allo stesso livello del resto del muro eccetto per le colonne che aggiungeremo in seguito.

Passaggio 14

Ora aggiungiamo alcune linee parallele distribuite regolarmente al primo piano. Dal momento che abbiamo reso l'altezza del pavimento un multiplo di 10 px, queste linee possono essere 10 px in mezzo.

Non sono sicuro di come si chiamino queste righe, ma sono molto comuni in questo tipo di edifici. Dobbiamo solo applicarli al primo piano.

Passaggio 15

Certo che non saranno neri; saranno un piccolo dettaglio, quindi renderli solo leggermente più scuri rispetto al colore della parete (10% di luminosità inferiore, ad esempio), e subito sotto aggiungono un punto luminoso morbido.

Inoltre, aggiungiamo un po 'di sporgenza sporgente a questo primo piano e al tetto.

Passaggio 16

Ora aggiungiamo alcune finestre. Potrebbe essere più facile iniziare sulla parete più stretta dell'edificio.

Puoi semplicemente togliere una finestra dalla cupola (dalla parete del poligono con lo stesso angolo del muro dell'edificio stretto) e posizionarla più volte con una spaziatura regolare sul muro.

Passaggio 17

Ora puoi rispettare la stessa spaziatura per le finestre sul davanti. Dovrebbero essere abbastanza facili da posizionare; se c'è spazio per una riga aggiuntiva di finestre, aggiungi una riga aggiuntiva. Inoltre, queste ali dell'edificio sono facili da regolare; renderli più corti o più lunghi, senza molto effetto sul resto delle forme.

Quando li aggiungi, ti conviene ricordare che al primo piano le linee parallele potrebbero o dovrebbero aggirare i bordi della finestra.

Ho anche aggiunto un po 'di dettagli proprio sotto la sporgenza superiore.

Ricordati di controllare molte immagini di riferimento e di estrarre tutti i dettagli che desideri.

Passaggio 18

Ecco come posizionerò le colonne della facciata. Non saranno così quadrati o spessi, quindi cerchiamo di renderli correttamente.

Passaggio 19

Incidiamo queste colonne. Hai solo bisogno di lavorare su uno, ovviamente, e il resto verrà copiato.

Per prima cosa disegnerai un cerchio che non si estende oltre il bordo della scatola. Questa sarà la base, quindi avrai bisogno di un cerchio più piccolo sopra di esso e quindi lasciare che il cerchio più piccolo definisca la larghezza della colonna.

La cima potrebbe non essere nulla di speciale o solo un altro cerchio più largo come nella base, ma facciamo invece le cosiddette volute. Sono solo una decorazione rotonda / a spirale.

Puoi iniziare con un piccolo "cerchio" (è più un rettangolo d'angolo arrotondato) e poi trasformarlo in una piccola spirale. Dovrà essere fatto in due diversi orientamenti (destra e sinistra) e, naturalmente, dovranno rispettare l'angolo isometrico.

Quindi posiziona le volute sulla colonna, aggiungi colore e ombreggiatura e ammorbidisci i contorni.

Hai le tue colonne.

Passaggio 20

Qui vengono applicati all'edificio.

Sembra un po 'troppo semplice per i miei gusti, in cui le colonne si incontrano con il frontone, quindi ho aggiunto una fila aggiuntiva di pixel, simile alla sporgenza sul tetto. Ciò significa accorciare le colonne di un paio di pixel.

Inoltre, la colonna in primo piano aveva una vista più libera, quindi era necessario aggiungere più dettagli a quella. Ho aggiunto una voluta in più.

Passaggio 21

Aggiungeremo finestre tra le colonne, rendiamole leggermente diverse rispetto alle altre.

Quindi qui ho creato una finestra alta con una più piccola sopra di essa. E ho dato alla finestra più grande una sommità arcuata facendo dapprima un cerchio con la larghezza della finestra, quindi inclinandolo verticalmente 26,5, applicando il contorno superiore alla finestra e rimuovendo il resto.

Passaggio 22

Qui sono posizionati.

Passaggio 23

Possiamo prendere le stesse finestre e applicarle al centro del primo piano (ci vorranno un po 'di accorciamento in verticale) per fare in modo che le porte d'ingresso abbiano anche le sommità arcuate.


Passaggio 24

Pulisci i pixel non necessari e avvia la conversione di una finestra in una porta.

Passaggio 25

Aggiungi alcuni dettagli minimi sulla porta. Una volta fatto, duplicare per il resto degli ingressi.

Passaggio 26

E l'edificio è completo!

Qui ho semplicemente aggiunto un po 'di texture al tetto, e ho reso le linee di fondo che dovrebbero incontrare il terreno un po' più morbide.

congratulazioni!

Hai fatto City Hall! Un edificio grande e complesso, un punto di riferimento per la tua città e un luogo importante per i tuoi cittadini di pixel art. Molto bene!

Spero che questo non sia stato un dolore da creare e che il tuo edificio sia grandioso. Prova alternative e varianti come meglio credi, aggiungi un ambiente ad esso, espandi la tua città; il cielo è il limite.