" 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, nakuha ko ito 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 paglikha ng pixel art, ngunit na-update nang maraming beses upang ito ay makabuluhang naiiba sa orihinal na bersyon. Mayroong maraming mga tutorial sa Internet sa parehong paksa, ngunit ang lahat ng mga ito ay tila masyadong kumplikado o mahirap para sa akin. ang pixel art ay hindi agham. Hindi mo dapat kalkulahin ang mga vector kapag gumagawa ng pixel art.

Mga gamit

Isa sa mga pangunahing bentahe ng paglikha ng pixel art ay hindi mo kailangan ng anumang mga advanced na tool - sapat na dapat ang default na graphics editor na naka-install sa iyong computer. 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 user ng Mac). Hindi ko pa nasubukan ang mga ito sa aking sarili, ngunit nakarinig ako ng maraming positibong feedback. Sa tutorial na ito gagamitin ko ang Photoshop, na, bagama't mahal, ay naglalaman ng maraming kapaki-pakinabang na tool para sa paglikha ng sining, ang ilan sa mga ito ay lubhang kapaki-pakinabang para sa pixelating.

Paano gumuhit ng pixel art sa Photoshop

Kapag 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 nagsasapawan ng mga kulay.

Kakailanganin namin ang dalawa pang tool: "Selection" (M key) at "Magic Wand" (W key) upang pumili at i-drag, o kopyahin at i-paste. Tandaan na sa pamamagitan ng pagpindot sa Alt o Shift key habang gumagawa ng pagpili, maaari kang magdagdag ng mga napiling bagay o ibukod ang mga ito sa kasalukuyang listahan ng pagpili. Ito ay kapaki-pakinabang 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 mahalaga ang pagpapanatili ng mga kulay sa pixel art, kaya gusto mong kumuha ng ilang mga kulay at gamitin ang mga ito nang paulit-ulit.

Panghuli, tiyaking natatandaan 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 maliliit na kulay na mga parisukat. Una kailangan mong maunawaan kung paano epektibong ayusin ang mga parisukat na ito upang lumikha ng linya na gusto mo. Titingnan natin ang dalawang pinakakaraniwang uri ng mga linya: tuwid at hubog.

Mga tuwid na linya

Alam ko kung ano ang iniisip mo: lahat ng bagay dito ay napakasimple na walang saysay na pumasok sa anumang 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 piraso ng linya na ginagawa itong hindi pantay. Lumilitaw ang mga ito kung ang isang 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 isang maayos na linya ay may mga pagitan 6 > 3 > 2 > 1, ngunit isang linya na may mga 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 kakailanganin mo magandang ideya! Subukang ilarawan sa isip kung ano ang iyong gagawin sa pixel art - sa papel o sa iyong isip lamang. Kapag mayroon kang ideya ng pagguhit, maaari kang tumutok sa pixelation mismo.

Mga Paksa para sa Pag-iisip

• Para saan ang sprite na ito? Ito ba ay para sa isang website o para sa isang laro? Kakailanganin bang gawin itong animated mamaya? Kung gayon, kakailanganin itong gawing mas maliit at hindi gaanong detalyado. Sa kabaligtaran, kung hindi ka gagana sa sprite sa hinaharap, maaari mong ilakip ang maraming bahagi 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.
• Anong mga paghihigpit ang mayroon? Nabanggit ko kanina ang kahalagahan ng pag-iingat ng mga bulaklak. Ang pangunahing dahilan ay ang limitadong paleta ng kulay dahil sa mga kinakailangan ng system (na 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, atbp. Ito rin ay nagkakahalaga ng pagsasaalang-alang sa mga sukat ng iyong sprite at kung ito ay masyadong namumukod-tangi mula sa mga background na bagay na kailangan mo.

Subukan Natin!

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

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 sasabihin ko sa iyo kung paano baguhin ang kulay ng balangkas upang madagdagan ang pagiging totoo.

Mayroong dalawang mga diskarte sa paglikha ng isang contour. Maaari mong iguhit ang outline sa pamamagitan ng kamay at pagkatapos ay ayusin ito ng kaunti, o maaari mong iguhit ang lahat ng isang pixel sa isang pagkakataon. Oo, naunawaan mo nang tama ang lahat, pinag-uusapan natin ang tungkol sa isang libong pag-click.

Ang paraan na pipiliin mo ay depende sa laki ng sprite at sa iyong mga kasanayan sa pixelating. 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 malinaw 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 halos katulad ng pagtingin mo sa iyong huling produkto.

Halos sumama ang sketch ko sa pinlano ko.

Ikalawang Hakbang: Pakinisin ang Balangkas

Magsimula sa pamamagitan ng pagpapalaki ng larawan ng 6 o 8 beses. Dapat mong makita nang malinaw ang bawat pixel. At pagkatapos ay linisin ang balangkas. Sa partikular, ito ay nagkakahalaga ng pagbibigay pansin sa "stray pixels" (ang buong balangkas ay dapat na hindi hihigit sa isang pixel ang kapal), alisin ang tulis-tulis na mga gilid, at idagdag ang mga maliliit na detalye na napalampas namin sa unang hakbang.

Kahit na ang malalaking sprite ay bihirang lumampas sa 200 by 200 pixels. Ang pariralang "gumawa ng higit pa 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. Tatalakayin natin ang mga detalye sa ibang pagkakataon, ngayon ay kailangan mong magtrabaho sa paghahanap ng malalaking pixel, gaya ng, halimbawa, segmentasyon ng kalamnan. Hindi maganda ang mga bagay sa ngayon, ngunit maging mapagpasensya.

Kulay

Kapag handa na ang balangkas, makakakuha tayo ng isang uri ng pangkulay na sheet na kailangang punan ng mga kulay. Ang pintura, pagbuhos at iba pang mga tool ay makakatulong sa amin dito. Ang pagpili 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 binubuo ng 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 imahe ay gumagamit ng HSB para sa pagpili ng kulay, kaya tututukan namin iyon.

Hue– Hue ang tinatawag nating kulay noon.

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

Liwanag– liwanag na naglalabas ng kulay. Halimbawa, para sa isang itim na tao 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 mapurol at desaturated na mga kulay ay mukhang mas makatotohanan kaysa sa cartoonish.
• Mag-isip tungkol sa isang color wheel: kapag mas malayo ang dalawang kulay sa gulong, mas malala ang pagsasama nila. Kasabay nito, 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 ng eksklusibo mula sa mga kumbinasyon ng kayumanggi at pula.

Paglalapat ng mga kulay

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

Pagtatabing

Ang pagtatabing ay isa sa pinakamahalagang bahagi ng pakikipagsapalaran na maging isang pixelation demigod. Sa yugtong ito na ang sprite ay nagsisimulang 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

Una pumili kami ng isang ilaw na mapagkukunan. Kung ang iyong sprite ay bahagi ng isang mas malaking fragment na may sariling mga pinagmumulan ng ilaw, tulad ng mga lampara, sulo, at iba pa. At lahat sila ay maaaring magkaroon ng iba't ibang epekto sa hitsura ng sprite. 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 harap ng sprite, upang ang harap at tuktok lamang ng sprite ang iluminado at ang iba ay may kulay.

Pangalawang hakbang: direktang pagtatabing

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

Tandaan natin na ang mga patag na bagay ay hindi makakapagbigay ng anino. Kumuha ng isang piraso ng papel, lamutin ito at igulong ito sa mesa. Paano mo nalaman na hindi na ito patag? Nakakita ka lang ng mga anino sa paligid niya. Gumamit ng pagtatabing upang bigyang-diin ang mga tupi sa 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. Magagamit din ang mga ito sa paglipat mula sa liwanag patungo sa madilim na lugar, at sa hindi pantay na ibabaw.

Hakbang apat: mga lugar na may ilaw

Kailangan 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, lalabas sila.

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 sasabog, at kapag nag-apply ka ng mga anino, kailangan itong bawasan.

Ang ilang mga kapaki-pakinabang na patakaran

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

1. Huwag gumamit ng mga gradient. Ang pinakakaraniwang pagkakamali na ginawa ng mga nagsisimula. Nakakatakot ang mga gradient at hindi man lang tinatayang kung paano naglalaro ang liwanag sa mga ibabaw.
2. Huwag gumamit ng malambot na pagtatabing. Pinag-uusapan ko ang isang sitwasyon kung saan ang anino ay masyadong malayo mula sa tabas, dahil pagkatapos ay mukhang napakalabo nito at pinipigilan ang pagkilala sa pinagmulan ng liwanag.
3. Huwag gumamit ng masyadong maraming anino. Madaling isipin na "mas maraming kulay, mas makatotohanan ang larawan." Maging na bilang ito ay maaaring, sa totoong buhay Nakasanayan na nating makakita ng mga bagay sa madilim o maliwanag na spectrum, at sasala ng ating utak ang lahat ng nasa pagitan. Gumamit lamang ng dalawang madilim (madilim at napakadilim) at dalawang liwanag (maliwanag 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. Hindi na kailangang gumamit ng halos magkaparehong mga kulay maliban kung gusto mong gumawa ng talagang malabong sprite.

Dithering

Ang pagpapanatili ng mga kulay ay isang bagay na 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. Parang sa tradisyonal na pagpipinta Ginagamit ang "Hatching" at "cross-hatching", ibig sabihin, literal kang nakakakuha ng isang bagay sa pagitan ng dalawang kulay.

Simpleng halimbawa

Narito ang isang simpleng halimbawa kung paano, sa pamamagitan ng dithering, maaari kang lumikha ng apat na pagpipilian sa pagtatabing mula sa dalawang kulay.

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 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 napakagandang 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). Ako mismo ay hindi gumagamit ng pamamaraang ito nang madalas, ngunit para sa mga layuning pang-edukasyon, ipapakita ko 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 na gamitin ito talagang mahusay.

Selective contouring

Ang selective contouring, tinatawag ding selected outlining, ay isang subtype ng contour shading. Sa halip na gumamit ng itim na linya, pipili kami ng kulay na magiging mas magkakasuwato sa iyong sprite. Bilang karagdagan, binabago namin ang liwanag ng outline 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 pinapayagan din ang sprite na tumayo mula sa mga nakapalibot na bagay. Ngunit sa pamamagitan ng paggamit ng pamamaraang ito, isinasakripisyo namin ang pagiging totoo, na maaaring maging kapaki-pakinabang sa amin sa ilang mga kaso, dahil ang aming sprite ay patuloy na mukhang cartoonish. Ang selective contouring ay mapupuksa ito.

Mapapansin mo na gumamit ako ng selaute para lumambot ang definition ng muscles niya. Sa wakas, ang aming sprite ay nagsisimulang magmukhang isang solong kabuuan, sa halip na isang malaking bilang ng mga hiwalay na fragment.

Ihambing ito sa orihinal:

1. Nagpapakinis

Ang paraan ng pag-smoothing ay simple: pagdaragdag ng mga intermediate na kulay sa mga gilid 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 gray na pixel sa mga break nito sa gilid.

Pamamaraan 1: Pag-alis ng mga kinks

Sa pangkalahatan, kailangan mong magdagdag ng mga intermediate na kulay kung saan may mga kinks, kung hindi man 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 na tumutugma sa direksyon ng curve.

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

Pamamaraan 2: Pag-ikot sa mga bukol

Pamamaraan 3: binubura ang mga dulo ng linya

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, hindi mo dapat pakinisin ang labas ng linya. Kung hindi man, ang iyong sprite ay magkakaroon ng isang napaka-hindi naaangkop na halo sa paligid nito kung saan ito ay nakakatugon sa 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?

Maaari mong itanong, "Bakit hindi na lang maglapat ng filter ng graphics editor sa aming sprite kung gusto namin itong magmukhang makinis?" Ang sagot ay simple din - walang filter na gagawing kasinglinaw at kasinglinis ng iyong sprite gawa ng kamay. Magkakaroon ka ng ganap na kontrol sa hindi lamang sa mga kulay na ginagamit mo, 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 tayo sa punto kung saan maaari mong i-off ang iyong computer at kumuha ng malamig na bote ng beer mula sa refrigerator. Pero hindi pa dumarating! Ang huling bahagi ay tungkol sa kung ano ang naghihiwalay sa masugid na amateur mula sa batikang propesyonal.

Bumalik ng isang hakbang at tingnang mabuti ang iyong sprite. May posibilidad na mukhang "mamasa-masa" pa rin. Gumugol ng kaunting oras sa pagperpekto at siguraduhing perpekto ang lahat. Kahit gaano ka pa kapagod, ang nakakatuwang 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 pagpi-pixel.

Maaaring magulat ka sa katotohanang sa lahat ng oras na ito ay walang mga mata ang aming Lucha Lawyer, o ang pakete na hawak niya ay walang laman. Sa totoo lang, ang dahilan ay nasa katotohanan na gusto kong maghintay ng ilang sandali maliliit na detalye. Pansinin din ang trim na idinagdag ko sa kanyang mga headband, ang langaw sa kanyang pantalon... at sino kaya ang isang tao kung wala ang kanyang mga utong? Medyo pinadilim ko rin ang ibabang bahagi ng katawan niya para mas lalong lumantad ang braso niya sa katawan niya.

Sa wakas tapos ka na! Ang Lucha Lawyer ay magaan, dahil mayroon lamang itong 45 na kulay (o maaari itong maging sobrang bigat - ang lahat ay depende sa mga limitasyon ng iyong palette) at ang resolution nito ay humigit-kumulang 150 by 115 pixels. Ngayon ay maaari mong buksan ang iyong 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 kasanayan tradisyonal na mga pamamaraan. Ang lahat ng kaalaman at kasanayan na kinakailangan para sa pagguhit at pagguhit ay maaaring ilapat sa pixelating.
2. Magsimula sa maliliit na sprite. Ang pinakamahirap na bahagi ay ang pag-aaral kung paano maglagay ng maraming detalye gamit ang isang minimum na bilang ng mga pixel upang hindi makagawa 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 pag-aaral - pag-uulit ng 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 ay hindi nakakatuwa, at malamang na hindi mapabilib ang mga miyembro ng hindi kabaro. Gumagamit ako ng isang maliit na Wacom Graphire2 - Gusto ko kung gaano ito compact at portable. Maaaring mas gusto mo ang isang mas malaking tablet. Bago bumili, kumuha ng maikling test drive.
5. Ibahagi ang iyong trabaho sa iba upang makuha ang kanilang mga opinyon. Maaari rin itong maging isang mahusay na 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. O direktang sumulat sa mga mensahe ng grupo

Bahagi 6: Antialiasing
Part 7: Textures at Blur
Bahagi 8: Tile World

Paunang Salita

Mayroong maraming mga kahulugan ng pixel art, ngunit dito gagamitin namin ito: ang isang imahe ay pixel art kung ito ay ganap na nilikha sa pamamagitan ng kamay, at may kontrol sa kulay at posisyon ng bawat pixel na iginuhit. Siyempre, sa pixel art, hindi namin ginagamit ang pagsasama o paggamit ng mga brush o blur tool o degraded na makina (hindi sigurado), at iba pang mga opsyon sa software na "moderno" (talagang inilagay sa aming pagtatapon ay nangangahulugang "nasa aming pagtatapon" , ngunit lohikal na tila mas tama sa ganitong paraan). Ito ay limitado sa mga tool na lapis at punan.

Gayunpaman, hindi mo masasabi na ang pixel art o non-pixel art graphics ay higit pa o hindi gaanong maganda. Mas makatarungang sabihin na ang pixel art ay naiiba at mas angkop para sa mga larong istilong retro (tulad ng Super Nintendo o Game Boy). Maaari mo ring pagsamahin ang mga diskarteng natutunan dito sa mga epekto mula sa non-pixel na sining upang lumikha ng isang hybrid na istilo.

Kaya, dito mo malalaman ang teknikal na bahagi ng pixel art. Gayunpaman, hinding hindi kita gagawing artista... sa simpleng dahilan na hindi rin ako artista. Hindi ko ituturo sa iyo ang anatomya ng tao o ang istraktura ng sining, at kakaunti ang sasabihin ko tungkol sa pananaw. Sa tutorial na ito, makakahanap ka ng maraming impormasyon tungkol sa mga diskarte sa pixel art. Sa huli, dapat ay magagawa mong lumikha ng mga character at tanawin para sa iyong mga laro, kung magtutuon ka ng pansin, regular na pagsasanay, at ilapat ang mga tip na ibinigay.

- Gusto ko ring ituro na ang ilan lamang sa mga larawang ginamit sa tutorial na ito ay pinalaki. Para sa mga larawang hindi pinalaki, makabubuti kung maglaan ka ng oras upang kopyahin ang mga larawang ito upang mapag-aralan mo nang detalyado. Ang pixel art ay ang kakanyahan ng mga pixel; ang pag-aaral sa kanila mula sa malayo ay walang silbi.

Sa huli, kailangan kong pasalamatan ang lahat ng mga artist na sumali sa akin sa paglikha ng gabay na ito sa isang paraan o iba pa: Shin, para sa kanyang maruming trabaho at line art, Xenohydrogen, para sa kanyang henyo sa mga kulay, Lunn, para sa kanyang kaalaman sa pananaw, at Panda, ang mahigpit na Ahruon, Dayo, at Kryon para sa kanilang mapagbigay na kontribusyon upang ilarawan ang mga pahinang ito.

Kaya, hayaan mo akong bumalik sa punto.

Bahagi 1: Ang Mga Tamang Tool

Masamang balita: hindi ka gumuhit ng isang pixel sa bahaging ito! (And that's no reason to skip it, right?) Kung may kasabihan na I hate, ito ay "walang masamang kasangkapan, masasamang manggagawa lamang." Naisip ko talaga na wala nang hihigit pa sa katotohanan (maliban sa marahil "kung ano ang hindi pumatay sa iyo ay nagpapalakas sa iyo"), at ang pixel art ay isang napakagandang kumpirmasyon. Ang gabay na ito ay naglalayong ipakilala sa iyo ang iba't ibang software, ginamit upang lumikha ng pixel art, at tulungan kang pumili ng tamang program.

1. Ilang mga lumang bagay

Kapag pumipili ng software upang lumikha ng pixel art, madalas na iniisip ng mga tao: "Pagpipilian ng software? Ito ay kabaliwan! Ang kailangan lang nating lumikha ng pixel art ay pintura! (tila isang laro sa mga salita, pagguhit at isang programa)" Kalunos-lunos na pagkakamali: Napag-usapan ko ang tungkol sa mga masamang kasangkapan, ito ang una. Ang pintura ay may isang bentahe (at isa lamang): mayroon ka na nito kung nagpapatakbo ka ng Windows. Sa kabilang banda, marami itong pagkukulang. Ito ay isang (hindi kumpleto) na listahan:

*Hindi ka maaaring magbukas ng higit sa isang file sa parehong oras
* Walang kontrol sa palette.
*Walang mga layer o transparency
* Walang mga pagpipiliang hindi hugis-parihaba
* Ilang mga hotkey
* Lubhang hindi maginhawa

Sa madaling salita, maaari mong kalimutan ang tungkol sa Paint. Ngayon ay titingnan natin ang tunay na software.

2. Sa huli...

Iisipin ng mga tao: "Okay, masyadong limitado ang Paint para sa akin, kaya gagamitin ko ang aking kaibigang Photoshop (o Gimp o PaintShopPro, pareho sila), na mayroong libu-libong feature." Ito ay maaaring mabuti o masama: kung alam mo na ang isa sa mga program na ito, maaari kang gumawa ng pixel art (na ang lahat ng mga opsyon para sa awtomatikong anti-aliasing ay naka-off, at marami sa mga advanced na tampok ay naka-off). Kung hindi mo pa alam ang mga programang ito, gugugol ka ng maraming oras sa pag-aaral ng mga ito, kahit na hindi mo kailangan ang lahat ng kanilang pag-andar, na magiging isang pag-aaksaya ng oras. Sa madaling salita, kung ginagamit mo na ang mga ito sa mahabang panahon, maaari kang lumikha ng pixel art (personal kong ginagamit ang Photoshop nang hindi nakagawian), ngunit kung hindi, mas mahusay na gumamit ng mga programa na dalubhasa sa pixel art. Oo, umiiral sila.

3. Cream

Mayroong maraming higit pang mga programa na idinisenyo para sa pixel art kaysa sa maaaring isipin ng isa, ngunit dito namin isasaalang-alang lamang ang pinakamahusay. Lahat sila ay may halos magkatulad na katangian (kontrol ng palette, paulit-ulit na mga preview ng tile, transparency, mga layer, atbp.). Ang kanilang mga pagkakaiba ay nasa kaginhawahan... at presyo.

Ang Charamaker 1999 ay isang magandang programa, ngunit ang pamamahagi ay tila naka-hold.

Ang Graphics Gale ay mas masaya at madaling gamitin, at ito ay nagbibili ng humigit-kumulang $20, na hindi naman masyadong masama. Hayaan akong idagdag na ang trial na bersyon ay hindi limitado sa oras, at may kasamang sapat na kit upang makagawa ng sapat magandang graphics. Hindi ito gumagana sa .gif, na hindi ganoong problema dahil mas maganda pa rin ang .png.

Ang software na mas karaniwang ginagamit ng mga pixel artist ay ProMotion, na (malinaw naman) na mas maginhawa at mas mabilis kaysa sa Graphics Gale. Ay oo, siya ay mahal! makakabili ka buong bersyon para sa isang maliit na halaga... 50 euro ($78).
Huwag nating kalimutan ang ating mga kaibigan sa Mac! Ang Pixen ay isang magandang program na magagamit para sa Macintosh, at libre ito. Sa kasamaang palad hindi ko na masasabi sa iyo dahil wala akong Mac. Tala ng tagasalin (mula sa French): Ang mga gumagamit ng Linux (at iba pa) ay dapat subukan , at GrafX2. Hinihimok ko kayong subukan ang lahat sa mga demo na bersyon at tingnan kung alin ang nababagay sa iyong kaginhawahan. Sa huli ito ay isang bagay ng panlasa. Alamin lang na kapag nagsimula kang gumamit ng isang program, maaaring napakahirap lumipat sa ibang bagay.

Itutuloy…

Mga tala ng tagasalin mula sa Pranses hanggang Ingles

Ito ay isang mahusay na tutorial sa pixel art, na isinulat ni Phil Razorbak mula sa LesForges.org. Maraming salamat Phil Razorbak para sa pagpayag sa OpenGameArt.org na isalin ang mga gabay na ito at i-post ang mga ito dito. (Mula sa tagasalin sa wikang Ruso: Hindi ako humingi ng pahintulot, kung sinuman ang gusto, maaari kang tumulong, wala akong sapat na karanasan sa pakikipag-usap sa Ingles, lalo na sa Pranses).

Tala ng tagasalin mula sa Ingles hanggang Ruso

Programmer ako, hindi artista o tagasalin, nagsasalin ako para sa mga kaibigan kong artista, pero kahit anong kabutihan ang nasasayang, hayaan mo na.
Ang orihinal sa French ay nasa isang lugar dito www.lesforges.org
Pagsasalin mula sa Pranses hanggang Ingles dito: opengameart.org/content/les-forges-pixel-art-course
Nagsalin ako mula sa English dahil hindi ako marunong ng French.
At oo, ito ang aking unang publikasyon, kaya ang mga mungkahi sa disenyo ay malugod na tinatanggap. Dagdag pa, interesado ako sa tanong: dapat bang mai-publish ang mga natitirang bahagi bilang hiwalay na mga artikulo, o mas mahusay bang i-update at dagdagan ang isang ito?

Adobe Photoshop: Kami ay gumuhit at nagbibigay-buhay sa isang karakter gamit ang teknolohiya Pixel Art

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

Programa: Adobe Photoshop Pinagkakahirapan: mga nagsisimula, intermediate level Oras na kinakailangan: 30 min – oras

I. Pagse-set up ng dokumento at mga tool

Hakbang 1

Piliin ang Pencil mula 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 tulad ng sa larawan. Ang aming layunin ay gawing matalim ang nib ng lapis hangga't maaari.

Hakbang 2

Sa mga setting ng Eraser Tool (eraser), piliin ang Pencil Mode, at itakda ang natitirang mga halaga tulad ng 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 graphics 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 ruler units sa pixels Preferences > Units & Rulers > Pixels.

II. Paglikha ng Tauhan

Hakbang 1

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

I-sketch ang iyong karakter na may malinaw na balangkas, maging maingat 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. Ang sketch na ito ay partikular na inihanda para sa araling ito.

Hakbang 2

Bawasan ang sukat ng sketch sa 60 pixels ang taas gamit ang keyboard shortcut na Control+T, o Edit > Free Transform.

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

Hakbang 3

Mag-zoom in sa sketch nang 300-400% para mas madaling gamitin at bawasan ang opacity ng layer. Pagkatapos ay lumikha ng isang bagong layer at iguhit 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 ito at i-flip ito bilang salamin (I-edit > Transform > Flip Horizontal).

Ritmo: Gumuhit mga kumplikadong elemento hatiin ang mga ito sa mga piraso. Kapag ang mga pixel (tuldok) sa isang linya ay bumubuo ng isang "ritmo" tulad ng 1-2-3, o 1-1-2-2-3-3, ang sketch ay lilitaw na mas makinis sa mata ng tao. Ngunit, kung ang form ay nangangailangan nito, ang ritmong ito ay maaaring maputol.

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 habang gumuhit ka, maaaring itama ang ilang mga hugis.

Hakbang 6

Lumikha ng bagong layer para sa mga highlight.

Piliin ang Overlay blend mode mula sa drop-down na listahan sa panel ng Mga Layer. Gumuhit liwanag na kulay sa mga lugar na gusto mong i-highlight. Pagkatapos ay pakinisin ang mga highlight gamit ang Filter > Blur > Blur.

Kumpletuhin ang larawan, pagkatapos ay kopyahin at i-mirror ang natapos na kalahati ng larawan, pagkatapos ay pagsamahin ang mga layer sa mga kalahati upang makagawa 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. Character Animation

Hakbang 1

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

Bawasan 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 iyong karakter na parang tumatakbo siya.

● I-highlight kaliwang kamay 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 binti at iunat ito ng kaunti. Pagkatapos ay pisilin ang kabilang binti sa kabaligtaran upang maramdaman na ang karakter ay naglalakad.

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

Hakbang 3

Ngayon ay kailangan mong ganap na muling iguhit ang bagong posisyon ng mga braso at binti tulad ng ipinapakita sa ikalawang seksyon ng araling ito. Ito ay kinakailangan upang matiyak na ang imahe ay mukhang malinaw, 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.

Kung mahilig kang maglaro ng Lego noong bata pa (o patuloy mong laruin ito kahit na nasa hustong gulang), malamang na interesado ka sa isometric pixel art. Maaari itong maging teknikal at mas katulad ng agham kaysa sa paglalarawan. Ngunit sa gayong sining ay walang 3D na pananaw; maaari mong ilipat ang mga elemento kapaligiran na may pinakamataas na pagiging simple.

Gagawin namin ang character bilang isang lohikal na panimulang punto para sa pixel art, dahil makakatulong ito na matukoy ang mga proporsyon para sa karamihan ng iba pang mga item na maaari naming gawin. Gayunpaman, kailangan mo munang matutunan ang ilang mga pangunahing kaalaman sa isometric pixel art, at pagkatapos ay magpatuloy sa paglikha ng isang 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:

Kinakatawan nila ang dalawang pixel kasama para sa bawat pixel pababa. Ang mga linyang ito ay mukhang medyo malambot at ginagamit para sa mga parisukat na ibabaw:

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

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

Napaka-angular at hindi tumingin

Maganda. Iwasang gamitin ang mga ito.

2. Mga Tomo

Ang ating karakter ay hindi eksaktong susunod sa mga batas ng isometry, kaya gumawa muna tayo ng isang simpleng cube upang magpasya sa mga proporsyon.

Gumawa ng bagong dokumento sa Photoshop na may resolusyon 400 x 400 px.

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 magnification 600% subaybayan ang mga resulta sa window ng pag-zoom 100% . Ang paggamit ng grid ay nasa iyo, ngunit kung minsan ay nakikita kong mas mapanghimasok 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, para makapagdagdag ako ng mga anino (itim at mababang opacity) at mapili ang bawat kulay nang hiwalay gamit ang magic wand.

Mayroong ilang mga paraan upang gumuhit ng isang linya:

1. Paggamit Tool sa linya(Line Tool) na may mode Mga pixel(Mga Pixel), hindi naka-check Nagpapakinis(Anti-alias) at kapal 1px. Habang gumuguhit, dapat ipakita ang tooltip ng anggulo 26.6°. Sa katunayan, ang Line tool ay hindi matatawag na maginhawa; lumilikha ito ng hindi pantay na mga 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) kapal 1px at gumuhit ng tuldok sa kaliwang sulok sa ibaba ng pagpili, pagkatapos ay pindutin nang matagal ang key Paglipat mag-click sa kanang sulok sa itaas. Awtomatikong gagawa ang Photoshop ng bagong linya sa pagitan ng dalawang punto. Kung magsasanay ka, maaari kang lumikha ng mga tuwid na linya nang hindi nagha-highlight sa ganitong paraan.

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 magtagpo sa mga sulok. Maaari mo ring ilipat ang pagpili gamit ang mga arrow key sa iyong keyboard habang nakapindot Alt. Ang pamamaraang ito ay tinatawag na Alt-offset(Alt-Nudge).

Kaya ginawa namin ang unang linya. Piliin ito at ilipat ito tulad ng sa hakbang 3 o kopyahin at i-paste lang, ibinababa ang bagong layer. 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 patayo, at pagsamahin ang dalawang halves upang makumpleto ang aming ibabaw:

Oras na para idagdag ang "third dimension". Alt-offset 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 makagawa ng mas maayos na cube, palambutin natin ang mga sulok sa pamamagitan ng pag-alis ng 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 light shade) 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 magpinta ng mas magaan na mga sulok sa harap ng aming kulay na parisukat. Dahil na-crop namin ng kaunti ang kubo, ang mga light line na ito ay magmumukhang mas maganda sa itaas 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 Tool sa pambura(Eraser Tool), mode Lapis(Pencil Mode), kapal 1px).

Piliin ang kulay ng itaas na parisukat gamit Pipettes(Eyedropper Tool). Upang mabilis na piliin ang tool na ito, habang nagdodrowing ka gamit ang lapis o pagpuno, pindutin Alt. Gamitin ang resultang kulay ng eyedropper upang punan ang patayong linya pababa 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 istilo ng karakter ay maaaring maging ganap na naiiba, malaya kang baguhin ang mga sukat o elemento ayon sa gusto mo. Kadalasan ay pumupunta ako para sa isang manipis na katawan at isang bahagyang mas malaking ulo. Ang manipis 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 sa kanya. Samakatuwid, ang karakter ay dapat na isa sa pinaka maliliit na elemento sa ilustrasyon. Ito rin ay nagkakahalaga ng pagsasaalang-alang sa graphical na kahusayan; subukang gawing kaakit-akit ang karakter hangga't maaari na may pinakamababang bilang ng mga pixel (sapat na malaki upang ilarawan ang mga tampok ng mukha). Bilang karagdagan, ang mga maliliit na bagay ay mas madaling gumuhit. Ang exception ay kapag gusto mo lang ipakita ang isang 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. Nilaktawan ang isang pixel sa kaliwa ng mga mata, magdagdag ng patayong linya:

Ngayon magdagdag ng isa pang layer at gumuhit ng pahalang na strip ng dalawang pixel, ito ang magiging bibig. Gamitin ang mga arrow key sa iyong keyboard upang lumipat sa paligid at kapag nakita mo ang perpektong posisyon, ilipat ang layer pababa. Gawin ang parehong sa baba, dapat lang itong mas mahabang linya:

Gumuhit sa buhok at tuktok ng ulo, pagkatapos ay palambutin ang mga sulok. Dapat kang makakuha ng katulad 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 isang linya na nagmamarka sa dulo ng ulo. Sige at palambutin ang mga anggulo kung saan nagtatagpo ang mga linya:

Magdagdag ng pixel para sa tuktok ng tainga at baguhin ang hugis ng 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 bahagi ng tainga, ilang pixel pababa at dalawang pixel sa pahilis upang makita ang mga balikat ng ating karakter:

Ngayon, sa lugar kung saan nagtatapos ang mga balikat, magdagdag ng isang patayong linya ng haba 12 pixels upang gawin ang labas ng kamay, at panloob na bahagi magiging dalawang pixel sa kaliwa. Ikonekta ang mga linya sa ibaba gamit ang ilang pixel para gumawa ng kamay/kamao (walang detalye sa kasong ito, kaya huwag pansinin ang elementong iyon) at sa itaas lang kung saan nagtatapos ang kamay, magdagdag ng linya 2:1 , na magsisilbing isang baywang, pagkatapos ay iguhit ang linya ng dibdib at makakuha ng isang kumpletong itaas na bahagi mga katawan. Hindi nakikita ang kabilang braso ng karakter, ngunit magiging normal ito dahil natatakpan ito ng katawan.

Dapat kang magtapos sa isang bagay na tulad nito:

Siyempre maaari mong gamitin ang anumang mga sukat 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 vertical na 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 makapal:

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 #FFCCA5. Ang pagpili ng mga kulay para sa natitirang mga elemento ay hindi dapat maging isang problema. Pagkatapos nito, tukuyin ang haba ng mga manggas, ang posisyon ng hiwa ng shirt, at ang estilo nito. Ngayon magdagdag ng isang madilim na guhit upang paghiwalayin ang kamiseta mula sa katawan. Mas gusto kong panatilihing mas magaan ang lahat ng mga elemento ng dekorasyon kaysa sa itim (lalo na kapag maraming elemento ang nasa parehong antas, tulad ng mula sa isang kamiseta hanggang sa katad o pantalon). Binibigyang-daan ka nitong makuha ang kinakailangang contrast nang hindi masyadong magaspang ang larawan.

Maaari kang magdagdag ng mga lighting effect sa halos bawat color zone. Iwasan din malaking dami mga 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 pop ng kulay sa isang lugar na mayroon na 100% liwanag, subukang bawasan ang saturation nito. Sa ilang mga kaso (halimbawa, kapag gumuhit ng buhok) maaari itong maging sa mabuting paraan magpalit ng shades.

Mayroong maraming mga pagpipilian sa buhok na maaari mong subukan. Narito ang ilang ideya:

Habang patuloy kang gumagawa ng mga character, ang maliliit na bagay tulad ng istilo ng pananamit, haba ng manggas, haba ng pantalon, accessories, damit, at kulay ng balat ay magiging kapaki-pakinabang para sa iba't ibang uri.

Ngayon ang kailangan lang gawin ay pagsamahin ang parehong mga elemento at suriin ang hitsura ng mga ito sa isang 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 tingin ko nasaklaw ko na ang maraming tip at aesthetic trick hangga't maaari. Maaari mong malayang palawakin ang iyong isometric pixel world - mga gusali, kotse, interior, exterior. Ang paggawa ng lahat ng ito ay posible at kahit na kawili-wili, bagaman hindi ganoon kadali.

Tagasalin: Shapoval Alexey

4.7 (93.8%) 158 boto

Ang mga guhit sa pamamagitan ng mga cell o pixel art ay isang napakasikat na anyo ng sining sa mga mag-aaral at mag-aaral. Sa panahon ng nakakapagod na mga lecture, ang mga drawing sa pamamagitan ng mga parisukat ay nagliligtas sa iyo mula sa pagkabagot. Ang prototype ng pagguhit sa pamamagitan ng mga parisukat ay cross-stitching, kung saan ang isang cross pattern ay iginuhit sa isang canvas, isang tela na may markang mga parisukat. Dati tayong lahat ay mga estudyante at mga mag-aaral at nadala sa pagkabagot iba't ibang larawan sa mga cell, isipin ang aking pagtataka nang malaman ko na ito ay halos sining kasama ang mga obra maestra at henyo nito. Sinimulan kong pag-aralan ang isyu nang mas detalyado at ito ang lumabas dito...

Paano gumuhit ng mga larawan sa pamamagitan ng mga cell

Ang sining na ito ay naa-access sa sinuman, ang pangunahing bagay ay upang sundin ang mga cell nang malinaw. Ang mga notebook ng paaralan ay perpekto para sa pagguhit ng mga larawan; ang laki ng kanilang mga parisukat ay 5x5 mm, at ang notebook mismo ay 205 mm ng 165 mm. Naka-on sa sandaling ito Ang mga spring notebook na may A4 sheet ay nagiging popular sa mga box artist; ang laki ng notebook na ito ay 280mm by 205mm.

Ang mga propesyonal na artista ay gumagawa ng kanilang mga obra maestra sa graph paper (drawing paper), doon ay may puwang upang gumala. Ang tanging disbentaha ng graph paper ay maputla ito kulay berde, na hindi napapansin kapag nag-sketch ka gamit ang mga colored pens.
Kapag pumipili ng isang notebook para sa pagguhit, bigyang-pansin ang kapal ng papel; ang kalidad ng iyong pagguhit sa mga cell ay nakasalalay sa density nito, at kung ito ay lilitaw sa maling bahagi ng sheet. Ang ideal na sheet density ay hindi bababa sa 50g/sq.m.

Paano gumuhit ng mga larawan sa pamamagitan ng mga cell

Upang kulayan ang mga larawan ayon sa mga cell, hindi mo kailangan ng anumang mga espesyal na tool; magagawa ng anumang mga lapis at panulat. Napaka-cool ng mga monochrome na painting, pero gusto ko talagang magdagdag ng kulay sa buhay ko. Upang ang mga kulay ay maging iba-iba, pumunta sa isang tindahan ng stationery at piliin ang anumang nais ng iyong puso, mga panulat ng gel, langis, bola.

Mga ballpen para sa pixel art

Felt pen para sa mga guhit ng mga cell

Kung gusto mong gumuhit gamit ang mga felt-tip pen, ang iyong karapatan, ang mga kulay ng mga felt-tip pen ay napakayaman. Dapat tandaan na ang mga felt-tip pen ay nahahati sa dalawang grupo: alcohol at water-based; mas ligtas ang mga water-based, ngunit maaari nilang ibabad ang papel. Ang alkohol ay maaari ring magbabad sa papel, at ang amoy ay hindi rin para sa lahat.

Mga lapis para sa mga guhit ng mga cell

Ang mga lapis ay isa pang uri ng sketching device. Ang mga lapis ay walang pagbubukod sa iba't ibang uri; ang mga ito ay nasa plastic, wax, kahoy at watercolor. Nagpinta kami gamit ang kahoy maagang pagkabata, at alam namin na madalas nilang masira ang stylus. Ang mga plastik at waks ay mas madalas na masira, ngunit mas makapal ang mga ito, na hindi gaanong maginhawa para sa pagguhit. Tungkol sa mga lapis ng watercolor sa labas ng tanong, dahil pagkatapos ng pagpipinta gamit ang isang lapis kailangan mong takpan ang pagguhit gamit ang isang moistened brush, at ito ay hindi katanggap-tanggap para sa mga sheet ng notebook.

Manood ng isang video tungkol sa kung gaano kadaling gumuhit ng mga larawan sa mga cell at kung gaano kaganda ang maaaring maging resulta:

Ang ilan pang mga scheme ng pagguhit na nagustuhan ko:

Dot graphics - teknolohiya ng pixel art

Naisip namin kung anong mga accessory ang kailangan, ngayon ay kilalanin natin ang teknolohiya. Ang teknolohiya ng pixel art ay napaka-simple, ito ay tuldok graphics.

Bago natin simulan ang pagtingin sa mga pamamaraan ng pixel art, bumalik tayo sa ating pagkabata noong 80s -90s. Siyempre, ang mga lumaki sa mga panahon ng post-Soviet ay naaalala ang 8-bit na mga video game, mga graphics ng laro, na binuo sa mga pixel graphics.

Ang pinakamahusay na paraan upang makabisado ang anuman ay ang pagsasanay, subukan nating makabisado ang pixel art:

Kumuha tayo ng black and red oil pen at checkered notebook sheet.

Una, gumawa tayo ng isang simpleng pagguhit. Bilangin natin ang mga cell, tukuyin ang balangkas at kulayan ito ayon sa mga kulay.

Halimbawa, gumuhit tayo ng puso:

1. Kumuha ng checkered leaf at panulat na may itim na tinta, maglagay ng 3 tuldok, tulad ng nasa larawan, ang mga tuldok ay nagmamarka kung aling mga cell ang ipininta ng itim.
   
   
2. Gumuhit ng mga linya na nagpapahiwatig ng mga contour ng larawan.
   
   
3. Markahan ang tatlong puntos sa bawat panig, tingnan ang figure.
   
   
4. Minarkahan namin ang lugar ng pagguhit na may dalawang linya.
   
   
5. Maglagay tayo ng isa pang punto sa bawat panig at gumuhit ng mga hangganan sa ilalim ng mga nangungunang puntos.
   
   
6. Gumuhit tayo ng 8 puntos patayo at 4 na puntos sa magkabilang panig, tulad ng ipinapakita sa figure sa ibaba.
   
7. Sa pamamagitan ng pagguhit ng mga patayong linya, tulad ng ipinapakita sa figure, ganap naming ipahiwatig ang mga hangganan ng pagguhit.
   
8. Sa parehong paraan, markahan ang ibabang bahagi ng puso sa kaliwa at kanan.
   
   
9. Binabalangkas namin ang mga cell tulad ng sa aming imahe.
   
   
10. Ang susunod na bagay na kailangan nating gawin ay pintura sa loob ng puso gamit ang isang pulang panulat, na iniiwan ang highlight ng liwanag na hindi pininturahan.
    
    
11. At panghuli, gumamit ng itim na panulat upang lilim ang mga cell na may markang tuldok. Ngayon natutunan mo kung paano gumuhit ng walong-bit na mga larawan.
    
    

Kung sa tingin mo ay hindi para sa iyo ang malalaki at malalaking larawan, dapat mong subukang gumuhit ng larawan mula sa Internet. Takot ka ba? Hindi katumbas ng halaga.

Kunin

• itim na panulat,
• mga lapis,
• kuwadernong kuwaderno,
• kompyuter,
• larawan o larawan mula sa Internet
• Programa ng Photoshop.

Para sa aplikasyon volumetric na mga guhit kailangan nating bilangin ang bilang ng mga cell na pipintahan. Medyo mahirap hindi magkamali malalaking dami. Gayundin, siguraduhing pumili ng mga kakulay ng mga kulay na katulad ng orihinal na larawan.
Kaya, kumilos tayo:

Bibigyan kita ng isang payo na makakatulong sa akin ng malaki: kung mayroon kang color printer, i-print ang drawing, kung hindi, walang problema. Gumuhit ng grid ng 10 mga cell na may mas makapal na balangkas. Sa isang naka-print na sheet, gamit ang isang ruler at isang contrasting pen, kung walang lugar upang i-print, maaari mong buksan ang imahe sa Paint.
Hangad ko sa iyo ang malikhaing tagumpay.