Nezávislí vývojáři často musí kombinovat několik rolí najednou: herní designér, programátor, skladatel, umělec. A pokud jde o vizuál, mnoho lidí volí pixel art – na první pohled to vypadá jednoduše. Ale aby to bylo krásné, potřebujete hodně zkušeností a určité dovednosti. Našel jsem výukový program pro ty, kteří právě začali chápat základy tohoto stylu: s popisem speciálního softwaru a technik kreslení pomocí dvou skřítků jako příkladu.
pozadí
Pixel art je forma digitálního umění, ve které jsou změny prováděny na úrovni pixelů. Většinou je spojován s grafikou videoher z 80. a 90. let. Poté museli umělci vzít v úvahu omezení paměti a nízké rozlišení. Nyní je pixel art stále populární ve hrách a jako umělecký styl obecně, navzdory možnosti vytvářet realistickou 3D grafiku. Proč? I když odhlédneme od nostalgie, vytváření skvělé práce v tak rigidním rámci je pěkná a obohacující výzva.
Bariéra vstupu do pixelového umění je relativně nízká ve srovnání s tradičním uměním a 3D grafikou, což přitahuje nezávislé vývojáře. To ale neznamená, že to bude snadné Dokončit hra v tomto stylu. Na crowdfundingových platformách jsem viděl mnoho nezávislých vývojářů s pixel art metroidvanias. Mysleli si, že vše dokončí za rok, ale ve skutečnosti potřebovali dalších šest let.
Metal Slug 3 (Arcade). SNK, rok 2000
Pixel art na úrovni, kterou chce většina lidí vytvořit, je časově náročný a krátkých návodů je málo. Při práci s 3D modelem jej můžete otáčet, deformovat, přesouvat jeho jednotlivé části, kopírovat animace z jednoho modelu do druhého a podobně. Umění pixelů na vysoké úrovni vyžaduje téměř vždy velké úsilí, abyste pečlivě umístili pixely na každý snímek.
Obecně jsem varoval.
A teď něco málo k mému stylu: kreslím hlavně pixel art pro videohry a nacházím v nich inspiraci. Zejména jsem fanouškem Famicom/NES, 16bitových konzolí a arkádových her z 90. let. Pixel art mých oblíbených her té doby lze popsat jako jasný, sebevědomý a čistý (ale ne přehnaně), není tvrdý a minimalistický. Sám tímto stylem pracuji, ale nápady a techniky z tohoto tutoriálu můžete snadno použít k vytvoření úplně jiných věcí. Prozkoumejte práce různých umělců a vytvořte pixelové umění, které máte rádi!
Software
Základní digitální nástroje pro pixel art - Zoom (Zoom) a Pencil (Tužka) pro umístění pixelů. Dále budete potřebovat Čára (Čára), Obrázek (Tvar), Vybrat (Vybrat), Přesunout (Přesunout) a Vyplnit (Kbelík s barvou). Existuje mnoho bezplatného a placeného softwaru s takovou sadou nástrojů. Budu mluvit o nejoblíbenějších a těch, které sám používám.
Malování (zdarma)
Pokud máte Windows, je v něm zabudován Paint – primitivní program, ale má všechny nástroje pro pixel art.
(je zdarma)
Nečekaně funkční pixel art editor, který běží přes prohlížeč. Svou práci můžete exportovat do formátu PNG nebo animovaného GIFu. Skvělá volba pro začátečníky.
(je zdarma)
GraphicsGale je jediný editor, o kterém jsem slyšel, speciálně navržený pro pixel art, který obsahuje animační nástroje. Vytvořila jej japonská společnost HUMANBALANCE. Od roku 2017 je distribuován zdarma a je stále žádaný, navzdory rostoucí popularitě Aseprite. Bohužel to funguje jen na Windows.
($)
Možná nejpopulárnější editor současnosti. , spousta funkcí, aktivní podpora, verze pro Windows, Mac a Linux. Pokud to s pixel artem myslíte vážně a stále jste nenašli ten správný editor, může to být ten pravý pro vás.
($$+)
GameMaker Studio 2 je vynikající 2D nástroj s dobrým editorem Sprite. Pokud chcete vytvořit pixel art pro své vlastní hry, je velmi pohodlné dělat vše v jednom programu. Nyní tento software používám ve své práci , sbírka 50 retro her: Vytvářím sprity a animace v GameMakeru a sady dlaždic ve Photoshopu.
($$$+)
Photoshop je drahý software, distribuovaný na základě předplatného, není určen pro pixel art. Nedoporučuji kupovat, pokud nemáte rádi ilustrace ve vysokém rozlišení nebo nepotřebujete provádět složité manipulace s obrázky jako já. Můžete v něm vytvářet statické sprity a pixel art, ale ve srovnání se specializovaným softwarem (jako GraphicsGale nebo Aseprite) je to poměrně složité.
ostatní
Můj pixel art kit. Všechno je černé, jen jsem si všiml.
Grafický tablet ($$+)
Grafické tablety doporučuji pro jakoukoli digitální ilustrační práci, abyste se vyhnuli syndromu karpálního tunelu. Je mnohem snazší předcházet než léčit. Jednoho dne ucítíte bolest a bude to jen horší – starejte se o sebe hned od začátku. Vzhledem k tomu, že jsem dříve kreslil myší, mám nyní problém hrát hry, které vyžadují stisknutí kláves. Momentálně používám Wacom Intuos Pro S.
Podpora zápěstí ($)
Pokud neseženete tablet, kupte si alespoň třmen na zápěstí. Můj oblíbený je Mueller Green Fitted Brace. Zbytek je buď příliš těsný, nebo neposkytuje dostatečnou oporu. Posuvná měřítka lze bez problémů objednat online.
96 × 96 pixelů
závěrečný boj. Capcom, 1989
Začněme! Začněme znakovým spritem o velikosti 96x96 px. Jako příklad jsem nakreslil orka a umístil ho na snímek obrazovky z Final Fight (obrázek výše), abyste získali měřítko. Tento большой sprite pro většinu retro her, velikost snímku obrazovky: 384×224 pixelů.
Na tak velkém spritu bude snazší ukázat techniku, o které chci mluvit. Také vykreslování pixel po pixelu připomíná spíše tradiční formy umění (jako je kresba nebo malba), které možná znáte více. Po zvládnutí základních technik přejdeme k menším skřítkům.
1. Vyberte paletu
Pixel je mnohem hlubší pojem v pixel artu než v jakékoli jiné digitální oblasti. Pixel art je definován svými omezeními, jako jsou barvy. Je důležité vybrat správnou paletu, pomůže definovat váš styl. Ale na začátku doporučuji nemyslet na paletky a vybrat si jednu ze stávajících (nebo jen několik náhodných barev) - můžete ji snadno změnit v jakékoli fázi.
V tomto tutoriálu budu používat paletu 32 barev, pro kterou jsme vytvořili . Pro pixel art jsou často sestaveny z 32 nebo 16 barev. Ten náš je určen pro fiktivní konzoli, která by se mohla objevit někde mezi Famicomem a PC Engine. Můžete si vzít ji nebo jakoukoli jinou - tutoriál vůbec nezávisí na zvolené paletě.
2. Hrubé obrysy
Začneme kreslit nástrojem Tužka. Skicu nakreslíme stejným způsobem, jako to děláme běžným perem a papírem. Pixel art a tradiční umění se samozřejmě překrývají, zvláště pokud jde o takto velké sprity. Moje pozorování ukazují, že silní umělci v pixel artu jsou alespoň dobří v kreslení od ruky a naopak. Rozvíjení dovedností kreslení je tedy vždy užitečné.
3. Konturování
Dokončíme obrysy: odstraníme přebytečné pixely a zmenšíme tloušťku každé čáry na jeden pixel. Ale co přesně je nadbytečné? Chcete-li odpovědět na tuto otázku, musíte porozumět čarám a nerovnostem pixelů.
hrboly
Musíte se naučit kreslit dvě základní čáry v pixel art: rovné čáry a křivky. S tužkou a papírem je to všechno o ovládání svalů, ale pracujeme s malými bloky barev.
Klíčem k nakreslení správných pixelových čar je drsnost. Jedná se o jednotlivé pixely nebo malé segmenty, které ničí hladkost čáry. Jak jsem řekl dříve, jeden pixel je v pixel artu velmi důležitý, takže nerovnosti mohou zničit celou estetiku. Představte si, že kreslíte na papír rovnou čáru a najednou někdo udeří do stolu: hrbolky v pixelartu vypadají jako náhodná klikatá.
Příklady:
Přímé
Křivky
Zubatost se objevuje na křivkách, když se délka úseček nezvětšuje nebo nezmenšuje postupně.
Úplně se vyhnout hrbolům nelze – všechny vaše oblíbené retro hry je mají (samozřejmě pokud se pixel art neskládá pouze z jednoduchých tvarů). Účel: minimalizovat nesrovnalosti a zároveň ukázat vše, co potřebujete.
4. Nanesení prvních barev
Vybarvěte svou postavu výplní nebo jiným vhodným nástrojem. Paletka tuto část práce zjednoduší. Pokud software neumožňuje použití palet, můžete je vložit přímo do obrázku, jako v příkladu výše, a vybrat barvy kapátkem.
V levém dolním rohu jsem nakreslil našeho přítele, seznamte se, tohle je Shar. Díky tomu bude snazší pochopit, co se přesně děje v každé fázi.
5. Stínování
Je čas vykreslit stíny - stačí přidat tmavší barvy do skřítka. Takže obrázek bude vypadat trojrozměrně. Předpokládejme, že máme jeden zdroj světla umístěný nad orkem nalevo od něj. To znamená, že vše, co je nad a před naší postavou, bude osvětleno. Vpravo dole přidejte stíny.
Forma a objem
Pokud je pro vás tento krok obtížný, představte si svou kresbu jako trojrozměrné tvary, a ne pouze linie a barvu. Tvary existují ve XNUMXD prostoru a mohou mít objem, který vytváříme pomocí stínů. To pomůže vizualizovat postavu bez detailů a bude vypadat, jako by byla vyrobena z hlíny namísto pixelů. Stínování není jen o přidávání nových barev, je to o vytváření tvaru. Na dobře detailní postavě detaily nezakrývají základní tvary: když přimhouříte oči, uvidíte několik velkých shluků světla a stínu.
Vyhlazování (vyhlazování, vyhlazování)
Pokaždé, když použiji novou barvu, použiji anti-aliasing (AA). Pomáhá vyhladit pixely přidáním přechodných barev v rozích, kde se setkávají dva segmenty čáry:
Šedé pixely změkčují "přerušení" v řádku. Čím delší je segment čáry, tím delší je segment AA.
Takhle vypadá AA na orkově rameni. Je potřeba vyhladit linie, které představují křivku jeho svalů.
Anti-aliasing by neměl přesahovat sprite, který bude použit ve hře, nebo na pozadí, jehož barva není známa. Pokud například aplikujete AA na světlé pozadí, bude anti-aliasing vypadat na tmavém pozadí ošklivě.
6. Selektivní obvod
Dříve byly obrysy zcela černé, díky čemuž skřítek vypadal velmi kresleně. Zdálo se, že obraz je rozdělený na segmenty. Například černé čáry na paži ukazují svalstvo příliš kontrastně a postava vypadá méně pevně.
Pokud se sprite stane přirozenějším a segmentace nebude tak zřejmá, budou základní formy postavy lépe čitelné. K tomu můžete použít selektivní obrys - částečně nahradit černý obrys světlejším. Na osvětlenou část skřítka můžete použít nejsvětlejší barvy, nebo tam, kde se skřítek dotýká negativního prostoru, můžete obrys zcela odstranit. Místo černé je potřeba použít barvu, která byla zvolena pro stín - tím zůstane zachována segmentace (pro rozlišení svalů, srsti a podobně).
Také v této fázi jsem přidal tmavší stíny. Ukázalo se, že na kůži orka byly tři stupně zelené. Nejtmavší zelenou barvu lze použít pro selektivní obrys a AA.
7. Dokončovací úpravy
Na konci se vyplatí přidat zvýraznění (nejsvětlejší místa na spritu), detaily (náušnice, cvočky, jizvy) a další vylepšení, dokud nebude postava hotová nebo dokud nebudete muset přejít k další.
V této fázi lze použít několik užitečných triků. Otočte výkres vodorovně, často to pomůže odhalit chyby v proporcích a stínování. Můžete také odstranit barvu - nastavte sytost na nulu, abyste pochopili, kde je třeba změnit stíny.
Vytváření šumu (dithering, dithering)
Dosud jsme většinou používali velké pevné skvrny stínů. Existuje však další technika - dithering, která vám umožní přejít z jedné barvy do druhé, aniž byste přidali třetí. Podívejte se na příklad níže.
Vrchní tmavý až světlý přechod využívá stovky různých odstínů modré.
Střední přechod používá pouze devět barev, ale stále má příliš mnoho odstínů stejné barvy. Existuje tzv. banding (z anglického band - pruh), při kterém se díky tlustým jednotným pruhům oko zaměřuje na místa dotyku barev, místo na barvy samotné.
Na spodní přechod jsme použili dither, který se vyhýbá pruhování a používá pouze dvě barvy. Vytváříme šum různé intenzity, abychom simulovali gradaci barev. Tato technika je velmi podobná polotónům používaným při tisku; stejně jako stippling (tečkování - zrnitý obraz) - v ilustraci a komiksu.
Na orku jsem docela váhal, abych zprostředkoval texturu. Někteří pixelartisté to vůbec nepoužívají, zatímco jiní se nestydí a dělají to velmi obratně. Zjistil jsem, že dithering vypadá nejlépe na velkých plochách vyplněných jednou barvou (podívejte se na oblohu na snímku obrazovky Metal Slug výše) nebo na oblastech, které by měly vypadat drsně a nerovnoměrně (jako špína). Rozhodněte se sami, jak jej používat.
Chcete-li vidět příklad rozsáhlého a kvalitního ditheringu, podívejte se na hry britského studia The Bitmap Brothers z 80. let nebo hry na počítači PC-98. Jen mějte na paměti, že všichni jsou NSFW.
Kakyusei (PC-98). Elf, 1996
Na tomto obrázku je pouze 16 barev!
8. Poslední pohled
Jedním z nebezpečí pixelového umění je, že se zdá lehký a jednoduchý (kvůli jeho struktuře a omezením stylu). Nakonec ale strávíte obrovské množství času dolaďováním svých skřítků. Je to jako puzzle, které je třeba vyřešit, a proto pixel art oslovuje perfekcionisty. Pamatujte, že jeden skřítek by neměl trvat příliš dlouho - je to jen malý kousek z extrémně složité sbírky kusů. Je důležité neztratit ze zřetele celkový obraz.
I když váš pixel art není na hraní her, někdy se vyplatí říct si: "Už je to dost dobré!" A jít dál. Nejlepší způsob, jak rozvíjet dovednosti, je projít si celý proces od začátku do konce co nejvícekrát, s použitím co nejvíce témat.
A někdy je užitečné nechat skřítka na chvíli, abyste se na něj mohli o něco později podívat novýma očima.
32 × 32 pixelů
Nejprve jsme vytvořili velkého sprite 96x96 pixelů, protože v této velikosti je to spíše kreslení nebo malování, ale pixelované. Čím menší je sprite, tím méně vypadá jako to, co by měl zobrazovat, a tím důležitější je každý pixel.
V Super Mario Bros. Mariovo oko je jen dva pixely naskládané jeden nad druhým. A jeho ucho také. Tvůrce postavy Shigeru Miyamoto řekl, že knír je potřeba k oddělení nosu od zbytku obličeje. Jedním z hlavních rysů Mariovy tváře tedy není jen návrh postavy, ale také pragmatický trik. Což potvrzuje staré moudro – „potřeba je matkou vynalézavosti“.
Již jsme obeznámeni s hlavními fázemi vytváření sprite 32×32 pixelů: skica, barva, stíny, další vylepšení. Ale v takových podmínkách, jako počáteční skica, beru barevné tvary místo kreslení obrysů kvůli malé velikosti. Barva hraje v definici postavy důležitější roli než obrysy. Podívejte se znovu na Maria, nemá vůbec žádné obrysy. Nejen kníry jsou zajímavé. Jeho kotlety definují tvar uší, rukávy ukazují paže a celkový tvar víceméně jasně odráží celé jeho tělo.
Vytváření malých skřítků je neustálým kompromisem. Pokud přidáte tah, můžete ztratit prostor pro stín. Pokud má vaše postava jasně definované ruce a nohy, hlava pravděpodobně nebude příliš velká. Efektivní použití barvy, selektivního tahu a vyhlazování způsobí, že vykreslený objekt bude vypadat větší, než ve skutečnosti je.
Pro malé skřítky se mi líbí styl chibi: postavy vypadají velmi roztomile, mají velké hlavy a oči. Skvělý způsob, jak vytvořit světlý charakter v omezeném prostoru a obecně velmi příjemný styl. Možná ale potřebujete ukázat pohyblivost nebo sílu postavy, pak můžete dát méně prostoru hlavě, aby tělo vypadalo mohutněji. Vše záleží na vašich preferencích a cílech.
Celý tým je tady!
Formáty souborů
Takový výsledek může znervóznit každého pixelartistu
Obrázek, který vidíte, je výsledkem uložení obrázku jako JPG. Část dat byla ztracena kvůli kompresním algoritmům souborů. Vysoce kvalitní pixel art bude nakonec vypadat špatně a vrátit jej do původní palety nebude snadné.
Chcete-li uložit statický obrázek bez ztráty kvality, použijte formát PNG. Pro animace - GIF.
Jak sdílet pixel art správným způsobem
Sdílení pixel artu na sociálních sítích je skvělý způsob, jak získat zpětnou vazbu a setkat se s dalšími umělci, kteří pracují ve stejném stylu. Nezapomeňte použít hashtag #pixelart. Sociální sítě bohužel často bez ptaní převádějí PNG na JPG, což zhoršuje vaši práci. A není vždy jasné, proč byl váš obrázek převeden.
Existuje několik tipů, jak uložit pixel art ve správné kvalitě pro různé sociální sítě.
X
Chcete-li zachovat soubor PNG beze změny na Twitteru, použijte méně než 256 barev, popř že váš soubor je kratší než 900 pixelů. Zvětšil bych velikost souboru alespoň na 512x512 pixelů. A to tak, aby měřítko bylo násobkem 100 (200 %, nikoli 250 %) a ostré hrany zůstaly zachovány (Nearest Neighbor ve Photoshopu).
Animované GIFy pro příspěvky na Twitteru neváží více než 15 MB. Obrázek musí mít alespoň 800 x 800 pixelů, opakující se animace se musí opakovat třikrát a poslední snímek musí být poloviční než všechny ostatní – nejoblíbenější teorie. Není však jasné, do jaké míry by tyto požadavky měly být splněny, vzhledem k tomu, že Twitter neustále mění své algoritmy zobrazování obrázků.
Pokud vím, není možné vložit obrázek na Instagram bez ztráty kvality. Rozhodně ale bude vypadat lépe, pokud jej zvětšíte alespoň na 512x512 pixelů.
Zdroj: www.habr.com