Maliit na pixel art. Adobe Photoshop: Gumuhit at Mag-antus ng isang Pixel Art Character

Ang mga graphics ng pixel (na pagkatapos ay tinukoy bilang simpleng pixel art) ay lalong nakapagpapaalala ng kanilang mga sarili sa mga araw na ito, lalo na sa pamamagitan ng mga indie game. Ito ay naiintindihan, dahil sa ganitong paraan maaaring punan ng mga artista ang laro ng maraming iba't ibang mga character at hindi gugugol ng daan-daang oras na pagmomodelo ng mga three-dimensional na bagay at mga kumplikadong bagay ng pagguhit ng kamay. Kung nais mong malaman ang pixel art, ang unang bagay na kailangan mong gawin ay alamin kung paano gumuhit ng tinatawag na "sprites". Pagkatapos, kapag hindi ka na kinakatakutan ng mga sprite, maaari kang magpatuloy sa animasyon at kahit na ibenta ang iyong trabaho!

Mga hakbang

Bahagi 1

Mag-download ng magagandang mga editor ng imahe. Maaari kang, siyempre, lumikha ng mga obra maestra sa Paint, ngunit ito ay mahirap at hindi masyadong maginhawa. Magagawa itong mas mahusay sa isang bagay tulad ng:

• Photoshop
• Paint.net
• Pixen

1. Bumili ng isang graphic tablet. Kung hindi mo gusto ang pagguhit gamit ang isang mouse, pagkatapos ay isang tablet at isang stylus ang kailangan mo. Ang mga tablet ng Wacom ay, sa pamamagitan ng, ang pinaka-tanyag.

   I-on ang "grid" sa iyong graphics editor. Sa totoo lang, kung hindi sinusuportahan ng iyong graphic editor ang grid display, dapat mong isipin ang tungkol sa paghahanap para sa isa pang programa. Papayagan ka ng grid na malinaw mong makita kung saan at paano matatagpuan ang bawat indibidwal na pixel. Bilang isang patakaran, ang bead ay nakabukas sa pamamagitan ng menu na "View".

   • Maaaring kailanganin mong i-tweak nang kaunti ang mga setting ng display upang matiyak na ang bawat segment na mesh ay talagang nag-render ng isang pixel. Iba't ibang ginagawa ito ng bawat programa, kaya maghanap ng payo kung paano ito gagawin.

2. Gumuhit gamit ang isang 1 pixel brush. Anumang mga editor ng graphics ay dapat mayroong tool sa Pencil. Piliin ito at itakda ang laki ng brush sa 1 pixel. Ngayon ay maaari kang gumuhit ... pixel ayon sa pixel.

   Bahagi 2

   Pagsasanay ng mga pangunahing kaalaman

   1. Lumikha ng isang bagong imahe. Dahil natututo kang gumuhit sa istilo ng pixel art, hindi ka dapat maghangad sa mga epic canvase. Kung natatandaan mo, sa Super Mario Bros. ang buong screen ay 256 x 224 mga pixel, at si Mario mismo ay umaangkop sa isang puwang na 12 x 16 na mga pixel!

      Palakihin. Oo, kung hindi man ay hindi mo makikita ang mga indibidwal na pixel. Oo, madaragdagan mo ito nang labis. Sabihin nating 800% ay medyo normal.

      Alamin na gumuhit ng mga tuwid na linya. Mukhang magiging simple, ngunit kung bigla kang, sa isang lugar sa gitna, gumuhit ng isang linya na 2 pixel na makapal na may nanginginig na kamay, pagkatapos ay ang pagkakaiba ay tatama sa iyong mga mata. Gumuhit ng mga tuwid na linya hanggang sa kailangan mong buhayin ang tuwid na tool sa pagguhit ng linya. Dapat mong malaman kung paano gumuhit ng mga tuwid na linya sa pamamagitan ng kamay!

      Alamin upang gumuhit ng mga linya ng hubog. Ang linya ng hubog ay dapat magkaroon, sabihin natin, pantay na "mga linya ng linya" (na malinaw na nakikita sa figure sa itaas lamang). Sabihin nating, simula sa pagguhit ng isang hubog na linya, gumuhit ng isang tuwid na linya ng 6 na mga pixel, sa ibaba nito - isang tuwid na linya ng tatlo, sa ibaba nito - isang tuwid na linya ng dalawa, at sa ibaba nito - ng isang pixel. Sa kabilang banda, iguhit ang parehong bagay (nakasalamin, siyempre). Ang pag-unlad na ito ang itinuturing na pinakamainam. Ang mga curve na iginuhit ayon sa pattern na "3-1-3-1-3-1-3" ay hindi nakakatugon sa mga pamantayan ng pixel art.

      Huwag kalimutan na burahin ang mga pagkakamali. Ang tool ng Eraser ay dapat na ayusin tulad ng isang lapis, na may sukat ng brush na 1 pixel. Kung mas malaki ang pambura, mas mahirap na hindi burahin ang labis, kaya't ang lahat ay lohikal.

   Bahagi 3

   Lumikha ng unang sprite

   Isipin kung ano ang ihahatid sa sprite. Ito ay magiging static? Animated? Ang isang static sprite ay maaaring puspos ng mga detalye hanggang sa punto ng kabiguan, ngunit mas mahusay na gawing mas simple ang isang animated upang sa paglaon ay hindi ka gugugol ng maraming oras sa muling paggawa ng lahat ng mga detalye sa lahat ng mga frame ng animasyon. Sa pamamagitan ng paraan, kung ang iyong sprite ay dapat na ginamit sa iba, kung gayon dapat silang lahat ay iguhit sa parehong estilo.

   Alamin kung mayroong anumang mga espesyal na kinakailangan para sa sprite. Kung naghahanap ka, sabihin, ng isang proyekto, makatuwiran na asahan ang mga kinakailangan para sa mga kulay o laki ng file. Gayunpaman, magiging mas mahalaga ito nang kaunti pa, kapag nagsimula ka nang magtrabaho sa malalaking proyekto na may maraming iba't ibang mga sprite.

   • Sa layunin ng pagsasalita, sa mga araw na ito, ang mga kinakailangan para sa laki o paleta ng mga sprite ay bihirang isulong. Gayunpaman, kung gumuhit ka ng mga graphic para sa isang laro na i-play sa mas matandang mga system ng paglalaro, pagkatapos ay kailangan mong isaalang-alang ang lahat ng mga limitasyon.

   1. Iguhit ito Ang isang sketch sa papel ay ang batayan ng anumang sprite, dahil sa ganitong paraan ay mauunawaan mo kung paano ang hitsura ng lahat at, kung kinakailangan, maaari mong iwasto nang maaga ang isang bagay. Bilang karagdagan, maaari mo ring subaybayan ang sketch ng papel sa paglaon (kung mayroon ka pang tablet).

      • Walang ekstrang mga detalye para sa pag-sketch! Iguhit ang anumang nais mong makita sa huling pagguhit.

   2. Ilipat ang sketch sa isang editor ng graphics. Maaari mong subaybayan ang isang sketch ng papel sa iyong tablet, maaari mong i-redraw ang lahat sa pamamagitan ng kamay, pixel ayon sa pixel - hindi mahalaga, ang pagpipilian ay iyo.

      • Kapag binabalangkas ang sketch, gumamit ng 100% itim para sa balangkas. Kung mayroon man, manu-mano mong babaguhin ito sa paglaon, ngunit sa ngayon mas madali para sa iyo na magtrabaho nang itim.

   3. Pinuhin ang balangkas ng sketch. Sa kontekstong ito, siyempre, maaari mong sabihin nang magkakaiba - burahin ang lahat ng hindi kinakailangan. Ano ang punto - ang balangkas ay dapat na 1 pixel makapal. Alinsunod dito, mag-zoom in at burahin, burahin ang hindi kinakailangan ... o tapusin ang nawawala gamit ang isang lapis.

      • Habang nag-sketch ka, huwag makagambala sa mga detalye - darating ang kanilang turn.

   Bahagi 4

   Pangkulay sa sprite

   1. Magsipilyo sa teorya ng kulay. Tingnan ang palette upang makita kung aling mga kulay ang gagamitin. Ang lahat ay simple doon: ang karagdagang mga kulay ay mula sa bawat isa, mas magkakaiba ang mga ito sa bawat isa; mas malapit ang mga kulay sa bawat isa, mas magkatulad ang mga ito at mas mahusay silang magkatinginan.

      • Pumili ng mga kulay na gagawing maganda ang iyong sprite at hindi kagat ang iyong mga mata. At oo, ang mga kulay ng pastel ay dapat na iwasan (maliban kung ang iyong buong proyekto ay tapos na sa ganitong istilo).

   2. Pumili ng maraming kulay. Ang mas maraming mga kulay na iyong ginagamit, mas "nakakagambala" ang iyong sprite, sa gayon magsalita. Tumingin sa klasikong pixel art at subukang bilangin kung gaano karaming mga kulay ang ginagamit doon.

      • Mario - mayroon lamang tatlong mga kulay (kung pinag-uusapan natin ang klasikong bersyon), at kahit na ang mga iyon ay matatagpuan sa palette na halos malapit sa bawat isa.
      • Sonic - kahit na ang Sonic ay iginuhit na may mas maraming detalye kaysa kay Mario, batay pa rin ito sa 4 na mga kulay (at mga anino).
      • Ang Ryu ay halos isang klasiko ng mga sprite, tulad ng naintindihan sa mga laro ng pakikipaglaban, ang Ryu ay malalaking lugar na ipininta sa mga simpleng kulay, kasama ang isang maliit na anino para sa delimitasyon. Gayunpaman, si Ryu ay medyo mas kumplikado kaysa sa Sonic - mayroon nang limang mga kulay at mga anino.

   3. Kulayan ang sprite. Gamitin ang Paint Bucket Tool upang kulayan ang iyong sprite at huwag mag-alala tungkol sa lahat ng bagay na mukhang flat at walang buhay - wala nang ibang inaasahan sa yugtong ito. Ang paraan ng paggana ng Paint Bucket ay simple - punan nito ang lahat ng mga pixel ng kulay na na-click mo sa kulay na iyong pinili hanggang sa maabot nito ang mga hangganan.

   Bahagi 5

   Magdagdag ng mga anino

   Magpasya sa isang light source. Ano ang punto: Kailangan mong magpasya kung anong anggulo ang mahuhulog na ilaw sa sprite. Sa pag-iisip na ito, maaari kang lumikha ng mga kapani-paniwala na mga anino. Oo, hindi magkakaroon ng "ilaw" sa literal na kahulugan, ang punto ay upang isipin kung paano ito mahuhulog sa pagguhit.

   • Ang pinakasimpleng solusyon ay upang ipalagay na ang mapagkukunan ng ilaw ay napakataas sa itaas ng sprite, bahagyang sa kaliwa o kanan nito.

   1. Simulang maglagay ng mga anino gamit ang mga kulay na mas madidilim kaysa sa mga pangunahing kulay. Kung ang ilaw ay nahuhulog mula sa itaas, nasaan ang anino? Tama iyon, kung saan ang direktang ilaw ay hindi mahuhulog. Alinsunod dito, upang magdagdag ng isang anino, magdagdag lamang ng ilang higit pang mga layer sa sprite na may mga pixel ng kaukulang kulay sa itaas o sa ibaba ng balangkas.

      • Kung babawasan mo ang setting na "Contrast" ng kulay ng batayan at bahagyang taasan ang setting ng "Liwanag", makakakuha ka ng isang mahusay na kulay para sa pag-render ng anino.
      • Huwag gumamit ng gradients. Ang mga gradiente ay masama. Ang mga gradiente ay mukhang mura, hacky at hindi propesyonal. Ang isang epekto na katulad ng mga gradient ay nakamit gamit ang diskarteng diskarte (tingnan sa ibaba).

   2. Huwag kalimutan ang penumbra. Pumili ng isang kulay sa pagitan ng batayang kulay at ng kulay ng anino. Gamitin ito upang lumikha ng isa pang layer - ngunit sa pagitan ng mga layer ng dalawang kulay na ito. Ang resulta ay isang epekto ng paglipat mula sa isang madilim na lugar patungo sa isang ilaw na lugar.

      Gumuhit ng mga highlight. Ang highlight ay kung saan ang pinaka-ilaw ay bumagsak sa sprite. Maaari kang gumuhit ng isang highlight kung kukuha ka ng isang kulay na bahagyang mas magaan kaysa sa batayang kulay. Ang pangunahing bagay ay hindi upang madala ng nakasisilaw, ito ay nakakagambala.

   Bahagi 6

   Gumagamit kami ng mga advanced na diskarte sa pagguhit

   Gumamit ng pagnipis. Ang pamamaraan na ito ay maaaring maghatid ng isang pagbabago sa anino. Sa pag-decimation, maaari mong muling likhain ang gradient effect na may kaunting mga kulay lamang sa pamamagitan ng muling pagposisyon ng mga pixel upang lumikha ng isang epekto sa paglipat. Ang bilang at posisyon ng mga pixel ng dalawang magkakaibang kulay ay linlangin ang mata sa nakikita ang iba't ibang mga anino.

   • Ang mga nagsisimula ay madalas na inaabuso ang pagnipis, huwag maging katulad nito.

   1. Huwag kalimutan ang tungkol sa anti-aliasing (pag-aalis ng mga iregularidad ng tabas). Oo, ang tanda ng pixel art ay ang maliwanag na "pixelity" ng imahe. Gayunpaman, minsan nais mo ang mga linya na magmukhang medyo hindi gaanong kapansin-pansin, medyo mas makinis. Dito pumapasok ang anti-aliasing.

      • Magdagdag ng mga intermediate na kulay sa mga curve. Gumuhit ng isang layer ng intermediate na kulay sa paligid ng tabas ng curve na nais mong makinis. Kung mukhang angular pa rin ito, magdagdag ng isa pang layer, mas magaan.
      • Kung nais mong hindi mag-blend ang sprite sa background, huwag gumamit ng anti-aliasing sa panlabas na gilid ng sprite mula sa labas.

   2. Alamin na gumamit ng mapiling rendering. Ano ang punto: ang landas ay iginuhit na may isang kulay na katulad sa mga ginamit para sa pagpuno. Ang resulta ay isang hindi gaanong "cartoonish" na imahe, at tiyak na dahil sa mas makatotohanang hitsura ng tabas. Subukan, sabihin, nang pili-pili ang pagbibigay ng balat habang iniiwan ang klasikong itim na balangkas para sa damit o mga item.

Pixel art (nakasulat nang walang gitling) o graphics ng pixel - ang direksyon ng digital art, na binubuo sa paglikha ng mga imahe sa antas ng pixel (iyon ay, ang minimum na lohikal na yunit na binubuo ng isang imahe). Hindi lahat ng mga bitmap ay pixel art, bagaman lahat sila ay binubuo ng mga pixel. Bakit? Dahil sa huli ang konsepto ng pixel art ay sumasaklaw sa hindi gaanong resulta bilang proseso ng paglikha ng isang ilustrasyon. Pixel ayon sa pixel, at iyon lang. Kung kukuha ka ng isang digital na larawan, sukatin ito pababa (upang makita ang mga pixel) at i-claim na iginuhit mo ito mula sa simula - iyon ay magiging isang tunay na palsipikasyon. Bagaman tiyak na magkakaroon ng mga walang kamuwang muwang na papuri sa iyo sa iyong pagsusumikap.

Hindi alam ngayon kung kailan eksaktong ipinanganak ang diskarteng ito, ang mga ugat ay nawala sa kung saan sa unang bahagi ng 1970s. Gayunpaman, ang pamamaraan ng pagbubuo ng mga imahe mula sa maliliit na elemento ay bumalik sa mas sinaunang mga porma ng sining, tulad ng mosaic, cross stitching, carpet weaving at beading. Ang kaparehong pariralang "pixel art" bilang isang kahulugan ng pixel art ay unang ginamit sa isang artikulo nina Adele Goldberg at Robert Flegal sa journal na Communication ng ACM (Disyembre 1982).

Kakatwa sapat, ngunit ito ay si G. Siyentipiko at Teknolohikal na Pagsulong, na nagtulak ng mga pixel graphics sa huling mga posisyon noong kalagitnaan ng 90, at kalaunan ay ibinalik ito sa laro - ipinapakita ang mga mobile device sa mundo sa anyo ng mga cell phone at PDA. Pagkatapos ng lahat, gaano man kapaki-pakinabang ang isang bagong bagong aparato, alam mo at alam ko na kung hindi mo man ito magawang maglaro ng solitaryo, walang halaga ito. At kung saan may isang screen na may mababang resolusyon, mayroong pixel art. Tulad ng sinasabi nila, maligayang pagdating pabalik.

2. Mga kasangkapan.

Ano ang kailangan mo upang lumikha ng pixel art? Tulad ng sinabi sa itaas, isang computer at anumang graphic editor na may kakayahang magtrabaho sa antas ng pixel ay sapat na. Maaari kang gumuhit kahit saan, kahit na sa Game Boy, kahit sa Nintendo DS, o kahit sa Microsoft Paint (ibang bagay na ang pagguhit sa huli ay labis na nakakagambala). Mayroong maraming mga editor ng bitmap, marami sa kanila ay libre at sapat na gumagana na ang bawat isa ay maaaring magpasya sa software sa kanilang sarili.

Kaya, kailangan mo ng anumang editor ng graphics na nagbibigay-daan sa iyo upang gumuhit gamit ang isang tool sa isang square pixel (ang mga pixel ay maaari ding hindi parisukat, halimbawa bilog, ngunit hindi sila interesado sa amin sa ngayon). Kung sinusuportahan ng iyong editor ang anumang hanay ng mga kulay, mahusay. Kung pinapayagan ka ring mag-save ng mga file, mahusay iyan. Magiging maganda rin na makapagtrabaho kasama ang mga layer, dahil ang pagtatrabaho sa isang medyo kumplikadong larawan, mas maginhawa upang mabulok ang mga elemento nito sa iba't ibang mga layer, ngunit sa pangkalahatan ito ay isang bagay ng ugali at ginhawa.

3. Pangkalahatang prinsipyo.

Ngunit may ilang mga pangkalahatang prinsipyo na hindi nasasaktan malaman. Kakaunti talaga sa kanila, tinawag ko silang "mga prinsipyo", at hindi mga batas, sapagkat ang mga ito ay likas na maipayo. Pagkatapos ng lahat, kung namamahala ka upang gumuhit ng isang makinang na larawan ng pixel na ina-bypass ang lahat ng mga patakaran - sino ang nagmamalasakit sa kanila?

Ang pinaka-pangunahing prinsipyo ay maaaring formulate tulad ng sumusunod: ang minimum na unit ng isang imahe ay isang pixel, at, kung maaari, ang lahat ng mga elemento ng komposisyon ay dapat na katimbang dito. Tatalakayin ko: ang lahat na iyong iginuhit ay binubuo ng mga pixel, at ang pixel ay dapat mabasa sa lahat. Hindi ito nangangahulugan na maaaring walang mga elemento sa larawan, halimbawa, 2x2 pixel, o 3x3. Ngunit mas mabuti pa rin na bumuo ng isang imahe mula sa mga indibidwal na pixel.

Stroke at, sa pangkalahatan, ang lahat ng mga linya ng pagguhit ay dapat na isang pixel makapal (na may mga bihirang pagbubukod).

Pinipigilan ng mga bali ang pagguhit ng natural na kinis at kagandahan nito. At kung ang mga fragment 3, 4 at 5 ay halata at madaling maiwawasto, ang sitwasyon sa iba ay mas kumplikado - doon ang haba ng isang solong piraso sa kadena ay nasira, tila isang maliit na bagay, ngunit isang kapansin-pansin na maliit. Kailangan ng kaunting kasanayan upang malaman na makita ang mga nasabing lugar at maiwasan ito. Ang Kink 1 ay na-knock out sa linya dahil ito ay isang solong pixel - habang sa lugar kung saan ito naka-wed in, ang linya ay binubuo ng mga 2-pixel na segment. Upang mapupuksa ito, pinalambot ko ang pagpasok ng curve sa liko sa pamamagitan ng pagpapalawak ng tuktok na segment sa 3 mga pixel at muling pagdidilig ng buong linya sa 2 mga segment ng pixel. Ang mga Kinks 2 at 6 ay magkatulad sa bawat isa - sila ay mga fragment na ng 2 pixel ang haba sa mga lugar na itinayo ng solong mga pixel.

Ang isang simpleng hanay ng mga halimbawa ng mga pahilig na linya, na maaaring matagpuan sa halos bawat pixel art tutorial (ang aking walang kataliwasan), ay makakatulong upang maiwasan ang mga naturang kink kapag gumuhit:

Tulad ng nakikita mo, ang isang tuwid na linya ay binubuo ng mga segment ng parehong haba, inilipat ng isang pixel habang iginuhit ito - ito ang tanging paraan upang makamit ang epekto ng linearity. Ang pinakakaraniwang mga pamamaraan sa pagtatayo na may haba ng segment na 1, 2 at 4 na mga pixel (may iba pa, ngunit ang ipinakita na mga pagpipilian ay dapat sapat upang ipatupad ang halos anumang masining na ideya). Sa tatlong ito, ang pinakapopular ay maaaring kumpiyansa na tawaging haba ng isang segment na 2 pixel: gumuhit ng isang segment, ilipat ang pen sa pamamagitan ng 1 pixel, gumuhit ng isa pang segment, ilipat ang pen sa pamamagitan ng 1 pixel, gumuhit ng isa pang segment:

Hindi mahirap, di ba? Nakagawi lang ito. Ang kakayahang gumuhit ng mga pahilig na linya sa 2 pixel increment ay makakatulong sa isometric, kaya't titirain namin ito nang mas detalyado sa susunod. Sa pangkalahatan, ang mga tuwid na linya ay mahusay - ngunit hanggang sa lumitaw ang gawain upang gumuhit ng isang bagay na mapaghimala. Kailangan namin ng mga curve dito, at maraming iba't ibang mga curve. At nagpapatupad kami ng isang simpleng panuntunan para sa pag-ikot ng mga liko na linya: ang haba ng mga elemento ng curve ay dapat na bawasan / dagdagan nang dahan-dahan.

Ang exit mula sa tuwid na linya sa pag-ikot ay isinasagawa nang maayos, minarkahan ko ang haba ng bawat segment: 5 mga pixel, 3, 2, 2, 1, 1, muli 2 (na patayo na), 3, 5 at iba pa. Ang iyong kaso ay hindi kinakailangang gumamit ng parehong pagkakasunud-sunod, ang lahat ay nakasalalay sa kinis na kinakailangan. Isa pang halimbawa ng pag-ikot:

Muli, iwasan ang mga kink na sumisira sa larawan. Kung may pagnanais na suriin ang materyal na natutunan, narito mayroon akong balat para sa Winamp na iginuhit ng isang hindi kilalang may-akda, isang blangko:

Mayroong mga malalaking error sa larawan, at simpleng hindi matagumpay na mga fillet, at mga kink ang nangyayari - subukang iwasto ang larawan batay sa alam mo na. Ito ay ang lahat sa mga linya, iminumungkahi kong gumuhit ng kaunti. At huwag malito sa pagiging simple ng mga halimbawa, matututunan mong gumuhit lamang sa pamamagitan ng pagguhit - kahit na ang mga simpleng bagay.

4.1. Gumuhit kami ng isang bote na may buhay na tubig.

1. Ang hugis ng bagay hanggang sa maaari mong gamitin ang kulay.

2. Pulang likido.

3. Palitan ang kulay ng baso sa asul, idagdag ang mga may lilim na lugar sa loob ng bubble at isang ilaw na lugar sa dapat na ibabaw ng likido.

4. Magdagdag ng puting mga highlight sa bubble, at isang 1 pixel ang lapad na madilim na pulang anino sa mga lugar ng likido na hangganan ng mga bubble wall. Mukhang maganda, ha?

5. Gumuhit ng isang bote na may asul na likido sa parehong paraan - narito ang parehong kulay ng salamin, kasama ang tatlong mga kakulay ng asul para sa likido.

4.2. Gumuhit kami ng isang pakwan.

Gumuhit tayo ng isang bilog at isang kalahating bilog - ito ay magiging isang pakwan at isang hiwa ng hiwa.

2. Markahan natin ang hiwa sa pakwan mismo, at sa hiwa - ang hangganan sa pagitan ng crust at pulp.

3. Punan. Ang mga kulay mula sa palette, medium green ay ang kulay ng balat, medium medium ay ang kulay ng laman.

4. Markahan natin ang transitional area mula sa crust hanggang sa pulp.

5. Banayad na guhitan sa pakwan (sa wakas, mukhang ito mismo). At syempre - mga binhi! Kung tatawid ka ng isang pakwan na may mga ipis, sila ay sasabog.

6. Isinasaalang-alang natin. Gumagamit kami ng isang maputlang kulay-rosas na kulay upang ipahiwatig ang mga highlight sa itaas ng mga binhi sa isang seksyon, at sa pamamagitan ng paglalagay ng mga pixel sa isang pattern ng checkerboard, nakakamit namin mula sa hiwa ng hiwa ang isang tiyak na pagkakahawig ng dami (ang pamamaraan ay tinatawag na paghuhugas, higit pa doon ). Gumagamit kami ng isang madilim na pulang lilim upang ipahiwatig ang mga may shade na lugar sa hiwa ng pakwan, at isang madilim na berde (muli, mga pixel sa isang pattern ng checkerboard) upang magdagdag ng dami sa mismong pakwan.

5. Patay.

Ang pagdurog, o paghahalo, ay isang pamamaraan ng paghahalo sa isang tiyak na nakaayos (hindi palaging) paraan ng mga pixel sa dalawang magkakagabing mga lugar na may iba't ibang kulay. Ang pinakasimpleng, pinakakaraniwan at mabisang paraan ay ang kahalili ng mga pixel sa isang pattern ng checkerboard:

Ipinanganak ang pamamaraan salamat sa (o salungat na salungat sa) mga limitasyong panteknikal - sa mga platform na may limitadong mga palette, ginawang posible ang paghuhugas, sa pamamagitan ng paghahalo ng mga pixel ng dalawang magkakaibang kulay, upang makakuha ng pangatlong wala sa paleta:

Dalawang iba pang mga pagpipilian para sa pag-dithering:

Nasa ibaba ang isang halimbawa ng isang nabigong kanal. Sa kabila ng katotohanang ang gayong pamamaraan ay madalas na matatagpuan sa mga sprite mula sa mga video game, kailangan mong magkaroon ng kamalayan na ang telebisyon ay makabuluhang pinasadya ang imahe, at ang nasabing suklay, at kahit na ang paggalaw, ay hindi naayos ng mata:

Kaya, sapat na teorya. Iminumungkahi kong magsanay pa kami nang kaunti.

Ang Pixel art ay maaaring iguhit sa anumang programa para sa pagtatrabaho sa mga raster graphics, ito ay isang bagay ng personal na kagustuhan at karanasan (pati na rin ang mga kakayahan sa pananalapi, syempre). Ang isang tao ay gumagamit ng pinakasimpleng Pintura, ginagawa ko ito sa Photoshop - sapagkat, una sa una, nagtatrabaho ako dito nang matagal, at pangalawa, mas komportable ako roon. Sa sandaling napagpasyahan kong subukan ang libreng Paint.NET, hindi ko gusto ito - ito ay tulad ng sa isang kotse, na kinikilala ang isang banyagang kotse na may isang awtomatikong paghahatid sa Zaporozhets ay malamang na hindi umupo. Ang aking tagapag-empleyo ay nagbibigay sa akin ng isang lisensyadong software, kaya't ang aking budhi ay malinis bago ang korporasyon ng Adobe ... Bagaman ang mga presyo para sa kanilang mga programa ay hindi nila ito masisira, at sinusunog nila ito.

1. Paghahanda para sa trabaho.

Lumikha ng isang bagong dokumento na may anumang mga setting (hayaan itong 60 pixel ang lapad, 100 pixel ang taas). Ang pangunahing tool ng isang pixel artist ay isang lapis ( Pencil Tool, tinawag ni hotkey B). Kung ang isang brush (at isang icon ng brush) ay pinagana sa toolbar, mag-hover sa ibabaw nito, pindutin nang matagal LMB - lilitaw ang isang maliit na drop-down na menu kung saan dapat kang pumili ng isang lapis. Itakda ang laki ng pen sa 1 pixel (sa tuktok na panel sa kaliwa, ang drop-down na menu Magsipilyo):

Pixel art para sa mga nagsisimula. | Panimula.

Ang ilang mas kapaki-pakinabang na mga kumbinasyon. " Ctrl + "At" Ctrl - "nag-zoom in at labas ng imahe. Kapaki-pakinabang din na malaman ang pagpindot Ctrl at "(mga quote-Christmas tree, o Russian key" E") Pinapagana at hindi pinagana ang grid, na makakatulong nang malaki sa pagguhit ng pixel art. Ang hakbang sa grid ay dapat ding ayusin para sa iyong sarili, ito ay mas maginhawa para sa isang tao kapag ito ay 1 pixel, nasanay ako sa lapad ng cell na 2 pixel. Itulak Ctrl + K (o pumunta sa I-edit->Mga Kagustuhan), punta sa punto Mga Gabay, Grid at Hiwa at i-install Gridline bawat 1 mga pixel (Uulitin ko, mas maginhawa para sa akin 2).

2. Pagguhit.

Sa wakas, nagsisimula na kaming gumuhit. Bakit lumikha ng isang bagong layer ( Ctrl + Shift + N), lumipat sa kulay itim na panulat (pagpindot D Itinatakda ang mga default na kulay, itim at puti) at iguhit ang ulo ng character, sa aking kaso ito ay isang simetriko ellipse tulad nito:

Pixel art para sa mga nagsisimula. | Panimula.

Ang mga ibabang ibaba at itaas na base ay 10 pixel ang haba, pagkatapos ay may mga segment na 4 na mga pixel, tatlo, tatlo, isa, isa, at isang patayong linya na may taas na 4 na mga pixel. Ang mga tuwid na linya sa Photoshop ay maginhawa upang gumuhit gamit ang clamp ShiftBagaman ang sukat ng imahe sa pixel art ay minimal, ang diskarteng ito kung minsan ay nakakatipid ng maraming oras. Kung nakagawa ka ng pagkakamali at labis na gumuhit, umakyat sa isang lugar sa nakaraan - huwag panghinaan ng loob, lumipat sa tool ng pambura ( Pambura dinl o ang " E») At tanggalin ang hindi kinakailangan. Oo, tiyaking itakda ang pambura sa isang laki din ng 1 pixel pen, upang mabura nito ang pixel ayon sa pixel, at isang lapis mode Mode: Pencil), kung hindi man ay hindi nito buburahin ang kailangan. Pagbabalik sa lapis, ipaalala sa iyo, sa pamamagitan ng “ B»

Sa pangkalahatan, ang ellipse na ito ay hindi mahigpit na iginuhit ayon sa mga patakaran ng pixel art, ngunit kailangan ito ng masining na disenyo. Sapagkat ito ay isang hinaharap na ulo, mata, ilong, bibig ay makikita dito - sapat na mga detalye na sa paglaon ay makukuha ang pansin ng manonood sa kanilang sarili at mapanghina ang pagnanais na magtanong kung bakit ang ulo ay hindi gaanong regular ang hugis.

Patuloy na gumuhit, magdagdag ng isang ilong, antena at bibig:

Pixel art para sa mga nagsisimula. | Panimula.

Ngayon ang mga mata:

Pixel art para sa mga nagsisimula. | Panimula.

Mangyaring tandaan na sa isang maliit na sukat, ang mga mata ay hindi kailangang bilugan - sa aking kaso, ang mga ito ay mga parisukat na may haba ng gilid na 5 mga pixel, kung saan ang mga puntos ng sulok ay hindi iginuhit. Kapag bumalik ka sa orihinal na sukat, ang mga ito ay magmukhang bilog, kasama ang impression ng sphericity ay maaaring mapahusay sa tulong ng mga anino (higit pa sa paglaon, tingnan ang ika-3 seksyon ng aralin). Pansamantala, itatama ko nang bahagya ang hugis ng ulo sa pamamagitan ng pagpahid ng ilang mga pixel sa isang lugar at iguhit ang mga ito sa isa pa:

Pixel art para sa mga nagsisimula. | Panimula.

Gumuhit kami ng mga kilay (wala silang nakabitin sa hangin - Mayroon akong isang istilo) at mga tiklop ng mukha sa mga sulok ng bibig, na ginagawang mas nagpapahayag ng ngiti:

Pixel art para sa mga nagsisimula. | Panimula.

Ang mga sulok ay hindi maganda ang hitsura, ang isa sa mga patakaran ng pixel art ay nagsasabi na ang bawat pixel ng isang stroke at mga elemento ay maaaring hawakan ng hindi hihigit sa dalawang katabing mga pixel. Ngunit kung maingat mong pinag-aaralan ang mga sprite mula sa mga laro noong huling bahagi ng 80s - maagang bahagi ng dekada 90, ang error na ito ay madalas na matatagpuan doon. Konklusyon - kung hindi mo magawa, ngunit talagang gusto mo, maaari mo ito. Ang detalyeng ito ay maaaring i-play sa ibang pagkakataon sa panahon ng pagpuno sa tulong ng mga anino, kaya sa ngayon ay maglalabas pa kami. Katawan ng tao:

Pixel art para sa mga nagsisimula. | Panimula.

Huwag pansinin ang mga bukung-bukong sa ngayon, mukhang mahirap, aayusin namin iyon kapag pinunan natin. Isang maliit na pagwawasto: magdagdag ng isang sinturon at tiklop sa lugar ng singit, at piliin din ang mga kasukasuan ng tuhod (gamit ang maliliit na mga fragment ng 2 pixel, na nakausli mula sa linya ng binti):

Pixel art para sa mga nagsisimula. | Panimula.

3. Punan.

Para sa bawat elemento ng character, ang tatlong mga kulay ay magiging sapat para sa amin sa ngayon - ang pangunahing kulay ng pagpuno, ang kulay ng anino at ang kulay ng stroke. Sa pangkalahatan, maraming maipapayo sa teorya ng kulay sa pixel art, sa paunang yugto, huwag mag-atubiling maniktik sa gawain ng mga masters at pag-aralan kung paano sila pumili ng mga kulay. Ang stroke ng bawat elemento ay maaaring, syempre, iwanang itim, ngunit sa kasong ito, ang mga elemento ay malamang na magsama, mas gusto kong gumamit ng mga independiyenteng kulay na malapit sa pangunahing kulay ng elemento, ngunit may mababang saturation. Ang pinaka-maginhawang paraan ay upang gumuhit ng isang maliit na palette sa isang lugar sa tabi ng iyong character at pagkatapos ay kumuha ng mga kulay mula dito gamit ang eyedropper tool ( Tool ng Eyedropper, ako):

Pinili ang nais na kulay, pinapagana namin ang tool na "bucket" ( Paint Bucket, G). Gayundin, tiyaking huwag paganahin ang pagpapaandar ng Anti-alias sa mga setting, kailangan namin ng punan upang gumana nang malinaw sa loob ng mga iginuhit na balangkas at huwag lumampas sa kanila:

Pixel art para sa mga nagsisimula. | Panimula.

Pinupunan namin ang aming karakter, kung ano ang hindi namin mapunan - gumuhit kami ng kamay gamit ang isang lapis.

Pixel art para sa mga nagsisimula. | Panimula.

Bigyang pansin ang mga bukung-bukong - dahil ang mga lugar na ito ay 2 pixel lamang ang kapal, kailangan kong talikuran ang stroke sa magkabilang panig, at iginuhit ko lamang ito mula sa inilaan na bahagi ng anino, na iniiwan ang linya ng kulay ng batayang 1 pixel na makapal. Tandaan din na iniwan kong itim ang mga kilay, kahit na hindi ito mahalaga.

Ang Photoshop ay may madaling gamiting pagpili ayon sa kulay ( Piliin-\u003e Saklaw ng kulaysa pamamagitan ng pagsundot sa isang eyedropper sa nais na kulay, makakakuha kami ng isang pagpipilian ng lahat ng mga lugar ng parehong kulay at ang posibilidad ng kanilang agarang pagpuno, ngunit para dito kailangan mong magkaroon ng mga elemento ng iyong karakter sa iba't ibang mga layer, kaya sa ngayon kami isasaalang-alang ang pagpapaandar na ito na kapaki-pakinabang para sa mga advanced na gumagamit ng Photoshop):

Pixel art para sa mga nagsisimula. | Panimula.

4. Shadow at dithering.

Pinipili namin ang mga kulay ng anino at, lumilipat sa lapis ( B) maingat na ilatag ang mga lugar ng anino. Sa aking kaso, ang pinagmulan ng ilaw ay nasa isang lugar sa kaliwa at sa itaas, sa harap ng character - samakatuwid, minarkahan namin ang mga kanang gilid na may isang anino na may diin sa ilalim. Ang mukha ay magiging pinakamayaman sa anino, dahil maraming mga maliliit na elemento na lumalabas sa kaluwagan sa tulong ng mga anino sa isang banda, at sa kabilang banda sila mismo ang naglagay ng anino (mga mata, ilong, mga tiklop ng mukha):

Pixel art para sa mga nagsisimula. | Panimula.

Ang Shadow ay isang napakalakas na visual medium, ang isang mahusay na may markang anino ay magkakaroon ng kapaki-pakinabang na epekto sa hitsura ng tauhan - at sa impression na mayroon ito sa manonood. Sa pixel art, ang isang solong pixel na hindi nakalagay ay maaaring makasira sa buong gawain, habang ang mistulang mga menor de edad na pagsasaayos ay maaaring gawing mas maganda ang imahe.

Para naman sa pagtaponNgunit, sa isang imahe na may tulad na maliit na sukat, sa palagay ko, ito ay ganap na labis. Ang pamamaraan mismo ay binubuo sa "paghahalo" ng dalawang katabing mga kulay, na nakamit sa pamamagitan ng staggered pag-aayos ng mga pixel. Gayunpaman, upang magbigay ng isang ideya ng pamamaraan, magpapakilala pa rin ako ng maliliit na lugar ng paghahalo, sa pantalon, sa shirt at kaunti sa mukha:

Pixel art para sa mga nagsisimula. | Panimula.

Sa pangkalahatan, tulad ng nakikita mo, walang partikular na kumplikado. Pixel art napaka kaakit-akit na, na pinagkadalubhasaan ang ilan sa mga batas, ang sinuman ay maaaring gumuhit ng maayos sa kanyang sarili - sa pamamagitan lamang ng maingat na pag-aaral ng gawain ng mga masters. Bagaman oo, ang ilang kaalaman sa mga pangunahing kaalaman sa pagguhit at teorya ng kulay ay hindi pa rin masakit. Puntahan mo!

Naglalakad sa Internet sa umaga, nais kong magsulat ng isang post tungkol sa Pixel Art, sa paghahanap ng materyal na nakita ko ang dalawang artikulong ito.

Ang Pixel Art ay napakapopular kahit sa kasalukuyan para sa mga laro at maraming mga kadahilanan para dito!

Kaya, ano ang nakakaakit ng Pixel Art:

1. Pang-unawa. Mukhang kamangha-mangha ang Pixel Art! Marami kang maaaring sabihin tungkol sa bawat indibidwal na pixel sa sprite.
2. Nostalgia. Ibinabalik ng Pixel Art ang isang mahusay na pakiramdam ng nostalhik para sa mga manlalaro na lumaki sa paglalaro ng Nintendo, Super Nintendo, o Genesis (kagaya ko!)
3. Dali ng pag-aaral. Ang Pixel Art ay isa sa pinakamadaling nalalaman sa digital art, lalo na kung higit kang isang programmer kaysa sa isang artista;]

Kaya nais mong subukan ang iyong kamay sa Pixel Art? Pagkatapos ay sundan kasama ako habang ipinapakita ko sa iyo kung paano gumawa ng isang simple ngunit mabisang mapaglarawang character na maaari mong gamitin sa iyong sariling laro! Dagdag pa, bilang isang bonus, titingnan namin kung paano isasama ito sa mga larong iPhone!

Kakailanganin mo ang Adobe Photoshop upang matagumpay na matuto. Kung wala ka, maaari kang mag-download ng isang libreng pagsubok mula sa website ng Adobe o torrent.

Ano ang Pixel Art?

Bago kami magsimula, linawin muna natin ang tungkol sa kung ano ang Pixel Art, hindi ito halata tulad ng naisip mo. Ang pinakamadaling paraan upang matukoy kung ano ang Pixel Art ay upang tukuyin kung ano ang hindi, katulad ng lahat kung saan awtomatikong nilikha ang mga pixel. Narito ang ilang mga halimbawa:

Gradient: Piliin ang dalawang kulay at kalkulahin ang kulay ng mga pixel sa pagitan. Mukhang cool, ngunit hindi Pixel Art!

Blur Tool: Tukuyin ang mga pixel at i-duplicate / i-edit ang mga ito upang makagawa ng isang bagong bersyon ng nakaraang imahe. Muli, hindi isang pixel art.

Smoothing tool (karaniwang bumubuo ng mga bagong pixel sa iba't ibang mga kulay upang gumawa ng isang bagay na "makinis"). Dapat mong iwasan ang mga ito!

Sasabihin ng ilan na kahit na ang mga awtomatikong nabuong kulay ay hindi Pixel Art, dahil ipinapalagay nila ang isang layer para sa mga epekto ng paghahalo (paghahalo ng mga pixel sa pagitan ng dalawang mga layer alinsunod sa isang naibigay na algorithm). Ngunit dahil ang karamihan sa mga aparato ay kasalukuyang nakikipag-usap sa milyun-milyong mga kulay, ang pahayag na ito ay maaaring balewalain. Gayunpaman, ang paggamit ng isang maliit na bilang ng mga kulay ay mahusay na kasanayan sa Pixel art.

Iba pang mga tool tulad ng (linya) o tool na pintura ng balde (ang pintura ng balde) ay awtomatikong bumubuo din ng mga pixel, ngunit dahil maitatakda mo ang mga ito upang hindi makinis ang mga gilid ng mga puno ng pixel, ang mga tool na ito ay itinuturing na Pixel Art friendly.

Sa gayon, nalaman namin na ang Pixel Art ay nangangailangan ng maraming pansin kapag inilalagay ang bawat pixel sa isang sprite, madalas sa pamamagitan ng kamay at may isang limitadong paleta ng mga kulay. Magtrabaho tayo ngayon!

Simula ng trabaho

Bago mo simulang gawin ang iyong unang assets ng Pixel Art, dapat mong malaman na ang Pixel Art ay hindi maaaring mai-scale. Kung susubukan mong bawasan ito, ang lahat ay magmukhang malabo. Kung susubukan mong palakihin ito, magiging okay ang lahat basta gumamit ka ng maramihang 2 pag-scale (ngunit syempre hindi ito magiging matalim).

Upang maiwasan ang problemang ito, dapat mo munang maunawaan kung gaano kalaki ang dapat mong mapaglarong karakter o elemento ng laro, at pagkatapos ay magtrabaho. Ito ay madalas na batay sa laki ng screen ng aparato na iyong tina-target at kung gaano karaming "mga pixel" ang nais mong makita.

Halimbawa, kung nais mo ang laro na magmukhang mas malaki nang dalawang beses sa screen ng iPhone 3GS ("Oo, nais kong bigyan ang aking laro ng isang pixelated na hitsura ng retro!"), Kaninong resolusyon ng screen ay 480x320 mga pixel, kung gayon kailangan mong gumana sa kalahati ng resolusyon.sa kasong ito ito ay magiging 240x160 pixel.

Magbukas ng bagong dokumento ng Photoshop ( File → Bago ...) at itakda ang laki upang maging ang laki ng iyong screen ng laro, pagkatapos ay pumili ng isang laki para sa iyong character.

Pinili ko ang 32 × 32 pixel hindi lamang sapagkat ito ay mahusay para sa napiling laki ng screen, ngunit din dahil ang 32 × 32 pixel ay din multiply ng 2, na maginhawa para sa mga laruang engine, (ang mga laki ng tile ay madalas na maraming ng 2, ang mga pagkakayari ay nakahanay maramihang ng 2, atbp.

Kahit na ang engine na ginagamit mo ay sumusuporta sa anumang laki ng imahe, maaari mong palaging subukan ang pagtatrabaho kasama ang pantay na bilang ng mga pixel. Sa kasong ito, kung kailangang mai-scale ang imahe, mas mahusay na ibabahagi ang laki, na magreresulta sa mas mahusay na pagganap.

Paano Gumuhit ng Pixel Art Character

Ang Pixel Art ay kilala na malulutong at madaling basahin ang mga graphic: maaari mong tukuyin ang mga tampok sa mukha, mata, buhok, bahagi ng katawan na may ilang mga puntos lamang. Gayunpaman, ang laki ng mga imahe ay kumplikado sa gawain: mas maliit ang iyong character, mas mahirap na iguhit ang mga ito. Para sa isang mas praktikal na diskarte sa gawain, piliin kung ano ang magiging pinakamaliit sa mga ugali ng character. Palagi akong pumili ng mga mata dahil ang mga ito ay isa sa mga pinakamahusay na paraan upang mahinga ang buhay sa isang karakter.

Sa Photoshop piliin Pencil tool (Pencil tool). Kung hindi mo ito mahahanap, pindutin lamang nang matagal ang tool Brush Tool (Brush Tool) at makikita mo ito kaagad (dapat itong ang pangalawa sa listahan). Kailangan mo lamang itong baguhin ang laki sa 1px (maaari kang mag-click sa tool options bar at baguhin ang laki nito, o pindutin lang ang [) key.

Kakailanganin mo rin Burahin ang tool (Eraser Tool), kaya mag-click dito (o pindutin ang E key) at baguhin ang mga setting nito sa pamamagitan ng pagpili mula sa dropdown list Mode: (Mode :) Lapis (Pencil) (dahil walang anti-aliasing sa mode na ito).

Ngayon simulan natin ang pag-pixelating! Iguhit ang mga kilay at mata tulad ng ipinakita sa imahe sa ibaba:

Maaari ka nang magsimula sa Lineart (kapag ang pagguhit ay tapos na gamit ang mga linya), ngunit ang isang mas praktikal na paraan ay upang iguhit ang silweta ng tauhan. Ang magandang balita ay hindi mo kailangang maging isang pro sa yugtong ito, subukang isipin lamang ang laki ng mga bahagi ng katawan (ulo, katawan, braso, binti) at ang panimulang pose ng character. Subukang gawin ang ganitong bagay na kulay-abo:

Mangyaring tandaan na nag-iwan din ako ng puting puwang. Hindi mo talaga kailangang punan ang buong canvas, mag-iwan ng lugar para sa mga pag-shot sa hinaharap. Sa kasong ito, magiging kapaki-pakinabang upang mapanatili ang parehong laki ng canvas para sa kanilang lahat.

Matapos mong tapusin ang silweta, darating ang oras ... Dapat kang maging mas maingat ngayon sa paglalagay ng mga pixel, kaya't huwag mag-alala tungkol sa damit, nakasuot, atbp pa. Upang maging ligtas ka, maaari kang magdagdag ng isang bagong layer upang hindi mo mawala ang iyong orihinal na silweta.

Kung sa palagay mo ang tool na Pencil ay masyadong mabagal upang gumuhit, maaari mong laging gamitin (Line Tool), tandaan lamang na hindi mo mai-posisyon ang mga pixel nang tumpak tulad ng gagawin mo sa isang lapis. Kakailanganin mong ipasadya tulad ng ipinakita sa ibaba:

Pakipili sa pamamagitan ng pagpindot at paghawak Rectangle tool (Rectangle Tool)

Pumunta sa panel ng mga pagpipilian ng tool, sa listahan ng dropdown Pumili ng Mode ng Tool (Outline Drawing Mode) piliin ang Pixel, baguhin Bigat (Kapal) ng 1px (kung hindi pa nagagawa) at alisan ng check Anti-alyas (Smoothing). Ito ay kung paano mo ito dapat makuha:

Tandaan na hindi ko nagawa ang ilalim ng tabas para sa mga paa. Opsyonal ito, dahil ang mga paa ay hindi gaanong isang mahalagang bahagi ng mga binti upang tumayo, at ito ay makatipid sa iyo ng isang hilera ng mga pixel sa canvas.

Mag-apply ng mga kulay at anino

Handa ka na ngayong simulang kulayan ang aming karakter. Huwag mag-alala tungkol sa pagpili ng mga tamang kulay, napakadali na baguhin ang mga ito sa paglaon, siguraduhin lamang na ang bawat isa ay may sariling kulay. Gamitin ang mga default na kulay sa tab Swatch (Window → Swatch).

Kulayan ang iyong karakter tulad ng imahe sa ibaba (ngunit huwag mag-atubiling maging malikhain at magamit ang iyong sariling mga kulay!)

Mangyaring tandaan na hindi ko pa rin nagagawa ang mga balangkas para sa mga damit o buhok. Palaging tandaan: i-save ang maraming mga pixel hangga't maaari mula sa hindi kinakailangang mga balangkas!

Huwag sayangin ang oras sa pagpipinta ng bawat pixel. Gumamit ng mga linya para sa parehong kulay upang mapabilis ang iyong trabaho, o Paint tool na bucket (Paint Bucket Tool) upang punan ang mga puwang. Sa pamamagitan ng paraan, magkakaroon din ito upang mai-configure. Pakipili Paint tool na bucket sa toolbar (o pindutin lamang ang G key) at baguhin Pagpaparaya (Tolerance) hanggang 0, at alisan din ng tsek ang kahon Anti-alyas (Smoothing).

Kung kailangan mong gumamit Magic Wand tool (Magic Wand Tool) - isang napaka kapaki-pakinabang na tool na pipiliin ang lahat ng mga pixel na may parehong kulay, pagkatapos ay ayusin ito sa parehong paraan tulad ng tool na Paint Bucket - walang pagpapaubaya o anti-aliasing.

Ang susunod na hakbang, na mangangailangan ng kaunting kaalaman mula sa iyo, ay ang pag-iilaw at pag-shade. Kung wala kang kaalaman kung paano ipakita ang ilaw at madilim na panig, pagkatapos sa ibaba bibigyan kita ng isang maliit na tagubilin. Kung wala kang oras at pagnanais na pag-aralan ito, maaari mong laktawan ang hakbang na ito at pumunta sa seksyong "Spicing up your palette", dahil pagkatapos ng lahat, maaari mo lamang gawin ang iyong pagtatabing pareho sa aking halimbawa!

Subukang ibigay ang hugis ayon sa gusto mo / maaari, dahil pagkatapos nito ay nagsisimulang magmukhang mas kawili-wili ang asset. Halimbawa, nakikita mo ngayon ang ilong, nakakunot ang mga mata, pagkabigla ng buhok, tiklop sa pantalon, atbp. Maaari ka ring magdagdag ng ilang mga light spot dito, magiging mas maganda ito:

At ngayon, tulad ng ipinangako ko, isang maliit na gabay sa mga ilaw at anino:

Pag-spice ng iyong palette

Maraming tao ang gumagamit ng mga default na kulay ng palette, ngunit dahil maraming tao ang gumagamit ng mga kulay na ito, makikita natin sila sa maraming mga laro.

Ang Photoshop ay may maraming pagpipilian ng mga kulay sa karaniwang paleta nito, ngunit hindi ka dapat masyadong umasa dito. Mahusay na gumawa ng iyong sariling mga kulay sa pamamagitan ng pag-click sa pangunahing palette sa ilalim ng toolbar.

Pagkatapos, sa window ng Color Picker, i-browse ang kanang sidebar upang mapili ang kulay at ang pangunahing lugar upang piliin ang nais na ningning (mas magaan o mas madidilim) at saturation (mas mayaman o mas mapurol).

Kapag nahanap mo na ang gusto mo, i-click ang OK at muling isaayos ang tool na Paint Bucket... Huwag mag-alala, maaari mo lamang i-uncheck ang kahong 'Contiguous' at kapag nagpinta ka ng isang bagong kulay, ang anumang mga bagong pixel na may parehong kulay sa background ay ipininta rin.

Ito ay isa pang kadahilanan kung bakit mahalagang magtrabaho kasama ang isang maliit na bilang ng mga kulay at laging gamitin ang parehong kulay para sa parehong item (shirt, buhok, helmet, nakasuot, atbp.). Ngunit huwag kalimutan na gumamit ng iba't ibang mga kulay para sa iba pang mga lugar, kung hindi man, ang aming pagguhit ay labis na maipinta!

Baguhin ang mga kulay kung gusto mo at makakuha ng isang mas kaakit-akit na pangkulay ng character! Maaari mo ring recolor ang mga balangkas, siguraduhin lamang na ang mga ito ay pinaghalong mabuti sa background.

Panghuli, gawin ang isang pagsubok sa kulay sa background: lumikha ng isang bagong layer sa ibaba ng iyong karakter at punan ito ng iba't ibang mga kulay. Ito ay upang matiyak na ang iyong karakter ay makikita laban sa ilaw, madilim, mainit at malamig na background.

Tulad ng nakikita mo, pinatay ko ang anti-aliasing sa lahat ng mga tool na ginamit ko sa ngayon. Huwag kalimutang gawin din ito sa iba pang mga tool, halimbawa, Elliptical marquee (Oval marquee) at Lasso (Lasso).

Sa mga tool na ito, maaari mong madaling baguhin ang laki sa mga napiling bahagi, o kahit paikutin ang mga ito. Upang magawa ito, gumamit ng anumang tool sa pagpili (o pindutin ang M key) upang pumili ng isang lugar, mag-right click at piliin Libreng pagbabago (Libreng Pagbabago), o pindutin lamang ang Ctrl + T. Upang baguhin ang laki sa pagpipilian, i-drag ang isa sa mga humahawak sa paligid ng perimeter ng frame ng pagbabago. Upang baguhin ang laki sa pagpipilian habang pinapanatili ang mga sukat, pindutin nang matagal ang Shift key at i-drag ang isa sa mga humahawak sa sulok.

Gayunpaman, ang Photoshop ay awtomatikong patagin ang lahat ng na-edit gamit ang pagpapaandar Libreng pagbabagokaya bago mag-edit pumunta sa I-edit -\u003e Mga Kagustuhan -\u003e Pangkalahatan (Ctrl + K) at magbago Pag-iisa ng Imahe (Pag-iisa ng imahe) sa Pinakamalapit na kapitbahay (Pinakamalapit na kapitbahay). Sa madaling sabi, may Pinakamalapit na kapitbahay ang bagong posisyon at sukat ay kinakalkula nang halos halos, walang mga bagong kulay o transparency na inilalapat, at ang mga kulay na pinili mo ay napanatili.

Pagsasama ng Pixel Art sa Mga Laro sa iPhone

Sa seksyong ito, malalaman mo kung paano isama ang aming pixel art sa isang laro sa iPhone gamit ang framework ng laro ng Cocos2d. Bakit ang iPhone lang ang isasaalang-alang ko? Sapagkat, salamat sa isang serye ng mga artikulo tungkol sa Unity (halimbawa :, o Pag-play sa istilo ng Jetpack Joyride sa Unity 2D), alam mo na kung paano gumana sa kanila sa Unity, at mula sa mga artikulo tungkol sa Crafty (Mga laro sa Browser: Snake) at Epekto (Isang pagpapakilala sa paglikha ng mga larong Mga Epekto ng browser) natutunan mo kung paano i-embed ang mga ito sa canvas at lumikha ng mga laro sa browser.

Kung bago ka sa Cocos2D, o pagbuo ng iPhone app sa pangkalahatan, pinapayuhan ko kang magsimula sa isa sa mga tutorial ng Cocos2d at iPhone. Kung mayroon kang naka-install na Xcode at Cocos2d, basahin!

Lumikha ng isang bagong proyekto iOS → cocos2d v2.x → template ng cocos2d iOS, pangalanan itong PixelArt, at piliin ang iPhone bilang iyong aparato. I-drag ang nilikha na pixel art tulad ng: sprite_final.png sa iyong proyekto at pagkatapos ay buksan HelloWorldLayer.m at palitan ang pamamaraan ng pagsisimula sa sumusunod:

- (id) init (kung ((self \u003d)) (CCSprite * hero \u003d; hero.position \u003d ccp (96, 96); hero.flipX \u003d YES ;;) bumalik sa sarili;)

Pinuwesto namin ang sprite sa kaliwang bahagi ng screen at paikutin ito upang humarap ito sa kanan. Compile, run, at pagkatapos ay makikita mo ang iyong sprite sa screen:

Gayunpaman, tandaan, tulad ng tinalakay namin nang mas maaga sa tutorial na ito, nais naming artipisyal na itaas ang mga pixel upang ang bawat pixel ay kapansin-pansin na makilala mula sa iba. Kaya idagdag ang bagong linya na ito sa loob ng init na pamamaraan:

Hero.scale \u003d 2.0;

Wala namang kumplikado, di ba? Compile, run and ... teka, malabo ang aming sprite!

Ito ay sapagkat, bilang default, ang Cocos2d ay nagpapalabas ng pagguhit kapag ito ay sinusukat. Hindi namin ito kailangan, kaya idagdag ang sumusunod na linya:

Ang linyang ito ay nag-configure ng Cocos2d upang sukatin ang mga imahe nang walang kontra-aliasing, kaya't ang aming tao ay mukhang "naka-pixel" din "Mag-compile, tumakbo at ... oo, gumagana ito!

Tandaan ang mga pakinabang ng paggamit ng mga graphics ng Pixel Art - maaari kaming gumamit ng isang mas maliit na imahe kaysa sa ipinakita sa screen, na nakakatipid ng maraming memorya ng pagkakayari. Hindi rin namin kailangang gumawa ng magkakahiwalay na mga imahe para sa pagpapakita ng retina!

Anong susunod?

Inaasahan kong nasiyahan ka sa tutorial na ito at natutunan nang kaunti pa tungkol sa pixel art! Bago makipaghiwalay, nais kong magbigay sa iyo ng ilang mga tip:

• Laging subukang iwasang gumamit ng anti-aliasing, gradients, o maraming kulay para sa iyong mga assets. Ito ay para sa iyong sariling kabutihan, lalo na kung nagsisimula ka pa rin.
• Kung Talagang nais mong tularan ang istilong retro, tingnan ang mga imahe sa 8-bit o 16-bit console na laro.
• Ang ilang mga istilo ay hindi gumagamit ng madilim na mga balangkas; ang iba ay hindi isinasaalang-alang ang mga epekto ng ilaw o anino. Ang lahat ay nakasalalay sa estilo! Sa aming tutorial, hindi kami gumuhit ng mga anino, ngunit hindi ito nangangahulugan na hindi mo dapat gamitin ang mga ito.

Para sa isang nagsisimula, ang Pixel Art ay maaaring ang pinakamadaling mga graphic na matutunan, ngunit ito ay talagang hindi kasing simple ng tila. Ang pinakamahusay na paraan upang mai-upgrade ang iyong mga kasanayan ay pagsasanay, kasanayan, kasanayan. Masidhi kong inirerekumenda ang pag-post ng iyong gawa sa mga forum ng Pixel Art upang ang ibang mga artist ay maaaring magbigay sa iyo ng payo - mahusay na paraan upang mapabuti ang iyong diskarte! Magsimula ng maliit, magsanay ng maraming, makakuha ng feedback at maaari kang lumikha ng isang kamangha-manghang laro na magdadala sa iyo ng maraming pera at kagalakan!

Ang Pixel Art o pixel art ay isang digital na pagpipinta na nilikha sa mga editor ng bitmap ng pixel. Ang isang pixel ay ang pinakamaliit na graphic element sa isang imahe. Sa madaling salita, ito ang punto. At lahat ng pixel art ay binubuo ng hindi mabilang na mga kumpol ng mga tuldok, na nagiging bahagyang hindi pantay, na parang hindi guhit. Ngunit ito ang kagandahan ng mga nasabing larawan.

Kaunting kasaysayan

Sa aling mga programa maaari kang lumikha ng modernong pixel art

Maraming mga libreng bitmap editor doon. Ngunit ang karamihan sa iba pa ay tinatawag na Microsoft Paint at Adobe Photoshop. Totoo, ang Paint ay itinuturing na isang hindi gaanong maginhawang tool para sa paglikha ng pixel art kaysa sa Adobe Photoshop. Bakit? Sa program na ito:
napakahirap makamit ang pagkakapantay-pantay at mahusay na proporsyon ng mga imahe;
kapag nai-save ang mga ito sa format na jpg, nangyayari ang isang malakas na pagbaluktot ng kulay;
mahirap gumuhit ng mga anino at mga highlight.
Samakatuwid, sinubukan nilang bigyan ng kagustuhan ang Adobe Photoshop. Ang program na ito ay may higit na mga posibilidad na magtrabaho kaysa sa Paint. Pinapayagan kang gumuhit ng hindi mga indibidwal na character na may isang simpleng disenyo, ngunit buong mga larawan. Bilang karagdagan, ang pixel art mismo ay mas madali at mas mabilis na mai-edit dito. At maaari mong ilipat ang mga paglilipat ng kulay sa Adobe Photoshop nang maayos at natural.

Paano maiiwasan ang mga kink sa Pixel Art

Ang Pixel art ay isang koleksyon ng mga pixel na parisukat o parihabang "mga tuldok". Kapag ang isang imahe ay iginuhit mula sa naturang "mga puntos", pagkatapos ay lilitaw angularidad, mawala ang kinis sa mga linya. Sa isang banda, ito ay isang Pixel Art na business card, ngunit sa kabilang banda, gusto ko ng higit na kinis, na gagawing malinis at kaakit-akit ang larawan sa gumagamit. Ang problemang ito sa wika ng mga pixel artist ay tinatawag na kinks o "jaggies".
Ang mga Jaggies ay mga fragment na nagbibigay ng anumang mga linya ng isang jagged hitsura. Karaniwan silang itinatapon sa isa sa mga sumusunod na paraan:
taasan ang segment ng knock-out na linya ng 2, 3 o higit pang mga pixel ang haba;
bawasan ang haba ng mga pixel mismo sa kilalang lugar;
isang bagong seksyon ng linya ay itinayo mula sa maraming mga unit pixel;
magdagdag ng solong mga pixel sa kantong sa pagitan ng mas mahahabang "puntos", at iba pa.
Para sa tamang pag-aalis ng mga kink, kailangan mong tandaan ang pangunahing panuntunan: ang haba ng mga elemento sa isang hubog na linya ay dapat na bawasan o dagdagan nang unti. Kailangan mo ring tandaan na ang paglilipat ng isang segment ng linya ng dalawa o higit pang mga pixel sa taas ay humahantong sa pagkasira ng kinis.
Samakatuwid, kailangan ng patuloy na kasanayan sa pagguhit. At bilang isang simple at visual na tulong upang makatulong na maiwasan ang mga kink, maaari kang gumamit ng isang hanay ng mga pahilig na linya.

Paano makakuha ng anino sa Pixel Art

Ang isa pang mahalagang punto tungkol sa pixel art ay ang dami. Ito, tulad ng iba pang mga pagpipilian sa graphics, ay nakakamit sa pamamagitan ng mga highlight at anino. Upang lumikha ng isang anino sa pixel art, kailangan mo ng isang maayos na paglipat mula sa ilaw hanggang sa madilim o mula sa isang kulay patungo sa isa pa. Upang makamit ang epektong ito, ang teknolohiya ng paghahalo ay madalas na ginagamit - paghuhukay o paghuhulog. Sa madaling salita, sa hangganan ng dalawang kulay, halo-halong sila sa isang pattern ng checkerboard. Ang pamamaraang ito ay lumitaw laban sa background ng isang kakulangan ng mga bulaklak. Sa tulong ng isang paghahalo ng checkerboard ng dalawang pintura, posible na makakuha ng pangatlo na wala sa paleta.
Gayunpaman, pagkatapos na lumawak nang malaki ang palette, nananatili pa ring hinihiling ang teknolohiya ng paghuhugas. Ngunit kailangan mong tandaan na ang paglipat mula sa isang kulay patungo sa isa pa na lapad ng isang pixel ay hindi maganda ang hitsura. Ito ay isang suklay lamang. samakatuwid
ang minimum na blending area ay dapat na hindi bababa sa dalawang mga pixel. At mas malawak ang paglipat na ito, mas mabuti.
Gayundin, kapag lumilikha ng isang anino:
mahalagang matukoy sa kung anong anggulo at mula saang panig ang ilaw ay mahuhulog sa bagay. Papayagan ka nitong gawing "live" ang pagguhit, pati na rin maunawaan kung saan iguhit ang anino. Halimbawa, kung ang ilaw ay nahuhulog mula sa kanan, kung gayon ang mga lugar ng anino ay makikita sa kaliwa, at iba pa;
kailangan mong gumamit ng mga kulay na mas madidilim kaysa sa mga pangunahing kulay. Yung. ang anino ay dapat na mailarawan gamit ang mas madidilim na mga kulay kaysa sa may kulay na lugar mismo. Halimbawa, kung ang bagay ay pula, kung gayon ang anino nito ay magiging burgundy o maitim na kayumanggi;
huwag kalimutan ang tungkol sa bahagyang lilim. Para sa hangaring ito, napili ang isang lilim na, ayon sa palette, ay nasa pagitan ng batayang kulay at ng kulay ng anino. Ang lilim na ito ay inilalagay sa pagitan ng mga layer ng dalawang kulay na ito. Bilang isang resulta, nilikha ang epekto ng isang maayos na paglipat mula sa isang madilim na lugar patungo sa isang mas magaan na lugar.

Paano makakuha ng flare sa pixel art

Ang pagsiklab, tulad ng anino, ay nagdaragdag ng dami sa mga bagay na iginuhit. Palagi siyang nasa gilid kung saan nahuhulog ang ilaw. Ngunit kung ang bagay ay idinisenyo upang magkaroon ng isang makintab na ibabaw, halimbawa, isang porselana na tasa, isang tabak na gawa sa bakal, atbp., Kung gayon ang silaw ay kailangan din sa lugar na may lilim.
Upang lumikha ng isang highlight sa lugar kung saan bumagsak ang ilaw, kailangan mong kumuha ng pintura na mas magaan kaysa sa pangunahing. Huwag lamang maging masigasig sa ningning ng lugar na ito - maaaring hindi ito natural na lumabas. Kadalasan, ang pagsiklab ay inilalarawan sa puti nang walang mga pagbabago. Hindi ito nangyayari sa likas na katangian. At ang paksa ay magiging flat.
Upang lumikha ng isang highlight sa gilid ng anino, kailangan mo ng isang kulay na mas magaan kaysa sa kung saan inilapat ang anino mismo. At sa kasong ito, kailangan din ng isang maayos na paglipat, na maaaring makuha sa pamamagitan ng paggamit ng maraming mga shade nang sabay-sabay.
Upang magawa ang lahat ng ito, syempre, nangangailangan ng pagsasanay. At pinakamahusay na magsimula sa mga simpleng bagay.

Ang pagpipinta sa antas ng Pixel ay may angkop na lugar sa mga visual arts. Ang mga totoong obra maestra ay nilikha gamit ang mga simpleng pixel. Siyempre, maaari kang lumikha ng mga gayong guhit sa isang sheet ng papel, ngunit mas madali at mas tama ang paggawa ng mga larawan sa tulong ng mga graphic editor. Sa artikulong ito, susuriin namin nang detalyado ang bawat kinatawan ng naturang software.

Ang pinakatanyag na editor ng imahe sa buong mundo na may kakayahang magtrabaho sa antas ng pixel. Upang lumikha ng mga naturang larawan sa editor na ito, kailangan mo lamang magsagawa ng ilang mga hakbang sa paunang setting. Mayroon itong lahat ng kailangan ng artista upang lumikha ng sining.

Ngunit sa kabilang banda, ang nasabing kasaganaan ng pag-andar ay hindi kinakailangan para sa pagguhit ng pixel art, kaya't walang point sa labis na pagbabayad para sa programa kung gagamitin mo lamang ito para sa isang tukoy na pagpapaandar. Kung isa ka sa mga gumagamit na ito, pinapayuhan ka naming bigyang pansin ang iba pang mga kinatawan na partikular na nakatuon sa mga pixel graphics.

PyxelEdit

Ang program na ito ay mayroong lahat ng kailangan mo upang lumikha ng mga naturang kuwadro na gawa at hindi napuno ng mga pagpapaandar na hindi na kailangan ng artista. Ang setting ay medyo simple, sa paleta ng kulay maaari mong baguhin ang anumang kulay sa nais na tono, at ang libreng paggalaw ng mga bintana ay makakatulong sa iyong ipasadya ang programa para sa iyong sarili.

Ang PyxelEdit ay may isang function upang itakda ang mga tile sa canvas, na maaaring maging kapaki-pakinabang kapag lumilikha ng mga bagay na may katulad na nilalaman. Ang bersyon ng pagsubok ay magagamit para sa pag-download sa opisyal na website at walang mga paghihigpit sa paggamit, upang maaari mong pindutin ang produkto bago bumili.

Pixelformer

Sa hitsura at pag-andar, ito ang pinakakaraniwang editor ng graphics, mayroon lamang itong maraming mga karagdagang tampok para sa paglikha ng mga imahe ng pixel. Ito ay isa sa ilang mga programa na ipinamamahagi nang walang bayad.

Hindi pinoposisyon ng mga developer ang kanilang produkto na angkop sa paglikha ng pixel art, tinawag nila itong mahusay na paraan upang gumuhit ng mga logo at icon.

GraphicsGale

Sinusubukan nilang magpatupad ng isang sistema ng animasyon ng larawan sa halos lahat ng naturang software, na kadalasang nagiging simpleng hindi magagamit dahil sa limitadong pag-andar at maling pagpapatupad. Ang GraphicsGale ay hindi rin maganda sa ito, ngunit hindi bababa sa ang pagpapaandar na ito ay maaaring gumana nang maayos.

Tulad ng para sa pagguhit, ang lahat ay eksaktong kapareho ng sa karamihan ng mga editor: pangunahing mga pag-andar, isang malaking paleta ng kulay, ang kakayahang lumikha ng maraming mga layer at walang labis na maaaring makagambala sa trabaho.

Charamaker

Ang Character Maker 1999 ay isa sa pinakamatandang mga naturang programa. Nilikha ito upang lumikha ng mga indibidwal na character o elemento na magagamit sa ibang mga programa para sa animasyon o ipinakilala sa mga laro sa computer. Samakatuwid, hindi ito masyadong angkop para sa paglikha ng mga kuwadro na gawa.

Ang interface ay hindi masyadong mahusay. Halos walang window na maaaring ilipat o baguhin ang laki, at ang default na layout ay hindi masyadong maganda. Gayunpaman, masasanay ka rito.

Pro Motion NG

Ang program na ito ay perpekto sa halos lahat, mula sa isang mahusay na naisip na interface, kung saan maaari mong ilipat ang mga bintana nang nakapag-iisa ng pangunahing sa anumang punto at baguhin ang kanilang laki, sa isang awtomatikong paglipat mula sa isang eyedropper sa isang lapis, na kung saan ay isang hindi kapani-paniwalang madaling gamiting tampok.

Kung hindi man, ang Pro Motion NG ay isang mahusay na software lamang para sa paglikha ng mga pixel graphics ng anumang antas. Ang bersyon ng pagsubok ay maaaring ma-download mula sa opisyal na website at masubukan upang magpasya sa karagdagang pagbili ng buong bersyon.

Si Aseprite

Nararapat na maituring itong pinaka-maginhawa at magandang programa para sa paglikha ng pixel art. Ang disenyo ng interface na nag-iisa ay nagkakahalaga ng maraming, ngunit hindi iyon ang lahat ng mga pakinabang ng Aseprite. Dito maaari mong buhayin ang larawan, ngunit hindi tulad ng nakaraang mga kinatawan, ipinatutupad ito nang may kakayahan at madaling gamitin. Mayroong lahat upang lumikha ng magagandang mga GIF-animation.