Pikselli grafika (keyingi o'rinlarda oddiygina piksel san'ati deb yuritiladi) bugungi kunda, ayniqsa, indie o'yinlari orqali tobora ommalashib bormoqda. Bu tushunarli, chunki rassomlar o'yinni turli xil belgilar bilan to'ldirishlari mumkin va 3D ob'ektlarni modellashtirish va qo'lda murakkab ob'ektlarni chizish uchun yuzlab soatlarni sarflamaydilar. Agar siz piksel san'atini o'rganmoqchi bo'lsangiz, unda birinchi navbatda "sprite" deb ataladigan narsalarni qanday chizishni o'rganishingiz kerak bo'ladi. Keyin, spritlar sizni qo'rqitmasa, siz animatsiyaga o'tishingiz va hatto ishingizni sotishingiz mumkin!

Qadamlar

1-qism

Biz sizga kerak bo'lgan hamma narsani yig'amiz

Yaxshi grafik muharrirlarni yuklab oling. Siz, albatta, Paint-da durdona asarlar yaratishingiz mumkin, ammo bu qiyin va unchalik qulay emas. Quyidagi kabi ishlarda ishlash yaxshiroq bo'lar edi:

• Fotoshop
• Paint.net
• Pixen

1. Grafik planshet sotib oling. Agar siz sichqoncha bilan chizishni yoqtirmasangiz, unda sizga planshet va stilus kerak bo'ladi. Aytgancha, Wacom planshetlari eng mashhurdir.

   Grafik muharriringizda "panjara" ni yoqing. Aslida, agar sizning grafik muharriringiz grid displeyni qo'llab-quvvatlamasa, boshqa dasturni izlash haqida o'ylashingiz kerak. To'r sizga har bir alohida piksel qayerda va qanday joylashishini aniq ko'rish imkonini beradi. Qoida tariqasida, tasbeh "Ko'rish" menyusi orqali yoqiladi.

   • Har bir tarmoq segmenti aslida pikselni ko'rsatishini ta'minlash uchun displey sozlamalarini biroz o'zgartirishingiz kerak bo'lishi mumkin. Har bir dastur buni boshqacha qiladi, shuning uchun tegishli maslahatlarni izlang.

2. Qalam va 1 pikselli cho'tka o'lchami bilan chizing. Har qanday grafik muharririda "Qalam" vositasi bo'lishi kerak. Uni tanlang va cho'tka o'lchamini 1 pikselga o'rnating. Endi siz... piksellarda chizishingiz mumkin.

   2-qism

   Asoslar ustida ishlash

   1. Yangi rasm yarating. Piksel san'ati uslubida chizishni o'rganayotganingiz uchun siz epik tuvallarni maqsad qilib qo'ymasligingiz kerak. Esingizda bo'lsa, o'yinda Super Mario Bros. butun ekran 256 x 224 piksel edi va Mario o'zi 12 x 16 pikselli bo'sh joyga sig'di!

      Kattalashtirish. Ha, aks holda siz alohida piksellarni ko'ra olmaysiz. Ha, siz uni juda ko'paytirishingiz kerak bo'ladi. Aytaylik, 800% juda normal holat.

      To'g'ri chiziqlar chizishni o'rganing. Bu oddiy ko'rinadi, lekin agar siz to'satdan qaltirayotgan qo'l bilan o'rtada 2 piksel qalinlikdagi chiziq chizsangiz, farq ko'zingizga tushadi. To'g'ri chiziq vositasini faollashtirmaguningizcha to'g'ri chiziqlar torting. To'g'ri chiziqlarni qo'lda chizishni o'rganishingiz kerak!

      Egri chiziqlar chizishni o'rganing. Egri chiziqda, aytaylik, bir xil "chiziq uzilishlari" bo'lishi kerak (bu yuqoridagi rasmda aniq ko'rinadi). Aytaylik, egri chiziq chizishni boshlab, 6 pikselli to'g'ri chiziq, uning ostida uchta to'g'ri chiziq, uning ostida ikkita to'g'ri chiziq va undan pastda bir pikselli to'g'ri chiziq chizamiz. Boshqa tomondan, xuddi shu narsani torting (albatta, aks ettirilgan). Bu optimal deb hisoblangan progress. "3-1-3-1-3-1-3" naqshida chizilgan egri chiziqlar piksel san'ati standartlariga javob bermaydi.

      Xatolarni o'chirishni unutmang."Eraser" vositasi qalam bilan bir xil tarzda o'rnatilishi kerak, cho'tka o'lchami 1 pikselga teng bo'ladi. Silgi qanchalik katta bo'lsa, juda ko'p narsalarni o'chirmaslik shunchalik qiyin bo'ladi, shuning uchun hamma narsa mantiqiy.

   3-qism

   Birinchi sprayt yaratish

   Sprite qanday maqsadlarga xizmat qilishini o'ylab ko'ring. Statik bo'ladimi? Animatsiyami? Statik sprite tafsilotlari bilan to'liq to'ldirilishi mumkin, ammo animatsiyali animatsiyani barcha animatsiya kadrlaridagi barcha tafsilotlarni qayta chizish uchun soatlab vaqt sarflamaslik uchun uni soddalashtirish yaxshiroqdir. Aytgancha, agar sizning spraytingiz boshqalar bilan ishlatilishi kerak bo'lsa, unda ularning barchasi bir xil uslubda chizilgan bo'lishi kerak.

   Sprite uchun maxsus talablar mavjudligini bilib oling. Agar siz, masalan, loyiha uchun chizayotgan bo'lsangiz, rang yoki fayl hajmiga qo'yiladigan talablarni kutish o'rinli. Biroq, bu biroz keyinroq, turli xil spritlar bilan yirik loyihalar ustida ishlashni boshlaganingizda muhimroq bo'ladi.

   • Ob'ektiv ravishda aytadigan bo'lsak, bugungi kunda spritlarning o'lchami yoki palitrasi uchun kamdan-kam talablar mavjud. Biroq, agar siz eski o'yin tizimlarida o'ynaladigan o'yin uchun grafik chizayotgan bo'lsangiz, barcha cheklovlarni hisobga olishingiz kerak bo'ladi.

   1. Eskiz qiling. Qog'ozdagi eskiz har qanday spritening asosidir, xayriyatki, shu tarzda siz hamma narsa qanday ko'rinishini tushunishingiz mumkin va agar kerak bo'lsa, biror narsani oldindan tuzatishingiz mumkin. Bunga qo'shimcha ravishda, siz qog'oz eskizdan kuzatishingiz mumkin (agar sizda hali ham planshet bo'lsa).

      • Eskiz uchun tafsilotlarni e'tiborsiz qoldirmang! Yakuniy rasmda ko'rmoqchi bo'lgan hamma narsani chizing.

   2. Eskizni grafik muharrirga o'tkazing. Siz planshetda qog'oz eskizini kuzatishingiz mumkin yoki siz hamma narsani qo'lda, piksel-piksel bilan qayta chizishingiz mumkin - bu muhim emas, tanlov sizniki..

      • Eskizni chizishda kontur rangi sifatida 100% qora rangdan foydalaning. Agar biror narsa sodir bo'lsa, uni keyinroq qo'lda o'zgartirishingiz mumkin, ammo hozircha qora rang bilan ishlash sizga osonroq bo'ladi.

   3. Eskizning konturini aniqlang. Shu nuqtai nazardan, siz, albatta, boshqacha aytishingiz mumkin - keraksiz hamma narsani o'chirib tashlang. Gap shundaki - kontur 1 piksel qalin bo'lishi kerak. Shunga ko'ra, o'lchovni oshiring va o'chiring, ortiqcha narsalarni o'chiring ... yoki etishmayotgan narsalarni qalam bilan to'ldiring.

      • Eskiz ustida ishlayotganda, tafsilotlarga chalg'itmang - ularning navbati keladi.

   4-qism

   Spriteni ranglash

   1. Rang nazariyasi bilan tanishing. Qaysi ranglardan foydalanishni bilish uchun palitraga qarang. U erda hamma narsa oddiy: ranglar bir-biridan qanchalik uzoq bo'lsa, ular bir-biridan qanchalik farq qiladi; Ranglar bir-biriga qanchalik yaqin bo'lsa, ular shunchalik o'xshash va ular bir-biriga yaqinroq ko'rinadi.

      • Spriteni chiroyli va ko'zlarga qulay qiladigan ranglarni tanlang. Ha, pastel ranglardan qochish kerak (agar butun loyihangiz shu uslubda bajarilmasa).

   2. Bir nechta ranglarni tanlang. Qanchalik ko'p ranglardan foydalansangiz, spraytingiz shunchalik "chalg'ituvchi" bo'ladi. Piksel san'ati klassikasiga qarang va u erda qancha rang ishlatilganligini hisoblashga harakat qiling.

      • Mario - faqat uchta rang (agar biz klassik versiya haqida gapiradigan bo'lsak) va hatto ular palitrada bir-biriga deyarli yaqin joylashgan.
      • Sonic - Garchi Sonic Marioga qaraganda ko'proq tafsilotlar bilan chizilgan bo'lsa ham, u faqat 4 rangga (va soyalarga) asoslangan.
      • Spritelarning deyarli klassikasi, chunki ular jangovar o'yinlarda tushuniladi, Ryu oddiy ranglarning katta maydonlari va chegaralanish uchun biroz soyadir. Biroq, Ryu, Sonic-ga qaraganda biroz murakkabroq - allaqachon beshta rang va soyalar mavjud.

   3. Spriteni ranglang. Spriteni ranglash uchun Bo'yoq bilan to'ldirish vositasidan foydalaning va hamma narsa tekis va jonsiz ko'rinishidan xavotirlanmang - bu bosqichda boshqacha bo'lishi kutilmaydi. To'ldirish vositasining ishlash printsipi oddiy - u siz bosgan rangning barcha piksellarini chegaralarga yetguncha siz tanlagan rang bilan to'ldiradi.

   5-qism

   Soya qo'shish

   O'zingizning yorug'lik manbangizga qaror qiling. Bu erda asosiy narsa: yorug'lik spraytga qaysi burchakda tushishini hal qilishingiz kerak. Bu haqda qaror qabul qilganingizdan so'ng, siz ishonchli ko'rinadigan soyalarni yaratishingiz mumkin. Ha, tom ma'noda "yorug'lik" bo'lmaydi, gap chizmaga qanday tushishini tasavvur qilishdir.

   • Eng oddiy yechim - yorug'lik manbai spritedan juda baland, uning chap yoki o'ng tomonida joylashgan deb taxmin qilishdir.

   1. Asosdan bir oz quyuqroq ranglardan foydalanib, soyalarni qo'llashni boshlang. Agar yorug'lik yuqoridan tushsa, soya qayerda bo'ladi? To'g'ri, to'g'ridan-to'g'ri yorug'lik tushmaydigan joyda. Shunga ko'ra, soya qo'shish uchun konturning tepasida yoki ostida tegishli rangdagi piksellar bilan spritega yana bir nechta qatlam qo'shing.

      • Agar siz asosiy rangning "Kontrast" sozlamasini kamaytirsangiz va "Yorqinlik" parametrini biroz oshirsangiz, soyalarni chizish uchun yaxshi rang olishingiz mumkin.
      • Gradientlardan foydalanmang. Gradientlar yomon. Gradientlar arzon, sifatsiz va professional bo'lmagan ko'rinadi. Gradientlarga o'xshash ta'sir "noziklash" texnikasi yordamida amalga oshiriladi (pastga qarang).

   2. Qisman soya haqida unutmang. Asosiy rang va soya rangi o'rtasida rangni tanlang. Undan boshqa qatlam yaratish uchun foydalaning - lekin bu safar bu ikki rangning qatlamlari orasida. Natijada qorong'u joydan yorug'likka o'tish effekti bo'ladi.

      Asosiy nuqtalarni chizish. Spriteda eng yorug'lik tushadigan joy diqqatga sazovordir. Agar siz asosiy rangdan bir oz engilroq rangni olsangiz, ta'kidlashni chizishingiz mumkin. Asosiysi, chaqnab ketmaslik, chalg'itadi.

   6-qism

   Biz ilg'or chizish texnikasidan foydalanamiz

   Yupqalashdan foydalaning. Ushbu texnika soyaning o'zgarishini etkazishi mumkin. Yupqalash bilan siz piksellar o'rnini o'zgartirib, bir nechta ranglar bilan gradient effektini qayta yaratishingiz mumkin, bu esa o'tish effektini yaratadi. Ikki xil rangdagi piksellarning soni va joylashuvi ko'zni turli xil soyalarni ko'rishga undaydi.

   • Yangi boshlanuvchilar ko'pincha noziklikni suiiste'mol qiladilar, ular kabi bo'lmang.

   1. Anti-aliasing (kontur tartibsizliklarini bartaraf etish) haqida unutmang. Ha, piksel san'atining tashrif qog'ozi tasvirning ko'rinadigan "pikselatsiyasi" dir. Biroq, ba'zida siz chiziqlar bir oz kamroq sezilarli, biroz silliqroq ko'rinishini xohlaysiz. Bu erda antialiasing yordamga keladi.

      • Egri chiziqning burmalariga oraliq ranglar qo'shing. O'zingiz tekislamoqchi bo'lgan egri kontur atrofida bir qatlam oraliq rangni bo'yang. Agar u hali ham burchakli ko'rinsa, boshqa qatlam qo'shing, bu safar engilroq.
      • Agar siz sprite fonga aralashishini istasangiz, spraytning tashqi chetida antialiasing ishlatmang.

   2. Tanlangan renderdan foydalanishni o'rganing. Gap shundaki: kontur to'ldirish uchun ishlatiladigan rangga o'xshash rang bilan chizilgan. Natijada, konturning yanada real ko'rinishi tufayli kamroq "multfilmli" tasvir paydo bo'ladi. Aytaylik, kiyim yoki narsalar uchun klassik qora konturni qoldirib, terini tanlab ko'ring.

Pixel Art yoki piksel grafikasi - bu piksel pikselli rastr muharrirlarida yaratilgan raqamli rasm. Piksel tasvirning eng kichik grafik elementidir. Boshqacha qilib aytganda, bu nuqta. Va barcha pikselli chizmalar go'yo yomon chizilgandek, bir oz notekis bo'lib chiqadigan son-sanoqsiz nuqta to'planishidan iborat. Ammo bu kabi rasmlarning go'zalligi.

Bir oz tarix

Zamonaviy piksel san'atini yaratish uchun qanday dasturlardan foydalanishingiz mumkin?

Ko'plab bepul rastr muharrirlari mavjud. Lekin ko'pincha Microsoft Paint va Adobe Photoshop deb ataladi. To'g'ri, Paint Adobe Photoshop-ga qaraganda pikselli tasvirni yaratish uchun qulayroq vosita hisoblanadi. Nega? Ushbu dasturda:
tasvirlarning tekisligi va simmetriyasiga erishish juda qiyin;
ularni jpg formatida saqlashda ranglarning jiddiy buzilishi sodir bo'ladi;
Soyalar va yorug'liklarni chizish qiyin.
Shuning uchun ular Adobe Photoshop-ga ustunlik berishga harakat qilishadi. Bu dastur Paint-ga qaraganda ancha ko'p ishlash imkoniyatlariga ega. Bu sizga oddiy dizaynlar bilan individual belgilarni emas, balki butun rasmlarni chizish imkonini beradi. Bundan tashqari, piksel san'atining o'zini bu erda tahrirlash osonroq va tezroq. Ha, va siz Adobe Photoshop-da rang o'tishlarini muammosiz va tabiiy ravishda o'tkazishingiz mumkin.

Pixel Art-da burilishni qanday oldini olish mumkin

Pixel art - bu kvadrat yoki to'rtburchaklar "nuqta" bo'lgan piksellar to'plami. Bunday "nuqtalardan" rasm chizilganda, u burchakka aylanadi va chiziqlardagi silliqlik yo'qoladi. Bir tomondan, bu Pixel Art-ning tashrif qog'ozi, lekin boshqa tomondan, men ko'proq silliqlikni xohlayman, bu esa rasmni foydalanuvchi uchun toza va jozibali qiladi. Piksel rassomlari tilida bu muammo kinks yoki "jaggies" deb ataladi.
Jaggies - har qanday chiziqlarga jingalak ko'rinish beradigan qismlar. Ular odatda quyidagi usullardan biri bilan yo'q qilinadi:
adashgan chiziq segmentini uzunligi bo'yicha 2, 3 yoki undan ortiq pikselga oshirish;
taniqli sohada piksellarning uzunligini qisqartirish;
bir nechta bitta pikseldan yangi chiziq qismini qurish;
uzunroq "nuqtalar" orasidagi tanaffus bilan maydonga bitta piksel qo'shing.
Burilishni to'g'ri yo'q qilish uchun siz asosiy qoidani eslab qolishingiz kerak: egri chiziq elementlarining uzunligi asta-sekin kamayishi yoki oshishi kerak. Shuni ham yodda tutish kerakki, chiziq segmentini balandlikda ikki yoki undan ortiq pikselga siljitish silliqlikning buzilishiga olib keladi.
Shuning uchun doimiy chizish amaliyoti kerak. Burilishni oldini olishga yordam beradigan oddiy va vizual yordam sifatida siz eğimli to'g'ri chiziqlar to'plamidan foydalanishingiz mumkin.

Pixel Art-da soyani qanday olish mumkin

Piksel san'atining yana bir muhim jihati uning hajmi. Bunga, boshqa grafik variantlarda bo'lgani kabi, yorug'lik va soyalar orqali erishiladi. Piksel san'atida soya yaratish uchun sizga yorug'likdan to'q rangga yoki bir rangdan ikkinchisiga silliq o'tish kerak bo'ladi. Ushbu ta'sirga erishish uchun aralashtirish texnologiyasi ko'pincha ishlatiladi - dithering. Boshqacha qilib aytadigan bo'lsak, ikkita rang chegarasida ular shashka naqshida aralashtiriladi. Bu usul gullar tanqisligi fonida paydo bo'ldi. Shaxmat taxtasida ikkita rangni aralashtirib, palitrada bo'lmagan uchinchisini olish mumkin edi.
Biroq, palitrasi sezilarli darajada kengayganidan so'ng, dithering texnologiyasi hali ham talabda qolmoqda. Ammo shuni yodda tutish kerakki, bir pikselli kenglikdagi bir rangdan ikkinchisiga o'tish yaxshi ko'rinmaydi. Bu shunchaki taroq bo'lib chiqadi. Shunung uchun
minimal aralashtirish zonasi kamida ikki piksel bo'lishi kerak. Va bu o'tish qanchalik keng bo'lsa, shuncha yaxshi.
Shuningdek, soya yaratishda:
Ob'ektga yorug'lik qaysi burchakda va qaysi tomondan tushishini aniqlash muhimdir. Bu chizmani "jonli" qiladi, shuningdek, soyani qaerga chizish kerakligini tushunishga yordam beradi. Misol uchun, agar yorug'lik o'ngdan kelsa, u holda soya joylari chap tomonda joylashgan bo'ladi va hokazo;
siz asosiy ranglardan ancha quyuqroq ranglardan foydalanishingiz kerak. Bular. soya soyali maydonning o'zidan quyuqroq ranglar yordamida tasvirlangan bo'lishi kerak. Misol uchun, agar ob'ekt qizil bo'lsa, unda uning soyasi bordo yoki to'q jigarrang bo'ladi;
qisman soya haqida unutmang. Shu maqsadda palitradagi asosiy rang va soya rangi o'rtasida joylashgan soya tanlanadi. Ushbu soya bu ikki rangning qatlamlari orasiga joylashtirilgan. Natijada, qorong'u joydan engilroq joyga silliq o'tish effekti yaratiladi.

Piksel san'atida diqqatga sazovor joylarni qanday olish mumkin

Ajratish, xuddi soya kabi, chizilgan ob'ektlarga hajm beradi. U har doim yorug'lik tushadigan tomonda bo'ladi. Ammo agar ob'ekt porloq yuzaga ega bo'lishi kerak bo'lsa, masalan, chinni chashka, po'lat qilich va boshqalar, u holda soyali maydonda ham ta'kidlash kerak bo'ladi.
Yorug'lik tushadigan joyda ta'kidlashni yaratish uchun siz asosiysidan ancha engilroq bo'lgan bo'yoq olishingiz kerak. Shunchaki bu joyning yorqinligi haqida g'ayratli bo'lmang - bu tabiiy bo'lib chiqmasligi mumkin. Ko'pincha ta'kidlash oq rangda o'tishsiz tasvirlangan. Bu tabiatda sodir bo'lmaydi. Va ob'ekt tekis ko'rinadi.
Soyaning yonidan ta'kidlashni yaratish uchun sizga soyaning o'zi qo'llaniladigan rangdan engilroq rang kerak bo'ladi. Va bu holda, bir vaqtning o'zida bir nechta soyalarni qo'llash orqali erishish mumkin bo'lgan silliq o'tish ham kerak.
Bularning barchasini amalga oshirish uchun, albatta, amaliyot kerak. Va oddiy narsalardan boshlash yaxshidir.

6-qism: Antialiasing
7-qism: Teksturalar va xiralashtirish
8-qism: Plitkalar dunyosi

Muqaddima

Piksel san'atining ko'plab ta'riflari mavjud, ammo bu erda biz bundan foydalanamiz: agar tasvir butunlay qo'lda yaratilgan bo'lsa, piksel san'ati hisoblanadi va chizilgan har bir pikselning rangi va joylashuvi ustidan nazorat mavjud. Albatta, piksel san'atida cho'tkalar yoki xiralashtirish vositalari yoki buzilgan mashinalarni kiritish yoki ishlatish (aniq emas) va "zamonaviy" bo'lgan boshqa dasturiy ta'minot variantlari biz tomonidan foydalanilmaydi (aslida bizning ixtiyorimizda "bizning ixtiyorimizda" degan ma'noni anglatadi. , lekin mantiqan bu tarzda to'g'riroq ko'rinadi). Bu qalam va plomba asboblari bilan cheklangan.

Biroq, pikselli san'at yoki piksel bo'lmagan grafika ko'proq yoki kamroq chiroyli deb ayta olmaysiz. Piksel san'ati boshqacha va retro uslubidagi o'yinlar uchun (masalan, Super Nintendo yoki Game Boy) uchun yaxshiroq ekanligini aytish adolatli. Gibrid uslub yaratish uchun siz bu yerda oʻrganilgan texnikalarni piksel boʻlmagan sanʼat effektlari bilan ham birlashtira olasiz.

Shunday qilib, bu erda siz piksel san'atining texnik qismini o'rganasiz. Biroq, men sizni hech qachon rassom qilmayman... oddiy sababga ko'ra, men ham rassom emasman. Men sizga na inson anatomiyasini, na san'atning tuzilishini o'rgataman va istiqbol haqida ozgina gapiraman. Ushbu qo'llanmada siz pikselli san'at texnikasi haqida ko'p ma'lumotlarni topishingiz mumkin. Oxir-oqibat, e'tibor berish, muntazam ravishda mashq qilish va berilgan maslahatlarni qo'llash sharti bilan siz o'yinlaringiz uchun belgilar va manzara yaratishingiz kerak.

- Shuni ham ta'kidlashni istardimki, ushbu o'quv qo'llanmada foydalanilgan rasmlarning faqat ba'zilari kattalashtirilgan. Kattalashtirilmagan tasvirlar uchun, ularni batafsil o'rganishingiz uchun ushbu rasmlarni nusxalashga vaqt ajratsangiz yaxshi bo'lardi. Piksel san'ati piksellarning mohiyatidir, ularni uzoqdan o'rganish foydasizdir.

Oxir-oqibat, ushbu qo'llanmani yaratishda menga qo'shilgan barcha rassomlarga rahmat aytishim kerak: Shin, iflos ishi va chiziqli san'ati uchun, Ksenohidrogen, ranglar dahosi uchun, Lunn, istiqbolni bilishi uchun, va Panda, qattiq Ahruon, Dayo va Kryon ushbu sahifalarni tasvirlashda qo'shgan saxiy hissalari uchun.

Shunday ekan, gapimga qaytmoqchiman.

1-qism: To'g'ri vositalar

Yomon xabar: siz bu qismda bitta piksel ham chizolmaysiz! (Va bu uni o'tkazib yuborishga sabab emas, to'g'rimi?) Agar men yomon ko'radigan ibora bo'lsa, bu "yomon asboblar yo'q, faqat yomon ishchilar". Men aslida hech narsa haqiqatdan uzoqroq bo'lishi mumkin emas deb o'yladim (ehtimol "sizni o'ldirmaydigan narsa sizni kuchliroq qiladi" bundan mustasno) va piksel san'ati juda yaxshi tasdiq. Ushbu qo'llanma sizni piksel san'atini yaratishda ishlatiladigan turli xil dasturlar bilan tanishtirish va to'g'ri dasturni tanlashda yordam berishga qaratilgan.

1. Ba'zi eski narsalar

Piksel san'atini yaratish uchun dasturiy ta'minotni tanlashda odamlar ko'pincha shunday deb o'ylashadi: "Dasturiy ta'minotni tanlashmi? Bu jinnilik! Piksel sanʼatini yaratish uchun bizga faqat boʻyoq kerak boʻladi!(Aftidan, soʻz ustida oʻyin, chizma va dastur)” Fojiali xato: Men yomon asboblar haqida gapirdim, bu birinchisi. Paintning bitta afzalligi bor (va faqat bitta): agar siz Windows bilan ishlayotgan bo'lsangiz, u sizda allaqachon mavjud. Boshqa tomondan, u juda ko'p kamchiliklarga ega. Bu (to'liq bo'lmagan) ro'yxat:

*Bir vaqtning o'zida bir nechta faylni ocholmaysiz
* Palitrani boshqarish yo'q.
* Qatlamlar yoki shaffoflik yo'q
* To'rtburchak bo'lmagan tanlovlar yo'q
* Bir nechta tezkor tugmalar
* Juda noqulay

Qisqasi, Paint haqida unutishingiz mumkin. Endi biz haqiqiy dasturiy ta'minotni ko'rib chiqamiz.

2. Oxirida...

Keyin odamlar shunday deb o'ylashadi: "Yaxshi, Paint men uchun juda cheklangan, shuning uchun men minglab xususiyatlarga ega do'stim Photoshop (yoki Gimp yoki PaintShopPro, ular bir xil narsa) dan foydalanaman." Bu yaxshi yoki yomon bo'lishi mumkin: agar siz ushbu dasturlardan birini allaqachon bilsangiz, pikselli tasvirni yaratishingiz mumkin (avtomatik antialiasing uchun barcha imkoniyatlar o'chirilgan va ko'plab rivojlangan xususiyatlar o'chirilgan). Agar siz ushbu dasturlarni hali bilmagan bo'lsangiz, unda siz ularni o'rganishga ko'p vaqt sarflaysiz, garchi ularning barcha funksiyalari sizga kerak bo'lmasa ham, bu vaqtni behuda sarflashga olib keladi. Muxtasar qilib aytganda, agar siz ulardan uzoq vaqtdan beri foydalanayotgan bo'lsangiz, siz pikselli san'at yaratishingiz mumkin (men o'zim Photoshop-dan odat bo'lmagan holda foydalanaman), lekin aks holda, pikselli san'atga ixtisoslashgan dasturlardan foydalanganingiz ma'qul. Ha, ular mavjud.

3. Krem

Piksel san'ati uchun mo'ljallangan ko'proq dasturlar mavjud, ammo bu erda biz faqat eng yaxshisini ko'rib chiqamiz. Ularning barchasi juda o'xshash xususiyatlarga ega (palitrani boshqarish, plitkalarni oldindan ko'rishni takrorlash, shaffoflik, qatlamlar va boshqalar). Ularning farqlari qulaylik ... va narxda.

Charamaker 1999 yaxshi dastur, lekin tarqatish to'xtatilganga o'xshaydi.

Graphics Gale ancha qiziqarli va ulardan foydalanish oson va u 20 dollar atrofida sotiladi, bu unchalik yomon emas. Shuni qo'shimcha qilishim kerakki, sinov versiyasi vaqt bilan cheklanmagan va juda yaxshi grafikalar yaratish uchun etarli to'plam bilan birga keladi. Bu shunchaki .gif bilan ishlamaydi, bu unchalik muammo emas, chunki baribir .png yaxshiroq.

Piksel san'atkorlari tomonidan ko'proq foydalaniladigan dastur ProMotion bo'lib, u Graphics Gale-ga qaraganda (aniq) qulayroq va tezroq. Ha, u aziz! Toʻliq versiyani kamtarona pulga sotib olishingiz mumkin... 50 yevro (78 dollar).
Mac do'stlarimizni unutmaylik! Pixen - bu Macintosh uchun yaxshi dastur va u bepul. Afsuski, men sizga ko'proq ma'lumot bera olmayman, chunki menda Mac yo'q. Tarjimonning eslatmasi (frantsuz tilidan): Linux foydalanuvchilari (va boshqalar) ni va GrafX2 ni sinab ko'rishlari kerak. Men sizni ularning barchasini demo versiyalarida sinab ko'rishingizni va qaysi biri sizga mos kelishini ko'rishingizni so'rayman. Oxir-oqibat, bu ta'mga bog'liq. Bilingki, dasturdan foydalanishni boshlaganingizdan so'ng, boshqa narsaga o'tish juda qiyin bo'ladi.

Davomi bor…

Tarjimonning frantsuz tilidan ingliz tiliga eslatmalari

Bu LesForges.org saytidan Fil Razorbak tomonidan yozilgan piksel san'ati bo'yicha ajoyib qo'llanma. Phil Razorbackga OpenGameArt.org ga ushbu qoʻllanmalarni tarjima qilish va shu yerda joylashtirishga ruxsat bergani uchun katta rahmat. (Rus tiliga tarjimondan: men ruxsat so'ramadim, agar kimdir xohlasa, yordam bera olasiz, menda ingliz tilida muloqot qilish tajribam yo'q, frantsuzcha kamroq).

Ingliz tilidan rus tiliga tarjimonning eslatmasi

Men dasturchiman, rassom yoki tarjimon emas, men rassom do'stlarim uchun tarjima qilaman, lekin nima yaxshilik zoe ketsa, shu yerda bo'lsin.
Fransuz tilidagi asl nusxasi bu yerda www.lesforges.org
Fransuz tilidan ingliz tiliga tarjimasi bu yerda: opengameart.org/content/les-forges-pixel-art-course
Men frantsuz tilini bilmaganim uchun ingliz tilidan tarjima qildim.
Ha, bu mening birinchi nashrim, shuning uchun dizayn takliflari qabul qilinadi. Bundan tashqari, meni savol qiziqtiradi: qolgan qismlar alohida maqola sifatida nashr etilishi kerakmi yoki buni yangilash va to'ldirish yaxshiroqmi?

Adobe Photoshop: Pixel Art texnikasidan foydalangan holda personajni chizish va jonlantirish

Ushbu darsda siz Pixel Art texnikasidan foydalangan holda qahramonlarni qanday chizish va jonlantirishni o'rganasiz. Buning uchun sizga faqat Adobe Photoshop kerak bo'ladi. Natijada yugurayotgan astronavt bilan GIF bo'ladi.

Dastur: Adobe Photoshop Qiyinchilik: boshlanuvchilar, o'rta daraja Kerakli vaqt: 30 daqiqa – soat

I. Hujjat va asboblarni sozlash

1-qadam

Asboblar panelidan Qalamni tanlang - bu bizning darsimiz uchun asosiy vosita bo'ladi. Sozlamalarda Hard Round cho'tka turini tanlang va rasmdagi kabi qolgan qiymatlarni o'rnating. Bizning maqsadimiz qalam uchini iloji boricha o'tkir qilishdir.

2-qadam

Eraser Tool (oʻchirgich) sozlamalarida Qalam rejimini tanlang va rasmda koʻrsatilganidek, qolgan qiymatlarni oʻrnating.

3-qadam

Pixel Grid-ni yoqing (Ko'rish > Ko'rsatish > Pixel Grid). Agar menyuda bunday element bo'lmasa, sozlamalarga o'ting va grafik tezlashtirishni yoqing Preferences > Performance > Graphic acceleration.

Esda tuting: To‘r faqat 600% yoki undan ko‘proq kattalashtirilganda yangi yaratilgan tuvalda ko‘rinadi.

4-qadam

Preferences > General (Control-K) bo'limida tasvir interpolyatsiyasi rejimini eng yaqin qo'shni rejimiga o'zgartiring. Bu ob'ektlarning chegaralarini iloji boricha aniq saqlashga imkon beradi.

Birliklar va o'lchagichlar sozlamalarida o'lchagich birliklarini piksellar uchun Sozlamalar > Birliklar va o'lchagichlar > Piksellarga o'rnating.

II. Qahramon yaratish

1-qadam

Va endi hamma narsa o'rnatildi, biz to'g'ridan-to'g'ri xarakterni chizishga o'tishimiz mumkin.

Xarakteringizni aniq kontur bilan chizing, uni mayda detallar bilan ortiqcha yuklamaslikka ehtiyot bo'ling. Ushbu bosqichda rang umuman muhim emas, asosiysi, kontur aniq chizilgan va siz xarakter qanday ko'rinishini tushunasiz. Ushbu eskiz ushbu dars uchun maxsus tayyorlangan.

2-qadam

Control+T klaviatura yorlig'i yoki Tahrirlash > Erkin o'zgartirish tugmalari yordamida eskiz masshtabini balandlikda 60 pikselgacha kamaytiring.

Ob'ektning o'lchami ma'lumot panelida ko'rsatiladi. Iltimos, interpolyatsiya sozlamalari biz 4-bosqichda bo'lgani kabi ekanligini unutmang.

3-qadam

Ishlashni osonlashtirish va qatlamning shaffofligini kamaytirish uchun eskizni 300-400% ga kattalashtiring. Keyin yangi qatlam yarating va Qalam vositasi yordamida eskizning konturlarini chizing. Agar belgi nosimmetrik bo'lsa, bizning holatimizda bo'lgani kabi, siz faqat yarmini ajratib ko'rsatishingiz mumkin, so'ngra uni ko'paytirishingiz va uni oyna sifatida aylantirishingiz mumkin (Tahrirlash > O'zgartirish > Gorizontalni aylantirish).

Ritm: Murakkab elementlarni chizish uchun ularni qismlarga bo'ling. Chiziqdagi piksellar (nuqtalar) 1-2-3 yoki 1-1-2-2-3-3 kabi “ritm” hosil qilganda, eskiz inson koʻziga silliqroq koʻrinadi. Ammo, agar shakl talab qilsa, bu ritm buzilishi mumkin.

4-qadam

Kontur tayyor bo'lgach, siz asosiy ranglarni tanlashingiz va katta shakllarni bo'yashingiz mumkin. Buni kontur ostidagi alohida qatlamda bajaring.

5-qadam

Ichki chekka bo'ylab soya chizish orqali konturni tekislang.

Soya qo'shishda davom eting. Siz chizganingizda sezganingizdek, ba'zi shakllarni tuzatish mumkin.

6-qadam

Yorqin joylar uchun yangi qatlam yarating.

Qatlamlar panelidagi ochiladigan ro'yxatdan Overlay aralashtirish rejimini tanlang. Belgilamoqchi bo'lgan joylarni ochiq rang bilan bo'yash. Keyin Filtr > Xiralashtirish > Xiralashtirish yordamida ta’kidlangan joylarni tekislang.

Rasmni to'ldiring, so'ngra rasmning tugagan yarmini nusxalang va aks ettiring, so'ngra butun rasmni yaratish uchun qatlamlarni yarmi bilan birlashtiring.

7-qadam

Endi astronavt kontrastni qo'shishi kerak. Yorqinroq qilish uchun Darajalar sozlamalaridan foydalaning (Rasm > Sozlamalar > Darajalar) va keyin Rang balansi opsiyasidan foydalanib rangni sozlang (Rasm > Sozlamalar > Rang balansi).

Qahramon endi animatsiyaga tayyor.

III. Belgilar animatsiyasi

1-qadam

Qatlamning nusxasini yarating (Layer > New > Layer Via Copy) va uni 1 piksel yuqoriga va 2 piksel o'ngga siljiting. Bu xarakter animatsiyasida asosiy nuqta.

Oldingi ramkani ko'rishingiz uchun asl qatlamning shaffofligini 50% ga kamaytiring. Bu "Piyoz qobig'i" (ko'plik holati) deb ataladi.

2-qadam

Endi qahramoningizning qo'llari va oyoqlarini xuddi yugurayotgandek buking.

● Lasso vositasi bilan chap qo'lni tanlang

● FreeTransformTool (Tahrirlash > FreeTransform) dan foydalanib va ​​Boshqarish tugmachasini bosib ushlab turing, idishning chegaralarini qo‘l orqaga siljitadigan tarzda siljiting.

● Avval bir oyog'ini tanlang va uni bir oz cho'zing. Keyin boshqa oyog'ini aksincha siqib qo'ying, shunda u xarakterning yurganini his qiladi.

● Qalam va silgidan foydalanib, o'ng qo'lingizning tirsagi ostidagi qismini sozlang.

3-qadam

Endi siz ushbu darsning ikkinchi qismida ko'rsatilganidek, qo'l va oyoqlarning yangi holatini butunlay qayta chizishingiz kerak. Bu tasvir aniq ko'rinishini ta'minlash uchun kerak, chunki transformatsiya piksel chiziqlarini sezilarli darajada buzadi.

4-qadam

Ikkinchi qatlamning nusxasini yarating va uni gorizontal ravishda aylantiring. Endi sizda 1 ta asosiy poza va 2 ta harakat bor. Barcha qatlamlarning shaffofligini 100% ga tiklang.

5-qadam

Vaqt jadvali panelini ko'rsatish uchun Oyna > Vaqt jadvaliga o'ting va Kadrlar animatsiyasini yaratish tugmasini bosing.

Pixel Art (Pixel graphics) hozirgi kunlarda ham o'yinlar uchun juda mashhur va buning bir qancha sabablari bor!

Shunday qilib, nima Pixel Art-ni o'ziga jalb qiladi:

1. Idrok. Pixel Art ajoyib ko'rinadi! Spritedagi har bir alohida piksel haqida ko'p gapirish mumkin.
2. Nostalji. Pixel Art Nintendo, Super Nintendo yoki Genesis (men kabi!) o'ynagan o'yinchilar uchun ajoyib nostaljik tuyg'uni qaytaradi.
3. O'rganish oson. Pixel Art - bu raqamli san'atning eng oson o'rganish shakllaridan biri, ayniqsa siz rassomdan ko'ra ko'proq dasturchi bo'lsangiz;]

Shunday qilib, Pixel Art-da o'z kuchingizni sinab ko'rmoqchimisiz? O'z o'yiningizda foydalanishingiz mumkin bo'lgan oddiy, ammo samarali o'yin xarakterini qanday yaratishni ko'rsatayotganim uchun men bilan birga bo'ling! Bundan tashqari, bonus sifatida biz uni iPhone o'yinlariga qanday qo'shishni ko'rib chiqamiz!

Muvaffaqiyatli o'rganish uchun sizga Adobe Photoshop kerak bo'ladi. Agar sizda yo'q bo'lsa, Adobe veb-saytidan yoki torrentdan bepul sinov versiyasini yuklab olishingiz mumkin.

Pixel Art nima?

Boshlashdan oldin, keling, Pixel Art nima ekanligini aniqlab olaylik, chunki bu siz o'ylagandek ravshan emas. Pixel Art nima ekanligini aniqlashning eng oson yo'li bu nima emasligini aniqlashdir, ya'ni: piksellar avtomatik ravishda yaratilgan har qanday narsa. Mana bir nechta misollar:

Gradient: Ikki rangni tanlang va ular orasidagi piksellar rangini hisoblang. Ajoyib ko'rinadi, lekin bu Pixel Art emas!

Xiralashtirish vositasi: Oldingi tasvirning yangi versiyasini yaratish uchun piksellarni aniqlash va ularni takrorlash/tahrirlash. Shunga qaramay, piksel san'ati emas.

Silliq vosita(asosan, biror narsani "silliq" qilish uchun turli xil ranglarda yangi piksellarni yaratish). Siz ulardan qochishingiz kerak!

Ba'zilar, hatto avtomatik ravishda yaratilgan ranglar ham Pixel Art emas, deyishadi, chunki ular effektlarni aralashtirish uchun qatlamni talab qiladi (ma'lum bir algoritmga muvofiq ikkita qatlam o'rtasida piksellarni aralashtirish). Ammo bugungi kunda aksariyat qurilmalar millionlab ranglar bilan ishlayotganligi sababli, bu bayonotni e'tiborsiz qoldirib bo'lmaydi. Biroq, bir nechta ranglardan foydalanish Pixel Art-da yaxshi amaliyotdir.

Kabi boshqa vositalar (chiziq) yoki bo'yoq paqir vositasi(Paint Bucket) ham avtomatik ravishda piksellarni hosil qiladi, lekin siz ularni toʻldirgan piksellaringizga qarama-qarshi laqab qoʻymaslik uchun oʻrnatishingiz mumkinligi sababli, bu vositalar Pixel Art uchun qulay hisoblanadi.

Shunday qilib, biz Pixel Art har bir pikselni spritega joylashtirishda ko'pincha qo'lda va cheklangan ranglar palitrasi bilan katta e'tibor talab qilishini aniqladik. Endi ishga kirishaylik!

Ishning boshlanishi

Birinchi Pixel Art aktivingizni yaratishni boshlashdan oldin, Pixel Art-ni o'lchash mumkin emasligini bilishingiz kerak. Agar siz uni kamaytirishga harakat qilsangiz, hamma narsa loyqa ko'rinadi. Agar siz uni kattalashtirishga harakat qilsangiz, ikkita kattalashtirishdan foydalansangiz, hamma narsa yaxshi ko'rinadi (lekin, albatta, keskin bo'lmaydi).

Ushbu muammoning oldini olish uchun, avvalo, o'yin xarakteringiz yoki o'yin elementingiz qanchalik katta bo'lishini xohlayotganingizni tushunib olishingiz va keyin ishga kirishingiz kerak. Ko'pincha bu siz mo'ljallangan qurilmaning ekran o'lchamiga va qancha "piksel" ko'rmoqchi ekanligingizga asoslanadi.

Misol uchun, agar siz o'yinni iPhone 3GS ekranida ikki baravar kattaroq ko'rinishini xohlasangiz ("Ha, men o'z o'yinimga pikselli retro ko'rinishni bermoqchiman!"), uning ekran o'lchamlari 480x320 piksel bo'lsa, unda sizga kerak bo'ladi. yarim o'lcham bilan ishlang, bu holda u 240x160 piksel bo'ladi.

Yangi Photoshop hujjatini oching ( Fayl → Yangi…) va o'yin ekraningiz qanday o'lchamda bo'lishidan qat'iy nazar o'lchamni o'rnating, so'ngra xarakteringiz uchun o'lchamni tanlang.

Har bir hujayra 32x32 pikseldan iborat!

Men 32x32 pikselni nafaqat tanlangan ekran oʻlchamiga toʻliq mos kelgani uchun, balki 32x32 piksel ham 2 ga karrali boʻlgani uchun ham tanladim, bu oʻyinchoq dvigatellari uchun qulaydir (plitka oʻlchamlari koʻpincha 2 ga karrali, teksturalar 2 ga koʻpaytiriladi, va boshqalar.

Agar siz foydalanayotgan vosita istalgan tasvir hajmini qo'llab-quvvatlasa ham, siz har doim teng sonli piksellar bilan ishlashga urinib ko'rishingiz mumkin. Bunday holda, agar tasvirni masshtablash kerak bo'lsa, o'lcham yaxshiroq bo'linadi, bu oxir-oqibatda yaxshi ishlashga olib keladi.

Pixel Art personajini chizish

Ma'lumki, Pixel Art aniq va oson o'qiladigan grafikalar: yuz xususiyatlarini, ko'zlarini, sochlarini, tana qismlarini bir nechta nuqta bilan belgilashingiz mumkin. Biroq, tasvirning o'lchami vazifani murakkablashtiradi: sizning xarakteringiz qanchalik kichik bo'lsa, ularni chizish shunchalik qiyin bo'ladi. Amaliyroq bo'lish uchun eng kichik xarakterli xususiyatni tanlang. Men har doim ko'zlarni tanlayman, chunki ular xarakterga hayot olib kelishning eng yaxshi usullaridan biridir.

Photoshop-da tanlang Qalam vositasi(Qalam vositasi). Agar uni topa olmasangiz, asbobni bosib ushlab turing Cho'tkasi vositasi(Brush Tool) va siz uni darhol ko'rasiz (u ro'yxatda ikkinchi bo'lishi kerak). Siz shunchaki uning o‘lchamini 1px ga o‘zgartirishingiz kerak bo‘ladi (Asbob opsiyalari panelida bosishingiz va uning o‘lchamini o‘zgartirishingiz yoki [ tugmachasini bosib ushlab turishingiz mumkin).

Sizga ham kerak bo'ladi Tozalash vositasi(Eraser Tool), shuning uchun ustiga bosing (yoki E tugmasini bosing) va ochiladigan ro'yxatdan tanlash orqali uning sozlamalarini o'zgartiring Rejim:(Rejim :) Qalam(Qalam) (chunki bu rejimda anti-aliasing mavjud emas).

Endi piksellashni boshlaymiz! Quyidagi rasmda ko'rsatilganidek, qoshlar va ko'zlarni chizing:

ey! Men pikselliman !!

Siz allaqachon Lineart bilan boshlashingiz mumkin, ammo yanada amaliy usul - xarakterning siluetini chizish. Yaxshi xabar shundaki, bu bosqichda professional bo'lish shart emas, shunchaki tana qismlarining o'lchamini (bosh, gavda, qo'llar, oyoqlar) va personajning boshlang'ich pozasini tasavvur qilishga harakat qiling. Kul rangda shunga o'xshash narsani sinab ko'ring:

Ushbu bosqichda professional bo'lishingiz shart emas

E'tibor bering, men ham bo'sh joy qoldirdim. Siz butun tuvalni to'ldirishingiz shart emas, kelajakdagi ramkalar uchun joy qoldiring. Bunday holda, ularning barchasi uchun bir xil tuval hajmini saqlab qolish juda foydali bo'ladi.

Siluetni tugatgandan so'ng, vaqt keldi . Endi siz piksellarni joylashtirishda ehtiyot bo'lishingiz kerak, shuning uchun kiyim-kechak, zirh va hokazolar haqida qayg'urmang. Faqat xavfsiz tomonda bo'lish uchun siz asl siluetingizni hech qachon yo'qotmaslik uchun yangi qatlam qo'shishingiz mumkin.

Agar siz qalam asbobini chizish uchun juda sekin deb hisoblasangiz, har doim foydalanishingiz mumkin (Line Tool), shuni yodda tutingki, siz piksellarni qalam bilan imkon qadar aniq joylashtira olmaysiz. Siz sozlashingiz kerak bo'ladi quyida ko'rsatilgandek:

Tanlang , bosib turing To'rtburchaklar vositasi(To'rtburchaklar vositasi)

Ochiladigan ro'yxatdagi asboblar parametrlari paneliga o'ting Asboblar rejimini tanlang(Yo'lni kuzatish rejimi) Pixel ni tanlang, o'zgartiring Og'irligi(Qalinligi) 1px gacha (agar bajarilmagan bo'lsa) va belgini olib tashlang Anti-alias(Temizlash). Sizda shunday bo'lishi kerak:

E'tibor bering, men oyoqlar uchun pastki konturni qilmaganman. Bu ixtiyoriy, chunki oyoqlar ta'kidlash uchun oyoqlarning unchalik muhim qismi emas va bu tuvaldagi piksellarning bir qatorini saqlaydi.

Ranglar va soyalarni qo'llash

Endi siz bizning xarakterimizni bo'yashni boshlashga tayyormiz. To'g'ri ranglarni tanlash haqida tashvishlanmang, ularni keyinchalik o'zgartirish juda oson bo'ladi, faqat har birining "o'z rangi" borligiga ishonch hosil qiling. Yorliqdagi standart ranglardan foydalaning Swatchlar(Oyna → Swatches).

O'zingizning xarakteringizni quyidagi rasmdagi kabi ranglang (lekin ijodiy bo'ling va o'z ranglaringizdan foydalaning!)

Yaxshi, kontrastli rang sizning aktivingizning o'qilishini yaxshilaydi!

Iltimos, e'tibor bering, men hali kiyim yoki sochni tasvirlamadim. Har doim esda tuting: keraksiz konturlardan iloji boricha ko'proq piksellarni saqlang!

Har bir pikselni bo'yash uchun vaqt sarflashning hojati yo'q. Ishingizni tezlashtirish uchun bir xil rangdagi chiziqlardan foydalaning yoki Paqirni bo'yash vositasi(Paint Bucket Tool) bo'shliqlarni to'ldirish uchun. Aytgancha, siz ham uni sozlashingiz kerak bo'ladi. Tanlang Paqirni bo'yash vositasi asboblar panelida (yoki shunchaki G tugmasini bosing) va o'zgartiring Tolerantlik(Tolerantlik) 0 ga, shuningdek, belgini olib tashlang Anti-alias(Temizlash).

Agar biror marta foydalanish kerak bo'lsa Sehrli tayoqchalar vositasi(Sehrli tayoqcha vositasi) - juda foydali vosita, u bir xil rangdagi barcha piksellarni tanlaydi, keyin uni "Bo'yoq paqiri" vositasi bilan bir xil tarzda o'rnatadi - tolerantlik va anti-aliasing yo'q.

Sizdan ba'zi bilimlarni talab qiladigan keyingi qadam qochish va soya qilishdir. Agar siz yorug'lik va qorong'u tomonlarni qanday ko'rsatishni bilmasangiz, quyida men sizga qisqacha ko'rsatmalar beraman. Agar sizda uni o'rganishga vaqtingiz yoki xohishingiz bo'lmasa, bu bosqichni o'tkazib yuborib, "Palitrangizni ziravorlang" bo'limiga o'tishingiz mumkin, chunki oxirida siz o'zingizning soyangizni mening misolimdagi kabi qilishingiz mumkin!

Butun ob'ekt uchun bir xil yorug'lik manbasidan foydalaning

Unga o'zingiz xohlagan/iloji bo'lgan shakllarni berishga harakat qiling, chunki shundan keyin aktiv yanada qiziqarli ko'rinishni boshlaydi. Masalan, endi siz burunni, qovog'ini chimirgan ko'zlarni, sochlarni sovun, shimdagi burmalarni va hokazolarni ko'rishingiz mumkin. Unga bir nechta yorug'lik joylarini qo'shishingiz mumkin, u yanada yaxshi ko'rinadi:

Soya qilishda bir xil yorug'lik manbasidan foydalaning

Va endi, men va'da qilganimdek, yorug'lik va soyalar bo'yicha kichik qo'llanma:

Palitrangizni ziravor qiling

Ko'p odamlar standart palitra ranglaridan foydalanadilar, lekin ko'pchilik bu ranglardan foydalangani uchun biz ularni ko'plab o'yinlarda ko'rishimiz mumkin.

Photoshop o'zining standart palitrasida ranglarning katta tanloviga ega, ammo siz unga juda ko'p ishonmasligingiz kerak. O'zingizning ranglaringizni yaratishning eng yaxshi usuli asboblar panelining pastki qismidagi asosiy palitrani bosishdir.

Keyin, Rang tanlash oynasida rangni tanlash uchun o'ng yon panelni va kerakli yorqinlikni (ochiq yoki quyuqroq) va to'yinganlikni (yorqinroq yoki xiraroq) tanlash uchun asosiy maydonni ko'rib chiqing.

Istaganingizni topgach, OK va tugmasini bosing Paint Bucket asbobini qayta sozlang. Xavotir olmang, shundan so'ng siz shunchaki "Qo'shni" katagiga belgini olib tashlashingiz mumkin va siz yangi rang bilan bo'yashingiz bilan bir xil fon rangiga ega bo'lgan barcha yangi piksellar ham to'ldiriladi.

Bu oz sonli ranglar bilan ishlash va har doim bir xil element (ko'ylak, sochlar, dubulg'a, zirh va boshqalar) uchun bir xil rangdan foydalanish muhimligining yana bir sababidir. Ammo boshqa joylar uchun turli xil ranglardan foydalanishni unutmang, aks holda bizning chizilganimiz juda bo'yalgan bo'ladi!

Tanlangan piksellarni bir xil rang bilan to'ldirish uchun "Qo'shni" belgisini olib tashlang

Agar xohlasangiz, ranglarni o'zgartiring va xarakterning yanada jozibali rangini oling! Siz hatto konturlarni qayta bo'yashingiz mumkin, shunchaki ular fon bilan yaxshi uyg'unlashganligiga ishonch hosil qiling.

Nihoyat, fon rangi testini bajaring: xarakteringiz ostida yangi qatlam yarating va uni turli ranglar bilan to'ldiring. Bu sizning xarakteringiz yorug', qorong'i, iliq va salqin fonda ko'rinishini ta'minlash uchun kerak.

Ko'rib turganingizdek, men hozirgacha ishlatgan barcha vositalarda antialiasingni o'chirib qo'yganman. Buni boshqa vositalarda ham qilishni unutmang, masalan. Elliptik nishon(Oval marquee) va Lasso(Lasso).

Ushbu vositalar yordamida siz tanlangan qismlarning o'lchamlarini osongina o'zgartirishingiz yoki hatto ularni aylantirishingiz mumkin. Buni amalga oshirish uchun istalgan tanlash vositasidan foydalaning (yoki M tugmasini bosing) hududni tanlang, o'ng tugmasini bosing va tanlang Bepul aylantirish(Bepul aylantirish) yoki shunchaki Ctrl + T tugmalarini bosing. Tanlangan maydonning o'lchamini o'zgartirish uchun transformatsiya ramkasining perimetri atrofida joylashgan tutqichlardan birini torting. Proporsiyalarni saqlab qolgan holda tanlov hajmini o'zgartirish uchun Shift tugmachasini bosib ushlab turing va burchak tutqichlaridan birini torting.

Biroq, Photoshop yordamida tahrirlangan hamma narsani avtomatik ravishda tekislaydi Bepul aylantirish shuning uchun tahrirlashdan oldin ga o'ting Tahrirlash → Parametrlar → Umumiy(Ctrl + K) va o'zgartiring Rasm interpolyatsiyasi(Rasm interpolatsiyasi) yoqilgan Eng yaqin qo'shni(Eng yaqin qo'shni). Bir so'z bilan aytganda, qachon Eng yaqin qo'shni yangi pozitsiya va o'lcham juda qo'pol hisoblab chiqiladi, yangi ranglar yoki shaffoflik qo'llanilmaydi va siz tanlagan ranglar saqlanib qoladi.

Pixel Art-ni iPhone o'yinlariga integratsiya qilish

Ushbu bo'limda siz Cocos2d o'yin tizimidan foydalanib, pikselli san'atimizni iPhone o'yiniga qanday qo'shishni o'rganasiz. Nega men faqat iPhone haqida o'ylayapman? Chunki Unity haqidagi bir qator maqolalar tufayli (masalan: , yoki Unity 2D-dagi Jetpack Joyride uslubidagi o'yin) siz Unity-da ular bilan qanday ishlashni va Crafty (Brauzer o'yinlari: Snake) haqidagi maqolalardan allaqachon bilasiz. Impact (Impact-da brauzer o'yinlari o'yinlarini yaratishga kirish) siz ularni tuvalga qanday kiritish va brauzer o'yinlarini yaratishni o'rgandingiz.

Agar siz Cocos2D yoki umuman iPhone ilovalarini ishlab chiqishda yangi bo'lsangiz, men sizga Cocos2d va iPhone qo'llanmalaridan birini boshlashni tavsiya qilaman. Agar sizda Xcode va Cocos2d o'rnatilgan bo'lsa, o'qing!

Yangi loyiha yarating iOS → cocos2d v2.x → cocos2d iOS andozasi, uni PixelArt deb nomlang va qurilma sifatida iPhone-ni tanlang. Yaratilgan piksel tasvirini loyihangizga torting, masalan: sprite_final.png va keyin oching HelloWorldLayer.m va ishga tushirish usulini quyidagi bilan almashtiring:

-(id) init (if((self=)) ( CCSprite * qahramon =; qahramon.pozitsiya = ccp(96, 96); hero.flipX = YES; ; ) o‘zini qaytaring; )

Biz spraytni ekranning chap tomoniga joylashtiramiz va uni o'ng tomonga qaratib aylantiramiz. Kompilyatsiya qiling, ishga tushiring va keyin ekranda spraytingizni ko'rasiz:

Biroq, esda tutingki, biz ushbu qo'llanmada avvalroq muhokama qilganimizdek, biz har bir piksel boshqalardan sezilarli darajada ajralib turishi uchun piksellar shkalasini sun'iy ravishda oshirishni xohladik. Shunday qilib, ishga tushirish usuli ichida ushbu yangi qatorni qo'shing:

Hero.scale = 2.0;

Hech qanday murakkab narsa yo'q, to'g'rimi? Kompilyatsiya qiling, ishga tushiring va... kuting, bizning spraytimiz loyqa!

Buning sababi, sukut bo'yicha Cocos2d chizmani masshtablashtirganda uni tekislaydi. Bizga bu kerak emas, shuning uchun quyidagi qatorni qo'shing:

Bu chiziq Cocos2d-ni tasvirlarni antialiasingsiz o'lchamiga sozlaydi, shuning uchun bizning yigitimiz hali ham "piksellangan" ko'rinadi Kompilyatsiya qiling, ishga tushiring va... ha, u ishlaydi!

Pixel Art grafiklaridan foydalanishning afzalliklariga e'tibor bering - biz ekranda ko'rsatilganidan kichikroq tasvirni ishlatishimiz mumkin, bu esa juda ko'p tekstura xotirasini tejash imkonini beradi. Retina displeylari uchun alohida tasvirlar yaratishimiz shart emas!

Keyingisi nima?

Umid qilamanki, sizga ushbu qo'llanma yoqdi va piksel san'ati haqida bir oz ko'proq ma'lumotga ega bo'ldingiz! Ayrilishdan oldin men sizga bir nechta maslahat bermoqchiman:

• Har doim aktivlaringizda anti-aliasing, gradient yoki juda ko'p ranglardan foydalanmaslikka harakat qiling. Bu sizning manfaatingiz uchun, ayniqsa siz hali ham boshlang'ich bo'lsangiz.
• Agar siz haqiqatdan ham retro ko'rinishga taqlid qilmoqchi bo'lsangiz, 8 yoki 16 bitli konsol o'yinlaridagi san'at asariga qarang.
• Ba'zi uslublar qorong'u konturlardan foydalanmaydi, boshqalari yorug'lik yoki soyaning ta'sirini hisobga olmaydi. Hammasi uslubga bog'liq! Bizning darsimizda biz soyalarni chizmadik, lekin bu ularni ishlatmaslik kerak degani emas.

Yangi boshlanuvchilar uchun Pixel Art o'rganish uchun eng oson grafik kabi ko'rinadi, lekin aslida u ko'rinadigan darajada oddiy emas. O'z mahoratingizni oshirishning eng yaxshi usuli - bu amaliyot, mashq qilish, mashq qilish. Boshqa rassomlar sizga maslahat berishlari uchun oʻz ishingizni Pixel Art forumlarida joylashtirishni tavsiya etaman – bu texnikangizni yaxshilashning ajoyib usuli! Kichikdan boshlang, ko'p mashq qiling, fikr-mulohazalarni oling va sizga ko'p pul va quvonch keltiradigan ajoyib o'yin yaratishingiz mumkin!