Articles

A Basic Sprite Tutorial

Ecco un runthrough di base di come trasformare il vostro disegno in pixel art utilizzando alcuni trucchi Photoshop o GIMP.

Passo 1: Il disegno

Nota come non ci sono dettagli della maschera e come le mani sono belle e semplici

Un tablet è bello avere per disegnare direttamente in un programma artistico come Photoshop. Altrimenti, scansiona un disegno con matite pesanti o linee inchiostrate. Se vuoi imitare uno stile di gioco specifico, usa uno sprite ingrandito come riferimento per le proporzioni e la larghezza del corpo (cosa che purtroppo non ho fatto con questo schizzo). Mantenere i dettagli al minimo in modo da non ingombrare le cose quando si restringono.

Tempo: varia

Passo 2: Ridimensionamento

Non ridimensionare con proporzioni vincolate – allunga e schiaccia per abbinare le proporzioni del tuo obiettivo

Trova uno sprite simile alla dimensione (o alla posa) che vuoi copiare. Ridurre il disegno verso il basso e contemporaneamente renderlo ampio come deve essere per abbinare, se non si è lavorato fuori nel passaggio 1. Si noti che in questo schizzo, voglio circa la stessa altezza, ma un po ‘ più ampio.

Tempo: 30 secondi

Fase 3: l’Affilatura

l’Uso di Photoshop o GIMP della Soglia strumento per risparmiare un sacco di tempo di pulizia

Unisci il livello con il ridimensionata linework su un livello con un solido sfondo bianco. Vai all’IMMAGINE >REGOLAZIONI> SOGLIA in Photoshop o l’equivalente in GIMP per ridurre il disegno al tratto a pixel in bianco e nero puro. Assicurati di essere ingrandito da vicino per vedere i pixel migliori. Mantieni tutti i tuoi dettagli originali il più comprensibili possibile in modo da non dover fare riferimento troppo spesso al tuo disegno originale.
Questo passaggio renderà la pulizia delle linee e il riempimento del colore facile e ti farà risparmiare un sacco di tempo sulla pulizia a mano.

TEMPO: 10 secondi

Passo 4: Pulizia

Affila i contorni fino a quando non sono larghi 1 pixel. Non aver paura di rompere alcuni contorni e non preoccuparti ancora di dettagli più fini

Crea un livello solo per le linee (elimina tutto bianco). Ingrandisci e ripulisci i contorni. Se siete a rompere le linee, questo è il posto giusto per farlo. Non è ancora il momento di lavorare sui dettagli fini (ancora una volta, maschera e mani) – basta iniziare a darti ancore per la colorazione. Al termine, bloccare il livello.

TEMPO: 10-20 minuti

Passo 5: Fill-tool i Flats

i colori flat sono riempiti – in questo caso i colori shadow

Riempiono i colori flat su un livello sotto le linee. Elaborare i dettagli del vestito, ecc, ma non fare alcuna ombreggiatura. La luce verrà aggiunta dopo. Questo passaggio dà davvero spriting la sensazione di ‘produzione di fumetti’. Nota speciale: Alcune persone preferiscono utilizzare i colori della zona di luce per i loro appartamenti, quindi aggiungere le ombre dopo. Questo produrrà un effetto finale diverso, quindi sperimenta.

TEMPO: 2 o 3 minuti

Passo 6: L’ombreggiatura

Risparmia tempo e ottieni buoni colori usando il bianco sui livelli impostati su Overlay per illuminare gli appartamenti ombra

In questo momento hai un livello per le linee e un livello per gli appartamenti. Ecco dove Photoshop ti fa risparmiare un po ‘ di tempo. Inserire due strati tra le linee e gli appartamenti. Cambiali in stile Sovrapposizione e rendi opacità quella superiore del 50%. Selezionare una matita da 1 o 2 pixel e iniziare a mettere giù alcuni bianchi. Illuminazione istantanea attraverso i tuoi colori.
Nota: lavorare prima con il livello di opacità al 100%. Quando hai l’ombreggiatura verso il basso su come ti piace, usa lo strumento magic want per selezionare le aree non bianche. Quindi passare al livello 50% per il mid-shading (dopo aver nascosto le formiche in marcia della bacchetta). Non vuoi che i due strati si sovrappongano ai loro bianchi o otterrai punti salienti extra.

TEMPO: 30-90 minuti

Passo 7: Controllo dell’ombreggiatura

Controlla i dettagli dell’ombreggiatura rendendoli in scala di grigi ed eliminando le distrazioni del colore

A volte hai bisogno di occhi nuovi per verificare che hai ottenuto l’ombreggiatura giusta.
Questo è ciò che i livelli dovrebbero essere simili – gli appartamenti pieni w/ nero è quello che stiamo aggiungendo in questo momento. Copia il livello flats, bloccalo, riempilo di nero (Modifica > Fill). Quindi cambia i tuoi due strati bianchi da Overlay a Normal. Dovresti ottenere questo:

Non riesco davvero a pensare a un modo migliore per testare l’ombreggiatura piuttosto che eliminare tutto il colore del costume che distrae e aumentarlo fino al massimo contrasto. È il modo più semplice per trovare piccole cose che non sembrano giuste, o anche grandi cose che eri troppo concentrato per notare. Cosa c’è di meglio, la correzione è solo una questione di fissare i bianchi – non cambiando ogni colore. Provalo anche con uno sfondo nero.
Hmm. Penso che daro ‘ un’altra occhiata alla sua mano sinistra prima che abbia finito.

TEMPO: 90 secondi per controllare; varia per correzioni

Passo 8: Linee di colore

Abbina l’oscurità del contorno al resto dell’ombreggiatura

Ora che hanno fatto il loro b&w sovrapposizione del lavoro per il passaggio 7, è ora che i contorni vengano colorati e antialiased nelle aree chiare. Con i loro strati su ‘lock’, dovrebbe essere un gioco da ragazzi. RICORDA SEMPRE: lavora su sfondi di colore scuro (ma non nero puro) quando fai lavori di contorno. Aiuta l’antialiasing.

TEMPO: 30-60 minuti

Passo 9: Dettagli & Pulizie

Finisci i dettagli più fini

Questa è la fase ‘sottigliezza’. * Prendi i colori giusto (Overlay in realtà fa un buon lavoro con la colorazione) * Aggiungi dettagli difficili da pixel (Triangolo sulla maschera, linee blu intorno ai bordi dei guanti ,ecc.) * Finisci i dettagli sottili che hai salvato per ora (mani) * Ultimo andare in giro per gli errori. Nota che ho “dimenticato” i suoi stivali gialli – ma con questo processo, è solo una questione di aggiungere il giallo al livello degli appartamenti. E ‘ pre-ombreggiato!