Az indie fejlesztőknek gyakran több szerepet kell betölteniük: játéktervezőt, programozót, zeneszerzőt, művészt. És amikor a vizuális megjelenésre kerül a sor, sokan a pixelművészetet választják — első pillantásra egyszerűnek tűnik. De ahhoz, hogy szép legyen, sok tapasztalat és bizonyos készségek szükségesek. Találtam egy oktatót annak, aki most kezdi felfedezni ennek a stílusnak az alapjait: a szükséges szoftverek és rajzolási technikák leírásával két sprite példáján.
Háttér
A pixelművészet a digitális művészet egy formája, amelyben a módosításokat pixelek szintjén végzik. Főként a 80-as és 90-es évek videójátékainak grafikájával társítják. Akkor a művészeknek figyelembe kellett venniük a memória- és alacsony felbontás korlátait. Ma a pixelművészet továbbra is népszerű a játékokban és mint művészeti stílus, annak ellenére, hogy lehetőség van a valósághű 3D grafika készítésére. Miért? Még ha nem is vesszük figyelembe a nosztalgiát, egy remek munka elkészítése ilyen szigorú keretek között kellemes és megérdemelt kihívás.
A pixelművészethez való belépés nehézségi küszöbe viszonylag alacsony a hagyományos művészethez és a 3D grafika világához képest, ami vonzóvá teszi az indie fejlesztők számára. De ez egyáltalán nem jelenti azt, hogy egyszerű lesz befejezni a játékot ebben a stílusban. Láttam sok indie fejlesztőt pixelművészetet használó metroidvaniákkal a közösségi finanszírozási platformokon. Úgy gondolták, mindent megtudnak csinálni egy év alatt, de valójában még hat évre volt szükségük.
Metal Slug 3 (Arkáda). SNK, 2000
A pixelművészet azon a szinten, amelyen a legtöbben szeretnék készíteni, sok időt igényel, és nagyon kevés a rövid oktatóanyag. 3D modellel dolgozva forgathatja, deformálhatja, mozgatja a részeit, más modellekből másolhat animációkat, stb. A magas szintű pixelművészet szinte mindig rengeteg energiát emészt fel a pixelek gondos elhelyezésére minden egyes képkockán.
Összességében figyelmeztettem.
Most már egy kicsit a stílusomról: főként pixel-artot rajzolok videójátékokhoz, és ebből merítek inspirációt. Különösen nagy rajongója vagyok a Famicom/NES-nek, a 16 bites konzoloknak és a 90-es évek arcade játékainak. Az akkori kedvenc játékaim pixel-artját élénknek, határozottan és tisztán lehet leírni (de nem túlzottan), nem nevezhető keménynek vagy minimalista stílusúnak. Ebben a stílusban dolgozom, de az ebből a tutorialból származó ötleteket és technikákat könnyen alkalmazhatod teljesen más dolgok létrehozására is. Tanulmányozd különböző művészek munkáit, és készíts pixel-artot, ami neked tetszik!
Szoftver
Alapvető digitális eszközök pixel-arthoz — Zoom (Zoom) és Ceruza (Pencil), hogy elhelyezhesd a pixeleket. Használni fogod a vonalat (Line), az alakzatot (Shape), a kijelölést (Select), a mozgatást (Move) és a festéket (Paint Bucket) is. Sok ingyenes és fizetős szoftver létezik egy ilyen eszközkészlettel. Én a legnépszerűbbeket mutatom be, valamint azokat, amelyeket magam is használok.
Paint (ingyenes)
Ha Windowsod van, a beépített Paint egy primitív program, de minden szükséges eszközt megad a pixel-arthoz.
(ingyenes)
Meglepetésre funkcionális pixel-art szerkesztő, amely böngészőből indítható. A munkád exportálható PNG vagy animált GIF formátumban. Nagyszerű választás kezdőknek.
(ingyenes)
A GraphicsGale az egyetlen szerkesztő, amelyről hallottam, kifejezetten pixel-arthoz készült, és animációs eszközöket is tartalmaz. A HUMANBALANCE nevű japán cég fejlesztette ki. 2017 óta ingyenesen terjesztik, és továbbra is népszerű, annak ellenére, hogy az Aseprite népszerűsége nőtt. Sajnos csak Windows-on működik.
($)
Talán a legnépszerűbb szerkesztő jelenleg. , rengeteg lehetőség, aktív támogatás, Windows, Mac és Linux verziók. Ha komolyan veszed a pixel-artot, és még nem találtad meg a megfelelő szerkesztőt, lehet, hogy ez az, amire szükséged van.
($$+)
A GameMaker Studio 2 kiváló 2D-es eszköz, jó sprite szerkesztővel (Sprite Editor). Ha pixel-artot szeretnél készíteni a saját játékaidhoz, nagyon kényelmes mindent egy programban megoldani. Jelenleg ezt a szoftvert használom a , egy 50 retro játékból álló gyűjteményen: a sprite-okat és animációkat a GameMakerben készítem, míg a tileset-eket Photoshopban.
($$$+)
A Photoshop egy drága szoftver, amelyet előfizetéssel lehet használni, és nem kifejezetten pixel-art készítésére készült. Nem ajánlom megvásárolni, ha nem illusztrációkat készítesz magas felbontásban, vagy ha nem szükséges bonyolult képmódosításokat végezni, mint ahogy én szoktam. Statikus sprite-okat és pixelmunkákat létrehozni lehet benne, de viszonylag bonyolultabb a szakosodott szoftverekhez (például a GraphicsGale vagy az Aseprite) képest.
Egyéb
Az én pixel-art készletem. Minden fekete, csak most vettem észre.
Grafikus tablet ($$+)
Ajánlom a grafikus tableteket bármilyen digitális illusztrációs munkához, hogy elkerüld a karpaltunnel szindrómát. Sokkal könnyebb megelőzni, mint kezelni. Ha egyszer fájdalmat érzel, az csak fokozódni fog — vigyázz magadra az elején. Mivel valaha egérrel rajzoltam, most nehezen tudok olyan játékokkal játszani, amelyekben gombokat kell nyomni. Jelenleg Wacom Intuos Pro S-t használok.
Csuklótámasz ($)
Ha nem tudsz tabletet vásárolni, legalább egy csuklótámaszt vásárolj. Nekem a Mueller Green Fitted Wrist Brace tetszik a legjobban. A többiek vagy túl szorosak, vagy nem nyújtanak elegendő támaszt. A támaszokat könnyen rendelheted online.
96×96 pixel
Final Fight. Capcom, 1989
Kezdjük! Kezdjük a 96×96 pixel méretű karakter sprite-tal. Példaként rajzoltam egy orkát, és elhelyeztem egy képernyőképen a Final Fight-ból (a fenti képen), hogy értsd a méretet. Ez nagy sprite a legtöbb retro játékhoz, a képernyőkép mérete: 384×224 pixel.
Ekkora sprite-nál könnyebb bemutatni azokat a technikákat, amelyeket szeretnék megosztani. A pixelalapú rajzolás jobban hasonlít a hagyományos művészeti formákhoz (például a rajzoláshoz vagy a festéshez), amellyel valószínűleg jobban ismerős vagy. A alapvető technikák elsajátítása után áttérünk a kisebb sprite-okra.
1. Válasszunk palettát
A pixel sokkal mélyebb fogalom a pixel-artban, mint bármely más digitális területen. A pixel-art a korlátozásai, például a színek által van meghatározva. Fontos a paletta helyes kiválasztása, ez segít meghatározni a stílusodat. De a kezdetekben azt javaslom, hogy ne gondolj a palettákra, és válassz egy meglévőt (vagy egyszerűen néhány véletlenszerű színt) — az bármikor könnyedén megváltoztatható.
Ehhez a oktatóanyaghoz egy 32 színből álló palettát fogok használni, amelyet mi készítettünk a . A pixelművészethez gyakran 32 vagy 16 színből álló palettákat gyűjtenek. A miénk egy fiktív konzolhoz készült, amely valahol a Famicom és a PC Engine között létezhetett volna. Használhatja ezt vagy bármely más palettát — az oktatóanyag teljesen független a választott palettától.
2. Durva kontúrok
Kezdjük a rajzolást a Ceruza eszközzel. Készítsünk egy vázlatot, ahogy azt a hagyományos tollal és papírral tennénk. Természetesen a pixelművészet és a hagyományos művészet átfedéseket mutat, különösen ha nagyobb sprite-okról van szó. Tapasztalataim szerint a tehetséges pixelművészek legalább annyira jól rajzolnak kézzel, és fordítva. Tehát a rajzolási készségek fejlesztése mindig hasznos.
3. Kontúrok kidolgozása
Finomítsuk a kontúrokat: távolítsuk el a felesleges pixeleket, és csökkentsük a vonalak vastagságát egy pixelre. De mi számít feleslegesnek? Ehhez meg kell értenünk a pixelvonalakat és a görbületeket.
Görbületek
Meg kell tanulni két alapvető vonalat rajzolni pixelművészetben: egyenes és görbe vonalakat. Tollal és papírral minden az izomkontrollról szól, de mi apró, színes blokkokkal dolgozunk.
A helyes pixelvonalak rajzolásának kulcsa a görbületek. Ezek egyes pixelek vagy kis szegmensek, amelyek megszakítják a vonal simaságát. Ahogy már említettem, egyetlen pixel hatalmas jelentőséggel bír a pixelművészetben, ezért a görbületek tönkretehetik az egész esztétikát. Képzelje el, hogy egy egyenes vonalat húz a papírra, és hirtelen valaki megüti az asztalt: a pixelművészetben a görbületek úgy néznek ki, mint egy véletlen firka.
Példák:
Egyenesek
Görbék
A görbületek akkor jelennek meg, amikor a vonal szegmenseinek hossza fokozatosan csökken vagy nő.
A görbületek elkerülése lehetetlen — minden kedvenc retro játékában megtalálhatóak (ha persze a pixelművészet nem kizárólag egyszerű formákból áll). A cél: minimalizálni a görbületeket, miközben minden szükségeset bemutatunk.
4. Az első színek alkalmazása
Színezd ki a figurádat kitöltéssel vagy más megfelelő eszközzel. A paletta megkönnyíti ezt a részt. Ha a szoftver nem támogatja a paletták használatát, akkor az képet közvetlenül beillesztheted, ahogy az a fenti példában látható, és a pipetta segítségével választhatod ki a színeket.
A bal alsó sarokban megrajzoltam a barátunkat, ismerkedjetek meg vele, ő — Shar. Rajta keresztül könnyebb megérteni, mi történik minden egyes lépésnél.
5. Árnyékolás
Itt az ideje, hogy megjelenítsük az árnyékokat — egyszerűen sötétebb színeket adunk a sprite-hoz. Így a kép térbeli hatású lesz. Tegyük fel, hogy egy fényforrásunk van, amely az ork felett balra található. Ezért minden, ami a figura fölött és elől helyezkedik el, világítva lesz. Adjunk árnyékokat alul jobbra.
Forma és térfogat
Ha ez a lépés nehézséget okoz, képzeld el a rajzodat térbeli formákként, és ne csupán vonalak és színek halmazaként. A formák háromdimenziós térben léteznek, és rendelkezhetnek térfogattal, amelyet árnyékok segítségével alakítunk ki. Ez segít vizualizálni a karaktert részletek nélkül és elképzelni, hogy az agyagból készült, nem pedig pixelekből. Az árnyékolás nem csupán új színek hozzáadása, hanem a forma kialakításának folyamata. Egy jól kidolgozott karakteren a részletek nem takarják el az alapvető formákat: ha hunyorítasz, több nagyobb fény- és árnyékközéppontot láthatsz.
Simítás (anti-aliasing, antialiasing)
Minden alkalommal, amikor új színt használok, alkalmazom az antialiasingot (AA). Ez segít simítani a pixeleket, közbenső színek hozzáadásával a vonal két szegmense érintkezésének sarkainál:
A szürke pixelek enyhítik a vonal "töréseit". Minél hosszabb a vonalszegmens, annál hosszabb az AA-szegmens.
Így néz ki az AA az ork vállán. Erre van szüksége, hogy simítsa a vonalakat, amelyek az izmai ívét ábrázolják.
A simítás nem lépheti túl azt a sprite-ot, amelyet a játékban vagy háttérben használnak, aminek a színe ismeretlen. Például, ha AA-t alkalmazol világos háttérre, sötét háttér esetén a simítás csúnyán néz ki.
6. Kiválasztott körvonal
Korábban a körvonalak teljesen feketék voltak, ami miatt a sprite nagyon mesebeli hatást keltett. A kép mintha szegmensekre lett volna bontva. Például a karon lévő fekete vonalak túl kontrasztosan ábrázolják az izmokat, és a karakter kevésbé tűnik egységesnek.
Ha a sprájt természetesebb lesz, és a szegmentálás nem lesz olyan nyilvánvaló, akkor a karakter alapvető formái könnyebben olvashatóak lesznek. Ehhez használhatunk szelektív kontúrt — a fekete kontúr részben világosabbal helyettesíthető. A sprájt világos részén a legvilágosabb színeket használhatjuk, vagy ott, ahol a sprájt a negatív térrel érinti, teljesen eltüntethetjük a kontúrt. A fekete helyett olyan színt kell használni, ami a árnyéknak lett kiválasztva — így megmarad a szegmentálás (az izmok, szőrzet és hasonlók határvonalainak megkülönböztetésére).
Ezen a ponton sötétebb árnyékokat is hozzáadtam. Három különböző zöld árnyalatot használtunk az ork bőrén. A legsötétebb zöld színt a szelektív kontúrhoz és AA-hoz használhatjuk.
7. Végső simítások
A végén érdemes csillogásokat (a sprájton a legvilágosabb foltok), részleteket (fülbevalók, szegecsek, hegek) és egyéb javításokat hozzáadni, amíg a karakter kész nem lesz, vagy amíg nem kell a következőre áttérni.
Ez a szakasz több hasznos trükköt is alkalmazhat. Fordítsuk el a képet vízszintesen, ez gyakran segít feltárni a arány- és árnyékolási hibákat. A színt is eltüntethetjük — állítsuk a telítettséget nullára, hogy lássuk, hol kell megváltoztatni az árnyékokat.
Zaj létrehozása (dithering)
Eddig alapvetően nagy, tömör árnyékterületeket alkalmaztunk. De létezik egy másik technika is — a dithering, amely lehetővé teszi az egyik színről a másikra való áttérést anélkül, hogy harmadik színt adunk hozzá. Nézze meg az alábbi példát.
A felső árnyalat a sötétből világosra használja a kék színek százait.
A középső árnyalat mindössze kilenc színt használ, de még mindig túlságosan sok ugyanannak a színnek az árnyalatát tartalmazza. Fellép a banding, ami miatt a vastag egységes csíkok miatt a szem a színek találkozási pontjaira összpontosít a színek helyett.
Az alsó árnyalaton ditheringet alkalmaztunk, amely lehetővé teszi a banding elkerülését, és mindössze két színt használ. Különböző intenzitású zajt hozunk létre, hogy imitáljuk a színátmenetet. Ez a technika nagyon hasonlít a halftone-ra, amely nyomtatásnál alkalmazható; valamint a stippling-ra is — amelyet illusztrációknál és képregényeknél használnak.
Az orknál nagyon keveset alkalmaztam a diszkrét szűrést a textúra átadásához. Néhány pixelművész egyáltalán nem használja, mások viszont nem haboznak, és nagyon ügyesen alkalmazzák. Szerintem a diszkrét szűrés legjobban a nagy, egy színnel kitöltött területeken néz ki (figyelj az égre a korábban bemutatott Metal Slug képen), vagy azokon a területeken, amelyeknek durvának és egyenetlennek kell kinézniük (például a sár). Dönts el, hogyan használod.
Ha szeretnél egy példát látni a nagyszabású és minőségi diszkrét szűrésre, tanulmányozd a The Bitmap Brothers játékait, a brit stúdióból az 80-as évekből, vagy a PC-98-ra készült játékokat. Csak vedd figyelembe, hogy mindegyik NSFW.
Kakyusei (PC-98). Elf, 1996.
Ezen a képen mindössze 16 szín van!
8. Utolsó pillantás
A pixel-art egyik veszélye, hogy könnyűnek és egyszerűnek tűnik (a felépítése és a stílus korlátai miatt). De végül rengeteg időt fogsz eltölteni a sprite-jaid finomításával. Olyan, mint egy rejtvény, amelyet meg kell oldani – ezért vonzza a pixel-művészet a perfekcionistákat. Ne feledd, hogy egy sprite-nak nem szabad túl sok időt elvennie – ez csupán egy apró darabja egy rendkívül bonyolult, darabokból álló összegyűjtésnek. Fontos, hogy ne veszítsd el a teljes kép látását.
Még ha a pixel-artod nem is játékokhoz készült, néha érdemes azt mondani magadnak: "Minden elég jól néz ki!" És továbblépni. A legjobb módja a készségek fejlesztésének, ha minél többször végigjársz az egész folyamaton, kezdettől a végéig, minél több témát használva.
És néha hasznos kis időre félretenni a sprite-ot, hogy később friss szemmel nézhesd meg.
32×32 pixel
Egy nagy 96×96 pixel méretű sprite-ot készítettünk először, mert ebben a méretben ez inkább hasonlít a rajzolásra vagy festésre, de csak pixel formájában. Minél kisebb a sprite, annál kevésbé hasonlít arra, amit meg kellene jelenítenie, és annál fontosabbá válik minden egyes pixel.
A Super Mario Bros.-ban Mario szeme mindössze két pixelből áll, egy a másik fölött. És a füle is. A karakter megalkotója, Shigeru Miyamoto azt mondta, hogy a bajuszra azért volt szükség, hogy elválassza az orrát a többi arctól. Tehát Mario arca egyik fő jellemzője nem csupán a karakter designja, hanem egy praktikus trükk is. Ami megerősíti a régi bölcsességet - "a szükség a találékonyság anyja".
A sprite of 32×32 pixels already consists of familiar stages: sketch, color, shadows, and further refinement. However, in such cases, I choose colored shapes as the initial sketch instead of outlining due to the small size. Color plays a more significant role in defining a character than outlines do. Take another look at Mario; he has no outlines at all. It's not just the mustache that's interesting; his sideburns define the shape of his ears, his sleeves indicate his arms, and the overall shape fairly clearly represents his entire body.
Creating small sprites involves constant compromises. If you add an outline, you might lose space for shading. If your character's arms and legs are clearly visible, the head usually has to be relatively small. If you use color effectively, selective outlining, and anti-aliasing, the drawn object will appear larger than it actually is.
For small sprites, I enjoy the chibi style: characters look very cute, with large heads and eyes. It's a great way to create a vibrant hero in limited space, and overall, it's a very pleasant style. However, if you need to showcase the character's agility or strength, you might want to dedicate less space to the head for the body to appear more powerful. It all depends on your preferences and goals.
The whole team is assembled!
File Formats
Such an outcome can make any pixel artist nervous.
The image you see is the result of saving the drawing in JPG. Some data was lost due to file compression algorithms. Quality pixel art will ultimately look poor, and restoring its original palette can be challenging.
To save a static image without losing quality, use the PNG format. For animations, use GIF.
How to properly share pixel art
Sharing pixel art on social media is a great way to receive feedback and connect with other artists working in the same style. Don't forget to use the hashtag #pixelart. Unfortunately, social networks often convert PNG to JPG without asking, degrading your work. Moreover, it's not always clear why your image was converted.
Here are some tips on how to preserve pixel art in the right quality for various social media.
vagy a
A PNG fájl Twitter-ben való megjelenítéséhez használjon kevesebb mint 256 színt, vagy , hogy a fájlja kevesebb mint 900 pixel hosszú oldalú. Érdemes a fájl méretét legalább 512×512 pixelre növelni. Ráadásul a méretezésnek 100-ra oszthatónak kell lennie (200%, nem 250%), és meg kell őrizni az éles széleket (Nearest Neighbor a Photoshopban).
Animált GIF fájlok Twitter posztokhoz legfeljebb 15 MB nagyságúak lehetnek. A képen legalább 800×800 pixelnek kell lennie, a ciklikus animációnak háromszor kell ismétlődnie, és az utolsó snittnek fele olyan hosszú időtartammal kell rendelkeznie, mint a többi – ez a legnépszerűbb elmélet. Mindazonáltal nem világos, mennyire szükséges megfelelni ezeknek a követelményeknek, figyelembe véve, hogy a Twitter folyamatosan módosítja a képek megjelenítésének algoritmusait.
A tudomásom szerint lehetetlen képet közzétenni Instagramon minőségi veszteség nélkül. De biztosan jobban fog kinézni, ha legalább 512×512 pixelre növeli.
Forrás: habr.com
