Nezávislí vývojári často musia kombinovať niekoľko rolí naraz: herný dizajnér, programátor, skladateľ, umelec. A čo sa týka vizuálu, veľa ľudí volí pixel art – na prvý pohľad to vyzerá jednoducho. Ale aby ste to urobili krásne, potrebujete veľa skúseností a určité zručnosti. Našiel som návod pre tých, ktorí práve začali chápať základy tohto štýlu: s popisom špeciálneho softvéru a techník kreslenia pomocou dvoch spritov ako príkladu.
pozadia
Pixel art je forma digitálneho umenia, v ktorej sa zmeny vykonávajú na úrovni pixelov. Spája sa najmä s grafikou videohier z 80. a 90. rokov. Vtedy museli umelci počítať s pamäťovými obmedzeniami a nízkym rozlíšením. V súčasnosti je pixel art stále populárny v hrách a ako umelecký štýl vo všeobecnosti, napriek schopnosti vytvárať realistickú 3D grafiku. prečo? Odhliadnuc od nostalgie, vytváranie skvelej práce v takom úzkom rámci je príjemnou a obohacujúcou výzvou.
Bariéra vstupu do pixelového umenia je relatívne nízka v porovnaní s tradičným umením a 3D grafikou, čo priťahuje nezávislých vývojárov. To však neznamená, že to bude ľahké skončiť hra v tomto štýle. Videl som veľa nezávislých vývojárov s pixel art metroidvanias na crowdfundingových platformách. Mysleli si, že všetko stihnú do roka, no v skutočnosti potrebovali ďalších šesť rokov.
Metal Slug 3 (Arcade). SNK, 2000
Pixel art na úrovni, na ktorej ho chce väčšina ľudí vytvoriť, zaberie veľa času a krátkych návodov je veľmi málo. Pri práci s 3D modelom ho môžete otáčať, deformovať, presúvať jeho jednotlivé časti, kopírovať animácie z jedného modelu do druhého a podobne. Pixel art na vysokej úrovni si takmer vždy vyžaduje veľa úsilia na starostlivé umiestnenie pixelov na každý rám.
Vo všeobecnosti som vás varoval.
A teraz trochu k môjmu štýlu: kreslím hlavne pixel art pre videohry a nachádzam v nich inšpiráciu. Najmä som fanúšikom Famicom/NES, 16-bitových konzol a arkádových hier z 90. rokov. Pixel art mojich obľúbených hier tej doby možno opísať ako jasný, sebavedomý a čistý (ale nie príliš čistý), skôr ako ostrý a minimalistický. Toto je štýl, v ktorom pracujem, ale nápady a techniky z tohto tutoriálu môžete ľahko použiť na vytvorenie úplne iných vecí. Preskúmajte prácu rôznych umelcov a vytvorte pixelové umenie, ktoré sa vám páči!
Softvér
Základné digitálne nástroje pre pixel art sú Zoom a Ceruzka na umiestnenie pixelov. Užitočné vám budú aj Čiara, Tvar, Výber, Presunúť a Vedro farby. Existuje veľa bezplatného a plateného softvéru s takouto sadou nástrojov. Poviem vám o tých najobľúbenejších a o tých, ktoré sám používam.
Maľovanie (zadarmo)
Ak máte Windows, vstavaný Paint je primitívny program, ale má všetky nástroje pre pixel art.
(je zadarmo)
Neočakávane funkčný pixel art editor, ktorý beží cez prehliadač. Svoju prácu môžete exportovať ako PNG alebo animovaný GIF. Skvelá možnosť pre začiatočníkov.
(je zadarmo)
GraphicsGale je jediný editor, o ktorom som počul a ktorý je navrhnutý špeciálne pre pixel art a obsahuje animačné nástroje. Vytvorila ho japonská spoločnosť HUMANBALANCE. Je k dispozícii zadarmo od roku 2017 a je stále žiadaný, napriek nárastu popularity Aseprite. Bohužiaľ to funguje iba na Windows.
($)
Momentálne asi najpopulárnejší editor. , množstvo funkcií, aktívna podpora, verzie pre Windows, Mac a Linux. Ak to s pixel artom myslíte vážne a stále ste nenašli ten správny editor, môže to byť ten, ktorý potrebujete.
($$+)
GameMaker Studio 2 je vynikajúci 2D nástroj s dobrým editorom Sprite. Ak chcete vytvoriť pixel art pre svoje vlastné hry, je veľmi výhodné robiť všetko v jednom programe. Teraz pri práci používam tento softvér , kolekcia 50 retro hier: Vytváram sprity a animácie v GameMakeri a sady dlaždíc vo Photoshope.
($$$+)
Photoshop je drahý softvér, distribuovaný na základe predplatného a nie je určený pre pixel art. Neodporúčam ho kupovať, pokiaľ sa nevenujete vykresľovaniu ilustrácií vo vysokom rozlíšení, alebo nepotrebujete vykonávať zložité manipulácie s obrázkom ako ja. Môžete v ňom vytvárať statické sprity a pixel art, ale v porovnaní so špecializovaným softvérom (napríklad GraphicsGale alebo Aseprite) je to dosť zložité.
Ostatné
Moja súprava pixel art. Všetko je čierne, všimol som si to až teraz.
Grafický tablet ($$+)
Grafické tablety odporúčam na akúkoľvek digitálnu ilustráciu, aby ste sa vyhli syndrómu karpálneho tunela. Je oveľa jednoduchšie predchádzať, ako liečiť. Jedného dňa pocítiš bolesť a tá sa bude len zvyšovať - staraj sa o seba už od začiatku. Keďže som kedysi kreslil myšou, teraz mám problém hrať hry, ktoré vyžadujú stláčanie kláves. Momentálne používam Wacom Intuos Pro S.
Podpora zápästia ($)
Ak si nemôžete zaobstarať tablet, zaobstarajte si aspoň opierku zápästia. Môj obľúbený je Mueller Green Fitted Brace. Ostatné sú buď príliš tesné, alebo neposkytujú dostatočnú oporu. Posuvné meradlá je možné bez problémov objednať online.
96 96 × XNUMX XNUMX pixelov
Záverečný boj. Capcom, 1989
Začnime! Začnime znakovým spritom s rozmermi 96 x 96 pixelov. Ako príklad som nakreslil orka a umiestnil ho na snímku obrazovky z Final Fight (obrázok vyššie), aby ste pochopili mierku. Toto большой sprite pre väčšinu retro hier, veľkosť snímky obrazovky: 384 x 224 pixelov.
Na takom veľkom sprite bude jednoduchšie ukázať techniku, o ktorej chcem hovoriť. Vykresľovanie na pixel je tiež viac podobné tradičným formám umenia (ako je kreslenie alebo maľovanie), ktoré možno poznáte. Po zvládnutí základných techník prejdeme k menším škriatkam.
1. Vyberte si paletu
Pixel je oveľa hlbší koncept v pixelovom umení ako v ktorejkoľvek inej digitálnej sfére. Pixel art je definovaný svojimi obmedzeniami, ako sú farby. Je dôležité vybrať si správnu paletu, pomôže vám to určiť váš štýl. Ale na začiatku navrhujem nemyslieť na palety a vybrať si jednu z existujúcich (alebo len niekoľko náhodných farieb) - môžete ju ľahko zmeniť v ktorejkoľvek fáze.
Pre tento tutoriál použijem paletu 32 farieb, pre ktorú sme vytvorili . Pre pixel art sú často zostavené z 32 alebo 16 farieb. Naša je určená pre fiktívnu konzolu, ktorá by sa objavila niekde medzi Famicom a PC Engine. Môžete si vziať to alebo akékoľvek iné - návod vôbec nezávisí od zvolenej palety.
2. Hrubé obrysy
Začnime kresliť pomocou nástroja Ceruzka. Nakreslíme náčrt rovnakým spôsobom, ako to robíme obyčajným perom a papierom. Samozrejme, pixel art a tradičné umenie sa prekrývajú, najmä pokiaľ ide o takéto veľké škriatky. Moje pozorovania ukazujú, že silní umelci v oblasti pixel artu sú prinajmenšom dobrí v kreslení ručne a naopak. Takže rozvíjať svoje zručnosti v kreslení je vždy užitočné.
3. Vypracovanie obrysov
Zjemňujeme obrysy: odstráňte extra pixely a zmenšite hrúbku každej čiary na jeden pixel. Čo presne sa však považuje za nadbytočné? Ak chcete odpovedať na túto otázku, musíte pochopiť pixelové čiary a nepravidelnosti.
Nezrovnalosti
Musíte sa naučiť kresliť dve základné čiary v pixel art: rovnú a zakrivenú. S perom a papierom je to všetko o kontrole svalov, ale pracujeme s malými blokmi farieb.
Kľúčom k nakresleniu správnych pixelových čiar je zubatosť. Sú to jednotlivé pixely alebo malé segmenty, ktoré ničia hladkosť čiary. Ako som už povedal, jeden pixel robí obrovský rozdiel v pixelovom umení, takže nerovnomernosť môže zničiť celú estetiku. Predstavte si, že na papier nakreslíte rovnú čiaru a zrazu niekto udrie do stola: hrbolčeky v pixelovom umení vyzerajú ako náhodná vlnovka.
Príklady:
Priame
Krivky
Nepravidelnosti sa objavujú v krivkách, keď sa dĺžka úsečiek nezväčšuje alebo nezmenšuje postupne.
Nemožno sa úplne vyhnúť hrbolčekom – všetky vaše obľúbené retro hry ich majú (samozrejme, pokiaľ pixel art pozostáva výlučne z jednoduchých tvarov). Cieľ: Udržať nerovnosti na minime a zároveň ukázať všetko potrebné.
4. Naneste prvé farby
Vyfarbite svoju postavu pomocou výplne alebo iného vhodného nástroja. Paleta túto časť práce zjednoduší. Ak softvér neumožňuje použitie paliet, môžete ich umiestniť priamo do obrázka, ako v príklade vyššie, a vybrať farby pomocou kvapkadla.
V ľavom dolnom rohu som nakreslil nášho priateľa, stretni sa, toto je Ball. Uľahčí to pochopenie toho, čo sa presne deje v každej fáze.
5. Tieňovanie
Je čas zobraziť tiene - stačí pridať tmavšie farby na sprite. Vďaka tomu bude obrázok vyzerať trojrozmerne. Predpokladajme, že máme jeden zdroj svetla umiestnený nad orkom naľavo od neho. To znamená, že všetko, čo je nad a pred našou postavou, bude osvetlené. Vpravo dole pridajte tiene.
Forma a objem
Ak je pre vás tento krok náročný, predstavte si svoju kresbu skôr ako trojrozmerné tvary než len čiary a farby. Tvary existujú v trojrozmernom priestore a môžu mať objem, ktorý budujeme pomocou tieňov. To vám pomôže predstaviť si postavu bez detailov a predstaviť si, že je vyrobená z hliny a nie z pixelov. Tieňovanie nie je len pridávanie nových farieb, je to proces vytvárania tvaru. Na dobre navrhnutej postave detaily nezakryjú základné tvary: ak prižmúrite oči, uvidíte niekoľko veľkých zhlukov svetla a tieňov.
Anti-aliasing (vyhladzovanie)
Zakaždým, keď použijem novú farbu, aplikujem anti-aliasing (AA). Pomáha vyhladiť pixely pridaním prechodných farieb v rohoch, kde sa stretávajú dva segmenty čiar:
Šedé pixely zjemňujú „prestávky“ v riadku. Čím dlhší je segment čiary, tým dlhší je segment AA.
Takto vyzerá AA na orkovom ramene. Je potrebné vyhladiť línie zobrazujúce krivku jeho svalov
Anti-aliasing by nemal presahovať sprite, ktorý bude použitý v hre, alebo na pozadí, ktorého farba nie je známa. Ak napríklad použijete AA na svetlé pozadie, vyhladenie bude na tmavom pozadí vyzerať škaredo.
6. Selektívna osnova
Predtým boli obrysy úplne čierne, vďaka čomu vyzeral sprite veľmi kreslený. Obraz sa zdal byť rozdelený na segmenty. Napríklad čierne čiary na ruke poskytujú príliš veľký kontrast k svalstvu, takže postava vyzerá menej súdržne.
Ak sa sprite stane prirodzenejším a segmentácia menej zreteľná, základné tvary postavy budú lepšie čitateľné. Ak to chcete urobiť, môžete použiť selektívny obrys - čiastočne nahradiť čierny obrys ľahším. Na osvetlenú časť sprita môžete použiť najsvetlejšie farby, alebo tam, kde sa sprite dotýka negatívneho priestoru, môžete obrys úplne odstrániť. Namiesto čiernej je potrebné použiť farbu, ktorá bola zvolená pre tieň - týmto spôsobom zostane zachovaná segmentácia (na rozlíšenie svalov, srsti atď.).
V tejto fáze som pridala aj tmavšie tiene. Výsledkom boli tri stupne zelenej na koži orka. Najtmavšia zelená farba môže byť použitá pre selektívny obrys a AA.
7. Záverečné úpravy
Nakoniec sa oplatí pridať zvýraznenia (najsvetlejšie miesta na sprite), detaily (náušnice, cvočky, jazvy) a ďalšie vylepšenia, kým nebude postava pripravená alebo kým nebudete musieť prejsť na ďalšiu.
V tejto fáze je možné použiť niekoľko užitočných techník. Otočte kresbu vodorovne, čo často pomáha identifikovať chyby v proporciách a tieňovaní. Môžete tiež odstrániť farbu - nastavte sýtosť na nulu, aby ste pochopili, kde je potrebné zmeniť tiene.
Vytváranie hluku (dithering, dithering)
Doteraz sme väčšinou používali veľké plochy plného tieňa. Existuje však aj iná technika - dithering, ktorá vám umožňuje prejsť z jednej farby do druhej bez pridania tretej. Pozrite si príklad nižšie.
Vrchný tmavý až svetlý gradient využíva stovky rôznych odtieňov modrej.
Priemerný prechod používa iba deväť farieb, ale stále je príliš veľa odtieňov rovnakej farby. Vzniká takzvané páskovanie (z anglického band - stripe), pri ktorom sa vďaka hrubým jednotným pruhom oko zameriava na body dotyku farieb, namiesto farieb samotných.
Na spodnom gradiente sme aplikovali dithering, ktorý zabraňuje pruhovaniu a používa iba dve farby. Vytvárame šum rôznej intenzity, aby sme simulovali gradáciu farieb. Táto technika je veľmi podobná poltónu (poltónovému obrázku), ktorý sa používa pri tlači; ako aj stippling (zrnitý obraz) - v ilustráciách a komiksoch.
Na orkovi som dosť váhal, aby som sprostredkoval textúru. Niektorí pixel artisti to vôbec nepoužívajú, iní, naopak, nie sú hanbliví a robia to veľmi zručne. Zistil som, že rozklad vyzerá najlepšie na veľkých plochách vyplnených jednou farbou (pozrite sa na oblohu na snímke Metal Slug vyššie) alebo na plochách, ktoré by mali vyzerať drsne a nerovnomerne (ako špina). Rozhodnite sa sami, ako ho použiť.
Ak chcete vidieť príklad rozsiahleho a kvalitného ditheringu, pozrite si hry britského štúdia The Bitmap Brothers z 80. rokov alebo hry na počítači PC-98. Len majte na pamäti, že všetci sú NSFW.
Kakyusei (PC-98). Elf, 1996
Na tomto obrázku je iba 16 farieb!
8. Posledný pohľad
Jedným z nebezpečenstiev pixelového umenia je, že sa zdá byť jednoduchý a jednoduchý (kvôli jeho štruktúre a obmedzeniam štýlu). Ale nakoniec strávite obrovské množstvo času dolaďovaním svojich škriatok. Je to ako hlavolam, ktorý treba vyriešiť – a preto pixel art priťahuje perfekcionistov. Pamätajte, že jeden sprite by nemal zaberať príliš veľa času – je to len malý kúsok z mimoriadne komplexnej zbierky kúskov. Je dôležité nestratiť zo zreteľa celkový obraz.
Aj keď váš pixel art nie je na hranie, niekedy stojí za to povedať si: "Už je to dosť dobré!" A ísť ďalej. Najlepší spôsob, ako rozvíjať svoje zručnosti, je prejsť celým procesom od začiatku do konca toľkokrát, ako je to možné, s použitím čo najväčšieho počtu tém.
A niekedy je užitočné nechať škriatka na chvíľu, aby ste sa naňho mohli o niečo neskôr pozrieť čerstvými očami.
32 x 32 pixelov
Najprv sme vytvorili veľký sprite s rozmermi 96 x 96 pixelov, pretože pri tejto veľkosti je to skôr kreslenie alebo maľovanie, ale s pixelmi. Čím je sprite menší, tým je menej podobný tomu, čo má zobrazovať, a tým dôležitejší je každý pixel.
V Super Mario Bros. Mariovo oko má len dva pixely, jeden na druhom. A jeho ucho tiež. Tvorca postavy Shigeru Miyamoto povedal, že fúzy sú potrebné na oddelenie nosa od zvyšku tváre. Takže jednou z hlavných čŕt Maria nie je len dizajn postavy, ale pragmatický trik. Čo potvrdzuje starú múdrosť – „nevyhnutnosť je matkou vynálezu“.
Hlavné fázy vytvárania sprite 32x32 pixelov sú nám už známe: skica, farba, tiene, ďalšie vylepšenie. Ale v takýchto podmienkach ako počiatočný náčrt vyberám farebné tvary namiesto kreslenia obrysov kvôli malej veľkosti. Farba hrá pri definovaní postavy dôležitejšiu úlohu ako obrys. Pozrite sa znova na Maria, nemá vôbec žiadny obrys. Zaujímavé nie sú len fúzy. Jeho bokombrady definujú tvar uší, rukávy ukazujú ruky a jeho celkový tvar viac-menej jasne obkresľuje celé telo.
Vytváranie malých škriatok je neustálym kompromisom. Ak pridáte ťah, môžete stratiť priestor pre tieň. Ak má vaša postava jasne viditeľné ruky a nohy, hlava by pravdepodobne nemala byť príliš veľká. Ak efektívne použijete farbu, selektívny ťah a vyhladzovanie, vykreslený objekt sa bude javiť väčší, než v skutočnosti je.
Pre malých škriatok sa mi páči štýl chibi: postavy vyzerajú veľmi roztomilo, majú veľké hlavy a oči. Skvelý spôsob, ako vytvoriť farebný charakter v obmedzenom priestore a celkovo veľmi pekný štýl. Možno však potrebujete ukázať pohyblivosť alebo silu postavy, potom môžete dať menej priestoru hlave, aby telo vyzeralo mohutnejšie. Všetko závisí od vašich preferencií a cieľov.
Celý tím je zostavený!
Formáty súborov
Tento výsledok môže znervózniť každého pixelového umelca
Obrázok, ktorý vidíte, je výsledkom uloženia obrázka vo formáte JPG. Niektoré údaje sa stratili v dôsledku algoritmov kompresie súborov. Kvalitné pixelové umenie bude nakoniec vyzerať zle a vrátiť ho do pôvodnej palety nebude jednoduché.
Ak chcete uložiť statický obrázok bez straty kvality, použite formát PNG. Pre animácie - GIF.
Ako správne zdieľať pixel art
Zdieľanie pixel art na sociálnych sieťach je skvelý spôsob, ako získať spätnú väzbu a stretnúť sa s inými umelcami pracujúcimi v rovnakom štýle. Nezabudnite použiť hashtag #pixelart. Bohužiaľ, sociálne siete často konvertujú PNG na JPG bez opýtania, čo zhoršuje váš zážitok. Navyše nie je vždy jasné, prečo bol váš obrázok konvertovaný.
Existuje niekoľko tipov, ako uložiť pixel art v požadovanej kvalite pre rôzne sociálne siete.
Ak chcete, aby sa váš súbor PNG na Twitteri nezmenil, použite menej ako 256 farieb alebo že váš súbor má na najdlhšej strane menej ako 900 pixelov. Zväčšil by som veľkosť súboru aspoň na 512 x 512 pixelov. A to tak, aby mierka bola násobkom 100 (200 %, nie 250 %) a zachovali sa ostré hrany (Najbližší sused vo Photoshope).
Animované súbory GIF pre príspevky na Twitteri vážiť nie viac ako 15 MB. Obrázok musí mať aspoň 800 x 800 pixelov, animácia v slučke sa musí opakovať trikrát a posledná snímka musí byť polovičná ako všetky ostatné – najpopulárnejšia teória. Nie je však jasné, do akej miery je potrebné tieto požiadavky splniť, keďže Twitter neustále mení svoje algoritmy zobrazovania obrázkov.
Pokiaľ viem, je nemožné zverejniť obrázok na Instagrame bez straty kvality. Určite však bude vyzerať lepšie, ak si ho zväčšíte aspoň na 512x512 pixelov.
Zdroj: hab.com