Crea un edificio per uffici isometrico con pixel art in Adobe Photoshop

Cosa starai creando

In precedenti tutorial, abbiamo creato un personaggio di pixel art e gli abbiamo dato una macchina e posti per vivere. Ora, diamo un posto dove lavorare.

Un edificio per uffici è un ottimo pezzo da fare in pixel art isometrici perché puoi aggiungere tutti i piani che desideri e finire con un edificio piuttosto grande che ha richiesto la stessa quantità di lavoro da fare in una casa o in un edificio più piccolo.

Prima di procedere dovrai passare attraverso Isometric Pixel Art Character e Isometric Pixel Art House.

1. Dimensioni

Facciamo un altezza del pavimento e un'impronta che sembra congruente con il nostro personaggio.

Passo 1

Quindi useremo il personaggio come un metro, come al solito. Qui l'altezza che ho scelto è di 60 px per un piano.

Mi piace usare multipli di 10 px perché spostando gli elementi intorno usando le frecce della tastiera tenendo premuto Maiusc avviene in multipli di 10 px, quindi le cose vanno a posto molto più velocemente e facilmente.

Passo 2

Ora decidiamo sulla larghezza per la parte di ingresso dell'edificio. Avrà porte doppie piuttosto larghe, quindi la larghezza per l'ingresso dovrebbe consentire loro di avere un po 'di spazio intorno.

Terrò anche la maggior parte di queste distanze in multipli di 10 px, per la ragione spiegata sopra; rende le cose più facili in seguito (e se sei pignolo, è bello avere le tue distanze misurate in numeri tondi).

I trattini verticali qui vengono semplicemente usati come guide: potremmo eliminarli o disegnarli in seguito, quindi non sono necessari ma di solito sono utili.

Passaggio 3

L'area d'ingresso si protrarrà un po ', quindi diamo un po' di profondità.

Passaggio 4

Aggiungi un'altra linea parallela all'ingresso. Questa sarà la parete di vetro. Insieme all'entrata, farebbero praticamente la larghezza totale del nostro edificio.

Aggiungeremo alcune cuciture alla parete di vetro: ecco perché ci sono quei trattini.

Passaggio 5

Ora aggiungiamo più profondità: il muro laterale dell'edificio. Sarà più corto di quello frontale.

Passaggio 6

Finiamo l'impronta. Puoi spostare le linee guida su un altro livello per un po '. Qui ho chiuso l'area e l'ho riempita di bianco in modo che i passaggi successivi siano un po 'più semplici.

Passaggio 7

Ora duplichiamo l'impronta e la spostiamo all'altezza che avevamo già deciso per il livello.

Poiché la superficie era piena di colori, abbiamo un numero leggermente inferiore di righe da rimuovere.

Passaggio 8

Dobbiamo ancora rimuovere il resto delle linee che i muri bloccheranno.

Aggiungi alcune linee d'angolo verticali e il tuo volume è completo.

2. Dettagli

Ora ci occuperemo della maggior parte dei colori e dei dettagli richiesti dal primo piano, che rimarranno pressoché gli stessi per il resto dei piani.

Passo 1

Aggiungiamo la maggior parte delle linee verticali di cui avremo bisogno: una per ogni angolo e alcune extra per i bordi dei pannelli di vetro.

Passo 2

Trova i colori che ti piacciono per le diverse sezioni dell'edificio. Ho scelto di rendere l'entrata simile al cemento. Le pareti di vetro sono circa dello stesso colore impostato per le finestre del precedente tutorial di casa e la piccola area sul bordo sarà di un tipo di colore di mattoni scuri.

Dovresti provare a giocare con il Tonalità / Saturazione / Luminosità cursori per trovare i colori finali.

Passaggio 3

Impostiamo una larghezza per le doppie porte e spingiamo un po 'quella superficie nel volume. Come al solito, ti consigliamo di rendere gli angoli di punta più chiari rispetto alle pareti.

Passaggio 4

Ora impostiamo l'altezza per le porte.

Passaggio 5

E qui ho fatto una linea leggermente scura accanto ad una linea leggermente leggera per sembrare dei solchi: sembra essere comune su questi tipi di edifici e rende i muri di cemento non troppo piatti / noiosi.

Applicheremo anche questi solchi orizzontalmente, in seguito.

Passaggio 6

Faremo le porte anteriori per lo più in vetro, quindi riempiamo con lo stesso colore della parete di vetro parallela. Inoltre, aggiungi le linee di bordo verticali per le porte, una sull'angolo interno e l'altra al centro. Per trovare il centro è possibile misurare l'intera rottura nel calcestruzzo con il Seleziona strumento (otterrete la larghezza nel pannello delle informazioni), quindi dividetelo per 2 e saprete la distanza tra l'angolo interno e dove deve andare l'angolo centrale.

Poiché le pareti intorno alle porte coprono parte di esse, non aspettarti che entrambi i rettangoli di vetro delle porte abbiano la stessa larghezza.

Passaggio 7

Aggiungiamo una cornice attorno al vetro. Ho scelto un grigio scuro, con una tonalità leggermente fresca.

Un pixel di grigio era abbastanza verticale. Per la linea di fondo ho lasciato un'altezza di 3 px. Inoltre, aggiungi le linee scure tra il grigio e il vetro.

Passaggio 8

Ecco le porte finite. Ho aggiunto un piccolo evidenziatore per la parte inferiore delle aree grigio / metallo, alcuni pixel circa l'altezza del braccio del personaggio (queste sono le serrature) e alcune linee di vetro più scure, per una sorta di effetto vetro.

Passaggio 9

Ora, sulla parete di vetro. Rendi l'angolo anteriore più chiaro e aggiungi un'area con una tonalità più scura del colore del vetro. Puoi usare il Strumento bacchetta magica per selezionare la superficie superiore bianca e quindi spostare quella selezione di circa 10 px in modo che la selezione si intersechi con le aree della parete di vetro che si desidera dipingere.

Passaggio 10

Finisci le linee per tutte queste parti in vetro. La maggior parte degli angoli non deve essere nera e le cuciture sul vetro dovrebbero essere leggermente più scure rispetto ai colori circostanti.

Inoltre, spingere un po 'il muro marrone.

Passaggio 11

Regola i colori del muro marrone, ora che è spinto fuori.

Il piano terra è quasi finito.

Passaggio 12

Ora copia il livello e incollalo su un nuovo livello (o Alt-Shift-up arrow) e posizionarlo proprio al piano terra.

Passaggio 13

Naturalmente, non ci saranno porte nei livelli successivi, quindi inizia a trasformare le porte in una finestra unendole in una e regolando le dimensioni. Qui è già molto più breve, in verticale.

Passaggio 14

Non è necessario il bordo inferiore spesso sul telaio, ora che è una finestra. Liberati di esso e rendi la finestra più stretta. Assicurati di tenerlo centrato; se lo fai più corto di 12 px a destra, fallo anche di 12 px più corto a sinistra.

Passaggio 15

Quindi completare le aree intorno alla finestra. Riempi il colore del muro di cemento.

Passaggio 16

E fai i dettagli extra sul muro. Aggiungeremo altre scanalature al cemento, questa volta orizzontalmente. Come i precedenti, questi sono fatti con una tonalità leggermente più scura del colore della parete, proprio accanto ad una leggermente più leggera. Dovranno essere applicati sia alla parte superiore che a quella inferiore di questo livello.

Passaggio 17

Ora per il bicchiere. Vogliamo mantenere le cuciture, ma quelle in alto e in basso sono adesso in nero e le vogliamo con lo stesso colore del resto delle cuciture.

Passaggio 18

Alla fine faremo lo stesso con il muro marrone, ma è ancora più semplice per questo perché non ci sono solchi o cuciture. È solo una continuazione degli stessi colori. Il modo più semplice per eseguire questa correzione è con Strumento bacchetta magica; selezionando tutti e tre i colori e poi Alt-nudging 1 px in su e anche in basso.

Passaggio 19

Aggiungiamo una piccola finestra a questo muro marrone. Sarà un bel piccolo accento: la finestra sarà in uno stile diverso. Inizia con un rettangolo. Se lo fai in questo modo, sembra che abbia angoli arrotondati e sembra più pulito.

Passaggio 20

Riempi il rettangolo con il grigio scuro (dello stesso colore della porta), quindi aggiungi un'evidenziazione in alto e alcune linee parallele al bordo superiore e anteriore.

Passaggio 21

Dagli un po 'di profondità. Qui ho anche aggiunto un punto culminante sul bordo inferiore.

Passaggio 22

Aggiungi un colore di vetro e una linea scura tra il vetro e il metallo.

Passaggio 23

E poi basta duplicarlo così è anche al piano terra.

Il secondo piano è completo.

3. Alzati

Il secondo piano è simile a una tessera: puoi ripeterlo tutte le volte che vuoi e avere un edificio di 100 piani se vuoi.

Passo 1

Ma non faremo 100 piani. Per questo edificio, cinque piani sembrano giusti. Ad ogni modo, se l'edificio è troppo alto e ogni piano è uguale, questo tipo di spazio per le illustrazioni spreca più dello stesso.

È possibile selezionare il livello del secondo piano e premere Alt-Shift-up arrow duplicarlo al volo. Oppure potresti copiare / incollare e quindi posizionare semplicemente dove appartiene. Come ho detto prima, è possibile spostare le selezioni di 10 pixel in qualsiasi direzione premendo Cambio e il tasti freccia.

Passo 2

Ripeteremo solo una parte del piano per la parte superiore, in modo da avere un pezzo dell'edificio che è lì semplicemente per fornire l'accesso alla terrazza sul tetto. Abbiamo solo bisogno di far apparire la parte concreta.

Potresti volerlo fare su un nuovo livello.

Passaggio 3

Termina il volume.

Passaggio 4

Aggiungi i dettagli corrispondenti.

Passaggio 5

Qui ho aggiunto una piccola sezione per completare la piccola scatola di cemento. Mi è sembrato un po 'brusco senza di esso. 

Passaggio 6

Riempire la parte superiore con una tonalità chiara del colore concreto e fissare eventuali linee che potrebbero aver bisogno di fissaggio. Aggiungeremo un po 'di texture granulosa sul tetto, come abbiamo fatto con il condominio. Inizia con un rettangolo, centrato in alto.

Passaggio 7

Trova un colore che ti piace per questo, quindi applica la texture morbida e morbida e ammorbidisci il bordo.

Passaggio 8

Se volessimo, potremmo implicare che la porta della terrazza è sul lato del cubo che non possiamo vedere, ma invece aggiungiamola al lato visibile. Copieremo le porte che abbiamo già fatto e le sistemeremo su questo nuovo muro.

Passaggio 9

Ha solo bisogno di una porta. Ho tenuto visibile la piccola serratura, e oltre a rimuovere una delle porte ho anche realizzato quello che ho tenuto un po 'più stretto.

Passaggio 10

La porta originale si affacciava sul lato più chiaro dell'edificio, quindi dovresti regolare i colori per abbinarli al nuovo lato.

Passaggio 11

Quindi rimuovere semplicemente il pezzo di muro sotto la porta.

Passaggio 12

E per finire i volumi per la terrazza, aggiungiamo una ringhiera - dovrebbe essere circa l'altezza della vita del personaggio. Inizia con quello sul retro e dai i colori del muro marrone.

Passaggio 13

Quindi (potresti volerlo mettere in un nuovo livello) fai girare la ringhiera e sui bordi anteriori.

Quindi, è sufficiente rendere i bordi che vengono a contatto con il muro o il pavimento un po 'più leggeri del nero.

E tutti i volumi sono completi.

4. Textures

È ora di finire il nostro edificio aggiungendo alcune semplici trame.

Passo 1

Questa è la trama che aggiungeremo alle pareti marroni. Non sarà in bianco e nero, ma per crearlo, fai queste linee di 2 px alternate. Puoi disegnare solo pochi pixel e quindi selezionare e duplicare molte volte fino a coprire un'area ampia. Puoi anche farlo come un pennello selezionando la tessera e poi andando a Modifica> Definisci modello.

Passo 2

Una volta che hai un sacco della tua texture, la metti in un nuovo livello, coprendo tutte le aree marroni. Idealmente le parti nere della trama dovrebbero superare la maggior parte delle linee nere nel disegno.

Passaggio 3

Cambia l'opacità del livello texture al 20% o come desiderato.

Scelta rapida: è possibile modificare le opacità del livello premendo i numeri sulla tastiera mentre lo strumento Sposta è attivo.

Quindi sugli strati con il muro marrone, selezionare tutte le aree del colore marrone con il Strumento bacchetta magica. Se hai queste aree distribuite su molti livelli, ti sarà utile impostare il Strumento bacchetta magica a Campiona tutti i livelli.

Passaggio 4

Torna al livello con la texture e inverti la selezione (Seleziona> Inversa) ed elimina.

Resterai con una trama che copre solo i muri che si suppone.

Passaggio 5

Ora trova un colore per la superficie del tetto.

Passaggio 6

E facciamo un'altra texture semplice. Per questa superficie faremo le tessere.

Inizia con un rettangolo usando una tonalità più scura del nuovo colore di superficie. Quindi all'interno di questo rettangolo più scuro fai un altro rettangolo ma con una tonalità più chiara della superficie. Quindi duplicare e organizzare più volte.

Passaggio 7

Duplica fino a quando non puoi coprire l'intera superficie del terrazzo con la texture. Il contrasto non dovrebbe essere troppo alto per questa tessera.

Passaggio 8

Quindi ripetere la stessa procedura di prima per ritagliare le aree indesiderate della trama.

Ora puoi, se vuoi, unire tutti i tuoi livelli di costruzione.

Edificio completo!

Congratulazioni! L'edificio per uffici è finito, e ora il cielo dei pixel è il limite!