I denna handledning skapar du en spöklik jack-o-lyktor från början, helt och hållet i pixlar (byggstenarna i digital konst). Lär dig hur du använder Adobe Photoshops tidslinjepanel för att animera ett leende, blinkande ansikte som blåser en kyss på betraktaren och tänds både inifrån och ut.
1. Ritning av pumpa
Steg 1
Under hela handledningen jobbar jag i Adobe Photoshop CC 2014. Öppna ditt program och skapa en Nytt dokument. Mitt slutliga konstverk mättes 36 px av 30 px, så jag gjorde mitt dokument 50 px av 40 px på 72 dpi med en Transparent bakgrund.
Steg 2
Låt oss börja med att bygga den grundläggande pumpaformen. Zoom (Z) in på ditt dokument 1600% eller så.
Använda Penna verktyg (B) med en 1 px hård borste, rita 7 pixlar i en vertikal linje.
Dra 2 pixlar på vardera sidan av första raden.
På toppen av designen hittills drar du en extra vertikal linje av 2 pixlar följd av 1 pixel till höger diagonal av de föregående två. På botten av designen ritar du 2 diagonala pixlar i följd (se nedan).
Fyll i det här avsnittet med 1 diagonal pixel överst och två pixlar till höger på både topp och botten.
Steg 3
Fortsätter med Penna verktyg och vår grundläggande pumpa form:
Med det som skapades i Steg 2, tillägg 3 pixlar horisontellt till toppen och botten av konstruktionen. Dra 1 diagonal pixel ovanför linjen av tre ritade tidigare.
Fortsätt bygga pumpans form på toppen av designen med 3 horisontella pixlar. På botten ritar du 1 diagonal pixel under den andra och 2 pixlar till höger.
Topplinjen är 8 pixlar tvärs över. Slutsatsen är 10 pixlar tvärs över.
Den andra halvan är en spegelbild av allt till vänster om de två raka horisontella linjerna. Använd Rektangulärt markeringsverktyg till Välj, Kopiera (Control-C), Klistra in (Control-V), och spegel (Redigera> Transformera> Vänd horisontellt) den vänstra halvan för att slutföra den grundläggande pumpaformen.
Steg 4
Vår pumpa behöver ett ansikte. Skapa en Nytt lager i Skikten panel och använda Penna verktyg, låt oss börja:
Ögat börjar med 3 pixlar i en linje och 1 pixel ovanför dem och i mitten.
Fyll i ögat med den tredje raden pixlar som består av 3 pixlar och den fjärde raden bestående av 5 pixlar.
Tre pixlar till höger från ögans bottenlinje börjar näsan. Den består av tre rader: 1 pixel, 3 pixlar, och 3 pixlar.
Upprepa ögonformen igen för höger öga.
Se till att ögonen och näsan har 3 pixel utrymmen som skiljer dem. Munnen börjar två rader ner med 3 pixlar tvärs över.
Steg 5
Hela det här steget består i att avsluta munnen:
Munnen börjar med att bygga upp det sista steget 9 pixlar arrangerad i en 3 x 3 låda.
Dra 3 pixlar i en vertikal linje på vardera sidan av lådan ritad tidigare.
Nästa är två kolumner av 2 pixlar vardera på vardera sidan av munnen.
Rita två L-former på vardera sidan som består av 3 pixlar varje.
Lägg till 1 pixel på vardera sidan, diagonalt och utåt. Mjukens övre kanter består av 4 pixlar i en horisontell rad.
För att slutföra munnen, placera 1 pixel diagonalt och nedåt, mot mitten av munnen och fyll i vänster och höger sida (se nedan för exakt form). Vid den här tiden ser munnen ut som en flygande fladdermus.
Eftersom min pumpa kommer att bestå av olika apelsiner och gula, har jag bestämt mig för att ändra färgen på min konstverk till brunt (# 6b0f02).
2. Färger pumpan
Steg 1
Färgerna som används i mitt slutliga konstverk skiljer sig från de som jag började med nedan (de är mer mättade och ändrades senare i processen). Tänk på att detta är en liten lektion för att enkelt skapa en harmonisk färgpalett. För att skapa din egen (eller göra det med andra färger), minska Opacitet av färgen till den angivna procenten, placera den över 100% Orange färg och välj den nya färgen med Eyedropper Tool (I). Spara nya färger i rutor~~POS=HEADCOMP panel och se till att Opacitet är tillbaka till 100% för resten av handledningen.
Brun 100%: # 760b03
Brun 75%: # 902b0d
Brun 50%: # ae4a18
Brun 25%: # d1692a
Orange 100%: # f2842b Används som basfärg.
Orange 40%: # faa912
Orange 20%: # ffcc01
Gul 100%: # fff25d
Sammanfoga ansiktsskiktet och pumpkartonst och fyll i pumpan med hjälp av Paint Bucket Tool och Orange (# f2842b).
Steg 2
Vår pumpa behöver en stam.
Använder sig av Brun (# 760b03), och den Penna verktyg, dra två vertikala linjer av 3 pixlar vardera, två rader från varandra.
Fyll i de två kolumnerna med Brun 75% (# 902b0d) och stäng formen med 2 pixlar av Brun.
Använda sig av Brun50% (# ae4a18) som markeringsfärgen på toppen av stammen.
Steg 3
Eftersom det här är en jack-o-lyktor, måste vi skärpa toppen av pumpan.
Jag har börjat med detsamma Brun används på stammen. Från toppen av stammen är mitten av pumpans lock 9 pixlar nedåt. Dra 8 pixlar över i den här punkten med 3 pixlar på nästa rad upp på vardera sidan av mittlinjen.
Anslut 3 pixlar över på vardera sidan med 1 pixel uppåt.
Täck hörnet pixel med Orange och skugga locket och under det med Brun25% (# d1692a) från Steg 1 i denna avdelning.
Placera de mörka orange pixlarna i hörnen på locklinjekonst och under stammen (se nedan).
Steg 4
Koncentrera på vad som görs med skuggning i pumpan nedan:
Rita försiktigt kurviga linjer av Brun 25% (# d1692a) som börjar vid indragen av pumpens botten. Kurvorna bör likna själva pumpens kontur.
Rikta ner pumpens botten och börja skaka mörkorange och apelsinpixlar i den nedre delen av pumpan.
Beskriv också botten av munnen, näsan och ögonen.
Eventuellt kan du välja nu att använda en gul-orange från Sektion 2, Steg 1 för att lägga till höjdpunkter i pumpedockan, ögonen, näsan och munnen.
Färgerna för denna del av handledningen är mer subtila än de jag valde att använda i nästa steg. Om du gillar den här tonen bättre, använd helt enkelt nästa steg för tips om ytterligare skuggning och markering och behåll färgpalett skapad i Avsnitt 2, Steg 1.
Steg 5
Om du vill ha en ljusare, mer mättad pumpa, kolla in stegen nedan:
Ersätt alla instanser av Brun 25% (# d1692a) på pumpans yta med Klar röd (# ff1300).
Ändra bas orange färg till # ff7700.
Se till att toppstammen innehåller nyanser av brunt och ljusbrunt snarare än rött (vi byter pumpan istället för stamens träfärg).
För den linje som betecknar pumpa locket, använd ljusbrunarna från Avsnitt 2, Steg 1. För höjdpunkter, använd gula (# FFCC00) och (# fba912) för att rita små lådor och stagger pixlar längst upp till vänster om designen.
Bär den mörkare av de två gyllene över till toppen av varje pumpasektion. Markera botten av munnen. Mjuka de ljusa röda skuggpunkten med Rödorange (# ff4500).
Använda en Mörkbrun (# 3e0702) på översikten av pumpans botten och höger sida. Ljus upp den övre vänstra sidan av pumpans linjekonst med olika bruna (se nedan).
3. Skapa animationsramar
Steg 1
Varje steg i den animerade ikonen som vi gör kommer att kräva ett separat lager som innehåller ändringen inom ikonen. Detta inkluderar några glödande ögon, förändringar i munnen, eller glöda runt pumpan själv.
Se till att dina pumpkomponenter är alla på samma lager. Använd Magic Wand Tool (W) att välja utanför pumpan och gå till Välj> Inverse (Shift-Control-I) och då Välj> Ändra> Expand och Bygga ut av 1 pixel.
Skapa en Nytt lager under pumpkinikonen i Skikten panel. Fyll i valet med ljusgult med Paint Bucket Tool. Jag fyllde också ett annat lager under de andra två med svart, så pumpkinikonet skulle dyka upp på skärmen mer.
Steg 2
Skapa en Nytt lager och täck de första två raderna i vänstra ögat med orange pixlar. Täck den sista raden med 5 pixlar av rött (och den tidigare röda raden med orange pixlar). Ögat ska nu vara 4 pixlar tvärs över, 1 diagonal pixel på vänster sida och två gula pixlar i mitten av den blinkande ögonformen.
Steg 3
Det finns tre nya munskikt vi måste rita för att skapa den sista animationen.
Göra en Nytt lager över de andra och använda Penna verktyg att rita tre kolumner av pixlar bestående av 1 pixel, 3 pixlar, och 2 pixlar. Detta är vänstra hörnet av munnen.
För mitten av munnen rita 2 pixlar till höger om munnen hörnet ritat tidigare. Lägg till 1 pixel ner från de två tidigare ritade. Slutligen rita en kvadrat av 3 pixlar av 3 pixlar för mitten av munnen.
Spegel vänster munhörn på höger sida.
Använd mörkorange för att skissera munnen på munen. Se bilden nedan för exakt pixelplacering.
Använd bas orange färg för att fylla i det mesta av det negativa utrymmet runt munnen.
Den ljusröda som placerats i denna del sitter direkt under pumpans näsa.
Slutligen fyll i de tomma utrymmena med gula höjdpunkter.
Placera den nya munen över den ursprungliga munen. Den tidigare munen ska vara helt täckt. Dölj det här nya lagret för nu.
Steg 4
Munnen blir mindre och ändras från ett öppet leende till söta eftertraktade läppar (minus läpparna eftersom det här är en pumpa).
Återigen börjar vi med vänstra hörnet av munnen som består av 5 pixlar i tre rader.
Rita en kvadrat av 3 pixlar av 3 pixlar för mitten av munnen.
Spegla vänster sida av munnen till höger.
Använda mörkorange, dra två linjer av 4 pixlar och placera ytterligare pixlar i hörnen av munformen.
Än en gång, använd ljusrött för botten av pumpans näsa (det här hjälper dig att linja upp det) och botten av munnen.
Fyll i det negativa utrymmet med orange.
Placera det här skiktet över pumpans mun, se till att den ursprungliga munen inte syns igenom. Dölj det här nya lagret för nu.
Steg 5
Munnen är nu i full kyssblåsningsläge. Återigen skapa en Nytt lager och låt oss komma igång.
Hela munnen är två rader av 3 pixlar och en enda pixel i mitten av sista raden.
5 pixlar är ritade på vänster sida: 2 pixlar neråt, 2 pixlar diagonalt, hoppa över ett mellanslag, och 1 pixel utanför hörnet av munnen. Spegla detta på höger sida och rita 5 pixlar över på toppen av munnen.
Använd rött, rita 3 pixlar över det kommer man igen att vara botten av pumpans näsa. Dra 5 pixlar över botten av munnen och sprida några pixlar i hörnen av designen.
Fyll i området med orange.
Placera den nya munen över den gamla munen, se till att pumpans ursprungliga mun är helt täckt. Dölj igen det här lagret i Skikten panel för tillfället.
Steg 6
För upplysta ögon och mun behövs ett lager.
Zoom in på pumpans ansikte till 1600%, eller så.
Skapa en Nytt lager och fyll i ögonen och näsan med gult. Lina de vänstra sidorna av dem med rött för att lätt se den inre kanten av ansiktsfunktionerna.
Använd ljusbrun på vänstra kanten av ögon och mun. Använd en ljusare brun på undersidan.
Fyll i munnen med ljusgul, upprepa föregående steg för vilka färger som används inom designen.
Ett skott av pumpan när "fullt upplyst".
4. Animera pumpan
Steg 1
Öppna tidslinje panel och välj Skapa ram animering från rullgardinsmenyn i centrum.
För att ändra vad som händer i varje ram måste du träffa Ny ram i panelens alternativ och justera designen i Skikten panelen varje gång. Notera ändringen nedan med det andra munskiktet som är synligt i den andra ramen och gömd i det första.
Steg 2
Se bilden nedan för en visuell sammanfattning av de ramar som används i animationen. Varje steg motsvarar ett lager. Jag har också brutit ner vad som händer i varje ram nedan:
Den grundläggande pumpan med alla ytterligare lager dolda. Tiden är inställd på 1 sekund.
Det gula kontorsskiktet (från Avsnitt 3, Steg 1) Är synlig i den här ramen, men den är på 25% opacitet. Tiden är inställd på 0,1 sekund.
Den tredje ramen har det gula kontorsskiktet vid 50%Opacitet och munskiktet från Avsnitt 3, Steg 3 är nu synlig. Tiden är inställd på 0,1 sekund.
Det gula skiktet är vid 100% opacitet. Munnen från Avsnitt 3, Steg 4 är synlig. Tiden är inställd på 0,1 sekund.
Munnen från Avsnitt 3, Steg 5 är synlig. Tiden är inställd på 0,1 sekund.
Det blinkande ögonkiktet från Avsnitt 3, Steg 2 är nu synlig. Tiden är inställd på 0,1 sekund.
Denna ram är identisk med Ram 5. Tiden är inställd på 0,1 sekund.
Denna ram är identisk med Ram 4. Tiden är inställd på 0,1 sekund.
Denna ram är identisk med Ram 3 med undantag för det gula skiktet vars Opacitet är satt till 100%. Tiden är inställd på 0,1 sekund.
Alla ytterligare ögon och mun lager är dolda i detta lager. Tiden är inställd på 0,1 sekund.
Det upplysta ögat och munskiktet är nu synligt i denna ram. Tiden är inställd på 1 sekund.
Alla ytterligare ögon och mun lager är dolda. Det gula skiktet är inställt på 50%. Tiden är inställd på 0,1 sekund.
Det gula skiktet är inställt på 25%. Tiden är inställd på 0,1 sekund.
Steg 3
När du ställer in tidsfördröjningen på dina ramar kan du välja flera ramar och ändra dem på en gång. Se också till att din Loop Options är inställda på Evigt.
Steg 4
När du exporterar din animerade fil, gå till Arkiv> Spara som och välj .gif. Eftersom det inte finns många färger i den här filen och vi är inte oroade över en stor filstorlek, behåll färgerna på 256 och de andra inställningarna vid standardinställningen.
Om du förstorar din fil (om du vill ha den så stor som min sista bild), se till Kvalitet är satt till Närmaste granne så det finns ingen förlust i hårdkantad pixelkvalitet. Igen, Looping Options bör ställas in på Evigt (om du inte vill ha din .gif att slinga en viss mängd av vilken anledning som helst).
Fantastiskt arbete, du är genom!
Bra jobb med att skapa en rolig, animerad pumpa. Jag har båda mina ursprungliga förstorade versioner nedan så att du kan se skillnaden mellan storlekarna och detaljerna i pixelikonen.
För fler pixel art tutorials här på tuts+, kolla in den här lilla listan:
Skapa en serie med Pixel Art-ikoner i Adobe Photoshop
Skapa Pixel Art med en begränsad palett i 10 steg med Photoshop
Hur man skapar en animerad Pixel Art Sprite i Adobe Photoshop
Kandi Runner: Skapa en Pixel Art Sprite från scratch
Share
Vad du ska skapa
Accentsconagua
