Share
Vad du ska skapaVälkommen till min handledning om hur man skapar animationsalternativ i Adobe Photoshop. Denna handledning kommer inte att lära dig "hur man tecknar" artiklar specifikt. Det är mer oroad över hur man tänker på elementen för animering. Vad behöver min animatör och varför? Vi kommer att täcka vilken avdelningssäkerhet som är och betydelsen av korrekt märkning.
För denna handledning använder jag Little Miss Muffet som vår historia.
Little Miss Muffet
Lör på en tuffet,
Äta av ostmassa och vassla;
Längs kom en spindel,
Vem satte sig bredvid henne
Och skrämde Miss Muffet bort.
För att göra tillgångsskapandet enkelt, kommer vi att göra en lista över vad vi behöver skapa. Detta hjälper oss också att ställa in vårt Photoshop-dokument i förväg.
För vår storyboarding kan du verkligen skapa dokumentet till vilken storlek du vill. Men för att hålla sakerna i proportion, har jag gått för 1920 x 1200 px vid 72 dpi, med Färg läge satt till RGB (Monitor Color)
Så här har jag satt upp storyboardet. Varje linje i rimet har fått sin egen panel. För detta behöver vi inte det vara riktigt detaljerat, tänk på det som miniatyrbilder. Vi behöver bara en grundläggande idé om åtgärden, som kan visas med pilar och kommentarer om det behövs. Det här är användbart för animatören att ha så de vet vad som måste hända. Dessa ramar kan också användas för att ta reda på hur länge varje åtgärd måste vara på skärmen och för att säkerställa att den matchar när den är inställd på ljud.
Här är min grovmade storyboard, och animatören Dave Bode är nöjd med hur den ser ut, så jag kan börja skapa tillgångarna.
Därför ändras inte scenen, vi skapar alla .psds i samma dokument. After Effects är som en tidsbaserad Photoshop, så det använder lag och grupper på samma sätt. För mer komplexa animeringar är det lämpligt att skapa tecken, tillgångar och / eller miljöer i separata dokument.
För den här animationen vill Dave att dokumentstorleken är 3840 x 2160 px vid 72 dpi, vilket är 4K upplösning. Det här är så att han kan ha ett litet lekrum när det gäller zooms och kokkärl om det behövs. Jag skapar en Nytt dokument genom att gå till Fil> Ny.
I Skikten panelen jag har skapat grupper att placera våra tillgångar i. grupper kan skapas genom att klicka på mappikonen längst ner på sidan Skikten panel. Här kan du dra in eller skapa Nya lager. Detta håller allt snyggt.
Som en extra bonus kan du tilldela en färg till gruppen genom att högerklicka på den och välja en färg. Detta ändrar automatiskt alla lagnamnen i den gruppen till den färgen. Du kan ändra färgen på lagren i grupperna genom att högerklicka på dem.
Att vara organiserad med lager är en bra tidsbesparare och är särskilt viktig när du har en tight deadline, det är sent på kvällen och du har bara druckit det sista av kaffet.
Det mest komplexa elementet i sagan om Fröken Muffet är spindeln, främst på grund av hans antal lemmar. Så här har jag organiserat lagren i förberedelse för att skapa tillgångar. Det här är vår utgångspunkt, men vi kan lägga till fler lager i framtiden för extra uttryck, rekvisita och så vidare.
Det finns en mycket bra chans att några av lagren kan ändras, flyttas, uppdateras, dupliceras och tas bort, så ta inte den här mallen som ordentlig. Det är bara för att ge en uppfattning om hur saker kan ställas in. När du skapar tillgångar är det lätt att sakna till synes enkla saker, antingen genom egen planering eller från din klient eller (art) regissör, så förvänta dig ändringar!
Vad är titelsäker? Över hela världen använder människor enheter som har olika proportioner och resolutioner, och vi måste redovisa den lägsta gemensamma nämnaren. De flesta kommer att titta på den här animationen på en 16: 9-skärm, men någon där ute kan fortfarande ha en 4: 3-bildskärm, så vi måste se till att ingen viktig information skärs på kanterna. Nedan är ett exempel på rubriken säkra gränser.
I det här exemplet kommer det blå området att ses på alla enheter, och det lila området är ganska mycket gränsen för var någon åtgärd ska hända. Vi måste hålla detta i åtanke för vår tillgångsskapande, så när du arbetar med en animering, se till att du har rubriken säkra gränser från din animatör.
Korset på den blå torget indikerar scenens mittpunkt och de vinkelräta linjerna på periferin indikerar scenens halvvägspunkter.
Nästa vad jag ska göra är att välja den här bilden och placera den i min psd. Detta varierar beroende på hur din titel är säker för dig. Ett snabbt sätt att få denna bild är att ha en utskriftsskärm från After Effects av en 4K-scen med titelsäker tillämpad. Det här kanske inte är så rent och skarpt som ovanstående exempel, så om du känner att du ska göra mycket animationsarbete i Photoshop kan det vara värt att städa upp raderna.
Vi börjar med grova skisser av alla element. Varför gör vi det här? Det här är så att vi kan få de relativa storlekarna rätt. Saker som: "Är tuffet tillräckligt stor för att två ska sitta på?" "Hur stor behöver solen vara i himlen?" "Finns det tillräckligt med plats för åtgärden att hända?"
För varje uppsättning av element kommer jag att visa dig processen från skisssteget till det fullständiga tillgångssteget. Låt oss börja med scenens inställning: Bakgrunden.
Först och främst har jag grävt i bakgrunden med tuffet, Little Miss Muffet och Spider i sittande pose för att se till att allt passar. Varje del av skissen finns på ett separat lager för enkelhets skull.
Därefter stänger jag av karaktären och tuffet-lagren och handlar bara om bakgrundselementen.
Nu när vi har vår grundläggande scen grovt, måste vi uträtta vad vi behöver. Molnet kommer att flytta, men det kommer inte att bli några formulärändringar. Men jag tror att det skulle vara intressant att få solstrålarna att animera, så jag tror att vi kommer att ha två uppsättningar av strålar som Dave kan blekna eller skära mellan.
Med några animationsprojekt skulle det förmodligen vara saker som modellark och färger som är förhandlade med kunden, men i det här fallet är det kul att jag bara designar på flyg!
Här har jag avstängt några onödiga lager och sänkt skissens opacitet. Ställ in skissmappen till Multiplicera i Lager stilar så det är lättare att se.
Jag har bestämt mig för att skala ner solen eftersom den är för stor. Det gör jag genom att välja solen plus de två strålskikten och trycka på Kontroll-T till Omvandla. Vi måste se till att scenelementen inte övermanar åtgärden.
Så här har miljölagren organiserats.
Tuffet är en ganska enkel sak att lägga till på scenen, men det är också ganska viktigt, eftersom både Little Miss Muffet och Spider måste kunna sitta på den. En tuffet är som en fotpall eller en stor kudde.
Nedan har vi scenen skisserat med tuffet centralt, eftersom det är här som majoriteten av åtgärden behöver ske.
Planera dem alltid när du skapar scener. Tecken måste dimensioneras i förhållande till omgivningen och varandra. Som du kan se har jag också inkluderat en grov skål för ostmassa och en sked för en enda stoppreferens för oss. Lite planering kan spara mycket arbete senare. Här har vi ritat tuffet och med en grov skiss av tecknen kan vi kontrollera att de båda kommer att passa bekvämt. Detta kan vara en användbar bild att skicka till din animator.
Här är hur tillgångarna kommer att tillhandahållas till vår animator. Jag har dragit lite överlappande gräs för att mala tuffet, men jag har hållit det på ett separat lager om animatören vill göra några effekter på det i After Effects.
.
När det gäller saker som spindlar kommer du att få repeterande element, varför varför ritar var och en för hand? Här är ett enkelt sätt att få flera funktioner i blinkningen av åtta beady ögon!
Nu kan spindlar ha varierande antal ögon, och vi vill inte dra varje enskild individ. På en Nytt lager måla ut en ögonglob.
Genom att hålla Alt och med Flytta verktyget (V) vald, dra ögat ut ytterligare sju gånger och placera alla ögon på ansiktet.
På en Nytt lager, måla ett slutet ögonlock över en av ögonen. Upprepa kopieringspasta processen över de övriga sju ögonen.
Ordna lagren så att motsvarande lock sitter ovanför ögonbollarna. Dölj de stängda lockskikten och välj varje uppsättning ögon och lock. Tryck sedan på Kontroll-T att skala dem, och upprepa processen med andra uppsättningar av ögon och lock.
Du borde sluta med en uppsättning så här. Om du byter låsskiktet på och av ser det ut som om det blinkar på dig!
Om du inte kommer att animera en millipeder, kommer Mr Spider förmodligen att vara ett exempel på de mest benaktigheter du behöver skapa. Lyckligtvis är spindelben ganska likformiga, så vi kan spara oss en stund.
Nedan finns våra spindelbomber: fram och bak på. På grund av den enkla konstruktionen kan vi använda benformerna för fram- och sidovyer. Få ditt modellblad tillgängligt för den här sektionen.
Rita de tre delarna av benet: låret, kalven och foten. Jag ska göra var och en på en Nytt lager så att Dave kan animera dessa sektioner självständigt. När du ritar de tre sektionerna ska jag se till att de överlappar något. Han kan välja att använda marionettverktyget i After Effects, så han kan gå ihop med de tre benen. Enligt min erfarenhet är det bättre att ge animeringsalternativen!
När du har målat upp dina tre avsnitt av benet, välj låret, kalven och foten och kopiera dem ytterligare tre gånger. Du kan göra det genom att välja de tre lagren genom att hålla Flytta och dra dem till Nytt lager ikonen längst ner på sidan Skikten panelen, som är en fyrkant med ett veckat hörn.
Välj två ben och använda Omvandla, vilket är Kontroll-T, Vrid dem horisontellt genom att gå till Redigera> Transformera> Vänd horisontellt. Gruppera varje ben individuellt och ge dem ett användbart namn som benkopia 2.
Vi kommer att upprepa processen att skapa tre sektioner för armarna: överarm, underarm och hand. Kom ihåg när du målar upp sektionerna för att tillåta lite överlappning.
Här är de färdiga Spider-tillgångarna. Han är i denna pseudo T-pose för bekvämligheten och jag är säker på att Dave kommer att hitta det lättare att börja animera med honom utlagd så här.
Nästa kopiera alla ben och armarna, klistra in dem i sidogruppen och omordna dem efter behov.
Här kommer den icke-kreativa organisationsdelen som, men inte mycket kul, är mycket nödvändig. Du kommer tacka dig själv senare för att kontrollera att allt är i ordning. Här är en sammanfattning av de främre Spider-tillgångarna.
Röret är en av dessa underbara tillgångar där vi bara kan kopiera och klistra in den för framsidan och sidovyer. Vi kan bara ha detta som en tillgång, men eftersom de främre och sido-spindlarna är i egna grupper betyder det att din animatör inte behöver söka efter de enskilda sektionerna.
Ordna alla arm sektionerna i tydligt definierade mappar. Det kan vara till hjälp att färgkoda dem. Se till att händerna och de nedre och övre armarna för varje grupp är märkta.
Som tidigare är det här en märkningsåtgärd och här har jag lagt ut det här för Dave.
Ögonen! För detta, se till att rätt stängt öga motsvarar det korrekta öppna ögat som borde vara direkt under det.
Detta är tack och lov en enklare att organisera! Här har vi bashuvudet och spindelens mandibler (om du inte är bekant med arachnid anatomi, det här är bitarna runt spindelns mun). Jag har dessa separat så att Dave kan animera dem om han så önskar.
En annan enkel del! Här har vi buken (spindeln) och överkroppen. Båda är på separata lager för potentiella animationsändamål. Håll delar märkta!
Eftersom de flesta tillgångarna är kopior av varandra är de enda skillnaderna mellan profilspindeln och fronten på:
Jag har inkluderat skärmgranskningar av lagkonfigurationen för din bekvämlighet. Kom ihåg att hålla allt klart märkt!
Detta är den enda massiva förändringen för spindeln, där eleven har flyttats fram till ögonlocket i alla fall och i stället för åtta ögon är det bara fem.
Här har vi våra spindelfördelar tydligt framtagna för Dave!
KOM IHÅG: Korrekt märkning ärmycketViktig.
Whey-Hej! Spindelavsnittet är klart och nu har vi bara Little Miss Muffets lunch att göra. Detta har brutits ned i skålen, ostron, en sked och några ostor på skeden.
"Varför?" du frågar. Eftersom jag trodde det var coolt, när Miss Muffet blev rädd, flyttade innehållet i sin skål!
Gruppera dem och märka sedan som tidigare.
Nu när de enkla elementen har skapats har vi de svårare uppgifterna att göra tillgångar till saker som rör sig. För Little Miss Muffet behöver vi två delar: profil och front-on. Framsidan är att hon sitter och äter, och sidan är för henne att springa av kameran.
Fröken M är lite knepigare än spindeln i den meningen att hon behöver olika anatomi och kläder, och kommer således att se annorlunda ut i profilen för att vara rak på. Här är en sammanfattning av alla de delar jag har skapat.
Så här ser den ljuva lilla fröken muffeten ut alla målade. De växer upp så snabbt! *Sniff*
Här är de viktigaste delarna av hennes kläder, med undantag för hennes skor och ärmar. För bekvämligheten har jag hållit ärmarna med armar och skor med benen.
Här är hennes siduttryck, som är ganska mycket bara ren terror.
Ganska enkelt här. Jag målade ut armen rakt för att representera ren rädsla.
Det mesta av benet kommer att döljas av kjolen, men jag har givit Dave lite extra, just i fall.
Jag har hållit sitt hår separerat så att när hon går kan Dave animera det bakom henne!
För att hålla detta riktigt uttrycksfullt har jag skapat en mängd olika mun- och läppformer så Dave kan animera henne att äta och chockad. Håret är där inne, eftersom mundelarna ligger på toppen av Skikten stack och håret måste vara över allt.
I likhet med spindeln har fröken muffet öppna och slutna ögon, men med tillägg av ögonbryn för uttryck.
Jag har grupperat hennes kropp och kläder tillsammans här, eftersom de inte kommer att flytta mycket medan hon sitter. Om du noterar kjolets sittande lager finns det en mask som jag har med för att tillåta benen att visa sig igenom, och om Dave behöver hela kjolen är det där för honom.
Våra armar är som tidigare, även om jag kände att vi behövde händer på egen hand för när hon håller skålen och skeden.
Jag har lagt armar utan händer i en separat mapp för animering med händerna.
Lättgående ben som kan användas när du sitter eller står.
Precis som i profilkörningen har jag satt hennes pigtails som egna stycken att använda som ett annat känslomässigt verktyg.
Det summerar våra baselement. Bredvid tweak tillgångarna så de ser så bra ut att de eventuellt kan!
Vi måste också mala Little Miss Muffet och Spider, så jag ska skapa ett lager av gräs för karaktärernas fötter att röra sig bakom.
På en Nytt lager, rita i en grov linje där du vill att gräset ska gå. Gör detta i en uppenbar kontrasterande färg.
Börja måla gräsblad längs linjen med en pensel efter eget val.
När du har målat längs linjen, Kopia lagret genom att trycka på Kontroll-C och då Klistra (Kontroll-V). Sedan Omvandla (Kontroll-T) och manuellt vända och rotera gräset för att göra det lite mer frodigt.
Därefter låser du skiktets transparens genom att trycka på ikonen för liten schackbräda bredvid Låsa på Skikten panel. Lägg i en mängd olika gröna för att ge variation. Lås upp insynen och ta en mjuk suddgummi (E) och mjukna gräsbasens kant.
Jag duplicerar gräslagren och sedan vänder, förvandlar och förskjuter dem för att göra dem lite annorlunda. På gräset närmast kameran, suddar jag gräset med Gaussisk suddighet för att ge illusionen av djupet. Gaussisk suddighet kan hittas genom att gå till Filter> Blur> Gaussian Blur. Jag har suddig gräsens horisont i Miljö mapp något bara för att ge lite djup, med samma Gaussisk suddighet metod.
Här har jag bytt till Little Miss Muffet för att se till att det ser bra ut med båda tecknen.
Jag är väldigt nöjd med hur gräset ser ut, så jag plattar de åtta gräslagren i fyra enkla gräslager och namnger dem därefter.
Dave tar hand om krediterna så jag har helt enkelt lagt lite text i psd för att spara honom tid. Stilsorten jag använder är Futura Handskriven.
För detta har jag skapat en titelskärm, Daves kredit och min egen kredit. Du kan göra det genom att helt enkelt välja Horisontellt Typverktyg (T), välja ditt typsnitt och välj vad du behöver på varje lager. Rikta texten i mitten av skärmen genom att trycka på Kontroll-T till Omvandla och anpassa textens tvärhår med korshåren i 4K-titelsäkerheten.
Vårt sista steg är att kontrollera att alla lager heter och det finns inga lager som inte borde vara där, t.ex. roughs, tomma lager, färgpaletter.
Spara .PSD till en mapp som "Dave Animation Assets". I den här mappen placera allt som din animator behöver, till exempel storyboardet, manuset, en voiceover (om du tillhandahåller det) och alla teckensnitt (som du kan distribuera och ha rättigheter till). Om inte, rasterera eventuella textlager. Nästa leverera den mappen till din animator via FTP, USB-enhet eller nätverk och dölja sedan!
Jag hoppas att du njöt av att lära dig hur du skapar animeringsmedel i Adobe Photoshop. När du har organisationssidan av detta spikat, kan du låta din kreativitet bli vild! Jag kan inte vänta med att se vad Dave Bode skapar med mina element!
Accentsconagua