Advertisement
  1. Design & Illustration
  2. Animation
Design

Come creare attività di animazione in Adobe Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Final product image
What You'll Be Creating

Introduzione

Benvenuti al mio tutorial su come creare attività di animazione in Adobe Photoshop. Questo tutorial non vi insegnerà gli articoli "how to draw" in particolare. È più interessato a come pensare gli elementi per l'animazione. Di cosa ha bisogno il mio animatore e perché? Vedremo che cosa è titolo sicuro e l'importanza della corretta etichettatura.

asset

La nostra storia per animare

Per questo tutorial userò Little Miss Muffet come la nostra storia.

Little Miss Muffet
Seduto su un POUFFE,Mangiare della cagliata e siero;

Lungo è venuto un ragno,
Chi è seduto accanto a lei
E spaventato Miss Muffet distanza.

Ci sarà la creazione di attività

Per facilitare la creazione di asset, faremo un elenco di ciò che abbiamo bisogno di creare. Questo ci aiuterà anche di impostare in anticipo il nostro documento di Photoshop.

Little Miss Muffet

  • A piedi il profilo
  • Eseguire il profilo
  • Seduti
  • Testa
  • Faccia: mangiare, occhi lampeggiano
  • Armi
  • Gambe
  • Corpo
  • Mani
  • Braccia: senza mani

Pouffe

  • Grande cuscino

Cagliata

  • Ciotola
  • Cucchiaio
  • Cottage cheese

Ragno: Laterale e frontale su

  • Gambe x 6; Braccia x2
  • Cappello a cilindro
  • Canna
  • Occhi
  • Mandibole
  • Addome
  • Parte superiore del corpo

Ambiente

  • Albero
  • Hill
  • sole
  • Nuvola
  • Erba

Installazione di PSD: Storyboard

Per i nostri lo storyboard, davvero è possibile impostare il documento di qualsiasi dimensione che ti piace. Tuttavia, proprio per mantenere le cose in proporzione, io sono andato per 1920 x 1200 px a 72 dpi, con la modalità di colore impostata su RGB (Monitor a colori)

Storyboard Document Setup

Ecco come ho impostato lo storyboard. Ogni riga della rima è stato dato un proprio pannello. Per questo non abbiamo bisogno di essere davvero dettagliata — pensare ad esso come le miniature. Abbiamo solo bisogno di una idea di base dell'azione, che può essere indicato con le frecce e commenti se necessario. Questo è utile per l'animatore di avere così sanno che cosa deve succedere. Questi telai è utilizzabile anche per capire quanto tempo ogni azione deve essere sullo schermo per e per assicurarsi che corrisponda quando impostato su audio.

Blank Storyboard

Ecco il mio sgrossato fuori dello storyboard e l'animatore, Dave Bode, è soddisfatto di come sta cercando, quindi io posso iniziare a creare il patrimonio.

Storyboard

Installazione di PSD: beni

Perché per questo non cambia la scena, ci sarà la creazione tutti i .psds nello stesso documento. After Effects è come un Photoshop basati sul tempo, quindi utilizza strati e gruppi nello stesso modo. Per le animazioni più complesse sarebbe opportuno creare personaggi, ambienti e/o beni in documenti separati.

Per questa animazione Dave vi dà la dimensione del documento sia 3840 x 2160 px a 72 dpi, che è risoluzione 4K. Questo è così da poter avere una piccola stanza di gioco quando si tratta di zoom e pentole se necessario. Creare un nuovo documento selezionando File > New.

Assets Document Setup

Nel pannello livelli ho creato gruppi per posizionare i nostri beni in. Gruppi possono essere creati facendo clic sull'icona della cartella nella parte inferiore del pannello livelli. In questo è possibile trascinare o creare nuovi livelli. Questo mantiene tutto ordinato.

Come bonus aggiuntivo, è possibile assegnare un colore al gruppo facendo clic destro su di esso e selezionare un colore. Questo cambierà automaticamente tutti i nomi di Layer all'interno di tale gruppo per quel colore. È possibile modificare il colore degli strati all'interno dei gruppi facendo clic con il pulsante destro del mouse su di essi.

Organizzata con strati è un grande risparmio di tempo ed è particolarmente importante quando hai una scadenza stretta, è tardivo la sera e tu hai appena bevuto l'ultimo del caffè.

Layers Setup

L'elemento più complesso nel racconto di Miss Muffet è il ragno, principalmente dovuto il suo numero degli arti. Ecco come ho organizzato gli strati in preparazione per la creazione di asset. Questo è il nostro punto di partenza, ma possiamo aggiungere più strati in futuro per le espressioni supplementare, puntelli e così via.

C'è una buona possibilità che alcuni degli strati può essere cambiato, spostato, aggiornato, duplicati e rimossi, quindi non prendere questo modello come verbatim. È solo per dare un'idea di come le cose possono essere istituito. Durante la creazione di attività, è facile perdere le cose apparentemente semplici, la propria pianificazione oppure dal vostro direttore client o (arte), quindi aspettatevi cambiamenti!

Spider Layers Setup

Titolo di sicurezza: Cos'è e perché ne abbiamo bisogno?

Che cosa è titolo sicuro? In tutto il mondo persone utilizzano periferiche che sono di diversi formati e risoluzioni, e dobbiamo tenere conto per il minimo comune denominatore. Maggior parte delle persone sarà la visualizzazione di questa animazione su uno schermo 16:9, ma qualcuno là fuori può ancora avere un monitor 4:3, quindi abbiamo bisogno di assicurarsi che nessuna informazione vitale è tagliata sui bordi. Di seguito è un esempio di titolo limiti sicuri.

4K Title Safe

In questo esempio l'area blu sarà visibili su tutti i dispositivi, e l'area viola è praticamente il limite di cui dovrebbe accadere qualsiasi azione. Abbiamo bisogno di tenere a mente per la nostra creazione di asset, così, quando lavoro su un'animazione, assicurarsi di avere i limiti sicuri di titolo dal tuo animatore.

La croce sul quadrato blu indica il centro della scena, e le linee perpendicolari alla periferia indicano i punti a metà della scena.

4k Title Safe Highlighted Safe Zones

Successivo quello che farò è selezionare questa immagine e inserirla nel mio psd. Questo può variare a seconda di come il tuo titolo sicuro viene fornito all'utente. Un modo rapido per ottenere questa immagine è di avere una schermata di stampa da After Effects di una scena di 4K con titolo sicuro applicata. Questo potrebbe non essere più pulito e frizzante come nell'esempio qui sopra, quindi se ti senti che stai per fare un sacco di animazione lavorare in Photoshop può essere la pena di ripulire le linee.

Il nostro processo di

Iniziamo con schizzi di tutti gli elementi. Perché facciamo questo? Si tratta di modo che possiamo ottenere giusto le dimensioni relative. Cose come: "È il POUFFE abbastanza grande per due persone per sedersi?" "Quanto è grande il sole ha bisogno di essere in cielo?" "C'è abbastanza spazio per l'azione accada?"

Per ogni set di elementi, vi mostrerà il processo dalla fase di schizzo alla fase completa. Cominciamo con l'impostazione della scena: The Background.

Iniziate con lo sfondo

Prima di tutto io ho sgrossato in background con il POUFFE, Little Miss Muffet e il ragno nella posa seduta per assicurarsi che tutto si adatta. Ogni elemento dello schizzo è su un livello separato per comodità.

Scene Rough

Successivamente spegnere gli strati di carattere e POUFFE e trattare solo con gli elementi di sfondo.

Background sketch

Ora che abbiamo la nostra scena di base abbozzato, abbiamo bisogno di capire che cosa abbiamo bisogno. La nuvola si sposta, ma non ci sarà nessun cambiamento di forma. Tuttavia, penso che sarebbe interessante avere il sole raggi animano, quindi penso che avremo due serie di raggi che Dave può sbiadire o tagliare tra.

Con alcuni progetti di animazione ci sarebbe probabilmente cose come modello di fogli e colori pre-organizzati con il cliente, ma in questo caso come è per divertimento sono solo la progettazione al volo!

Qui ho spento i livelli non necessari e abbassato l'opacità dello sketch. Impostare la cartella di schizzo per moltiplicare in stili di livello quindi è più facile da vedere.

Background Elements

Ho deciso di scalare il sole verso il basso come è troppo grande. Faccio questo selezionando il sole oltre i due raggi strati e premendo CTRL-T per trasformazione. Abbiamo bisogno di assicurarsi che gli elementi di scena non sopraffare l'azione.

Background - Smaller Sun

Ecco come sono stati organizzati gli strati di ambiente.

Environment Layers

Pouffe

Il POUFFE è una cosa abbastanza semplice per aggiungere alla scena, ma è anche molto importante, come il ragno e Little Miss Muffet devono essere in grado di sedersi su di esso. Un POUFFE è come un poggiapiedi o un grande cuscino.

Qui di seguito abbiamo la scena abbozzata con il POUFFE centralmente, come questo è dove la maggior parte dell'azione deve avvenire.

Tuffet Rough

Durante la creazione di scene, pianifica sempre li fuori. Caratteri devono essere definite in relazione al loro ambiente e l'altro. Come potete vedere, ho incluso anche un grezzo di ciotola per cagliata e un cucchiaio per un riferimento a una sola fermata per noi. Un po' di pianificazione possono risparmiare un sacco di lavoro più tardi. Qui abbiamo elaborato il POUFFE e usando uno schizzo dei personaggi possiamo controllare che essi si sia adatta comodamente. Questo può essere un'immagine utile per inviare al tuo animatore.

Tuffet Rough Over Background With Characters

Ecco come i beni saranno forniti al nostro animatore. Ho disegnato qualche erba sovrapposto per mettere a terra il POUFFE, ma ho mantenuto questo, su un livello separato, nel caso in cui l'animatore si augura di fare alcuni effetti su di esso in After Effects.

.Tuffet Layers

Ragno più asset: risparmio di tempo trucco!

Quando si tratta di cose come ragni ti ottenere elementi ripetuti, così perché ogni uno disegna a mano? Ecco un modo facile per ottenere più funzionalità in un batter d'occhi porcini otto!

Occhi

Passo 1

Ora i ragni possono avere diversi numeri di occhi, e non vogliamo disegnare ognuno individualmente. Su un nuovo strato di vernice fuori un bulbo oculare.

One Eye

Passo 2

Tenendo premuto Alt e avendo la strumento sposta (V) selezionato, trascinare l'occhio fuori altre sette volte e posizionare tutti gli occhi sul viso.

Eyes

Passo 3

Su un nuovo livello, dipingere una palpebra chiusa sopra uno degli occhi. Ripetere il processo di copia incolla sulle altre sette occhi.

Eyes with One Lid

Passo 4

Disporre i livelli in modo che i coperchi corrispondenti sedersi sopra i bulbi oculari. Nascondere i livelli coperchio chiuso e selezionare ogni set di occhi e coperchi. Successivamente premere CTRL-T per scalarle e ripetere il processo con gli altri set di occhi e coperchi.

Eye Balls Scaled

Si dovrebbe finire con un set come questo. Se lo strato di coperchi si accende e si spegne, sembra come se esso è occhiolino a voi!

Eye Lids - Scaled

Braccia e gambe

Passo 1

A meno che non intenzione di essere l'animazione un millepiedi, signor Spider sarà probabilmente un esempio del maggior parte dei beni di gamba che sarà necessario creare. Per fortuna le gambe di ragno sono abbastanza uniformi, così possiamo salvarci qualche tempo.

Qui di seguito sono nostri roughs ragno: il lato davanti e su. Grazie al design semplice possiamo utilizzare le forme di gamba per le viste frontali e laterali. Avere a disposizione il vostro modello foglio roughs per questa sezione.

Spider Roughs B

Passo 2

Disegnare le tre sezioni della gamba: coscia, polpaccio e del piede. Ciascuno su un nuovo livello farò così che Dave può animare queste sezioni in modo indipendente. Quando disegno le tre sezioni, farò in modo che si sovrappongano leggermente. Egli può scegliere di utilizzare lo strumento Marionetta in After Effects, così egli può unire le sezioni tre gamba insieme. Nella mia esperienza è meglio dare le opzioni di animatore!


Leg Sections

Passo 3

Una volta che hai dipinto il tuo tre sezioni della gamba, selezionare la coscia, polpaccio e del piede e copiarli un ulteriore tre volte. È possibile farlo selezionando i tre strati tenendo premuto Shift e trascinandoli sull'icona del nuovo livello nella parte inferiore del pannello livelli, che è una piazza con un angolo ripiegato.

Painted Copied Legs

Passo 4

Selezionare due gambe e utilizzando la trasformazione, che è Control-T, capovolgerli orizzontalmente andando su Modifica > Trasforma > Rifletti in orizzontale. Gruppo individualmente ogni gamba e dare loro un nome utile come copia di gamba 2.


Passo 5

Ci ripeteremo il processo di creazione di tre sezioni per le braccia: parte superiore del braccio, avambraccio e mano. Ricordate quando la pittura le sezioni per consentire una piccola sovrapposizione.


Passo 6

Qui ci sono le risorse completate anteriore-il ragno. È in questo pseudo T-posa per convenienza e sono sicuro di Dave sarà più facile per iniziare l'animazione con lui strutturato come questo.

Spider Front On

Successivamente copiare tutti gli strati di gambe e braccia, incollarli nel lato-il gruppo e riorganizzarli come richiesto.

Organizzazione di Asset di ragno: Spider sul fronte

Qui nasce la sezione di organizzazione non-creativo, che, anche se non estremamente divertente, è molto necessaria. Vi ringrazio successiva per controllare che tutto sia in ordine. Qui è una ripartizione del patrimonio anteriore-il ragno.

La canna

La canna è uno di questi asset meravigliosi dove possiamo solo copia e incolla per le viste frontali e laterali. Appena abbiamo potuto come un singolo cespite, ma come i ragni sulla parte anteriore e lato-su sono nei loro gruppi, ciò significa che il vostro animatore non dovrà cercare le singole sezioni.

Spider Cane A

Le braccia

Organizzare tutte le sezioni del braccio in cartelle chiaramente definite. Esso può essere utile colorare codificarle. Garantire le mani e le braccia inferiori e superiori per ogni gruppo sono etichettati.

Spider Arms A

Le gambe

Come prima, questo è un compito di etichettatura e di qui come ho deposto questo per Dave.

Spider Legs A

Gli occhi

Gli occhi! Per questo, assicurarsi che l'occhio chiuso corretta corrisponde con l'occhio aperto corretto che dovrebbe essere direttamente sotto di esso.

Spider Eyes A

La testa

Questo è, per fortuna, uno più semplice per organizzare! Qui abbiamo il capo base e mandibole del ragno (se si ha familiarità con l'anatomia di aracnide, questi sono i bit intorno alla bocca del ragno). Ho questi separatamente così che Dave possibile animarli se lo desidera.

Spider Head A

il corpo

Un'altra sezione semplice! Qui abbiamo l'addome (il barbone del ragno) e la parte superiore del corpo. Entrambi sono su livelli separati per potenziali finalità di animazione. Tenere le parti etichettati!

Spider Body A

Organizzazione di Asset di ragno: profilo

Poiché la maggior parte delle attività sono copie di ogni altro, le uniche differenze tra il ragno di profilo e il frontale sono:

  • Le pupille degli occhi sono state spostate verso la parte anteriore dei bulbi oculari.
  • Ci sono solo cinque occhi, come alcuni non sarebbe stato visto da questa angolazione.
  • Il posizionamento dell'anatomia è stato spostato.

Ho incluso afferra schermo del setup strato per la vostra comodità. Ricordarsi di tenere tutto chiaramente etichettati!

La canna

Spider Cane B

Le braccia

Spider Arms B

La testa

Spider Head B

Gli occhi

Questo è il solo grande cambiamento per il ragno, dove l'alunno è stato spostato verso la parte anteriore del bulbo oculare in tutti i casi e piuttosto che otto occhi ci sono solo cinque.

Spider Eyes B

Le gambe

Spider Legs B

Infine: Il corpo

Spider Body B

Qui abbiamo il nostro patrimonio di ragno disposti in un modo chiaro per Dave!

Spiders Complete

Ricordate: Etichettatura corretta è molto importante.

Cagliata e siero

Siero di latte-Ehi! La sezione di ragno è fatto e ora abbiamo solo pranzo di Little Miss Muffet da fare. Questo è stato suddiviso in ciotola, cagliata, un cucchiaio e alcuni cagliata sul cucchiaio.

"Perché?" si chiede. Perché ho pensato che potrebbe essere bello se quando Miss Muffet si spaventa, il contenuto della sua ciotola va volare!

Gruppo di loro e poi etichetta come prima.

Curds and Whey Assets

Lato-su beni di Little Miss Muffet

Ora che sono stati creati gli elementi semplici, abbiamo le attività più complicate di fare attività per cose che si muovono. Per Little Miss Muffet avremo bisogno di due lotti di elementi: profilo e sulla parte anteriore. La parte anteriore è per suo soggiorno pranzo, e il lato è per la sua corsa fuori dalla macchina fotografica.

Miss M. è un po' più complicato rispetto il ragno nel senso che ha bisogno di vestiti e anatomia diversa e così avrà un aspetto diverso in profilo ad essere dritto. Qui è una ripartizione di tutte le parti che ho creato.

Little Miss Muffet - Starting pose

Ecco come l'incantevole Little Miss Muffet Guarda tutte dipinte fino. Crescono così in fretta! * sniff *

Little Miss Muffet - Assets Together

Abbigliamento

Qui sono le parti principali del suo abbigliamento, fatta eccezione per le scarpe e le maniche. Per comodità ho conservato le maniche con le braccia e le scarpe con le gambe.

Bib
Skirt and Top Layers

Testa ed espressioni

Qui ci sono le sue espressioni di lato, che sono praticamente solo puro terrore.

Head and Expressions

Armi

Qui piuttosto semplice. Ho dipinto il braccio dritto per rappresentare la paura pura.

Left Arm
Right Arm

Gambe

La maggior parte della gamba sarà nascosto dalla gonna, ma io ho dato Dave alcuni extra nel caso in cui.

Left Leg
Right Leg

Capelli

Ho tenuto i capelli separati così che quando lei corre che Dave può animare si trascinava dietro di lei!

Pigtails - Side

Faccia-su beni di Little Miss Muffet

Bocca e capelli

Per mantenere questa davvero espressivo ho creato una varietà di forme bocca e labbro così Dave può animare il suo mangiare e scioccato. I capelli sono lì, come le parti della bocca sono in cima alla pila di strati e i capelli deve essere sopra tutto.

Moth and Hair Layers

Occhi

Molto come il ragno, Miss Muffet ha gli occhi aperti e chiusi, ma con l'aggiunta delle sopracciglia per l'espressione.

Eyes Face On

Corpo e Base viso

Io ho raggruppate suo corpo e abbigliamento insieme qui come non si muove molto mentre lei è seduto. Se si nota lo strato gonna seduto, c'è una maschera che ho incluso per consentire le gambe mostrare attraverso, e se la gonna intera ha bisogno di Dave è lì per lui.

Face Base and Body

Armi

Le braccia sono come prima, anche se sentivo che avevamo bisogno di mani per proprio conto quando tiene la ciotola e cucchiaio.

Left Arm

Right Arm

Ho aggiunto le braccia senza mani in una cartella separata per l'animazione con le mani.

Arms - No Hands

Gambe

Gambe semplice che possono essere utilizzate mentre si è seduti o in piedi.

Left Leg - Front On

Right Leg - Front On

Codini

Come con l'esecuzione di profilo, ho messo le sue trecce come i propri pezzi da utilizzare come un altro strumento emozionale.

Pigtails - Front On

Che riassume i nostri elementi di base. Accanto a tweak i beni così sembrano altrettanto bravi a essi eventualmente possono!

Ultimi ritocchi

Abbiamo anche bisogno di terra Little Miss Muffet e il ragno, così intenzione di creare uno strato di erba per i piedi dei personaggi si muovono dietro.

Passo 1

Su un nuovo livello, disegnare una linea approssimativa dove vorresti l'erba per andare. Fare questo in un evidente contrasto di colore.

Grass Line

Passo 2

Iniziare a lame di pittura di erba lungo la linea con un pennello di vostra scelta.

Lower Opacity Background

Passo 3

Una volta che hai dipinto lungo tutta la linea, è possibile copiare il livello premendo CTRL-C e quindi Incolla (CTRL-V). Poi trasformare (Control-T) e manualmente capovolgere e ruotare l'erba per renderlo un po' più rigoglioso.

Draw in Grass - Transform

Passo 4

Successivamente bloccare la trasparenza del livello premendo l'icona piccola scacchiera accanto al blocco il pannello livelli. Aggiungere in una varietà di verdure per dare varietà. Sbloccare la trasparenza e prendere una morbida gomma (E) e ammorbidire il bordo della base dell'erba.

Grass over Characters feet

Passo 5

I duplicare gli strati di erba e poi capovolgere, trasformare e warp per farli leggermente diverso. Sull'erba piu vicino alla webcam, mosso l'erba con sfocatura gaussiana per dare l'illusione della profondità. Sfocatura gaussiana può essere trovata andando a filtro > Sfocatura > Controllo sfocatura. Ho sfocato l'orizzonte dell'erba nella cartella ambiente leggermente solo per dare un po di profondità, utilizzando lo stesso metodo di sfocatura gaussiana.

Qui ho cambiato a Little Miss Muffet per assicurarsi che si guarda bene con entrambi i personaggi.

Blurred Foreground Grass

Passo 6

Sono davvero soddisfatto di come l'aspetto di erba, così appiattisco otto erba strati in quattro strati di semplice erba e denominarli conseguenza.

Grass Layers

Crediti

Dave si occuperà dei crediti così ho semplicemente messo qualche testo in psd per salvarlo ora. Il carattere che sto usando è Futura Handwritter.

Per questo ho creato una schermata del titolo, credito di Dave e mio credito. È possibile farlo semplicemente selezionando lo strumento di tipo orizzontale (T), selezionare il tipo di carattere di scelta e digitare quello che ti serve su ogni livello. Allineare il testo al centro dello schermo premendo CTRL-T per trasformazione e allineando il mirino del testo con il puntatore a croce del titolo 4K sicuro.

Title Screen

After Effects Credit

Animation Assets Credit

Text Layers

Fase finale

Il nostro passo finale è di controllare tutti gli strati sono denominati e non ci sono nessun layer che non dovrebbe essere lì, ad es. cardatura, livelli vuoti, tavolozze di colori.

Salvare il. PSD in una cartella come "Attività di animazione di Dave". In questa cartella posizionare tutto che il vostro animatore avrà bisogno, come ad esempio lo storyboard, la sceneggiatura, una voce fuori campo (se si sta fornendo e) e i tipi di carattere (che può essere distribuito e dispone dei diritti per). Se non, rasterizzare qualsiasi livelli di testo. Successivamente consegnare tale cartella al tuo animatore tramite FTP, USB drive o di rete e quindi nascondere!

Conclusione

Spero che vi siate divertiti imparando come creare attività di animazione in Adobe Photoshop. Una volta che avete il lato di organizzazione di questo inchiodato, si può lasciare tua creatività andare selvaggio! Non vedo l'ora di vedere ciò che Dave Bode crea con miei elementi!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.