Articles

En grundläggande Sprite Tutorial

Här är en grundläggande genomgång av hur du gör din ritning till pixelkonst med hjälp av några Photoshop eller GIMP tricks.

Steg 1: ritningen

notera hur det inte finns några maskdetaljer och hur händerna är snygga och enkla

en tablett är trevlig att ha för att rita direkt i ett konstprogram som Photoshop. Annars skannar du en ritning med tunga pennor eller färgade linjer. Om du vill imitera en specifik spelstil, Använd en förstorad sprite som referens för kroppsproportioner och bredd (vilket jag tyvärr inte gjorde med denna skiss). Håll detaljerna till ett minimum så att du inte rör upp saker när du krymper den.

tid: varierar

steg 2: Ändra storlek

ändra inte storlek med begränsade proportioner – stretch och squash för att matcha målets proportioner

hitta en sprite som liknar den storlek (eller pose) du vill kopiera. Krympa ritningen och gör den samtidigt så bred som den behöver vara för att matcha, om du inte fungerade i steg 1. Observera att I denna skiss vill jag ha ungefär samma höjd men lite bredare.

tid: 30 sekunder

steg 3: skärpa

använd Photoshop eller GIMP tröskel verktyg för att spara dig massor av rengöringstid

sammanfoga skiktet med storlekslinjen på ett lager med en solid vit bakgrund. Gå till bild> justeringar> tröskel i Photoshop eller motsvarande i GIMP för att tunna linjearbetet ner till rena svarta och vita pixlar. Se till att du zoomas upp nära för att se pixlarna bäst. Håll alla dina ursprungliga detaljer så begripliga som möjligt så att du inte behöver hänvisa fram och tillbaka till din ursprungliga ritning för ofta.
detta steg gör det enkelt att rengöra linjerna och fylla i färg och spara massor av tid över rengöring för hand.

tid: 10 sekunder

steg 4: Rengöring

skärpa konturerna tills de är 1 pixel breda. Var inte rädd för att bryta några konturer, och oroa dig inte för finare detaljer ännu

gör ett lager bara för linjerna (ta bort alla vita). Zooma in och städa upp konturerna. Om du är i att bryta linjer, detta är platsen att göra det. Det är inte dags att arbeta med de fina detaljerna ännu (igen, mask och händer) – börja bara ge dig själv ankare för färgningen. När du är klar, lås skiktet.

tid: 10-20 minuter

Steg 5: Fill-tool Flats

platta färger fylls i – i detta fall fyller skuggfärgerna

i plana färger på ett lager under linjerna. Träna detaljer om outfit, etc, men gör ingen skuggning. Ljus kommer att läggas till efter. Detta steg ger verkligen spriting ’serietidning produktion’ känsla. Särskild anmärkning: vissa människor föredrar att använda ljusområdets färger för sina lägenheter och sedan lägga till skuggorna efter. Detta kommer att ge en annan sluteffekt, så experimentera.

tid: 2 eller 3 minuter

steg 6: Skuggningen

spara tid och få bra färger genom att använda vita på lager som är inställda på överlagring för att lysa skuggflakor

just nu har du ett lager för linjer och ett lager för lägenheter. Här sparar Photoshop dig en stor tid. Sätt i två lager mellan linjerna och lägenheterna. Ändra dem till Överlagringsstil och gör den övre 50% opacitet. Välj en 1 eller 2 pixelpenna och börja lägga ner några vita. Omedelbar belysning genom dina färger.
Obs: arbeta med 100% opacitetslagret först. När du har skuggningen ner om hur du gillar det, använd magic want-verktyget för att välja de icke-vita områdena. Gå sedan vidare till 50%-skiktet för mittskuggningen (efter att ha gömt trollens marscherande myror). Du vill inte att de två skikten överlappar sina vita eller så får du extra höjdpunkter.

tid: 30-90 minuter

Steg 7: Skuggningskontroll

kontrollera detaljerna i din skuggning genom att göra till gråskala och eliminera färgdistraktioner

Ibland behöver du nya ögon för att kontrollera att du har skuggningen rätt.
så här ska dina lager se ut-lägenheterna fyllda med svart är vad vi lägger till just nu. Kopiera flats-lagret, lås det, fyll det med svart (redigera > fyll). Ändra sedan dina två vita lager från överlagring till normalt. Du borde få det här:

Jag kan verkligen inte tänka mig ett bättre sätt att testa skuggning än att ta ut all distraherande kostymfärg och rampa upp den till maximal kontrast. Det är det enklaste sättet att hitta små saker som inte ser rätt ut, eller till och med stora saker som du var för fokuserad för att märka. Vad som är bättre, korrigering handlar bara om att fixa de vita – inte ändra varje färg. Prova med en svart bakgrund också.
Hmm. Jag tror att jag ska ta en titt på hennes vänstra hand innan jag är helt klar.

tid: 90 sekunder att kontrollera; varierar för korrigeringar

steg 8: Färglinjer

matcha konturmörket till resten av skuggningen

Nu när de har gjort sitt b&w jobb överlappande för steg 7, är det dags att konturerna färgades in och antialiaserade i de ljusa områdena. Med sina lager på ’lås’, bör det vara en kick. Kom alltid ihåg: arbeta med mörkfärgade (men inte rena svarta) bakgrunder när du gör konturarbete. Det hjälper antialiasing.

tid: 30-60 minuter

steg 9: Detaljer & Cleanups

avsluta de finare detaljerna

detta är ”subtilitet” – steget. * Få färgerna precis rätt (Overlay gör faktiskt ganska bra arbete med färgning) *Lägg till hård-till-pixel detaljer (triangel på mask, blå linjer runt handskkanter, etc) *avsluta de subtila detaljerna du sparade för nu (händer) *senast gå runt för misstag. Observera att jag ’glömde’ om hennes gula stövlar-men med denna process, det är bara en fråga om att lägga den gula till lägenheter lagret. Det är förskuggat!