Adobe Photoshop: Nakreslite a animujte postavu pomocou techniky Pixel Art. Vytvorenie postavy v štýle izometrických pixelov v aplikácii Adobe Photoshop

V tomto 10-krokovom návode Ako kresliť pixelové umenie vás naučím, ako vytvoriť „šprta“ (jedinú 2D postavu alebo objekt). Samotný výraz, samozrejme, pochádza z videohier.

Naučil som sa vytvárať pixel art, pretože som ho potreboval pre grafiku v mojej hre. Po rokoch tréningu som to pochopil a začal som chápať, že pixel art je viac umenie ako len nástroj. Dnes je pixel art veľmi populárny medzi hernými vývojármi a ilustrátormi.

Tento návod bol vytvorený pred mnohými rokmi, aby ľudí naučil jednoduché koncepty vytvárania pixel artu, no bol mnohokrát aktualizovaný, takže sa výrazne líši od pôvodnej verzie. Na internete je veľa návodov na rovnakú tému, ale všetky sa mi zdajú príliš komplikované alebo zdĺhavé. pixel art nie je veda. Pri vytváraní pixelových obrázkov by ste nemali počítať vektory.

Nástroje

Jednou z hlavných výhod vytvárania pixel artu je, že nepotrebujete žiadne pokročilé nástroje – grafický editor, by malo byť predvolene nainštalované na vašom počítači. Stojí za zmienku, že existujú programy navrhnuté špeciálne na vytváranie pixelových obrázkov, ako napríklad Pro Motion alebo Pixen (pre používateľov počítačov Mac). Sám som ich netestoval, ale veľa som počul pozitívna spätná väzba. V tomto návode použijem Photoshop, ktorý aj keď stojí veľa, obsahuje veľa užitočné nástroje vytvárať umenie, z ktorých niektoré sú veľmi užitočné na pixelovanie.

Ako nakresliť pixel art vo Photoshope

Pri používaní Photoshopu bude vašou hlavnou zbraňou nástroj Ceruzka (kláves B), ktorý je alternatívou k nástroju Brush. Ceruzka umožňuje vyfarbovať jednotlivé pixely bez prekrývania farieb.

Budeme potrebovať ďalšie dva nástroje: „Výber“ (kláves M) a „ Prútik» (kláves W) vyberte a potiahnite alebo skopírujte a prilepte. Pamätajte, že podržaním klávesu Alt alebo Shift počas výberu môžete pridať vybrané objekty alebo ich vylúčiť z aktuálneho zoznamu výberu. To je užitočné, keď potrebujete vybrať nerovnomerné objekty.

Na prenos farieb môžete použiť aj kvapkadlo. Existuje tisíc dôvodov, prečo je zachovanie farieb v pixelovom umení dôležité, takže budete chcieť vziať niekoľko farieb a použiť ich znova a znova.

Nakoniec sa uistite, že si pamätáte všetky klávesové skratky, pretože vám to môže ušetriť veľa času. Všimnite si „X“, ktoré prepína medzi primárnou a sekundárnou farbou.

Čiary

Pixely sú rovnaké malé farebné štvorce. Najprv musíte pochopiť, ako efektívne usporiadať tieto štvorce, aby ste vytvorili čiaru, ktorú chcete. Pozrieme sa na dva najbežnejšie typy čiar: rovné a zakrivené.

Rovné čiary

Viem, čo si myslíš: všetko je tu také jednoduché, že nemá zmysel sa do ničoho púšťať. Ale pokiaľ ide o pixely, dokonca aj rovné čiary môžu byť problémom. Musíme sa vyhnúť zubatým častiam - malým kúskom čiary, ktoré spôsobujú, že vyzerá nerovnomerne. Zobrazia sa, ak je jedna časť čiary väčšia alebo menšia ako ostatné, ktoré ju obklopujú.

Zakrivené čiary

Pri kreslení zakrivených čiar sa musíte uistiť, že pokles alebo vzostup je rovnomerný po celej dĺžke. IN v tomto príklade, úhľadný riadok má intervaly 6 > 3 > 2 > 1, ale riadok s intervalmi 3 > 1< 3 выглядит зазубренной.

Schopnosť kresliť čiary - kľúčový prvok pixel art. Trochu ďalej vám poviem o anti-aliasingu.

Konceptualizácia

Ak chcete začať, budete potrebovať dobrý nápad! Skúste si predstaviť, čo budete robiť v pixel arte - na papieri alebo len vo svojej mysli. Keď máte predstavu o kresbe, môžete sa sústrediť na samotnú pixeláciu.

Témy na zamyslenie

• Na čo bude tento sprite slúžiť? Je to pre webovú stránku alebo pre hru? Bude potrebné ho neskôr animovať? Ak áno, potom bude potrebné ho zmenšiť a menej podrobný. Naopak, ak nebudete so spritom v budúcnosti pracovať, môžete si k nemu pripevniť toľko dielov, koľko potrebujete. Preto sa vopred rozhodnite, na čo presne je tento sprite potrebný a vyberte optimálne parametre.
• Aké sú obmedzenia? Už skôr som spomenul dôležitosť uchovávania kvetov. Hlavný dôvod je obmedzená paleta farieb kvôli systémovým požiadavkám (čo je v našej dobe extrémne nepravdepodobné) alebo kvôli kompatibilite. Alebo pre presnosť, ak emulujete konkrétny štýl C64, NES atď. Tiež stojí za to zvážiť rozmery vášho sprite a či príliš nevyčnieva z objektov na pozadí, ktoré potrebujete.

Skúsme to!

V tomto návode nie sú žiadne obmedzenia, ale chcel som sa uistiť, že môj pixel art bude dostatočne veľký, aby ste mohli podrobne vidieť, čo sa deje v každom z krokov. Na tento účel som sa rozhodol použiť ako model Luchu Lawyer, postavu zo sveta wrestlingu. Dokonale by sa hodil do bojovej hry alebo rýchlej akčnej hry.

Okruh

Čierny obrys bude dobrým základom pre vášho sprite, takže tam začneme. Vybrali sme čiernu, pretože vyzerá dobre, ale je aj trochu tmavá. Neskôr v tutoriále vám poviem, ako zmeniť farbu obrysu, aby ste zvýšili realizmus.

Existujú dva prístupy k vytváraniu obrysu. Obrys môžete nakresliť rukou a potom ho trochu upraviť, alebo môžete všetko nakresliť po jednom pixeli. Áno, všetko ste pochopili správne, hovoríme o tisícke kliknutí.

Spôsob, ktorý si vyberiete, závisí od veľkosti sprite a vašich pixelovacích schopností. Ak je sprite skutočne obrovský, potom by bolo logickejšie ho nakresliť ručne, aby sa vytvoril hrubý tvar, a potom ho orezať. Verte mi, je to oveľa rýchlejšie, ako sa snažiť hneď nakresliť dokonalý náčrt.

V mojom návode vytvorím pomerne veľkého sprite, takže tu bude ukázaná prvá metóda. Bude to jednoduchšie, ak všetko jasne ukážem a vysvetlím, čo sa stalo.

Prvý krok: hrubý obrys

Pomocou myši alebo tabletu nakreslite hrubý obrys svojho sprite. Uistite sa, že NIE JE PRÍLIŠ surový, čo znamená, že vyzerá približne tak, ako vidíte váš konečný produkt.

Môj náčrt sa takmer úplne zhodoval s tým, čo som plánoval.

Druhý krok: Vyleštite obrys

Začnite zväčšením obrázka 6 alebo 8 krát. Mali by ste jasne vidieť každý pixel. A potom vyčistite obrys. Predovšetkým stojí za to venovať pozornosť „zatúlaným pixelom“ (celý obrys by nemal mať hrúbku viac ako jeden pixel), zbaviť sa zubatých okrajov a pridať drobné detaily, ktoré nám v prvom kroku chýbali.

Dokonca aj veľkí škriatkovia veľmi zriedka presahujú 200 x 200 pixelov. Fráza „urobte viac s menej“ je skvelý spôsob, ako opísať proces pixelizácie. Čoskoro uvidíte, že aj na jednom pixeli záleží.

Zjednodušte svoj obrys čo najviac. K detailom sa dostaneme neskôr, teraz musíte popracovať na hľadaní veľkých pixelov, ako je napríklad segmentácia svalov. Veci momentálne nevyzerajú skvele, ale buďte trochu trpezliví.

Farba

Keď je obrys pripravený, dostaneme akýsi farebný list, ktorý je potrebné vyplniť farbami. K tomu nám pomôže farba, polievanie a iné pomôcky. Výber farieb môže byť ťažký, ale teória farieb zjavne nie je témou tohto článku. Nech je to akokoľvek, existuje niekoľko základných pojmov, ktoré budete potrebovať vedieť.

Farebný model HSB

Ide o anglickú skratku zloženú zo slov Hue, Saturation, Brightness. Je to len jeden z mnohých počítačových farebných modelov (alebo číselných vyjadrení farieb). Pravdepodobne ste už počuli o iných príkladoch ako RGB a CMYK. Väčšina obrázkových editorov používa na výber farieb HSB, preto sa na to zameriame.

Hue– Odtieň je to, čo sme zvykli nazývať farbou.

Sýtosť– Sýtosť – určuje intenzitu farby. Ak je hodnota 100 %, ide o maximálny jas. Ak ju znížite, vo farbe sa objaví matnosť a „zošedne“.

Jas- svetlo, ktoré vyžaruje farbu. Napríklad pre černocha je tento ukazovateľ 0%.

Výber farieb

Rozhodnutie, ktoré farby si vyberiete, je len na vás, ale je potrebné mať na pamäti niekoľko vecí:

• Nudné a desaturované farby vyzerajú realistickejšie ako kreslené.
• Zamyslite sa nad farebným kolieskom: čím ďalej sú dve farby na kruhu od seba, tým horšie sa k sebe hodia. Zároveň červená a oranžová, ktoré sú v tesnej blízkosti, spolu vyzerajú skvele.

• Čím viac farieb použijete, tým bude vaša kresba vyzerať rozmazanejšie. Preto si vyberte pár základných farieb a použite ich. Pamätajte, že Super Mario bol svojho času vytvorený výlučne z kombinácií hnedej a červenej.

Nanášanie farieb

Nanášanie farby je veľmi jednoduché. Ak používate Photoshop, jednoducho vyberte požadovaný fragment, vyberte ho čarovným prútikom (kláves W) a potom ho vyplňte hlavnou farbou (Alt-F) alebo doplnkovou farbou Ctrl-F.

Tieňovanie

Tieňovanie je jednou z najdôležitejších súčastí snahy stať sa pixelačným polobohom. Práve v tomto štádiu začne škriatok vyzerať lepšie alebo sa zmení na zvláštnu hmotu. Postupujte podľa mojich pokynov a určite uspejete.

Prvý krok: vyberte zdroj svetla

Najprv si vyberieme zdroj svetla. Ak je váš sprite súčasťou väčšieho fragmentu, ktorý má svoje vlastné zdroje osvetlenia, ako sú lampy, baterky atď. A všetky môžu mať rôzne účinky na to, ako sprite vyzerá. Výber vzdialeného zdroja svetla, akým je slnko, je však skvelý nápad pre väčšinu pixelových umení. Napríklad pri hrách budete musieť vytvoriť čo najjasnejšieho sprite, ktorý sa potom dá prispôsobiť prostrediu.

Väčšinou sa rozhodnem pre vzdialené svetlo niekde hore pred spritom, aby bola osvetlená len predná a vrchná časť spritu a zvyšok bol zatienený.

Krok dva: priame tienenie

Keď sme si vybrali zdroj svetla, môžeme začať stmavovať oblasti, ktoré sú od neho najďalej. Náš model osvetlenia diktuje, že spodná časť hlavy, rúk, nôh atď. by mala byť zakrytá v tieni.

Pamätajme, že ploché veci nemôžu vrhať tiene. Vezmite kúsok papiera, pokrčte ho a rozvaľkajte po stole. Ako ste si uvedomili, že už nie je plochý? Videl si okolo neho len tiene. Pomocou tieňovania zvýraznite záhyby na oblečení, svaly, srsť, farbu pleti atď.

Tretí krok: Mäkké tiene

Druhý odtieň, ktorý je svetlejší ako prvý, by sa mal použiť na vytvorenie jemných tieňov. Je to potrebné pre oblasti, ktoré nie sú priamo osvetlené. Môžu byť tiež použité na prechod zo svetlých do tmavých oblastí a na nerovných povrchoch.

Krok štyri: osvetlené oblasti

Zvýrazniť treba aj miesta, ktoré dostávajú priame lúče svetla. Stojí za zmienku, že svetiel by malo byť menej ako tieňov, inak spôsobia zbytočnú pozornosť, to znamená, že vyniknú.

Ušetrite si bolesti hlavy tým, že si zapamätáte jedno jednoduché pravidlo: najprv tiene, potom svetlá. Dôvod je jednoduchý: ak nie sú žiadne tiene, príliš veľké úlomky budú vyfúknuté a keď použijete tiene, budú musieť byť znížené.

Niekoľko užitočných pravidiel

Tiene sú pre začiatočníkov vždy výzvou, preto je tu niekoľko pravidiel, ktoré musíte pri tieňovaní dodržiavať.

1. Nepoužívajte prechody. Najčastejšia chyba začiatočníkov. Prechody vyzerajú hrozne a ani sa nepribližujú tomu, ako sa svetlo hrá na povrchoch.
2. Nepoužívajte jemné tienenie. Hovorím o situácii, keď je tieň príliš ďaleko od obrysu, pretože potom pôsobí veľmi rozmazane a bráni v identifikácii zdroja svetla.
3. Nepoužívajte príliš veľa tieňov. Je ľahké si myslieť, že „čím viac farieb, tým realistickejší obraz“. Nech je to ako chce, v skutočný život Sme zvyknutí vidieť veci v tmavom alebo svetlom spektre a náš mozog odfiltruje všetko medzi tým. Použite len dve tmavé (tmavé a veľmi tmavé) a dve svetlé (svetlé a veľmi svetlé) a navrstvite ich na základnú farbu, nie na seba.
4. Nepoužívajte príliš podobné farby. Nie je skutočne potrebné používať takmer identické farby, pokiaľ nechcete vytvoriť skutočne rozmazaného sprite.

Dithering

Zachovanie farieb je niečo, čomu musia tvorcovia pixel artu skutočne venovať pozornosť. Ďalší spôsob, ako získať viac tieňov bez použitia viacerých farieb, sa nazýva dithering. Rovnako ako v tradičné maľovanie Používa sa „šrafovanie“ a „krížové šrafovanie“, teda vy, v doslova, získate niečo medzi týmito dvoma farbami.

Jednoduchý príklad

Tu je jednoduchý príklad toho, ako pomocou rozkladu môžete vytvoriť štyri možnosti tieňovania z dvoch farieb.

Pokročilý príklad

Porovnajte obrázok vyššie (vytvorený pomocou gradientu vo Photoshope) s obrázkom vytvoreným iba s tromi farbami pomocou rozkladu. Upozorňujeme, že na vytvorenie "susedných farieb" možno použiť rôzne vzory. Princíp ľahšie pochopíte, ak si niekoľko vzorov vytvoríte sami.

Aplikácia

Dithering môže dať vášmu sprite úžasný retro vzhľad, pretože mnohé prvé videohry túto techniku ​​intenzívne využívali kvôli malému počtu dostupných farebných paliet (ak chcete vidieť veľa príkladov ditheringu, pozrite si hry vyvinuté pre Segu Genesis). Ja sám túto metódu veľmi často nepoužívam, ale pre vzdelávacie účely ukážem, ako sa dá aplikovať na našom sprite.

Dither môžete používať podľa vlastného uváženia, no treba poznamenať, že len málokto ho používa naozaj dobre.

Selektívne kontúrovanie

Selektívne kontúrovanie, nazývané aj vybrané obrysy, je podtypom tieňovania kontúr. Namiesto čiernej linky zvolíme farbu, ktorá bude na vašom spritovi pôsobiť harmonickejšie. Okrem toho zmeníme jas tohto obrysu bližšie k okrajom sprite, čo umožní zdroju farieb určiť, ktoré farby by sme mali použiť.

Až do tohto bodu sme používali čierny obrys. Nie je na tom nič zlé: čierna vyzerá skvele a tiež umožňuje šprtovi vyniknúť od okolitých predmetov. Ale použitím tejto metódy obetujeme realizmus, ktorý by sa nám v niektorých prípadoch mohol hodiť, keďže náš sprite aj naďalej vyzerá ako karikatúra. Selektívne kontúrovanie sa toho zbaví.

Všimnete si, že som použil selaute na zjemnenie definície jeho svalov. Konečne sa náš sprite začne podobať na jeden kus obrovské množstvo samostatné fragmenty.

Porovnaj to s originálom:

1. Vyhladzovanie

Spôsob, akým vyhladzovanie funguje, je jednoduchý: pridanie medziľahlých farieb na okraje, aby vyzerali hladšie. Ak máte napríklad čiernu čiaru na bielom pozadí, k jej prerušeniam pozdĺž okraja sa pridajú malé sivé pixely.

Technika 1: Vyhladenie zalomení

Vo všeobecnosti je potrebné pridať stredné farby tam, kde sú zalomenia, inak bude čiara vyzerať zubatá. Ak stále vyzerá nerovnomerne, pridajte ďalšiu vrstvu svetlejších pixelov. Smer aplikácie medzivrstvy sa musí zhodovať so smerom krivky.

Nemyslím si, že to dokážem lepšie vysvetliť bez toho, aby som to skomplikoval. Stačí sa pozrieť na obrázok a pochopíte, čo tým myslím.

Technika 2: Zaobľovanie hrbolčekov

Technika 3: vymazanie koncov čiar

Aplikácia

Teraz aplikujme antialiasing na našu tlač. Všimnite si, že ak chcete, aby váš sprite vyzeral dobre na akejkoľvek farbe pozadia, nemali by ste vonkajšiu časť linky vyhladiť. V opačnom prípade bude mať váš sprite veľmi nevhodnú svätožiaru v mieste, kde sa stretáva s pozadím, a preto bude na akomkoľvek pozadí príliš vystupovať.

Efekt je veľmi jemný, ale má veľký význam.

Prečo to musíte robiť ručne?

Môžete sa opýtať: "Prečo na nášho sprite jednoducho nepoužijeme filter grafického editora, ak chceme, aby vyzeral hladko?" Odpoveď je tiež jednoduchá – žiadny filter neurobí váš sprite tak jasným a čistým ako ručná práca. Budete mať úplnú kontrolu nielen nad farbami, ktoré používate, ale aj nad tým, kde ich použiť. Navyše viete lepšie ako ktorýkoľvek filter, kde bude vyhladávanie vhodné a kde sú oblasti, kde pixely jednoducho stratia svoju kvalitu.

Dokončovanie

Wow, už sa blížime k bodu, kedy môžete vypnúť počítač a vziať si z chladničky studenú fľašu piva. Ale ešte neprišlo! Posledná časť sa venuje tomu, čo odlišuje zanieteného amatéra od ostrieľaného profesionála.

Urobte krok späť a dobre sa pozrite na svojho sprite. Existuje možnosť, že stále vyzerá "vlhko". Venujte trochu času zdokonaľovaniu a uisteniu sa, že je všetko dokonalé. Bez ohľadu na to, ako ste už unavení, zábavná časť je pred vami. Pridajte podrobnosti, aby váš sprite vyzeral zaujímavejšie. Tu vstupujú do hry vaše pixelovacie schopnosti a skúsenosti.

Možno vás prekvapí, že náš právnik Lucha celý ten čas nemal oči, alebo že balík, ktorý držal, bol prázdny. V skutočnosti dôvod spočíva v tom, že som sa chcel zdržať malých detailov. Všimnite si aj ten lem, ktorý som mu dala na čelenky, muchu na nohaviciach... a kto by bol človek bez bradaviek? Trochu som mu stmavil aj spodnú časť trupu, aby mu ruka viac vystupovala oproti telu.

Konečne ste skončili! Lucha Lawyer je ľahký, pretože má iba 45 farieb (alebo môže byť super ťažký - všetko závisí od obmedzení vašej palety) a jeho rozlíšenie je približne 150 x 115 pixelov. Teraz si môžete otvoriť svoje pivo!

Úplný priebeh:

Vždy je to smiešne. Tu je GIF zobrazujúci vývoj nášho sprite.

1. Naučte sa základy umenia a praktizujte tradičné techniky. Všetky znalosti a zručnosti potrebné na kreslenie a kreslenie je možné aplikovať na pixelovanie.
2. Začnite s malými škriatkami. Najťažšie je naučiť sa, ako umiestniť veľa detailov s použitím minimálneho počtu pixelov, aby neboli škriatkovia také veľké ako ja.
3. Študujte diela umelcov, ktorých obdivujete, a nebojte sa byť neoriginálni. Najlepší spôsob, ako sa naučiť, je opakovať úryvky z práce iných ľudí. Na výrobu vlastný štýl zaberá to veľa času.
4. Ak tablet nemáte, kúpte si ho. Trvalé nervových zrútení a stres spôsobený neustálym klikaním ľavým tlačidlom myši nie je zábavný a je nepravdepodobné, že by zapôsobil na príslušníkov opačného pohlavia. Používam malý Wacom Graphire2 – páči sa mi, aký je kompaktný a prenosný. Možno by ste uprednostnili väčší tablet. Pred kúpou si urobte krátku testovaciu jazdu.
5. Zdieľajte svoju prácu s ostatnými, aby ste získali ich názory. Môže to byť tiež dobrý spôsob, ako si nájsť nových geekovských priateľov.

P.S.

Pôvodný článok sa nachádza. Ak máte odkazy na skvelé návody, ktoré je potrebné preložiť, pošlite ich našej partii. Alebo píšte priamo do skupinových správ

Možno si chcete vytvoriť vlastnú retro hru alebo pomôcť niekomu s grafikou. Potom budete potrebovať sprite: animovaný v rôzne polohy postava v štýle pixel art.

Pozrite si tento tutoriál, kde vás naučím, ako vytvoriť roztomilého zajačika pomocou animácie bežiacej slučky.

Ak je pre vás ťažké kresliť v štýle pixel art, použite hotové škriatky.

1. Dizajn postavy

Pred animáciou si vytvoríme statickú kresbu, takže si musíme vymyslieť, ako bude naša postava vyzerať.

Krok 1

Toto nie je najdôležitejší krok v tomto návode, ale skicovanie je súčasťou môjho pracovného postupu.

Nakreslil som niekoľko náčrtov hlavy a vybral som si tú, ktorá najviac vyhovovala štýlu.

Krok 2

Ak chcete zmeniť králika na pixel art, otvorte Photoshop a nakreslite oči. Na určenie štýlu výkresu potrebujeme iba náčrt.

Ak ste nikdy nerobili pixel art, potom vytvorenie nového súboru nie je veľmi náročné veľká veľkosť, napríklad 400 x 400 pixelov. Budeme veľa približovať (až 700 %) a používať tento nástroj CeruzkaNástroj(P) (ceruzka) na kreslenie jednotlivých pixelov. Odporúčam vám otvoriť ďalšie okno s pracovným dokumentom, v ktorom bude mierka 100-200%, aby ste okamžite videli svoju prácu v skutočnej veľkosti bez toho, aby ste museli prepínať tam a späť z veľkej mierky na malú. na jednom dokumente. Takto budete mať otvorené dva dokumenty: na jednom je mierka až 700% (pracovná) a na druhom - 100-200%.

Neobmedzujem sa na konkrétnu veľkosť sprita, ale pokúsim sa postavu čo najmenšiu a zároveň zachovať najdôležitejšie detaily. Oči sú teda dobrým východiskovým bodom.

Oči sú dve jednoduché línie ktoré sú v blízkosti. Každé oko je 3 pixely vysoké a 1 pixel široké, čierne.

Krok 3

Po dokončení očí môžeme pokračovať v kreslení nosa a ďalších detailov. Je v poriadku, ak čiary v tejto fáze vyzerajú príliš jednoducho.

Krok 4

Teraz vyhladíme niektoré riadky. Pridal som aj veľké predné zuby.

Krok 5

Pridajte pár pixelov na vytvorenie úsmevu.

Krok 6

Uši sú nakreslené čo najužšie s vnútornou časťou širokou 1 pixel a rovnakým obrysom.

Krok 7

Nakreslíme jedno ucho visiace dole.

Krok 8

Nakreslite druhé ucho.

Krok 9

Nakreslite veľké bacuľaté líca a dokončite hlavu.

Krok 10

Teraz môžeme nakresliť telo. Králik bude mať humanoidnú postavu. Nakreslite telo v tvare kvapky.

Krok 11

Nohy králika budú krátke s veľkým chodidlom. Zatiaľ nakreslíme iba jednu nohu.

Krok 12

Nakreslite druhú nohu, ale posuňte ju mierne doprava, aby neprekrývala prvú.

Krok 13

Nohy vyzerajú mierne zarovnané, tak som ich posunul o jeden pixel doľava. Tiež som spojil nohu so žalúdkom odstránením pixle medzi nimi.

Krok 14

V stoji je viditeľná len jedna ruka. Rameno je v tvare slzy a mierne prekrýva trup.

Krok 15

Odstraňujeme nadbytočné čiary na ruke.

Základný obrys našej postavy je pripravený.

2. Farba

V tomto bode zmeníme postavu na úplného statického sprita.

Krok 1

Vyberte si farbu.

Akou farbou by ste chceli namaľovať králika? Vybrala som si opálenú farbu a vyplnila som ňou všetko okrem nosa. Na plnenie používame MaľovaťVedroNástroj(G) (Vyplniť).

Krok 2

Teraz nakreslíme biele brucho. Zuby natierame aj na bielo. Pridajte jeden pixel do nosa ružová farba, zvyšok nechajte biely.

Krok 3

Teraz naneste tiene: pomocou tmavšieho odtieňa farby základného náteru pridajte tiene na tie miesta, kam svetlo zasahuje najmenej. Táto farba môže dodať textúru aj lícam.

Noha, ktorá je v pozadí, by mala byť tmavšia. Takže celú zadnú nohu natrieme farbou tieňa a to isté urobíme so zadným uchom, len na špičke necháme jeden pixel základnej farby.

Krok 4

Krok 5

Niektoré detaily postavy by vyzerali lepšie s menším kontrastom, preto som niektoré oblasti čierneho obrysu namaľoval tmavohnedou farbou (napríklad krk a tvár).

Postava v stoji je pripravená.

3. Kreslenie záberov behu

Teraz môžeme zajačikovi pridať trochu pohybu.

Takúto animáciu môžete vytvoriť pomocou ľubovoľného počtu snímok, ale keďže je postava malá, bude stačiť šesť snímok.

Krok 1

Zatiaľ odstránime končatiny.

Hlava a trup sa pri behu príliš meniť nebudú, preto budú tieto prvky vo všetkých rámoch v rovnakej polohe.

Nižšie nakreslíme čiaru, ktorá zafixuje výšku nôh a ukáže povrch, po ktorom králik beží.

Krok 2

Vezmime si to ObdĺžnikovýMarkízaNástroj(M) (Obdĺžnikový výber), vyberte hlavu a vrchná časť trupu a posuňte vybranú oblasť o jeden pixel (ak to chcete urobiť, aktivujte nástroj Pohybujte saNástroj(V) (Presunúť) a použite klávesy so šípkami).

Potom posunieme hlavu o dva pixely doprava.

Krok 3

V predchádzajúcom kroku sa ukázalo, že trup je trochu natiahnutý. Ak to chcete vyriešiť, zmenšite ho vertikálne o 1 pixel a upravte obrys a výplň.

Znížime aj trup o 1 pixel nadol, pretože nohy budú väčšinu animácie v pokrčenej polohe a teda nebudú v rovnakej výške.

Krok 4

Úlohu si trochu zjednodušíme a budeme pracovať len s nohami v popredí, keďže tie budú na pozadí rovnaké.

Pohyb nohy je podobný kyvadlu: väčšinu času je noha pokrčená, s výnimkou prvého záberu, keď postava urobí krok vpred.

Animácia pohybu nôh teda bude mať 6 snímok (odporúčam vám preštudovať si hotové storyboardy animácie behu). Venujte pozornosť polohe nohy. Pre prehľadnosť som nakreslil nohy modrou farbou.

Krok 5

Na novej vrstve nakreslite polotovary nôh. Upozorňujeme, že nohy nie sú viazané na jeden bod na tele. Keď sa končatina pohybuje späť, jej základňa sa pohybuje doľava a keď je noha nasmerovaná dopredu, doprava.

Krok 6

Ďalej vykonáme postupnosť akcií na kreslenie hotovej verzie nohy. Na začiatok modrá natrieť farbou srsti (na to môžete použiť nástroj MaľovaťVedroNástroj(G) (Vyplniť) s vypnutou možnosťou Súvislý(Susedné pixely)) a namiesto kreslenia obrysu okolo nôh vyberte prázdnu oblasť mimo nôh pomocou MágiaPrútikNástroj(W) (Magic Wand) a komprimujte výber Vyberte- Upraviť- Zmluva(Vybrať - Upraviť - Komprimovať) o 1 pixel. Potom otočte výber Vyberte-Inverzne(Výber - Invertovať) a potom pomocou nástroja MaľovaťVedroNástroj(G) (Vyplniť) ( Súvislý(Susedné pixely) vypnúť) vyplniť vybranú oblasť farbou obrysu.

Krok 7

Nohy ešte nie sú dokončené, ale pridajme na niektorých záberoch aj skákaciu pozíciu.

Pridávame výskok, pretože pri behu nie je telo postavy stále na rovnakej úrovni. Preto zdvihneme trup a hlavu o 1 pixel vyššie v treťom zábere, kde je noha natiahnutá dozadu a tlačí od zeme, a v šiestom zábere, v ktorom noha dvíha králika.

Skoky sú nižšie označené fialovými čiarami. Pre ostatné riadky znižujeme nepriehľadnosť(Nepriehľadnosť) do 20 %, bude to tieň. V platformových hrách takýto tieň nie je vždy potrebný, no v našom prípade urobí animáciu zaujímavejšou.

Krok 8

Na dokončenie nôh urobíme chodidlo bacuľatejšie, nohu spojíme s telom a trochu vytieňujeme.

Zvyšné dve fialové čiary vyplňte čiernou farbou a tiež znížte krytie na 20 %.

Krok 9

Po dokončení s nohami ich skopírujte a posuňte kópie o niekoľko pixelov doprava.

Teraz obrázok vyzerá zvláštne, pretože obe nohy smerujú rovnakým smerom, čo je pre králiky prirodzené, keďže sa pohybujú skákaním. Ale náš králik je humanoidný charakter a podľa toho sa bude pohybovať.

Krok 10

Na vytvorenie animácie behu sa nohy musia pohybovať v opačných smeroch, pričom jedna noha je natiahnutá dopredu a druhá dozadu.

Keďže máme 6 rámov, pohyb jednej nohy za opačnej strane bude pozostávať z troch ustanovení. Kópie nožičiek preusporiadame tak, aby originál a kópia smerovali opačným smerom.

Vrstvy s kópiami by mali byť pod vrstvou s telom králika.

Krok 11

Aby ste dokončili nohy na pozadí, namaľte ich tmavším odtieňom základnej farby, ako sme to urobili na statickom výkrese vyššie.

Takto vyzerá hotová animácia nôh. Na samotný proces animácie ešte nemyslite. Najprv dokončíme školenie personálu a potom ich začneme uvádzať do cyklu.

V pôvodnej lekcii animácia

Krok 12

Teraz je čas pridať ramená.

Nižšie môžete vidieť hrubý scenár pohybov rúk. Zostávajú v zakrivenej polohe počas celej animácie, iba mierne sa narovnávajú na prvom snímku. Môžete si však skúsiť nakresliť vlastnú animáciu pohybu ruky.

Krok 13

Ruky položte na novú vrstvu nad telo a vyplňte ich základnou farbou zajačika, rovnako ako sme to urobili s nohami.

Krok 14

Pridajte hlasitosť.

Krok 15

A nakoniec to vytieňujeme, aby sme pridali ďalší rozmer.

Krok 16

Krok 17

Vytieňujeme kópie rúk a prehodíme ich tak, aby obe ruky smerovali opačným smerom.

Pamätajte, že ruky sa pohybujú v opačnom smere ako nohy. Napríklad, keď sa ľavá noha pohybuje dopredu, ľavá ruka sa pohybuje späť.

Takto vyzerá animácia ruky.

V pôvodnej lekcii animácia

Krok 18

Teraz pridajme pohyb k hlave, keďže momentálne vyzerá príliš staticky.

Teraz prinútime uši pohybovať sa v súlade s telom. Na záberoch, kde králik mierne poskakuje, sú uši nasmerované nadol, pohybujú sa zotrvačnosťou, napriek tomu, že králik poskakuje nahor.

Krok 19

V ďalšom rámci po skoku sú uši menej zakrivené a smerujú dopredu.

Krok 20

Animujeme aj líčka. Ich pohyb je podobný pohybu uší: počas skoku klesnú o niečo nižšie, potom sa po skoku zdvihnú.

Takto vyzerá hotová verzia.

V pôvodnej lekcii animácia

Krok 21

Musíme len dokončiť telo. Najprv animujeme biele brucho. Pri behu sa vám hrudník mierne otáča a biela škvrna musí na tento pohyb reagovať.

Keď je predná ruka nasmerovaná dozadu, väčšina miesta bude viditeľná, keď je ruka nasmerovaná dopredu, vidíme len malú časť brucha.

Krok 22

V statickej polohe nie je potrebné kresliť chvost, pretože môže byť skrytý za telom. Ale pri spustenej animácii je lepšie tento prvok neignorovať.

Najprv nakreslite červený štvorec na novú vrstvu, aby ste označili umiestnenie chvosta. Zatiaľ môže byť táto vrstva nad všetkými predchádzajúcimi vrstvami.

Krok 23

Naplňte chvost farbou, naneste tiene a ťah.

Krok 24

V prvom ráme, keď je predná ruka stiahnutá dozadu, špička chvosta sa prekrýva.

Krok 25

Ak chcete dokončiť chvost, presuňte vrstvu na pozadie a v prípade potreby upravte tiene/detaily.

Ukončili sme prácu s personálom. Takto vyzerá hotová animácia. Ďalšie detaily robia animáciu oveľa zaujímavejšou, však?

V pôvodnej lekcii animácia

4. Vytvorte animáciu

Máme 6 snímok spustenej animácie, ktorá beží v slučke. Teraz ich musíme len zlepiť.

Krok 1

Skopírujte všetky snímky do nového súboru.

Musíte skopírovať jednu snímku po druhej v správnom poradí (zľava doprava). Ak chcete skopírovať všetky vrstvy naraz, musíte prejsť do ponuky Upraviť- KopírovaťZlúčené(Úprava - Kopírovať kombinované údaje). Pred kopírovaním sa uistite, že pozadie je priehľadné a nie je vyplnené farbou.

Nová veľkosť súboru by mala byť o niečo väčšia ako veľkosť králika.

Po vložení rámov ich vložíme správna poloha. Spodný riadok zostáva nezmenený vo všetkých snímkach, rovnako ako nos, okrem dvoch snímok, kde králik skočí o 1 pixel.

Vo výsledku by ste mali mať celkovo 6 vrstiev, jednu vrstvu pre každý rám, pozadie je priehľadné.

Krok 2

Ak chcete začať vytvárať animácie vo Photoshope, musíme otvoriť časovú os okno- Časová os(Okno – Časová os). Na váhe je tlačidlo VytvorteRámAnimácia(Vytvorte animáciu po jednotlivých snímkach). Namiesto toho môže byť tlačidlo VytvorteVideoČasová os(Vytvoriť časovú os videa) Ak chcete prepnúť na animáciu, kliknite na tlačidlo so šípkou a vyberte požadovaný režim zo zobrazenej rozbaľovacej ponuky.

Krok 3

Stlačte tlačidlo VytvorteRámAnimácia(Vytvorte animáciu po jednotlivých snímkach), potom kliknite na tlačidlo pre vyvolanie parametrov v pravom hornom rohu mierky...

...a vyberte si MakeRámyOdVrstvy(Vytvorte rámy z vrstiev).

Krok 4

A nakoniec vyberte všetky snímky a v prípade potreby zmeňte oneskorenie (ja som zvolil 0,1 sekundy), nastavte režim opakovania na navždy(Vždy).

A získame tohto zábavného zajačika s bežiacou animáciou!

Teraz môžete tohto sprite použiť v hre alebo ho exportovať do GIF.

Gratulujeme, králik teraz môže bežať! Je pripravený zachrániť králičiu princeznú a ďalšie hrdinské úspechy.

Tento tutoriál by vám mal poskytnúť pochopenie princípov dizajnu sprite a animácie. Teraz si môžete nakresliť svoju vlastnú postavu alebo použiť hotového zajačika na hranie!

V tomto návode sa naučíte, ako premeniť fotografiu osoby na pixel art as fiktívna postava arkádová hra od začiatku 90. rokov.
James May - aka Smudgethis - vyvinul tento štýl v roku 2011 hudobné video pre dubstepový rockový počin. Nerov prvý hit Me & You, kde vytvoril animáciu, ktorú mal ukázať stará hra s dvoma členmi Nera Hra bola 2D rytmická plošinovka so 16-bitovou grafikou podobnou Double Dragon, ale oveľa lepšia ako 8-bitové retro klasiky ako Super Mario Bros.
Na vytvorenie tohto štýlu musia byť postavy stále hranaté, ale zložitejšie ako staršie hry. A hoci musíte použiť obmedzené farebná paleta dosiahnuť vzhľad pamätajte, že tieto hry mali stále 65 536 farieb.
Tu vám James ukáže, ako vytvoriť postavu z fotografie pomocou jednoduchej farebnej palety a nástroja Ceruzka.
Rovnako ako sprievodca animáciou budete potrebovať aj fotografiu osoby. James použil fotografiu punkera, ktorá je zahrnutá v súboroch projektu pre tento tutoriál.
Po dokončení si pozrite tento 16-bitový tutoriál animácie After Effects, kde vám James ukáže, ako vziať túto postavu do AE, animovať ju a použiť retro herné efekty.

Krok 1

Otvorte Sprievodcu animáciou (16 bit).psd a 18888111.jpg (alebo fotografiu podľa vlastného výberu), ktorú môžete použiť ako základ pre postavu. Profilová fotografia v plnej dĺžke bude fungovať najlepšie a pomôže vám získať farebné palety a štýly pre vašu 16-bitovú postavu.
Animačný tutoriál má niekoľko póz na jednotlivých vrstvách. Vyberte si ten, ktorý najlepším možným spôsobom sa zhoduje s pózou na tvojej fotke - keďže v ráme nemáme nohy, išiel som so štandardnou pózou na úroveň 1.

Krok 2

Pomocou nástroja Rectangular Marquee Tool (M) vyberte hlavu z vašej fotografie a skopírujte ju (Cmd /Ctrl + C) a vložte ju (Cmd /Ctrl + V) do Sprievodcu animáciou (16 bit).psd.
Prispôsobte obrázok tak, aby sa zmestil, proporcionálne. Všimnete si, že keďže sú rozmery PSD veľmi malé, obraz začne okamžite kresliť pixel.

Krok 3

Vytvorte novú vrstvu a nakreslite obrys jednopixelovou čiernou ceruzkou (B), pričom použite sprievodcu animáciou, ktorý je v nej poskytnutý, a fotografiu ako základ. \n
Dodávaná príručka pomáha rozvíjať rad postáv od väčších figúrok šéfov alebo štíhlejších ženských. Toto je hrubý návod na skladanie a animáciu mojich pixelových postáv.

Krok 4

Pomocou nástroja kvapkadlo (I) naskúšajte najtmavšiu oblasť tónu pleti na fotografii a vytvorte malý farebný štvorec. Urobte to ešte trikrát, aby ste vytvorili štvorfarebnú paletu tónov pleti.
Vytvorte ďalšiu vrstvu pod obrysovou vrstvou a pomocou jednopixelového štetca a štvorfarebnej farebnej palety vytieňujte obrázok (opäť použite fotografiu ako sprievodcu). \n
Najlepšie je uložiť všetky prvky vašej kresby alebo rôzne vrstvy, pretože to uľahčuje ich opätovné použitie na iné tvary. To je užitočné najmä pre zloduchov, pretože väčšina 16-bitových hier používa veľmi podobné čísla. Napríklad jeden kamarát môže mať červenú košeľu a nôž, zatiaľ čo ďalší je identický s výnimkou modrej košele a zbrane.

Krok 5

Opakujte tento postup pre ostatné časti postavy, pričom látku vytieňujte tak, aby zodpovedala ostatným prvkom na pôvodnej fotografii. Nezabudnite pokračovať vo vzorkovaní pomocou nástroja kvapkadlo, aby ste najskôr vytvorili farebné palety, pretože to poskytuje konzistentnú sadu farieb, ktorá vyzerá skvele a vyhovuje relatívne obmedzenej palete farieb 16-bitových hier.

Krok 6

Pridajte údaje na vylepšenie svojej postavy pomocou odtieňov, tetovaní, náušníc atď. Najedzte sa tu a premýšľajte o tom, ako chcete, aby vaša postava vyzerala herné prostredie. Možno by mohli použiť sekeru alebo mať robotickú ruku?

Krok 7

Ak chcete animovať svoju postavu, opakujte predchádzajúce etapy pomocou ďalších piatich vrstiev sprievodcu animáciou. Zvládnutie tohto procesu a vytvorenie plynulých výsledkov môže chvíľu trvať, ale opätovným použitím prvkov z predchádzajúcich snímok sa dajú skrátiť. Napríklad v tejto sekvencii šiestich snímok zostáva hlava nezmenená.

Krok 8

Ak chcete skontrolovať, či je sekvencia animácie v poriadku, otvorte panel Animácia vo Photoshope a uistite sa, že práve prebieha iba prvá snímka animácie. Pri vytváraní animácie môžete pridávať nové snímky a zapínať a vypínať vrstvy, ale najrýchlejším spôsobom je použiť príkaz Vytvoriť snímky z vrstiev v rozbaľovacej ponuke panela (vpravo hore).
Prvý rámček je prázdne pozadie, preto ho vyberte a kliknutím na ikonu koša na paneli (dole) ho odstráňte.

6 najlepšie možnosti vytvoriť svoj vlastný pixel art, od skvelých bezplatných nástrojov až po výkonný profesionálny softvér.

Ako sa pixel art vyvinul do populárnej umeleckej formy, a nie ako náznak technického obmedzenia, rôzne nástroje, ktorý vývojári používajú na jeho vytvorenie. Niektorí používajú staré obľúbené položky, iní používajú bezplatné veci softvér a niektorí si vyberajú softvér vyššej kategórie. Ak máte radi pixel art alebo hľadáte nový softvér na tvorbu hier, výber môže byť ťažký.

Väčšina umelcov vám povie, že nástroj je len nástroj a ak sa ho dobre naučíte, môžete s akýmkoľvek nástrojom vytvoriť krásnu grafiku. Ak však potrebujete pomoc pri hľadaní nástroja, ktorý vám bude najlepšie vyhovovať, tu je niekoľko odporúčaných. A pre inšpiráciu si pozrite obrovský archív grafiky na PixelJoint a toto veľká zbierka učebnice o pixelovej grafike.

aseprit

Odkaz

Cena: 15 USD alebo zadarmo, ak si ho zostavíte sami
Dostupné pre: Windows / OS X / Linux

Aseprite je špeciálne vyrobený pre pixelovú grafiku. Nie je to zadarmo, ale 15 dolárov nie je zlá cena, ak hľadáte dlhodobé riešenie. Aseprite však môžete použiť zadarmo, ak si chcete zdrojový kód skompilovať sami.

Toto je jeden z najčastejšie odporúčaných pixelových umeleckých programov, a to z dobrého dôvodu. Aseprite má všetky štandardné funkcie, ktoré potrebujete na vytvorenie pixelového umenia, zabalené v užívateľsky prívetivom rozhraní. Sťahovanie cibule – možnosť vidieť snímku, s ktorou pracujete, ako aj snímky animácie, ktoré ju nasledujú a predchádzajú – to, čo potrebujete pre animáciu. Aseprite môže tiež exportovať celé hárky sprite a súbory GIF a vykonávať ďalšie funkcie špecifické pre pixely.

Aseprite má veľa fanúšikov, ale nie každý ho má rád. Samotný program má nízke rozlíšenie. Pre niektorých je pixelové rozhranie na úpravu pixelov považované za logické a pomáha získať kreatívne myslenie. Pre iných je to zbytočné rozptýlenie.

Jay Tholen, tvorca a umelec dobrodružnej hry Dropsy typu point-and-click, prešiel po aplikácii Microsoft Paint na Aseprite a odvtedy svoje preferencie nezmenil. “ Skôr som sa držal „bezpečnej“ farebnej palety. Ak by som urobil kúsok a potom sa rozhodol, že farba nefunguje, musel by som ho silne vyplniť inými farbami alebo ho nechať tak a potom trpieť veky. Pre Hypnospace Outlaw som použil funkciu stmievania farieb Aseprite, aby 3D grafika získala staromódny vzhľad „bezpečných“ farieb.”.

Odkaz

Cena: Zadarmo
Dostupné pre:Windows

GraphicsGale je ďalší seriózny program vytvorený špeciálne pre pixelovú grafiku. Má rovnaké hlavné funkcie, aké by ste očakávali pri kreslení a animácii: sťahovanie cibule, správa vrstiev a palety farieb. Najväčšou nevýhodou GraphicsGale je, že je k dispozícii iba pre Windows.

Okrem skvelej ceny má GraphicsGale dve skvelé funkcie na zlepšenie vášho pracovného postupu. Môžete importovať obrázky zo skenerov a digitálnych fotoaparátov, ak pred vytvorením pixelov uprednostňujete kreslenie ručne. Program využíva zariadenia, ktoré podporujú TWAIN, čo sú našťastie takmer všetky skenery a fotoaparáty. Asi najpozoruhodnejšou funkciou je možnosť náhľadu animácií počas úprav. Nie je potrebné prerušovať prácu, aby ste exportovali gif alebo dokonca pozastavili okno ukážky. Získanie okamžitej spätnej väzby pri práci vám pomôže cítiť sa istejšie pri experimentovaní s animáciou.

Jedna z najvýznamnejších profesionálnych hier vytvorených pomocou GraphicsGale: vynikajúci Duelyst.

Pro Motion NG

Odkaz

Cena: 40 dolárov alebo časovo obmedzená bezplatná verzia
Dostupné pre:Windows

Zatiaľ čo GIMP a Photoshop sú prepracované nástroje, Pro Motion je vysokokvalitný program vytvorený špeciálne pre pixel art, ktorý vytvára pôsobivé profesionálne hry, ako napríklad Shovel Knight. Pro Motion má rozsiahle možnosti pre animáciu sprite a úpravu sady dlaždíc. Rovnako ako Pyxel Edit, aj Pro Motion vám umožňuje upravovať všetky rovnaké dlaždice. Môže sa tiež automaticky vyplniť veľké časti kreslenie.

Pro Motion je spočiatku dostupný len pre Windows, ale je možné spustiť program na Linuxe a OS X cez Wine. Bezplatná verzia Pro Motion ponúka mnoho funkcií pre pixel art: podporu pre kreslenie šablón dlaždíc, editor máp dlaždíc, úpravu farebnej palety a efekty vrstiev. Ak to skúsite a rozhodnete sa program zakúpiť, platená verzia pridáva mnoho funkcií pre pokročilých používateľov, ako napríklad možnosť meniť klávesové skratky, automatické zálohovanie a otváranie viacerých projektov naraz. Pro Motion môže byť najlepší program, ktorý ponúka skvelú hodnotu za peniaze a je vyrobený špeciálne pre prácu s pixelmi.

Odkaz

Cena: 20-30 dolárov mesačne
Dostupné pre: Windows/OS X

Adobe Photoshop nepotrebujem žiadny úvod, ale aj tak vám to poviem podrobnejšie. Ako popredný softvér na úpravu obrázkov s vysokým rozlíšením vás Photoshop bude stáť 20 dolárov mesačne v závislosti od zvoleného plánu predplatného (ročné je lacnejšie ako mesačné). Študenti si ho môžu kúpiť lacnejšie – za 10 dolárov mesačne. Ak už máte to šťastie, že sa vám dostane do rúk kópia, vďaka vzdelávacej licencii alebo predtým, ako sa prihlásite na odber, používanie programu na vytváranie grafiky je okamžite možné. Výhodou používania produktov Adobe je dostupnosť obrovského množstva zdrojov. Ak je nejaká funkcia, ktorú sa potrebujete naučiť, môžete si byť istí, že na Google existuje oficiálna dokumentácia a nekonečné textové a videopríručky.

Pokiaľ ide o funkcie, Photoshop má všetko, čo potrebujete, a ešte viac. Rovnako ako jeho bezplatná alternatíva GIMP, nie je vytvorený špeciálne pre pixel art, ale existuje veľa návodov, ako nastaviť Photoshop tak, aby pracoval s pixel artom a vyťažil maximum z výkonu Photoshopu. Niekedy to nie je veľmi dobré pri práci s nízkym rozlíšením, ale pre tých, ktorí sú na to zvyknutí, môže byť mimoriadne efektívne. Schopnosť ovládať vrstvy, štýly vrstiev, vlastné štetce, palety a históriu úprav môže veľa pridať k vášmu pracovnému postupu.

Len Stewart, hlavný umelec Pixel Noir, používa Photoshop nielen kvôli jeho všestrannosti, ale aj preto, že je naň zvyknutý. „Osobne odvtedy používam Photoshop stredná škola, takže je to len program, ktorý používam pohodlne.“

GIMP

Obrázok z návodu na prefarbenie hárkov sprite v Gimpe.

Odkaz

Cena: zadarmo
Dostupné pre: Windows / OS X / Linux

GIMP je známy editor obrázkov s vysokým rozlíšením, ale to neznamená, že je menej populárny pre prácu s nízkym rozlíšením. Hoci najznámejšou kvalitou GIMPu je, že je to „bezplatný Photoshop“, má mnoho ďalších. silné stránky, ktoré znižujú prevádzkový čas. Jednou z funkcií je, že je prispôsobiteľný prostredníctvom viacerých programovacích jazykov. Existuje pomerne veľa doplnkov vytvorených komunitou, čo znamená, že s určitým úsilím si môžete sami prispôsobiť funkčnosť GIMPu.

Ak z akéhokoľvek dôvodu prejdete z práce s pixelmi na prácu s grafikou vysoké rozlíšenie, GIMP – dobrý spôsob Nenechajte sa rozptýliť v obrovskom množstve iných programov.

V tomto návode sa naučíme techniku ​​premeny fotografie osoby na pixelovanú arkádovú postavu zo začiatku 90. rokov.

James May - aka Smudgethis - vyvinul tento štýl v roku 2011 pre prvý hit dubstepovej rockovej skupiny Nero - Ja a ty. Vytvoril animáciu, ktorá zobrazovala dvoch členov kapely ako postavy zo starej arkádovej hry. Hra vyzerala ako 16-bitový side-scroller beat-em-up, podobne ako DvojitéDrak, ale veľa najlepšia kvalita ako osembitová retro klasika SuperMárioBros.

Na vytvorenie tohto efektu musia byť postavy trochu zavalité, no detailnejšie ako v najstarších hrách. Keďže budeme musieť obmedziť paletu farieb, nezabudnite, že tieto hry mali iba 65 536 farieb.

V tomto návode vám James ukáže, ako vytvoriť postavu na základe fotografie pomocou jednoduchej farebnej palety a nástroja Ceruzka(Ceruzka).

Okrem rámu animácie budeme potrebovať aj fotografiu. James použil fotku punkera, ktorú zahrnul do učebných materiálov.

Keď skončíte, pozrite si návod na 16-bitovú animáciu v After Effects, kde vám James ukáže, ako priviesť postavu do AE, rozhýbať ju a použiť retro herné efekty.

Krok 1

Otvorte súbory AnimáciaSprievodca (16bit).psd A 18888111. jpg(alebo fotografiu podľa vlastného výberu) použiť ako základ postavy. Profilová fotka v plnej výške bude fungovať skvele a tiež vám pomôže získať farebné palety a 16-bitové umelecké štýly.

Rám animácie má niekoľko pozícií rôzne vrstvy. Vyberte si tú, ktorá sa najviac hodí k polohe na fotke - keďže na našej fotke nevidno nohy, zvolila som štandardnú pózu na prvú vrstvu.

Krok 2

Pomocou nástroja Obdĺžnikový výber(nástroj obdĺžnikový výber) vyberte hlavu osoby, skopírujte ( Ctrl +C) a prilepiť ( Ctrl +V) v nej AnimáciaSprievodca (16bit).psd.

Roztiahnite fotografiu tak, aby sa proporcionálne zmestila. Všimnete si, že vzhľadom na malú veľkosť dokumentu bude mať fotografia pixelový vzhľad.

Krok 3

Vytvorte novú vrstvu a namaľte ťah čiernou farbou Ceruzka(ceruzka) s hrúbkou jedného pixelu, pričom ako základ sa používa drôtený model.

Tento rám pomáha pri kreslení rôznych postáv, od veľkých „šéfov“ až po štíhle hrdinky. Toto je hrubý základ pre skladanie a animáciu môjho pixelového umenia.

Krok 4

Pomocou nástroja Pipetujte(nástroj kvapkadlo), vyberte najtmavšiu oblasť pokožky a namaľte malú oblasť výslednou farbou. Urobte to ešte trikrát, výsledkom čoho bude štvorfarebná paleta pre tóny pleti.

Vytvorte vrstvu pod ťahom, potom pomocou štetca s polomerom jeden pixel a výslednou paletou vytieňujte znak (opäť použite fotografiu ako vodítko).

Najlepšie skladovať rôzne prvky pracovať na rôznych vrstvách, pretože to uľahčuje ich aplikáciu na iné postavy. To je užitočné najmä pri kreslení „zlých ľudí“, ako sa používa veľa 16-bitových hier podobné tváre. Napríklad jeden bandita môže mať na sebe červené tričko a držať nôž, zatiaľ čo iný by vyzeral identicky, len mal na sebe modré tričko a držal zbraň.

Krok 5

Opakujte postup pre zvyšok tela, vytieňujte pokožku a oblečenie a zamerajte sa na pôvodnú fotografiu. Nezabudnite použiť Pipetujte(nástroj kvapkadlo) tak, že najskôr vytvoríte farebnú paletu, pretože tým vytvoríte pevnú sadu farieb, ktoré vyzerajú skvele a zapadajú do 16-bitového štýlu.

Krok 6

Pridajte detaily vylepšením postavy ďalšími tieňmi, tetovaniami, náušnicami alebo podobne. Experimentujte v tejto fáze a premýšľajte o tom, ako postava zapadne do herného prostredia. Možno bude mať pripravenú sekeru alebo dostane mechanickú ruku?

Krok 7

Ak chcete animovať postavu, zopakujte predchádzajúce kroky na zostávajúcich piatich vrstvách animačného rámca. Zvládnutie tohto procesu a dosiahnutie organických výsledkov môže chvíľu trvať. Opätovným použitím prvkov z predchádzajúcich krokov však môžete ušetriť čas. Napríklad v sekvencii šiestich snímok je hlava sotva ovplyvnená.

Krok 8

Ak chcete skontrolovať, či je všetko nakreslené správne, otvorte panel Animácia(Animácia) vo Photoshope a uistite sa, že prvá snímka je aktívna. Môžete pridať nové snímky, zapnúť alebo vypnúť každú vrstvu a získať animáciu, ale najrýchlejším spôsobom je použiť príkaz Vytvárajte rámy z vrstiev(Make Frames From Layers) v rozbaľovacej ponuke panela (pravý horný roh).

Prvá vrstva je prázdne pozadie, preto ju vyberte a kliknutím na ikonu koša (dole) ju odstráňte.