Kde kreslit pixel art. Co je Pixel Art? Barevný model HSB



Čá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á správnější takto). 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 nejsem ani 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 tutoriálu 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 tohoto průvodce je seznámit vás s různými software, který se používá k vytvoření pixel artu a pomůže 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ý má 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 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 - dobrý program, ale zdá se, že distribuce se zastavila.

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, aby toho bylo dost dobrá grafika. 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á! Můžete si koupit plnou verzi 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. Děkuji mnohokrát Philu Razorbakovi za to, že umožnil OpenGameArt.org překládat tyto návody a zveřejňovat 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?

Adobe Photoshop: Nakreslete a animujte postavu Technologie pixelů Umění

V této lekci se naučíte kreslit a animovat postavy pomocí techniky Pixel Art. K tomu potřebujete pouze Adobe Photoshop. Výsledkem bude GIF s běžícím astronautem.

Program: Adobe Photoshop Obtížnost: začátečníci, středně pokročilí Časová náročnost: 30 min – hodina

I. Nastavení dokumentu a nástrojů

Krok 1

Z panelu nástrojů vyberte tužku – to bude hlavní nástroj naší lekce. V nastavení vyberte typ štětce Hard Round a zbývající hodnoty nastavte jako na obrázku. Naším cílem je, aby hrot tužky byl co nejostřejší.

Krok 2

V nastavení Eraser Tool (guma) vyberte režim tužky a nastavte zbývající hodnoty, jak je znázorněno na obrázku.

Krok 3

Zapněte Pixelovou mřížku (Zobrazit > Zobrazit > Pixelová mřížka). Pokud taková položka v nabídce není, pak přejděte do nastavení a zapněte grafickou akceleraci Předvolby > Výkon > Grafická akcelerace.

Poznámka: Mřížka bude na nově vytvořeném plátně viditelná pouze při přiblížení na 600 % nebo více.

Krok 4

V Preferences > General (Control-K) změňte režim interpolace obrazu na režim Nearest Neighbor. To umožní, aby hranice objektů zůstaly co nejjasnější.

V nastavení Jednotky a pravítka nastavte jednotky pravítek na pixely Předvolby > Jednotky a pravítka > Pixely.

II. Tvorba postavy

Krok 1

A nyní, když je vše nastaveno, můžeme přistoupit přímo ke kreslení postavy.

Načrtněte svou postavu s jasným obrysem a dávejte pozor, abyste ji nepřetěžovali. malé detaily. V této fázi na barvě vůbec nezáleží, hlavní věc je, že obrys je jasně nakreslený a chápete, jak bude postava vypadat. Tento náčrt byl připraven speciálně pro tuto lekci.

Krok 2

Zmenšete měřítko náčrtu na výšku 60 pixelů pomocí klávesové zkratky Control+T nebo Úpravy > Volná transformace.

Velikost objektu je zobrazena v informačním panelu. Vezměte prosím na vědomí, že nastavení interpolace je stejné jako v kroku 4.

Krok 3

Přibližte si skicu o 300–400 %, abyste si usnadnili práci a snížili neprůhlednost vrstvy. Poté vytvořte novou vrstvu a nakreslete obrysy náčrtu pomocí nástroje Tužka. Pokud je znak symetrický, jako v našem případě, můžete obrys pouze z poloviny a poté jej duplikovat a převrátit jako zrcadlo (Úpravy > Transformovat > Převrátit vodorovně).

Rytmus: Kreslit komplexní prvky rozbít je na kousky. Když pixely (tečky) v linii tvoří „rytmus“, jako je 1-2-3 nebo 1-1-2-2-3-3, náčrt vypadá hladší pro lidské oko. Ale pokud to forma vyžaduje, může být tento rytmus narušen.

Krok 4

Když je obrys připraven, můžete si vybrat hlavní barvy a malovat velké tvary. Udělejte to na samostatné vrstvě pod obrysem.

Krok 5

Vyhlaďte obrys nakreslením stínu podél vnitřního okraje.

Pokračujte v přidávání stínů. Jak jste si mohli všimnout při kreslení, některé tvary lze opravit.

Krok 6

Vytvořte novou vrstvu pro zvýraznění.

Z rozevíracího seznamu na panelu Vrstvy vyberte režim prolnutí Překrytí. Remíza světlá barva přes oblasti, které chcete zvýraznit. Světla pak vyhlaďte pomocí Filtr > Rozostření > Rozostření.

Dokončete obrázek, zkopírujte a zrcadlově zkopírujte hotovou polovinu obrázku, poté spojte vrstvy s polovinami, abyste vytvořili celý obrázek.

Krok 7

Nyní musí astronaut přidat kontrast. Použijte nastavení Úrovně (Obrázek > Úpravy > Úrovně), aby byl jasnější, a poté upravte odstín pomocí možnosti Vyvážení barev (Obrázek > Úpravy > Vyvážení barev).

Postava je nyní připravena k animaci.

III. Animace postav

Krok 1

Vytvořte kopii vrstvy (Vrstva > Nová > Vrstva přes kopírování) a posuňte ji o 1 pixel nahoru a 2 pixely doprava. To je klíčový bod v animaci postav.

Snižte krytí původní vrstvy o 50 %, abyste viděli předchozí snímek. Toto se nazývá „Stahování cibule“ (množné číslo).

Krok 2

Nyní ohněte ruce a nohy své postavy, jako by běžela.

● Zvýrazněte levá ruka Nástroj laso

● Pomocí nástroje FreeTransformTool (Úpravy > FreeTransform) a podržením klávesy Control posuňte okraje kontejneru tak, aby se ruka posunula zpět.

● Nejprve vyberte jednu nohu a trochu ji protáhněte. Druhou nohu pak zmáčkněte naopak tak, aby měla pocit, že postava chodí.

● Pomocí tužky a gumy upravte část pravé paže pod loktem.

Krok 3

Nyní musíte zcela překreslit novou polohu paží a nohou, jak je znázorněno v druhé části této lekce. To je nutné, aby obraz vypadal jasně, protože transformace značně deformuje linie pixelů.

Krok 4

Vytvořte kopii druhé vrstvy a otočte ji vodorovně. Nyní máte 1 základní pózu a 2 v pohybu. Obnovte krytí všech vrstev na 100 %.

Krok 5

Přejděte do okna > Časová osa, abyste zobrazili panel Časová osa, a klepněte na Vytvořit animaci snímku.

Pixel Art (Pixel grafika) je velmi populární pro hry i v dnešní době a existuje pro to několik důvodů!

Co tedy uchvacuje Pixel Art:

  1. Vnímání. Pixel Art vypadá úžasně! Je toho hodně, co lze říci o každém jednotlivém pixelu ve spritu.
  2. Nostalgie. Pixel Art přináší skvělý nostalgický pocit pro hráče, kteří vyrostli na Nintendo, Super Nintendo nebo Genesis (jako já!)
  3. Snadno se učí. Pixel Art je jedním z nejjednodušších typů na naučení digitální umění, zvláště pokud jste více programátor než umělec;]

Tak co, chcete si vyzkoušet Pixel Art? Pak se mnou následujte, když vám ukážu, jak vytvořit jednoduchou, ale efektivní herní postavu, kterou můžete použít ve své vlastní hře! Navíc se jako bonus podíváme na to, jak jej integrovat do her pro iPhone!

K úspěšnému učení budete potřebovat Adobe Photoshop. Pokud jej nemáte, můžete si stáhnout bezplatnou zkušební verzi z webu Adobe nebo z torrentu.

Co je Pixel Art?

Než začneme, ujasněme si, co Pixel Art je, protože to není tak samozřejmé, jak si možná myslíte. Nejjednodušší způsob, jak definovat, co je Pixel Art, je definovat, co není, konkrétně: cokoli, kde se pixely vytvářejí automaticky. Zde je několik příkladů:

Gradient: Vyberte dvě barvy a vypočítejte barvu pixelů mezi nimi. Vypadá to skvěle, ale není to Pixel Art!

Nástroj pro rozostření: Definování pixelů a jejich replikace/úpravy nová verze předchozí obrázek. Opět ne pixel art.

Hladký nástroj(v podstatě generování nových pixelů v různých barvách, aby bylo něco "hladké"). Musíte se jim vyhnout!

Někdo řekne, že ani automaticky generované barvy nejsou Pixel Art, protože vyžadují vrstvu pro míchání efektů (míchání pixelů mezi dvěma vrstvami podle daného algoritmu). Ale protože většina zařízení dnes pracuje s miliony barev, lze toto tvrzení ignorovat. Využití však není velké množství barvy je dobrá praxe v Pixel art.

Další nástroje jako např (řádek) popř nástroj kbelík s barvou(Paint Bucket) také automaticky generuje pixely, ale protože je můžete nastavit tak, aby nevyhladily pixely, které vyplníte, jsou tyto nástroje považovány za přátelské k Pixel Art.

Zjistili jsme tedy, že Pixel Art vyžaduje hodně pozornosti při umístění každého pixelu do spritu, nejčastěji ručně a s omezenou paletou barev. Pojďme se pustit do práce!

Začínáme

Než začnete vytvářet své první dílo Pixel Art, měli byste vědět, že Pixel Art nelze měnit. Pokud se jej pokusíte zmenšit, vše bude vypadat rozmazaně. Pokud se pokusíte přiblížit, bude vše vypadat v pořádku, pokud použijete zoom násobek dvou (ale samozřejmě nebude ostrý).

Abyste se tomuto problému vyhnuli, musíte nejprve pochopit, jak velký je váš herní postava, nebo prvek hry, a pak se pusťte do práce. Nejčastěji je to založeno na velikosti obrazovky zařízení, na které cílíte, a na tom, kolik „pixelů“ chcete vidět.

Pokud například chcete, aby hra vypadala dvakrát tak velká na obrazovce iPhonu 3GS („Ano, opravdu chci dát své hře retro pixelový vzhled!“), jehož rozlišení obrazovky je 480 x 320 pixelů, musíte pracovat s polovičním rozlišením V v tomto případě bude to 240x160 pixelů.

Otevřete nový dokument Photoshopu ( Soubor → Nový…) a nastavte velikost na jakoukoli velikost vaší herní obrazovky, poté vyberte velikost své postavy.

Každá buňka má 32 x 32 pixelů!

32x32 pixelů jsem zvolil nejen proto, že se perfektně hodí k vybrané velikosti obrazovky, ale také proto, že 32x32 pixelů je také násobkem 2, což je vhodné pro hračkářské motory (velikosti dlaždic jsou často násobky 2, textury jsou zarovnány násobky 2, atd.

I když engine, který používáte, podporuje jakoukoli velikost obrázku, vždy můžete zkusit pracovat se sudým počtem pixelů. V tomto případě, pokud je potřeba obrázek zmenšit, bude velikost lépe rozdělena, což v konečném důsledku povede k lepšímu výkonu.

Kreslení postavičky Pixel Art

Pixel Art je známý jako jasná a snadno čitelná grafika: pomocí několika bodů můžete definovat rysy obličeje, oči, vlasy, části těla. Úkol však komplikuje velikost obrázku: čím menší je vaše postava, tím obtížnější je kreslit. Chcete-li být praktičtější, zvolte nejmenší charakterový rys. Vždy si vybírám oči, protože jsou jedním z nejlepších způsobů, jak oživit postavu.

Ve Photoshopu vyberte Nástroj tužka(Nástroj tužka). Pokud jej nemůžete najít, stačí nástroj stisknout a podržet Nástroj štětec(Nástroj štětec) a hned ho uvidíte (měl by být druhý v seznamu). Stačí změnit jeho velikost na 1 pixel (můžete kliknout na lištu Možnosti nástroje a změnit jeho velikost, nebo stačí podržet klávesu [).

Budete také potřebovat Nástroj pro vymazání(Eraser Tool), klikněte na něj (nebo stiskněte E) a změňte jeho nastavení výběrem z rozevíracího seznamu režim:(režim :) Tužka(Tužka) (protože v tomto režimu není žádné vyhlazování).

Nyní začněme pixelovat! Nakreslete obočí a oči, jak je znázorněno na obrázku níže:


ej! Jsem pixelovaná!!

Už byste mohli začít s Lineartem, ale praktičtější způsob je nakreslit siluetu postavy. Dobrá zpráva je, že v této fázi nemusíte být profík, jen si zkuste představit velikost částí těla (hlava, trup, ruce, nohy) a počáteční pózu postavy. Zkuste něco takového šedá:


V této fázi nemusíte být profík
Všimněte si, že jsem také nechal nějaké prázdné místo. Opravdu nemusíte vyplnit celé plátno, ponechte místo pro budoucí snímky. V tomto případě bude velmi užitečné zachovat pro všechny stejnou velikost plátna.

Po dokončení siluety je čas . Nyní musíte být opatrnější s umístěním pixelů, takže se nemusíte starat o oblečení, brnění atd. Pro jistotu můžete přidat novou vrstvu, abyste nikdy neztratili svou původní siluetu.


Pokud máte pocit, že je nástroj tužka příliš pomalý na kreslení, můžete jej vždy použít (Nástroj Čára), jen si pamatujte, že nebudete schopni umístit pixely tak přesně, jak to dokážete pomocí tužky. Budete muset nakonfigurovat jak je uvedeno níže:

Vybrat , stiskněte a podržte Nástroj obdélník(nástroj obdélník)

Přejděte na panel možností nástroje v rozevíracím seznamu Vyberte režim nástroje(Režim sledování cesty) vyberte Pixel , změňte Hmotnost(Tloušťka) na 1px (pokud již nebylo provedeno) a zrušte zaškrtnutí Anti-alias(Vyhlazení). Takto byste to měli mít:

Všimněte si, že jsem neudělal spodní obrys pro nohy. To je volitelné, protože chodidla nejsou tak důležitou součástí nohou, aby se zvýraznily, a ušetří se tím jeden řádek pixelů na plátně.

Nanášení barev a stínů

Nyní jste připraveni začít vybarvovat naši postavu. S výběrem správných barev si nelámejte hlavu, později se budou velmi snadno měnit, jen dbejte na to, aby každá měla svou "svou barvu". Použijte výchozí barvy na kartě Vzorníky(Okno → Vzorník).

Vybarvěte svou postavu jako na obrázku níže (ale buďte kreativní a použijte své vlastní barvy!)


Dobrá, kontrastní barva zlepšuje čitelnost vašeho podkladu!
Upozorňuji, že jsem stále nenastínil oblečení ani vlasy. Vždy pamatujte: uložte co nejvíce pixelů z nepotřebných obrysů!

Není třeba ztrácet čas malováním každého pixelu. Pro urychlení práce použijte linky pro stejnou barvu, popř Nástroj kbelík s barvou(Nástroj Paint Bucket Tool) k vyplnění mezer. Mimochodem, budete ho muset také nakonfigurovat. Vybrat Nástroj kbelík s barvou na panelu nástrojů (nebo stačí stisknout klávesu G) a změnit Tolerance(Tolerance) na 0 a také zrušte zaškrtnutí Anti-alias(Vyhlazení).

Pokud někdy budete potřebovat použít Nástroj Kouzelná hůlka(Nástroj kouzelná hůlka) – velmi užitečný nástroj, který vybere všechny pixely se stejnou barvou a poté jej nastaví stejným způsobem jako nástroj „Paint Bucket“ – žádná tolerance a vyhlazování.

Dalším krokem, který bude vyžadovat určité znalosti z vaší strany, je uhýbání a stínování. Pokud nemáte znalosti o tom, jak ukázat světlé a temné stránky, pak vám níže dám krátký návod. Pokud nemáte čas nebo chuť to studovat, můžete tento krok přeskočit a přejít do sekce "Spice Up Your Palette", protože nakonec můžete stínování udělat stejně jako v mém příkladu!


Použijte stejný zdroj světla pro celý majetek

Snažte se mu dát tvary, které chcete/můžete, protože poté začne aktivum vypadat zajímavěji. Například teď můžete vidět nos, zamračené oči, mop vlasů, záhyby na kalhotách atd. Můžete na něj přidat i nějaké světlé skvrny, bude to vypadat ještě lépe:


Při zastínění použijte stejný zdroj světla

A teď, jak jsem slíbil malý průvodce ve světlech a stínech:

Okořeňte svou paletu

Mnoho lidí používá výchozí barvy palety, ale protože tyto barvy používá mnoho lidí, můžeme je vidět v mnoha hrách.

Photoshop má ve své standardní paletě velký výběr barev, ale neměli byste na to příliš spoléhat. Nejlepší způsob, jak vytvořit vlastní barvy, je kliknout na hlavní paletu v dolní části panelu nástrojů.

Poté v okně Výběr barvy procházením pravého postranního panelu vyberte barvu a hlavní oblast pro výběr požadovaného jasu (světlejší nebo tmavší) a sytosti (bohatší nebo matnější).


Jakmile najdete požadovaný, klepněte na OK a překonfigurujte nástroj Paint Bucket. Nebojte se, pak můžete jednoduše zrušit zaškrtnutí políčka 'Contiguous' a když budete malovat novou barvou, všechny nové pixely se stejnou barvou pozadí budou také vyplněny.

To je další důvod, proč je důležité s ním pracovat velký počet barvy a vždy použít stejnou barvu pro stejný prvek (trička, vlasy, helma, brnění atd.). Ale nezapomeňte použít různé barvy pro jiné oblasti, jinak bude naše kresba příliš přebarvená!

Chcete-li vybrané pixely vyplnit stejnou barvou, zrušte zaškrtnutí políčka "Contiguous".

Pokud chcete, změňte barvy a získejte okouzlující zbarvení postavy! Můžete dokonce přebarvit obrysy, jen se ujistěte, že dobře splývají s pozadím.


Nakonec udělejte barevný test pozadí: vytvořte pod svou postavou novou vrstvu a vyplňte ji různé barvy. To má zajistit, že vaše postava bude viditelná na světlém, tmavém, teplém a chladném pozadí.


Jak již můžete vidět, vyhlazování jsem vypnul ve všech nástrojích, které jsem doposud používal. Nezapomeňte to udělat i v jiných nástrojích, např. Eliptický markýz(Oválná markýza) a Laso(Laso).

Pomocí těchto nástrojů můžete snadno měnit velikost vybraných dílů nebo je dokonce otáčet. Chcete-li to provést, použijte libovolný nástroj pro výběr (nebo stiskněte M) pro výběr oblasti, klepněte pravým tlačítkem a vyberte Volná transformace(Free Transform), nebo stačí stisknout Ctrl + T. Chcete-li změnit velikost vybrané oblasti, přetáhněte jeden z úchytů umístěných po obvodu rámce transformace. Chcete-li změnit velikost výběru při zachování proporcí, podržte klávesu Shift a přetáhněte jeden z rohových úchytů.

Photoshop však automaticky vyhlazuje vše, co bylo upraveno pomocí Volná transformace takže před úpravou přejděte na Upravit → Předvolby → Obecné(Ctrl + K) a změňte Interpolace obrazu(Interpolace obrazu) zapnuto Nejbližší soused(nejbližší soused). Stručně řečeno, kdy Nejbližší soused nová pozice a velikost jsou vypočítány velmi zhruba, nejsou aplikovány žádné nové barvy ani neprůhlednost a barvy, které si vyberete, jsou zachovány.


Integrace Pixel Art do her pro iPhone

V této části se dozvíte, jak integrovat naše pixelové umění do hry pro iPhone pomocí herního rámce Cocos2d. Proč zvažuji pouze iPhone? Protože díky sérii článků o Unity (například: , nebo Hra ve stylu Jetpack Joyride v Unity 2D) už víte, jak s nimi v Unity pracovat, a z článků o Crafty (prohlížečové hry: Snake) a Impact (Úvod do vytváření her pro prohlížeče na Impactu) jste se naučili, jak je vkládat na plátno a vytvářet hry v prohlížeči.

Pokud s Cocos2D nebo s vývojem aplikací pro iPhone obecně začínáte, doporučuji vám začít s některým z výukových programů Cocos2d a iPhone. Pokud máte nainstalované Xcode a Cocos2d, čtěte dále!

Vytvořte nový projekt iOS → cocos2d v2.x → šablona cocos2d pro iOS, pojmenujte jej PixelArt a jako zařízení vyberte iPhone. Přetáhněte vytvořený pixel art, například: sprite_final.png, do svého projektu a poté jej otevřete HelloWorldLayer.m a nahraďte inicializační metodu následujícím:

-(id) init ( if((self=)) ( CCSprite * hrdina = ; hrdina.pozice = ccp(96, 96); hrdina.flipX = ANO; ; ) vrátit sebe; )

Sprite umístíme na levou stranu obrazovky a otočíme tak, aby směřoval doprava. Zkompilujte, spusťte a poté uvidíte svého sprite na obrazovce:


Pamatujte si však, že jak jsme diskutovali dříve v tomto tutoriálu, chtěli jsme umělým způsobem zvětšit měřítko pixelů tak, aby byl každý pixel znatelně odlišitelný od ostatních. Přidejte tedy tento nový řádek do inicializační metody:

Hero.scale = 2,0;

Nic složitého, že? Zkompilujte, spusťte a... počkejte, náš sprite je rozmazaný!

Je to proto, že ve výchozím nastavení Cocos2d vyhlazuje kresbu, když mění její měřítko. Nepotřebujeme to, takže přidejte následující řádek:

Tento řádek konfiguruje Cocos2d tak, aby škáloval obrázky bez vyhlazování, takže náš chlap stále vypadá "pixelovaně" Zkompilujte, spusťte a... ano, funguje to!


Podívejte se na výhody používání Pixelu Umělecká grafika- můžeme použít menší obrázek, než jaký je zobrazen na obrazovce, což ušetří spoustu texturové paměti. Nemusíme ani vytvářet samostatné obrázky pro displeje sítnice!

co bude dál?

Doufám, že se vám tento tutoriál líbil a dozvěděli jste se něco více o pixel artu! Před rozchodem vám chci poradit:

  • Vždy se snažte vyhnout použití vyhlazování, přechodů nebo příliš mnoha barev na vašich podkladech. Je to pro vaše vlastní dobro, zvláště pokud jste ještě začátečník.
  • Pokud OPRAVDU chcete napodobit retro styl, podívejte se na kresbu v 8bitových nebo 16bitových konzolových hrách.
  • Některé styly nepoužívají tmavé obrysy, jiné neberou v úvahu efekty světla nebo stínu. Vše záleží na stylu! V našem tutoriálu jsme stíny nekreslili, ale to neznamená, že byste je neměli používat.

Pro začátečníka se Pixel Art jeví jako nejjednodušší grafika na naučení, ale ve skutečnosti to není tak jednoduché, jak se zdá. Nejlepší způsob Chcete-li zlepšit své dovednosti, je to praxe, praxe, praxe. Vřele doporučuji zveřejnit své práce na fórech Pixel Art, aby vám ostatní umělci mohli poradit - to je skvělý způsob zlepšit svou techniku! Začněte v malém, hodně trénujte, získejte zpětnou vazbu a můžete vytvořit úžasnou hru, která vám přinese spoustu peněz a radosti!

Pixelová grafika (dále jen pixel art) je v dnešní době stále populárnější, a to zejména prostřednictvím indie her. Je to pochopitelné, protože tak mohou umělci naplnit hru velkým množstvím postav a netrávit stovky hodin modelováním 3D objektů a ručním kreslením složitých objektů. Pokud se chcete naučit pixel art, pak se nejprve budete muset naučit kreslit takzvané „sprity“. Potom, když už vás skřítci nebudou děsit, můžete přejít k animaci a dokonce i k prodeji své práce!

Kroky

Část 1

Sbíráme vše, co potřebujete

    Stáhněte si dobré grafické editory. V Malování můžete samozřejmě vytvářet mistrovská díla, ale je to obtížné a ne příliš pohodlné. Bylo by mnohem lepší pracovat v něčem jako:

    • Photoshop
    • Paint.net
    • Pixen
  1. Kupte si grafický tablet. Pokud neradi kreslíte myší, pak potřebujete tablet a stylus. Tablety Wacom jsou mimochodem nejoblíbenější.

    Povolte „mřížku“ ve svém grafickém editoru. Ve skutečnosti, pokud váš grafický editor nepodporuje zobrazení mřížky, měli byste přemýšlet o hledání jiného programu. Mřížka vám umožní jasně vidět, kde a jak bude každý jednotlivý pixel umístěn. Zpravidla se růženec zapíná přes nabídku „Zobrazit“.

    • Možná budete muset trochu upravit nastavení zobrazení, abyste zajistili, že každý segment mřížky skutečně vykreslí pixel. Každý program to dělá jinak, takže podle toho hledejte tipy.
  2. Kreslete tužkou a štětcem o velikosti 1 pixel. Každý grafický editor by měl mít nástroj „Tužka“. Vyberte jej a nastavte velikost štětce na 1 pixel. Nyní můžete kreslit... v pixelech.

    Část 2

    Práce na základech

    Vytvořte nový obrázek. Protože se učíte kreslit ve stylu pixel art, neměli byste cílit na epická plátna. Pokud si vzpomínáte, ve hře Super Mario Bros. celá obrazovka měla 256 x 224 pixelů a sám Mario se vešel do prostoru 12 x 16 pixelů!

    1. Přiblížit. Ano, jinak jednoduše neuvidíte jednotlivé pixely. Ano, budete to muset hodně zvýšit. Řekněme, že 800 % je zcela normální.

      Naučte se kreslit rovné čáry. Zdá se to jednoduché, ale když najednou někde uprostřed nakreslíte třesoucí se rukou čáru o tloušťce 2 pixely, rozdíl vám bije do očí. Kreslit rovné čáry, dokud nebudete muset aktivovat nástroj přímka. Musíte se naučit kreslit rovné čáry ručně!

      Naučte se kreslit zakřivené čáry. V zakřivené čáře by měly být, řekněme, jednotné „lomy čar“ (což je jasně vidět na obrázku výše). Řekněme, že když začneme kreslit zakřivenou čáru, nakreslete rovnou čáru 6 pixelů, pod ní rovnou čáru ze tří, pod ní rovnou čáru ze dvou a pod ní rovnou čáru o jednom pixelu. Na druhou stranu nakreslete to samé (samozřejmě zrcadlově). Toto je progrese, která je považována za optimální. Křivky nakreslené ve vzoru „3-1-3-1-3-1-3“ nesplňují standardy pixel art.

      Nezapomeňte mazat chyby. Nástroj „Guma“ by měl být nastaven stejným způsobem jako tužka, takže velikost štětce je 1 pixel. Čím větší je guma, tím obtížnější je nemazat příliš mnoho, takže je vše logické.

      Část 3

      Vytvoření prvního sprite
      1. Přemýšlejte o tom, k jakým účelům bude skřítek sloužit. Bude to statické? Animovaný? Statický sprite může být plný detailů, ale animovaný je lepší, aby to bylo jednodušší, abyste nestrávili hodiny překreslováním všech detailů na všech snímcích animace. Mimochodem, pokud bude váš sprite použit s ostatními, pak by měli být všichni nakresleni ve stejném stylu.

        Zjistěte, zda existují nějaké speciální požadavky na skřítka. Pokud kreslíte například pro projekt, je rozumné očekávat požadavky na barvu nebo velikost souboru. To však bude důležitější o něco později, až na tom začnete pracovat velké projekty s mnoha různými skřítky.

        • Objektivně řečeno, v dnešní době jsou jen zřídka kladeny požadavky na velikost nebo paletu skřítků. Pokud však kreslíte grafiku pro hru, která se bude hrát na starších herních systémech, budete muset počítat se všemi omezeními.
      2. Udělejte si skicu. Náčrt na papíře je základem každého skřítka, naštěstí tímto způsobem pochopíte, jak bude vše vypadat, a v případě potřeby můžete předem něco opravit. Navíc pak můžete trasovat z papírového náčrtu (pokud ještě máte tablet).

        • Nešetřete detaily pro svůj náčrt! Nakreslete vše, co chcete na konečném výkresu vidět.
      3. Přeneste skicu do grafického editoru. Můžete obkreslit papírovou skicu na tabletu nebo můžete vše překreslit ručně, pixel po pixelu - na tom nezáleží, volba je na vás.

        • Při obkreslování skici použijte jako barvu obrysu 100% černou. Pokud se cokoliv stane, můžete to později ručně změnit, ale zatím se vám bude s černou snáze pracovat.
      4. Upřesněte obrys náčrtu. V této souvislosti lze samozřejmě říci i jinak – vymazat vše nepotřebné. K čemu to je - obrys by měl mít tloušťku 1 pixel. Podle toho zvětšete měřítko a smažte, smažte přebytek... nebo doplňte tužkou, co chybí.

        • Při práci na náčrtu se nenechte rozptylovat detaily - na ně přijde řada.

      Část 4

      Barvení skřítka
      1. Oprášit teorii barev. Podívejte se na paletu, abyste viděli, jaké barvy použít. Všechno je tam jednoduché: čím dále jsou barvy od sebe, tím více se od sebe liší; čím blíže jsou barvy k sobě, tím jsou si podobnější a lépe poblíž vypadají spolu dobře.

        • Vyberte si barvy, ve kterých bude váš skřítek krásný i ne řezání očí. A ano, pastelovým barvám byste se měli vyhnout (pokud není celý váš projekt proveden v tomto stylu).
      2. Vyberte si více barev.Čím více barev použijete, tím „rušivější“ bude váš sprite, abych tak řekl. Podívejte se na nějaké klasické pixel arty a zkuste spočítat, kolik barev se tam používá.

        • Mario - pouze tři barvy (pokud mluvíme o klasické verzi) a i ty jsou na paletě umístěny téměř blízko sebe.
        • Sonic – I když je Sonic nakreslen s více detaily než Mario, stále je založen pouze na 4 barvách (a stínech).
        • Ryu je téměř klasika skřítků, jak se chápou v bojových hrách, Ryu jsou malované velké plochy jednoduché barvy plus nějaký stín pro vykreslení. Ryu je však o něco složitější než Sonic – barev a stínů je již pět.
      3. Vybarvi skřítka. Použijte nástroj Výplň barvy k vybarvení svého sprite a nedělejte si starosti s tím, že vše vypadá plochě a bez života – v této fázi se neočekává, že to bude jinak. Princip nástroje Výplň je jednoduchý – vyplní všechny pixely barvy, na kterou jste klikli, barvou, kterou jste vybrali, dokud nedosáhne okrajů.

      Část 5

      Přidávání stínů

        Rozhodněte se o zdroji světla. Tady je podstata: musíte se rozhodnout, pod jakým úhlem světlo dopadne na skřítka. Jakmile se pro toto rozhodnete, můžete udělat věrohodně vypadající stíny. Ano, nebude tam žádné „světlo“ v doslovném smyslu, jde o to, představit si, jak dopadne na kresbu.

        • Nejjednodušším řešením je předpokládat, že zdroj světla je velmi vysoko nad spritem, mírně vlevo nebo vpravo od něj.
      1. Začněte nanášet stíny pomocí barev, které jsou o něco tmavší než základ. Pokud světlo přichází shora, kde bude stín? Přesně tak, kam přímé světlo nedopadá. Chcete-li tedy přidat stín, jednoduše přidejte několik dalších vrstev do spritu s pixely odpovídající barvy nad nebo pod obrysem.

        • Pokud snížíte nastavení „Kontrast“ základní barvy mírným zvýšením nastavení „Jas“, můžete získat dobrá barva kreslit stíny.
        • Nepoužívejte přechody. Přechody jsou zlé. Přechody vypadají lacině, chatrně a neprofesionálně. Efektu podobného efektu přechodů je dosaženo pomocí techniky „tenčení“ (viz níže).
      2. Nezapomeňte na polostín. Vyberte barvu mezi základní barvou a barvou stínu. Použijte jej k vytvoření další vrstvy – tentokrát však mezi vrstvami těchto dvou barev. Výsledkem bude efekt přechodu z tmavé oblasti do světlé.

        Nakreslete zvýraznění. Vrcholem je místo na spritu, kam dopadá nejvíce světla. Zvýraznění můžete nakreslit, pokud vezmete barvu, která je o něco světlejší než základní barva. Hlavní věc je nenechat se unést oslněním, je to rušivé.

Pixel art(psáno bez pomlčky) popř pixelová grafika- směr digitálního umění, který zahrnuje vytváření obrázků na úrovni pixelů (tj. minimální logická jednotka, která tvoří obrázek). Ne všechny rastrové obrázky jsou pixel art, i když se všechny skládají z pixelů. Proč? Protože v konečném důsledku koncept pixel artu nezahrnuje ani tak výsledek, jako proces vytváření ilustrace. Pixel po pixelu a je to. Pokud pořídíte digitální fotografii, výrazně ji zmenšíte (aby byly vidět pixely) a budete tvrdit, že jste ji nakreslili úplně od začátku, bude to skutečný padělek. I když se pravděpodobně najdou naivní prosťáčci, kteří vás za vaši pečlivou práci pochválí.

V současnosti není známo, kdy přesně tato technika vznikla; Technika skládání obrazů z malých prvků však sahá k mnohem starodávnějším formám umění, jako jsou mozaiky, křížové prošívání, tkaní koberců a korálkování. Samotný výraz „pixel art“ jako definice pixelového umění byl poprvé použit v článku Adele Goldberg a Roberta Flegala v časopise Communications of the ACM (prosinec 1982).

Nejrozšířenější aplikací pixel artu je in počítačové hry, což není překvapivé - umožnilo to vytvářet obrazy, které byly nenáročné na zdroje a zároveň vypadaly opravdu krásně (zároveň to umělci zabíralo spoustu času a vyžadovalo určité dovednosti, a proto implikovalo dobré mzdy). v květu, nejvyšší bod ve vývoji se oficiálně nazývají videohry na konzolích 2. a 3. generace (počátek 90. ​​let). Další pokrok v technologii, vznik nejprve 8bitové barvy a poté True Color, vývoj trojrozměrné grafiky – to vše postupem času odsunulo pixel art do pozadí a na třetí místo a pak se začalo zdát, že pixel art došlo ke konci.

Kupodivu to byl právě pan Scientific and Technological Progress, který v polovině 90. let vytlačil pixelovou grafiku na poslední pozice a později ji vrátil do hry – světu představil mobilní zařízení v podobě mobilních telefonů a PDA. Koneckonců, bez ohledu na to, jak užitečné může být nové zařízení, vy a já víme, že pokud na něm nemůžete alespoň hrát solitaire, je k ničemu. No, kde je obrazovka s nízkým rozlišením, tam je pixel art. Jak se říká, vítej zpět.

Svou roli v návratu pixelové grafiky samozřejmě sehrály různé retrográdní prvky, které rády nostalgicky vzpomínaly na staré dobré hry z dětství a říkaly: „Eh, už to nedělají“; estéti, kteří dokážou ocenit krásu pixel artu, a nezávislí vývojáři, kteří nevnímají moderní grafické krásy (a někdy, i když zřídka, prostě nevědí, jak je implementovat do svých vlastních projektů), proto vyřezávají pixel art . Ale stále neslevujme čistě komerční projekty – přihlášky pro mobilní zařízení, reklama a web design Takže nyní je pixel art, jak se říká, rozšířený v úzkých kruzích a získal si určitý status jako umění „ne pro každého“. A to přesto, že pro obyčejný člověk je extrémně dostupná, protože k práci v této technice stačí mít po ruce počítač a jednoduchý grafický editor! (mimochodem, neuškodí ani schopnost kreslit) Dost slov, pojďme k věci!

2. Nástroje.

Co potřebujete k vytvoření pixel artu? Jak jsem uvedl výše, stačí počítač a jakýkoli grafický editor schopný pracovat na úrovni pixelů. Můžete kreslit kdekoli, dokonce i na Game Boy, dokonce i na Nintendo DS, dokonce i v Microsoft Paint (další věc je, že kreslení v tom druhém je extrémně nepohodlné). Existuje velké množství rastrových editorů, mnohé z nich jsou zdarma a docela funkční, takže si každý může rozhodnout o softwaru sám.

Kreslím v Adobe Photoshop, protože je to pohodlné a protože to dělám už dlouho. Nebudu lhát a řeknu vám, zamumlajíc si zubní protézy, že „Pamatuji si, že Photoshop byl ještě velmi malý, byl na Macintoshi a měl číslo 1.0. Ale pamatuji si Photoshop 4.0 (a také na Mac). Proto pro mě otázka volby nikdy nebyla otázkou. A proto ne, ne, ale dám doporučení ohledně Photoshopu, zejména tam, kde jeho schopnosti pomohou výrazně zjednodušit kreativitu.

Potřebujete tedy jakýkoli grafický editor, který vám umožní kreslit nástrojem o velikosti jednoho čtvercového pixelu (existují i ​​nečtvercové pixely, například kulaté, ale ty nás v tuto chvíli nezajímají). Pokud váš editor podporuje jakoukoli sadu barev, skvělé. Pokud vám také umožňuje ukládat soubory, je to skvělé. Bylo by hezké umět pracovat s vrstvami, protože na dost práce komplexní obrázek, je výhodnější rozložit jeho prvky do různých vrstev, ale podle celkově je to otázka zvyku a pohodlí.

Můžeme začít? Pravděpodobně čekáte na seznam nějakých tajných technik, doporučení, která vás naučí kreslit pixel art? Pravdou ale je, že nic takového neexistuje celkověŽádný. Jediný způsob, jak se naučit kreslit pixel art, je nakreslit si to sami, zkoušet, zkoušet, nebát se a experimentovat. Klidně opakujte cizí práce, nebojte se působit neoriginálně (jen nevydávejte cizí práci za svou, hehe). Pečlivě a promyšleně analyzujte díla mistrů (ne moje) a kreslete, kresli, kresli. Na konci článku na vás čeká několik užitečných odkazů.

3. Obecné zásady.

A přesto jich je několik obecné zásady, což neuškodí vědět. Je jich opravdu málo, říkám jim „zásady“ a ne zákony, protože mají spíše doporučující charakter. Pokud se vám nakonec podaří nakreslit brilantní pixel art, který obchází všechna pravidla – kdo se o ně stará?

Nejzákladnější princip lze formulovat následovně: minimální jednotkou obrázku je pixel a pokud je to možné, všechny prvky kompozice by mu měly být úměrné. Dovolte mi to rozebrat: vše, co kreslíte, se skládá z pixelů a pixel musí být ve všem čitelný. To neznamená, že obrázek nemůže vůbec obsahovat prvky, například 2x2 pixely nebo 3x3. Stále je však výhodnější sestavit obrázek z jednotlivých pixelů.

Tah a obecně všechny čáry kresby by měly být tlusté jeden pixel (až na vzácné výjimky).

Vůbec neříkám, že je to špatně. Ale pořád to není moc hezké. A aby to bylo krásné, připomeňme si ještě jedno pravidlo: kreslit bez zalomení, hladce zaoblovat. Existuje něco jako kinks - fragmenty, které se vymykají obecnému pořádku, dodávají liniím nerovnoměrný, zubatý vzhled (v anglicky mluvícím prostředí pixelových umělců se jim říká jaggies):

Zlomeniny zbavují kresbu její přirozené hladkosti a krásy. A pokud jsou fragmenty 3, 4 a 5 zřejmé a lze je snadno opravit, u ostatních je situace složitější - tam je délka jednoho kusu v řetězu zlomená, zdá se to maličkost, ale drobnost je patrná. Chce to trochu cviku naučit se tato místa vidět a vyhýbat se jim. Kink 1 je vyražen z řádku, protože se jedná o jeden pixel - zatímco v oblasti, kam byl vložen, řádek se skládá ze segmentů o 2 pixelech. Abych se toho zbavil, změkčil jsem vstup křivky do ohybu, prodloužil horní segment na 3 pixely a překreslil celou čáru na 2 pixelové segmenty. Přestávky 2 a 6 jsou navzájem totožné - jedná se již o fragmenty dlouhé 2 pixely v oblastech tvořených jednotlivými pixely.

Elementární sada příkladů nakloněných rovných čar, kterou najdete téměř v každém pixelartovém manuálu (ten můj není výjimkou), vám pomůže vyhnout se takovýmto zauzlením při kreslení:

Jak vidíte, přímka se skládá ze stejně dlouhých segmentů, které jsou při kreslení posunuty o jeden pixel – jen tak je dosaženo efektu linearity. Nejběžnější konstrukční metody jsou s délkou segmentu 1, 2 a 4 pixely (existují i ​​jiné, ale prezentované možnosti by měly stačit k realizaci téměř jakéhokoli uměleckého nápadu). Nejpopulárnější z těchto tří lze s jistotou nazvat segmentem o délce 2 pixely: nakreslete segment, posuňte pero o 1 pixel, nakreslete další segment, posuňte pero o 1 pixel, nakreslete další segment:

Není to těžké, že? Vše, co potřebujete, je zvyk. Schopnost kreslit nakloněné rovné čáry ve 2pixelových krocích pomůže v izometrii, takže se na to příště podíváme podrobněji. Obecně platí, že rovné čáry jsou skvělé - ale jen do té doby, než se objeví úkol nakreslit něco zázračného. Zde potřebujeme křivky a mnoho různých křivek. A bereme v úvahu jednoduché pravidlo pro zaoblení zakřivených čar: délka prvků křivky by se měla postupně snižovat/zvětšovat.

Výstup z přímky do zaoblení se provádí hladce, uvedl jsem délku každého segmentu: 5 pixelů, 3, 2, 2, 1, 1, opět 2 (již vertikální), 3, 5 a tak dále. Váš případ nemusí nutně používat stejnou sekvenci, vše závisí na požadované hladkosti. Další příklad zaokrouhlování:

Opět se vyhneme zauzlování, které obraz tolik kazí. Pokud si chcete zkontrolovat látku, kterou jste se naučili, zde je můj výkres neznámý autor skin pro Winamp, šablona:

Ve výkresu jsou hrubé chyby a jednoduše neúspěšná zaoblení a jsou zde zlomy - zkuste obrázek opravit na základě toho, co již víte. To je vše, co mám k čarám, navrhuji, abyste si trochu nakreslili. A nenechte se zmást jednoduchostí příkladů, kreslit se můžete naučit pouze kreslením – i ty nejjednodušší věci.

4.1. Nakreslete láhev živé vody.

1. Tvar objektu, zatím nemusíte používat barvu.

2. Červená kapalina.

3. Změňte barvu sklenice na modrou, přidejte stínované oblasti uvnitř bubliny a světlou oblast na zamýšleném povrchu kapaliny.

4. Přidejte bílé zvýraznění na bublinu a 1 pixel široký tmavě červený stín na oblasti kapaliny ohraničující stěny bubliny. Vypadá docela dobře, co?

5. Podobně nakreslíme lahvičku s modrou tekutinou – zde stejná barva skla, plus tři odstíny modré pro tekutinu.

4.2. Kreslení melounu.

Nakreslíme kruh a půlkruh - to bude meloun a vyříznutý plátek.

2. Označme si výřez na melounu samotném a na plátku – hranici mezi kůrou a dužinou.

3. Plnění. Barvy z palety, středně zelená je barva kůry, středně červená je barva dužiny.

4. Označme si oblast přechodu od kůrky k dužnině.

5. Světlé pruhy na melounu (konečně to vypadá jako on). A samozřejmě – semínka! Pokud zkřížíte meloun se šváby, odplazí se sami.

6. Připomínáme. Světle růžovou barvou označujeme zvýraznění nad semeny v sekci a rozložením pixelů do šachovnicového vzoru dosáhneme určitého zdání objemu z vyříznutého segmentu (metoda se nazývá dithering, více později ). Tmavě červený odstín používáme k označení stínovaných oblastí v řezu vodního melounu a tmavě zelený odstín (opět šachovnicové pixely), který dodává objem samotnému melounu.

5. Dithering.

Dithering, neboli prolnutí, je technika míchání pixelů ve dvou sousedních oblastech definitivně uspořádaným (ne vždy) způsobem. různé barvy. Nejjednodušší, nejběžnější a efektivní způsob– střídejte pixely v šachovnicovém vzoru:

Technika se zrodila díky (nebo spíše navzdory) technickým omezením - na platformách s omezenými paletami bylo možné dithering smícháním pixelů dvou různé barvy, získejte třetí chybějící z palety:

Nyní, v době neomezených technických možností, mnozí říkají, že potřeba ditheru zmizela sama od sebe. Jeho správné použití však může dát vaší práci charakteristický retro styl, který poznají všichni fanoušci starých videoher. Osobně rád používám dithering. Nejsem v tom moc dobrý, ale pořád to miluji.

Další dvě možnosti rozkladu:

Co potřebujete vědět o ditheringu, abyste jej mohli používat. Minimální šířka zóny prolnutí musí být alespoň 2 pixely (stejné kostkované čáry). Více je možné. Je lepší nedělat méně.

Níže je uveden příklad neúspěšného ditheringu. Navzdory skutečnosti, že podobnou techniku ​​lze často nalézt na skřítcích z videoher, musíte si být vědomi toho, že televizní obrazovka výrazně vyhladila obraz a takový hřeben, a to ani v pohybu, nebyl okem viditelný:

No, dost teorie. Doporučuji ti trochu víc cvičit.

Pixel art lze kreslit v jakémkoli programu pro práci s rastrovou grafikou, je to věc osobních preferencí a zkušeností (samozřejmě i finančních možností). Někteří lidé používají nejjednodušší Malování, já to dělám ve Photoshopu - protože za prvé v něm pracuji dlouho a za druhé je mi tam lépe. Jakmile jsem se rozhodl vyzkoušet bezplatný Paint.NET, nelíbilo se mi to - je to jako s autem, pokud poznáte cizí auto s automatickou převodovkou, je nepravděpodobné, že se dostanete do Záporoží. Můj zaměstnavatel mi poskytuje licencovaný software, takže před korporací Adobe mám svědomí čisté... Sice si za své programy účtují nepředstavitelné ceny a za tohle shoří v pekle.

1. Příprava na práci.

Vytvořte nový dokument s libovolným nastavením (šířka nechť je 60, výška 100 pixelů). Hlavním nástrojem pixelového umělce je tužka ( Nástroj Tužka, volané klávesovou zkratkou B). Pokud je na panelu nástrojů povolen štětec (a ikona štětce), najeďte na něj, klikněte a podržte L.M.B.– objeví se malá rozevírací nabídka, ve které byste měli vybrat tužku. Nastavte velikost pera na 1 pixel (v horním panelu vlevo je rozbalovací nabídka Štětec):

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Několik dalších užitečných kombinací. " Ctrl+" a " Ctrl-"přiblížit a oddálit obrázek. Je také užitečné vědět, že lisování Ctrl a " (uvozovky rybí kosti nebo ruský klíč " E") zapíná a vypíná mřížku, což je skvělá pomůcka při kreslení pixel artu. Rozteč mřížky by se také měla upravit tak, aby vám vyhovovala; Klikněte Ctrl+K(nebo přejděte na Upravit->Předvolby), přejděte k věci Vodítka, mřížka a plátky a nainstalovat Mřížka každý 1 pixel(opakuji, 2 je pro mě pohodlnější).

2. Kreslení.

Nakonec začneme kreslit. Proč vytvářet novou vrstvu ( Ctrl+Shift+N), přepněte na černou barvu pera (stiskněte D nastaví výchozí barvy, černou a bílou) a nakreslete hlavu postavy, v mém případě je to tato symetrická elipsa:

Pixel art pro začátečníky. | Zavedení.


Pixel art pro začátečníky. | Zavedení.

Jeho spodní a horní základna je dlouhá 10 pixelů, dále jsou zde segmenty po 4 pixelech, tři, tři, jeden, jeden a svislá čára vysoká 4 pixely. Rovné čáry ve Photoshopu jsou vhodné pro kreslení pomocí Posun, ačkoliv je měřítko obrázku v pixel artu minimální, tato technika někdy ušetří spoustu času. Pokud jste udělali chybu a nakreslili příliš mnoho, udělali jste chybu – nezlobte se, přepněte na nástroj guma ( Taky guma l nebo "" klíč E") a smažte to, co nepotřebujete. Ano, nezapomeňte nastavit gumu také na velikost pera na 1 pixel, aby vymazávala pixel po pixelu, a režim tužky ( Režim: Tužka), jinak vypere špatnou věc. Přecházím zpět na tužku, dovolte mi, abych vám připomněl, prostřednictvím „ B»

Obecně platí, že tato elipsa není nakreslena striktně podle pravidel pixel artu, ale vyžaduje to umělecký design. Protože se jedná o budoucí hlavu, bude mít oči, nos, ústa - dostatek detailů, které nakonec upoutají pozornost diváka a odradí touhu ptát se, proč má hlava tak nepravidelný tvar.

Pokračujeme v kreslení, přidáváme nos, knír a ústa:

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Nyní oči:

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Vezměte prosím na vědomí, že v tak malém měřítku oči nemusí být kulaté - v mém případě jsou to čtverce o délce strany 5 pixelů, s nezakreslenými rohovými body. Po návratu do původního měřítka budou vypadat docela kulatě, navíc dojem kulovitosti lze umocnit pomocí stínů (více o tom později, viz 3. oddíl lekce). Prozatím mírně upravím tvar hlavy tím, že vymažu pár pixelů na jednom místě a přidám je na jiné:

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Nakreslíme obočí (je v pořádku, že visí ve vzduchu - to je můj styl) a obličejové záhyby v koutcích úst, díky čemuž je úsměv výraznější:

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Rohy zatím nevypadají moc dobře, jeden z nich pixelová pravidla art uvádí, že každý pixel tahů a prvků se nemůže dotýkat více než dvou sousedních pixelů. Pokud ale pozorně studujete skřítky z her konce 80. a začátku 90. let, tato chyba se tam dá najít poměrně často. Závěr – pokud nemůžete, ale opravdu chcete, můžete. Tento detail lze později přehrát během vyplňování pomocí stínů, takže nyní pokračujme v kreslení. Trup:

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Kotníkům si zatím nevšímejte, vypadá to trapně, to napravíme, až začneme plnit. Malá oprava: přidejte pás a záhyby v oblasti třísel a také zvýrazněte kolenní klouby (pomocí malých 2 pixelových fragmentů vyčnívajících z linie nohou):

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

3. Plnění.

Pro každý znakový prvek budeme mít prozatím dostatek tři barvy– barva hlavní výplně, barva stínu a tahu. Obecně existuje mnoho věcí, které můžete poradit ohledně teorie barev v pixel art, včetně: počáteční fázi neváhejte špehovat práci mistrů a analyzujte, jak přesně vybírají barvy. Tah každého prvku může být samozřejmě ponechán černý, ale v tomto případě se prvky určitě spojí, preferuji použití nezávislých barev, které jsou podobné hlavní barvě prvku, ale s nízkou sytostí; Nejpohodlnějším způsobem je nakreslit malou paletu někde poblíž vaší postavy a poté z ní vzít barvy pomocí nástroje kapátko ( Nástroj kapátko, I):

Výběrem požadovanou barvu, aktivujte nástroj „kbelík“ ( Kbelík na barvu, G). Nezapomeňte také vypnout funkci Anti-alias v nastavení, potřebujeme, aby výplň fungovala jasně v nakreslených obrysech a nepřekračovala je:

Pixel art pro začátečníky. | Zavedení.


Pixel art pro začátečníky. | Zavedení.

Vyplňujeme naši postavu, pokud ji nemůžeme vyplnit, nakreslíme ji ručně tužkou.

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Věnujte pozornost kotníkům - vzhledem k tomu, že tyto oblasti mají tloušťku pouze 2 pixely, musel jsem upustit od tahu na obě strany a nakreslit jej pouze na zamýšlenou stranu stínu, přičemž linka hlavní barvy zůstala tlustá jeden pixel. Všimněte si také, že jsem nechala obočí černé, i když na tom vlastně nezáleží.

Photoshop má praktickou funkci výběru barev ( Vyberte->Rozsah barev, strčením kapátka do požadované barvy získáme výběr všech oblastí podobné barvy a možnost je okamžitě vyplnit, ale k tomu potřebujete, aby prvky vaší postavy byly v různých vrstvách, takže zatím budeme považujte tuto funkci za užitečnou pro pokročilé uživatele Photoshopu):

Pixel art pro začátečníky. | Zavedení.


Pixel art pro začátečníky. | Zavedení.

4. Stín a dithering.

Nyní vyberte barvy stínů a přepněte na tužku ( B) pečlivě rozložte stinná místa. V mém případě je zdroj světla někde vlevo a nahoře, před postavou - proto označujeme pravé strany stínem s důrazem směrem dolů. Obličej bude nejbohatší na stíny, protože jich je mnoho drobné prvky, které reliéfně vystupují pomocí stínu na jedné straně a na druhé samy vrhají stín (oči, nos, obličejové záhyby):

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Stín je velmi silný vizuální médium, dobře navržený stín bude mít blahodárný vliv na vzhled postava – a dojem, který na diváka bude působit. V pixel artu může jediný pixel umístěný mimo místo zničit celé dílo, zatímco zdánlivě takové drobné úpravy mohou udělat obrázek mnohem hezčím.

Pokud jde o dithering“ a na obrázku s tak miniaturními rozměry je podle mého názoru úplně nadbytečný. Samotná metoda spočívá v „smíchání“ dvou sousedních barev, čehož je dosaženo rozložením pixelů. Nicméně, abyste měli představu o technice, uvedu ještě malé oblasti prolnutí, na kalhotách, na košili a trochu na obličeji:

Pixel art pro začátečníky. | Zavedení.

Pixel art pro začátečníky. | Zavedení.

Obecně, jak vidíte, nic zvlášť složitého. Pixel art To, co ho činí tak atraktivním, je, že po zvládnutí některých vzorů může každý sám dobře kreslit – jednoduše tím, že pečlivě prostuduje díla mistrů. I když ano, určité znalosti základů kreslení a teorie barev stále neuškodí. Jděte do toho!

Když jsem dnes ráno brouzdal internetem, chtěl jsem napsat příspěvek o Pixel Art a při hledání materiálu jsem našel tyto dva články.