Accentsconagua

Lag en animert gresskar ikon ved hjelp av Pixel Art i Adobe Photoshop

Design og illustrasjon
Share
Hva du skal skape

I denne opplæringen vil du opprette en spooky jack-o-lantern fra bunnen av, gjengitt helt i piksler (byggeblokkene i digital kunst). Lær hvordan du bruker Adobe Photoshops tidslinjepanel for å animere et smilende, blinkende ansikt som blåser et kyss på betrakteren og lyser både innvendig og utvendig.

1. Tegne gresskar

Trinn 1

Gjennom denne opplæringen jobber jeg i Adobe Photoshop CC 2014. Åpne programmet ditt og lage en Nytt dokument. Mitt siste kunstverk er målt 36 px av 30 px, så jeg lagde dokumentet mitt 50 px av 40 px på 72 dpi med en Gjennomsiktig bakgrunn.

Steg 2

La oss begynne med å bygge den grunnleggende gresskarformen. Zoom (Z) inn på dokumentet ditt 1600% eller noe.

  1. Bruker Blyantverktøy (B) med en 1 px hard pensel, tegne 7 piksler i en vertikal linje.
  2. Tegne 2 piksler på hver side av første linje.
  3. På toppen av designet så langt, tegne en ekstra vertikal linje av 2 piksler etterfulgt av 1 piksel på høyre diagonal av de to foregående. På bunnen av designet tegner du 2 diagonale piksler i rekkefølge (se nedenfor).
  4. Fullfør denne delen med 1 diagonal pixel øverst og to piksler til høyre på både topp og bunn.

Trinn 3

Fortsetter videre med Blyantverktøy og vår grunnleggende gresskarform:

  1. Med det som ble opprettet i Steg 2, tillegg 3 piksler horisontalt til toppen og bunnen av designet. Tegne 1 diagonal pixel over tre linjer trukket tidligere.
  2. Fortsett å bygge gresskarens form på toppen av designet med 3 horisontale piksler. På bunnen tegner du 1 diagonal pixel under den andre og 2 piksler til høyre.
  3. Topplinjen er 8 piksler på tvers. Bunnlinjen er 10 piksler på tvers.
  4. Den andre halvdelen er et speilbilde av alt til venstre for de to rette horisontale linjene. Bruke Rektangulært markeringsverktøy til Å velge, Kopier (Control-C), Lim inn (Control-V), og speil (Rediger> Transform> Vend horisontal) venstre halvdel for å fullføre den grunnleggende gresskarformen.

Trinn 4

Vår gresskar trenger et ansikt. Lage en Nytt lag i lag panel og bruke Blyantverktøy, la oss begynne:

  1. Øyet starter med 3 piksler i en linje og 1 piksel over dem og i sentrum.
  2. Fullfør øyet med den tredje linjen piksler bestående av 3 piksler og den fjerde linjen bestående av 5 piksler.
  3. Tre piksler til høyre fra øyets nederste linje starter nesen. Den består av tre rader: 1 piksel, 3 piksler, og 3 piksler.
  4. Gjenta øyeformen igjen for høyre øye.
  5. Pass på at øynene og nesen har 3 piksler mellomrom som skiller dem. Munnen begynner to rader med 3 piksler på tvers.

Trinn 5

Hele dette trinnet består av å fullføre munnen:

  1. Starten av munnen, bygge av siste skritt, er 9 piksler arrangert i a 3 x 3 eske.
  2. Tegne 3 piksler i en vertikal linje på hver side av boksen som er trukket tidligere.
  3. Neste er to kolonner av 2 piksler hver på hver side av munnen.
  4. Tegn to L-former på hver side bestående av 3 piksler Hver.
  5. Legg til 1 piksel på hver side, diagonalt og utad. Munnens øvre kant består av 4 piksler i en horisontal rad.
  6. For å fullføre munnen, plasser 1 piksel diagonalt og nedover, mot midten av munnen, og fyll inn venstre og høyre side (se nedenfor for nøyaktig form). På dette punktet ser munnen litt ut som en flygende flaggermus.
  7. Siden gresskaret mitt vil bestå av forskjellige appelsiner og gule, har jeg bestemt meg for å endre fargen på min kunstlinje til brun (# 6b0f02).

2. Coloring the Pumpkin

Trinn 1

Fargene som brukes i min siste kunstverk, er forskjellig fra de jeg begynte med under (de er mer mettede og ble endret senere i prosessen). Vurder dette for å være en liten leksjon i å skape en harmonisk fargepalett. For å lage din egen (eller gjør dette med andre farger), reduser du opacity av fargen til prosenten som er oppført, plasser den over 100% Orange farge, og velg den nye fargen med Eyedropper Tool (I). Lagre nye farger i fargeprøver panelet og kontroller at opacity er satt tilbake til 100% for resten av opplæringen.

  1. brun 100%: # 760b03
  2. brun 75%: # 902b0d
  3. brun 50%: # ae4a18
  4. brun 25%: # d1692a
  5. oransje 100%: # f2842b Brukes som basisfarge.
  6. oransje 40%: # faa912
  7. oransje 20%: # ffcc01
  8. Gul 100%: # fff25d

Slå sammen ansiktslaget og gresskarlinjekunst og fyll i gresskaret med Paint Bucket Tool og oransje (# f2842b).

Steg 2

Vår gresskar trenger en stamme.

  1. Ved hjelp av brun (# 760b03), og Blyantverktøy, tegne to vertikale linjer av 3 piksler hver, to rader fra hverandre.
  2. Fyll ut de to kolonnene med brun 75% (# 902b0d) og lukk formen med 2 piksler av brun.
  3. Bruk brun 50% (# ae4a18) som høydepunktet farge på toppen av stammen.

Trinn 3

Siden dette er en jack-o-lantern, må vi kutte toppen av gresskaret. 

  1. Jeg har startet med det samme brun brukt på stammen. Fra toppen av stammen er midten av gresskarens lokk 9 piksler ned. Tegne 8 piksler over i det senteret peker med 3 piksler på neste rad opp på hver side av midtlinjen.
  2. Koble til 3 piksler over på hver side med 1 piksel opp.
  3. Dekk hjørnet piksel med oransje og skygge lokket og under det med brun 25% (# d1692a) fra Trinn 1 i denne seksjonen.
  4. Plasser de mørke oransje pikslene i hjørnene på dekselet og under stengelen (se nedenfor).

Trinn 4

Konsentrere deg om hva som skjer med skyggelegging i gresskaret nedenfor:

  1. Trekk forsiktig kurvlinjer av Brun 25% (# d1692a) som starter ved innsprøytene på bunnen av gresskaret. Kurvene bør etterligne kontur av gresskaret selv.
  2. Linj bunnen av gresskaret og begynn å forskyve mørk oransje og oransje piksler i den nedre halvdelen av gresskaret.
  3. Skisse bunnen av munnen, nesen og øynene også.
  4. Eventuelt kan du velge nå for å bruke en gul-oransje fra Seksjon 2, Trinn 1 for å legge til høydepunkter i gresskarlokket, øynene, nesen og munnen.

Fargene for denne delen av opplæringen er mer subtile enn de jeg valgte å bruke i neste trinn. Hvis du liker denne tonen bedre, bruk bare det neste trinnet for tips om ytterligere skygge og utheving, og hold fargepaletten opprettet i Seksjon 2, trinn 1.

Trinn 5

Hvis du vil ha et lysere, mer mettet gresskar, sjekk ut trinnene nedenfor:

  1. Erstatt alle forekomster av Brun 25% (# d1692a) på gresskarens overflate med Lysrød (# ff1300).
  2. Endre basen oransje farge til # ff7700.
  3. Pass på at toppstammen inneholder nyanser av brunt og lysebrunt heller enn rødt (vi endrer gresskaret i stedet for trefargene på stammen).
  4. For linjen som angir gresskarlokket, bruk lysbrunene fra Seksjon 2, trinn 1. For høydepunkter, bruk yellows (# ffcc00) og (# fba912) for å tegne små bokser og stagger linjer piksler øverst til venstre i designet.
  5. Bør mørkere av de to gule over til toppen av hver gresskar-seksjon. Fremhev bunnen av munnen. Bløt de lyse røde skyggepikslene med Rød appelsin (# ff4500).
  6. Bruk en Mørkebrun (# 3e0702) på oversiden av gresskarens bunn og høyre side. Lys opp den øvre venstre side av gresskarens linjekunst med forskjellige brønner (se nedenfor).

3. Opprette animasjonsrammer

Trinn 1

Hvert trinn i det animerte ikonet som vi lager, krever et eget lag som inneholder endringen i ikonet. Dette inkluderer noen glødende øyne, endringer i munnens form, eller gløder rundt selve gresskaret.

Pass på at gresskar komponentene er alle på samme lag. Bruke Magic Wand Tool (W) å velge utenfor gresskar og gå til Velg> Inverse (Shift-Control-I) og så Velg> Endre> Utvid og Utvide av 1 piksel.

Lage en Nytt lag under gresskarikonet i lag panel. Fyll ut valget med lyse gule ved hjelp av Paint Bucket Tool. Jeg har også fylt ut et annet lag under de to andre med svart, så gresskarikonet ville pope på skjermen mer.

Steg 2

Lage en Nytt lag og dekk de to første radene i venstre øye med oransje piksler. Dekk den siste raden med 5 piksler av rødt (og den forrige røde raden med oransje piksler). Øyeet skal nå være 4 piksler på tvers, 1 diagonal pixel på venstre side og to gule piksler i midten av blinkende øyeform.

Trinn 3

Det er tre nye munnlag som vi må tegne for å skape den endelige animasjonen.

  1. Lage en Nytt lag over de andre og bruk Blyantverktøy å tegne tre kolonner av piksler bestående av 1 piksel, 3 piksler, og 2 piksler. Dette er venstre hjørne av munnen.
  2. For midten av munnen tegner du 2 piksler til høyre for munnhjørnet som er trukket tidligere. Legg til 1 piksel ned fra de to foregående tegnet. Til slutt tegne en firkant av 3 piksler av 3 piksler for midten av munnen.
  3. Speil venstre munnhjørne til høyre side.
  4. Bruk mørk oransje til å skisse hjørnene av munnen. Se bildet nedenfor for nøyaktig pixelplassering.
  5. Bruk basen oransje farge for å fylle ut det meste av det negative rommet rundt munnen.
  6. Den lyse røde som er plassert i denne delen, sitter rett under gresskarens nese.
  7. Til slutt fyll inn de tomme mellomrommene med gule høydepunkter.
  8. Sett den nye munnen over den opprinnelige munnen. Den forrige munnen skal være helt dekket. Skjul dette nye laget for nå.

Trinn 4

Munnen blir mindre og skifter fra et åpent smil til søte, pursed lepper (minus leppene siden dette er et gresskar).

  1. Igjen begynner vi med venstre hjørne av munnen som består av 5 piksler i tre rader.
  2. Tegn en firkant av 3 piksler av 3 piksler for midten av munnen.
  3. Speil venstre side av munnen til høyre side.
  4. Bruk mørk oransje, tegne to linjer med 4 piksler og plasser flere piksler i hjørnene av munnformen.
  5. Bruk igjen lys rødt til bunnen av gresskarens nese (dette vil hjelpe deg med å rette opp det) og bunnen av munnen.
  6. Fyll ut det negative rommet med oransje.
  7. Plasser dette laget over gresskarens munn, sørg for at den opprinnelige munnen ikke vises. Skjul dette nye laget for nå.

Trinn 5

Munnen er nå i full kyss-blåsemodus. Igjen, opprett en Nytt lag og la oss komme i gang.

  1. Hele munnen er to rader av 3 piksler og en enkelt piksel i midten av siste rad.
  2. 5 piksler er trukket på venstre side: 2 piksler ned, 2 piksler diagonalt, hopp over et mellomrom, og 1 piksel utenfor hjørnet av munnen. Speil dette på høyre side og tegne 5 piksler over på toppen av munnen.
  3. Bruk rødt, tegne 3 piksler over det vil man igjen være bunnen av gresskarens nese. Tegne 5 piksler over bunnen av munnen og sprer noen piksler i hjørnene av designet.
  4. Fyll ut området med oransje.
  5. Sett den nye munnen over den gamle munnen, og sørg for at gresskarens originale munn er helt dekket. Igjen, skjul dette laget i lag panel for tiden.

Trinn 6

For opplyste øyne og munn, vil ett lag være nødvendig.

  1. Zoom inn på gresskarens ansikt til 1600%, eller noe.
  2. Lage en Nytt lag og fyll øynene og nesen med gul. Linje venstre side av dem med rødt for å se den indre kanten av ansiktsfunksjonene.
  3. Bruk lysebrun på venstre kant av øyne og munn. Bruk en lysere brun på nederste kant.
  4. Fyll i munnen med lyse gule, gjenta de forrige trinnene for hvilke farger som brukes i designet.
  5. Et skudd av gresskaret når "fullt opplyst".

4. Animere gresskar

Trinn 1

Åpne Tidslinje panel og velg Lag ramme animasjon fra rullegardinmenyen i sentrum.

For å endre hva som skjer i hver ramme, må du treffe Ny ramme i panelets valg og juster designet i lag panel hver gang. Legg merke til endringen nedenfor med det andre munnlaget synlig i den andre rammen og skjult i den første.

Steg 2

Se bildet nedenfor for en visuell oversikt over rammene som brukes i animasjonen. Hvert trinn tilsvarer et lag. Jeg har også brutt ned hva som skjer i hver ramme under:

  1. Det grunnleggende gresskaret med alle ekstra lagene skjult. Tiden er satt til 1 sekund.
  2. Det gule oversiktslaget (fra Seksjon 3, trinn 1) Er synlig i denne rammen, men den er på 25% Opacity. Tiden er satt til 0,1 sekund.
  3. Den tredje rammen har det gule oversiktslaget på 50% opacity og munnlaget fra Seksjon 3, Trinn 3 er nå synlig. Tiden er satt til 0,1 sekund.
  4. Det gule oversiktslaget er på 100% Opacity. Munnen fra Seksjon 3, trinn 4 er synlig. Tiden er satt til 0,1 sekund.
  5. Munnen fra Seksjon 3, trinn 5 er synlig. Tiden er satt til 0,1 sekund.
  6. Det blinkende øyelaget fra Seksjon 3, trinn 2 er nå synlig. Tiden er satt til 0,1 sekund.
  7. Denne rammen er identisk med Ramme 5. Tiden er satt til 0,1 sekund.
  8. Denne rammen er identisk med Ramme 4. Tiden er satt til 0,1 sekund.
  9. Denne rammen er identisk med Ramme 3 bortsett fra det gule oversiktslaget hvis opacity er satt til 100%. Tiden er satt til 0,1 sekund.
  10. Alle ekstra øye og munnlag er skjult i dette laget. Tiden er satt til 0,1 sekund.
  11. Det opplyste øynene og munnlaget er nå synlig i denne rammen. Tiden er satt til 1 sekund.
  12. Alle ekstra øye og munn lag er skjult. Det gule oversiktslaget er satt til 50%. Tiden er satt til 0,1 sekund.
  13. Det gule oversiktslaget er satt til 25%. Tiden er satt til 0,1 sekund.

Trinn 3

Når du angir tidsforsinkelsen på rammene dine, kan du velge flere rammer og endre dem om gangen. Sørg også for at Loop Options er satt til For alltid.

Trinn 4

Når du eksporterer din animerte fil, går du til Fil> Lagre som og velg .gif. Siden det ikke er mange farger i denne filen, og vi ikke er for opptatt av en stor filstørrelse, behold fargene på 256 og de andre innstillingene til standardinnstillingen.

Hvis du forstørrer filen din (hvis du vil ha den så stor som mitt siste bilde), må du sørge for det Kvalitet er satt til Nærmeste nabo så det er ingen tap i hardkanten pikselkvalitet. En gang til, Looping Options bør settes til For alltid (med mindre du vil ha din .gif å løse et bestemt beløp uansett grunn).

Fantastisk arbeid, du er gjennom!

God jobb med å skape et morsomt, animert gresskar. Jeg har begge mine originale forstørrede versjoner under, så du kan se forskjellen mellom størrelsene og detaljene i pikselikonet.

For flere pixel art opplæringsprogrammer her på Tuts+, sjekk ut denne lille listen:

  • Opprett en serie frokost Pixel Artikoner i Adobe Photoshop
  • Lag Pixel Art med en begrenset palett i 10 trinn med Photoshop
  • Hvordan lage et animert Pixel Art Sprite i Adobe Photoshop
  • Kandi Runner: Lag en Pixel Art Sprite fra scratch
Design og illustrasjon
×