Pixel art na papíře. Programy pro vytváření pixel art

V tomto tutoriálu se naučíte, jak proměnit fotografii osoby na pixel art jako fiktivní postava z arkádové hry z počátku 90. let.
James May - aka Smudgethis - vyvinul tento styl v roce 2011 pro hudební video pro dubstepový rockový počin. Neroův první hit Me & You – kde vytvořil animaci, která ukazuje starou hru s Neronovými dvěma členy. Hra byla 2D rytmická plošinovka s 16bitovou grafikou podobnou Double Dragon, ale mnohem lepší než 8bitové retro klasiky jako Super Mario Bros.
K vytvoření tohoto stylu musí být postavy stále hranaté, ale složitější než starší hry. A přestože k dosažení vzhledu budete muset použít omezenou paletu barev, pamatujte, že tyto hry měly stále 65 536 barev.
Zde vám James ukáže, jak vytvořit postavu z fotografie pomocí jednoduché palety barev a nástroje Pencil.
Stejně jako u průvodce animací budete potřebovat také fotografii dané osoby. James použil fotografii punkera, která je součástí souborů projektu pro tento tutoriál.
Po dokončení se podívejte na tento 16bitový tutoriál animace After Effects, kde vám James ukáže, jak vzít tuto postavu do AE, animovat ji a aplikovat retro herní efekty.

Krok 1

Otevřete Průvodce animacemi (16 bitů).psd a 18888111.jpg (nebo fotografii dle vašeho výběru) a použijte jej jako základ pro postavu. Nejlépe bude fungovat profilová fotografie v plné délce, která vám pomůže získat barevné palety a styly pro vaši 16bitovou postavu.
Animační tutoriál má několik pozic na jednotlivých vrstvách. Vyberte si tu, která nejlépe odpovídá póze na vaší fotografii - protože v rámu nemáme nohy, šel jsem se standardní pózou na úroveň 1.

Krok 2

Pomocí nástroje Rectangular Marquee Tool (M) vyberte hlavu ze své fotografie a zkopírujte ji (Cmd /Ctrl + C) a vložte ji (Cmd /Ctrl + V) do Průvodce animací (16 bitů).psd.
Přizpůsobte obrázek tak, aby se vešel, proporcionálně. Všimnete si, že vzhledem k tomu, že rozměry PSD jsou velmi malé, obraz začne okamžitě kreslit pixel.

Krok 3

Vytvořte novou vrstvu a nakreslete obrys jednopixelovou černou tužkou (B) pomocí průvodce animací, který je v ní obsažen, a fotografie jako základ. \n
Dodávaný průvodce pomáhá rozvíjet řadu postav od větších postav šéfů nebo štíhlejších ženských. Toto je hrubý průvodce pro skládání a animaci mých pixelartových postaviček.

Krok 4

Pomocí nástroje kapátko (I) otestujte nejtmavší oblast odstínu pleti na fotografii a vytvořte malý čtvereček barvy. Udělejte to ještě třikrát, abyste vytvořili čtyřbarevnou paletu odstínů pleti.
Vytvořte další vrstvu pod vrstvou obrysu a pomocí jednopixelového štětce a čtyřbarevné palety barev vystínujte obrázek (opět použijte fotografii jako vodítko). \n
Nejlepší je uložit všechny prvky vaší kresby nebo různé vrstvy, protože to usnadňuje jejich opětovné použití na jiných tvarech. To je užitečné zejména pro padouchy, protože většina 16bitových her používá velmi podobná čísla. Například jeden kamarád může mít červenou košili a nůž, zatímco další je identický s výjimkou modré košile a zbraně.

Krok 5

Opakujte tento postup pro další části postavy a vystínujte látku tak, aby odpovídala ostatním prvkům na původní fotografii. Ujistěte se, že pokračujete ve vzorkování pomocí nástroje kapátko, abyste nejprve vytvořili barevné palety, protože to poskytuje konzistentní sadu barev, která vypadá skvěle a vyhovuje relativně omezené paletě barev 16bitových her.

Krok 6

Přidejte data pro vylepšení vaší postavy pomocí odstínů, tetování, náušnic atd. Zde se najíst a přemýšlet o tom, jak chcete, aby vaše postava vypadala v herním prostředí. Možná by mohli používat sekeru nebo mít robotickou ruku?

Krok 7

Chcete-li animovat svou postavu, opakujte předchozí kroky pomocí dalších pěti vrstev průvodce animací. Zvládnutí tohoto procesu a vytvoření bezproblémových výsledků může nějakou dobu trvat, ale opětovným použitím prvků z předchozích snímků lze provést zkratky. Například v této sekvenci šesti snímků zůstává hlava nezměněna.

Krok 8

Chcete-li zkontrolovat, zda je sekvence animace v pořádku, otevřete ve Photoshopu panel Animace a ujistěte se, že právě probíhá pouze první snímek animace. Při vytváření animace můžete přidávat nové snímky a zapínat a vypínat vrstvy, ale nejrychlejším způsobem je použít příkaz Vytvořit snímky z vrstev v plovoucí nabídce panelu (vpravo nahoře).
První snímek je prázdné pozadí, takže jej vyberte a kliknutím na ikonu koše panelu (dole) jej odstraňte.

" itemprop="image">

V tomto tutoriálu o 10 krocích How to Draw Pixel Art vás naučím, jak vytvořit "sprite" (jedinou 2D postavu nebo objekt). Samotný termín samozřejmě pochází z videoher.

Naučil jsem se vytvářet pixel art, protože jsem to potřeboval pro grafiku ve své hře. Po letech tréninku jsem to pochopil a začal jsem chápat, že pixel art je víc umění než jen nástroj. Pixel art je dnes velmi populární mezi herními vývojáři a ilustrátory.

Tento tutoriál byl vytvořen před mnoha lety, aby naučil lidi jednoduché koncepty vytváření pixel artu, ale byl mnohokrát aktualizován, takže se výrazně liší od původní verze. Na internetu je mnoho návodů na stejné téma, ale všechny se mi zdají příliš složité nebo zdlouhavé. pixel art není věda. Při vytváření pixel artu byste neměli počítat vektory.

Nástroje

Jednou z hlavních výhod vytváření pixel artu je, že nepotřebujete žádné pokročilé nástroje – měl by stačit výchozí grafický editor nainstalovaný na vašem počítači. Za zmínku stojí, že existují programy navržené speciálně pro vytváření pixel artů, jako je Pro Motion nebo Pixen (pro uživatele Mac). Sám jsem je netestoval, ale slyšel jsem spoustu pozitivních ohlasů. V tomto tutoriálu budu používat Photoshop, který, i když je drahý, obsahuje spoustu užitečných nástrojů pro tvorbu umění, z nichž některé jsou velmi užitečné pro pixelování.

Jak kreslit pixel art ve Photoshopu

Při používání Photoshopu bude vaší hlavní zbraní nástroj Tužka (klávesa B), který je alternativou k nástroji štětec. Tužka umožňuje vybarvovat jednotlivé pixely bez překrývání barev.

Budeme potřebovat dva další nástroje: „Selection“ (klávesa M) a „Magic Wand“ (klávesa W), abychom mohli vybrat a přetáhnout nebo zkopírovat a vložit. Pamatujte, že podržením klávesy Alt nebo Shift při provádění výběru můžete přidat vybrané objekty nebo je vyloučit z aktuálního seznamu výběru. To je užitečné, když potřebujete vybrat nerovné objekty.

K přenosu barev můžete použít i kapátko. Existuje tisíc důvodů, proč je zachování barev v pixel artu důležité, takže budete chtít vzít pár barev a používat je znovu a znovu.

Nakonec se ujistěte, že si pamatujete všechny klávesové zkratky, protože vám to může ušetřit spoustu času. Všimněte si „X“, které přepíná mezi primární a sekundární barvou.

Čáry

Pixely jsou stejné malé barevné čtverečky. Nejprve musíte pochopit, jak efektivně uspořádat tyto čtverce, abyste vytvořili čáru, kterou chcete. Podíváme se na dva nejběžnější typy čar: rovné a zakřivené.

Rovné čáry

Vím, co si myslíte: vše je zde tak jednoduché, že nemá smysl se do ničeho pouštět. Ale pokud jde o pixely, i rovné čáry se mohou stát problémem. Musíme se vyhnout zubatým částem - malým kouskům vlasce, které způsobují, že vypadá nerovnoměrně. Objeví se, pokud je jedna část čáry větší nebo menší než ostatní, které ji obklopují.

Zakřivené čáry

Při kreslení zakřivených čar se musíte ujistit, že pokles nebo vzestup je rovnoměrný po celé délce. V tomto příkladu má úhledná čára intervaly 6 > 3 > 2 > 1, ale čára s intervaly 3 > 1< 3 выглядит зазубренной.

Schopnost kreslit čáry je klíčovým prvkem pixel artu. O něco dále vám řeknu o anti-aliasingu.

Konceptualizace

Nejprve potřebujete dobrý nápad! Zkuste si představit, co budete dělat v pixel artu - na papíře nebo jen ve své mysli. Jakmile budete mít představu o kresbě, můžete se soustředit na samotnou pixelaci.

Témata k zamyšlení

• K čemu bude tento sprite sloužit? Je to pro web nebo pro hru? Bude nutné to později animovat? Pokud ano, pak bude potřeba udělat menší a méně detailní. A naopak, pokud se sprajtem v budoucnu nebudete pracovat, můžete k němu připojit tolik dílů, kolik potřebujete. Proto se předem rozhodněte, k čemu přesně je tento sprite potřebný a vyberte optimální parametry.
• Jaká omezení existují? Již dříve jsem zmínil důležitost uchovávání květin. Hlavním důvodem je omezená barevná paleta kvůli systémovým požadavkům (což je v naší době krajně nepravděpodobné) nebo kvůli kompatibilitě. Nebo pro přesnost, pokud emulujete konkrétní styl C64, NES atd. Také stojí za to zvážit rozměry vašeho sprite a to, zda příliš nevyčnívá z objektů na pozadí, které potřebujete.

Pojďme to zkusit!

V tomto tutoriálu nejsou žádná omezení, ale chtěl jsem se ujistit, že můj pixel art bude dostatečně velký, abyste mohli podrobně vidět, co se děje v každém z kroků. Za tímto účelem jsem se rozhodl jako model použít postavu Lucha Lawyer ze světa wrestlingu. Skvěle by se hodil do bojové hry nebo rychlé akční hry.

Obvod

Černý obrys bude dobrým základem pro vašeho skřítka, takže tím začneme. Vybrali jsme černou, protože vypadá dobře, ale je také trochu tmavá. Později v tutoriálu vám řeknu, jak změnit barvu obrysu pro zvýšení realismu.

Existují dva přístupy k vytvoření kontury. Obrys můžete nakreslit ručně a poté jej trochu upravit, nebo můžete vše nakreslit po jednom pixelu. Ano, vše jste pochopili správně, bavíme se o tisíci kliknutí.

Způsob, který zvolíte, závisí na velikosti spritu a vašich pixelačních dovednostech. Pokud je skřítek opravdu obrovský, pak by bylo logičtější nakreslit jej ručně, aby vytvořil hrubý tvar, a poté jej oříznout. Věřte mi, je to mnohem rychlejší, než se hned snažit nakreslit perfektní skicu.

V mém tutoriálu vytvářím poměrně velkého sprite, takže zde bude ukázána první metoda. Bude jednodušší, když vše jasně ukážu a vysvětlím, co se stalo.

První krok: hrubý obrys

Pomocí myši nebo tabletu nakreslete hrubý obrys svého sprite. Ujistěte se, že NENÍ PŘÍLIŠ surový, což znamená, že vypadá zhruba tak, jak vidíte svůj konečný produkt.

Můj náčrt se téměř úplně shodoval s tím, co jsem plánoval.

Druhý krok: Vyleštěte obrys

Začněte zvětšením obrázku 6 nebo 8 krát. Měli byste vidět každý pixel jasně. A pak vyčistěte obrys. Zejména stojí za to věnovat pozornost „zatoulaným pixelům“ (celý obrys by neměl být tlustší než jeden pixel), zbavit se zubatých okrajů a přidat malé detaily, které jsme v prvním kroku vynechali.

Dokonce i velcí skřítci velmi zřídka překročí 200 x 200 pixelů. Fráze „udělejte více s méně“ je skvělý způsob, jak popsat proces pixelizace. Brzy uvidíte, že i na jednom pixelu záleží.

Zjednodušte svůj obrys co nejvíce. K detailům se dostaneme později, nyní je potřeba zapracovat na hledání velkých pixelů, jako je například segmentace svalů. Věci teď nevypadají skvěle, ale buďte trochu trpěliví.

Barva

Když je obrys připraven, dostaneme jakýsi barevný list, který je třeba vyplnit barvami. K tomu nám pomůže barva, polévání a další pomůcky. Výběr barev může být obtížný, ale teorie barev zjevně není tématem tohoto článku. Ať je to jak chce, existuje několik základních pojmů, které budete potřebovat znát.

Barevný model HSB

Jedná se o anglickou zkratku tvořenou slovy Hue, Saturation, Brightness. Je to jen jeden z mnoha počítačových barevných modelů (nebo numerických reprezentací barev). Pravděpodobně jste slyšeli o dalších příkladech, jako je RGB a CMYK. Většina obrazových editorů používá pro výběr barev HSB, takže se na to zaměříme.

Odstín– Odstín je to, co jsme dříve nazývali barvou.

Nasycení– Sytost – určuje intenzitu barvy. Pokud je hodnota 100 %, jedná se o maximální jas. Pokud ji snížíte, objeví se v barvě matnost a „zešedne“.

Jas– světlo, které vyzařuje barvu. Například pro černocha je tento ukazatel 0 %.

Výběr barev

Rozhodnutí, které barvy si vyberete, je na vás, ale je třeba mít na paměti několik věcí:

• Matné a desaturované barvy vypadají realističtěji než kreslené.
• Přemýšlejte o barevném kole: čím dále jsou dvě barvy na kole, tím hůře jdou k sobě. Zároveň červená a oranžová, které jsou v těsné blízkosti, spolu vypadají skvěle.

• Čím více barev použijete, tím rozmazanější bude kresba vypadat. Vyberte si proto několik základních barev a použijte je. Pamatujte, že Super Mario byl svého času vytvořen výhradně z kombinací hnědé a červené.

Nanášení barev

Nanášení barvy je velmi jednoduché. Pokud používáte Photoshop, pak jednoduše vyberte požadovaný fragment, vyberte jej kouzelnou hůlkou (klávesa W) a poté jej vyplňte hlavní barvou (Alt-F) nebo doplňkovou barvou Ctrl-F.

Stínování

Stínování je jednou z nejdůležitějších částí cesty stát se pixelačním polobohem. Právě v této fázi skřítek buď začíná vypadat lépe, nebo se proměňuje v podivnou hmotu. Postupujte podle mých pokynů a určitě uspějete.

První krok: vyberte zdroj světla

Nejprve zvolíme zdroj světla. Pokud je váš sprite součástí většího fragmentu, který má své vlastní zdroje osvětlení, jako jsou lampy, svítilny a tak dále. A všechny mohou mít různé účinky na to, jak sprite vypadá. Výběr vzdáleného zdroje světla, jako je slunce, je však skvělý nápad pro většinu pixelových umění. Například pro hry budete muset vytvořit co nejjasnějšího sprite, kterého lze následně přizpůsobit prostředí.

Obvykle volím vzdálené světlo někde nahoře před skřítkem, takže je osvětlena pouze přední a horní strana skřítka a zbytek je zastíněn.

Krok dva: přímé stínování

Jakmile máme vybraný zdroj světla, můžeme začít ztmavovat oblasti, které jsou od něj nejdále. Náš model osvětlení diktuje, že spodní část hlavy, paží, nohou atd. by měla být pokryta stínem.

Pamatujme, že ploché věci nemohou vrhat stíny. Vezměte kus papíru, zmuchlejte ho a převalte přes stůl. Jak jste přišel na to, že už to není ploché? Jen jsi kolem něj viděl stíny. Pomocí stínování zdůrazněte záhyby na oblečení, svaly, srst, barvu pleti atd.

Krok tři: Měkké stíny

Druhý odstín, který je světlejší než první, by měl sloužit k vytvoření jemných stínů. To je nutné pro oblasti, které nejsou přímo osvětleny. Lze je také použít k přechodu ze světlých do tmavých oblastí a na nerovném povrchu.

Krok čtyři: osvětlené oblasti

Místa, která dostávají přímé paprsky světla, je také potřeba zvýraznit. Stojí za zmínku, že by mělo být méně světel než stínů, jinak způsobí zbytečnou pozornost, to znamená, že vyniknou.

Ušetřete si bolesti hlavy tím, že si zapamatujete jedno jednoduché pravidlo: nejprve stíny, pak světla. Důvod je jednoduchý: pokud nejsou žádné stíny, vyfouknou se příliš velké úlomky, a když stíny aplikujete, bude je třeba je zmenšit.

Několik užitečných pravidel

Stíny jsou pro začátečníky vždy výzvou, proto je zde několik pravidel, která musíte při stínování dodržovat.

1. Nepoužívejte přechody. Nejčastější chyba začátečníků. Přechody vypadají hrozně a ani se nepřibližují tomu, jak si světlo hraje na površích.
2. Nepoužívejte měkké stínování. Mluvím o situaci, kdy je stín příliš daleko od kontury, protože pak vypadá velmi rozmazaně a brání identifikaci zdroje světla.
3. Nepoužívejte příliš mnoho stínů. Je snadné si myslet, že „čím více barev, tím realističtější obraz“. Ať je to jak chce, v reálném životě jsme zvyklí vidět věci v temném nebo světlém spektru a náš mozek odfiltruje vše, co je mezi tím. Použijte pouze dvě tmavé (tmavé a velmi tmavé) a dvě světlé (světlé a velmi světlé) a vrstvěte je přes základní barvu, ne na sebe.
4. Nepoužívejte příliš podobné barvy. Není potřeba používat téměř identické barvy, pokud nechcete vytvořit opravdu rozmazaného sprite.

Dithering

Zachování barev je něco, čemu musí tvůrci pixel artu opravdu věnovat pozornost. Další způsob, jak získat více stínů bez použití více barev, se nazývá dithering. Stejně jako tradiční malba používá „šrafování“ a „křížové šrafování“, tedy doslova získáte něco mezi dvěma barvami.

Jednoduchý příklad

Zde je jednoduchý příklad toho, jak můžete pomocí rozkladu vytvořit čtyři možnosti stínování ze dvou barev.

Pokročilý příklad

Porovnejte obrázek výše (vytvořený pomocí přechodu ve Photoshopu) s obrázkem vytvořeným pouze ze tří barev pomocí rozkladu barev. Upozorňujeme, že k vytvoření "přilehlých barev" lze použít různé vzory. Princip pro vás bude snazší pochopit, pokud sami vytvoříte několik vzorů.

Aplikace

Dithering může dát vašemu spritu ten úžasný retro vzhled, protože mnoho raných videoher tuto techniku ​​intenzivně využívalo kvůli malému počtu dostupných barevných palet (pokud chcete vidět spoustu příkladů ditheringu, podívejte se na hry vyvinuté pro Segu Genesis). Sám tuto metodu příliš často nepoužívám, ale pro vzdělávací účely ukážu, jak ji lze aplikovat na našem skřítkovi.

Dither můžete používat podle libosti, ale stojí za zmínku, že jen málokdo jej používá opravdu dobře.

Selektivní konturování

Selektivní obrysování, také nazývané vybrané obrysy, je podtypem stínování obrysu. Namísto použití černé linky zvolíme barvu, která bude na vašem spritu působit harmoničtěji. Kromě toho změníme jas tohoto obrysu blíže k okrajům spritu, což umožní zdroji barev určit, které barvy bychom měli použít.

Do této chvíle jsme používali černý obrys. Není na tom nic špatného: černá vypadá skvěle a navíc umožňuje skřítkovi vyniknout od okolních objektů. Ale použitím této metody obětujeme realismus, což by se nám v některých případech mohlo hodit, protože náš skřítek i nadále vypadá jako karikatura. Selektivní konturování se toho zbaví.

Všimnete si, že jsem použil selaute, abych zjemnil definici jeho svalů. Konečně náš sprite začne vypadat jako jeden celek, spíše než jako obrovské množství samostatných fragmentů.

Porovnejte to s originálem:

1. Vyhlazování

Vyhlazování funguje jednoduše: přidáním přechodových barev k okrajům, aby vypadaly hladší. Pokud máte například černou čáru na bílém pozadí, pak se k jejím zalomením podél okraje přidají malé šedé pixely.

Technika 1: Vyhlazení zalomení

Obecně platí, že tam, kde jsou zlomy, musíte přidat mezibarvy, jinak bude linka vypadat zubatě. Pokud stále vypadá nerovnoměrně, přidejte další vrstvu světlejších pixelů. Směr nanášení mezivrstvy se musí shodovat se směrem křivky.

Nemyslím si, že to dokážu lépe vysvětlit, aniž bych to nezkomplikoval. Stačí se podívat na obrázek a pochopíte, co tím myslím.

Technika 2: Zaoblení hrbolků

Technika 3: mazání konců řádků

Aplikace

Nyní na náš tisk použijeme vyhlazování. Všimněte si, že pokud chcete, aby váš sprite vypadal dobře na jakékoli barvě pozadí, neměli byste vnější čáru vyhlazovat. V opačném případě bude mít váš sprite kolem sebe velmi nevhodnou svatozář v místě, kde se stýká s pozadím, a proto bude na jakémkoli pozadí příliš zřetelně vystupovat.

Efekt je velmi jemný, ale má velký význam.

Proč to musíte dělat ručně?

Můžete se zeptat: "Proč na náš sprite nepoužijeme filtr grafického editoru, když chceme, aby vypadal hladce?" Odpověď je také jednoduchá – ani jeden filtr neudělá váš sprite tak jasný a čistý jako ruční práce. Budete mít úplnou kontrolu nejen nad barvami, které používáte, ale také nad tím, kde je použít. Kromě toho víte lépe než jakýkoli filtr, kde bude vyhlazování vhodné a kde jsou oblasti, kde pixely jednoduše ztratí svou kvalitu.

Dokončování

Páni, blížíme se k bodu, kdy můžete vypnout počítač a vzít si z lednice vychlazenou láhev piva. Ale to ještě nepřišlo! Poslední část je o tom, co odlišuje zapáleného amatéra od ostříleného profesionála.

Udělejte krok zpět a pořádně si svého skřítka prohlédněte. Existuje možnost, že to stále vypadá "vlhko". Věnujte trochu času zdokonalování a ujišťování se, že je vše perfektní. Bez ohledu na to, jak už jste unavení, ta zábavná část je před vámi. Přidejte podrobnosti, aby váš sprite vypadal zajímavěji. Zde vstupují do hry vaše pixelační schopnosti a zkušenosti.

Možná vás překvapí, že náš právník Lucha po celou dobu neměl oči nebo že balíček, který držel, byl prázdný. Důvod je vlastně v tom, že jsem se chtěl zdržet malých detailů. Všimněte si také střihu, který jsem mu přidala na čelenky, mouchy na kalhotách... a kdo by byl člověk bez bradavek? Také jsem mu trochu ztmavil spodní část trupu, aby jeho paže více vyčnívala proti tělu.

Konečně máte hotovo! Lucha Lawyer je lehký, protože má pouze 45 barev (nebo může být super těžký - vše závisí na omezeních vaší palety) a jeho rozlišení je přibližně 150 x 115 pixelů. Nyní si můžete otevřít pivo!

Úplný průběh:

Je to vždycky sranda. Zde je GIF ukazující vývoj našeho skřítka.

1. Naučte se základy umění a praktikujte tradiční techniky. Všechny znalosti a dovednosti potřebné pro kreslení a kreslení lze aplikovat na pixelování.
2. Začněte s malými skřítky. Nejtěžší je naučit se, jak umístit hodně detailů s použitím minimálního počtu pixelů, aby nevznikli tak velké skřítky jako já.
3. Studujte díla umělců, které obdivujete, a nebojte se být neoriginální. Nejlepší způsob, jak se naučit, je opakovat fragmenty cizí práce. Vyvinout si svůj vlastní styl zabere hodně času.
4. Pokud tablet nemáte, kupte si ho. Neustálé nervové zhroucení a stres způsobený neustálým klikáním levým tlačítkem myši nejsou zábavné a na příslušníky opačného pohlaví pravděpodobně neudělají dojem. Používám malý Wacom Graphire2 - líbí se mi, jak je kompaktní a přenosný. Můžete dát přednost většímu tabletu. Před nákupem absolvujte krátkou zkušební jízdu.
5. Sdílejte svou práci s ostatními, abyste získali jejich názory. Může to být také dobrý způsob, jak získat nové geekské přátele.

P.S.

Původní článek je umístěn. Pokud máte odkazy na skvělé návody, které je třeba přeložit, pošlete je naší partě. Nebo pište přímo do skupinových zpráv

Pixel Art (Pixel Art) – přeloženo z angličtiny jako pixel art. Pixel je zase nejmenší grafický prvek digitálního obrázku.

Pixel Art tedy doslova znamená umění kreslit pomocí pixelů.

Jen pro přehlednost se podívejme na tento příklad:

Owlboy (pixelová umělecká hra)

Takto vypadají hry s grafikou ve stylu Pixel Art.

Velmi často se taková grafika používá v nezávislých hrách, protože mají velmi rozpoznatelný styl počítačových her.

Pixel Art však není jen o grafice, skřítci a obrázky pro hry, to je celý směr digitálního a grafického umění.

Pomocí pixel artu lze kreslit krásné obrázky:

Tento retro grafický styl si s ničím nespletete.

Některé obrazy v tomto stylu si zaslouží místo na ploše.


Existují také velmi cool umělci, kteří pracují v tomto stylu.

Podívejte se na tento obrázek. Každý pixel zde byl nakreslen samostatně a ručně. Je to jako skládat mozaiku, jak to dělali předtím a dělají to i teď.

Pokud tento obrázek zvětšíme, můžeme zblízka vidět, jak se vše dělá:

Jedinečný styl pixel artu spočívá v tom, že existují poměrně jasné barevné přechody a žádné vyhlazování. Pro příklad si vezměme další dílo v digitální grafice celkem průměrné úrovně, podívejte se na toto kresba dívky s brýlemi(18+) na blogu www.econdude.pw.

Jedná se o kresbu počítačovou myší v programu SAI2.0.

Pokud však tento obrázek přiblížíte, můžete vidět vyhlazování:

Nejsou zde žádné jasné přechody barev a odstínů, ale v pixel artu jsou přechody jasné.

Podívejte se například na to, jak můžete v pixel artu provádět přechody mezi barvami:

Toto je přibližný obrázek, pokud se na něj podíváte z dálky s vysokým rozlišením, barevný přechod bude docela hladký, ale je zde vidět jasnost a konzistence stylu.

Zde je další příklad, toto je docela klasická kresba ve stylu nálevu:

http://www.gamer.ru/everything/pixel-art-dlya-nachinayuschih

Když se přiblížíte, obrázky se nezdají příliš krásné, ale pokud se na pixel art podíváte z dálky, s vyšším rozlišením, může to vypadat nádherně.

Dokážete si představit, jakou skvělou práci takoví umělci odvádějí?

Někdy říkají, že Pixel Art se dělá tímto způsobem, protože je levnější, říkají, že nezávislí vývojáři prostě nemají prostředky na vytvoření moderní 3D grafiky, takže používají to nejjednodušší, co je napadne, kreslení v základních grafické editory pixelů.

Každý, kdo nakreslil cokoli ve stylu Pixel Art, vám však potvrdí, že jde o téměř nejdražší grafický styl z hlediska zdrojů (především času).

Animace ve stylu Pixel Art je obecně pekelná práce.

http://www.dinofarmgames.com/a-pixel-artist-renounces-pixel-art/

Stále je tedy potřeba dokazovat, že Pixel Art je „líný styl“, dokonce bych řekl, že to naopak není nejméně líný grafický styl.

Každý se však může naučit kreslit něco jednoduchého ve stylu Pixel Art a nepotřebujete k tomu žádné speciální programy, stačí jednoduchý grafický editor.

Pokud se chcete naučit kreslit tímto stylem, potřebujete, jako v každém jiném případě, hodně cviku a můžete začít třeba články o Habrém: Kurz pixelového umění

Najdete tam také základní principy pixel artu.

Zde je jeden příklad, jak kreslit pixel art (zrychlené video - rychlost kreslení) na úrovni začátečníka, můžete se naučit kreslit doslova za týden:

Pixelart:: kreslení vesmírné lodi

Někdy v tomto stylu dělají opravdu bláznivé kresby, ani se vám nechce věřit, že to někdo nakreslil a chcete vědět, kolik času na tom strávili. Příklad:

https://www.youtube.com/watch?v=vChMzRnw-Hc

Vidíte tento obrázek Sarah Carrigan ze StarCraftu? Co myslíte, že to je a jak se to vyrábí?

Tento muž ho postavil z bloků ve hře Minecraft, práce trvala 23 týdnů.

Při bližším pohledu můžete vidět, že se jedná o všechny samostatné bloky.

Formálně to už není pixel art, ale dokonce „minecraft block art“, ale podstata stylu zůstává stejná a toto je podle autora největší pixel art kresba a světový rekord.

Ve skutečnosti, když se pozorně podíváte na jakoukoli fotografii nebo obrázek, je zřejmé, že se také skládá z pixelů, jako každý obrázek obecně. Ale celý rozdíl je v tom, že pixel art se vytváří ručně, pixel po pixelu.

Další příklad, umělci a animátoři Paul Robertson a Ivan Dixon vytvořili toto:

SIMPSONS PIXELY

Připadá mi to jako obrovské množství práce, a i kdybyste použili nějaké další nástroje (existují filtry, které převádějí obrázky na pixel art), trvalo by to velmi dlouho.

Osobně si myslím, že obrázky ve stylu Pixel Art jsou tím pravým moderním uměním v tom nejlepším slova smyslu.

Každý obrázek Pixel Art má velmi jasnou hodnotu a je vidět a cítit.

I ten, kdo tomu nerozumí, to dokáže ocenit.

Tento žánr umění však bohužel není příliš populární a dnes je považován za zastaralý a návrat k němu v posledních letech v podobě mnoha her ze steamu ve stylu pixel artu také začíná lidem vadit. I když osobně si myslím, že tento retro grafický styl je již klasika a opravdová klasika nikdy nezemře.

Část 7: Textury a rozostření
Část 8: Svět dlaždic

Předmluva

Existuje mnoho definic pixel artu, ale zde použijeme toto: obrázek je pixel art, pokud je vytvořen zcela ručně, a existuje kontrola nad barvou a pozicí každého pixelu, který je nakreslen. V pixel artu samozřejmě nepoužíváme zahrnutí nebo použití štětců nebo nástrojů pro rozostření nebo degradovaných strojů (nejsem si jistý) a další softwarové možnosti, které jsou „moderní“ (ve skutečnosti nám dát k dispozici znamená „k dispozici“ , ale logicky se to zdá takto správnější). Omezuje se na nástroje tužky a výplně.

Nemůžete však říci, že pixel art nebo non-pixel art grafika jsou více či méně krásné. Je spravedlivější říci, že pixel art je jiný a lépe se hodí pro hry v retro stylu (jako Super Nintendo nebo Game Boy). Zde naučené techniky můžete také kombinovat s efekty z bezpixelového umění a vytvořit tak hybridní styl.

Zde se tedy naučíte technickou část pixel artu. Nikdy z vás však neudělám umělce... z toho prostého důvodu, že já také nejsem umělec. Nenaučím vás ani lidskou anatomii, ani strukturu umění a řeknu jen málo o perspektivě. V tomto tutoriálu můžete najít spoustu informací o technikách pixel art. Nakonec byste měli být schopni vytvářet postavy a kulisy pro své hry, za předpokladu, že budete dávat pozor, pravidelně cvičit a uplatňovat uvedené tipy.

- Také chci upozornit, že pouze některé obrázky použité v tomto návodu jsou zvětšené. U obrázků, které nejsou zvětšené, by bylo dobré, kdybyste si našli čas na zkopírování těchto obrázků, abyste si je mohli podrobně prostudovat. Pixel art je podstatou pixelů, jejich studium z dálky je zbytečné.

Na závěr musím poděkovat všem umělcům, kteří se ke mně při vytváření tohoto průvodce tak či onak přidali: Shinovi za jeho špinavou práci a perokresbu, Xenohydrogenovi, za jeho genialitu v barvách, Lunnovi za jeho znalost perspektivy, a Panda, přísní Ahruon, Dayo a Kryon za jejich velkorysé příspěvky k ilustraci těchto stránek.

Takže abych se vrátil k věci.

Část 1: Správné nástroje

Špatná zpráva: v této části nenakreslíte jediný pixel! (A to není důvod to přeskakovat, že?) Pokud existuje přísloví, které nesnáším, je to „neexistují špatné nástroje, pouze špatní pracovníci“. Vlastně jsem si myslel, že nic nemůže být dále od pravdy (možná kromě „co tě nezabije, to tě posílí“), a pixel art je velmi dobrým potvrzením. Cílem této příručky je seznámit vás s různým softwarem používaným k vytvoření pixel artu a pomoci vám vybrat správný program.

1. Některé staré věci

Když si lidé vybírají software k vytvoření pixel artu, často si myslí: „Výběr softwaru? To je šílené! Vše, co potřebujeme k vytvoření pixel artu, je malování (zřejmě hra se slovy, kreslení a program)“ Tragická chyba: Mluvil jsem o špatných nástrojích, tohle je první. Malování má jednu výhodu (a jedinou): již ji máte, pokud používáte Windows. Na druhou stranu má spoustu nedostatků. Toto je (neúplný) seznam:

*Nelze otevřít více než jeden soubor současně
* Žádné ovládání palety.
* Žádné vrstvy nebo průhlednost
* Žádné jiné než obdélníkové výběry
* Několik klávesových zkratek
* Strašně nepohodlné

Na Malování zkrátka můžete zapomenout. Nyní se podíváme na skutečný software.

2. Na závěr...

Lidé si pak myslí: "Dobře, Malování je pro mě příliš omezené, takže použiji svého přítele Photoshop (nebo Gimp nebo PaintShopPro, to je totéž), které mají tisíce funkcí." To může být dobré nebo špatné: pokud již některý z těchto programů znáte, můžete vytvořit pixel art (se všemi možnostmi automatického vyhlazování a vypnutými mnoha pokročilými funkcemi). Pokud tyto programy ještě neznáte, strávíte spoustu času jejich učením, i když nepotřebujete všechny jejich funkce, což bude ztráta času. Zkrátka, pokud je používáte delší dobu, můžete vytvářet pixelarty (já osobně používám Photoshop ze zvyku), ale jinak je mnohem lepší používat programy, které se na pixel art specializují. Ano, existují.

3. Krém

Existuje mnohem více programů určených pro pixel art, než by se mohlo zdát, ale zde zvážíme jen ty nejlepší. Všechny mají velmi podobné vlastnosti (ovládání palety, opakující se náhledy dlaždic, průhlednost, vrstvy atd.). Jejich rozdíly jsou v pohodlí... a ceně.

Charamaker 1999 je dobrý program, ale zdá se, že distribuce je pozastavena.

Graphics Gale je mnohem zábavnější a snadněji se používá a prodává se za přibližně 20 dolarů, což není tak špatné. Dovolte mi dodat, že zkušební verze není časově omezena a je dodávána s dostatečnou sadou na vytvoření docela dobré grafiky. Jen to nefunguje s .gif, což není takový problém, protože .png je každopádně lepší.

Pixel umělci častěji používají software ProMotion, který je (samozřejmě) pohodlnější a rychlejší než Graphics Gale. Ach ano, je drahá! Plnou verzi si můžete koupit za skromnou částku... 50 eur (78 dolarů).
Nezapomínejme na naše přátele Mac! Pixen je dobrý program dostupný pro Macintosh a je zdarma. Bohužel vám nemohu říct více, protože nemám Mac. Poznámka překladatele (z francouzštiny): Uživatelé Linuxu (a další) by měli vyzkoušet , a GrafX2. Vyzývám vás, abyste je všechny vyzkoušeli v demo verzích a zjistili, která vám vyhovuje. Nakonec je to věc vkusu. Jen vězte, že jakmile začnete používat program, může být velmi obtížné přejít na něco jiného.

Pokračování…

Poznámky překladatele z francouzštiny do angličtiny

Toto je skvělý návod na pixel art, který napsal Phil Razorbak z LesForges.org. Mnohokrát děkuji Philu Razorbackovi, že umožnil OpenGameArt.org přeložit tyto návody a umístit je zde. (Od překladatele do ruštiny: Nežádal jsem o povolení, pokud někdo chce, můžete pomoci, nemám dostatek zkušeností s komunikací v angličtině, natož ve francouzštině).

Poznámka překladatele z angličtiny do ruštiny

Jsem programátor, ne umělec nebo překladatel, překládám pro své přátele, ale ať je to promarněné, ať je to tady.
Originál ve francouzštině je někde zde www.lesforges.org
Překlad z francouzštiny do angličtiny zde: opengameart.org/content/les-forges-pixel-art-course
Překládal jsem z angličtiny, protože neumím francouzsky.
A ano, toto je moje první publikace, takže návrhy na design vítám. Navíc mě zajímá otázka: mají být zbývající části publikovány jako samostatné články, nebo je lepší aktualizovat a doplňovat tento?

Pokud jste si jako malí rádi hráli s Legem (nebo s ním pokračovali i jako dospělí), pravděpodobně vás bude zajímat izometrický pixel art. Může to být technické a spíše jako věda než ilustrace. Ale v takovém umění není žádná 3D perspektiva, můžete pohybovat prvky prostředí s maximální jednoduchostí.

Vytvoříme postavu jako logický výchozí bod pro pixel art, protože nám pomůže určit proporce pro většinu ostatních položek, které bychom mohli vytvořit. Nejprve se však musíte naučit některé základy izometrického pixelového umění a poté přejít k vytváření postavy; pokud se nechcete učit základy a kreslit krychli, přejděte ke kroku 3. Nyní začněme.

1. Pixelové čáry

Tyto řádky jsou základem nejběžnějšího (a nejzajímavějšího) stylu izometrického pixel artu, stylu, který použijeme v tomto tutoriálu:

Představují dva pixely na každý pixel dolů. Tyto linie vypadají poměrně jemně a používají se pro čtvercové povrchy:

Nejčastěji používané čárové struktury (jako je ta níže) budou fungovat dobře, ale kresba bude hranatější a hrubší s každým zvýšením:

Pro kontrast jsou zde některé nerovnoměrně strukturované řádky:

Velmi hranaté a nedívejte se

Krásný. Vyhněte se jejich používání.

2. Svazky

Naše postava se nebude přesně řídit zákony izometrie, takže nejprve vytvoříme jednoduchou krychli, abychom rozhodli o proporcích.

Vytvořte nový dokument ve Photoshopu s rozlišením 400 x 400 px.

Rád otevřu další okno pro stejný soubor pomocí nabídky Okno > Uspořádat > Nové okno/lekce.(Okno > Uspořádat > Nové okno…). To umožňuje pracovat se zvětšením 600% sledovat výsledky v zoom okně 100% . Použití mřížky je na vás, ale někdy mi to připadá spíše rušivé než užitečné.

Pojďme si dokument přiblížit a vytvořit jednu z čar 2:1

Raději používám 5% šedé místo černé, abych pak mohl přidat stíny (černé a nízké krytí) a mohl pomocí kouzelné hůlky vybrat každou barvu zvlášť.

Existuje několik způsobů, jak nakreslit čáru:

1. Použití Nástroj čára(Line Tool) s režimem Pixely(Pixely), nezaškrtnuto Vyhlazování(Anti-alias) a tloušťka 1px. Během kreslení by se měla zobrazit nápověda úhlu 26,6°. Ve skutečnosti nelze nástroj Čára nazvat pohodlným, vytváří nerovnoměrné čáry, pokud úhel není přesný.

2. Musíte vytvořit výběr 20 x 40 px a poté vyberte K tužka(nástroj Pencil) tloušťka 1px a nakreslete tečku do levého dolního rohu výběru a poté podržte klávesu Posun klikněte v pravém horním rohu. Photoshop automaticky vytvoří novou čáru mezi dvěma body. Pokud budete cvičit, můžete tímto způsobem vytvořit rovné linie bez zvýrazňování.

3. Je třeba nakreslit dva pixely tužkou, vybrat je, kliknout Ctrl+Alt a poté přetáhněte výběr do nového umístění tak, aby se obrazové body setkávaly v rozích. Výběr můžete také posouvat pomocí kláves se šipkami na klávesnici při současném podržení Alt. Tato metoda se nazývá Alt-offset(Alt-Nudge).

Tak jsme vytvořili první řádek. Vyberte ji a přesuňte ji jako v kroku 3 nebo ji pouze zkopírujte a vložte a přesuňte novou vrstvu dolů. Poté otočte druhý řádek vodorovně přes nabídku Úpravy > Transformovat > Převrátit vodorovně(Úpravy > Transformovat > Převrátit vodorovně). Tuto funkci používám tak často, že jsem si pro ni vytvořil i klávesovou zkratku!

Nyní spojíme naše řádky:

Poté znovu stiskněte Alt-Offset, otočte kopii svisle a spojte obě poloviny, abyste dokončili náš povrch:

Je čas přidat „třetí rozměr“. Alt odsaďte čtvercový povrch a přesuňte jej na 44 pixelů dolů:

Tip: Pokud při pohybu podržíte klávesy se šipkami Posun, výběr se přesune na 10 pixelů místo jednoho.

Chcete-li vytvořit úhlednější kostku, změkčeme rohy odstraněním pixelů nejvíce vlevo a nejvíce vpravo ze čtverců. Poté přidejte svislé čáry:

Nyní odstraňte nepotřebné čáry na spodní části krychle. Chcete-li začít barvit naši postavu, vyberte libovolnou barvu (nejlépe světlý odstín) a vyplňte jí horní čtverec.

Nyní zvyšte jas vybrané barvy o 10% (Doporučuji použít posuvníky HSB na ovládacím panelu) k malování světlejších rohů podél přední části našeho barevného čtverce. Protože jsme kostku trochu ořízli, budou tyto světlé čáry vypadat hezčí nad černými okraji (místo toho, aby je nahradily), jako na obrázku níže:

Nyní musíme odstranit černé okraje. Použijte trik z druhé metody kreslení čar pro gumu (která by měla být nastavena na normální Nástroj Guma(Eraser Tool), režim Tužka(Režim tužky), tloušťka 1px).

Vyberte barvu horního čtverce pomocí Pipety(Nástroj kapátko). Chcete-li tento nástroj rychle vybrat, když kreslíte tužkou nebo výplní, stiskněte Alt. Výslednou barvou kapátka vyplňte svislou čáru uprostřed krychle. Poté snižte jas barev o 15% a výslednou barvou vyplňte levou stranu kostky. Dále snižte jas 10% pro pravou stranu:

Naše kostka je kompletní. Při přiblížení by měl vypadat čistě a relativně hladce 100% . Můžeme pokračovat.

3. Přidejte znak

Styl postavy může být zcela odlišný, proporce nebo prvky můžete libovolně měnit. Obvykle volím hubené tělo a trochu větší hlavu. Tenké tělo postavy pomáhá udržet linie rovné a jednoduché.

Bylo by logické začít očima. Pokud bychom byli na izometrické úhly přísní, tak na obličeji by mělo být jedno oko níže, ale v malém měřítku můžeme tuto vlastnost zanedbat, abychom zpříjemnili obličeje postav. Díky tomu bude kresba úhledná i přes velikost.

Postavu děláme malou, protože po chvíli k ní možná budete chtít přidat auto, dům, celé náměstí nebo dokonce město. Postava by proto měla být jedním z nejmenších prvků na obrázku. Za zvážení stojí také grafická efektivita; snažte se, aby postava byla co nejatraktivnější s minimálním počtem pixelů (dostatečně velkými, aby zobrazily rysy obličeje). Malé předměty se navíc kreslí mnohem snadněji. Výjimkou je situace, kdy chcete pouze ukázat postavu, její emoce nebo její podobnost s někým.

Vytvoříme novou vrstvu. Oči potřebují pouze dva pixely – jeden pro každé oko, s prázdným pixelem mezi nimi. Přeskočte jeden pixel nalevo od očí a přidejte svislou čáru:

Nyní přidejte další vrstvu a nakreslete vodorovný pruh dvou pixelů, to bude ústa. Pohybujte se pomocí kláves se šipkami na klávesnici, a když najdete perfektní pozici, posuňte vrstvu dolů. Udělejte totéž s bradou, měla by to být jen delší čára:

Nakreslete vlasy a temeno hlavy, poté změkčte rohy. Měli byste dostat něco podobného:

Nyní ponechte prázdný pixel vedle druhého oka, přidejte bokombrady (které také pomohou vykreslit uši postavy) a několik dalších pixelů nad nimi až k linii vlasů. Poté ponechte další prázdný pixel, zde bude začínat ucho a čára označující konec hlavy. Pokračujte a změkčte úhly, kde se čáry setkávají:

Přidejte pixel pro horní část ucha a změňte tvar hlavy, pokud chcete; hlavy jsou obvykle nakresleny již v oblasti krku:

Nakreslete čáru od brady - to bude hrudník. Začátek krku bude v oblasti uší, pár pixelů dolů a pár pixelů diagonálně, aby byla vidět ramena naší postavy:

Nyní v místě, kde končí ramena, přidejte svislou čáru délky 12 pixelů pro vytvoření vnější strany ruky a vnitřek bude o dva pixely vlevo. Spojte čáry ve spodní části pomocí několika pixelů, abyste vytvořili ruku/pěst (v tomto případě zde nejsou žádné podrobnosti, takže tento prvek ignorujte) a těsně nad místem, kde končí ruka, přidejte čáru 2:1 , který bude fungovat jako pas, poté vtáhněte linii hrudníku a získejte kompletní horní část těla. Druhá paže postavy není vidět, ale bude vypadat normálně, protože ji zakrývá trup.

Měli byste skončit s něčím takovým:

Samozřejmě můžete použít libovolné proporce; Dávám přednost kreslení různých možností vedle sebe, než se rozhodnu, která je nejlepší.

Nyní pro spodní část trupu přidáme další svislé čáry. Rád odcházím 12 pixelů mezi podrážkou a pasem. Nohy se kreslí velmi snadno, stačí udělat jednu nohu o něco delší, což umožní postavě vypadat objemnější:

Nyní přidáme barvu. Najít dobrou barvu pleti je vždy obtížné, takže pokud chcete použít stejnou barvu jako v tomto tutoriálu, její kód #FFCCA5. Výběr barev pro zbývající prvky by neměl být problém. Poté určete délku rukávů, polohu střihu košile a její styl. Nyní přidejte tmavý pruh, abyste oddělili košili od těla. Dávám přednost tomu, aby byly všechny dekorativní prvky světlejší než černá (zvláště když je mnoho prvků na stejné úrovni, například od košile po kůži nebo kalhoty). To vám umožní získat potřebný kontrast, aniž by byl obraz příliš hrubý.

Téměř do každé barevné zóny můžete přidat světelné efekty. Nepoužívejte příliš mnoho stínů nebo přechodů. O několik pixelů více ( 10% nebo 25% ) stačí světlá nebo tmavá barva, aby prvky vypadaly trojrozměrně a odstranily se plochost ilustrace. Pokud chcete do oblasti, která již má, přidat barevný nádech 100% jas, zkuste snížit jeho sytost. V některých případech (jako je kreslení vlasů) to může být dobrý způsob, jak měnit tóny.

Existuje mnoho možností pro vlasy, které můžete vyzkoušet. Zde je několik nápadů:

Jak budete pokračovat ve vytváření postav, budou se vám pro zpestření hodit maličkosti jako styl oblečení, délka rukávu, délka kalhot, doplňky, oblečení a barva pleti.

Nyní zbývá pouze umístit oba prvky dohromady a vyhodnotit, jak vypadají v jednom nastavení:

Pokud chcete svůj výtvor exportovat, PNG je ideální formát.

To je ono, práce hotová!

Doufám, že tato lekce nebyla příliš matoucí. Myslím, že jsem probral co nejvíce tipů a estetických triků. Svůj izometrický pixelový svět můžete libovolně rozšiřovat – budovy, auta, interiéry, exteriéry. To vše je možné a dokonce zajímavé, i když ne tak snadné.

Překladatel: Shapoval Alexey