Tulong sa Tele2, mga taripa, mga tanong

Sa ngayon, ang mga programa tulad ng Photoshop, Illustrator, Corel ay ginagawang mas madali ang gawain ng designer at illustrator. Sa kanilang tulong, maaari kang magtrabaho nang buo nang hindi naaabala ng pag-aayos ng mga pixel, tulad ng nangyari sa pagtatapos ng huling siglo. Lahat mga kinakailangang kalkulasyon nangangako software- graphic editor. Ngunit may mga taong nagtatrabaho sa ibang direksyon, hindi lamang naiiba, ngunit maging ganap na kabaligtaran. Ibig sabihin, sila ay nakikibahagi sa parehong lumang-paaralan na pag-aayos ng mga pixel upang makakuha ng isang natatanging resulta at kapaligiran sa kanilang mga gawa.

Isang halimbawa ng pixel art. Fragment.

Sa artikulong ito gusto naming pag-usapan ang tungkol sa mga taong gumagawa ng pixel art. Tingnang mabuti ang kanilang pinakamahusay na mga gawa, na, dahil sa pagiging kumplikado ng kanilang pagpapatupad lamang, ay matatawag, nang walang pagmamalabis, gumagana. kontemporaryong sining. Mga obrang makahinga kapag tiningnan.

Pixel Art. Pinakamahusay na mga gawa at ilustrador

lungsod. May-akda: Zoggles

Fairytale kastilyo. May-akda: Tinuleaf

Medieval village. May-akda: Docdoom

Hanging Gardens Semiramis. May-akda: Lunar Eclipse

Lugar ng tirahan. May-akda:

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

Ang pinakasikat na graphics editor sa mundo na maaaring gumana sa antas ng pixel. Upang lumikha ng mga ganitong larawan sa editor na ito, kailangan mo lang magsagawa ng ilang paunang hakbang sa pag-setup. Narito ang lahat ng kailangan ng isang artista upang lumikha ng sining.

Ngunit sa kabilang banda, ang gayong kasaganaan ng pag-andar ay hindi kailangan para sa pagguhit ng pixel art, kaya walang punto sa labis na pagbabayad para sa programa kung gagamitin mo lamang ito para sa isang partikular na function. Kung isa ka sa mga naturang user, ipinapayo namin sa iyo na bigyang pansin ang iba pang mga kinatawan na partikular na nakatuon sa mga pixel graphics.

PixelEdit

Ang program na ito ay may lahat ng kailangan mo upang lumikha ng mga naturang painting at hindi oversaturated sa mga function na hindi na kakailanganin ng artist. Ang pag-set up ay medyo simple; pinapayagan ka ng paleta ng kulay na baguhin ang anumang kulay sa nais na tono, at ang libreng paggalaw ng mga bintana ay makakatulong sa iyo na i-customize ang programa para sa iyong sarili.

Ang PyxelEdit ay may tampok para sa pagtatakda ng mga tile sa canvas, na maaaring maging kapaki-pakinabang kapag lumilikha ng mga bagay na may katulad na nilalaman. Ang pagsubok na bersyon ay magagamit para sa pag-download sa opisyal na website at walang mga paghihigpit sa paggamit, kaya maaari mong subukan ang produkto bago gumawa ng isang pagbili.

Pixelformer

Sa hitsura at pag-andar, ito ang pinaka-ordinaryong editor ng graphics, mayroon lamang itong ilang karagdagang mga kakayahan para sa paglikha ng mga imahe ng pixel. Ito ay isa sa ilang mga programa na ganap na ibinahagi nang libre.

Hindi ipinoposisyon ng mga developer ang kanilang produkto bilang angkop para sa paglikha ng pixel art, tinatawag nila itong isang mahusay na paraan upang gumuhit ng mga logo at icon.

GraphicsGale

Sa halos lahat ng naturang software sinubukan nilang ipatupad ang isang sistema ng animation ng larawan, na kadalasang nagiging hindi magagamit dahil sa limitadong mga pag-andar at hindi tamang pagpapatupad. Ang GraphicsGale ay hindi masyadong mahusay sa ito alinman, ngunit hindi bababa sa function na ito ay maaaring gumana nang normal.

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

Charamaker

Ang Character Maker 1999 ay isa sa mga pinakalumang naturang programa. Nilikha ito upang lumikha ng mga indibidwal na character o elemento, na pagkatapos ay gagamitin sa iba pang mga programa ng animation o ipapatupad sa mga laro sa Kompyuter. Samakatuwid, hindi ito masyadong angkop para sa paglikha ng mga kuwadro na gawa.

Ang interface ay hindi masyadong maganda. Halos wala sa mga bintana ang maaaring ilipat o baguhin ang laki, at ang default na layout ay hindi masyadong maganda. Gayunpaman, maaari kang masanay dito.

Pro Motion NG

Ang program na ito ay perpekto sa halos lahat, simula sa isang mahusay na pinag-isipang interface, kung saan posible na ilipat ang mga bintana nang nakapag-iisa sa pangunahing isa sa anumang punto at baguhin ang kanilang laki, at nagtatapos sa isang awtomatikong paglipat mula sa isang eyedropper patungo sa isang lapis , na isang hindi kapani-paniwalang maginhawang tampok.

Kung hindi, ang Pro Motion NG ay isang mahusay na software para sa paglikha ng mga pixel graphics ng anumang antas. Maaaring ma-download ang trial na bersyon mula sa opisyal na website at subukan upang magpasya kung bibilhin pa ang buong bersyon.

Aseprite

Ito ay nararapat na ituring na pinaka-maginhawa at magandang programa para sa paglikha ng pixel art. Ang disenyo ng interface lamang ay sulit, ngunit hindi iyon ang lahat ng mga pakinabang ng Aseprite. Mayroong kakayahang i-animate ang isang larawan, ngunit hindi tulad ng mga nakaraang kinatawan, ito ay ipinatupad nang may kakayahan at maginhawang gamitin. Mayroong lahat ng kailangan mo upang lumikha ng magagandang GIF animation.

Noong ika-20 siglo, ang mga laro sa kompyuter ay naging malawak na lugar ng aplikasyon para sa mga pixel graphics, lalo na noong 90s. Sa pagbuo ng 3D graphics, nagsimulang bumaba ang pixel art, ngunit pagkatapos ay nabuhay muli salamat sa pagbuo ng disenyo ng web, ang pagdating ng mga cell phone at mga mobile application.

Ang Pixel art ay isang espesyal na pamamaraan para sa paglikha ng mga imahe sa digital na anyo, na ginanap sa mga editor ng raster graphics, kung saan gumagana ang artist sa pinakamaliit na yunit ng isang raster digital na imahe - ang pixel. Ang larawang ito ay nailalarawan sa pamamagitan ng isang mababang resolution, kung saan ang bawat pixel ay nagiging malinaw na nakikita. Ang pixel art ay tumatagal ng mahabang panahon at maingat, depende sa pagiging kumplikado ng pagguhit - pixel bawat pixel.

Mga pangunahing panuntunan ng pixel art

Ang pinakamahalagang bahagi ng pixel art ay ang tinatawag na line art - sa madaling salita, ang mga contour nito. Ginagawa ang pixel art gamit ang mga linya - tuwid at hubog.

Mga tuwid na linya

Ang panuntunan para sa pagbuo ng mga linya sa pixel art ay dapat silang binubuo ng mga segment na lumilipat sa gilid ng isang pixel habang umuusad ang drawing. Iwasan pangunahing pagkakamali para sa mga baguhan na pixel art artist: hindi dapat magkadikit ang mga pixel, na bumubuo ng tamang anggulo.

Sa kaso ng mga tuwid na linya, maaari mong gawing mas madali ang iyong gawain sa pamamagitan ng paggamit ng isa sa mga kilalang halimbawa ng mga hilig na tuwid na linya:

Tulad ng makikita mula sa figure, ang lahat ng mga tuwid na linya na ipinakita dito ay binubuo ng magkaparehong mga segment ng pixel, inilipat sa gilid sa layo na isang pixel, at ang pinakasikat ay mga segment ng isa, dalawa at apat na pixel. Ang ganitong mga simpleng tuwid na linya sa pixel graphics ay tinatawag na "ideal".

Ang mga tuwid na linya ay maaaring magkaroon ng ibang pattern, halimbawa, maaari kang magpalit ng mga segment ng dalawang pixel na may isang segment ng isa, ngunit ang mga naturang linya ay hindi magiging maganda, lalo na kapag ang imahe ay pinalaki, kahit na hindi nila nilalabag ang mga patakaran ng pixel art .

Mga hubog na linya

Ang mga tuwid na linya ay mas madaling gawin dahil iniiwasan nila ang mga kink, na hindi ang kaso sa mga hubog na linya. Ang kanilang pagtatayo ay mas mahirap, ngunit ang mga hubog na linya ay kailangang iguhit nang mas madalas kaysa sa mga tuwid na linya.

Bilang karagdagan sa parehong pagbabawal sa pagbuo ng mga tamang anggulo mula sa mga pixel, kapag gumuhit ng mga hubog na linya, kinakailangang tandaan ang likas na katangian ng kanilang pag-aalis. Ang haba ng mga segment ng pixel ay dapat na magbago nang pantay-pantay, unti-unti - tumaas nang maayos at bumaba nang kasing maayos. Hindi pinapayagan ng pixel graphics ang mga kinks.

Malamang na hindi ka makakagawa ng perpektong hubog na linya gamit ang isang paggalaw ng iyong kamay nang hindi lumalabag sa isang solong panuntunan, kaya maaari kang gumamit ng dalawang pamamaraan: gumuhit ng mga linya sa pamamagitan ng pagguhit ng sunud-sunod na pixel, o gumuhit ng regular na kurba at pagkatapos ay itama ito sa pamamagitan ng pag-alis ng mga dagdag na pixel mula sa natapos na "frame".

Dithering

Sa pixel art mayroong isang bagay tulad ng dithering. Ito ay isang partikular na paraan ng paghahalo ng mga pixel ng iba't ibang kulay upang lumikha ng isang epekto ng paglipat ng kulay.

Ang pinakasikat na paraan ng dithering ay ang pag-aayos ng mga pixel sa pattern ng checkerboard:

Ang pamamaraang ito ay may utang sa hitsura nito sa mga teknikal na limitasyon sa mga palette ng kulay, dahil upang makakuha, halimbawa, lila, kinailangan na gumuhit ng pula at asul na mga pixel sa pattern ng checkerboard:

At kasunod nito, ang dithering ay madalas na ginagamit upang ihatid ang lakas ng tunog sa pamamagitan ng liwanag at anino sa mga imahe:

Para matagumpay na gumana ang dithered pixel art, dapat na hindi bababa sa dalawang pixel ang lapad ng lugar ng paghahalo ng kulay.

Mga programa para sa pixel art

Upang makabisado ang paglikha ng sining sa istilong pixel, maaari mong gamitin ang anumang graphic editor na sumusuporta sa ganitong uri ng pagguhit. Ang lahat ng mga artist ay nagtatrabaho sa iba't ibang mga programa batay sa kanilang mga kagustuhan.

Mas gusto ng maraming tao hanggang ngayon na gumuhit gamit ang mga pixel sa kilalang karaniwang programa ng Windows operating system - Microsoft Paint. Ang program na ito ay talagang madaling matutunan, ngunit ito rin ang kawalan nito - ito ay medyo primitive, halimbawa, hindi nito sinusuportahan ang pagtatrabaho sa mga layer at ang kanilang transparency.

Ang isa pang madaling-gamitin na pixel art program na ang demo na bersyon ay makikita online na ganap na libre ay GraphicsGale. Ang downside ng program ay, marahil, na hindi nito sinusuportahan ang pag-save ng pixel art sa .gif na format.

Maaaring subukan ng mga may-ari ng mga Mac computer na magtrabaho libreng programa Pixen. At ang mga gumagamit ng Linux operating system ay dapat subukan ang mga programang GrafX2 at JDraw para sa kanilang sarili.

At, siyempre, ang isang mahusay na pagpipilian para sa paglikha ng pixel art ay ang programa Adobe Photoshop, na may malawak na pag-andar, ay nagbibigay-daan sa iyo upang gumana sa mga layer, sumusuporta sa transparency, nagbibigay simpleng gawain na may palette. Sa tulong ng programang ito ay titingnan natin mga simpleng halimbawa, kung paano gumuhit ng pixel art sa iyong sarili.

Paano Gumuhit ng Pixel Art sa Photoshop

Tulad ng sa mga uri ng tradisyonal sining biswal, pinakamahalaga sa pixel art ay may hugis, anino at liwanag, kaya bago mo matutunan kung paano gumuhit ng pixel art, subukang gawing pamilyar ang iyong sarili sa mga pangunahing kaalaman sa pagguhit - magsanay sa pagguhit gamit ang isang lapis sa papel.

Pagguhit ng "Lobo"

Magsimula tayo sa pinakasimpleng bagay - gumuhit ng ordinaryong lobo. Gumawa ng bagong file sa Photoshop na may resolution ng screen na 72 dpi. Walang punto sa pagtatakda ng malalaking sukat ng imahe - ito ay pixel art. Pumili ng brush, matigas at opaque, itakda ang laki sa 1 pixel.

Gumuhit ng isang maliit na hubog na semi-arc mula kaliwa hanggang kanan, na humahantong mula sa ibaba hanggang sa itaas. Tandaan ang mga panuntunan ng pixel art: panatilihin ang parehong mga proporsyon ng mga segment, ilipat ang mga ito sa gilid sa pamamagitan ng isang pixel, nang hindi umaalis sa mga kink o tamang anggulo. Pagkatapos ay i-mirror ang arko na ito sa pamamagitan ng pagguhit itaas na bahagi bola.

Gamit ang parehong prinsipyo, iguhit ang ibabang bahagi ng bola at ang sinulid. Punan ang bola ng pula gamit ang Fill Tool. Ngayon ang natitira na lang ay magdagdag ng volume - ang aming bola ay mukhang masyadong flat. Kulayan ang isang madilim na pulang guhit sa kanang bahagi sa ibaba ng bola, pagkatapos ay i-dither ang lugar. Sa kaliwang sulok sa itaas ng bola, gumuhit ng highlight ng mga puting pixel.

Tingnan kung gaano ito kasimple - handa na ang bola!

Pagguhit ng "Robot"

Ngayon subukan nating gumuhit ng isang larawan sa tradisyonal na paraan, at pagkatapos lamang ay lilinisin natin ang mga pixel na lumalabag sa mga panuntunan ng pixel art.

Magbukas ng bagong dokumento at gumawa ng magaspang na sketch ng hinaharap na robot:

Ngayon ay maaari mo nang linisin ang lahat ng humahadlang at magdagdag ng mga pixel kung saan kinakailangan:

Sa parehong paraan, iguhit ang ibabang bahagi ng katawan ng robot. Huwag palampasin ang pagkakataong gumuhit ng "perpektong" tuwid na linya sa mga angkop na lugar.

Idetalye ang katawan ng robot. Maraming may karanasan na mga artista ang nagpapayo na ihanda ang iyong sarili ng isang palette bago simulan ang trabaho - isang hanay ng mga kulay na gagamitin mo kapag lumilikha ng trabaho sa isang estilo ng pixel. Nagbibigay-daan ito para sa pinakamalaking integridad ng imahe. Lumikha ng isang palette sa isang libreng lugar ng Photoshop workspace - halimbawa, sa anyo ng mga parisukat o mga spot ng kulay. Kasunod na pumili nais na kulay, i-click ito gamit ang tool na Eyedropper.

Maaari mong simulan ang pagpuno ng mga contour. "Kulayan" ang katawan ng robot na may pangunahing kulay. Lavender blue ang kulay namin.

Baguhin ang kulay ng outline - punan ito ng madilim na asul. Magpasya kung nasaan ang pinagmumulan ng ilaw sa iyong drawing. Para sa amin, ito ay matatagpuan sa isang lugar sa itaas at sa kanan sa harap ng robot. Iguhit natin ang dibdib ng ating karakter, pagdaragdag ng lakas ng tunog:

SA kanang bahagi markahan ang pinakamalalim na anino sa pagguhit, na tumatakbo kasama ang tabas ng katawan. Mula sa anino na ito, mula sa mga gilid hanggang sa gitna, gumuhit ng isang mas magaan na anino na nawawala sa mga nilalayong lugar na iluminado ng pinagmumulan ng liwanag:

Magdagdag ng mga highlight sa robot sa lahat ng lugar na inaasahang magpapakita ng liwanag:

Bigyan ng cylindrical na anyo ang mga binti ng robot gamit ang anino at liwanag. Sa parehong paraan, gumawa ng mga butas mula sa mga bilog sa dibdib ng robot:

Ngayon, pagbutihin natin ang larawan sa pamamagitan ng pagdaragdag ng naunang tinalakay na elemento ng pixel art - dithering - sa mga anino na bahagi ng katawan.

Hindi mo kailangang gumawa ng dithering sa mga highlight, pati na rin sa mga binti - ang mga ito ay masyadong maliit. Gamit ang dark at light pixels, gumuhit ng isang hilera ng mga rivet sa ulo ng robot sa halip na mga ngipin, at magdagdag din ng nakakatawang antenna. Tila sa amin na ang kamay ng robot ay hindi iginuhit nang mahusay - kung nakatagpo ka ng parehong problema, gupitin ang bagay sa Photoshop at ilipat ito pababa.

Iyon lang - handa na ang aming nakakatawang pixel robot!

At sa tulong ng video na ito matututunan mo kung paano gumawa ng pixel art animation sa Photoshop:

Kunin ito para sa iyong sarili at sabihin sa iyong mga kaibigan!

Basahin din sa aming website:

magpakita pa

Sa tutorial na ito matututunan mo kung paano gawing pixel art ang larawan ng isang tao bilang kathang-isip na karakter arcade game mula noong unang bahagi ng 90s.
James May - aka Smudgethis - binuo ang istilong ito noong 2011 para sa music video para sa isang dubstep rock act. Ang unang hit ni Nero, Me & You - kung saan gumawa siya ng animation para ipakita lumang laro na nagtatampok sa dalawang miyembro ni Nero Ang laro ay isang 2D rhythm platformer na may 16-bit na graphics na katulad ng Double Dragon, ngunit higit na nakahihigit sa 8-bit na retro classic tulad ng Super Mario Bros.
Para magawa ang istilong ito, kailangan pa ring blocky ang mga character, ngunit mas kumplikado kaysa sa mga lumang laro. At kahit na kailangan mong gumamit ng isang limitadong paleta ng kulay upang makamit hitsura, tandaan na ang mga larong ito ay mayroon pa ring 65,536 na kulay.
Dito ipinapakita sa iyo ni James kung paano lumikha ng isang character mula sa isang larawan gamit ang isang simpleng color palette at ang Pencil tool.
Tulad ng gabay sa animation, kakailanganin mo rin ng larawan ng tao. Gumamit si James ng larawan ng isang punk na kasama sa mga file ng proyekto para sa tutorial na ito.
Kapag kumpleto na, tingnan ang 16-bit na After Effects animation tutorial kung saan ipinapakita sa iyo ni James kung paano kunin ang karakter na ito sa AE, i-animate siya, at ilapat ang mga retro effect ng laro.

Hakbang 1

Buksan ang Animation Guide (16 bit).psd at 18888111.jpg (o larawan na gusto mo) para gamitin bilang base para sa karakter. Ang isang full-length na larawan sa profile ay pinakamahusay na gagana at makakatulong sa pagkuha ng mga color palette at estilo para sa iyong 16-bit na figure.
Ang animation tutorial ay may ilang mga pose sa mga indibidwal na layer. Piliin mo yung ang pinakamahusay na paraan tumutugma sa pose sa iyong larawan - dahil wala kaming mga binti sa frame, ginamit ko ang karaniwang pose sa antas 1.

Hakbang 2

Gamit ang Rectangular Marquee Tool (M), piliin ang ulo mula sa iyong larawan at kopyahin (Cmd /Ctrl + C) at i-paste ito (Cmd /Ctrl + V) sa Animation Guide (16 bit).psd.
I-scale ang imahe upang magkasya, nang proporsyonal. Mapapansin mo na dahil napakaliit ng mga sukat ng PSD, agad na magsisimulang gumuhit ng pixel ang larawan.

Hakbang 3

Gumawa ng bagong layer at iguhit ang outline gamit ang isang pixel na itim na lapis (B), gamit ang animation guide na ibinigay dito at ang larawan bilang base. \ P
Ang ibinigay na gabay ay tumutulong na bumuo ng isang hanay ng mga character mula sa mas malalaking boss figure o mas slim na babae. Isa itong magaspang na gabay para sa pagbuo at pag-animate ng aking mga pixel art na character.

Hakbang 4

Gamit ang Eyedropper Tool (I), sample ang pinakamadilim na bahagi ng kulay ng balat sa larawan at lumikha ng isang maliit na parisukat ng kulay. Gawin ito ng tatlong beses pa upang lumikha ng isang apat na kulay na palette ng kulay ng balat.
Gumawa ng isa pang layer sa ibaba ng outline layer at gumamit ng isang-pixel na brush at isang apat na kulay na palette ng kulay upang lilim ang imahe (muli, gamit ang larawan bilang iyong gabay). \ P
Pinakamainam na iimbak ang lahat ng mga elemento ng iyong likhang sining o iba't ibang mga layer dahil ginagawa nitong madaling gamitin muli ang mga ito sa iba pang mga hugis. Ito ay lalong kapaki-pakinabang para sa mga baddies, dahil karamihan sa mga 16-bit na laro ay gumagamit ng halos magkatulad na mga numero. Halimbawa, ang isang kaibigan ay maaaring may pulang kamiseta at isang kutsilyo, habang ang isang kaibigan ay magkapareho maliban sa isang asul na kamiseta at isang baril.

Hakbang 5

Ulitin ang prosesong ito para sa iba pang bahagi ng figure, itinabing ang tela upang tumugma sa iba pang mga elemento sa orihinal na larawan. Siguraduhing ipagpatuloy ang pagsa-sample gamit ang tool na Eyedropper upang lumikha muna ng mga color palette, dahil nagbibigay ito ng pare-parehong hanay ng mga kulay na mukhang mahusay at akma sa medyo limitadong color palette ng 16-bit na mga laro.

Hakbang 6

Magdagdag ng data upang pagandahin ang iyong karakter gamit ang mga shade, tattoo, hikaw, atbp. Kumain dito at isipin kung paano mo gustong lumabas ang iyong karakter sa kapaligiran ng paglalaro. Marahil ay maaari silang gumamit ng palakol o magkaroon ng robotic arm?

Hakbang 7

Upang i-animate ang iyong karakter, ulitin ang mga nakaraang hakbang gamit ang iba pang limang layer ng gabay sa animation. Ang prosesong ito ay maaaring tumagal ng ilang oras upang makabisado at lumikha ng mga walang putol na resulta, ngunit ang mga short cut ay maaaring gawin sa pamamagitan ng muling paggamit ng mga elemento mula sa mga nakaraang frame. Halimbawa, sa anim na frame na pagkakasunud-sunod na ito, ang ulo ay nananatiling hindi nagbabago.

Hakbang 8

Upang suriin ang pagkakasunud-sunod ng animation, buksan ang panel ng Animation sa Photoshop at tiyaking iyon sa sandaling ito tanging ang unang frame ng animation. Maaari kang magdagdag ng mga bagong frame at i-on at i-off ang mga layer upang gawin ang iyong animation, ngunit karamihan sa mabilis na paraan ay gamitin ang command na "Gumawa ng Mga Frame mula sa Mga Layer" sa pop-up menu ng panel (kanang tuktok).
Ang unang frame ay isang walang laman na background, kaya piliin ito at mag-click sa icon ng basurahan ng panel (ibaba) upang tanggalin ito.

Pixel Art(Pixel graphics) ay napakasikat para sa paglalaro kahit sa mga araw na ito at may ilang mga dahilan para dito!

Kaya, kung ano ang nakakaakit sa Pixel Art:

1. Pagdama. Napakaganda ng Pixel Art! Maraming masasabi tungkol sa bawat indibidwal na pixel sa isang sprite.
2. Nostalgia. Ibinabalik ng Pixel Art ang napakagandang nostalgic na pakiramdam para sa mga gamer na lumaki sa paglalaro ng Nintendo, Super Nintendo, o Genesis (tulad ko!)
3. Madaling matutunan. Ang Pixel Art ay isa sa mga pinakamadaling uri upang matutunan digital na sining, lalo na kung mas programmer ka kaysa artista ;]

Kaya, gusto mo bang subukan ang iyong kamay sa Pixel Art? Pagkatapos ay sundan mo ako habang ipinapakita ko sa iyo kung paano gumawa ng simple ngunit epektibong karakter sa paglalaro na magagamit mo sa iyong sariling laro! Dagdag pa, bilang isang bonus, titingnan natin kung paano ito isama sa mga laro sa iPhone!

Upang matagumpay na matuto, kakailanganin mo ng Adobe Photoshop. Kung wala ka nito, maaari kang mag-download ng libreng pagsubok mula sa website ng Adobe o torrent.

Ano ang Pixel Art?

Bago tayo magsimula, linawin natin kung ano ang Pixel Art, dahil hindi ito gaanong halata gaya ng iniisip mo. Ang pinakamadaling paraan upang tukuyin kung ano ang Pixel Art ay ang tukuyin kung ano ang hindi, ibig sabihin: anumang bagay kung saan awtomatikong nalilikha ang mga pixel. Narito ang ilang halimbawa:

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

Blur Tool: Pagtukoy sa mga pixel at pagkopya/pag-edit ng mga ito upang gawin bagong bersyon nakaraang larawan. Muli, hindi pixel art.

Makinis na Tool(karaniwang bumubuo ng mga bagong pixel sa iba't ibang 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 nangangailangan sila ng layer para sa paghahalo ng mga effect (paghahalo ng mga pixel sa pagitan ng dalawang layer ayon sa isang partikular na algorithm). Ngunit dahil karamihan sa mga device sa kasalukuyan ay humaharap sa milyun-milyong kulay, ang pahayag na ito ay maaaring balewalain. Gayunpaman, ang paggamit ay hindi malaking dami ang mga kulay ay magandang kasanayan sa Pixel art.

Iba pang mga kasangkapan tulad ng (linya) o kasangkapan sa balde ng pintura Ang (Paint Bucket) ay awtomatikong bumubuo ng mga pixel, ngunit dahil maaari mong itakda ang mga ito sa hindi anti-alias na mga pixel na pinupunan mo, ang mga tool na ito ay itinuturing na Pixel Art friendly.

Kaya, nalaman namin na ang Pixel Art ay nangangailangan ng maraming pansin kapag inilalagay ang bawat pixel sa isang sprite, kadalasan nang manu-mano at may limitadong palette ng mga kulay. Magtrabaho na tayo ngayon!

Simula ng trabaho

Bago mo simulan ang paggawa ng iyong unang Pixel Art asset, dapat mong malaman na ang Pixel Art ay hindi maaaring i-scale. Kung susubukan mong bawasan ito, ang lahat ay magmumukhang malabo. Kung susubukan mong i-zoom in, magiging okay ang lahat basta gumamit ka ng multiple of two zoom (pero siyempre hindi ito matalas).

Upang maiwasan ang problemang ito, dapat mo munang maunawaan kung gaano mo kalaki ang gusto mong maging karakter ng iyong laro, o elemento ng laro, at pagkatapos ay makapagtrabaho. Kadalasan ay nakabatay ito sa laki ng screen ng device na iyong tina-target at kung gaano karaming "pixel" ang gusto mong makita.

Halimbawa, kung gusto mong magmukhang dalawang beses ang laki ng laro sa screen ng iPhone 3GS (“Oo, gusto ko talagang bigyan ng pixelated retro look ang laro ko!”), na ang resolution ng screen ay 480x320 pixels, kailangan mong gumana sa kalahati ng resolution sa kasong ito ay magiging 240x160 pixels.

Magbukas ng bagong dokumento sa Photoshop ( File → Bago…) at itakda ang laki sa anumang laki ng screen ng iyong laro, pagkatapos ay piliin ang laki para sa iyong karakter.

Ang bawat cell ay 32x32 pixels!

Pinili ko ang 32x32 pixels hindi lamang dahil akmang-akma ito sa napiling laki ng screen, ngunit dahil din sa multiple ng 2 ang 32x32 pixels, na maginhawa para sa mga laruang makina (madalas na multiple ng 2 ang mga laki ng tile, naka-align ang mga texture ng maramihang 2, atbp.

Kahit na ang engine na iyong ginagamit ay sumusuporta sa anumang laki ng imahe, maaari mong subukang magtrabaho nang may pantay na bilang ng mga pixel. Sa kasong ito, kung ang imahe ay kailangang i-scale, ang laki ay mahahati nang mas mahusay, na sa huli ay magreresulta sa mas mahusay na pagganap.

Pagguhit ng Pixel Art na character

Ang Pixel Art ay kilala na malinaw at madaling basahin ang mga graphics: maaari mong tukuyin ang mga tampok ng mukha, mata, buhok, mga bahagi ng katawan gamit lamang ang ilang tuldok. Gayunpaman, ang laki ng imahe ay nagpapalubha sa gawain: mas maliit ang iyong karakter, mas mahirap silang gumuhit. Upang maging mas praktikal, piliin ang pinakamaliit na katangian ng karakter. Lagi kong pinipili ang mga mata dahil isa ito sa mga pinakamahusay na paraan upang bigyang buhay ang isang karakter.

Sa Photoshop, piliin Lapis na kasangkapan(Kasangkapan ng Lapis). Kung hindi mo ito mahanap, pindutin lamang nang matagal ang tool Brush Tool(Brush Tool) at makikita mo ito kaagad (ito ay dapat na pangalawa sa listahan). Kakailanganin mo lang na baguhin ang laki nito sa 1px (maaari kang mag-click sa Tool Options bar at i-resize ito, o pindutin nang matagal ang [ key).

Kakailanganin mo rin Burahin ang tool(Eraser Tool), kaya i-click ito (o pindutin ang E) 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 pixelating! Iguhit ang mga kilay at mata gaya ng ipinapakita sa larawan sa ibaba:

ey! naka pixelated ako!!

Maaari ka nang magsimula sa Lineart, ngunit ang isang mas praktikal na paraan ay ang pagguhit ng silweta ng karakter. Magandang balita ay hindi mo na kailangang maging pro sa yugtong ito, subukan lamang na isipin ang laki ng mga bahagi ng katawan (ulo, katawan, braso, binti) at ang unang pose ng karakter. Subukan ang isang bagay na tulad nito sa kulay abo:

Hindi mo kailangang maging pro sa yugtong ito

Pakitandaan na may iniwan din ako walang laman na espasyo. Hindi mo talaga kailangang punan ang buong canvas, mag-iwan ng puwang para sa mga frame sa hinaharap. Sa kasong ito, magiging lubhang kapaki-pakinabang na panatilihin ang parehong laki ng canvas para sa lahat ng ito.

Pagkatapos mong tapusin ang silhouette, oras na . Ngayon ay kailangan mong maging mas maingat sa iyong pixel placement, kaya huwag mag-alala tungkol sa mga damit, armor, atbp. Para lang maging ligtas, maaari kang magdagdag ng bagong layer upang hindi mawala ang iyong orihinal na silhouette.

Kung sa tingin mo ay masyadong mabagal gumuhit ang tool na Pencil, maaari mong gamitin palagi (Line Tool), tandaan lamang na hindi mo magagawang iposisyon ang mga pixel nang tumpak hangga't maaari gamit ang isang lapis. Kakailanganin mong i-configure tulad ng ipinapakita sa ibaba:

Pumili , pagpindot at paghawak Rectangle tool(Rectangle Tool)

Pumunta sa panel ng mga pagpipilian sa tool, sa drop-down na listahan Pumili ng Tool Mode(Path Tracing Mode) piliin ang Pixel , baguhin Timbang(Kapal) hanggang 1px (kung hindi pa tapos) at alisan ng check Anti-alias(Smoothing). Ganito dapat mayroon ka nito:

Pansinin na hindi ko ginawa ang ilalim na balangkas para sa mga paa. Ito ay opsyonal, dahil ang mga paa ay hindi isang mahalagang bahagi ng mga binti upang i-highlight, at ito ay magse-save ng isang linya ng mga pixel sa canvas.

Paglalapat ng mga kulay at anino

Ngayon ay handa ka nang magsimulang kulayan ang ating karakter. Huwag mag-alala tungkol sa pagpili mga tamang kulay, napakadaling baguhin ang mga ito mamaya, siguraduhin lamang na ang bawat isa ay may sariling "kulay". Gamitin ang mga default na kulay sa tab Mga swatch(Window → Swatch).

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

Ang magandang, contrasting na kulay ay nagpapabuti sa pagiging madaling mabasa ng iyong asset!

Pakitandaan na hindi ko pa rin binalangkas ang mga damit o buhok. Laging tandaan: mag-save ng maraming pixel hangga't maaari mula sa mga hindi kinakailangang balangkas!

Hindi na kailangang mag-aksaya ng oras sa pagpipinta ng bawat pixel. Upang mapabilis ang iyong trabaho, gumamit ng mga linya para sa parehong kulay, o Tool sa balde ng pintura(Paint Bucket Tool) upang punan ang mga puwang. Sa pamamagitan ng paraan, kakailanganin mo ring i-configure ito. Pumili Tool sa balde ng pintura sa toolbar (o pindutin lamang ang G key) at baguhin Pagpaparaya(Pagpaparaya) sa 0, at alisin din ang tsek Anti-alias(Smoothing).

Kung sakaling kailanganin mong gamitin Tool ng Magic Wand(Magic Wand Tool) - isang napaka-kapaki-pakinabang na tool na pumipili ng lahat ng pixel na may parehong kulay, pagkatapos ay i-set up ito sa parehong paraan tulad ng tool na "Paint Bucket" - walang tolerance at anti-aliasing.

Ang susunod na hakbang, na mangangailangan ng ilang kaalaman sa iyong bahagi, ay ang pag-dodging at pagtatabing. Kung wala kang kaalaman kung paano magpakita ng maliwanag at madilim na panig, pagkatapos ay sa ibaba ay bibigyan kita ng ilang mga tagubilin. Kung wala kang oras o hilig na pag-aralan ito, maaari mong laktawan ang hakbang na ito at pumunta sa seksyong "Spice Up Your Palette", dahil sa huli, maaari mo lang gawin ang iyong pagtatabing katulad ng sa aking halimbawa!

Gamitin ang parehong pinagmumulan ng ilaw para sa buong asset

Subukang bigyan ito ng mga hugis na gusto/maaari mo, dahil pagkatapos nito ang asset ay magsisimulang magmukhang mas kawili-wili. Halimbawa, ngayon ay makikita mo na ang ilong, nakasimangot na mga mata, makapal na buhok, mga tupi sa pantalon, atbp. Maaari ka ring magdagdag ng ilang mga light spot dito, mas magiging maganda ito:

Gumamit ng parehong pinagmumulan ng liwanag kapag nagtatabing

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

Pagandahin ang 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 ang mga ito sa maraming laro.

Mayroon ang Photoshop malaking pagpipilian mga kulay sa karaniwang palette, ngunit hindi dapat masyadong umasa dito. Ang pinakamahusay na paraan upang gumawa ng sarili mong mga kulay ay ang pag-click sa pangunahing palette sa ibaba ng toolbar.

Pagkatapos, sa window ng Color Picker, i-browse ang kanang sidebar upang pumili ng isang kulay at ang pangunahing lugar upang piliin ang nais na liwanag (mas liwanag o mas madidilim) at saturation (mas maliwanag o duller).

Kapag nahanap mo na ang gusto mo, i-click ang OK at muling i-configure ang tool na Paint Bucket. Huwag mag-alala, maaari mong alisin lamang ang tsek ang kahon na 'Magkadikit' at kapag nagpinta ka gamit ang isang bagong kulay, lahat ng mga bagong pixel na may parehong kulay ng background ay mapupunan din.

Ito ay isa pang dahilan kung bakit mahalagang magtrabaho sa isang maliit na bilang ng mga kulay at palaging gumamit ng parehong kulay para sa parehong elemento (mga kamiseta, buhok, helmet, nakasuot, atbp.). Ngunit tandaan na gumamit ng iba't ibang mga kulay para sa iba pang mga lugar, kung hindi, ang aming pagguhit ay magiging sobrang kulay!

Alisan ng check ang "Magkadikit" upang punan ang mga napiling pixel ng parehong kulay

Baguhin ang mga kulay kung gusto mo at makakuha ng mas kaakit-akit na pangkulay ng character! Maaari mo ring muling kulayan ang mga balangkas, siguraduhing maayos ang paghahalo ng mga ito sa background.

Panghuli, gumawa ng pagsubok sa kulay ng background: lumikha ng bagong layer sa ilalim ng iyong karakter at punan ito iba't ibang Kulay. Ito ay upang matiyak na ang iyong karakter ay makikita sa maliwanag, madilim, mainit at malamig na background.

Tulad ng nakikita mo na, 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, hal. Elliptical Marquee(Oval marquee) at Lasso(Lasso).

Gamit ang mga tool na ito madali mong baguhin ang laki ng mga napiling bahagi, o kahit na paikutin ang mga ito. Upang gawin ito, gumamit ng anumang tool sa pagpili (o pindutin ang M) upang pumili ng isang lugar, i-right-click at piliin Libreng Pagbabago(Free Transform), o pindutin lamang ang Ctrl + T. Upang baguhin ang laki ng napiling lugar, i-drag ang isa sa mga handle na matatagpuan sa paligid ng perimeter ng transformation frame. Upang baguhin ang laki ng pagpili habang pinapanatili ang mga proporsyon, pindutin nang matagal ang Shift key at i-drag ang isa sa mga handle ng sulok.

Gayunpaman, awtomatikong pinapakinis ng Photoshop ang anumang na-edit gamit ang Libreng Pagbabago kaya bago mag-edit pumunta sa I-edit → Mga Kagustuhan → Pangkalahatan(Ctrl + K) at baguhin Pagsasama-sama ng Larawan(Imahe Interpolation) sa Pinakamalapit na kapitbahay(Pinakamalapit na kapitbahay). Sa madaling salita, kapag Pinakamalapit na kapitbahay ang bagong posisyon at laki ay kinakalkula nang halos halos, walang bagong kulay o opacity ang inilapat at ang mga kulay na iyong pinili ay mananatili.

Pagsasama ng Pixel Art sa Mga Laro sa iPhone

Sa seksyong ito, matututunan mo kung paano isama ang aming pixel art sa isang iPhone game gamit ang Cocos2d game framework. Bakit iPhone lang ang iniisip ko? Dahil, salamat sa isang serye ng mga artikulo tungkol sa Unity (halimbawa: , o Game sa istilo ng Jetpack Joyride sa Unity 2D) alam mo na kung paano makipagtulungan sa kanila sa Unity, at mula sa mga artikulo tungkol sa Crafty (Browser games: Snake) at Epekto (Panimula sa paglikha ng mga laro sa browser sa Impact) natutunan mo kung paano ipasok ang mga ito sa canvas at lumikha ng mga laro sa browser.

Kung bago ka sa Cocos2D, o sa pagbuo ng iPhone app sa pangkalahatan, iminumungkahi kong magsimula ka sa isa sa mga tutorial na Cocos2d at iPhone. Kung mayroon kang Xcode at Cocos2d na naka-install, magbasa pa!

Lumikha bagong proyekto iOS → cocos2d v2.x → template ng cocos2d iOS, pangalanan itong PixelArt, at piliin ang iPhone bilang device. I-drag ang ginawang pixel art, halimbawa: sprite_final.png papunta sa iyong proyekto at pagkatapos ay buksan HelloWorldLayer.m at palitan ang paraan ng pagsisimula ng mga sumusunod:

-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = OO; ; ) ibalik ang sarili; )

Ipinoposisyon namin ang sprite sa kaliwang bahagi ng screen at paikutin ito upang ito ay nakaharap sa kanan. Mag-compile, tumakbo, at pagkatapos ay makikita mo ang iyong sprite sa screen:

Gayunpaman, tandaan, gaya ng tinalakay namin kanina sa tutorial na ito, gusto naming pataasin ang sukat ng mga pixel sa isang artipisyal na paraan upang ang bawat pixel ay kapansin-pansing nakikilala mula sa iba. Kaya idagdag ang bagong linyang ito sa loob ng paraan ng pagsisimula:

Hero.scale = 2.0;

Walang kumplikado, tama? Mag-compile, tumakbo at... teka, malabo ang ating sprite!

Ito ay dahil, bilang default, pinapakinis ng Cocos2d ang pagguhit kapag ini-scale ito. Hindi namin ito kailangan, kaya idagdag ang sumusunod na linya:

Kino-configure ng linyang ito ang Cocos2d na i-scale ang mga imahe nang walang antialiasing, kaya mukhang "pixelated" pa rin ang ating lalaki Mag-compile, tumakbo at... oo, gumagana ito!

Pansinin ang mga benepisyo ng paggamit ng Pixel Art graphics - maaari kaming gumamit ng mas maliit na larawan kaysa sa ipinapakita sa screen, na nakakatipid ng maraming texture memory. Hindi na namin kailangang gumawa ng hiwalay na mga larawan para sa mga retina display!

Anong susunod?

Sana ay nagustuhan mo ang tutorial na ito at natuto ka ng kaunti pa tungkol sa pixel art! Bago maghiwalay, nais kong bigyan ka ng ilang payo:

• Palaging subukang iwasan ang paggamit ng anti-aliasing, gradient, o masyadong maraming kulay sa iyong mga asset. Para ito sa ikabubuti mo, lalo na kung baguhan ka pa.
• Kung talagang gusto mong tularan ang isang retro na hitsura, tingnan ang likhang sining sa 8-bit o 16-bit na mga console na laro.
• Ang ilang mga estilo ay hindi gumagamit ng madilim na mga balangkas, ang iba ay hindi isinasaalang-alang ang mga epekto ng liwanag o anino. Ang lahat ay nakasalalay sa istilo! Sa aming tutorial hindi kami gumuhit ng mga anino, ngunit hindi iyon nangangahulugan na hindi mo dapat gamitin ang mga ito.

Para sa isang baguhan, mukhang ang Pixel Art ang pinakamadaling matutunang graphics, ngunit sa katotohanan ay hindi ito kasing simple ng tila. Ang pinakamahusay na paraan Upang mapabuti ang iyong mga kasanayan, ito ay pagsasanay, pagsasanay, pagsasanay. Lubos kong inirerekumenda ang pag-post ng iyong gawa sa mga forum ng Pixel Art upang mabigyan ka ng payo ng ibang mga artist - ito ay isang mahusay na paraan upang mapabuti ang iyong diskarte! Magsimula sa maliit, magsanay ng marami, makakuha puna at maaari kang lumikha ng isang kamangha-manghang laro na magdadala sa iyo ng maraming pera at kagalakan!