"itemprop="image">

Sa 10-step na How to Draw Pixel Art tutorial na ito, ituturo ko sa iyo kung paano gumawa ng "sprite" (isang solong 2D character o object). Ang termino mismo, siyempre, ay nagmula sa mga video game.

Natutunan ko kung paano lumikha ng pixel art dahil kailangan ko ito para sa mga graphics sa aking laro. Pagkatapos ng mga taon ng pagsasanay, nasanay ako at nagsimulang maunawaan na ang pixel art ay higit pa sa isang sining kaysa sa isang tool lamang. Sa ngayon, sikat na sikat ang pixel art sa mga developer at illustrator ng laro.

Ginawa ang tutorial na ito maraming taon na ang nakakaraan upang turuan ang mga tao ng mga simpleng konsepto ng pixel art, ngunit pinalawig nang maraming beses, kaya malaki ang pagkakaiba nito sa orihinal na bersyon. Mayroong maraming mga tutorial sa web sa parehong paksa, ngunit lahat sila ay tila masyadong kumplikado o mahaba sa akin. Ang pixel art ay hindi agham. Hindi mo kailangang kalkulahin ang mga vector habang gumagawa ng pixel art.

Mga gamit

Ang isa sa mga pangunahing bentahe ng paglikha ng pixel art ay hindi mo kailangan ng anumang mga advanced na tool - sapat na dapat ang graphic editor na naka-install sa iyong computer bilang default. Ito ay nagkakahalaga ng pagbanggit na may mga program na partikular na idinisenyo para sa paglikha ng pixel art, tulad ng Pro Motion o Pixen (para sa mga gumagamit ng Mac). Hindi ko pa nasubukan ang mga ito sa aking sarili, ngunit nakarinig ako ng maraming positibong feedback. Sa tutorial na ito, gagamit ako ng Photoshop, na, bagama't malaki ang halaga, ay naglalaman ng maraming kapaki-pakinabang na tool para sa paglikha ng sining, na ang ilan ay lubhang kapaki-pakinabang para sa pixelation.

Paano Gumuhit ng Pixel Art sa Photoshop

Habang gumagamit ng Photoshop, ang iyong pangunahing sandata ay ang Pencil Tool (B key), na isang alternatibo sa Brush Tool. Binibigyang-daan ka ng lapis na kulayan ang mga indibidwal na pixel nang hindi nag-overprint ng mga kulay.

Dalawa pang tool ang magagamit: "Piliin" (key M) at "Magic Wand" (key W) upang piliin at i-drag, o kopyahin at i-paste. Tandaan na sa pamamagitan ng pagpindot sa Alt o Shift key habang gumagawa ng pagpili, maaari mong idagdag ang mga napiling bagay o ibukod ang mga ito sa kasalukuyang listahan ng pagpili. Ito ay kinakailangan sa pamamagitan ng paraan kapag kailangan mong pumili ng hindi pantay na mga bagay.

Maaari ka ring gumamit ng eyedropper para maglipat ng mga kulay. Mayroong isang libong dahilan kung bakit mahalagang panatilihin ang mga kulay sa pixel art, kaya kakailanganin mong kumuha ng ilang mga kulay at gamitin ang mga ito nang paulit-ulit.

Panghuli, siguraduhing kabisaduhin mo ang lahat ng mga hotkey, dahil ito ay makakatipid sa iyo ng maraming oras. Pansinin ang "X" na nagpapalipat-lipat sa pagitan ng pangunahin at pangalawang kulay.

mga linya

Ang mga pixel ay ang parehong maliit na kulay na mga parisukat. Una kailangan mong malaman kung paano epektibong ayusin ang mga parisukat na ito upang lumikha ng linya na kailangan mo. Titingnan natin ang dalawang pinakakaraniwang uri ng mga linya: tuwid at hubog.

mga tuwid na linya

Alam ko kung ano ang iniisip mo: ang lahat ay napakasimple dito na walang saysay na pag-aralan ang isang bagay. Ngunit pagdating sa mga pixel, kahit na ang mga tuwid na linya ay maaaring maging isang problema. Kailangan nating iwasan ang mga tulis-tulis na bahagi - maliliit na fragment ng linya na nagmumukhang tulis-tulis. Lumilitaw ang mga ito kung ang isa sa mga bahagi ng linya ay mas malaki o mas maliit kaysa sa iba pang nakapalibot dito.

mga hubog na linya

Kapag gumuhit ng mga hubog na linya, kailangan mong tiyakin na ang pagbaba o pagtaas ay pare-pareho sa buong haba. Sa halimbawang ito, ang maayos na linya ay may mga pagitan 6 > 3 > 2 > 1, ngunit ang linya na may pagitan 3 > 1< 3 выглядит зазубренной.

Ang kakayahang gumuhit ng mga linya ay isang pangunahing elemento ng pixel art. Kaunti pa ay sasabihin ko sa iyo ang tungkol sa anti-aliasing.

Konseptwalisasyon

Upang makapagsimula, kailangan mo ng magandang ideya! Subukang ilarawan sa isip kung ano ang iyong gagawin sa pixel art - sa papel o sa iyong isip lamang. Ang pagkakaroon ng ideya tungkol sa pagguhit, maaari kang tumutok sa pixelation mismo.

Mga paksa para sa pagmuni-muni

• Ano ang gagamitin ng sprite na ito? Ito ba ay para sa website o para sa laro? Kakailanganin bang gawin itong animated mamaya? Kung oo, kakailanganin itong gawing mas maliit at hindi gaanong detalyado. Sa kabaligtaran, kung hindi ka gagana sa sprite sa hinaharap, maaari kang mag-attach ng maraming detalye dito hangga't kailangan mo. Samakatuwid, magpasya nang maaga kung ano ang eksaktong kailangan ng sprite na ito at piliin ang pinakamainam na mga parameter.
• Ano ang mga paghihigpit? Naunang binanggit ko ang kahalagahan ng pag-iingat ng mga kulay. Ang pangunahing dahilan ay ang limitadong palette ng mga kulay dahil sa mga kinakailangan ng system (na kung saan ay lubhang hindi malamang sa ating panahon) o para sa pagiging tugma. O para sa katumpakan, kung tinutularan mo ang isang partikular na istilo ng C64, NES, at iba pa. Ito rin ay nagkakahalaga ng pagsasaalang-alang sa mga sukat ng iyong sprite at kung ito ay masyadong namumukod-tangi laban sa background ng mga kinakailangang bagay.

Subukan Natin!

Walang mga paghihigpit sa tutorial na ito, ngunit nais kong tiyakin na ang aking pixel art ay sapat na malaki upang makita mo nang detalyado kung ano ang nangyayari sa bawat isa sa mga hakbang. Sa layuning ito, nagpasya akong gamitin bilang isang modelo ng Lucha Lawyer, isang karakter mula sa mundo ng wrestling. Tamang-tama siya sa isang fighting game o isang dynamic na action movie.

Circuit

Ang itim na outline ay magiging isang magandang base para sa iyong sprite, kaya doon tayo magsisimula. Pinili namin ang itim dahil maganda ito, ngunit medyo madilim din. Mamaya sa tutorial, ipapakita ko sa iyo kung paano baguhin ang kulay ng outline upang mapataas ang pagiging totoo.

Mayroong dalawang paraan sa paggawa ng balangkas. Maaari mong iguhit ang landas nang libre at pagkatapos ay i-tweak ito nang kaunti, o iguhit ang lahat nang paisa-isa. Oo, naunawaan mo nang tama, pinag-uusapan natin ang tungkol sa isang libong pag-click.

Ang pagpili ng paraan ay depende sa laki ng sprite at sa iyong mga kakayahan sa pixel. Kung ang sprite ay talagang napakalaki, kung gayon ito ay magiging mas lohikal na iguhit ito sa pamamagitan ng kamay upang lumikha ng isang magaspang na hugis, at pagkatapos ay putulin ito. Maniwala ka sa akin, mas mabilis ito kaysa subukang iguhit kaagad ang perpektong sketch.

Sa aking tutorial, lumikha ako ng isang medyo malaking sprite, kaya ang unang paraan ay ipapakita dito. Mas magiging madali kung ipapakita ko ang lahat ng biswal at ipaliwanag kung ano ang nangyari.

Unang Hakbang: Magaspang na Balangkas

Gamit ang iyong mouse o tablet, gumuhit ng magaspang na outline para sa iyong sprite. Tiyaking HINDI ito masyadong hilaw, ibig sabihin, ito ay katulad ng kung paano mo nakikita ang iyong huling produkto.

Halos sumama ang sketch ko sa plano ko.

Pangalawang hakbang: pulihin ang balangkas

Magsimula sa pamamagitan ng pag-magnify sa larawan ng 6 o 8 beses. Dapat mong malinaw na makita ang bawat pixel. At pagkatapos, linisin ang balangkas. Sa partikular, bigyang-pansin ang "stray pixels" (ang buong landas ay dapat na hindi hihigit sa isang pixel ang kapal), alisin ang mga tulis-tulis na gilid, at magdagdag ng maliliit na detalye na hindi namin nakuha sa unang hakbang.

Kahit na ang malalaking sprite ay bihirang lumampas sa 200 by 200 pixels. Ang pariralang "gumawa ng higit sa mas kaunti" ay isang mahusay na paraan upang ilarawan ang proseso ng pixelation. Malapit mong makita na kahit isang pixel ay mahalaga.

Pasimplehin ang iyong balangkas hangga't maaari. Haharapin namin ang mga detalye sa ibang pagkakataon, ngayon kailangan mong magtrabaho sa paghahanap ng malalaking pixel, tulad ng, halimbawa, segmentation ng kalamnan. Ang mga bagay ay hindi mukhang napakahusay sa ngayon, ngunit magkaroon ng kaunting pasensya.

Kulay

Kapag handa na ang balangkas, makakakuha tayo ng isang uri ng pangkulay na kailangang punan ng mga kulay. Ang pintura, punan at iba pang mga tool ay makakatulong sa amin dito. Ang pagtutugma ng mga kulay ay maaaring nakakalito, ngunit ang teorya ng kulay ay malinaw na hindi ang paksa ng artikulong ito. Magkagayunman, may ilang mga pangunahing konsepto na kailangan mong malaman.

Modelo ng kulay ng HSB

Ito ay isang English abbreviation, na binuo mula sa mga salitang "Hue, Saturation, Brightness". Isa lamang ito sa maraming mga modelo ng kulay ng computer (o mga numerical na representasyon ng kulay). Marahil ay narinig mo na ang iba pang mga halimbawa tulad ng RGB at CMYK. Karamihan sa mga editor ng larawan ay gumagamit ng HSB para sa pagpili ng kulay, kaya tututukan namin ito.

Hue Hue ang tawag namin noon na kulay.

Saturation– Saturation – tinutukoy ang intensity ng kulay. Kung ang halaga ay 100%, ito ang pinakamataas na liwanag. Kung ibababa mo ito, lilitaw ang pagkapurol sa kulay at ito ay "magiging kulay abo".

ningning- liwanag na naglalabas ng kulay. Halimbawa, para sa itim, ang tagapagpahiwatig na ito ay 0%.

Pagpili ng mga kulay

Nasa iyo ang pagpapasya kung aling mga kulay ang pipiliin, ngunit may ilang bagay na dapat tandaan:

• Ang malambot at desaturated na mga kulay ay mukhang mas makatotohanan kaysa cartoony.
• Isipin ang color wheel: mas malayo ang dalawang kulay dito, mas masahol pa ang paghahalo nila. Sa parehong oras, ang pula at orange, na malapit sa isa't isa, ay mukhang mahusay na magkasama.

• Kung mas maraming kulay ang iyong ginagamit, mas malabo ang hitsura ng iyong pagguhit. Samakatuwid, pumili ng ilang mga pangunahing kulay at gamitin ang mga ito. Tandaan na ang Super Mario, sa isang pagkakataon, ay nilikha lamang mula sa mga kumbinasyon ng kayumanggi at pula.

Paglalapat ng mga bulaklak

Ang paglalapat ng kulay ay napakadali. Kung gumagamit ka ng Photoshop, pagkatapos ay piliin lamang ang nais na fragment, piliin ito gamit ang isang magic wand (W key), at pagkatapos ay punan ito ng pangunahing kulay (Alt-F) o ang pangalawang kulay na Ctrl-F).

pagtatabing

Ang pagtatabing ay isa sa pinakamahalagang bahagi ng pakikipagsapalaran na maging isang pixelated demigod. Ito ay sa yugtong ito na ang sprite ay nagsisimula na maging mas mahusay, o nagiging isang kakaibang sangkap. Sundin ang aking mga tagubilin at tiyak na magtatagumpay ka.

Unang hakbang: pumili ng ilaw na pinagmumulan

Pumili muna kami ng ilaw na pinagmumulan. Kung ang iyong sprite ay bahagi ng isang mas malaking fragment na may sarili nitong mga pinagmumulan ng liwanag, tulad ng mga lamp, sulo, at iba pa. At lahat ng mga ito ay maaaring makaapekto sa hitsura ng sprite sa iba't ibang paraan. Gayunpaman, ang pagpili ng malayong pinagmumulan ng liwanag tulad ng araw ay isang magandang ideya para sa karamihan ng pixel art. Para sa mga laro, halimbawa, kakailanganin mong lumikha ng pinakamaliwanag na posibleng sprite, na pagkatapos ay maaaring iakma sa kapaligiran.

Karaniwang pinipili ko ang isang malayong ilaw sa isang lugar sa itaas ng sprite, upang ang harap at itaas lamang ng sprite ang naiilawan, at ang iba ay may kulay.

Ikalawang Hakbang: Direktang Pagshade

Kapag nakapili na tayo ng pinagmumulan ng liwanag, maaari na nating simulan ang pagdidilim sa mga lugar na pinakamalayo dito. Iminumungkahi ng aming modelo ng pag-iilaw na ang ibabang bahagi ng ulo, braso, binti, atbp. ay dapat na sakop ng isang anino.

Alalahanin na ang mga patag na bagay ay hindi maaaring magbigay ng anino. Kumuha ng isang piraso ng papel, lamutin ito at igulong ito sa mesa. Paano mo malalaman na hindi na ito patag? Nakita mo na lang ang mga anino sa paligid niya. Gumamit ng shading upang bigyang-diin ang mga tupi sa mga damit, kalamnan, balahibo, kulay ng balat, at iba pa.

Ikatlong hakbang: malambot na mga anino

Ang pangalawang lilim, na mas magaan kaysa sa una, ay dapat gamitin upang lumikha ng malambot na mga anino. Ito ay kinakailangan para sa mga lugar na hindi direktang naiilaw. Maaari din silang magamit upang lumipat mula sa liwanag patungo sa madilim, at sa hindi pantay na mga ibabaw.

Hakbang apat: mga lugar na may ilaw

Dapat ding i-highlight ang mga lugar na tumatanggap ng direktang sinag ng liwanag. Kapansin-pansin na dapat mayroong mas kaunting mga highlight kaysa sa mga anino, kung hindi man ay magdudulot sila ng hindi kinakailangang pansin, iyon ay, tumayo.

Iligtas ang iyong sarili sa sakit ng ulo sa pamamagitan ng pag-alala sa isang simpleng panuntunan: una ang mga anino, pagkatapos ay ang mga highlight. Ang dahilan ay simple: kung walang mga anino, masyadong malalaking mga fragment ang malalantad, at kapag inilapat mo ang mga anino, kailangan itong bawasan.

Ang ilang mga kapaki-pakinabang na panuntunan

Ang mga anino ay palaging mahirap para sa mga nagsisimula, kaya narito ang ilang mga patakaran na kailangan mong sundin habang nagtatabing.

1. Huwag gumamit ng mga gradient. Ang pinakakaraniwang pagkakamali ng newbie. Nakakatakot ang hitsura ng mga gradient at hindi man lang tinatayang kung paano naglalaro ang liwanag sa mga ibabaw.
2. Huwag gumamit ng "soft shading". Pinag-uusapan ko ang tungkol sa isang sitwasyon kung saan ang anino ay napakalayo mula sa balangkas, dahil ito ay mukhang napakalabo, at pinipigilan ang liwanag na pinagmumulan na maihayag.
3. Huwag gumamit ng masyadong maraming anino. Madaling isipin na "mas maraming kulay - mas makatotohanan ang larawan." Magkagayunman, sa totoong buhay, nakasanayan nating makakita ng mga bagay sa madilim o maliwanag na spectra, at sasala ng ating utak ang lahat ng nasa pagitan. Gumamit lamang ng dalawang madilim na kulay (madilim at napakadilim) at dalawang matingkad na kulay (magaan at napakaliwanag) at i-layer ang mga ito sa baseng kulay, hindi sa ibabaw ng bawat isa.
4. Huwag gumamit ng masyadong magkatulad na kulay. Talagang hindi na kailangang gumamit ng halos magkaparehong kulay, maliban kung gusto mong gumawa ng talagang malabong sprite.

dithering

Ang pag-iingat ng mga kulay ang talagang kailangang bigyang-pansin ng mga tagalikha ng pixel art. Ang isa pang paraan upang makakuha ng higit pang mga anino nang hindi gumagamit ng higit pang mga kulay ay tinatawag na "dithering". Katulad ng tradisyonal na pagpipinta, ginagamit ang "hatching" at "crosshatching", ibig sabihin, ikaw, sa literal na kahulugan, ay nakakuha ng isang bagay sa pagitan ng dalawang kulay.

Simpleng halimbawa

Narito ang isang simpleng halimbawa kung paano maaaring i-dither ang dalawang kulay upang lumikha ng apat na pagpipilian sa pagtatabing.

Advanced na Halimbawa

Ihambing ang larawan sa itaas (nalikha gamit ang isang gradient sa Photoshop) sa larawang ginawa gamit lamang ang tatlong kulay gamit ang dithering. Mangyaring tandaan na ang iba't ibang mga pattern ay maaaring gamitin upang lumikha ng "katabing mga kulay". Magiging mas madali para sa iyo na maunawaan ang prinsipyo kung ikaw mismo ang gagawa ng ilang mga pattern.

Aplikasyon

Ang dithering ay maaaring magbigay sa iyong sprite ng magandang retro na hitsura, dahil maraming mga naunang video game ang gumamit ng diskarteng ito dahil sa maliit na bilang ng mga color palette na magagamit (kung gusto mong makakita ng maraming halimbawa ng dithering, tingnan ang mga laro na binuo para sa Sega Genesis). Hindi ko madalas ginagamit ang paraang ito sa aking sarili, ngunit para sa mga layuning pang-edukasyon, ipapakita ko sa iyo kung paano ito mailalapat sa aming sprite.

Maaari mong gamitin ang dither sa nilalaman ng iyong puso, ngunit ito ay nagkakahalaga ng noting na lamang ng ilang mga tao ang aktwal na gamitin ito matagumpay.

Selective contouring

Ang selective contouring, na tinatawag ding selout (mula sa English selected outlining), ay isang subspecies ng contour shading. Sa halip na gumamit ng itim na linya, pumipili kami ng isang kulay na magiging mas magkatugma sa iyong sprite. Binabago din namin ang liwanag ng landas na ito nang mas malapit sa mga gilid ng sprite, na nagpapahintulot sa pinagmulan ng kulay na matukoy kung aling mga kulay ang dapat naming gamitin.

Hanggang sa puntong ito, gumamit kami ng itim na balangkas. Walang mali dito: ang itim ay mukhang mahusay, at nagbibigay-daan din sa iyo na makilala ang sprite mula sa background ng mga nakapalibot na bagay nito. Ngunit sa pamamagitan ng paggamit ng pamamaraang ito, isinasakripisyo namin ang ilang pagiging totoo na maaaring kailanganin namin sa ilang mga kaso, dahil ang aming sprite ay patuloy na mukhang cartoonish. Ang selective contouring ay nagpapahintulot sa iyo na mapupuksa ito.

Mapapansin mo na gumamit ako ng seult para palambutin ang muscles niya. Sa wakas, ang aming sprite ay nagsisimulang magmukhang isang buo, at hindi tulad ng isang malaking bilang ng mga hiwalay na fragment.

Ikumpara ito sa orihinal:

1. Nagpapakinis

Ang prinsipyo ng anti-aliasing ay simple: pagdaragdag ng mga intermediate na kulay sa mga kinks upang gawing mas makinis ang mga ito. Halimbawa, kung mayroon kang isang itim na linya sa isang puting background, pagkatapos ay idaragdag ang maliliit na kulay abong pixel sa mga kink nito sa gilid.

Pamamaraan 1: pagpapakinis ng mga kurba

Sa pangkalahatan, kailangan mong magdagdag ng mga intermediate na kulay kung saan may mga break, kung hindi, ang linya ay magmumukhang tulis-tulis. Kung mukhang hindi pantay, magdagdag ng isa pang layer ng mas magaan na pixel. Ang direksyon ng aplikasyon ng intermediate layer ay dapat tumugma sa direksyon ng curve.

Sa palagay ko ay hindi ko ito maipaliwanag nang mas mahusay nang hindi kumplikado ito. Tingnan mo lang ang larawan at mauunawaan mo ang ibig kong sabihin.

Pamamaraan 2: rounding off bumps

Technique 3: Overwriting Line Ends

Aplikasyon

Ngayon, ilapat natin ang anti-aliasing sa ating print. Tandaan na kung gusto mong maging maganda ang iyong sprite sa anumang kulay ng background, huwag pakinisin ang labas ng linya. Kung hindi man, ang iyong sprite ay napapalibutan ng isang napaka-hindi naaangkop na halo sa junction na may background, at samakatuwid ay magiging masyadong malinaw sa anumang background.

Ang epekto ay napaka banayad, ngunit ito ay may malaking kahalagahan.

Bakit kailangan mong gawin ito nang manu-mano?

Maaaring itanong mo, "Bakit hindi na lang maglapat ng filter ng graphics editor sa aming sprite kung gusto namin itong magmukhang makinis?" Simple lang din ang sagot - walang filter na gagawing kasing matalas at kasing linis ng iyong sprite. Magkakaroon ka ng ganap na kontrol sa hindi lamang mga kulay na ginamit, kundi pati na rin kung saan gagamitin ang mga ito. Bilang karagdagan, mas alam mo kaysa sa anumang filter kung saan magiging angkop ang anti-aliasing, at kung saan may mga lugar kung saan mawawala lang ang kalidad ng mga pixel.

Pagtatapos

Wow, malapit na naming maisara ang iyong computer at kumuha ng malamig na beer mula sa refrigerator. Pero hindi pa siya dumarating! Ang huling bahagi ay tungkol sa kung ano ang naghihiwalay sa energetic na baguhan mula sa batikang propesyonal.

Bumalik ng isang hakbang at tingnang mabuti ang iyong sprite. May posibilidad na mukha pa siyang "raw". Maglaan ng ilang oras upang mapabuti at tiyaking perpekto ang lahat. Kahit gaano ka pa kapagod, ang pinakamasayang bahagi ay nasa unahan mo. Magdagdag ng mga detalye upang gawing mas kawili-wili ang iyong sprite. Dito pumapasok ang iyong mga kakayahan at karanasan sa pixel.

Maaaring magulat ka sa katotohanang ang aming Lucha Lawyer ay walang mga mata sa lahat ng oras na ito, o ang pakete na hawak niya ay walang laman. Sa totoo lang, ang dahilan ay nakasalalay sa katotohanan na gusto kong maghintay na may maliliit na detalye. Pansinin din ang trim na idinagdag ko sa kanyang armbands, ang langaw sa kanyang pantalon... well, ano kaya ang isang lalaki kung wala ang kanyang mga utong? Medyo pinadilim ko rin ang ibabang bahagi ng katawan niya para mas nakausli ang braso sa background ng katawan.

Sa wakas tapos ka na! Ang Lucha Lawyer ay nakikipagkumpitensya sa kategoryang Lightweight, dahil mayroon lamang itong 45 na kulay (o marahil ito ay isang heavyweight depende sa iyong mga limitasyon sa palette) at ang resolution nito ay humigit-kumulang 150 by 115 pixels. Ngayon ay maaari mong buksan ang beer!

Buong pag-unlad:

Palaging nakakatawa. Narito ang isang gif na nagpapakita ng ebolusyon ng aming sprite.

1. Alamin ang mga pangunahing kaalaman sa sining at magsanay ng mga tradisyonal na pamamaraan. Ang lahat ng kaalaman at kasanayan na kailangan para sa pagguhit at pagguhit ay maaaring ilapat sa pixeling.
2. Magsimula sa maliliit na sprite. Ang pinakamahirap na bahagi ay ang pag-aaral kung paano maglagay ng maraming detalye gamit ang kaunting mga pixel hangga't maaari nang hindi gumagawa ng mga sprite na kasing laki ng sa akin.
3. Pag-aralan ang gawa ng mga artistang hinahangaan mo at huwag matakot na maging hindi orihinal. Ang pinakamahusay na paraan upang matuto ay ang ulitin ang mga fragment ng trabaho ng ibang tao. Ito ay tumatagal ng maraming oras upang bumuo ng iyong sariling estilo.
4. Kung wala kang tablet, bumili ng isa. Ang patuloy na pagkasira ng nerbiyos at stress na dulot ng patuloy na pag-click sa kaliwa ng mouse ay hindi nakakatawa, at malamang na hindi mapabilib ang mga kinatawan ng hindi kabaro. Gumagamit ako ng maliit na Wacom Graphire2 - Gusto ko ang pagiging compact at portability nito. Baka gusto mo ng mas malaking tablet. Bago bumili, gumawa ng isang maliit na test drive.
5. Ibahagi ang iyong trabaho sa iba upang makuha ang kanilang opinyon. Maaari rin itong maging isang magandang paraan upang magkaroon ng mga bagong kaibigang geek.

P.S.

Ang orihinal na artikulo ay matatagpuan. Kung mayroon kang mga link sa mga cool na tutorial na kailangang isalin, ipadala ang mga ito sa aming party room. O direktang sumulat sa mga mensahe ng grupo

Adobe Photoshop: Gumuhit at I-animate ang isang Character gamit ang Pixel Art

Sa tutorial na ito, matututunan mo kung paano gumuhit at mag-animate ng mga character gamit ang Pixel Art technique. Ang kailangan mo lang para dito ay Adobe Photoshop. Ang resulta ay isang GIF na may tumatakbong astronaut.

Programa: Adobe Photoshop Pinagkakahirapan: Mga Beginners, Intermediate Time na kinakailangan: 30 minuto - isang oras

I. Pagse-set up ng dokumento at mga tool

Hakbang 1

Piliin ang Pencil (pencil) sa toolbar - ito ang magiging pangunahing kasangkapan para sa ating aralin. Sa mga setting, piliin ang uri ng Hard Round brush, at itakda ang natitirang mga halaga na kapareho ng sa larawan. Ang aming layunin ay gawing matalim ang nib ng lapis hangga't maaari.

Hakbang 2

Sa mga setting ng Eraser Tool (pambura), piliin ang Pencil Mode mode, at itakda ang natitirang mga halaga sa ipinapakita sa larawan.

Hakbang 3

I-on ang Pixel Grid (View > Show > Pixel Grid). Kung walang ganoong item sa menu, pagkatapos ay pumunta sa mga setting at paganahin ang graphic acceleration Preferences > Performance > Graphic acceleration.

Pakitandaan: Ang grid ay makikita lamang sa bagong likhang canvas kapag naka-zoom in sa 600% o higit pa.

Hakbang 4

Sa Preferences > General (Control-K) baguhin ang image interpolation mode sa Nearest Neighbor mode. Papayagan nito ang mga hangganan ng mga bagay na manatiling malinaw hangga't maaari.

Sa mga setting ng Units & Rulers, itakda ang mga unit para sa ruler sa pixels Preferences > Units & Rulers > Pixels.

II. Paglikha ng Tauhan

Hakbang 1

At ngayon, kapag na-set up na ang lahat, maaari tayong magpatuloy nang direkta sa pagguhit ng karakter.

I-sketch ang iyong karakter gamit ang isang malinaw na balangkas, habang nag-iingat na huwag mag-overload ito ng maliliit na detalye. Sa yugtong ito, hindi mahalaga ang kulay, ang pangunahing bagay ay malinaw na iginuhit ang balangkas, at naiintindihan mo kung ano ang magiging hitsura ng karakter. Narito ang isang sketch na partikular na inihanda para sa araling ito.

Hakbang 2

I-scale ang thumbnail pababa sa 60 pixels ang taas gamit ang keyboard shortcut na Control+T, o ang Edit > Free Transform command.

Ang laki ng bagay ay ipinapakita sa panel ng impormasyon. Tandaan na ang mga setting ng interpolation ay kapareho ng ginawa namin sa hakbang 4.

Hakbang 3

Mag-zoom in sa thumbnail nang 300-400% para mas madaling gamitin, at babaan ang opacity ng layer. Pagkatapos ay lumikha ng isang bagong layer at balangkasin ang mga balangkas ng sketch gamit ang Pencil Tool. Kung ang karakter ay simetriko, tulad ng sa aming kaso, maaari mong balangkasin lamang ang kalahati, at pagkatapos ay i-duplicate at i-flip ang iginuhit na salamin (I-edit> Transform> Flip Horizontal).

Ritmo: Upang gumuhit ng mga kumplikadong elemento, hatiin ang mga ito sa mga bahagi. Kapag ang mga pixel (tuldok) sa isang linya ay bumubuo ng isang "ritmo", gaya ng 1-2-3, o 1-1-2-2-3-3, ang sketch ay mukhang mas makinis sa mata ng tao. Ngunit, kung kailangan ito ng anyo, maaaring masira ang ritmong ito.

Hakbang 4

Kapag handa na ang balangkas, maaari mong piliin ang mga pangunahing kulay at ipinta ang malalaking hugis. Gawin ito sa isang hiwalay na layer sa ibaba ng outline.

Hakbang 5

I-smooth ang outline sa pamamagitan ng pagguhit ng anino sa kahabaan ng panloob na gilid.

Magpatuloy sa pagdaragdag ng mga anino. Tulad ng maaaring napansin mo sa kurso ng pagguhit, ang ilang mga hugis ay maaaring itama.

Hakbang 6

Gumawa ng bagong layer para sa mga highlight.

Piliin ang Overlay blend mode mula sa dropdown na listahan sa panel ng Mga Layer. Kulayan na may liwanag na kulay sa mga lugar na gusto mong i-highlight. Pagkatapos ay pakinisin ang highlight sa pamamagitan ng paglalapat ng Filter > Blur > Blur.

Tapusin ang larawan, at pagkatapos ay kopyahin at i-mirror ang natapos na kalahati ng larawan, pagkatapos ay pagsamahin ang mga layer sa mga kalahati upang makakuha ng isang buong larawan.

Hakbang 7

Ngayon ang astronaut ay kailangang magdagdag ng kaibahan. Gamitin ang mga setting ng Mga Antas (Larawan > Mga Pagsasaayos > Mga Antas) upang gawing mas maliwanag, at pagkatapos ay ayusin ang kulay gamit ang opsyong Balanse ng Kulay (Larawan > Mga Pagsasaayos > Balanse ng Kulay).

Ang karakter ay handa na para sa animation.

III. Animasyon ng karakter

Hakbang 1

Gumawa ng kopya ng layer (Layer > New > Layer Via Copy) at ilipat ito ng 1 px pataas at 2 px sa kanan. Ito ay isang mahalagang punto sa animation ng character.

Ibaba ang opacity ng orihinal na layer ng 50% para makita mo ang nakaraang frame. Ito ay tinatawag na "Pagbabalat ng Sibuyas" (plural mode).

Hakbang 2

Ngayon ibaluktot ang mga braso at binti ng karakter na parang tumatakbo siya.

● Piliin ang kaliwang kamay gamit ang Lasso Tool

● Gamit ang FreeTransformTool (Edit > FreeTransform) at pagpindot sa Control key, ilipat ang mga hangganan ng lalagyan upang ang kamay ay gumalaw pabalik.

● Pumili muna ng isang paa, at iunat ito ng kaunti. Pagkatapos, sa kabaligtaran, pisilin ang pangalawang binti upang maramdaman na ang karakter ay naglalakad.

● Gamit ang lapis at pambura, hawakan ang bahagi ng kanang braso sa ibaba ng siko.

Hakbang 3

Ngayon ay kailangan mong i-redraw ang isang malinis na bagong posisyon ng mga braso at binti tulad ng ipinapakita sa pangalawang seksyon ng tutorial na ito. Ito ay kinakailangan upang ang imahe ay magmukhang matalas, dahil ang pagbabagong-anyo ay lubhang nakakasira sa mga linya ng pixel.

Hakbang 4

Gumawa ng kopya ng pangalawang layer at i-flip ito nang pahalang. Ngayon ay mayroon kang 1 pangunahing pose at 2 sa paggalaw. Ibalik ang opacity ng lahat ng mga layer sa 100%.

Hakbang 5

Pumunta sa Window > Timeline upang ipakita ang panel ng Timeline at i-click ang Lumikha ng Frame Animation.

Ang pixel art o pixel graphics ay digital na pagpipinta na ginawa sa mga pixel-by-pixel na raster editor. Pixel (pixel) - ang pinakamaliit na graphic na elemento ng larawan. Sa madaling salita, ito ay isang punto. At ang lahat ng mga guhit ng pixel ay binubuo ng hindi mabilang na mga kumpol ng mga tuldok, na nagreresulta sa isang bahagyang hindi pantay, na parang hindi mahusay na nasubaybayan. Ngunit iyon ang kagandahan ng mga larawang ito.

Medyo kasaysayan

Aling mga programa ang maaaring lumikha ng modernong pixel art

Mayroong maraming mga libreng raster editor doon. Ngunit mas madalas kaysa sa iba 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 programang ito:
napakahirap makamit ang kapantayan at simetrya ng mga imahe;
kapag nai-save ang mga ito sa jpg na format, mayroong isang malakas na pagbaluktot ng kulay;
mahirap gumuhit ng mga anino at highlight.
Samakatuwid, sinusubukan nilang bigyan ng kagustuhan ang Adobe Photoshop. Ang program na ito ay may mas maraming opsyon sa pagtatrabaho kaysa sa Paint. Binibigyang-daan ka nitong gumuhit hindi ng mga indibidwal na character na may simpleng disenyo, ngunit buong mga larawan. Bilang karagdagan, ang pixel art mismo ay mas madali at mas mabilis na i-edit. Oo, at maaari mong ilipat ang mga transition ng kulay sa Adobe Photoshop nang maayos at natural.

Paano Iwasan 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 punto", pagkatapos ito ay nagiging angular, ang kinis sa mga linya ay nawawala. Sa isang banda, ito ang calling card ng Pixel Art, at sa kabilang banda, gusto ko ng higit na kinis, na gagawing maayos at kaakit-akit ang larawan sa user. Ang problemang ito sa wika ng mga pixel artist ay tinatawag na kinks o "jaggies".
Ang Jaggies ay mga piraso na nagbibigay sa anumang linya ng tulis-tulis na hitsura. Karaniwang itinatapon ang mga ito sa isa sa mga sumusunod na paraan:
dagdagan ang outlier line segment 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 binuo mula sa ilang solong pixel;
magdagdag ng mga solong pixel sa tulis-tulis na lugar sa pagitan ng mas mahabang "mga tuldok", at iba pa.
Upang maayos na maalis ang mga kinks, kailangan mong tandaan ang pangunahing panuntunan: ang haba ng mga elemento ng isang hubog na linya ay dapat na bumaba o unti-unting tumaas. Kailangan mo ring tandaan na ang paglipat ng isang segment ng linya sa pamamagitan ng dalawa o higit pang mga pixel sa taas ay humahantong sa pagkasira ng kinis.
Samakatuwid, kailangan ang patuloy na pagsasanay sa pagguhit. At bilang isang simple at visual aid upang makatulong na maiwasan ang mga kink, maaari kang gumamit ng isang hanay ng mga pahilig na tuwid na linya.

Paano makakuha ng anino sa Pixel Art

Ang isa pang mahalagang punto sa pixel art ay ang kanilang volume. Ito, tulad ng sa iba pang mga pagpipilian sa graphics, ay nakakamit sa pamamagitan ng mga highlight at anino. Upang lumikha ng anino sa pixel art, kailangan mo ng maayos na paglipat mula sa liwanag patungo sa madilim na tono o mula sa isang kulay patungo sa isa pa. Upang makamit ang epektong ito, kadalasang ginagamit ang teknolohiya ng paghahalo - dithering o dithering. Sa madaling salita, sa hangganan ng dalawang kulay, ang mga ito ay halo-halong sa isang pattern ng checkerboard. Ang pamamaraang ito ay lumitaw laban sa backdrop ng isang kakulangan ng mga bulaklak. Sa tulong ng paghahalo ng chess ng dalawang kulay, posible na makakuha ng pangatlo na wala sa palette.
Gayunpaman, pagkatapos na lumawak nang malaki ang palette, ang teknolohiya ng dithering ay nanatiling hinihiling. Ngunit kailangan mong tandaan na ang paglipat mula sa isang kulay patungo sa isa pa na may lapad ng isang pixel ay hindi maganda ang hitsura. Isang suklay lang pala. kaya lang
ang minimum na lugar ng paghahalo ay dapat na hindi bababa sa dalawang pixel. At ang mas malawak na paglipat, mas mabuti.
Gayundin, kapag lumilikha ng isang anino:
mahalagang matukoy kung saang anggulo at mula sa aling panig mahuhulog ang liwanag sa bagay. Gagawin nitong "live" ang pagguhit, pati na rin maunawaan kung saan iguguhit ang anino. Halimbawa, kung ang ilaw ay bumagsak sa kanan, kung gayon ang mga lugar ng anino ay matatagpuan sa kaliwa, atbp.;
kailangan mong gumamit ng mga kulay na mas madidilim kaysa sa mga base. Yung. ang anino ay dapat ilarawan gamit ang mas madidilim na kulay kaysa sa may kulay na lugar mismo. Halimbawa, kung ang bagay ay pula, ang anino nito ay magiging burgundy o madilim na kayumanggi;
huwag kalimutan ang penumbra. Para sa layuning ito, ang isang kulay ay pinili na, ayon sa palette, ay nasa pagitan ng base na kulay at ng anino na kulay. Ang lilim na ito ay inilalagay sa pagitan ng mga layer ng dalawang kulay na ito. Bilang resulta, ang epekto ng isang maayos na paglipat mula sa isang madilim na lugar patungo sa isang mas magaan na lugar ay nalikha.

Paano makakuha ng glare sa pixel art

Ang highlight, tulad ng isang anino, ay nagbibigay ng lakas ng tunog sa mga iginuhit na bagay. Ito ay palaging matatagpuan sa gilid kung saan bumabagsak ang liwanag. Ngunit kung ang bagay ay dapat na magkaroon ng isang makintab na ibabaw, halimbawa, isang tasa ng porselana, isang tabak na gawa sa bakal, atbp, kung gayon ang isang highlight ay kakailanganin din sa may kulay na lugar.
Upang lumikha ng isang highlight sa lugar kung saan bumagsak ang liwanag, kailangan mong kumuha ng pintura na magiging mas magaan kaysa sa pangunahing isa. Hindi lang kailangang maging masigasig sa liwanag ng lugar na ito - maaaring hindi ito lumabas nang natural. Kadalasan, ang liwanag na nakasisilaw ay inilalarawan sa puti nang walang mga transition. Hindi ito nangyayari sa kalikasan. Oo, at ang bagay ay magmumukhang patag.
Upang lumikha ng isang highlight mula sa gilid ng anino, kailangan mo ng isang kulay na mas magaan kaysa sa kulay kung saan ang anino mismo ay inilapat. At sa kasong ito, kinakailangan din ang isang maayos na paglipat, na maaaring makuha sa pamamagitan ng paggamit ng ilang mga shade nang sabay-sabay.
Upang mapagtanto ang lahat ng ito, siyempre, kailangan ang pagsasanay. At pinakamahusay na magsimula sa mga simpleng bagay.

Kung nagustuhan mo ang paglalaro ng Lego noong bata pa (o patuloy mong nilalaro ito kahit nasa hustong gulang), tiyak na magiging interesado ka sa isometric pixel art. Maaaring nakadepende ito sa teknolohiya at mas katulad ng isang eksaktong agham kaysa sa isang ilustrasyon. Ngunit sa gayong sining ay walang 3D na pananaw, maaari mong ilipat ang mga elemento ng kapaligiran na may pinakamataas na pagiging simple.

Gagawin namin ang character bilang isang lohikal na punto ng sanggunian para sa pixel art, dahil makakatulong ito na matukoy ang mga proporsyon para sa karamihan ng iba pang mga item na malamang na gagawin namin. Gayunpaman, kailangan mo munang matutunan ang ilang pangunahing kaalaman sa isometric pixel art, at pagkatapos ay magpatuloy sa paglikha ng character; kung ayaw mong matutunan ang mga pangunahing kaalaman at gumuhit ng cube, lumaktaw sa hakbang 3. Ngayon magsimula tayo.

1. Mga linya ng pixel

Ang mga linyang ito ay ang batayan para sa pinakakaraniwang (at kawili-wiling) estilo ng isometric pixel art, ang istilong gagamitin namin sa tutorial na ito:

Ang mga ito ay dalawang pixel ang haba para sa bawat pixel pababa. Ang ganitong mga linya ay mukhang medyo malambot at ginagamit para sa mga parisukat na ibabaw:

Ang pinakakaraniwang ginagamit na mga istruktura ng linya (tulad ng sa figure sa ibaba) ay gagana nang maayos, ngunit ang pagguhit ay magiging mas angular at magaspang sa bawat pagtaas ng hakbang:

Para sa kaibahan, narito ang ilang hindi pantay na balangkas na mga linya:

Napaka-angular at hindi tumingin

maganda. Iwasang gamitin ang mga ito.

2. Mga Tomo

Hindi eksaktong susundin ng ating karakter ang mga alituntunin ng isometry, kaya gumawa muna tayo ng simpleng cube para malaman ang mga proporsyon.

Gumawa ng Bagong Dokumento sa Photoshop na may Resolution 400x400px.

Gusto kong magbukas ng karagdagang window para sa parehong file gamit ang menu Window > Ayusin > Bagong Window/aralin.(Window > Ayusin > Bagong Window...). Ito ay nagpapahintulot, nagtatrabaho sa isang pagtaas 600% sundin ang resulta sa window ng zoom 100% . Ang paggamit ng grid ay nasa iyo, ngunit kung minsan ay mas nakakainis ito kaysa nakakatulong.

Mag-zoom in tayo sa dokumento at gumawa ng isa sa mga linya 2:1

Mas gusto kong gamitin 5% kulay abo sa halip na itim, upang sa paglaon ay maaari akong magdagdag ng mga anino (itim at mababang opacity) at mapili ang bawat kulay nang hiwalay gamit ang isang magic wand.

Mayroong ilang mga paraan upang gumuhit ng isang linya:

1. Paggamit Tool sa linya(Line Tool) na may mode Mga pixel(Pixels) na-uncheck Nagpapakinis(Anti-alias) at kapal 1px. Habang gumuhit ka, dapat ipakita ang tooltip ng anggulo ng pagtabingi 26.6°. Sa katunayan, ang tool na Line ay hindi matatawag na maginhawa, lumilikha ito ng mga tulis-tulis na linya kung ang anggulo ay hindi tumpak.

2. Kailangan mong gumawa ng seleksyon 20 x 40 px, pagkatapos ay piliin ang K lapis(Pencil Tool) 1px at gumuhit ng tuldok sa ibabang kaliwang sulok ng seleksyon, pagkatapos nito, habang pinipigilan ang susi Paglipat mag-click sa kanang sulok sa itaas. Awtomatikong gagawa ang Photoshop ng bagong linya sa pagitan ng dalawang punto. Sa pagsasanay, sa ganitong paraan makakagawa ka ng mga makinis na linya nang walang pinipili.

3. Kailangan mong gumuhit ng dalawang pixel na may lapis, piliin ang mga ito, i-click Ctrl+Alt, pagkatapos ay i-drag ang pagpili sa isang bagong lokasyon upang ang mga pixel ay magsalubong sa mga sulok. Maaari mo ring ilipat ang pagpili gamit ang mga arrow key sa iyong keyboard habang hawak alt. Ang ganitong paraan ay tinatawag Alt offset(Alt Nudge).

Dito nilikha namin ang unang linya. Piliin ito at ilipat ito tulad ng sa hakbang 3, o kopyahin at i-paste lang, inilipat ang bagong layer pababa. Pagkatapos nito, i-flip ang pangalawang linya nang pahalang sa menu I-edit > Transform > I-flip Pahalang(I-edit > Transform > I-flip Pahalang). Madalas kong ginagamit ang feature na ito kaya gumawa pa ako ng keyboard shortcut para dito!

Ngayon pagsamahin natin ang ating mga linya:

Pagkatapos, Alt-Offset muli, i-flip ang kopya nang patayo at pagsamahin ang dalawang halves upang makumpleto ang aming ibabaw:

Oras na para magdagdag ng "third dimension". Alt-shift ang parisukat na ibabaw at ilipat ito sa 44px pababa:

Tip: Kung pinipigilan mo ang mga arrow key habang gumagalaw Paglipat, lilipat ang pagpili sa 10 pixels sa halip na isa.

Upang gawing mas malinis ang kubo, palambutin natin ang mga sulok sa pamamagitan ng pag-alis sa pinakakaliwa at pinakakanang mga pixel mula sa mga parisukat. Pagkatapos nito, magdagdag ng mga patayong linya:

Ngayon alisin ang mga hindi kinakailangang linya sa ilalim ng kubo. Upang simulan ang pagkulay ng aming figure, pumili ng anumang kulay (mas mabuti ang isang liwanag na lilim) at punan ang tuktok na parisukat dito.

Ngayon taasan ang liwanag ng napiling kulay sa pamamagitan ng 10% (Inirerekomenda ko ang paggamit ng mga HSB slider sa control panel) upang gumuhit ng mas magaan na mga sulok sa harap ng aming color square. Dahil medyo na-crop namin ang cube, ang mas magaan na mga linyang ito ay magiging mas maganda sa ibabaw ng mga itim na gilid (sa halip na palitan ang mga ito) tulad ng sa larawan sa ibaba:

Ngayon ay kailangan nating alisin ang mga itim na gilid. Gamitin ang trick mula sa paraan ng pagguhit ng pangalawang linya para sa pambura (na dapat itakda sa normal kasangkapan sa pambura(Eraser Tool) Mode Lapis(Pencil Mode), Kapal 1px).

Piliin ang kulay ng tuktok na parisukat na may Pipettes(Eyedropper Tool). Upang mabilis na piliin ang tool na ito, habang gumuguhit gamit ang isang lapis o isang fill, pindutin ang key alt. Gamitin ang resultang kulay ng eyedropper upang punan ang patayong linya sa gitna ng kubo. Pagkatapos nito, bawasan ang liwanag ng kulay sa pamamagitan ng 15% at punan ang kaliwang bahagi ng kubo ng nagresultang kulay. Bawasan pa ang liwanag 10% para sa kanang bahagi:

Kumpleto na ang aming cube. Dapat itong magmukhang malinis at medyo makinis kapag naka-zoom in. 100% . Maaari tayong magpatuloy.

3. Magdagdag ng karakter

Ang estilo ng karakter ay maaaring ganap na naiiba, malaya kang baguhin ang mga proporsyon o elemento ayon sa gusto mo. Bilang isang patakaran, gumawa ako ng isang manipis na katawan at isang bahagyang malaking ulo. Ang payat na katawan ng karakter ay nakakatulong na panatilihing tuwid at simple ang mga linya.

Magiging lohikal na magsimula sa mga mata. Kung kami ay mahigpit sa mga anggulo ng isometric, kung gayon sa mukha ang isang mata ay dapat na mas mababa, ngunit sa isang maliit na sukat ay maaari naming pabayaan ang tampok na ito upang gawing mas kaaya-aya ang mga mukha ng mga character. Gagawin nitong maayos ang pagguhit kahit na sa laki.

Ginagawa naming maliit ang karakter, dahil pagkatapos ng ilang sandali ay maaaring gusto mong magdagdag ng isang kotse, isang bahay, isang buong parisukat o kahit isang lungsod dito. Samakatuwid, ang karakter ay dapat isa sa pinakamaliit na elemento sa ilustrasyon. Dapat ding isaalang-alang ang graphical na kahusayan; subukang gawing kaakit-akit ang karakter hangga't maaari sa kaunting mga pixel hangga't maaari (sapat na malaki upang kumatawan sa mga tampok ng mukha). Bilang karagdagan, ang mga maliliit na bagay ay mas madaling iguhit. Ang exception ay kapag gusto mo lang ipakita ang karakter, ang kanilang mga emosyon, o ang kanilang pagkakahawig sa isang tao.

Gumawa tayo ng bagong layer. Ang mga mata ay nangangailangan lamang ng dalawang pixel - isa para sa bawat mata, na may isang blangkong pixel sa pagitan. Laktawan ang isang pixel sa kaliwa ng mga mata, magdagdag ng patayong linya:

Ngayon magdagdag ng isa pang layer at gumuhit ng 2px na pahalang na guhit, ito ang magiging bibig. Gamitin ang mga arrow sa iyong keyboard upang ilipat at kapag nakita mo ang perpektong posisyon, ilipat ang layer pababa. Gawin ang parehong sa baba, dapat itong maging isang mas mahabang linya:

Tapusin ang buhok at tuktok ng ulo, pagkatapos ay palambutin ang mga sulok. Dapat kang makakuha ng isang bagay na tulad nito:

Ngayon mag-iwan ng blangkong pixel sa tabi ng pangalawang mata, magdagdag ng mga sideburn (na makakatulong din sa pagguhit ng mga tainga ng character) at ilang pixel pa sa itaas ng mga ito hanggang sa hairline. Pagkatapos ay mag-iwan ng isa pang walang laman na pixel, dito magsisimula ang tainga at ang linya na nagmamarka sa dulo ng ulo. Sige at palambutin ang mga sulok ng mga linya:

Magdagdag ng pixel para sa tuktok ng tainga at muling ihubog ang ulo kung gusto mo; ang mga ulo ay karaniwang iginuhit na sa lugar ng leeg:

Gumuhit ng isang linya mula sa baba - ito ang magiging dibdib. Ang simula ng leeg ay nasa tainga, ilang pixel pababa at dalawang pixel sa pahilis upang ang mga balikat ng ating karakter ay makikita:

Ngayon sa lugar kung saan nagtatapos ang mga balikat, magdagdag ng isang patayong linya na may haba ng 12 pixels upang gawin ang panlabas na bahagi ng braso, at ang panloob na bahagi ay magiging dalawang pixel sa kaliwa. Ikonekta ang mga linya sa ibaba gamit ang isang pares ng mga pixel upang makagawa ng isang kamay / kamao (sa aming kaso ay walang detalye, kaya huwag pansinin ang elementong ito) at sa itaas lamang ng lugar kung saan nagtatapos ang kamay, magdagdag ng isang linya 2:1 , na magsisilbing baywang, pagkatapos ay iguhit ang linya ng dibdib at makakuha ng tapos na itaas na katawan. Ang kabilang braso ng karakter ay hindi nakikita, ngunit ito ay magiging maayos dahil ito ay natatakpan ng katawan.

Dapat kang magtapos sa isang bagay na katulad nito:

Siyempre, maaari mong gamitin ang anumang aspect ratio na gusto mo; Mas gusto kong gumuhit ng iba't ibang mga pagpipilian nang magkatabi bago magpasya kung alin ang pinakamahusay.

Ngayon para sa mas mababang katawan ay magdaragdag kami ng ilang higit pang mga patayong linya. Gusto kong umalis 12 mga pixel sa pagitan ng talampakan at baywang. Ang mga binti ay napakadaling gumuhit, kailangan mo lamang na gawing mas mahaba ang isang binti, na magpapahintulot sa karakter na magmukhang mas matingkad:

Ngayon ay magdaragdag kami ng kulay. Ang paghahanap ng magandang kulay ng balat ay palaging mahirap, kaya kung gusto mong gamitin ang katulad ng sa tutorial na ito, ang code nito ay #FFCCA5. Ang pagtutugma ng kulay para sa iba pang elemento ay hindi dapat maging problema. Pagkatapos nito, matukoy ang haba ng mga manggas, ang posisyon ng hiwa ng kamiseta, ang estilo nito. Ngayon magdagdag ng isang madilim na guhit upang paghiwalayin ang kamiseta mula sa katawan. Mas gusto kong gawing mas magaan ang lahat ng pandekorasyon na elemento kaysa itim (lalo na kapag maraming elemento ang nasa parehong antas, halimbawa mula sa isang kamiseta hanggang sa katad o pantalon). Pinapayagan ka nitong makuha ang kinakailangang kaibahan, habang ang imahe ay hindi magiging masyadong magaspang.

Maaari kang magdagdag ng mga light effect sa halos bawat color zone. Iwasan ang masyadong maraming anino o paggamit ng mga gradient. Ilang pixel pa ( 10% o 25% ) ang isang liwanag o madilim na kulay ay sapat na upang gawing three-dimensional ang mga elemento at alisin ang flatness ng ilustrasyon. Kung gusto mong magdagdag ng makulay na kulay sa isang lugar na mayroon na 100% liwanag, subukang babaan ang saturation nito. Sa ilang mga kaso (halimbawa, kapag gumuhit ng buhok), maaari itong maging isang mahusay na paraan upang baguhin ang mga shade.

Maaari mong subukan ang maraming mga pagpipilian sa buhok. Narito ang ilang ideya:

Kung patuloy kang gagawa ng mga character, ang maliliit na bagay tulad ng istilo ng pananamit, haba ng manggas, haba ng pantalon, mga accessory, damit, at kulay ng balat ay magiging kapaki-pakinabang para sa pagkakaiba-iba.

Ngayon ang natitira pang gawin ay pagsamahin ang parehong mga elemento at suriin kung ano ang hitsura ng mga ito sa parehong setting:

Kung gusto mong i-export ang iyong nilikha, PNG ang perpektong format.

Iyon lang, tapos na ang trabaho!

Sana ay hindi masyadong nakakalito ang araling ito. Sa palagay ko nasaklaw ko na ang maximum na bilang ng mga tip at aesthetic trick. Maaari mong malayang palawakin ang iyong isometric pixel na mundo - mga gusali, kotse, interior, exterior. Ang paggawa ng lahat ng ito ay posible at maging kawili-wili, kahit na hindi ganoon kadali.

Interpreter: Shapoval Alexey

Noong ika-20 siglo, ang mga laro sa kompyuter ay naging isang malawak na lugar ng aplikasyon ng mga pixel graphics, lalo na noong dekada 90. Sa pagbuo ng 3D graphics, nagsimulang bumaba ang pixel art, ngunit pagkatapos ay bumalik sa buhay 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 ng paglikha ng isang imahe sa digital form, na ginanap sa mga editor ng raster graphics, kung saan gumagana ang artist gamit ang pinakamaliit na yunit ng isang raster digital na imahe - isang pixel. Ang ganitong imahe ay nailalarawan sa pamamagitan ng isang maliit na resolution, kung saan ang bawat pixel ay nagiging malinaw na nakikita. Ang pixel art ay ginagawa sa loob 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 pagguhit ng linya - sa madaling salita, ang mga contour nito. Ginagawa ang pixel art gamit ang mga linya - mga tuwid na linya at kurba.

mga tuwid na linya

Ang panuntunan para sa pagguhit ng mga linya sa pixel art ay dapat silang binubuo ng mga segment na lumilipat sa gilid ng isang pixel habang gumuhit ka. Iwasan ang pangunahing pagkakamali ng 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 pattern ng mga pahilig na linya:

Tulad ng makikita mula sa figure, ang lahat ng mga tuwid na linya na ipinakita dito ay binubuo ng parehong 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 ay tinatawag na "ideal" na mga linya sa pixel art.

Ang mga tuwid na linya ay maaaring magkaroon ng ibang pattern, halimbawa, maaari kang magpalit ng dalawang-pixel na mga segment na may isang-pixel na segment, 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. sining.

mga hubog na linya

Ang mga tuwid na linya ay mas madaling gumuhit 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.

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 - maayos na tumaas 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 kamay nang hindi lumalabag sa isang 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 curve at pagkatapos ay itama ito sa pamamagitan ng pag-alis dagdag na mga pixel mula sa tapos na frame.

dithering

Sa pixel art, mayroong isang bagay tulad ng dithering. Ito ay isang tiyak na paraan ng paghahalo ng mga pixel ng iba't ibang kulay upang lumikha ng 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, isang lilang kulay, kinakailangan upang gumuhit ng pula at asul na mga pixel sa isang pattern ng checkerboard:

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

Para gumana nang maayos ang dithered pixel art, dapat na hindi bababa sa dalawang pixel ang lapad ng blending area.

Pixel art software

Upang makabisado ang paglikha ng sining sa paraang pixel, maaari mong gamitin ang anumang graphics 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.

Hanggang ngayon, mas gusto ng maraming tao 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 minus - 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 sa Internet na ganap na libre, ay GraphicsGale. Ang downside ng programa ay, marahil, ang katotohanan na hindi nito sinusuportahan ang pag-save ng pixel art sa .gif na format.

Maaaring subukan ng mga may-ari ng Mac ang libreng Pixen program. 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 Adobe Photoshop, na may malawak na pag-andar, nagbibigay-daan sa iyo upang gumana sa mga layer, sumusuporta sa transparency, at nagbibigay ng simpleng trabaho sa isang palette. Sa tulong ng program na ito, titingnan natin ang mga simpleng halimbawa kung paano gumuhit ng pixel art sa ating sarili.

Paano Gumuhit ng Pixel Art sa Photoshop

Tulad ng tradisyonal na fine art, ang hugis, anino at liwanag ay mahalaga sa pixel art, 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 lapis sa papel.

Pagguhit ng "Lobo"

Magsimula tayo sa pinakasimpleng - gumuhit ng isang ordinaryong lobo. Gumawa ng bagong file sa Photoshop na may resolution ng screen na 72 dpi. Walang saysay na itakda ang mga laki ng larawan nang malaki - ito ay pixel art. Pumili ng brush, matigas at opaque, itakda ang laki sa 1 pixel.

Gumuhit ng 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, na walang iniiwan na kinks at tamang mga anggulo. Pagkatapos ay i-mirror ang arko na ito sa pamamagitan ng pagguhit sa tuktok ng lobo.

Sa parehong prinsipyo, iguhit ang ilalim ng bola at ang thread. Punan ang bola ng pula gamit ang Fill tool. Ngayon ay nananatiling magdagdag ng lakas ng tunog - ang aming bola ay mukhang masyadong flat. Gumuhit ng madilim na pulang guhit sa kanang bahagi sa ibaba ng lobo, at pagkatapos ay ilapat ang dither sa lugar na ito. Sa kaliwang sulok sa itaas ng bola, gumuhit ng liwanag na nakasisilaw ng mga puting pixel.

Tingnan kung gaano kadali ito - handa na ang bola!

Figure "Robot"

At 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, gumawa ng magaspang na sketch ng hinaharap na robot:

Ngayon ay maaari mong linisin ang lahat ng bagay na humahadlang at gumuhit ng mga pixel kung kinakailangan:

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

Idetalye ang katawan ng robot. Pinapayuhan ka ng maraming makaranasang artista 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 paraang pixel. Pinapayagan ka nitong makamit ang pinakamalaking integridad ng imahe. Lumikha ng palette sa isang libreng lugar ng Photoshop workspace - halimbawa, sa anyo ng mga parisukat o mga color spot. Kasunod nito, upang piliin ang nais na kulay, i-click ito gamit ang tool na Eyedropper.

Maaari mong simulan ang pagpuno ng mga contour. "Decorate" 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. Mayroon kaming 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 figure, na dumadaan sa 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 dapat na magpapakita ng liwanag:

Bigyan ng cylindrical look ang mga binti ng robot na may mga anino at ilaw. 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 elemento ng pixel art na isinasaalang-alang natin kanina - dithering - sa mga anino na bahagi ng katawan.

Maaaring tanggalin ang dithering sa mga highlight, pati na rin sa mga binti - napakaliit na nila. Sa tulong ng dark at light pixels, gumuhit ng isang hilera ng mga rivet sa ulo ng robot sa halip na mga ngipin, at gumuhit din ng isang 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, sabihin sa iyong mga kaibigan!

Basahin din sa aming website:

magpakita pa