Kandi Runner: Lag en Pixel Art Sprite fra Scratch
Hva du skal lage

I fjor skapte vi et spill sprite design, skapt en spasertur syklus, og kodet en side- scroller bruke nevnte sprite (linker funnet på slutten av denne opplæringen). I år ønsket jeg å øke innsatsen og skape en pixel art versjon av Kandi fra bunnen fra et nytt syn.

Følg med, som i denne opplæringen jeg skal vise deg hvordan å utvide disse ferdighetene til å gjøre en pixel art spillet sprite av din egen.

1. Making the Head

Trinn 1

Mye som den siste tutorial jeg gjorde på denne karakteren, som etablerte sitt design, jeg begynner med en rask skisse til spiker ned sine funksjoner og holde meg på spore når du oppretter pixel art versjon. Jeg trakk dette i Adobe Photoshop CC 2014
, men du kan bruke hva tegneprogrammet (eller blyant og papir kombinasjon) du foretrekker. La oss sette opp vår dokument for spriten.

Lag en Nytt dokument
i Adobe Photoshop plakater (lag brukes ofte for denne opplæringen, slik at selv om du kan bruke noe sånt MS Paint
, jeg foreslår et program med lag evner). Sluttdokumentet størrelse for sprite jeg har gjort er
ca. 58 x 150
piksler. Bruk Pencil Tool (B)
på 1 pixel Hotell og Zoom (Z)
i å 3200%
eller så. I tillegg skaper en ekstra forhåndsvisningsvinduet ved å gå til Vindu > Ordne > Nytt vindu ...
Gjør du det kan du holde et øye med hva grafikken ser ut på 100%
stedet for å zoome inn og ut flere ganger.

Trinn 2

Jeg har tegnet ansiktet med 5 piksler ned
, 2 piksler ned
, 2
diagonal
, 2 piksler på tvers
, og 4 piksler over
. Dette gjentas på den andre siden. Jeg har fylt på øverste linje av hodet med en mørk rosa. Ansiktet vil bli beskrevet med en mørkere rosa enn de som er tilstede i disse bildene (se neste trinn).

Toppen av øynene er en veldig mørk blå (nesten svart, men ikke helt) på 3 piksler på tvers
med 1 diagonalt
på utenfor
, og 2 ned
på inne
.

Nesen er 2 piksler over
i midten av ansiktet. Overleppen av munnen er 4 piksler over
med den nederste leppen på 2 piksler
rett under den. Alle fargene ble hentet fra den opprinnelige sprite design.

Trinn 3

Etter å ha endret skisserte farge til en mørk magenta, har jeg begynt å fylle i ansiktet og gi øynene mer form. I utgangspunktet er de veldig rund. Dette vil bli endret litt senere, men for nå er det gir deg en god ide om strukturen i ansiktet og hvor skygger og høylys vil bli plassert.

2. Opprette Hair

Trinn 1

Med ansiktet fylt ut, la oss jobbe med å få håret sammen. Kandi har gummi ormen-lignende hår, delt opp i store tau-lignende biter. De nederste hjørnene er noe avrundet og bitene taper på toppen. vekslende antall piksler fra 4
til 3
til 2 Hotell og tilbake til 4
igjen gir oss et kurver diagonal linje. Anmeldelser

Jeg synes det er enklest å opprette et nytt lag for hver hårlokk, for tiden, så jeg kan lett trekke sine disposisjoner og slette unødvendige piksler. Fyll hver lås med en lysere farge enn sin disposisjon, vekslende gjennom hot pink
, orange
, gul
, og limegrønn
.

Jeg endret formen på øynene på de nederste hjørnene ettersom kilden nedlate har mer av en katt-øye form til vippekanten (som betyr det sparker opp i et punkt).

Trinn 2

Et hjerte er ganske enkel. 2 piksler
på hver side av 1 pixel
. Avrunder toppen ved å gå 2 piksler
ned diagonalt fra øverste rad. Fullfør hjerte med 5 piksler
danner en V-form
. Fylle dette hjerte på med hot pink Hotell og en lett krem ​​
farge.

jeg plassert midt på toppen av hodet og lagt små avrundede former over og rundt det , viser toppen av hennes hestehale.

Håret på dette punktet består av 4
store låser
å skape hennes smell (eller frynser), 3 mindre låser
for toppen av hennes hestehale, og 2 lengre låser
på hver side av hodet hennes.

Trinn 3

To ting å jobbe med i dette trinnet : Marker ansiktet og legg en lang lås som ikke er bundet opp i hestehale. Legg merke til skyggen på den lange låsen er i samme farge, for nå, som omrisset og blir lettere nær bunnen av ansiktet.

For skyggen lagt til ansikt, bruke mørk rosa fra § 1
, Trinn 2
. Linje ved siden av ansiktet med denne farge og plassere en bildeelement i hvert hjørne av den nedre halvdel av ansiktet. Bruk en lysere hudtone (hva du velger, avhenger av hudfarge du har valgt for din sprite design) for å legge høydepunkter å sprite kinn.

Trinn 4

Tegn en lås på den andre siden av hodet. Jeg bestemte meg for å gjøre denne formen unik for låsen på venstre side. Bruk mørk magenta satt til 50% Opacity
for ytterligere å skyggelegge deler av slusene nærmest øynene og overheng av sprite sin smell.

I tillegg bruker mørke blå og lilla satt på 30-50 Opacity
for å skygge pikslene nærmest midt i hestehale og kantene av håret nærmest ansiktet. Legg merke til skyggen rett over øynene, samt rundt hjertet i håret.

I tillegg bruker omrisset fargen på den rosa låsen å rave piksler og mykt dither skygge figurer i bunnen av stykke hår og på lang låser på den side av ansiktet. Hvis du ønsker å jobbe med et mer begrenset palett, dette alternativet kan du gjøre dette og likevel lage skyggefulle områder. Det ligner skravering i tegning med blyant eller blekk, eller bruk av halvtone for utskrift.

3. Tegning kroppen

Trinn 1

Kroppen vil hovedsakelig bli nedtonet lilla, igjen en fargelagt i den opprinnelige vektor design tidligere utgitt. Halsen er kort (og hennes skjorte er turtleneck-lignende), så start med to piksler på hver side av haken med en lang rekke av piksler som går på tvers mellom håret, under haken.

Siden håret tilslører del av skuldrene, og trekker dem på et lag under håret tendens til å fungere best ut, slik at de ikke er for små eller for bredt til karakteren. Se i (eller min) første skisse for karakteren samlede positur som du gjør din vei nedover armen og begynner å danne brystet, midje og hofter.

sprite skjorten har en kjæreste halsen (hjerte-lignende på toppen, over brystet), som jeg har stilt opp med midten av ansiktet hennes. Derfra spark skjorten ut på hver side, kommer sammen for å danne en liten midje, og kurver utover i tykke hofter. Siden karakter er en enkel, rett-på visning, på venstre side av kroppen hennes omrisset vil bli speilet for høyre side.

Trinn 2

For nå, vi skal jobbe på armer, kropp og ben mer enn hendene. Piksler på hver side av armene er lengre rundt skulder og bicepsen området og bli enkel 2 x 2
diagonale
linjer for underarmene. Det samme skjer fra midjen til hoftene.

For beinet, har jeg konisk begge sider for å møte ved kneet, som er avrundet i stedet for spiss. innsiden av benet fra innsiden av låret til ankelen er en svakt buet (selv om det meste rett) diagonal linje, mens den ytre lår og legg er mer dramatisk buet.

kastet ut-delen i den nedre del av leggen er en del av fantomet sko design. Fôret er små og avrundet, og peker innover i denne design for å vise større detalj i rustning og sko av spriten.

Når fornøyd med det venstre benet, bruker du Rectangular Marquee Tool
(M)
eller Lasso Tool (L)
til Velg
, Kopier (Ctrl-C)
, og Lim inn (Ctrl + V)
det. Å reflektere beinet, gå til Rediger > Transform > Vend horisontalt Hotell og flytte den på linje med høyre hofte med Move Tool (V)
.

4. Farging Torso

Trinn 1

sprite har en V-formet
, store beltet over hoftene. Toppen av beltet er dannet av to diagonale linjer
, 1 pixel
for hver linje, som møtes på 2 piksler på tvers
. Om 9 piksler ned
, midt i bunnen av beltet møter også på 2 piksler på tvers
. Flytt utover går opp hver rad i følgende mønster: 1 pixel
, 1 pixel
, 2 piksler
, 2 piksler
, og 3 piksler
. Dette bør komme på siden av hoftene.

Jeg valgte en lys blågrønn for fyllfargen på beltet. Velg en mørkere blågrønn for disposisjonen og noen få piksler i hjørnene hvor kroppen omrisset møter beltet design. Velg et medium blågrønn å skygge sidene og et par linjer mot midten av beltet.

Trinn 2

Det samme farge fra overleppa har blitt brukt til å skissere sprite skjorten, og forrige kantfarge brukes til toppen av turtleneck. Begge skuldrene er nakne, så bruker de samme fargene fra ansiktet. En lettere syrin har blitt brukt til å starte på høydepunktene i bodice av skjorten.

Trinn 3

Jeg valgte å skygge og markere bodice på denne måten, i store biter av farge, for å lage design på bodice og henspille på materialet som rustning-lignende versus å være bare en skjorte.

For ermet på armen, holde samme kantfarge brukt tidligere, og fylle på med samme lilla tone fra skjorten sin bodice. Skygge rundt albuen, og for å indikere ribb n den øvre del av hylsen (på skulderen). Bruk en mørkere lilla til omrisset på innsiden av armen. For høydepunktene, plassere noen piksler på utsiden av armen, så vel som i midten av ribbing på toppen av ermet.

5. Fargelegging Legs

Trinn 1

Fyll i bena med de samme fargene for skygger og høylys som brukes på ermene. Legg merke til den svimlende piksler på toppen av lårene hvor beltet møter hips.I også lagt mørkere piksler på omrisset av sprite lyske.

Trinn 2

Plasser skygge farge rundt den indre kant av benene og den øvre del av knærne. Siden karakter er iført rustning-lignende klær, er knærne skissert (i en mekanisk, robot-aktig design).

Trinn 3

Det er på tide vi lagt en hånd. Se tilbake til § 1, Trinn 1
til skisse av min sprite design for hånden hennes stilling. De er slått på litt, så noen av toppen av hånden viser sammen med to fingre og en tommel.

Jeg startet med en boks-lignende form som smalner på slutten i hennes fersken hudfarge, skissert det med mørk magenta, og trakk en diagonal bandet i blågrønn for hennes fingerløse hansker. Shade ytterkanten av hansken med mørk blågrønn og bruke noen medium blågrønn å gi litt variasjon til materialet (som gjøres til beltet i § 4, trinn 1
).

For hånden selv ved å bruke de samme farger fra forsiden, blir lysere ved enden av hånden. Fingrene møtes i et punkt, viser forskjellene i indeksen, midtre og ringfinger lengde. Tommelen er på kanten og er halve størrelsen av hånden (rekker bare litt forbi håndflaten).

Kopier Hotell og Lim
venstre arm og hånd, Vend horisontalt Hotell og sted i tråd med den høyre skulderen.

Trinn 4

Å komme tilbake til beina, skygge dem i samme måte du gjorde armene: fokusere skygger på hver side av lårene for å gi dem en avrundet utseende og sted høydepunkter i en linje i nærheten av sentrum, ved siden av den mørke skyggen. Gjør du det gjør bena ser skinnende og metallisk. Føl deg fri til å skyve dette videre med lysere hotspots innenfor linjene av høydepunktene. Gjenta på det andre låret.

Trinn 5

Fortsett med linjer med skygge og høydepunkt på kalvene. Husk kurven av lårene og leggene når du tegner linjene. Eventuelt rave piksler for å skape en mer delikat skyggefullt område.

Bruk dark magenta for å skissere den forkortede gamasje-lignende mansjetten på sprite ankel og fylle på med samme magenta brukes på håret. for høydepunkter, bruke hotpink (igjen, fra sprite hår).

Legg en mørkere linje med skygge langs ytterkanten av mat og en blokk med skygge farge på toppen av foten, nær kanten av gamasjer.

5. Siste hånd

Trinn 1

Jeg lyste opp den indre delen av øynene samt lagt grå i det hvite slik at de er mindre sterk. I tillegg trakk jeg mint grønne låser bak hodet og fylt i rommet mellom de lange rosa låser og nakken (sett i det endelige bildet).

Trinn 2

I den opprinnelige design, Kandi har kuttet ut hjerter på sidene av hennes høyder. Etter å ha trukket hjerter i § 2, trinn 2
repeat for halvparten, et kvartal, og en åttendedel av en hjerte langs siden av låret hennes. Alternativt kan du opprette et nytt lag, trekke tre hjerter, og slette piksler som ikke er inne i låret. Shade med mørk rosa og fyll med hennes hudfarge. Gjenta på den andre siden.

Trinn 3

Jeg trakk en linje på toppen av foten hennes for å være litt mer som kneet (delt av som robot deler) samt trakk en liten boks ( 2 x 2
) i hjørnet av hennes kalv. Slett unødvendige piksler utenfor kroppens omriss.

Great Job, er du ferdig!

Lagre dokumentet som en gjennomsiktig GIF
eller PNG Anmeldelser for å bevare kvaliteten til de piksler og kanter. Hvis du er opptatt av å forstørre det, sørg for Nærmeste nabo
er valgt i Resample
rullegardinmenyen før resizing. Dette bevarer dine piksler i sin helhet og unngår uskarphet hardt arbeid

For flere tutorials på pixel art, prøv disse.