Kandi Runner crea uno Sprite per Game Vector pronto per l'animazione

Ci sono pochi progetti più divertenti che disegnare concetti di personaggi di videogiochi. I colori, i vestiti e il design complessivo hanno poche limitazioni per il concept artist. Disegneremo un personaggio vettoriale pronto per l'animazione in Adobe Illustrator e altro in questo tutorial in tre parti con i team di After Effects e Game Development su Tuts+.


Crea il gioco Kandi Runner

La nostra serie di Kandi Runner si sviluppa su tre tutorial. In questa parte, imparerai come creare lo sprite del gioco vettoriale, ma dovresti controllare anche gli altri due tutorial della serie.

  • Come animare un ciclo di camminata del personaggio di Sprite del gioco vettoriale
  • Come creare un vettore Scorrimento laterale del personaggio usando un foglio Sprite

Colpire Spazio saltare.

Tutorial Asset

Se desideri seguire questo tutorial, puoi scaricare lo schizzo.

  • sprite-sketch.zip

1. Prepara il tuo design

Il nostro sprite di gioco sarà di profilo in modo che il componente di animazione del cross-over possa contenere un ciclo di camminata. Come tale, ho abbozzato il mio progetto in Adobe Photoshop CC. A partire da linee veloci che indicano lo stile generale del personaggio e le proporzioni e termina con un disegno più scuro e inchiostrato, pronto per il trattamento di Adobe Illustrator. Si noti che le proporzioni in questo schizzo cambiano un po 'durante il tutorial. La facilità di ridimensionamento consente rapidi cambiamenti nelle dimensioni della testa e del corpo, rispetto al ridisegnarlo completamente.



2. Disegna la testa e i capelli

Passo 1

Per la testa, ho iniziato con un cerchio disegnato con il Strumento ellisse (L). La porzione di faccia inferiore è stata tracciata dallo schizzo con il Strumento penna (P). Unire entrambe le forme esploratore quando sei soddisfatto del profilo che hai creato.


Passo 2

I capelli sono fatti in sezioni grandi e colorate. Volevo che avesse dei capelli assolutamente dreadlock (quasi come una bambola di pezza). Utilizzare il Strumento Penna disegnare ogni sezione di capelli. Dieci sono disegnati in totale qui, e alla fine saranno separati e delineati individualmente così da poter essere animati. Nel frattempo, Gruppo (Control-G) i tuoi pezzi di capelli insieme.


Passaggio 3

unhide la faccia nel Livelli pannello e assicurati di essere soddisfatto del modo in cui i capelli pendono intorno alla testa, così come di non oscurare il viso, che verrà disegnato in un secondo momento.



3. Disegna la gamba e il corpo

Passo 1

Muovendosi sulle gambe e sul busto. Inizia con la coscia e il fondo del personaggio. Indossa un'armatura di qualche tipo (immaginavo che si trattasse di una sorta di gioco di puzzle d'azione: forse corre su un veicolo volante e richiede l'armatura per proteggerla), e come tale è un colore grigio-viola, piuttosto che un semplice grigio. Per ora, il corpetto del vestito è di un rosa brillante. Più tardi farò questo verde acqua. Questi tre pezzi formano il busto e la coscia, fermandosi al ginocchio.


Passo 2

Per la parte inferiore della gamba e del ginocchio, disegna un pezzo di ginocchio (come un semicerchio angolato) e segui lo schizzo per il contorno del polpaccio e della base del piede. Ho fermato la parte delle gambe nella parte superiore del piede con l'idea del costume che contiene le ghette dei vecchi tempi (pensa al fashion design degli anni '20). Il piedino inferiore è una forma separata.


Passaggio 3

Per la parte posteriore del boot / shoe, disegna un'ellisse con il Strumento ellisse, seleziona il pezzo di gamba e usa il Strumento per la creazione di forme, seleziona la parte dell'ellisse che si trova all'esterno del piede. Deseleziona ed elimina questo pezzo in più.



4. Disegna il braccio e la mano

Passo 1

Sul lato sinistro, vedrai il personaggio fino a quel momento. Ha un costume, ma ha bisogno di un collo, petto e braccio. Segui lo schizzo e disegna il collo e parte del torace. Posiziona questo dietro i pezzi del busto nel Livelli pannello.


Passo 2

Per il braccio, ho iniziato con un'ellisse (che denota la spalla) e ho aggiunto un braccio che fa rientrare il gomito. Se stai animando questo personaggio, potresti voler separare il bicipite dall'avambraccio per più movimento. Il braccio si ferma un po 'oltre il polso dove ho disegnato una forma che indica il palmo della mano.


Passaggio 3

Per la mano, ho nascosto le forme del braccio in modo che possiamo concentrarci sull'aggiungere le dita al palmo. Usando il Strumento Penna, Ho disegnato una forma rettangolare simile a un rettangolo (questa ha un lato piatto e un lato curvo, però) per il pollice. Utilizzare il Strumento rettangolo arrotondato per le altre dita. Ho calciato il mignolo in modo che la mano non sembri troppo rigida.



5. Body Edits e aggiunte

Passo 1

Prima di arrivare a delineare e ombreggiare il personaggio, concentriamoci prima su alcune modifiche e aggiunte. Seleziona i pezzi del busto e della gamba, Gruppo insieme per il momento, e allargare un po '. Vedi sotto per il confronto tra il corpo ingrandito e quello più piccolo. In questo modo, ha un grande busto e gambe più lunghe per bilanciare la sua grande (e probabilmente pesante) testa.


Passo 2

Il dorso del personaggio è un po 'piccolo e poco profondo, quindi ho tirato fuori il punto di ancoraggio più a destra rispetto alla forma originale. Inoltre, ho aggiunto una camicia con colletto alto da indossare disegnando sopra la forma del torace con una forma grigio-viola scuro, selezionando sia la forma del petto che quella della camicia, e, con il Strumento per la creazione di forme selezionando la parte non intersecante della forma della camicia. Deseleziona entrambi e cancella i pezzi in eccesso della maglietta. Posiziona la maglia sopra il segno di spunta nella Livelli pannello.


Passaggio 3

Invece di un guanto pieno, ho optato per uno che ha una linea di polso inferiore. Per fare ciò, cambia il colore del guanto attuale con il tono della pelle del tuo personaggio. Poi, Copia (Control-C) e Incolla (Control-V) la mano, allineare con quella originale e disegnare un cerchio con il Strumento ellisse. Seleziona la nuova mano e l'ellisse e Fronte meno nel esploratore.


Passaggio 4

Costruiamo un po 'di cuori. Disegna un cerchio con il Strumento ellisse e usando il Strumento di selezione diretta (A), tira il punto di ancoraggio inferiore verso il basso in modo da avere una metà del cuore. copia e Incolla la metà del cuore, e girarla su un asse verticale. Una volta allineato al centro, Unire nel esploratore.


Passaggio 5

copia e Incolla tre cuori lungo la coscia del personaggio. Questi dovrebbero essere color pelle. Aggiungi anche un cuore più piccolo e capovolto al guanto.



6. Creare i dettagli del viso

Passo 1

Per l'occhio, concentrati su quattro pezzi: ciglia superiori e ciglia inferiori, una forma a goccia bianca per il lato dell'occhio e un'elisse sottile per l'iride. Tutti sono stati disegnati con il Strumento Penna, tranne per l'iris che è stato fatto con il Strumento ellisse.

Le altre caratteristiche facciali necessarie sono un sopracciglio, il labbro superiore (entrambi blu scuro), la narice e la piega nasale (una forma) e un labbro inferiore (stesso colore della narice). Puoi andare più in dettaglio sul viso se vuoi, ma questo le dà abbastanza caratteristiche per creare un personaggio senza travolgere il design generale.


Passo 2

Per i contorni della testa e dei capelli, se stai animando questo disegno, ti consigliamo di delineare la testa e ogni pezzo di capelli separatamente. Per il bene di questa parte del tutorial, ho mostrato il processo di seguito come se si tenessero testa e capelli insieme come un unico pezzo.

Gruppo insieme i gruppi testa e capelli, copia e Incolla, Unire nel esploratore, e Allineare con il gruppo principale testa / capelli e posizionarlo dietro il gruppo testa / capelli nel Livelli pannello. Ripeti il ​​processo per il gruppo di capelli (senza testa). Ogni forma di contorno dovrebbe avere a Peso del colpo da 1 a 2 punti.


Passaggio 3

Per l'ombra proiettata dalla sua enorme pettinatura, disegna una forma che segue il contorno del suo viso e si estende tra il ponte del naso e il lato del viso. Seleziona la testa e la forma dell'ombra e usa il Strumento per la creazione di forme, seleziona la porzione della forma d'ombra che non si interseca con la testa. Deseleziona entrambi ed elimina la forma non intersecante. Posiziona l'ombra sopra la testa ma sotto i lineamenti del viso Livelli.



7. Dettagli testa e capelli

Passo 1

Per l'orecchio, è una sorta di forma a "D" maiuscola. L'interno dell'orecchio può essere una forma a "C", "S" o uno strano scarabocchio come quello che ho disegnato. Gruppo li uniscono e lo posizionano sotto i capelli, sopra la testa e fronteggiano i pezzi d'ombra.


Passo 2

Prima di entrare in ombra i capelli, delineare ogni sezione di capelli. È possibile aggiungere un tratto leggermente ponderato a ciascuna sezione o seguire il processo dalla sezione sei, passaggio due per ogni sezione di capelli.


Passaggio 3

Per le ombre sui capelli, ricolorare ogni sezione di capelli come una versione più scura di quella tonalità. Quindi, usando il Strumento Penna, disegnare forme di evidenziazione sui bordi esterni di ogni ciocca di capelli. Elimina con Strumento per la creazione di forme, come fatto in precedenza.



8. Aggiungi Body Shadows

Passo 1

Poiché la maggior parte del torace non viene più mostrata e ci sono molti capelli intorno al collo, ricolorare il pezzo del torace all'ombra usata precedentemente. Disegna una forma sul lato destro della spalla. Useremo questa ombra come guida per le altre ombre del corpo in termini di posizione. Seleziona la spalla e la forma dell'ombra, usa il Strumento per la creazione di forme per selezionare la parte non intersecante della forma d'ombra, deselezionala e cancella per un'ombra pulita sulla spalla. Posiziona la forma dell'ombra sotto i vestiti nel Livelli pannello.


Passo 2

L'ombra sul braccio segue la stessa linea di quella sulla spalla e le tacche al gomito. Se il tuo braccio è diviso in due gruppi, puoi separare i due pezzi selezionandoli con il Strumento per la creazione di forme e le parti del braccio principale selezionate. Segui gli stessi passaggi per le ombre sul guanto.


Passaggio 3

Ho aggiunto alcune strisce sulla parte superiore della manica con il Strumento Penna impostato come a Peso del colpo di 0,25pt. Espandere ogni striscia in Oggetto, e cancellare le parti delle strisce che si sovrappongono alla parte superiore della manica e la linea disegnata sulla manica con il Strumento per la creazione di forme.


Passaggio 4

L'ombra sul busto è di un grigio porpora scuro con il Opacità a 40%. Le forme evidenziate sono state aggiunte anche ai lati sinistro del busto. Dato che questo personaggio è cel shaded, non vengono utilizzati gradienti, sebbene se desideri un design più complesso, provaci!



9. Ombre sulla parte inferiore del corpo

Passo 1

Continua a disegnare forme d'ombra sulla parte inferiore del corpo. Inizia con la coscia (le altre parti del corpo sono state nascoste nel Livelli pannello) e seguire la curva della gamba. Disegna forme di ombre trasparenti per ogni cuore. Elimina le parti non intersecanti dell'ombra con il Strumento per la creazione di forme. Aggiungi contorni anche per ogni cuore.


Passo 2

Per la parte inferiore della gamba, volevo aggiungere brillanti ghette rosa. La forma spunta nella parte posteriore e ha un grande arco drammatico verso la parte anteriore del piede. Elimina la parte non intersecante dalla parte anteriore del piedino / gamba (lascia quella sul retro, poiché fa parte del disegno). Aggiungi alcune forme di dardo rosa scuro per un look pieghettato sulle ghette. Disegna ombre e luci sulla parte inferiore della gamba, simili a quelle della coscia e del busto.


Passaggio 3

Dato che questo sarà animato, devo aggiungere una gamba e un braccio addizionali. copia e Incolla il gruppo di bracci e il gruppo di gambe. Elimina i dettagli, le ombre e le luci della manica e ricolora tutto con i colori dell'ombra.



10. Creare una mano aggiuntiva

Passo 1

Per una mano in più, questa è chiusa a pugno, copia e Incolla la prima mano e Separa i componenti. Spostare la parte del guanto sul lato e rimodellare il pollice per essere un piccolo dosso sul lato sinistro. Muovi le dita nel palmo.


Passo 2

Unire la nuova mano dentro esploratore, e creare un nuovo guanto nello stesso modo in cui è stato disegnato il primo. Aggiungi un cuore con l'ombra (ho usato lo stesso, ridimensionato per meno spazio), la linea che indica la fine del guanto e l'ombra che collega all'ombra sulla mano. Aggiungi un contorno per abbinare quello dal braccio.


Passaggio 3

Per la mano dall'altra parte, copia e Incolla il pugno, eliminare i dettagli del guanto e ricolorare in un verde acqua scuro. Usando il Strumento rettangolo arrotondato disegna piccole dita e un pollice con a Peso della corsa 0,75pt nello stesso colore scuro usato per altri contorni.



Ora sei pronto per l'azione!

Alla fine lo sprite è pronto per andare. Ogni gruppo che si sposta (o può essere spostato) durante l'animazione è raggruppato ed etichettato per l'organizzazione in Livelli pannello. Ho aggiunto uno sfondo e un contorno aggiuntivo su ciascun componente per l'immagine finale, ma non sarà presente per i prossimi due tutorial. Spero che ti sia divertito a disegnare questo gioco cel shaded con me e continuare con le prossime due sezioni di questo progetto.