Share
Cosa starai creandoHai realizzato un personaggio di arte pixel isometrica, ma dove potrebbe vivere quel personaggio? È tempo di creare una casa per questo!
Molto simile ai set Lego, gli edifici sono quasi il punto di riferimento di pixel art isometrici. La loro creazione potrebbe richiedere del tempo, ma dovrebbe essere piacevole!
Se non hai passato il Isometrica Pixel Art Character tutorial quindi è meglio controllare prima questo; useremo il personaggio di quella lezione e salteremo i suggerimenti di Photoshop già trattati.
Dovremo capire come dimensionare gli elementi per il nostro edificio. Non è necessario essere troppo tecnici (il nostro personaggio non è così realistico). Useremo semplicemente il personaggio come una sorta di criterio e decideremo da soli quanto in alto vogliamo che siano porte, finestre e tetti, per mantenere dimensioni ambientali coerenti.
Quindi ecco da dove ci eravamo interrotti:
Ora prendiamo il nostro personaggio e definiamo alcune delle altezze.
In un nuovo livello creiamo un "muro" di 2: 1 linee, ogni linea 4px sopra il precedente (visto anche come tre pixel vuoti tra ogni riga). Se scegliamo solo altezze che corrispondano a queste linee, farà aggiungere trame, come mattoni o legno, esteticamente più piacevoli in seguito.
Ecco le altezze che ho scelto per la porta e anche per il soffitto e il secondo piano. Anche se non vedremo un soffitto e il secondo piano, la definizione di queste linee è di solito utile.
Continuiamo a far crescere la nostra struttura, ma non di molto! A meno che non vogliate fare una panoramica sull'interno dell'edificio, è meglio rendere l'edificio abbastanza grande da trasmettere l'idea che si tratti di una casa normale. In questo modo possiamo inserire più elementi in meno spazio, il che è utile in una scena di città più complessa, e comunque è preferibile escludere qualsiasi cosa non necessaria o ridondante. Nella vita e nella pixel art.
Daremo alla pianta del piano una forma a L per aggiungere complessità ad essa; la casa sembrerà più bella e avremo modo di esplorare più geometrie.
Quindi per ora dobbiamo solo far crescere la struttura in una direzione. Eccolo con una lunghezza aggiunta alla destra della porta: 40px dal bordo della porta alla nuova curva.
C'è spazio per una o forse due finestre. Ci arriveremo più tardi.
Ora selezioniamo una sezione di quelle linee, Alt-nudge (o Copia incolla) e Capovolgi orizzontalmente quindi posizionalo come il muro rivolto a destra, quindi estendi queste linee finché non lo sono 50px largo:
Ora seleziona l'intera parete di fronte sinistra più 10px del muro di fronte destro (la selezione dovrebbe essere totale 60px largo), Alt-nudge e Capovolgi orizzontalmente, quindi posiziona sull'altro bordo per rendere la nostra L:
Ci mancano solo le linee secondarie per completare la L, ma abbiamo solo bisogno di fare quelle con le linee di livello superiore:
Ora chiudiamo le forme e le riempiamo di colore nello stesso modo in cui abbiamo fatto il cubo nella lezione precedente. Lascia i marcatori per la porta ed elimina l'indicatore per il soffitto.
Puoi andare a Immagine> Regolazioni> Tonalità / Saturazione per controllare facilmente più opzioni di colore e trovare quello che ti piace. Vai con i toni della terra se vuoi costruire una casa di mattoni, o qualsiasi altro colore se preferisci una trama di tavole di legno o muri non strutturati solidi.
Ho segnato con qualcosa di rosso che non abbiamo incontrato prima: un angolo "valle". Tutti gli angoli del cubo erano angoli "di punta" e i colori più chiari funzionavano bene per quelli. Ma per gli angoli "valle", i colori più chiari non hanno senso, e il nero può essere troppo duro, quindi il modo migliore per farlo è con una tonalità più scura del 10% o del 15% del colore più scuro della parete:
Sembra che abbiamo ridotto alcune delle forme principali, ma ci manca ancora qualcosa di molto importante e leggermente più complicato.
Il nostro personaggio non ha ancora un tetto sopra la testa. È il momento di coprirlo.
Crea un nuovo livello e in esso forma una L piatta, proprio sopra la superficie superiore L. Ma dovrebbe essere più ampia, in quanto i tetti generalmente sono più ampi dell'impronta delle case. Quindi queste nuove linee dovrebbero lasciare una linea di pixel vuoti tra le linee nere e due linee di pixel vuoti tra gli angoli più chiari:
Le nuove linee saranno la parte inferiore del tetto.
Crea un nuovo livello e disegna alcune linee verticali da questi due angoli della L:
(La linea più a destra sembra non essere esattamente dietro l'angolo, ma è perché preferisco sbarazzarmi di quel pixel quando finisco le forme ... come abbiamo fatto con il cubo e la L.)
Ora trova un punto tra queste due linee per aggiungere una terza linea. Puoi misurare con lo strumento di selezione o puoi modificare una selezione e contare la distanza mentre la sposti usando il tasti freccia (ricorda: spingendo mentre si tiene premuto Cambio sposta la selezione 10px alla volta)
Ora sappiamo dove si incontreranno le linee per fare l'angolo del tetto più alto. Dobbiamo solo fare le linee. Puoi provare tutti gli angoli che vuoi, ma ti consiglio gli unici due che evitano le linee frastagliate:
Uno di questi è una linea diagonale 1: 1 con una linea retta orizzontale, e l'altra è una 1: 2 con 1: 1.
Andremo con le linee più alte. Liberiamoci dalle nostre linee guida, mantieni solo le linee blu, quindi rendile nere. Non è necessario unire ancora il livello.
Copia la lunga linea che forma il retro del tetto L e incollala sul punto del tetto in modo che le tre linee si incontrino nello stesso punto.
Dovrebbe sembrare come questo:
E quella linea andrebbe benissimo lì. Puoi scegliere di ignorare il seguente suggerimento: è pignolo e lo so, ma mi piacciono le mie linee più scure 2: 1 per stare all'interno di una certa griglia quasi immaginaria, in cui la distanza dei pixel tra tutti è sempre un numero pari. Lo faccio per mantenere la coerenza e perché mi consente di mantenere l'estetica ideale anche dopo aver riaggiustato o spostato gli elementi.
Quindi in questo caso è meglio che quella nuova linea sia di un pixel inferiore o superiore come visto qui:
La linea del tetto diagonale 1: 1 deve essere spostata leggermente se viene applicata questa modifica.
Ora uniamo insieme queste linee del tetto (ma non ancora con lo strato tetto-L) Alt-nudge, Capovolgi orizzontalmente e posto sul lato sinistro della L per ottenere questo:
Non avremo bisogno di quelle righe rimaste in cima, quindi cancellatele e aggiungete una linea verticale per rendere l'angolo della "valle" del tetto. Sul livello L del tetto, cancella le due linee nella parte posteriore (le due linee più in alto sullo schermo) e poi unisci le linee del tetto verso il basso con la L:
Ora, anche se ne rimuoveremo alcune parti, aggiungiamo il colore all'intera forma del tetto. Prova ad applicare ciò che abbiamo fatto al cubo anche se le forme sono abbastanza diverse.
In questa forma, un punto saliente sul bordo superiore, credo che lo faccia sembrare migliore.
Ora rendi quei due triangoli quasi bianchi (quello a destra dovrebbe essere un tocco più scuro) e separa il bianco dal colore del tetto con un tono più scuro, come quello per l'angolo a valle del tetto:
Ora aggiungiamo un tocco leggermente decorativo facendo alcune linee parallele alle diagonali del tetto. Lasciando un pixel in mezzo, aggiungi una linea con una tonalità leggermente più scura di bianco e poi (con un altro pixel in mezzo) una linea nera per ottenere questo:
Ora dobbiamo rimuovere le aree bianche al centro e le linee nere al di sotto e ritoccare se necessario:
Non è necessario, ma possiamo unirci alla casa L adesso. Potrebbe essere più facile riempire le aree vuote del triangolo con i colori del muro prima di unire. Il laccio lo strumento è tuo amico; ricorda di usarlo senza anti-aliasing.
Bello! abbiamo praticamente finito con il lavoro geometrico!
Non è una casa senza una porta e poche finestre. Fortunatamente sappiamo già dove realizzare la nostra porta, quindi aggiungiamo alcune linee verticali e una linea extra di 2: 1 sotto il nostro indicatore di altezza per realizzare il nostro telaio. Restituiremo il personaggio per un po '.
Ora, su quel vuoto spazio noioso che ci fissa dovremmo aprire una finestra. Può essere quasi uguale al telaio della porta, quindi mantenere il bordo superiore allo stesso livello e centrarlo tra il bordo del telaio della porta e l'angolo della casa. Se vuoi, renderlo più stretto o più largo. Aggiungeremo un altro rettangolo concentrico in modo che la cornice abbia un po 'più di dettagli e larghezza.
Se si sposta la linea di fondo della porta su un pixel o due appare un po 'meno piatta:
La linea di fondo del telaio della finestra dovrebbe idealmente essere sopra il livello del pavimento di un multiplo di quattro, come nel "muro" iniziale delle linee 2: 1.
Abbiamo ancora due pareti nude, quindi copi semplicemente la stessa finestra su quei muri, posizionala il più centrata possibile e ovviamente allo stesso livello rispetto alla linea di fondo (aiuta a selezionare la finestra insieme al fondo linea per renderlo più facile).
Queste due nuove finestre hanno più spazio intorno a loro, quindi potrebbero essere più ampie o più ornate. Li manterremo gli stessi, ma sentitevi liberi di provare un'alternativa. Quello che aggiungeremo è un paio di finestre più piccole sopra. Sembreranno piccole finestre in mansarda e aiuteranno a riempire le pareti nude e renderanno la casa più bella e dettagliata.
(Non preoccuparti del fatto che le finestre più piccole non siano centrate rispetto al tetto, perché il tetto non è allo stesso livello verticale del muro e delle finestre).
Smetteremo di aggiungere dettagli qui, ma ci sono molte possibilità che potremmo aggiungere; cerca riferimenti di immagini e prova a lavorare nella tua pixel house.
Ora dovremmo colorare e finire tutti questi elementi. Facciamo tutte le cornici bianche e facciamo tutte le linee nere tra le cornici e le pareti dello stesso colore dell'angolo della valle nella casa. E le linee nere nelle cornici delle finestre dovrebbero essere più scure del colore della finestra, proprio come abbiamo fatto sulle parti bianche del tetto:
Puoi, naturalmente, colorare solo una delle finestre e poi copiarla per le altre. Ricorda solo che gli elementi sul lato più scuro dell'edificio dovrebbero essere più scuri di conseguenza.
Ora trova i colori che ti piacciono per la porta e le finestre. Il bianco ha senso per la porta, ma mi piace come appare questo rosso, perché esce dalla mia tavolozza tutta azzurra. Per le finestre di solito mi piace un'acquamarina a bassa saturazione, ma provo alternative. Devono esserci dozzine di modi per illustrare i pannelli di vetro, quindi potresti trovare un modo migliore di quello che stiamo facendo ora.
Si noti che mi sono sbarazzato della maggior parte delle linee nere su questi dettagli. Penso che abbia senso quando gli elementi sono in contatto diretto e il nero sembra un po 'troppo duro tra i diversi colori.
Qui ho aggiunto due linee più leggere alle finestre seguite da una linea leggermente più scura. Penso che assomiglino un po 'al riflesso della cornice, quindi questo dovrebbe aiutare a far sembrare le finestre come il vetro.
Ho anche riportato il personaggio per aiutarci a posizionare la maniglia della porta, che dovrebbe essere all'altezza del gomito.
Aggiunto un pomello rotondo d'oro.
Per i dettagli finali possiamo aggiungere alcune decorazioni sulla porta; sono solo alcuni rettangoli in una tonalità più scura, più alcuni punti salienti sotto e su un lato. Inoltre, perché non aggiungere alcune tavole bianche sottili sugli angoli dei picchi, come puoi trovare in molte case di legno:
Creiamo e applichiamo le nostre trame. Le aree che ne hanno bisogno sono, ovviamente, il tetto e le pareti.
Inizieremo con il tetto. Crea un nuovo livello.
Faremo delle tessere leggermente rotonde che si muovono lungo la linea superiore, e una volta che ne abbiamo alcune Alt-nudge e inizia ad aggiungerli.
La seconda fila di tessere atterra in quella posizione perché prima passano attraverso 2 px (seguendo la linea superiore) per essere posizionati in posizioni sovrapposte come mattoni, e poi si spostano verso il basso (seguendo la diagonale laterale) di altri pixel. Se sembra complicato, basta seguire la guida visiva qui sopra e dovresti stare bene. Una volta che hai una patch grande, moltiplicala ancora più volte in modo che copra il tetto:
Sul lato sinistro del tetto, la trama dovrebbe fluire nella direzione opposta, quindi capovolgere quell'area orizzontalmente. Quindi vai allo strato casa e usa il Bacchetta magica per selezionare tutti i colori del tetto (tranne le linee nere). Se tieni premuto Cambio puoi continuare ad aggiungere aree alla tua selezione. Una volta terminata la selezione, torna al livello texture, inverti la selezione (Seleziona> Inversa) ed elimina per ottenere questo:
Prima di fondere, dovremmo ridurre l'opacità su quel livello a circa il 20%. Ma quello che consiglierei, per tenere sotto controllo la nostra tavolozza di colori, sarebbe sostituire i colori delle texture con le tonalità più scure che abbiamo già usato sul tetto:
Ho anche rimosso le trame dalle linee di evidenziazione dei bordi per rendere il tetto un po 'più pulito.
Ora per la trama del legno abbiamo semplicemente bisogno di fare delle linee che seguono l'impronta della casa, e poi Alt-nudge e sposta quattro pixel in alto e ripeti ancora e ancora fino a coprire tutte le aree del muro:
Quindi ripeti il processo che abbiamo usato sulle tegole del tetto nel Passaggio 4:
Hai dato al tuo personaggio una casa, ma il suo mondo potrebbe continuare a crescere. Se ti è piaciuta la lezione, ricontrolla di più!
Accentsconagua