Pikselių meno akis. Pixel Art

Sąvoka „pikselių grafika“ nėra žinoma visiems, taip pat nėra pogrindžio slengas. Ką Vikipedija padės išsiaiškinti. Svarbiausia suprasti tai pikselių menas lemia tai, kaip buvo sukurtas raštas (pikselis po pikselio), o ne rezultatai. Todėl brėžiniai, gauti naudojant filtrus ar specialius atvaizduotojus, taip pat neįtraukiami. Pirmoje straipsnio dalyje, o gal net ir straipsnių serijoje, skirtoje šiam menui, parodysiu keletą man patikusių darbų.

Nuostabios iliustracijos, puikus šešėliavimas. („Polyfonken's Pixel Art“).

Tema gana plati. Yra kauliukų variantų.


Rodo Hunto iliustracijos labai spalvingos ir tikroviškos. Menininkas vektorinę grafiką derina su pikselių menu.


Brazilų ir vokiečių tinklaraštininkai Thiago, Pi, Jojo ir Mariana prisistato kaip jaukiai besijuokiantys pikselių personažai.

Šį paveikslą padarė Juanas Manuelis Daporta, naudodamas tik MS Paint! Darbas truko 8 mėnesius. Įspūdingas.

Pikseliai taip pat gyvena ne kompiuterių ekranuose. Nuostabu, kaip gerai suprantami pikselių paveikslėlių siužetai.

Kosmoso karai Super Robot Wars stiliumi. Pikselių meno pasaulyje Robersonas turi savo unikalų stilių.


Pašėlusių lėlių miestas. Iliustracija, nors ir nupiešta vektoriniu būdu, vis tiek atrodo kaip pikselių menas. Įdomus darbas.

Ši pikselių meno kryptis mane ypač domina. Šie paveikslai piešti ne ant ekrano, o ant drobės akriliniais dažais. Šį šedevrą sukūrė Ashley Anderson.

Pikselių miestai yra atskira didelė tema. Dažniausiai būna daug detalių ir siužetinių linijų. Šiame paveikslėlyje yra pylimas ir spalvingi balionai, sušių baras ir net protestuotojai.

Pixel Art yra labai populiarus žaidimams net šiomis dienomis ir tam yra keletas priežasčių!

Taigi, kas žavi „Pixel Art“:

  1. Suvokimas. Pikselių menas atrodo nuostabiai! Yra daug ką pasakyti apie kiekvieną atskirą sprite pikselį.
  2. Nostalgija.„Pixel Art“ sugrąžina puikų nostalgijos jausmą žaidėjams, kurie užaugo žaisdami „Nintendo“, „Super Nintendo“ ar „Genesis“ (kaip aš!)
  3. Mokymosi lengvumas. Pikselių menas yra vienas iš lengviausiai išmokstamų skaitmeninių menų, ypač jei esate labiau programuotojas nei menininkas ;]

Taigi, ar norite išbandyti savo jėgas „Pixel Art“? Tada sekite kartu su manimi ir aš jums parodysiu, kaip sukurti paprastą, bet efektyvų žaidžiamą personažą, kurį galėtumėte naudoti savo žaidime! Be to, kaip premiją, pažiūrėsime, kaip jį integruoti į „iPhone“ žaidimus!

Norint sėkmingai mokytis, jums reikės „Adobe Photoshop“. Jei jo neturite, galite atsisiųsti nemokamą bandomąją versiją iš „Adobe“ svetainės arba „torrent“.

Kas yra Pixel Art?

Prieš pradėdami, išsiaiškinkime, kas yra „Pixel Art“, nes tai nėra taip akivaizdu, kaip jūs manote. Paprasčiausias būdas apibrėžti, kas yra Pixel Art, yra nurodyti, kas tai nėra, būtent: viską, kur pikseliai sukuriami automatiškai. Štai keletas pavyzdžių:

Gradientas: pasirinkite dvi spalvas ir apskaičiuokite tarp jų esančių pikselių spalvą. Atrodo šauniai, bet tai ne „Pixel Art“!

Suliejimo įrankis: taškų aptikimas ir jų atkartojimas / redagavimas, kad būtų sukurta nauja ankstesnio vaizdo versija. Vėlgi, ne pikselių diagrama.

Išlyginamoji priemonė(dažniausiai generuoja naujus skirtingų spalvų pikselius, kad būtų kažkas „sklandaus“). Jūs turite jų vengti!

Kai kas sakys, kad net automatiškai sugeneruotos spalvos nėra „Pixel Art“, nes joms reikalingas sluoksnis, skirtas maišyti efektus (pikselių maišymas tarp dviejų sluoksnių pagal tam tikrą algoritmą). Tačiau kadangi dauguma įrenginių šiuo metu veikia su milijonais spalvų, šio teiginio galima nepaisyti. Tačiau naudojant nedidelį spalvų skaičių yra gera „Pixel Art“ praktika.

Kiti įrankiai kaip (linija) arba dažų kibiro įrankis(Paint Bucket) taip pat automatiškai generuoja pikselius, bet kadangi galite nustatyti, kad jie neišlygintų užpildytų pikselių kreivės, šie įrankiai laikomi tinkančiais Pixel Art.

Taigi, mes nustatėme, kad „Pixel Art“ reikalauja daug dėmesio, kai kiekvienas pikselis dedamas į sprite, dažniausiai ranka ir naudojant ribotą spalvų paletę. Pradėkime dirbti dabar!

Darbo pradžia

Prieš pradėdami kurti pirmąjį „Pixel Art“ išteklių, turėtumėte žinoti, kad „Pixel Art“ mastelio keisti negalima. Jei bandysite jį sumažinti, viskas atrodys neryškiai. Jei bandysite jį padidinti, viskas atrodys priimtina, jei naudosite mastelio keitimą, kuris yra dviejų kartotinis (bet, žinoma, aiškumo nebus).

Norėdami išvengti šios problemos, pirmiausia turite suprasti, kokio dydžio turi būti jūsų žaidimo personažas arba žaidimo elementas, o tada pradėti dirbti. Dažniausiai tai atsižvelgiama į įrenginio, į kurį nukreipiate, ekrano dydį ir tai, kiek „pikselių“ norite matyti.

Pavyzdžiui, jei norite, kad jūsų žaidimas atrodytų dvigubai didesnis „iPhone 3GS“ („Taip, aš tikrai noriu savo žaidimui suteikti pikselių retro išvaizdą!“), kurio ekrano skiriamoji geba yra 480 x 320 pikselių, tuomet turite padirbėti. esant pusei skiriamosios gebos šiuo atveju jis bus 240x160 pikselių.

Atidarykite naują Photoshop dokumentą ( Failas → Naujas…) ir nustatykite dydį, atitinkantį žaidimo ekrano dydį, tada pasirinkite savo veikėjo dydį.

Kiekviena ląstelė yra 32x32 pikselių!

Pasirinkau 32 x 32 piks. ne tik todėl, kad jis puikiai tinka mano pasirinktam ekrano dydžiui, bet ir todėl, kad 32 x 32 piks. taip pat yra 2 kartotinis, kuris yra patogus žaisliniams varikliams (plytelių dydžiai dažnai kartojasi iš 2, tekstūros lygiuojasi). 2 kartotinis, ir tt

Net jei jūsų naudojamas variklis palaiko bet kokį vaizdo dydį, visada galite pabandyti dirbti su lyginiu pikselių skaičiumi. Tokiu atveju, jei vaizdo mastelį reikia keisti, dydis bus geriau padalintas, todėl bus geresnis našumas.

Kaip nupiešti pikselių meno personažą

Žinoma, kad „Pixel Art“ grafika yra aiški ir lengvai skaitoma: veido bruožus, akis, plaukus, kūno dalis galite apibrėžti vos keliais taškais. Tačiau paveikslo dydis apsunkina užduotį: kuo mažesnis jūsų personažas, tuo sunkiau juos nupiešti. Norėdami praktiškiau atlikti užduotį, pasirinkite tai, kas iš charakterio bruožų bus mažiausi. Aš visada renkuosi akis, nes jos yra vienas geriausių būdų suteikti personažui gyvybės.

„Photoshop“ pasirinkite pieštuko įrankis(Pieštuko įrankis). Jei nerandate, tiesiog paspauskite ir palaikykite įrankį šepetėlio įrankis(Brush Tool) ir iškart pamatysite (jis turėtų būti antras sąraše). Jums tereikia pakeisti jo dydį iki 1 pikselio (galite spustelėti įrankių parinkčių juostoje ir pakeisti jo dydį arba tiesiog laikykite nuspaudę klavišą [).

Taip pat jums reikės Ištrynimo įrankis(Eraser Tool), todėl spustelėkite jį (arba paspauskite klavišą E) ir pakeiskite jo nustatymus pasirinkdami iš išskleidžiamojo sąrašo Režimas:(Režimas:) Pieštukas(Pieštukas) (kadangi šiuo režimu nevyksta).

Dabar pradėkime kurti pikselius! Nupieškite antakius ir akis, kaip parodyta paveikslėlyje žemiau:


ei! Aš sužavėtas!!

Jau galima būtų pradėti nuo Lineart (kur piešimas atliekamas linijomis), bet praktiškesnis būdas – piešti veikėjo siluetą. Gera žinia ta, kad šiame etape nereikia būti profesionalu, tiesiog pabandykite įsivaizduoti kūno dalių (galvos, kūno, rankų, kojų) matmenis ir pradinę veikėjo pozą. Pabandykite padaryti kažką panašaus į pilką:


Šiame etape jums nereikia būti profesionalu
Atminkite, kad taip pat palikau šiek tiek tuščios vietos. Tikrai nereikia užpildyti visos drobės, palikite vietos būsimiems kadrams. Tokiu atveju bus labai naudinga visoms išlaikyti vienodą drobės dydį.

Kai tik užbaigsite siluetą, laikas tai padaryti . Dabar turite būti atsargesni dėl pikselių išdėstymo, todėl kol kas nesijaudinkite dėl drabužių, šarvų ir kt. Kad būtumėte saugūs, galite pridėti naują sluoksnį, kad niekada neprarastumėte pradinio silueto.


Jei manote, kad pieštuko įrankis per lėtas piešti, visada galite jį naudoti (Line Tool), tik atminkite, kad negalėsite taip tiksliai išdėstyti pikselių, kaip tai padarytumėte naudodami pieštuką. Jums reikės nustatyti kaip žemiau:

Pasirinkite spausdami ir laikydami Stačiakampio įrankis(Stačiakampio įrankis)

Išskleidžiamajame sąraše eikite į įrankių parinkčių skydelį Pasirinkite įrankio režimą(Outline Draw Mode) pasirinkite Pixel , pakeiskite Svoris(Plotis) 1 pikseliu (jei dar nepadaryta) ir panaikinkite žymėjimą Anti-alias(Išlygina). Štai kaip turėtumėte būti:

Atkreipkite dėmesį, kad aš nesudariau apatinių pėdų kontūrų. Tai neprivaloma, nes pėdos nėra tokia svarbi kojų dalis, kad jos išsiskirtų, o drobėje išsaugosite vieną pikselių eilutę.

Spalvų ir šešėlių taikymas

Dabar esate pasiruošę pradėti dažyti mūsų personažą. Nesijaudinkite renkantis tinkamas spalvas, jas vėliau bus labai lengva pakeisti, tiesiog įsitikinkite, kad kiekviena turi „savo spalvą“. Naudokite numatytąsias spalvas skirtuke Pavyzdžiai(Langas → Pavyzdžiai).

Nuspalvinkite savo personažą, kaip parodyta žemiau (tačiau būkite kūrybingi ir naudokite savo spalvas!)


Gera, kontrastinga spalva pagerina jūsų objekto skaitomumą!
Atkreipkite dėmesį, kad aš vis dar nesudariau jokių drabužių ar plaukų kontūrų. Visada atminkite: išsaugokite kuo daugiau pikselių nuo nereikalingų kontūrų!

Negaiškite laiko dažydami kiekvieną pikselį. Norėdami pagreitinti darbą, naudokite tos pačios spalvos linijas arba dažų kibiro įrankis(Paint Bucket Tool), kad užpildytumėte spragas. Beje, jį taip pat reikės sukonfigūruoti. Pasirinkite dažų kibiro įrankisįrankių juostoje (arba tiesiog paspauskite G klavišą) ir pakeiskite tolerancija(Tolerancija) iki 0 ir panaikinkite žymėjimą Anti-alias(Išlygina).

Jei kada nors reikės naudoti Magic Wand įrankis(„Magic Wand Tool“) – labai naudinga priemonė, kuri parenka visus tos pačios spalvos pikselius, tada nustato jį taip pat, kaip „Paint Bucket“ įrankį – jokios tolerancijos ir anti-aliasing.

Kitas žingsnis, kuriam reikės tam tikrų žinių, yra pašviesinimas ir šešėliavimas. Jei neturite žinių, kaip parodyti šviesiąją ir tamsiąją puses, žemiau pateiksiu jums nedidelį nurodymą. Jei neturite laiko ar noro to išmokti, galite praleisti šį žingsnį ir pereiti į skyrių „Pagardinkite savo paletę“, nes juk jūs galite tiesiog padaryti savo šešėlį taip, kaip mano pavyzdys!


Visam turtui naudokite tą patį šviesos šaltinį

Stenkitės duoti kontūrus kaip norite/galite, nes po to turtas pradeda atrodyti įdomiau. Pavyzdžiui, dabar galite pamatyti nosį, susiraukusias akis, plaukų šluostę, kelnių klostes ir pan. Taip pat galite pridėti šviesių dėmių, atrodys dar geriau:


Tamsinant naudokite tą patį šviesos šaltinį

O dabar, kaip žadėjau, mažas šviesos ir šešėlių vadovas:

Paįvairinkite savo paletę

Daugelis žmonių naudoja numatytąsias paletės spalvas, tačiau kadangi daugelis žmonių naudoja šias spalvas, jas matome daugelyje žaidimų.

„Photoshop“ standartinėje paletėje yra didelis spalvų pasirinkimas, tačiau per daug juo nepasikliaukite. Geriausia susikurti savo spalvas spustelėjus pagrindinę paletę įrankių juostos apačioje.

Tada lange Color Picker naršykite dešinėje šoninėje juostoje, kad pasirinktumėte spalvą, o pagrindinę sritį – norimą ryškumą (šviesesnį arba tamsesnį) ir sodrumą (sultingesnį arba blankesnį).


Suradę tinkamą, spustelėkite Gerai ir iš naujo sukonfigūruokite „Paint Bucket“ įrankį. Nesijaudinkite, galite tiesiog atžymėti žymimąjį laukelį „Gryni“ ir, kai dažysite nauja spalva, visi nauji taškai su ta pačia fono spalva taip pat bus nudažyti.

Tai dar viena priežastis, kodėl svarbu dirbti su nedideliu skaičiumi spalvų ir visada naudoti tą pačią spalvą tam pačiam elementui (marškiniams, plaukams, šalmui, šarvams ir kt.). Tačiau nepamirškite kitoms sritims naudoti skirtingas spalvas, kitaip mūsų piešinys bus per daug perspalvintas!

Panaikinkite žymėjimą „Greti“, kad pasirinktus pikselius užpildytumėte ta pačia spalva

Jei norite, pakeiskite spalvas ir gaukite spalvingesnį personažų dažymą! Jūs netgi galite perspalvinti kontūrus, tik įsitikinkite, kad jie gerai susilieja su fonu.


Galiausiai atlikite fono spalvos testą: sukurkite naują sluoksnį po savo personažu ir užpildykite jį skirtingomis spalvomis. Tai būtina norint užtikrinti, kad jūsų personažas būtų matomas šviesiame, tamsiame, šiltame ir šaltame fone.


Kaip matote, anti-aliasing išjungiau visuose iki šiol naudojamuose įrankiuose. Nepamirškite to padaryti ir su kitais įrankiais, pvz. Elipsinė palapinė(Ovalios atrankos sritis) ir Lasso(Lasas).

Naudodami šiuos įrankius galite lengvai pakeisti pasirinktų dalių dydį ar net jas pasukti. Norėdami tai padaryti, naudokite bet kurį pasirinkimo įrankį (arba paspauskite klavišą M), kad pasirinktumėte sritį, dešiniuoju pelės mygtuku spustelėkite ir pasirinkite Nemokama transformacija(nemokama transformacija) arba tiesiog paspauskite Ctrl + T . Norėdami pakeisti pasirinktos srities dydį, vilkite vieną iš rankenėlių, esančių palei transformacijos rėmelio perimetrą. Norėdami pakeisti pasirinkimo dydį išlaikant formato santykį, laikykite nuspaudę klavišą Shift ir vilkite vieną iš kampinių rankenėlių.

Tačiau „Photoshop“ automatiškai išlygina viską, kas redaguojama naudojant Nemokama transformacija todėl prieš redaguodami eikite į Redaguoti → Parinktys → Bendra(Ctrl + K) ir pakeiskite vaizdo interpoliacija(Vaizdo interpoliacija) įjungta Artimiausia kaimynystė(Artimiausias kaimynas). Trumpai tariant, tuo Artimiausia kaimynystė nauja padėtis ir dydis apskaičiuojami labai apytiksliai, netaikomos naujos spalvos ar skaidrės, o pasirinktos spalvos išlaikomos.


„Pixel Art Drawing“ integravimas į „iPhone“ žaidimus

Šiame skyriuje sužinosite, kaip integruoti mūsų pikselių meną į iPhone žaidimą naudojant Cocos2d žaidimo sistemą. Kodėl aš galvoju tik apie iPhone? Kadangi straipsnių apie „Unity“ serijos dėka (pavyzdžiui: arba „Jetpack Joyride“ stiliaus žaidimas „Unity 2D“) jau žinote, kaip su jais dirbti „Unity“, ir iš straipsnių apie „Crafty“ (naršyklės žaidimai: „Snake“) ir Impact (įvadas į naršyklinių žaidimų žaidimų kūrimą sistemoje Impact) sužinojote, kaip juos įterpti ant drobės ir kurti naršyklinius žaidimus.

Jei nesate Cocos2D ar apskritai iPhone kūrimo naujokas, siūlau pradėti nuo vienos iš Cocos2d ir iPhone pamokų. Jei įdiegėte Xcode ir Cocos2d, skaitykite toliau!

Sukurkite naują projektą iOS → cocos2d v2.x → cocos2d iOS šablonas, pavadinkite jį PixelArt ir pasirinkite iPhone kaip įrenginį. Nuvilkite sukurtą pikselių piešinį, pavyzdžiui: sprite_final.png į savo projektą, tada atidarykite HelloWorldLayer.m ir pakeiskite inicijavimo metodą tokiu:

-(id) init ( if((self=)) ( CCSprite * herojus = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )

Mes pastatome sprite kairėje ekrano pusėje ir pasukame jį taip, kad jis būtų nukreiptas į dešinę. Sukompiliuokite, paleiskite ir tada ekrane pamatysite savo sprite:


Tačiau atminkite, kad, kaip aptarėme anksčiau šioje pamokoje, norėjome dirbtinai padidinti pikselių mastelį, kad kiekvienas pikselis pastebimai skirtųsi nuo kitų. Taigi įtraukite šią naują eilutę inicijavimo metodo viduje:

Hero skalė = 2,0;

Nieko sudėtingo, tiesa? Sukompiliuokite, paleiskite ir... palaukite, mūsų spritas yra neryškus!

Taip yra todėl, kad pagal numatytuosius nustatymus Cocos2d išlygina piešinį, kai jį padidina. Mums to nereikia, todėl pridėkite šią eilutę:

Ši eilutė sukonfigūruoja Cocos2d, kad vaizdų mastelis būtų pakeistas be slapyvardžio, todėl mūsų berniukas vis tiek atrodo „pikseliuotas“ Sukompiliuokite, paleiskite ir... taip, tai veikia!


Atkreipkite dėmesį į Pixel Art grafikos naudojimo pranašumus – galime naudoti mažesnį vaizdą nei rodomas ekrane, sutaupydami daug tekstūros atminties. Mums net nereikia daryti atskirų vaizdų tinklainės ekranams!

O kas toliau?

Tikiuosi, kad jums patiko ši pamoka ir sužinojote šiek tiek daugiau apie pikselių meną! Prieš atsisveikinant noriu duoti jums keletą patarimų:

  • Visada stenkitės nenaudoti slapyvardžio panaikinimo, gradientų ar per daug spalvų. Tai daroma jūsų pačių labui, ypač jei vis dar esate pradedantysis.
  • Jei TIKRAI norite mėgdžioti retro stilių, peržiūrėkite 8 bitų arba 16 bitų konsolinių žaidimų meną.
  • Kai kuriuose stiliuose nenaudojami tamsūs kontūrai, kituose neatsižvelgiama į šviesos ar šešėlio įtaką. Viskas priklauso nuo stiliaus! Pamokoje šešėlių nebrėžėme, tačiau tai nereiškia, kad neturėtumėte jų naudoti.

Pradedantiesiems atrodo, kad Pixel Art yra lengviausiai išmokstama grafika, tačiau iš tikrųjų tai nėra taip paprasta, kaip atrodo. Geriausias būdas tobulinti savo įgūdžius yra praktika, praktika, praktika. Labai rekomenduoju skelbti savo darbus Pixel Art forumuose, kad kiti menininkai galėtų patarti – tai puikus būdas patobulinti savo techniką! Pradėkite nuo mažo, sunkiai treniruokitės, gaukite atsiliepimų ir galėsite sukurti nuostabų žaidimą, kuris atneš jums daug pinigų ir džiaugsmo!

pikselių menas(rašoma be brūkšnelio) arba pikselių menas- skaitmeninio meno kryptis, kurią sudaro vaizdų kūrimas pikselių lygiu (t. y. minimalus loginis vienetas, kurį sudaro vaizdas). Ne visi rastriniai vaizdai yra pikselių menas, nors jie visi yra sudaryti iš pikselių. Kodėl? Nes galiausiai pikselių meno sąvoka apima ne tiek rezultatą, kiek iliustracijos kūrimo procesą. Pikselis po pikselio, ir viskas. Jei darysite skaitmeninę nuotrauką, ją labai sumažinkite (kad taptų matomi pikseliai) ir tvirtinkite, kad nupiešėte ją nuo nulio – tai bus tikra klastotė. Nors tikrai atsiras naivų paprastų, kurie pagirs už sunkų darbą.

Dabar tiksliai nežinoma, kada ši technika atsirado, šaknys pasimetusios kažkur aštuntojo dešimtmečio pradžioje. Tačiau vaizdų komponavimo iš smulkių elementų technika siekia daug senesnių meno formų, tokių kaip mozaika, siuvinėjimas kryželiu, kilimų pynimas ir karoliukų vėrimas. Pati frazė „pikselių menas“ kaip pikselių meno apibrėžimas pirmą kartą buvo pavartota Adele Goldberg ir Roberto Flegal straipsnyje žurnale Communications of the ACM (1982 m. gruodžio mėn.).

Pikselių menas sulaukė plačiausio pritaikymo kompiuteriniuose žaidimuose, o tai nenuostabu – tai leido sukurti resursų nereiklus ir tikrai gražiai atrodančius vaizdus (tuo pačiu jie atima daug laiko iš menininkas ir reikalauja tam tikrų įgūdžių, todėl reiškia gerą atlyginimą). Suklestėjimas, aukščiausias vystymosi taškas, oficialiai vadinamas vaizdo žaidimais antrosios ir trečiosios kartos konsolėse (XX amžiaus dešimtojo dešimtmečio pradžia). Tolesnė technologijų pažanga, pirmųjų 8 bitų spalvų atsiradimas, o vėliau „True Color“, trimatės grafikos plėtra - visa tai laikui bėgant nustūmė pikselių meną į antrą planą ir trečiuosius planus, o tada visiškai atrodė, kad pikselis. menas atėjo į pabaigą.

Kaip bebūtų keista, bet būtent ponas Mokslo ir technologijų pažanga 90-ųjų viduryje nustūmė pikselinę grafiką į paskutines pozicijas, o vėliau grąžino ją į žaidimą – pasauliui atskleidė mobiliuosius įrenginius mobiliųjų telefonų ir delninių kompiuterių pavidalu. Galų gale, kad ir koks naudingas būtų naujas prietaisas, visi žinome, kad jei bent jau negalite žaisti pasjanso, jis nieko vertas. Na, kur yra ekranas su maža raiška, ten yra pikselių menas. Kaip sakoma, sveiki sugrįžę.

Žinoma, savo vaidmenį sugrįžtant pikselinei grafikai suvaidino įvairūs retrogradiškai mąstantys elementai, kurie mėgsta nostalgizuoti senus gerus vaikystės žaidimus sakydami: „O, dabar taip nedaro“; estetai, gebantys įvertinti pikselių meno grožį, ir indie kūrėjai, nesuvokiantys šiuolaikinių grafikos grožybių (o kartais, nors ir retai, bet tiesiog nemokantys jas įgyvendinti savo projektuose), todėl lipdo pikselių meną. . Tačiau vis tiek nenuleiskime grynai komercinių projektų – aplikacijų mobiliesiems įrenginiams, reklamai ir interneto dizainui.Taigi dabar pikselių menas, kaip sakoma, yra plačiai paplitęs siauruose ratuose ir užsitarnavęs savotišką meno statusą „ne kiekvienam“. Ir tai nepaisant to, kad paprastam pasauliečiui tai itin prieinama, nes norint dirbti šia technika pakanka turėti po ranka kompiuterį ir paprastą grafinį redaktorių! (beje, gebėjimas piešti taip pat nekenkia) Užteks žodžių, eik prie esmės!

2. Įrankiai.

Ko reikia norint sukurti pikselių meną? Kaip jau sakiau aukščiau, pakanka kompiuterio ir bet kokio grafinio redaktoriaus, galinčio veikti pikselių lygiu. Galite piešti bet kur, net „Game Boy“, net „Nintendo DS“, net „Microsoft Paint“ (kitas dalykas, kad piešti pastaruoju yra labai nepatogu). Yra labai daug rastrinių redaktorių, daugelis jų yra nemokami ir pakankamai funkcionalūs, todėl kiekvienas gali pats nuspręsti dėl programinės įrangos.

Piešiu „Adobe Photoshop“, nes tai patogu ir jau seniai. Nemeluosiu ir, murmėdamas dirbtiniais dantimis, sakysiu, kad „Prisimenu, Photoshop dar buvo labai mažas, jis buvo Macintosh ir buvo su skaičiumi 1.0“ Taip nebuvo. Bet prisimenu „Photoshop 4.0“ (taip pat ir „Mac“). Ir todėl man pasirinkimo klausimas niekada nebuvo iškilęs. Ir todėl ne, ne, bet pateiksiu rekomendacijų dėl „Photoshop“, ypač ten, kur jos galimybės padės labai supaprastinti kūrybiškumą.

Taigi, jums reikia bet kokio grafinio redaktoriaus, leidžiančio piešti įrankiu viename kvadratiniame pikselyje (pikseliai gali būti ir ne kvadratiniai, pavyzdžiui, apvalūs, bet mums šiuo metu jie neįdomūs). Jei jūsų redaktorius palaiko bet kokį spalvų rinkinį, puiku. Jei taip pat leidžia išsaugoti failus – tiesiog puiku. Būtų malonu žinoti, kaip dirbti su sluoksniais, nes dirbant su gana sudėtingu paveikslu patogiau suskaidyti jo elementus į skirtingus sluoksnius, tačiau iš esmės tai yra įpročio ir patogumo reikalas.

Gal pradėkime? Tikriausiai laukiate slaptų gudrybių sąrašo, rekomendacijų, kurios išmokys piešti pikselių meną? Ir tiesa ta, kad to nėra daug. Vienintelis būdas išmokti piešti pikselių meną – piešti pačiam, bandyti, bandyti, nebijoti ir eksperimentuoti. Nesivaržykite kopijuoti kitų darbų, nebijokite atrodyti neoriginalūs (tik nepriimkite kieno nors kito darbų kaip savo, hehe). Kruopščiai ir apgalvotai analizuokite meistrų (ne mano) darbus ir pieškite, pieškite, pieškite. Straipsnio pabaigoje jūsų laukia keletas naudingų nuorodų.

3. Bendrieji principai.

Tačiau yra keletas bendrų principų, kuriuos verta žinoti. Jų tikrai nedaug, vadinu „principais“, o ne įstatymais, nes jie yra gana patariamojo pobūdžio. Juk jei pavyksta nupiešti išradingą pikselių meną apeinant visas taisykles – kam jie rūpi?

Paprasčiausią principą galima suformuluoti taip: mažiausias vaizdo vienetas yra pikselis ir, jei įmanoma, visi kompozicijos elementai turi būti jam proporcingi. Iššifruosiu: viskas, ką piešiate, susideda iš pikselių, o pikselis turi būti perskaitytas visame kame. Tai nereiškia, kad paveikslėlyje apskritai negali būti elementų, pavyzdžiui, 2x2 pikselių arba 3x3. Tačiau vis tiek geriau kurti vaizdą iš atskirų pikselių.

Brūkšnys ir apskritai visos nuotraukos linijos turi būti vieno pikselio storio (su retomis išimtimis).

Jokiu būdu nesakau, kad tai neteisinga. Bet tai vis tiek nėra labai gražu. Ir kad jis būtų gražus, atsiminkite dar vieną taisyklę: piešti be vingių, sklandžiai apvalinti. Yra toks dalykas kaip kinks – netvarkingi fragmentai, suteikia linijoms nelygią, dantytą išvaizdą (angliškai kalbančioje pikselių menininkų aplinkoje jie vadinami jaggies):

Kinksai atima piešinį natūralų glotnumą ir grožį. Ir jei 3, 4 ir 5 fragmentai yra akivaizdūs ir lengvai pataisomi, su kitais situacija yra sudėtingesnė - ten nutrūksta vienos grandinės dalies ilgis, tai atrodytų smulkmena, bet pastebima smulkmena. Reikia šiek tiek pasipraktikuoti, kad išmoktum pamatyti tokias vietas ir jų vengti. Kink 1 yra išmuštas iš linijos, nes jis yra vienas pikselis – o srityje, kurioje jis įstrigo, linija susideda iš 2 pikselių segmentų. Kad jo atsikratyčiau, sušvelninau kreivės įvedimą į posūkį, išplėsdamas viršutinį segmentą iki 3 pikselių ir perbraižydamas visą liniją 2 pikselių segmentais. 2 ir 6 pertraukos yra identiškos viena kitai – tai jau yra 2 pikselių ilgio fragmentai srityse, pastatytose iš pavienių pikselių.

Elementarus įstrižų linijų pavyzdžių rinkinys, kurį galima rasti beveik kiekviename pikselių meno vadove (mano nėra išimtis), padės išvengti tokių pertraukų piešiant:

Kaip matote, tiesi linija sudaryta iš vienodo ilgio atkarpų, nubrėžiant ją pasislinkusių vienu pikseliu – tik taip pasiekiamas tiesiškumo efektas. Labiausiai paplitę konstravimo būdai yra su 1, 2 ir 4 pikselių segmento ilgiu (yra ir kitų, tačiau pateiktų variantų turėtų pakakti beveik bet kokiai meninei idėjai įgyvendinti). Iš šių trijų populiariausiu drąsiai galima pavadinti 2 pikselių segmento ilgį: nubrėžkite segmentą, perkelkite rašiklį 1 pikseliu, nubrėžkite kitą segmentą, perkelkite rašiklį 1 pikseliu, nubrėžkite kitą segmentą:

Lengva, tiesa? Tiesiog reikia įpročio. Žinojimas, kaip nubrėžti pasvirusias linijas 2 pikselių žingsniais, bus naudingas izometrijai, todėl kitą kartą pažvelgsime į tai atidžiau. Apskritai tiesios linijos yra puiku – bet tik tol, kol iškyla užduotis nupiešti ką nors stebuklingo. Čia mums reikia kreivių ir daugybės skirtingų kreivių. Ir mes priimame paprastą kreivių linijų apvalinimo taisyklę: kreivės elementų ilgis turėtų mažėti/didėti palaipsniui.

Išėjimas iš tiesios linijos į apvalinimą atliekamas sklandžiai, aš nurodžiau kiekvieno segmento ilgį: 5 pikseliai, 3, 2, 2, 1, 1, vėl 2 (jau vertikaliai), 3, 5 ir toliau. Nebūtinai jūsų atveju bus naudojama ta pati seka, viskas priklauso nuo to, kokio lygumo reikia. Kitas apvalinimo pavyzdys:

Vėlgi, vengiame vingių, kurie taip gadina vaizdą. Jei norite patikrinti išmoktą medžiagą, čia turiu nežinomo autoriaus nupieštą Winamp skiną, tuščią:

Paveiksle yra grubių klaidų ir tiesiog nesėkmingas apvalinimas, ir randami įtrūkimai - pabandykite ištaisyti paveikslėlį pagal tai, ką jau žinote. Tai viskas man su linijomis, siūlau šiek tiek nupiešti. Ir tegul pavyzdžių paprastumas neapgauna, piešti galima tik piešdamas – net ir tokius paprastus dalykus.

4.1. Nupiešiame butelį su gyvuoju vandeniu.

1. Objekto forma, o jūs negalite naudoti spalvos.

2. Raudonas skystis.

3. Pakeiskite stiklo spalvą į mėlyną, pridėkite tamsintas vietas burbulo viduje ir šviesią sritį ant numatomo skysčio paviršiaus.

4. Pridėkite baltų paryškinimų ant burbulo ir 1 pikselio pločio tamsiai raudoną šešėlį ant skystų sričių, besiribojančių su burbulo sienelėmis. Atrodo gerai, ar ne?

5. Panašiai nupiešiame buteliuką su mėlynu skysčiu – čia tos pačios spalvos stiklas, plius trys mėlynos spalvos atspalviai skysčiui.

4.2. Piešiame arbūzą.

Nubraižykime apskritimą ir puslankį – tai bus arbūzas ir išpjauta riekelė.

2. Ant paties arbūzo pažymėkime išpjovą, o ant griežinėlio – ribą tarp plutos ir minkštimo.

3. Užpildykite. Spalvos iš paletės, vidutinis žalias atspalvis yra plutos spalva, vidutinis raudonas yra minkštimo spalva.

4. Pažymėkite pereinamąją sritį nuo žievelės iki minkštimo.

5. Šviesios juostelės ant arbūzo (pagaliau jis atrodo kaip pats). Ir, žinoma, sėklos! Jei sukryžminsite arbūzą su tarakonais, jie išsiskleis patys.

6. Prisimename. Šviesiai rausva spalva nurodome paryškinimus virš sėklų skyriuje, o išdėliodami pikselius šaškių lentos raštu, iš iškirptos pjūvio gauname tam tikrą tūrį (metodas vadinamas diteravimu, apie tai vėliau). Tamsiai raudonu atspalviu pažymime nuspalvintas vietas arbūzo pjūvyje, o tamsiai žalią (vėlgi šaškių lentelės taškai) suteikiame pačiam arbūzui apimties.

5. Dygiavimas.

Skirstymas arba maišymas – tai pikselių sumaišymo pagal aiškiai išdėstytą (ne visada) modelį dviejose skirtingų spalvų ribose srityse technika. Paprasčiausias, labiausiai paplitęs ir efektyvus būdas yra kaitalioti pikselius šaškių lentos šablonu:

Priėmimas gimė dėl (arba veikiau prieštaraujančių) techniniams apribojimams - platformose su ribotomis paletėmis, sumaišius dviejų skirtingų spalvų pikselius, buvo įmanoma gauti trečią, kurio paletėje nebuvo:

Dabar, beribių techninių galimybių epochoje, daugelis sako, kad diteravimo poreikis išnyko savaime. Tačiau tinkamas jo naudojimas gali suteikti jūsų darbui būdingą retro stilių, kurį atpažįsta visi senų vaizdo žaidimų gerbėjai. Asmeniškai man patinka naudoti dithering. Nelabai žinau, bet man tai patinka.

Dar dvi blaškymo parinktys:

Ką reikia žinoti apie diteravimą, kad galėtumėte juo naudotis. Mažiausias maišymo zonos plotis turi būti bent 2 pikseliai (tos pačios šaškės). Galima ir daugiau. Geriau nedaryti mažiau.

Žemiau pateikiamas blogo blaškymosi pavyzdys. Nepaisant to, kad tokią techniką dažnai galima pamatyti vaizdo žaidimų sprituose, turite žinoti, kad televizoriaus ekranas žymiai išlygino vaizdą, o tokios šukos, net ir judant, nebuvo užfiksuotos akimis:

Na, pakankamai teorijos. Siūlau dar šiek tiek pasitreniruoti.

Pikselių meną galima nupiešti bet kurioje rastrinės grafikos programoje, tai priklauso nuo asmeninių pageidavimų ir patirties (taip pat, žinoma, ir finansinių galimybių). Kažkas naudoja paprasčiausią „Paint“, aš tai darau „Photoshop“ programoje - nes, pirma, aš jau seniai ja dirbu, antra, man ten patogiau. Kažkaip nusprendžiau išbandyti nemokamą „Paint.NET“, man tai nepatiko - vargu ar atsisės automobilis, kuris atpažįsta svetimą automobilį su automatine pavarų dėže Zaporože. Mano darbdavys suteikia man licencijuotą programinę įrangą, todėl turiu ramią sąžinę prieš „Adobe Corporation“... Nors jų programų kainos yra neįsivaizduojamos, ir jos už tai dega pragare.

1. Pasiruošimas darbui.

Sukurkite naują dokumentą su bet kokiais nustatymais (tebūnie jis 60 pikselių pločio, 100 pikselių aukščio). Pagrindinis pikselių menininko įrankis yra pieštukas ( Pieštuko įrankis, iškviestas sparčiuoju klavišu B). Jei įrankių juostoje įjungtas teptukas (ir piktograma, vaizduojanti teptuką), užveskite pelės žymeklį virš jo, paspauskite ir palaikykite LMB- pasirodys mažas išskleidžiamasis meniu, kuriame turėtumėte pasirinkti pieštuką. Nustatykite rašiklio dydį į 1 pikselį (viršutiniame skydelyje kairėje, išskleidžiamasis meniu Šepetys):

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Dar keli naudingi deriniai. “ ctrl+“ ir „ ctrl-» priartinti ir tolinti vaizdą. Taip pat naudinga žinoti, kad presavimas ctrl ir " (citatos - Kalėdų eglutės arba rusiškas raktas " E“) įjungia ir išjungia tinklelį, o tai labai padeda piešti pikselių piešinį. Tinklelio žingsnį irgi reiktų patiems susireguliuoti, kažkam patogiau kai 1 pikselis, aš pripratau, kad langelio plotis 2 pikseliai. Spustelėkite Ctrl + K(arba eik į Redaguoti->Parinktys), pereikite prie reikalo Vadovai, tinklelis ir pjūviai ir įdiegti Tinklelis kas 1 pikselį(man, pasikartosiu, patogiau 2).

2. Brėžinys.

Galiausiai, pradėkime piešti. Kodėl reikia sukurti naują sluoksnį ( Ctrl + Shift + N), perjunkite į juodą rašiklio spalvą (paspaudę D nustato numatytąsias spalvas, juodą ir baltą) ir nupieškite veikėjo galvą, mano atveju tai tokia simetriška elipsė:

Pikselių menas pradedantiesiems. | Įvadas.


Pikselių menas pradedantiesiems. | Įvadas.

Jo apatinė ir viršutinė bazė yra 10 pikselių ilgio, tada yra 4 pikselių segmentai, trys, trys, vienas, vienas ir vertikali 4 pikselių aukščio linija. „Photoshop“ programoje patogu brėžti tiesias linijas su užspaudimu Shift, nors vaizdo mastelis pikselių mene yra minimalus, vis dėlto ši technika kartais sutaupo daug laiko. Jei suklydote ir per daug piešėte, užlipote kažkur praeityje - nenusiminkite, pereikite prie trintuko ( Trintukas taip pat l arba raktas " E“) ir ištrinkite tai, ko jums nereikia. Taip, būtinai nustatykite trintuką taip, kad nustatytumėte 1 pikselio rašiklio dydį, kad jis ištrintų pikselį po pikselio, ir pieštuko režimą ( Režimas: pieštukas), kitaip neištrins to, ko reikia. Grįžtant prie pieštuko, primenu jums per " B»

Apskritai ši elipsė nėra nubrėžta griežtai pagal pikselių meno taisykles, tačiau to reikalauja meninė koncepcija. Kadangi tai būsima galva, ji turės akis, nosį, burną – pakankamai detalių, kurios ilgainiui atkreips į save žiūrovo dėmesį ir atbaidys nuo noro klausti, kodėl galva tokia netaisyklingos formos.

Toliau piešiame, pridedame nosį, antenas ir burną:

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Dabar akys:

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Atkreipkite dėmesį, kad esant tokiam mažam masteliui, akys nebūtinai turi būti apvalios – mano atveju tai yra kvadratai, kurių kraštinės ilgis yra 5 pikseliai, kuriuose nėra nupiešti kampiniai taškai. Grįžus į pradinį mastelį, jie atrodys gana apvalūs, be to, sferiškumo įspūdį galima sustiprinti šešėlių pagalba (apie tai vėliau, žr. 3 pamokos skyrių). Tuo tarpu šiek tiek pakoreguosiu galvos formą, vienoje vietoje nuvalydamas porą pikselių, o kitoje – nudažydamas:

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Piešiame antakius (nieko, kad jie kabėtų ore - aš turiu tokį stilių) ir imituojame raukšles burnos kampučiuose, todėl šypsena tampa išraiškingesnė:

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Kampai kol kas atrodo nelabai gerai, viena iš pikselių meno taisyklių yra ta, kad kiekvienas potėpio pikselis ir elementai gali liesti ne daugiau kaip du gretimus pikselius. Bet jei atidžiai išnagrinėsite 80-ųjų pabaigos – 90-ųjų pradžios žaidimų spritus, šią klaidą ten galima rasti gana dažnai. Išvada - jei negalite, bet tikrai norite, tada galite. Šią detalę vėliau užpildymo metu galima žaisti su šešėliais, todėl kol kas piešime toliau. Liemuo:

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Kol kas nekreipk demesio i kulkšnis, atrodo nejaukiai, sutvarkysim kai pasipildysime. Nedidelis pataisymas: pridėkite diržą ir raukšles tarpkojo srityje, taip pat parinkite kelių sąnarius (naudojant nedidelius 2 px fragmentus, išsikišusius iš kojų linijos):

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

3. Užpildykite.

Kiekvienam personažo elementui kol kas mums užteks trijų spalvų - pagrindinės užpildo spalvos, šešėlio spalvos ir potėpio. Apskritai, remiantis pikselių meno spalvų teorija, pradiniame etape galite patarti daugybe dalykų, nedvejodami šnipinėti meistrų darbą ir tiksliai analizuoti, kaip jie parenka spalvas. Kiekvieno elemento potėpis, žinoma, gali būti paliktas juodas, tačiau tokiu atveju elementai tikrai susilies, man labiau patinka naudoti nepriklausomas spalvas, kurios yra artimos pagrindinei elemento spalvai, tačiau turi mažą sodrumą. Patogiausia nupiešti nedidelę paletę kur nors šalia savo personažo ir tada paimti iš jos spalvas naudojant lašintuvą ( Eyedropper įrankis, I):

Pasirinkę norimą spalvą, suaktyvinkite kaušelio įrankį ( Dažų kibiras, G). Taip pat nustatymuose būtinai išjunkite „Anti-alias“ funkciją, mums reikia, kad užpildymas aiškiai veiktų nubrėžtuose kontūruose ir neperžengtų jų:

Pikselių menas pradedantiesiems. | Įvadas.


Pikselių menas pradedantiesiems. | Įvadas.

Užpildome savo charakterį, kurio užpildyti negalima – piešiame rankiniu būdu pieštuku.

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Atkreipkite dėmesį į kulkšnis - dėl to, kad šios vietos yra tik 2 pikselių storio, turėjau atsisakyti potėpio iš abiejų pusių, o jį nupiešiau tik iš numatytos šešėlinės pusės, palikdamas pagrindinės spalvos liniją su storiu vieno pikselio. Taip pat atkreipkite dėmesį, kad antakius palikau juodus, nors tai nelabai svarbu.

„Photoshop“ yra patogus pasirinkimas pagal spalvų funkciją ( Pasirinkite-> Spalvų diapazonas, lašintuvu bakstelėję į norimą spalvą, gausime visų panašios spalvos sričių pasirinkimą ir galimybę akimirksniu jas užpildyti, tačiau tam reikia, kad jūsų personažo elementai būtų skirtinguose sluoksniuose, todėl kol kas svarstysime ši funkcija naudinga pažengusiems Photoshop naudotojams):

Pikselių menas pradedantiesiems. | Įvadas.


Pikselių menas pradedantiesiems. | Įvadas.

4. Šešėlis ir drebėjimas.

Dabar pasirinkite šešėlio spalvas ir pereikite prie pieštuko ( B) atsargiai išdėliokite šešėlines vietas. Mano atveju šviesos šaltinis yra kažkur kairėje ir aukščiau, prieš veikėją – todėl dešiniąsias puses pažymime šešėliu, akcentuodami apačią. Veidas taps turtingiausias šešėlyje, nes yra daug mažų elementų, kurie, viena vertus, išsiskiria reljefu naudojant šešėlį, o kita vertus, jie patys meta šešėlį (akys, nosis, mimikos raukšlės):

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Šešėlis yra labai galingas vizualinis įrankis, gerai suplanuotas šešėlis palankiai paveiks personažo išvaizdą – ir įspūdį, kurį jis padarys žiūrovui. Pikselių mene vienas ne vietoje padėtas pikselis gali sugadinti visą kūrinį, o tuo pačiu atrodytų, kad tokie smulkūs pataisymai gali padaryti vaizdą daug gražesnį.

Kalbant apie dirimas„Ai, tokio miniatiūrinio dydžio paveikslėlyje, mano nuomone, jis visiškai nereikalingas. Pats metodas susideda iš dviejų gretimų spalvų „minkymo“, o tai pasiekiama suskirstant pikselius. Tačiau, kad suprastumėte techniką, vis tiek pristatysiu nedidelius derinimo plotus ant kelnių, ant marškinių ir šiek tiek ant veido:

Pikselių menas pradedantiesiems. | Įvadas.

Pikselių menas pradedantiesiems. | Įvadas.

Apskritai, kaip matote, nieko ypač sudėtingo. pikselių menas patrauklu tuo, kad išmokęs kai kuriuos raštus kiekvienas gali puikiai piešti pats – tereikia atidžiai išstudijuoti meistrų darbus. Nors taip, kai kurios piešimo ir spalvų teorijos pagrindų žinios vis tiek nepakenks. Išdrįsk!

Ryte vaikščiodamas internete norėjau parašyti įrašą apie Pixel Art, ieškodamas medžiagos radau šiuos du straipsnius.

Šiais laikais dizainerio ir iliustratoriaus darbą palengvina tokios programos kaip Photoshop, Illustrator, Corel. Su jų pagalba galite visiškai dirbti nesiblaškydami dėl pikselių išdėstymo, kaip buvo praėjusio amžiaus pabaigoje. Visus reikiamus skaičiavimus atlieka programinė įranga – grafiniai redaktoriai. Tačiau yra žmonių, dirbančių kita kryptimi, ne tik kitaip, bet netgi visiškai priešingai. Būtent jie užsiima tuo pačiu senosios mokyklos pikselių išdėstymu, siekdami išskirtinio rezultato ir atmosferos savo darbe.

Pikselių meno pavyzdys. Fragmentas.

Šiame straipsnyje norėtume pakalbėti apie žmones, kurie užsiima pikselių menu. Atidžiau pažvelkite į geriausius jų kūrinius, kuriuos vien dėl įgyvendinimo sudėtingumo neperdedant galima vadinti šiuolaikinio meno kūriniais. Kūriniai, kuriuos žiūrint gniaužia kvapą.

Pixel Art. Geriausi darbai ir iliustratoriai


Miestas. Autorius: Zoggles


Pasakų pilis. Autorius: Tinuleaf


viduramžių kaimas. Autorius: docdoom


Kabantys Babilono sodai. Autorius: Mėnulio užtemimas


Gyvenamasis kvartalas. Autorius:


Į viršų