Kung saan gumuhit ng pixel art. Pixel art: pinakamahusay na mga gawa at illustrator

Pixel Art o pixel art? digital na pagpipinta, na nilikha sa mga raster editor sa pamamagitan ng pixel. Ang Pixel ay ang pinakamaliit na graphic na elemento ng isang larawan. Sa madaling salita, ito ang punto. At ang lahat ng mga guhit ng pixel ay binubuo ng hindi mabilang na mga akumulasyon ng mga tuldok, na nagiging bahagyang hindi pantay, na parang hindi maganda ang pagguhit. Ngunit ito ang kagandahan ng gayong mga kuwadro na gawa.

Kaunting kasaysayan

Anong mga programa ang maaari mong gamitin upang lumikha ng modernong pixel art?

Mayroong maraming mga libreng raster editor. Ngunit madalas na 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 ini-save ang mga ito sa format na jpg, nangyayari ang matinding pagbaluktot ng kulay;
Mahirap gumuhit ng mga anino at mga highlight.
Samakatuwid, sinusubukan nilang bigyan ng kagustuhan ang Adobe Photoshop. Ang program na ito ay may mas maraming kakayahan sa pagtatrabaho kaysa sa Paint. Pinapayagan ka nitong gumuhit ng hindi mga indibidwal na character na may mga simpleng disenyo, ngunit buong mga larawan. Bilang karagdagan, ang pixel art mismo ay mas madali at mas mabilis na i-edit dito. 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", ito ay nagiging angular at ang kinis sa mga linya ay nawawala. Sa isang banda, ito ay business card Pixel Art, ngunit sa kabilang banda, gusto ko ng higit na kinis, na gagawing maayos at kaakit-akit ang larawan sa gumagamit. Itong problema sa wika ng mga pixel artist sila ay tinatawag na kinks o "jaggies".
Ang Jaggies ay mga piraso na nagbibigay sa anumang linya ng tulis-tulis na hitsura. Ang mga ito ay karaniwang itinatapon ng isa sa sumusunod na pamamaraan:
dagdagan ang stray line segment ng 2, 3 o higit pang mga pixel ang haba;
bawasan ang haba ng mga pixel mismo sa kilalang lugar;
bumuo ng isang bagong seksyon ng linya mula sa ilang solong pixel;
magdagdag ng mga solong pixel sa lugar na may pahinga sa pagitan ng mas mahabang "mga tuldok", atbp.
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 pinakasimpleng at visual aid Upang makatulong na maiwasan ang mga kinks, maaari kang gumamit ng isang set ng mga hilig na tuwid na linya.

Paano makakuha ng anino sa Pixel Art

Isa pa mahalagang punto sa pixel art, ito 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 isang anino sa pixel art kakailanganin 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. Sa madaling salita, sa hangganan ng dalawang kulay sila ay halo-halong sa isang pattern ng checkerboard. Ang pamamaraang ito ay lumitaw laban sa background ng isang kakulangan ng mga bulaklak. Sa pamamagitan ng paghahalo ng dalawang kulay sa pattern ng checkerboard, posible na makakuha ng pangatlo na wala sa palette.
Gayunpaman, pagkatapos na lumawak nang malaki ang palette, ang teknolohiya ng dithering ay nanatili pa rin sa demand. Ngunit kailangan mong tandaan na ang isang isang-pixel na malawak na paglipat mula sa isang kulay patungo sa isa pa ay hindi maganda ang hitsura. Isang suklay lang pala. kaya lang
ang minimum na blending zone ay dapat na hindi bababa sa dalawang pixel. At mas malawak ang paglipat na ito, mas mabuti.
Gayundin, kapag lumilikha ng isang anino:
Mahalagang matukoy kung saang anggulo at mula sa aling bahagi mahuhulog ang liwanag sa bagay. Gagawin nitong "buhay" ang pagguhit at makakatulong din sa iyo na maunawaan kung saan iguguhit ang anino. Halimbawa, kung ang liwanag ay nagmumula 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 mga kulay na mas madidilim 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 tungkol sa bahagyang lilim. Para sa layuning ito, pipiliin ang isang lilim na nasa pagitan ng base na kulay at ang kulay ng anino sa palette. Itong lilim inilagay 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 mga highlight sa pixel art

Ang isang highlight, tulad ng isang anino, ay nagbibigay ng lakas ng tunog sa mga bagay na iginuhit. Palagi itong nasa gilid kung saan bumabagsak ang liwanag. Ngunit kung ang bagay ay nilayon na magkaroon ng isang makintab na ibabaw, halimbawa, isang tasa ng porselana, isang bakal na espada, atbp., kung gayon ang isang highlight ay kakailanganin din sa isang 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. Huwag lamang maging masigasig tungkol sa liwanag ng lugar na ito - maaaring hindi ito maging natural. Kadalasan ang isang highlight ay inilalarawan sa puti na walang mga transition. Hindi ito nangyayari sa kalikasan. At ang bagay ay magmumukhang patag.
Upang lumikha ng isang highlight mula sa gilid ng anino, kakailanganin mo ng isang kulay na mas magaan kaysa sa isa kung saan ang anino mismo ay inilapat. At sa kasong ito, kinakailangan din ang isang maayos na paglipat, na maaaring makamit sa pamamagitan ng paggamit ng ilang mga shade nang sabay-sabay.
Upang mapagtanto ang lahat ng ito, siyempre, kailangan mo ng pagsasanay. At pinakamahusay na magsimula sa mga simpleng bagay.

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 inilalagay 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 mas maganda. Mas patas na sabihin na ang pixel art ay naiiba at mas angkop para sa mga retro-style na laro (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 sining ng pixel ay ang kakanyahan ng mga pixel;

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 may libu-libong feature." Maaari itong maging mabuti o masama: kung alam mo na ang isa sa mga program na ito, maaari kang gumawa ng pixel art (na naka-off ang lahat ng opsyon para sa awtomatikong anti-aliasing, at naka-off ang karamihan sa advanced na functionality). 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.

Charamaker 1999 - magandang programa, ngunit mukhang natigil ang pamamahagi.

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?

Part 7: Textures at Blur
Bahagi 8: Tile World

Paunang Salita

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. Nilalayon ng gabay na ito na ipakilala sa iyo ang iba't ibang software na ginagamit 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 gumawa ng pixel art ay pintura (tila isang laro sa mga salita, pagguhit at isang programa)” Tragic na pagkakamali: Napag-usapan ko ang tungkol sa mga masasamang tool, 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:

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 may libu-libong feature." Maaari itong maging mabuti o masama: kung alam mo na ang isa sa mga program na ito, maaari kang gumawa ng pixel art (na naka-off ang lahat ng opsyon para sa awtomatikong anti-aliasing, at naka-off ang karamihan sa advanced na functionality). 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 matagal mo nang ginagamit ang mga ito, maaari kang lumikha ng pixel art (personal kong ginagamit ang Photoshop nang wala sa ugali), ngunit kung hindi, mas mahusay na gumamit ng mga programa na dalubhasa sa pixel art. Oo, umiiral sila.

3. Cream

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 pagsubok na bersyon ay hindi limitado sa oras, at may sapat na kit upang makagawa ng 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! Maaari mong bilhin ang buong bersyon sa katamtamang 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 kay Phil Razorback 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

Adobe Photoshop: Gumuhit at i-animate ang isang character sa Teknolohiya ng 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 magiging 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 gamit ang isang malinaw na balangkas, maging maingat na huwag mag-overload ito. 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 kapareho ng 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 kumplikadong mga 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 "Onion Skinning" (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.

● Gumamit ng lapis at pambura para itama ang bahagi kanang kamay 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; 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 kubo 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; ito ay lumilikha 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 i-click sa kanan itaas na sulok. 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 pinipindot 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 nang 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 malinis na 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 light shade) at punan ang tuktok na parisukat dito.

Ngayon taasan ang liwanag ng napiling kulay sa pamamagitan ng 10% (Inirerekumenda 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. Bilang isang tuntunin, ginagawa ko manipis na katawan at 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 itong maging isang mas mahabang linya:

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

Ngayon mag-iwan ng isang blangkong pixel sa tabi ng pangalawang mata, magdagdag ng mga sideburn (na makakatulong din sa pagguhit ng mga tainga ng character) at ilang higit pang mga pixel 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 ilan pa mga linyang patayo. 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 #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 likha, PNG ang perpektong format.

Iyon lang, tapos na ang trabaho!

Sana ay hindi masyadong nakakalito ang araling ito. Napag-usapan ko na yata maximum na dami mga tip at aesthetic na pamamaraan. 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