Naučte se ruční výrobu pixel art kreslit ve photoshopu

Pixelové ilustrace jsou skvělé pro vytváření počítačových ikon, izometrických obrázků a dokonce i celých scén. Lze je vytvořit rychle a snadno pomocí Photoshopu s několika rychlými úpravami předvoleb.

Jedinou nevýhodou však je, že pixel art vypadá nejlépe s každým pixelem umístěným ručně, na rozdíl od použití filtru Photoshopu. Správně, ručně umístěné – vím, že to zní trochu bláznivě, zvláště když některé pixelové scény obsahují tisíce pixelů. Ale bez umístění ruky to vaše zvládne pixel art vypadat jako špatný lo res obrázek, takže buďte opatrní!

Myslím, že dobrým pravidlem, než začnete, je, že byste měli být schopni jasně vidět svůj výtvor jako skupinu různých barevných čtvercových kamenů, ale když pak přimhouříte oči a rozmažete si oči, můžete je vidět jako rozpoznatelný obrázek. Představte si, že si uděláte obkladovou mozaiku, jen nepotřebujete spárovací hmotu.

Níže je kompletní pixelová kresba, v této práci vytvoříme některé ze základních částí.

Vývoj

Dobře, připravme se na kreslení. V případě, že nemáte kopii Photoshopu, jsou k dispozici některé bezplatné specializované programy pro kreslení pixelů, které si můžete zdarma stáhnout:

• Pixely (Mac)
• Graphic Gale (vítězství)
• Více aplikací naleznete zde.

Hrál jsem si s oběma programy, ale přešel jsem zpět na Photoshop, protože jsem zvyklý na klávesové zkratky.

Dobře, založíme stránku

1. Nejprve otevřete předvolby ve Photoshopu a nastavte interpolaci obrazu na Nearest Neighbor.
2. Vytvořte novou stránku o rozměrech 300 x 300 pixelů při rozlišení 72 dpi.
3. Vyberte nástroj tužka na 1 pixel. Nástroje tužka a guma jsou jediné nástroje, které skutečně potřebujete.
4. Příležitostně můžete použít kouzelnou hůlku k výběru oblasti, kterou chcete vyplnit, ale ujistěte se, že je funkce Anti-Alias ​​vypnutá.

Pokud jste použili nástroj štětec s ohromnými 9 pixely místo 1, dojde k vyhlazování, které kazí efekt ostrých pixelů. Zůstaňte tedy u 1 pixelu. "Zůstaň hubená, zůstaň zlý," jak říkávala moje máma.

Když je kresba v pixelech zobrazena na 100 % (skutečná velikost), je nástroj Pero velmi malý na šířku 1 pixel, takže může být obtížné jej vidět a upravovat. Jedním z nápadů je přiblížit na 800 %, abyste viděli, co děláte. Často mám ve Photoshopu otevřené druhé okno se stejným zobrazením obrazovky na 200 %, takže rychle vidím, jak moje kresba vypadá zblízka a zároveň z trochu dálky.

Náš pracovní dokument můžeme uložit jako soubor PSD a později jej exportovat jako soubor GIF pro webové použití. Soubor můžeme také následně zvětšit a převést na TIF pro tisk CMYK.

Začněme kreslit

Dobře, zkusme nakreslit něco jako tato otevřená kniha. Nakreslete kolem okraje pomocí nástroje Pero a vytvořte černý obrys. Poté vyplňte ploché barvy stránky a záložky.

Vytvořte představu textu na stránce pomocí několika jednopixelových řádků. Podívejte se, jak přidáme na čáru mírné zalomení, abychom na stránce vytvořili dojem mírné křivky.

Nakonec přidejte několik značek doprostřed stránek a na stranu záložky. Příjemnou drobností je zvýraznění jednoho pixelu ve spodním vnějším rohu každé stránky, což jen naznačuje okraj stránky, spíše než aby to byl pevný blok.

Jakmile si osvojíte základy obrysů, barev, zvýraznění a stínování, můžete zkusit vytvářet další jednoduché tvary.

Šikmé čáry pixelů

Ikony pixelů, jako jsou ty výše, mohou být navrženy jako série čar, které jsou navzájem pod úhlem pouze 90º a jsou z velké části čtverce a obdélníky. Občas však můžete potřebovat čáru pod úhlem.

Je třeba poznamenat, že šikmé čáry vypadají nejlépe, když jsou pravidelným vzorem. Jsou-li nepravidelné (jako níže uvedené), mohou při pohledu na malé rozměry vypadat hrudkovitě a hrubě. Druhý příklad níže jsou mnohem hladší izometrické úhly, které vypadají skvěle s pixel artem, ale není to 30º "ISo" úhel, který jste používali v hodině technického kreslení – ve skutečnosti je o něco blíže 26,5º. Bohužel, 30º dává hrudkující čáru na 100%. Pokud nakreslíte čáru, která se pravidelně pohybuje o 2 body výše a 1 bod nahoru, dostanete 26,5º.

Zkusíme nakreslit něco jiného, ​​co je trochu více geometrické a používá více takových vzorů čar?

Nepravidelná čára vypadá na 100 % hrudkovitě.

Vzor hladké linie v různých úhlech.

Nakreslíme protokol pixelů

Linky po délce jsou snadné, už víme, jak na ně, ale co ty zaoblené konce?

Tyto dva jsou pravidelné vzory, ale mění se z širokých vodorovných čar na čtverce a poté svislé čáry. Vypadá to otrhaně, ale když otočíte oči, vypadá to dobře!

Pravá horní křivka na konci trupu je také obráceným vzorem levé spodní části. Často počítám pixely nebo si zapamatuji určité kombinace. Kombinace pixelů na kruhu je…

• 3 čtverce (napříč)
• 2
• 111
• 222 (nepočet)
• 6
• 2
• za prvé

Zpočátku je trochu obtížné se v tom orientovat, jako je použití Bezierových křivek v Illustratoru, ale brzy se do toho pustíte. Délka polena je snadná, prostě použijeme systém 2 podél 1 nahoru a vyrobíme poleno tak dlouhé nebo krátké, jak chceme.

Menší soustředné kruhy na konci vytvářejí pěkný prstencový vzor a některé oblasti tmavšího stínování ve spodní části kulatiny mu dodávají určitou hloubku. Nejprve dáme kmenu stromu plochou barvu jedle, pak pro vytvoření hloubky můžeme vytvořit dithering umístěním pixelů kontrastní barvy na obě strany našich linií s vysokým/nízkým světlem.

Můžete vytvářet vzory a dělat je složitějšími. Buďte však opatrní – čím realističtější a složitější zkusíte, tím rozmazanější může být obrázek, když má být reprodukován v malé velikosti.

Přidal jsem několik náhodných pixelů do logu č. 3, protože jsem chtěl, aby vypadal drsně a trochu vyčníval z veverky.

U poslední klády jsem pracoval v oblasti se zbavenou kůrou a malou větví. Osvědčilo se mi nejprve dokončit oblast nebo styl a pak na něm pracovat podrobněji. Nemyslím si, že bych mohl nakreslit kmen odříznuté kůry se vzorem od začátku – místo toho jsem jen přidával vrstvy a vrstvy. Jednoduché fáze fungují nejlépe!

Nepravidelná kresba pixelů

Pojďme k něčemu nepravidelnějšímu, jako je veverka sedící na naší kládě. U něčeho takového složitého je nejlepší začít s tužkou a papírem.

Nejprve jsem na svou stránku nakreslil izometrický čtverec, abych získal správné rozměry. Protože tento příklad používáme pro redakční účely, použil jsem jako zdroj inspirace fotografii. Pak začnu skicovat. Zvláštní pozornost věnuji úhlu na uších a chodidlech, protože chci, aby sledovaly izometrické linie.

Jak vidíte, detaily jsou velmi minimální - jen chci nejprve vypracovat základní tvar a správné úhly. Zbytek uděláme ve Photoshopu.

Přineste skicu, nasaďte novou vrstvu a zapněte neprůhlednost, abyste jasně viděli pixely, které chcete vytvořit. Není to tvrdé a rychlé pravidlo, ale zjistil jsem, že pixel art vypadá nejlépe, když má černé obrysy.

Zde obcházím svou veverku pomocí nástroje Pen Tool a vytvářím černý obrys. Jedna věc, které je třeba se vyhnout, je shlukování, kdy se obrysové pixely dotýkají na více než jedné straně. Pokud nakreslíte další čtverec, stačí jej vymazat gumou (rovněž dodržujte šířku 1 pixel, viz červený kroužek), bude to vypadat úhledněji a vaše publikum vám poděkuje.

Pořád vypadá trochu rozcuchaně, ale bude se tvarovat! Klíčové linie na obrázku také pomáhají dodávat odvážný vzhled. Jen se ujistěte, že jsou tmavé barvy, která není černá, abyste přidali nějaký kontrast. Říkejte mi radikál, ale vybral jsem si hnědou.

Když je tvar hotový, vyplňte vnitřní oblast pěknou barvou středního tónu (jemně hnědá) a možná použijte světlou barvu, abyste zvýraznili některé zvýraznění.

Pravidlo černého obrysu není těžké a rychlé, nechal jsem nějaké klíčové černé čáry pod přední čelistí a tlapkou, protože bylo těžké vidět, co se děje.

Závěr

Ruční umisťování, odstraňování a manipulace s pixely je místo, kde tato dovednost vstupuje do hry. Jednou za čas. Ale jakmile to pochopíte, můžete kreslit v podstatě cokoliv – potřebujete jen trochu trpělivosti. Doufám, že vám to pomůže a inspiruje vás k vytváření skvělých vlastních děl!