Adobe Photoshop: Tegn og animer en karakter ved hjelp av Pixel Art-teknikken. Hva er Pixel Art? Eksempler og hvordan du lærer det. Lage pikselkunst

" itemprop="image">

I denne 10-trinns How to Draw Pixel Art-opplæringen skal jeg lære deg hvordan du lager en "sprite" (en enkelt 2D-karakter eller -objekt). Selve begrepet kommer selvfølgelig fra videospill.

Jeg lærte å lage pikselkunst fordi jeg trengte det for grafikken i spillet mitt. Etter år med trening fikk jeg taket på det og begynte å forstå at pikselkunst er mer en kunst enn bare et verktøy. I dag er pikselkunst veldig populær blant spillutviklere og illustratører.

Denne opplæringen ble laget for mange år siden for å lære folk de enkle konseptene for å lage pikselkunst, men har blitt oppdatert mange ganger slik at den er vesentlig forskjellig fra originalversjonen. Det er mange opplæringsprogrammer på Internett om samme emne, men de virker alle for kompliserte eller langsomme for meg. pixel art er ikke vitenskap. Du bør ikke beregne vektorer når du lager pikselkunst.

Verktøy

En av hovedfordelene med å lage pikselkunst er at du ikke trenger noen avanserte verktøy - standard grafikkredigeringsprogram installert på datamaskinen din bør være nok. Det er verdt å nevne at det finnes programmer som er utviklet spesielt for å lage pikselkunst, som Pro Motion eller Pixen (for Mac-brukere). Jeg har ikke testet dem selv, men har hørt mye positive tilbakemeldinger. I denne opplæringen skal jeg bruke Photoshop, som, selv om det er dyrt, inneholder mange nyttige verktøy for å lage kunst, hvorav noen er veldig nyttige for pikselering.

Hvordan tegne pikselkunst i Photoshop

Når du bruker Photoshop, vil hovedvåpenet ditt være blyantverktøyet (B-tasten), som er et alternativ til penselverktøyet. Blyanten lar deg fargelegge individuelle piksler uten å overlappe farger.

Vi trenger to verktøy til: "Valg" (M-tast) og "Magic Wand" (W-tast) for å velge og dra, eller kopiere og lime inn. Husk at ved å holde nede Alt- eller Shift-tasten mens du gjør et valg, kan du legge til valgte objekter eller ekskludere dem fra gjeldende utvalgsliste. Dette er nyttig når du skal velge ujevne objekter.

Du kan også bruke en pipette til å overføre farger. Det er tusen grunner til at det er viktig å bevare farger i pikselkunst, så du vil ha noen farger og bruke dem om og om igjen.

Til slutt, sørg for at du husker alle hurtigtastene, da dette kan spare deg for mye tid. Legg merke til "X" som bytter mellom primær- og sekundærfarger.

Linjer

Piksler er de samme små fargede firkantene. Først må du forstå hvordan du effektivt arrangerer disse rutene for å lage linjen du ønsker. Vi skal se på de to vanligste typene linjer: rette og buede.

Rette linjer

Jeg vet hva du tenker: alt her er så enkelt at det ikke er noen vits i å gå inn i noe. Men når det kommer til piksler, kan selv rette linjer bli et problem. Vi må unngå taggete deler – små linestykker som får det til å se ujevnt ut. De vises hvis en del av linjen er større eller mindre enn de andre som omgir den.

Buede linjer

Når du tegner buede linjer, må du sørge for at nedgangen eller stigningen er jevn langs hele lengden. I i dette eksemplet, en pen linje har intervallene 6 > 3 > 2 > 1, men en linje med intervallene 3 > 1< 3 выглядит зазубренной.

Evnen til å tegne linjer er et sentralt element i pikselkunst. Litt lenger vil jeg fortelle deg om anti-aliasing.

Konseptualisering

For å komme i gang trenger du god idé! Prøv å visualisere hva du skal gjøre i pikselkunst – på papir eller bare i tankene dine. Når du har en ide om tegningen, kan du konsentrere deg om selve pikseleringen.

Temaer til ettertanke

• Hva skal denne spriten brukes til? Er det for et nettsted eller for et spill? Vil det være nødvendig å gjøre den animert senere? I så fall må den gjøres mindre og mindre detaljert. Omvendt, hvis du ikke jobber med spriten i fremtiden, kan du feste så mange deler til den du trenger. Bestem derfor på forhånd hva akkurat denne spriten er nødvendig for og velg de optimale parameterne.
• Hvilke begrensninger er det? Tidligere nevnte jeg viktigheten av å bevare blomster. Hovedgrunnen er den begrensede fargepaletten på grunn av systemkrav (noe som er ekstremt usannsynlig i vår tid) eller for kompatibilitet. Eller for nøyaktighet hvis du emulerer en bestemt stil av C64, NES, etc. Det er også verdt å vurdere dimensjonene til spriten din og om den skiller seg for mye ut fra bakgrunnsobjektene du trenger.

La oss prøve!

Det er ingen begrensninger i denne opplæringen, men jeg ville være sikker på at pikselkunsten min ville være stor nok til at du kunne se i detalj hva som skjer i hvert av trinnene. For dette formål bestemte jeg meg for å bruke Lucha Advokat, en karakter fra brytingens verden, som modell. Det ville passe perfekt inn i et kampspill eller et fartsfylt actionspill.

Krets

Det svarte omrisset vil være en god base for spriten din, så det er der vi starter. Vi valgte sort fordi det ser bra ut, men også er litt mørkt. Senere i opplæringen vil jeg fortelle deg hvordan du endrer fargen på omrisset for å øke realismen.

Det er to tilnærminger til å lage en kontur. Du kan tegne omrisset for hånd og deretter justere det litt, eller du kan tegne alt én piksel om gangen. Ja, du forsto alt riktig, vi snakker om tusen klikk.

Metoden du velger avhenger av størrelsen på spriten og pikseleringsferdighetene dine. Hvis spriten er veldig stor, ville det være mer logisk å tegne den for hånd for å lage omtrentlig form, og trim deretter. Tro meg, det er mye raskere enn å prøve å tegne den perfekte skissen med en gang.

I opplæringen min lager jeg en ganske stor sprite, så den første metoden vil bli vist her. Det blir lettere hvis jeg viser alt tydelig og forklarer hva som skjedde.

Trinn én: grov oversikt

Bruk musen eller nettbrettet til å tegne en grov kontur for spriten din. Pass på at det IKKE er FOR rått, noe som betyr at det ser omtrent ut slik du ser det endelige produktet ditt.

Skissen min falt nesten helt sammen med det jeg hadde planlagt.

Trinn to: Poler omrisset

Start med å forstørre bildet med 6 eller 8 ganger. Du bør se hver piksel tydelig. Og så rydde opp i omrisset. Spesielt er det verdt å ta hensyn til "stray pixels" (hele omrisset skal ikke være mer enn én piksel tykt), bli kvitt de taggete kantene og legg til de små detaljene vi savnet i det første trinnet.

Selv store sprites overskrider svært sjelden 200 x 200 piksler. Uttrykket "gjør mer med mindre" er en fin måte å beskrive pikseleringsprosessen på. Du vil snart se at selv én piksel betyr noe.

Forenkle omrisset så mye som mulig. Vi kommer inn på detaljene senere, nå må du jobbe med å finne de store pikslene, som for eksempel muskelsegmentering. Ting ser ikke bra ut akkurat nå, men vær litt tålmodig.

Farge

Når omrisset er klart får vi et slags fargeark som må fylles ut med farger. Maling, støping og andre verktøy vil hjelpe oss med dette. Å velge farger kan være vanskelig, men fargeteori er tydeligvis ikke temaet for denne artikkelen. Uansett, det er noen få grunnleggende konsepter du trenger å vite.

HSB fargemodell

Dette Engelsk forkortelse, satt sammen av ordene "Nyanse, metning, lysstyrke." Det er bare en av mange datamaskinfargemodeller (eller numeriske representasjoner av farger). Du har sikkert hørt om andre eksempler som RGB og CMYK. De fleste bilderedigerere bruker HSB for fargevalg, så vi fokuserer på det.

Hue– Nyanse er det vi pleide å kalle farge.

Metning– Metning – bestemmer intensiteten til fargen. Hvis verdien er 100 %, er dette maksimal lysstyrke. Hvis du senker den, vil matthet vises i fargen og den vil "grå".

Lysstyrke– lys som avgir farge. For eksempel, for en svart person er denne indikatoren 0 %.

Velge farger

Det er opp til deg å bestemme hvilke farger du skal velge, men det er noen ting du bør huske på:

• Kjedelige og umettede farger ser mer realistiske ut enn tegneserieaktige.
• Tenk på et fargehjul: jo lenger fra hverandre to farger er på hjulet, jo dårligere går de sammen. Samtidig ser rødt og oransje, som er i umiddelbar nærhet av hverandre, flott ut sammen.

• Jo flere farger du bruker, desto uskarkere vil tegningen din se ut. Velg derfor et par primærfarger og bruk dem. Husk at Super Mario på en gang ble laget utelukkende fra kombinasjoner av brunt og rødt.

Påføring av farger

Det er veldig enkelt å bruke farge. Hvis du bruker Photoshop, velg ganske enkelt det nødvendige fragmentet og velg det med en tryllestav(W-tasten) og fyll den deretter med primærfargen (Alt-F) eller sekundærfargen Ctrl-F).

Skyggelegging

Skyggelegging er en av de de viktigste delene søken etter å få status som halvguds pikselering. Det er på dette stadiet at spriten enten begynner å se bedre ut eller blir til et merkelig stoff. Følg instruksjonene mine og du vil definitivt lykkes.

Trinn én: velg en lyskilde

Først velger vi en lyskilde. Hvis spriten din er en del av et større fragment som har sine egne lyskilder, for eksempel lamper, fakler og så videre. Og de kan alle ha forskjellige effekter på hvordan spriten ser ut. Men å velge en fjern lyskilde som solen er en god idé for de fleste pikselkunst. For spill, for eksempel, må du lage en lysest mulig sprite, som deretter kan justeres til miljøet.

Jeg velger vanligvis et fjernt lys et sted oppe foran spriten, slik at kun fronten og toppen av spriten er opplyst og resten er skyggelagt.

Trinn to: direkte skyggelegging

Når vi har valgt en lyskilde, kan vi begynne å mørke områdene som er lengst unna. Vår belysningsmodell tilsier at nedre del av hodet, armer, ben osv. skal dekkes av skygge.

La oss huske at flate ting ikke kan kaste skygger. Ta et stykke papir, krøll det sammen og rull det over bordet. Hvordan skjønte du at det ikke lenger var flatt? Du så bare skygger rundt ham. Bruk skyggelegging for å fremheve folder i klær, muskler, pels, hudfarge og så videre.

Trinn tre: Soft Shadows

Den andre nyansen, som er lysere enn den første, bør brukes til å lage myke skygger. Dette er nødvendig for områder som ikke er direkte opplyst. De kan også brukes til overgang fra lyse til mørke områder, og på ujevne overflater.

Trinn fire: opplyste områder

Steder som mottar direkte lysstråler må også fremheves. Det er verdt å merke seg at det skal være færre høydepunkter enn skygger, ellers vil de forårsake unødvendig oppmerksomhet, det vil si at de skiller seg ut.

Spar deg selv for hodepinen ved å huske én enkel regel: først skyggene, så høylysene. Grunnen er enkel: hvis det ikke er skygger, vil for store fragmenter blåses ut, og når du legger skygger, må de reduseres.

Noen nyttige regler

Skygger er alltid en utfordring for nybegynnere, så her er noen regler du må følge mens du skygger.

1. Ikke bruk gradienter. Den vanligste feilen gjort av nybegynnere. Gradienter ser forferdelige ut og tilsvarer ikke engang hvordan lys spiller på overflater.
2. Ikke bruk myk skyggelegging. Jeg snakker om en situasjon hvor skyggen er for langt fra konturen, for da ser den veldig uskarp ut og forhindrer at lyskilden blir identifisert.
3. Ikke bruk for mange skygger. Det er lett å tenke at "jo flere farger, jo mer realistisk er bildet." Det være seg slik, i det virkelige liv Vi er vant til å se ting i mørke eller lyse spekter, og hjernen vår vil filtrere ut alt i mellom. Bruk kun to mørke (mørke og veldig mørke) og to lyse (lyse og veldig lyse) og legg dem over grunnfargen, ikke oppå hverandre.
4. Ikke bruk for like farger. Det er ikke noe reelt behov for å bruke nesten identiske farger med mindre du vil lage en virkelig uskarp sprite.

Dithering

Å bevare farger er noe pikselkunstskapere virkelig trenger å ta hensyn til. En annen måte å få flere skygger på uten å bruke flere farger kalles dithering. Akkurat som i tradisjonelt maleri"Skravering" og "krysskravering" brukes, det vil si deg, i bokstavelig, får du noe mellom de to fargene.

Enkelt eksempel

Her er et enkelt eksempel på hvordan du kan lage fire skyggeleggingsalternativer fra to farger, gjennom rasting.

Avansert eksempel

Sammenlign bildet ovenfor (opprettet ved hjelp av en gradient i Photoshop) med bildet som er laget med bare tre farger ved bruk av rasting. Vær oppmerksom på at forskjellige mønstre kan brukes til å lage "tilstøtende farger". Det vil være lettere for deg å forstå prinsippet hvis du lager flere mønstre selv.

applikasjon

Dithering kan gi din sprite det fantastiske retro-utseendet, ettersom mange tidlige videospill brukte teknikken kraftig på grunn av det lille antallet fargepaletter som er tilgjengelig (hvis du vil se mange eksempler på dithering, sjekk ut spillene utviklet for Sega Genesis). Selv bruker jeg ikke denne metoden så ofte, men for pedagogiske formål vil jeg vise hvordan den kan brukes på spriten vår.

Du kan bruke dither til ditt hjerte, men det er verdt å merke seg at bare noen få bruker det veldig bra.

Selektiv konturering

Selektiv konturering, også kalt valgt konturering, er en undertype av konturskyggelegging. I stedet for å bruke en svart linje, velger vi en farge som vil se mer harmonisk ut på spriten din. I tillegg endrer vi lysstyrken til denne omrisset nærmere kantene på spriten, slik at fargekilden kan bestemme hvilke farger vi skal bruke.

Frem til dette punktet har vi brukt en svart kontur. Det er ingenting galt med dette: svart ser bra ut, og lar også spriten skille seg ut fra de omkringliggende gjenstandene. Men ved å bruke denne metoden ofrer vi realisme, noe som kan være nyttig for oss i noen tilfeller, siden vår sprite fortsetter å se tegneserieaktig ut. Selektiv konturering blir kvitt dette.

Du vil legge merke til at jeg brukte selaut for å myke opp definisjonen av musklene hans. Til slutt begynner spriten vår å se ut som en enkelt helhet, snarere enn et stort antall separate fragmenter.

Sammenlign dette med originalen:

1. Utjevning

Måten utjevning fungerer på er enkel: å legge til mellomfarger på kantene for å få dem til å se jevnere ut. For eksempel, hvis du har en svart linje på en hvit bakgrunn, vil små grå piksler legges til bruddene langs kanten.

Teknikk 1: Utjevning av knekk

Generelt må du legge til mellomfarger der det er knekk, ellers vil linjen se hakkete ut. Hvis det fortsatt ser ujevnt ut, legg til et nytt lag med lysere piksler. Påføringsretningen til mellomlaget må falle sammen med kurvens retning.

Jeg tror ikke jeg kan forklare det bedre uten å gjøre det mer komplisert. Bare se på bildet så skjønner du hva jeg mener.

Teknikk 2: Avrunding av ujevnheter

Teknikk 3: slette linjeavslutninger

applikasjon

La oss nå bruke anti-aliasing på utskriften vår. Merk at hvis du vil at spriten din skal se bra ut mot en hvilken som helst bakgrunnsfarge, bør du ikke jevne ut utsiden av linjen. Ellers vil spriten din ha en veldig upassende glorie rundt seg der den møter bakgrunnen, og vil derfor skille seg for tydelig ut mot enhver bakgrunn.

Effekten er veldig subtil, men den er av stor betydning.

Hvorfor må du gjøre dette manuelt?

Du kan spørre: "Hvorfor ikke bare bruke et grafikkredigeringsfilter på spriten vår hvis vi vil at den skal se jevn ut?" Svaret er også enkelt – ikke et eneste filter vil gjøre spriten din like klar og ren som manuelt arbeid. Du vil ha full kontroll over ikke bare fargene du bruker, men også hvor du skal bruke dem. I tillegg vet du bedre enn noe filter hvor anti-aliasing vil være hensiktsmessig, og hvor det er områder hvor pikslene rett og slett vil miste kvaliteten.

Etterbehandling

Wow, vi nærmer oss det punktet hvor du kan slå av datamaskinen og ta en kald flaske øl fra kjøleskapet. Men den har ikke kommet enda! Den siste delen handler om hva som skiller den ivrige amatøren fra den erfarne profesjonelle.

Ta et skritt tilbake og ta en god titt på spriten din. Det er en mulighet for at det fortsatt ser "fuktig ut". Bruk litt tid på å perfeksjonere og sørge for at alt er perfekt. Uansett hvor sliten du allerede er, ligger den morsomme delen foran deg. Legg til detaljer for å få spriten din til å se mer interessant ut. Det er her dine pikseleringsferdigheter og erfaring kommer inn i bildet.

Du kan bli overrasket over det faktum at vår Lucha-advokat hele denne tiden ikke hadde øyne, eller at pakken han holdt var tom. Egentlig ligger grunnen i det faktum at jeg ønsket å holde ut med små detaljer. Legg også merke til pynten jeg la til pannebåndene hans, gylfen på buksene... og hvem ville en person vært uten brystvortene? Jeg gjorde også den nedre delen av overkroppen litt mørkere for å få armen til å stå mer ut mot kroppen.

Endelig er du ferdig! Lucha Lawyer er lett, fordi den har bare 45 farger (eller den kan være supertung - alt avhenger av begrensningene til paletten din) og oppløsningen er omtrent 150 x 115 piksler. Nå kan du åpne ølet ditt!

Full fremgang:

Det er alltid morsomt. Her er en GIF som viser utviklingen av spriten vår.

1. Lær det grunnleggende om kunst og praksis tradisjonelle teknikker. All kunnskap og ferdigheter som er nødvendige for å tegne og tegne kan brukes til pikselering.
2. Start med små sprites. Den vanskeligste delen er å lære å plassere mange detaljer ved å bruke et minimum antall piksler for ikke å gjøre sprites like store som mine.
3. Studer arbeidet til kunstnere du beundrer og ikke vær redd for å være uoriginal. Den beste måten læring - repeterende fragmenter av andres arbeid. For produksjon egen stil det tar mye tid.
4. Hvis du ikke har et nettbrett, kjøp et. Fast nervøse sammenbrudd og stress forårsaket av kontinuerlig klikking av venstre museknapp er ikke morsomt, og vil neppe imponere medlemmer av det motsatte kjønn. Jeg bruker en liten Wacom Graphire2 - jeg liker hvor kompakt og bærbar den er. Du foretrekker kanskje et større nettbrett. Før du kjøper, ta en kort prøvetur.
5. Del arbeidet ditt med andre for å få deres meninger. Dette kan også være en god måte å få nye nerdevenner på.

P.S.

Den originale artikkelen er lokalisert. Hvis du har lenker til kule opplæringsprogrammer som må oversettes, send dem til festen vår. Eller skriv direkte til gruppemeldingene

I denne opplæringen lærer du hvordan du gjør et bilde av en person til pikselkunst som fiktiv karakter arkadespill siden tidlig på 90-tallet.
James May - aka Smudgethis - utviklet denne stilen i 2011 for musikkvideo for en dubstep rock-akt. Neros første hit, Me & You - hvor han laget en animasjon for å vise gammelt spill med Neros to medlemmer. Spillet var et 2D-rytmeplattformspill med 16-bits grafikk som ligner på Double Dragon, men langt bedre enn 8-bits retroklassikere som Super Mario Bros.
For å lage denne stilen, må karakterene fortsatt være blokkerte, men mer komplekse enn de eldre spillene. Og selv om du må bruke en begrenset fargepalett for å oppnå utseende, husk at disse spillene fortsatt hadde 65 536 farger.
Her viser James deg hvordan du lager en karakter fra et bilde ved hjelp av en enkel fargepalett og blyantverktøyet.
Akkurat som animasjonsguiden, trenger du også et bilde av personen. James brukte et bilde av en punk som er inkludert i prosjektfilene for denne opplæringen.
Når du er ferdig, sjekk ut denne 16-biters After Effects-animasjonsveiledningen der James viser deg hvordan du tar denne karakteren i AE, animerer ham og bruker retrospilleffekter.

Trinn 1

Åpne Animation Guide (16 bit).psd og 18888111.jpg (eller bilde etter eget valg) for å bruke som base for karakteren. Et profilbilde i full lengde vil fungere best og vil hjelpe deg med å få fargepaletter og stiler for 16-bits figuren din.
Animasjonsopplæringen har flere positurer på individuelle lag. Velg den som den beste måten matcher posituren på bildet ditt - siden vi ikke har ben i rammen, gikk jeg med standard positur på nivå 1.

Steg 2

Bruk Rectangular Marquee Tool (M), velg hodet fra bildet ditt og kopier (Cmd /Ctrl + C) og lim det inn (Cmd /Ctrl + V) i animasjonsguiden (16 bit).psd.
Skaler bildet for å passe, proporsjonalt. Du vil legge merke til at siden PSD-dimensjonene er veldig små, vil bildet umiddelbart begynne å tegne en piksel.

Trinn 3

Lag et nytt lag og tegn omrisset med en enkelt piksel svart blyant (B), ved å bruke animasjonsguiden som følger med og bildet som base. \ P
Den medfølgende guiden hjelper deg med å utvikle en rekke karakterer fra større sjefsfigurer eller slankere kvinnelige. Dette er en grov guide for å komponere og animere pikselkunstkarakterene mine.

Trinn 4

Bruk pipetteverktøyet (I), prøv det mørkeste området av hudtonen på bildet og lag en liten firkant med farger. Gjør dette tre ganger til for å lage en firefarget hudtonepalett.
Lag et nytt lag under konturlaget og bruk en børste med én piksel og en firefarget fargepalett for å skyggelegge bildet (igjen, bruk bildet som guide). \ P
Det er best å lagre alle elementene i kunstverket eller forskjellige lag, da dette gjør det enkelt å gjenbruke dem på andre former. Dette er spesielt nyttig for skurker, siden de fleste 16-bits spill bruker veldig lignende tall. For eksempel kan en kompis ha en rød skjorte og en kniv, mens en senere er identisk bortsett fra en blå skjorte og en pistol.

Trinn 5

Gjenta denne prosessen for andre deler av figuren, skyggelegg stoffet for å matche andre elementer i originalbildet. Sørg for å fortsette prøvetakingen med pipetteverktøyet for å lage fargepaletter først, da dette gir et konsistent sett med farger som ser bra ut og passer til den relativt begrensede fargepaletten til 16-bits spill.

Trinn 6

Legg til data for å forbedre karakteren din med nyanser, tatoveringer, øredobber osv. Spis her og tenk på hvordan du vil at karakteren din skal fremstå i spillmiljøet. Kanskje de kan bruke en øks eller ha en robotarm?

Trinn 7

For å animere karakteren din, gjenta de foregående trinnene ved å bruke de fem andre lagene i animasjonsguiden. Denne prosessen kan ta litt tid å mestre og skape sømløse resultater, men snarveier kan gjøres ved å gjenbruke elementer fra tidligere rammer. For eksempel, i denne seks-rammers sekvensen, forblir hodet uendret.

Trinn 8

For å sjekke at animasjonssekvensen er i orden, åpner du animasjonspanelet i Photoshop og kontrollerer at dette øyeblikket bare det første bildet av animasjonen. Du kan legge til nye rammer og slå lag på og av for å lage din animasjon, men de fleste på en rask måte er å bruke kommandoen "Lag rammer fra lag" i panelets popup-meny (øverst til høyre).
Den første rammen er en tom bakgrunn, så velg den og klikk på panelets søppelikon (nederst) for å slette den.


Del 6: Antialiasing
Del 7: Teksturer og uskarphet
Del 8: Tile World

Forord

Det er mange definisjoner på pikselkunst, men her skal vi bruke dette: et bilde er pikselkunst hvis det er laget helt for hånd, og det er kontroll over fargen og posisjonen til hver piksel som tegnes. Selvfølgelig, i pixel art, brukes ikke inkludering eller bruk av børster eller uskarphet verktøy eller degraderte maskiner (ikke sikker), og andre programvarealternativer som er "moderne" av oss (faktisk stilt til vår disposisjon betyr "til vår disposisjon" , men logisk ser det mer riktig ut på denne måten). Det er begrenset til blyant- og fyllverktøyene.

Du kan imidlertid ikke si at pikselkunst eller ikke-pikselkunstgrafikk er mer eller mindre vakker. Det er mer rettferdig å si at pikselkunst er annerledes og bedre egnet for spill i retrostil (som Super Nintendo eller Game Boy). Du kan også kombinere teknikkene du har lært her med effekter fra ikke-pikselkunst for å lage en hybridstil.

Så her vil du lære den tekniske delen av pikselkunst. Jeg vil imidlertid aldri gjøre deg til kunstner... av den enkle grunn at jeg heller ikke er kunstner. Jeg vil verken lære deg menneskelig anatomi eller kunstens struktur, og jeg vil si lite om perspektiv. I denne opplæringen kan du finne mye informasjon om pikselkunstteknikker. Til slutt bør du være i stand til å lage karakterer og kulisser for spillene dine, forutsatt at du er oppmerksom, øver regelmessig og bruker tipsene som er gitt.

– Jeg vil også påpeke at bare noen av bildene som brukes i denne opplæringen er forstørret. For bilder som ikke er forstørret, ville det være bra om du tok deg tid til å kopiere disse bildene slik at du kan studere dem i detalj. Pikselkunst er essensen av piksler; å studere dem langveisfra er ubrukelig.

Til slutt må jeg takke alle kunstnerne som ble med meg i å lage denne guiden på en eller annen måte: Shin, for hans skitne arbeid og strekkunst, Xenohydrogen, for hans geni med farger, Lunn, for hans kunnskap om perspektiv, og Panda, den strenge Ahruon, Dayo og Kryon for deres sjenerøse bidrag til å illustrere disse sidene.

Så la meg komme tilbake til poenget.

Del 1: De riktige verktøyene

Dårlige nyheter: du vil ikke tegne en eneste piksel i denne delen! (Og det er ingen grunn til å hoppe over det, ikke sant?) Hvis det er et ordtak jeg hater, er det "det er ingen dårlige verktøy, bare dårlige arbeidere." Jeg trodde faktisk at ingenting kunne være lengre fra sannheten (bortsett fra kanskje «det som ikke dreper deg gjør deg sterkere»), og pikselkunsten er en veldig god bekreftelse. Denne veiledningen tar sikte på å introdusere deg til de forskjellige programvarene som brukes til å lage pikselkunst og hjelpe deg med å velge riktig program.

1. Noen gamle ting

Når de velger programvare for å lage pikselkunst, tenker folk ofte: «Valg av programvare? Dette er galskap! Alt vi trenger for å lage pikselkunst er maling! (tilsynelatende en lek med ord, tegning og et program)" Tragisk feil: Jeg snakket om dårlige verktøy, dette er det første. Paint har én fordel (og bare én): du har den allerede hvis du kjører Windows. På den annen side har den mange mangler. Dette er en (ufullstendig) liste:

*Du kan ikke åpne mer enn én fil samtidig
* Ingen palettkontroll.
*Ingen lag eller gjennomsiktighet
* Ingen ikke-rektangulære valg
* Få hurtigtaster
* Fryktelig upraktisk

Kort sagt, du kan glemme Paint. Nå skal vi se på den virkelige programvaren.

2. Til slutt...

Folk tenker da: "Ok, Paint er for begrenset for meg, så jeg bruker min venn Photoshop (eller Gimp eller PaintShopPro, de er det samme), som har tusenvis av funksjoner." Dette kan være bra eller dårlig: hvis du allerede kjenner et av disse programmene, kan du lage pixel art (med alle alternativer for automatisk kantutjevnelse slått av, og mange av de avanserte funksjonene slått av). Hvis du ikke allerede kjenner disse programmene, vil du bruke mye tid på å lære dem, selv om du ikke trenger all funksjonaliteten deres, noe som vil være bortkastet tid. Kort sagt, hvis du allerede bruker dem i lang tid, kan du lage pikselkunst (jeg bruker personlig Photoshop av vane), men ellers er det mye bedre å bruke programmer som spesialiserer seg på pikselkunst. Ja, de finnes.

3. Krem

Det er mange flere programmer designet for pixel art enn man skulle tro, men her vil vi kun vurdere de beste. De har alle svært like egenskaper (palettkontroll, gjentatte forhåndsvisninger av fliser, gjennomsiktighet, lag osv.). Forskjellene deres er i bekvemmelighet... og pris.

Charamaker 1999 - bra program, men distribusjonen ser ut til å ha stoppet opp.

Graphics Gale er mye morsommere og enklere å bruke, og den selges for rundt $20, noe som ikke er så verst. La meg legge til at prøveversjonen ikke er begrenset i tid, og kommer med nok sett til å lage nok god grafikk. Det fungerer bare ikke med .gif, noe som ikke er et slikt problem siden .png er bedre uansett.

Programvaren som oftere brukes av pikselartister er ProMotion, som (åpenbart) er mer praktisk og raskere enn Graphics Gale. Å ja, hun er kjær! du kan kjøpe fullversjon for et beskjedent beløp... 50 euro ($78).
La oss ikke glemme Mac-vennene våre! Pixen er et godt program tilgjengelig for Macintosh, og det er gratis. Dessverre kan jeg ikke fortelle deg mer fordi jeg ikke har en Mac. Oversetterens notat (fra fransk): Linux-brukere (og andre) bør prøve , og GrafX2. Jeg oppfordrer deg til å prøve dem alle i demoversjoner og se hvilke som passer for deg. Til syvende og sist er det en smakssak. Bare vit at når du først begynner å bruke et program, kan det være veldig vanskelig å bytte til noe annet.

Fortsettelse følger…

Oversetterens notater fra fransk til engelsk

Dette er en flott opplæring om pikselkunst, skrevet av Phil Razorbak fra LesForges.org. Tusen takk til Phil Razorback for å tillate OpenGameArt.org å oversette disse guidene og legge dem ut her. (Fra oversetteren til russisk: Jeg spurte ikke om tillatelse, hvis noen vil, kan du hjelpe, jeg har ikke nok erfaring med å kommunisere på engelsk, langt mindre fransk).

Oversetterens notat fra engelsk til russisk

Jeg er en programmerer, ikke en artist eller en oversetter, jeg oversetter for artistvennene mine, men uansett hva som er bortkastet, la det være her.
Originalen på fransk er et sted her www.lesforges.org
Oversettelse fra fransk til engelsk her: opengameart.org/content/les-forges-pixel-art-course
Jeg oversatte fra engelsk fordi jeg ikke kan fransk.
Og ja, dette er min første publikasjon, så designforslag er velkomne. I tillegg er jeg interessert i spørsmålet: skal de resterende delene publiseres som separate artikler, eller er det bedre å oppdatere og supplere denne?

Hvis du elsket å leke med Lego som barn (eller fortsette å leke med det selv som voksen), vil du sannsynligvis være interessert i isometrisk pikselkunst. Det kan være teknisk og mer som vitenskap enn illustrasjon. Men i slik kunst er det ikke noe 3D-perspektiv; du kan flytte elementer miljø med maksimal enkelhet.

Vi vil lage karakteren som et logisk utgangspunkt for pikselkunsten, da det vil hjelpe med å bestemme proporsjonene for de fleste andre gjenstandene vi kan lage. Men først må du lære deg grunnleggende om isometrisk pikselkunst, og deretter gå videre til å lage en karakter; hvis du ikke vil lære det grunnleggende og tegne en kube, hopper du til trinn 3. La oss nå komme i gang.

1. Piksellinjer

Disse linjene er grunnlaget for den vanligste (og interessante) stilen til isometrisk pikselkunst, stilen vi vil bruke i denne opplæringen:

De representerer to piksler sammen for hver piksel ned. Disse linjene ser relativt myke ut og brukes til firkantede overflater:

De mest brukte linjestrukturene (som den nedenfor) vil fungere bra, men tegningen vil bli mer kantete og grovere for hvert trinn du øker:

For kontrast, her er noen ujevnt strukturerte linjer:

Veldig kantete og ser ikke ut

Vakker. Unngå å bruke dem.

2. Volumer

Karakteren vår vil ikke akkurat følge isometriens lover, så la oss først lage en enkel kube for å bestemme proporsjonene.

Lag et nytt dokument i Photoshop med oppløsning 400 x 400 piksler.

Jeg liker å åpne et ekstra vindu for den samme filen ved å bruke menyen Vindu > Ordne > Nytt vindu/leksjoner.(Vindu > Ordne > Nytt vindu...). Dette gjør det mulig å jobbe med forstørrelse 600% overvåke resultatene i zoomvinduet 100% . Å bruke rutenettet er opp til deg, men noen ganger synes jeg det er mer påtrengende enn nyttig.

La oss zoome inn på dokumentet og lage en av linjene 2:1

Jeg foretrekker å bruke 5% grå i stedet for svart, slik at jeg da kan legge til skygger (svart og lav opasitet) og kunne velge hver farge separat ved hjelp av tryllestaven.

Det er flere måter å tegne en linje på:

1. Ved hjelp av Linjeverktøy(Linjeverktøy) med modus Piksler(Piksler), umerket Utjevning(Anti-alias) og tykkelse 1 px. Mens du tegner, skal vinkelverktøytipset vises 26,6°. Linjeverktøyet kan faktisk ikke kalles praktisk; det skaper ujevne linjer hvis vinkelen ikke er presis.

2. Du må lage et utvalg 20 x 40 piksler, og velg deretter K blyant(Blyantverktøy) tykkelse 1 px og tegn en prikk i nedre venstre hjørne av utvalget, og hold deretter nede tasten Skifte klikk til høyre øverste hjørne. Photoshop vil automatisk lage en ny linje mellom de to punktene. Øver du deg kan du lage rette linjer uten å markere på denne måten.

3. Du må tegne to piksler med en blyant, velg dem, klikk Ctrl + Alt, og dra deretter markeringen til en ny plassering slik at pikslene møtes i hjørnene. Du kan også flytte utvalget ved å bruke piltastene på tastaturet mens du holder nede Alt. Denne metoden kalles Alt-offset(Alt-Nudge).

Så vi laget den første linjen. Velg det og flytt det som i trinn 3 eller bare kopier og lim inn, flytt det nye laget nedover. Etter det, bla den andre linjen horisontalt gjennom menyen Rediger > Transformer > Vend horisontalt(Rediger > Transformer > Vend horisontalt). Jeg bruker denne funksjonen så ofte at jeg til og med har laget en hurtigtast for den!

La oss nå kombinere linjene våre:

Så, Alt-Offset igjen, snu kopien vertikalt og slå sammen de to halvdelene for å fullføre overflaten vår:

Det er på tide å legge til den "tredje dimensjonen". Alt-forskyv den firkantede overflaten og flytt den til 44px ned:

Tips: Hvis du holder nede piltastene mens du beveger deg Skifte, vil utvalget flyttes til 10 piksler i stedet for én.

For å lage en penere kube, la oss myke opp hjørnene ved å fjerne pikslene lengst til venstre og lengst til høyre fra rutene. Legg deretter til vertikale linjer:

Fjern nå de unødvendige linjene i bunnen av kuben. For å begynne å fargelegge figuren vår, velg hvilken som helst farge (helst en lys nyanse) og fyll den øverste firkanten med den.

Øk nå lysstyrken til den valgte fargen med 10% (Jeg anbefaler å bruke HSB-glidebryterne på kontrollpanelet) for å male lysere hjørner langs fronten av vår fargede firkant. Fordi vi har beskåret kuben litt, vil disse lyse linjene se finere ut når de sitter over de svarte kantene (i stedet for å erstatte dem) som på bildet nedenfor:

Nå må vi fjerne de svarte kantene. Bruk trikset fra den andre linjetegningsmetoden for viskelæret (som skal settes til normal Viskelærverktøy(Viskelærverktøy), modus Blyant(Blyantmodus), tykkelse 1 px).

Velg fargen på den øverste firkanten ved hjelp av Pipetter(Eyedropper Tool). For raskt å velge dette verktøyet mens du tegner med blyant eller fyll, trykk Alt. Bruk den resulterende pipettefargen til å fylle den vertikale linjen nedover midten av kuben. Deretter reduserer du fargelysstyrken med 15% og fyll venstre side av kuben med den resulterende fargen. Reduser lysstyrken ytterligere 10% for høyre side:

Kuben vår er ferdig. Den skal se ren og relativt jevn ut når den zoomes inn 100% . Vi kan fortsette.

3. Legg til et tegn

Karakterens stil kan være helt annerledes, du står fritt til å endre proporsjoner eller elementer som du ønsker. Vanligvis går jeg for en tynn kropp og et litt større hode. Karakterens tynne kropp hjelper til med å holde linjene rette og enkle.

Det ville være logisk å starte med øynene. Hvis vi var strenge med de isometriske vinklene, skulle det ene øyet på ansiktet være lavere, men i liten skala kan vi neglisjere denne funksjonen for å gjøre ansiktene til karakterene mer behagelige. Dette vil gjøre tegningen pen selv til tross for størrelsen.

Vi gjør karakteren liten, for etter en stund vil du kanskje legge til en bil, et hus, et helt torg eller til og med en by til ham. Derfor bør karakteren være et av de minste elementene i illustrasjonen. Det er også verdt å vurdere grafisk effektivitet; prøv å gjøre karakteren så attraktiv som mulig med et minimum antall piksler (stort nok til å avbilde ansiktstrekk). I tillegg er små gjenstander mye lettere å tegne. Unntaket er når du bare vil vise en karakter, deres følelser eller deres likhet med noen.

La oss lage et nytt lag. Øynene trenger bare to piksler - en for hvert øye, med en tom piksel i mellom. Hopp over én piksel til venstre for øynene, legg til en vertikal linje:

Legg nå til et nytt lag og tegn en horisontal stripe med to piksler, dette vil være munnen. Bruk piltastene på tastaturet for å flytte rundt, og når du finner den perfekte posisjonen, flytt laget nedover. Gjør det samme med haken, det skal bare være en lengre linje:

Tegn inn håret og toppen av hodet, og myk deretter hjørnene. Du bør få noe lignende som dette:

La nå en tom piksel ved siden av det andre øyet, legg til kinnskjegg (som også vil hjelpe med å tegne karakterens ører) og noen flere piksler over dem helt til hårfestet. La så igjen en tom piksel, det er her øret starter og en linje som markerer enden av hodet. Fortsett og myk opp vinklene der linjene møtes:

Legg til en piksel for toppen av øret og endre formen på hodet hvis du vil; hodene er vanligvis trukket allerede i nakkeområdet:

Tegn en linje fra haken - dette vil være brystet. Begynnelsen av halsen vil være i øreområdet, noen få piksler ned og et par piksler diagonalt slik at karakterens skuldre er synlige:

Nå, på stedet der skuldrene slutter, legg til en vertikal lengdelinje 12 piksler for å lage utsiden av hånden, og innsiden vil være to piksler til venstre. Koble linjene nederst med et par piksler for å lage en hånd/neve (det er ingen detalj i dette tilfellet, så ignorer det elementet) og rett over der hånden slutter, legg til en linje 2:1 , som vil fungere som en midje, for så å trekke inn brystlinjen og få en gjennomført overkropp. Karakterens andre arm er ikke synlig, men den vil se normal ut siden den er dekket av overkroppen.

Du bør ende opp med noe sånt som dette:

Selvfølgelig kan du bruke alle proporsjoner du liker; Jeg foretrekker å tegne forskjellige varianter neste før du bestemmer deg for hvilken som er best.

Nå for den nedre overkroppen legger vi til noen flere vertikale linjer. Jeg liker å dra 12 piksler mellom såler og midje. Ben er veldig enkle å tegne, du trenger bare å gjøre ett ben litt lenger, noe som vil tillate karakteren å se mer voluminøs ut:

Nå legger vi til farge. Å finne en god hudfarge er alltid vanskelig, så hvis du vil bruke den samme som i denne opplæringen, er koden #FFCCA5. Å velge farger for de gjenværende elementene bør ikke være et problem. Etter dette bestemmer du lengden på ermene, plasseringen av skjorteklippet og stilen. Legg nå til en mørk stripe for å skille skjorten fra kroppen. Jeg foretrekker å holde alle dekorative elementer lysere enn svarte (spesielt når mange elementer er på samme nivå, for eksempel fra en skjorte til skinn eller bukser). Dette gjør at du får den nødvendige kontrasten uten at bildet blir for grovt.

Du kan legge til lyseffekter i nesten alle fargesoner. Unngå å bruke for mange skygger eller bruk gradienter. Flere piksler ( 10% eller 25% ) en lys eller mørk farge er nok til å få elementene til å se tredimensjonale ut og fjerne flatheten i illustrasjonen. Hvis du ønsker å legge til en pop av farger til et område som allerede har 100% lysstyrke, prøv å redusere metningen. I noen tilfeller (som å tegne hår) kan dette være en god måte å variere tonene på.

Det er mange håralternativer du kan prøve. Her er noen ideer:

Når du fortsetter å lage karakterer, vil små ting som klesstil, ermelengde, bukselengde, tilbehør, klær og hudfarge komme godt med for variasjon.

Nå gjenstår det bare å plassere begge elementene sammen og evaluere hvordan de ser ut i én setting:

Hvis du vil eksportere kreasjonen din, er PNG det ideelle formatet.

Det er det, jobb gjort!

Jeg håper denne leksjonen ikke var for forvirrende. Jeg tror jeg har dekket så mange tips og estetiske triks som mulig. Du kan fritt utvide din isometriske pikselverden - bygninger, biler, interiør, eksteriør. Å gjøre alt dette er mulig og til og med interessant, selv om det ikke er så lett.

Oversetter: Shapoval Alexey

Tegning på pikselnivå har sin nisje kunst. Ved hjelp av enkle piksler skapes ekte mesterverk. Selvfølgelig kan du lage slike tegninger på et ark, men det er mye enklere og mer riktig å lage bilder ved hjelp av grafiske redaktører. I denne artikkelen vil vi analysere i detalj hver representant for slik programvare.

Verdens mest populære grafikkredigeringsprogram som kan fungere på pikselnivå. For å lage slike bilder i denne editoren trenger du bare å utføre noen få foreløpige oppsettstrinn. Her er alt en kunstner trenger for å skape kunst.

Men på den annen side er det ikke nødvendig med en slik overflod av funksjonalitet for å tegne pikselkunst, så det er ingen vits i å betale for mye for programmet hvis du skal bruke det kun til en spesifikk funksjon. Hvis du er en av slike brukere, anbefaler vi deg å ta hensyn til andre representanter som er spesifikt fokusert på pikselgrafikk.

PyxelEdit

Dette programmet har alt du trenger for å lage slike malerier og er ikke overmettet med funksjoner som kunstneren aldri vil trenge. Oppsett er ganske enkelt; fargepaletten lar deg endre hvilken som helst farge til ønsket tone, og fri bevegelse av vinduer vil hjelpe deg med å tilpasse programmet for deg selv.

PyxelEdit har en funksjon for å sette fliser på lerretet, noe som kan være nyttig når du lager objekter med lignende innhold. Prøveversjonen er tilgjengelig for nedlasting på den offisielle nettsiden og har ingen bruksbegrensninger, så du kan prøve produktet før du kjøper.

Pixelformer

I utseende og funksjonalitet er dette den mest ordinære grafikkredigereren, men den har bare flere tilleggsmuligheter for å lage pikselbilder. Dette er et av få programmer som distribueres helt gratis.

Utviklerne posisjonerer ikke produktet sitt som egnet for å lage pikselkunst, kaller de det på en flott måte tegne logoer og ikoner.

GraphicsGale

I nesten all slik programvare prøver de å introdusere et bildeanimasjonssystem, som oftest viser seg å være rett og slett ubrukelig pga. begrensede funksjoner og feil gjennomføring. GraphicsGale er ikke så flink med dette heller, men denne funksjonen kan i hvert fall fungere normalt.

Når det gjelder tegning, er alt her nøyaktig det samme som i hoveddelen av redaktører: grunnleggende funksjoner, store farge palett, muligheten til å lage flere lag og ingenting ekstra som kan forstyrre arbeidet ditt.

Charamaker

Character Maker 1999 er et av de eldste slike programmer. Den ble laget for å lage individuelle karakterer eller elementer, som deretter skulle brukes i andre animasjonsprogrammer eller implementeres i dataspill. Derfor er det lite egnet for å lage malerier.

Grensesnittet er ikke veldig bra. Nesten ingen av vinduene kan flyttes eller endre størrelse, og standardoppsettet er ikke veldig bra. Du kan imidlertid venne deg til det.

Pro Motion NG

Dette programmet er ideelt i nesten alt, og starter med et gjennomtenkt grensesnitt, der det er mulig å flytte vinduer uavhengig av hovedvinduet til et hvilket som helst punkt og endre størrelsen, og slutter med en automatisk bytte fra pipette til blyant , som rett og slett er en utrolig praktisk funksjon.

Ellers er Pro Motion NG bare god programvare for å lage pikselgrafikk på alle nivåer. Prøveversjonen kan lastes ned fra den offisielle nettsiden og testes for å bestemme om fullversjonen skal kjøpes videre.

Asepritt

Det kan med rette betraktes som det mest praktiske og vakre programmet for å lage pikselkunst. Grensesnittdesignen alene er verdt det, men det er ikke alle fordelene med Aseprite. Det er muligheten til å animere et bilde, men i motsetning til tidligere representanter er det implementert kompetent og enkelt å bruke. Det er alt du trenger for å lage vakre GIF-animasjoner.