In questo tutorial creerai da zero un jack-o-lantern spettrale, reso interamente in pixel (i mattoni della digital art). Scopri come utilizzare il pannello Timeline di Adobe Photoshop per animare una faccia sorridente e ammiccante che lancia un bacio allo spettatore e si illumina sia dentro che fuori.
1. Disegnare la zucca
Passo 1
Durante questo tutorial lavorerò in Adobe Photoshop CC 2014. Apri il tuo programma e creare un Nuovo documento. La mia ultima immagine misurata 36 px di 30 px, così ho fatto il mio documento 50 px di 40 px a 72 dpi con un Trasparente sfondo.
Passo 2
Iniziamo con la costruzione della forma base della zucca. Zoom (Z) sul tuo documento 1600% o così.
Usando il Pencil Tool (B) con un 1 px pennello duro, disegna 7 pixel in una linea verticale.
Disegnare 2 pixel su entrambi i lati della prima riga.
Sulla parte superiore del disegno fino ad ora, traccia una linea verticale aggiuntiva di 2 pixel seguito da 1 pixel alla diagonale destra delle due precedenti. Sul fondo del disegno, disegna 2 pixel diagonali in successione (vedi sotto).
Completa questa sezione con 1 pixel diagonale in alto e altri due pixel a destra sia in alto che in basso.
Passaggio 3
Continuando con il Strumento di matita e la nostra forma di zucca di base:
Con ciò che è stato creato in Passo 2, Aggiungi su 3 pixel orizzontalmente verso l'alto e il basso del disegno. Disegnare 1 pixel diagonale sopra la linea di tre disegnata in precedenza.
Continua a costruire la forma della zucca sulla parte superiore del design con 3 pixel orizzontali. In basso, disegna 1 pixel diagonale sotto l'altro e 2 pixel a destra.
La linea superiore è 8 pixel attraverso. La linea di fondo è 10 pixel attraverso.
L'altra metà è un'immagine speculare di tutto a sinistra delle due linee orizzontali diritte. Utilizzare il strumento per selezione di un'area rettangolare a Selezionare, Copia (Control-C), Incolla (Control-V), e specchio (Modifica> Trasforma> Rifletti orizzontalmente) la metà sinistra per completare la forma base della zucca.
Passaggio 4
La nostra zucca ha bisogno di una faccia. Creare un Nuovo strato nel Livelli pannello e utilizzando il Strumento di matita, Cominciamo:
L'occhio inizia con 3 pixel in una linea e 1 pixel sopra di loro e al centro.
Completa l'occhio con la terza riga di pixel composta da 3 pixel e la quarta linea composta da 5 pixel.
Tre pixel a destra dalla linea inferiore dell'occhio inizia il naso. Comprende tre file: 1 pixel, 3 pixel, e 3 pixel.
Ripeti la forma dell'occhio di nuovo per l'occhio destro.
Assicurati che occhi e naso abbiano 3 pixel spazi che li separano. La bocca inizia con due file verso il basso 3 pixel attraverso.
Passaggio 5
Questo intero passo consiste nel completare la bocca:
L'inizio della bocca, costruendo l'ultimo passo, è 9 pixel sistemato in a 3 x 3 scatola.
Disegnare 3 pixel in una linea verticale su entrambi i lati del riquadro disegnato in precedenza.
Successivamente ci sono due colonne di 2 pixel ciascuno su entrambi i lati della bocca.
Disegna due forme a L su ciascun lato composto da 3 pixel ogni.
Inserisci 1 pixel su entrambi i lati, in diagonale e andando verso l'esterno. I bordi superiori della bocca sono costituiti da 4 pixel in una fila orizzontale.
Per completare la bocca, posizionare 1 pixel diagonalmente e verso il basso, verso il centro della bocca, e riempire i lati sinistro e destro (vedi sotto per la forma esatta). A questo punto, la bocca assomiglia un po 'a un pipistrello volante.
Dato che la mia zucca sarà composta da varie arance e gialli, ho deciso di cambiare il colore della mia linea artistica in marrone (# 6b0f02).
2. Colorare la zucca
Passo 1
I colori usati nel mio artwork finale differiscono da quelli che ho iniziato con sotto (sono più saturi e sono stati modificati in seguito nel processo). Consideralo come una piccola lezione per creare facilmente una tavolozza di colori armoniosa. Per creare il tuo (o farlo con altri colori), riduci il Opacità del colore alla percentuale indicata, posizionarlo sopra il 100% arancio colore e selezionare il nuovo colore con il Strumento Eyedropper (I). Salva nuovi colori nel campioni pannello e assicurarsi che il Opacità è impostato su 100% per il resto del tutorial.
Marrone 100%: # 760b03
Marrone 75%: # 902b0d
Marrone 50%: # ae4a18
Marrone 25%: # d1692a
arancia 100%: # f2842b Usato come colore di base.
arancia 40%: # faa912
arancia 20%: # ffcc01
Giallo 100%: # fff25d
fondersi lo strato del viso e l'arte della linea di zucca e riempire la zucca usando il Strumento di riempimento e arancia (# f2842b).
Passo 2
La nostra zucca ha bisogno di una radice.
utilizzando Marrone (# 760b03), e il Strumento di matita, disegnare due linee verticali di 3 pixel ciascuno, a due file di distanza.
Compila le due colonne con Marrone 75% (# 902b0d) e chiudere la forma con 2 pixel di Marrone.
Uso Marrone50% (# ae4a18) come colore di evidenziazione nella parte superiore dello stelo.
Passaggio 3
Poiché questo è un jack-o-lantern, dovremo aprire la parte superiore della zucca.
Ho iniziato con lo stesso Marrone usato sullo stelo. Dalla cima del gambo, il centro del coperchio della zucca è 9 pixel verso il basso. Disegnare 8 pixel trasversali in quel punto centrale con 3 pixel nella fila successiva su entrambi i lati della linea centrale.
Connetti il 3 pixel da entrambi i lati con 1 pixel in su.
Coprire il pixel dell'angolo con arancia e ombreggia il coperchio e sotto di esso con Marrone25% (# d1692a) a partire dal Passo 1 in questa sezione.
Colloca i pixel arancioni negli angoli della linea del coperchio e al di sotto del gambo (vedi sotto).
Passaggio 4
Concentrati su ciò che viene fatto con l'ombreggiatura nella zucca qui sotto:
Disegnare attentamente linee curve di Marrone 25% (# d1692a) a partire dai trattini del fondo della zucca. Le curve dovrebbero imitare il contorno della zucca stessa.
Allinea il fondo della zucca e inizia a scaglionare i pixel arancione scuro e arancione nella metà inferiore della zucca.
Delinea anche il fondo della bocca, del naso e degli occhi.
Opzionalmente, puoi scegliere ora di usare un giallo-arancio da Sezione 2, Passo 1 per aggiungere riflessi al coperchio, agli occhi, al naso e alla bocca della zucca.
I colori per questa parte del tutorial sono più sottili di quelli che ho scelto di utilizzare nel passaggio successivo. Se ti piace questo tono meglio, usa semplicemente il passo successivo per suggerimenti su ulteriori sfumature e evidenziazioni e mantieni la tavolozza dei colori creata in Sezione 2, Passaggio 1.
Passaggio 5
Se desideri una zucca più luminosa e satura, controlla i seguenti passaggi:
Sostituisci tutte le istanze di Marrone 25% (# d1692a) sulla superficie della zucca con Rosso brillante (# ff1300).
Cambia il colore arancione di base in # ff7700.
Assicurati che il gambo superiore contenga sfumature di marrone e marrone chiaro anziché rosso (stiamo cambiando la zucca piuttosto che il colore del legno dello stelo).
Per la linea che indica il coperchio della zucca, utilizzare i marroni chiari Sezione 2, Passaggio 1. Per le alte luci, usa gialli (# FFCC00) e (# fba912) per disegnare piccole caselle e scaglionare linee di pixel nella parte superiore sinistra del disegno.
Porta il più scuro dei due gialli sopra le cime di ogni sezione di zucca. Evidenzia il fondo della bocca. Ammorbidire i pixel dell'ombra di un rosso brillante con Rosso-arancio (# ff4500).
Usare un Marrone scuro (# 3e0702) sul contorno del fondo e del lato destro della zucca. Illumina il lato superiore sinistro della linea d'arte della zucca con marroni assortiti (vedi sotto).
3. Creazione dei frame di animazione
Passo 1
Ogni passaggio nell'icona animata che stiamo creando richiederà un livello separato che contiene la modifica all'interno dell'icona. Ciò include eventuali occhi luminosi, cambiamenti nella forma della bocca o bagliore intorno alla zucca stessa.
Assicurati che i componenti della zucca siano tutti sullo stesso livello. Utilizzare il Strumento bacchetta magica (W) selezionare fuori dalla zucca e andare a Seleziona> Inversa (Maiusc-Control-I) e poi Seleziona> Modifica> Espandi e Espandere di 1 pixel.
Creare un Nuovo strato sotto l'icona della zucca in Livelli pannello. Riempi la selezione con il giallo brillante usando il Strumento di riempimento. Ho anche inserito un altro livello sotto gli altri due con il nero, in modo che l'icona della zucca si aprisse di più sullo schermo.
Passo 2
Creare un Nuovo strato e coprire le prime due file dell'occhio sinistro con pixel arancioni. Coprire l'ultima riga con 5 pixel di rosso (e la precedente riga rossa con pixel arancioni). L'occhio dovrebbe essere ora 4 pixel attraverso, 1 pixel diagonale sul lato sinistro e due pixel gialli al centro dell'occhio occhiolino.
Passaggio 3
Ci sono tre nuovi livelli di bocca che dobbiamo disegnare per creare l'animazione finale.
Fare un Nuovo strato sopra gli altri e usa il Strumento di matita disegnare tre colonne di pixel compresi 1 pixel, 3 pixel, e 2 pixel. Questo è l'angolo sinistro della bocca.
Per il centro della bocca, disegna 2 pixel a destra dell'angolo della bocca disegnato in precedenza. Inserisci 1 pixel giù dai due precedenti disegnati. Infine, disegna un quadrato di 3 pixel di 3 pixel per il centro della bocca.
Specchia l'angolo della bocca sinistra per il lato destro.
Usa l'arancione scuro per delineare gli angoli della bocca. Guarda l'immagine qui sotto per il posizionamento esatto dei pixel.
Usa il colore arancione di base per riempire la maggior parte dello spazio negativo intorno alla bocca.
Il rosso brillante che è stato posto in questa parte siederà direttamente sotto il naso della zucca.
Infine, riempi gli spazi vuoti con luci gialle.
Metti la nuova bocca sulla bocca originale. La bocca precedente dovrebbe essere completamente coperta. Nascondi questo nuovo livello per ora.
Passaggio 4
La bocca si sta rimpicciolendo e passando da un sorriso aperto a delle labbra graziose increspate (meno le labbra poiché questa è una zucca).
Ancora una volta, inizieremo con l'angolo sinistro della bocca, che è composto da 5 pixel in tre file.
Disegna un quadrato di 3 pixel di 3 pixel per il centro della bocca.
Specchia il lato sinistro della bocca per il lato destro.
Usando l'arancione scuro, disegna due linee di 4 pixel e posizionare altri pixel negli angoli della forma della bocca.
Ancora una volta, usa il rosso acceso per il fondo del naso della zucca (questo ti aiuterà a metterlo in fila) e il fondo della bocca.
Riempi lo spazio negativo con l'arancione.
Metti questo strato sopra la bocca della zucca, assicurandoti che la bocca originale non si veda attraverso. Nascondi questo nuovo livello per ora.
Passaggio 5
La bocca è ora in piena modalità kiss-blowing. Ancora una volta, crea un Nuovo strato e andiamo avanti.
L'intera bocca è composta da due file di 3 pixel e un singolo pixel al centro della riga finale.
5 pixel sono disegnati sul lato sinistro: 2 pixel verso il basso, 2 pixel in diagonale, salta uno spazio, e 1 pixel dall'angolo della bocca. Specchia questo sul lato destro e disegna 5 pixel sulla parte superiore della bocca.
Usando il rosso, disegna 3 pixel attraverso quello sarà di nuovo il fondo del naso della zucca. Disegnare 5 pixel attraverso il fondo della bocca e spargere alcuni pixel negli angoli del disegno.
Riempi l'area con l'arancione.
Posiziona la nuova bocca sulla vecchia bocca, assicurandoti che la bocca originale della zucca sia completamente coperta. Ancora una volta, nascondi questo strato nel Livelli pannello per il momento.
Passaggio 6
Per gli occhi illuminati e la bocca, sarà necessario uno strato.
Zoom in sulla faccia della zucca a 1600%, o così.
Creare un Nuovo strato e riempire gli occhi e il naso con il giallo. Allineare i lati sinistro di essi con il rosso per vedere facilmente il bordo interno delle caratteristiche facciali.
Usa marrone chiaro sul bordo sinistro degli occhi e della bocca. Utilizzare un marrone più chiaro sul bordo inferiore.
Riempi la bocca con un giallo brillante, ripetendo i passaggi precedenti per quali colori sono utilizzati all'interno del disegno.
Un colpo di zucca quando "completamente illuminato".
4. Animare la zucca
Passo 1
Apri il Sequenza temporale pannello e scegliere Crea animazione frame dal menu a discesa nel suo centro.
Per cambiare ciò che accade in ogni fotogramma, dovrai colpire Nuova cornice nelle opzioni del pannello e regolare il design nel Livelli pannello ogni volta. Notare la modifica in basso con il secondo livello della bocca visibile nel secondo fotogramma e nascosto nel primo.
Passo 2
Vedi l'immagine qui sotto per una ripartizione visiva dei frame usati nell'animazione. Ogni fase corrisponde a un livello. Ho anche analizzato cosa sta succedendo in ogni frame qui sotto:
La zucca base con tutti gli strati aggiuntivi nascosti. Il tempo è fissato a 1 secondo.
Lo strato di contorno giallo (da Sezione 3, Passaggio 1) È visibile in questo frame, ma è a 25% di opacità. Il tempo è fissato a 0,1 secondi.
Il terzo fotogramma ha lo strato di contorno giallo a 50%Opacità e lo strato di bocca da Sezione 3, Passaggio 3 è ora visibile. Il tempo è fissato a 0,1 secondi.
Lo strato di contorno giallo è a 100% di opacità. La bocca da Sezione 3, Passaggio 4 è visibile. Il tempo è fissato a 0,1 secondi.
La bocca da Sezione 3, Passaggio 5 è visibile. Il tempo è fissato a 0,1 secondi.
Lo strato occhiolino ammiccante da Sezione 3, Passaggio 2 è ora visibile. Il tempo è fissato a 0,1 secondi.
Questa cornice è identica a Frame 5. Il tempo è fissato a 0,1 secondi.
Questa cornice è identica a Frame 4. Il tempo è fissato a 0,1 secondi.
Questa cornice è identica a Frame 3 ad eccezione dello strato di contorno giallo di cui Opacità è impostato per 100%. Il tempo è fissato a 0,1 secondi.
Tutti gli strati di occhi e bocca aggiuntivi sono nascosti in questo strato. Il tempo è fissato a 0,1 secondi.
Gli occhi illuminati e lo strato della bocca sono ora visibili in questa cornice. Il tempo è fissato a 1 secondo.
Tutti gli strati di occhi e bocca aggiuntivi sono nascosti. Il livello del contorno giallo è impostato su 50%. Il tempo è fissato a 0,1 secondi.
Il livello del contorno giallo è impostato su 25%. Il tempo è fissato a 0,1 secondi.
Passaggio 3
Quando si imposta l'intervallo di tempo sui frame, è possibile selezionare più frame e modificarli contemporaneamente. Assicurati anche il tuo Opzioni del ciclo sono impostati su Per sempre.
Passaggio 4
Quando esporti il tuo file animato, vai a File> Salva come e selezionare .gif. Poiché non ci sono molti colori in questo file e non siamo troppo preoccupati per una dimensione di file di grandi dimensioni, mantieni i colori 256 e le altre impostazioni al loro valore predefinito.
Se ingrandisci il tuo file (nel caso tu lo voglia grande come la mia immagine finale), assicurati Qualità è impostato per Il vicino più prossimo quindi non c'è perdita di qualità dei pixel con bordi taglienti. Ancora, Opzioni cicliche dovrebbe essere impostato su Per sempre (a meno che tu non voglia il tuo .gif per ripetere un importo impostato per qualsiasi motivo).
Lavoro fantastico, sei passato!
Ottimo lavoro nel creare una zucca divertente e animata. Ho entrambe le mie versioni originali ingrandite di seguito in modo da poter vedere la differenza tra le dimensioni e dettagli all'interno dell'icona del pixel.
Per ulteriori tutorial su pixel art qui Tuts+, controlla questa piccola lista:
Crea una serie di icone Pixel Art per la prima colazione in Adobe Photoshop
Crea Pixel Art con una tavolozza limitata in 10 passaggi con Photoshop
Come creare un Pixel Art Sprite animato in Adobe Photoshop
Share
Cosa starai creando
Accentsconagua
