Dezvoltatorii indie sunt adesea nevoiți să combine mai multe roluri: designer de jocuri, programator, compozitor, artist. Și, când vine vorba despre vizual, mulți aleg pixel art – care la prima vedere pare simplu. Dar pentru a face ceva frumos, ai nevoie de multă experiență și abilități specifice. Am găsit un tutorial pentru cei care tocmai au început să învețe elementele fundamentale ale acestui stil: cu descrierea software-ului special și tehnicilor de desenare, prin exemplul a două sprite-uri.
Fundal
Pixel art-ul este o formă de artă digitală în care modificările sunt făcute la nivel de pixeli. Acesta este asociat în principal cu grafica jocurilor video din anii '80 și '90. Atunci, artiștii trebuiau să țină cont de limitele de memorie și de rezoluția scăzută. În prezent, pixel art-ul este încă popular în jocuri și ca stil artistic în general, în ciuda posibilității de a crea grafică 3D realistă. De ce? Chiar și fără a lua în considerare nostalgia, crearea unei lucrări grozave în astfel de condiții stricte este o provocare plăcută și valoroasă.
Pragul de intrare în pixel art este relativ scăzut comparativ cu arta tradițională și grafică 3D, ceea ce atrage dezvoltatori indie. Dar asta nu înseamnă că va fi ușor să finalizezi un joc în acest stil. Am văzut mulți dezvoltatori indie cu metroidvanii pixel art pe platformele de crowdfunding. Ei credeau că vor termina totul în decurs de un an, dar de fapt le-a mai fost necesară încă șase ani.
Metal Slug 3 (Arcade). SNK, 2000
Pixel art-ul la nivelul la care majoritatea vrea să îl creeze ia mult timp, iar tutorialele scurte sunt foarte puține. Lucrând cu un model 3D, poți să-l rotești, să-l deformezi, să muți părți separate, să copiezi animații de la un model la altul și așa mai departe. Pixel art-ul de nivel înalt necesită aproape întotdeauna multă muncă pentru a plasa cu minuțiozitate pixele pe fiecare cadru.
În general, te-am avertizat.
Acum un pic despre stilul meu: în principal, creez pixel art pentru jocuri video și îmi găsesc inspirația în ele. În special, sunt fan al Famicom/NES, consolelor de 16 biți și arcade din anii '90. Pixel artul jocurilor mele preferate din acea perioadă poate fi descris ca fiind vibrant, încrezător și curat (dar nu prea), nu poate fi numit dur și minimalist. În acest stil lucrez eu însumi, dar poți aplica ușor ideile și tehnicile din acest tutorial pentru a crea lucruri complet diferite. Studiază lucrările diferiților artiști și creează pixel art care îți place!
Software
Instrumentele digitale de bază pentru pixel art sunt Zoom și Pencil pentru a plasa pixeli. De asemenea, îți vor fi utile Line, Shape, Select, Move și Paint Bucket. Există multe programe gratuite și plătite cu un astfel de set de instrumente. Voi vorbi despre cele mai populare și cele pe care le folosesc eu.
Paint (gratuit)
Dacă ai Windows, Paint-ul integrat este un program primitiv, dar are toate instrumentele necesare pentru pixel art.
(gratuit)
Un editor de pixel art surprinzător de funcțional, care funcționează prin browser. Poți exporta lucrările în PNG sau GIF animat. O alegere excelentă pentru începători.
(gratuit)
GraphicsGale este singurul editor dintre cele despre care am auzit, dezvoltat special pentru pixel art și care include instrumente de animație. A fost creat de compania japoneză HUMANBALANCE. Din 2017, este distribuit gratuit și încă se bucură de popularitate, în ciuda creșterii popularității Aseprite. Din păcate, funcționează doar pe Windows.
($)
Probabil cel mai popular editor de moment. , o mulțime de funcționalități, suport activ, versiuni pentru Windows, Mac și Linux. Dacă te-ai apucat serios de pixel art și încă nu ai găsit editorul potrivit, poate că acesta este ceea ce ai nevoie.
($$+)
GameMaker Studio 2 este un instrument excelent 2D cu un editor de sprite-uri (Sprite Editor) bun. Dacă vrei să creezi pixel art pentru propriile tale jocuri, este foarte convenabil să faci totul într-un singur program. Acum folosesc acest software într-o lucrare la , o colecție de 50 de jocuri retro: sprite-urile și animațiile le creez în GameMaker, iar tileset-urile în Photoshop.
($$$+)
Photoshop — un software costisitor, disponibil prin abonament, nu este optimizat pentru pixel art. Nu îl recomand, decât dacă nu te ocupi cu ilustrarea în rezoluții înalte sau nu ai nevoie de manipulări complexe ale imaginii, așa cum fac eu. Poți crea sprite statice și lucrări pixelate în el, dar este destul de complicat în comparație cu programele specializate (de exemplu, GraphicsGale sau Aseprite).
Altele
Setul meu pentru pixel art. Totul este negru, abia acum am observat.
Tabletă grafică ($$+)
Recomand tabletele grafice pentru orice lucru cu ilustrații digitale, pentru a evita sindromul tunelului carpian. Este mult mai ușor să previi decât să tratezi. Odată ce simți durerea, aceasta va continua să crească — are grijă de tine de la început. Din cauza că am desenat odată cu mouse-ul, acum îmi e greu să joc jocuri care necesită apăsarea pe taste. Acum folosesc Wacom Intuos Pro S.
Suport pentru încheietură ($)
Dacă nu poți achiziționa o tabletă, cumpără măcar un suport pentru încheietură. Îmi place cel mai mult Mueller Green Fitted Wrist Brace. Celelalte sunt fie prea strânse, fie oferă suport insuficient. Suporturile pot fi comandate cu ușurință online.
96×96 pixeli
Final Fight. Capcom, 1989
Să începem! Vom începe cu sprite-ul unui personaj de 96×96 pixeli. Ca exemplu, am desenat un ork și l-am plasat pe un screenshot din Final Fight (imaginea de mai sus), pentru a înțelege escala. Acesta este mare un sprite pentru majoritatea jocurilor retro, dimensiunea screenshot-ului: 384×224 pixeli.
Pe un sprite atât de mare, va fi mai ușor să arăt tehnica despre care vreau să vorbesc. De asemenea, desenul pixel cu pixel seamănă mai mult cu formele tradiționale de artă (de exemplu, desen sau pictură), cu care poate ești mai familiarizat. După ce am învățat tehnicile de bază, ne vom îndrepta spre sprite-uri mai mici.
1. Alegerea paletei
Pixelul este un concept mult mai profund în pixel art decât în orice alte sfere digitale. Pixel art-ul este definit de limitările sale, cum ar fi culorile. Este important să alegi corect paleta, deoarece aceasta îți va ajuta să îți definești stilul. Însă la început, îți recomand să nu te gândești prea mult la palete și să alegi una dintre cele existente (sau pur și simplu câteva culori la întâmplare) — o poți schimba cu ușurință în orice etapă.
Pentru acest tutorial, voi folosi o paletă de 32 de culori, pe care am creat-o pentru . Pentru pixel art, acestea sunt adesea adunate din 32 sau 16 culori. Paleta noastră a fost dezvoltată pentru o consolă imaginară, care ar putea apărea undeva între Famicom și PC Engine. O puteți folosi pe aceasta sau pe alta — tutorialul nu depinde deloc de paleta aleasă.
2. Contururi grosiere
Să începem desenarea folosind instrumentul Creion. Vom face o schiță așa cum am face-o cu un pix și o foaie de hârtie. Sigur, pixel art și arta tradițională se suprapun, mai ales când vine vorba de sprite-uri mari. Observațiile mele arată că artiștii buni de pixel art pot desena cel puțin decent de mână și invers. Așadar, dezvoltarea abilităților de desenare este întotdeauna benefică.
3. Finisarea conturilor
Refinăm contururile: eliminăm pixelii în plus și reducem grosimea fiecărei linii la un pixel. Dar ce anume considerăm ca fiind în plus? Pentru a răspunde la această întrebare, trebuie să înțelegem liniile pixelate și imperfecțiunile.
Imperfecțiuni
Trebuie să învățați să desenați două linii de bază în pixel art: drepte și curbe. Cu un pix și o foaie de hârtie, totul se reduce la controlul muscular, dar noi lucrăm cu blocuri mici de culoare.
Cheia pentru a desena linii pixelate corecte sunt imperfecțiunile. Acestea sunt pixelii unici sau segmente mici care distrug netezimea liniei. Așa cum am spus, un singur pixel are o importanță uriașă în pixel art, așadar imperfecțiunile pot distruge întreaga estetică. Imaginați-vă că desenați o linie dreaptă pe hârtie și, dintr-o dată, cineva lovește masa: imperfecțiunile în pixel art arată la fel ca o smulgere accidentală.
Exemple:
Drepte
Curve
Imperfecțiunile apar pe curbe atunci când lungimea segmentelor liniei crește sau scade nu treptat.
Este imposibil să evitați complet imperfecțiunile — în toate jocurile retro preferate există (dacă, desigur, pixel art nu constă exclusiv din forme simple). Obiectivul: să minimizați imperfecțiunile, în timp ce arătați tot ce este necesar.
4. Aplicăm primele culori
Colorează-ți personajul folosind umplerea sau un alt instrument corespunzător. Paleta va simplifica această parte a muncii. Dacă software-ul nu prevede utilizarea paletelor, o poți plasa direct în imagine, ca în exemplul de mai sus, și poți alege culorile cu ajutorul pipetei.
În colțul din stânga jos am desenat prietenul nostru, să-l cunoaștem, acesta este - Șar. Cu el va fi mai simplu să înțelegem exact ce se întâmplă în fiecare etapă.
5. Umbrarea
E timpul să reprezentăm umbrele - adăugăm pur și simplu culori mai întunecate pe sprite. Astfel, imaginea va părea tridimensională. Să presupunem că avem o sursă de lumină situată deasupra orcului, în stânga de acesta. Aceasta înseamnă că tot ce se află deasupra și în fața personajului nostru va fi luminat. Adăugăm umbre în partea de jos, dreapta.
Formă și volum
Dacă această etapă îți provoacă dificultăți, imaginează-ți desenul tău ca forme volumetrice, nu doar linii și culori. Formele există în spațiul tridimensional și pot avea volum, pe care îl construim cu ajutorul umbrelor. Acest lucru te va ajuta să vizualizezi personajul fără detalii și să-ți închipui că este făcut din lut, nu din pixeli. Umbrarea nu este doar adăugarea unor culori noi, ci un proces de construirea formei. La un personaj bine lucrat, detaliile nu ascund formele de bază: dacă te uiți atent, vei vedea câteva grupuri mari de lumină și umbră.
Urmărirea (anti-aliasing, anti-aliasing)
De fiecare dată când folosesc o nouă culoare, aplic anti-aliasing (AA). Acesta ajută la netezirea pixelilor, adăugând culori intermediare la colțuri, acolo unde se întâlnesc cele două segmente ale liniei:
Pixeli gri netezesc "rupturile" din linie. Cu cât segmentul liniei este mai lung, cu atât segmentul AA este mai lung.
Așa arată AA pe umărul orcului. Este necesar pentru a netezi liniile care reprezintă arcuirea mușchilor săi.
Urmărirea nu trebuie să depășească sprite-ul care va fi folosit în joc sau pe un fundal al cărui culoare nu este cunoscut. De exemplu, dacă aplici AA pentru un fundal deschis, pe un fundal întunecat, urmărirea va arăta destul de neplăcut.
6. Contur selectiv
Anterior, contururile erau complet negre, ceea ce făcea ca sprite-ul să arate foarte cartoonesc. Imaginea părea că este împărțită în segmente. De exemplu, liniile negre de pe mână evidențiază prea mult musculatura, iar personajul arată mai puțin unitar.
Dacă sprite-ul devine mai natural, iar segmentarea nu este atât de evidentă, formele de bază ale personajului vor fi mai ușor de citit. În acest sens, se poate folosi conturul selectiv — înlocuind parțial conturul negru cu unul mai deschis. Pe partea iluminată a sprite-ului, se pot folosi cele mai deschise culori sau, acolo unde sprite-ul se întâlnește cu spațiul negativ, se poate elimina complet conturul. În locul negrului, trebuie folosită culoarea aleasă pentru umbră — astfel, se păstrează segmentarea (pentru a distinge mușchii, blana etc.).
De asemenea, în această etapă am adăugat umbre mai întunecate. Au rezultat trei gradații de verde pe pielea orc-ului. Culoarea verde închis poate fi folosită pentru conturul selectiv și AA.
7. Detalii finale
La final, este important să adăugați reflexii (cele mai deschise pete pe sprite), detalii (cercei, ținte, cicatrici) și alte îmbunătățiri, până când personajul este gata sau până când trebuie să treceți la următorul.
Există câteva tehnici utile care pot fi aplicate în această etapă. Rotiți desenul orizontal, acest lucru ajută adesea să identificați greșelile de proporții și umbrire. De asemenea, puteți elimina culoarea — setați saturația la zero pentru a înțelege unde trebuie să modificați umbrele.
Crearea zgomotului (dithering)
Până acum, am folosit în principal zone mari, uniforme de umbre. Dar există și o altă tehnică — dithering, care permite trecerea de la o culoare la alta fără a adăuga o a treia. Uitați-vă la exemplul de mai jos.
Gradientul superior de la întunecat la deschis folosește sute de nuanțe diferite de albastru.
Gradientul mediu folosește doar nouă culori, dar încă are prea multe nuanțe ale aceleași culori. Se produce așa-numitul banding, unde, din cauza benzilor uniforme groase, privirea se concentrează pe punctele de contact ale culorilor, în loc de culorile în sine.
Pe gradientul inferior am aplicat dithering, care permite evitarea banding-ului și folosește doar două culori. Creăm zgomot de intensitate variată pentru a imita gradația culorii. Această tehnică este foarte asemănătoare cu halftone - imaginea în tonuri de gri aplicată la tipărire; precum și stippling - imaginea granuloasă în ilustrații și benzi desenate.
Pe orc am aplicat dithering doar puțin pentru a transmite textura. Anumiți artiști pixelari nu îl folosesc deloc, alții, dimpotrivă, nu se sfiesc și îl aplică foarte abil. Mi se pare că dithering-ul arată cel mai bine pe suprafețe mari umplute cu o singură culoare (uitați-vă la cerul din captura de ecran Metal Slug, care a fost mai sus) sau pe acele zone care ar trebui să pară aspre și neregulate (de exemplu, noroiul). Decideți singuri cum să îl folosiți.
Dacă doriți să vedeți un exemplu de dithering extins și de calitate, studiați jocurile The Bitmap Brothers, un studio britanic din anii '80, sau jocurile pe PC-98. Numai să țineți cont că toate acestea sunt NSFW.
Kakyusei (PC-98). Elf, an 1996
În această imagine sunt doar 16 culori!
8. Ultima privire
Una dintre pericolele pixel-art-ului este că acesta pare ușor și simplu (din cauza structurii și limitărilor stilului). Dar, în final, veți petrece o cantitate imensă de timp rafinând sprite-urile dumneavoastră. Este ca un puzzle de rezolvat — de aceea pixel-art-ul atrage perfecționiștii. Amintiți-vă că un sprite nu ar trebui să dureze prea mult — este doar o mică bucată dintr-o adunare extrem de complexă de bucăți. Este important să nu pierdeți vederea asupra imaginii de ansamblu.
Chiar dacă pixel-art-ul dumneavoastră nu este pentru jocuri, uneori este bine să vă spuneți: „Totul este deja suficient de bun!” și să mergeți mai departe. Cea mai bună modalitate de a vă dezvolta abilitățile este să parcurgeți întregul proces de cât mai multe ori, de la început până la sfârșit, folosind cât mai multe teme.
Și uneori este util să lăsați sprite-ul pentru un timp, pentru a-l privi mai târziu cu ochi proaspeți.
32×32 pixeli
Am creat mai întâi un sprite mare de 96×96 pixeli, pentru că la această dimensiune mai mult seamănă cu desenul sau pictura, dar doar cu pixeli. Cu cât sprite-ul este mai mic, cu atât mai puțin seamănă cu ceea ce ar trebui să reprezinte și cu atât mai mult contează fiecare pixel.
În Super Mario Bros., ochiul lui Mario este doar două pixeli, așezate una deasupra celeilalte. Și urechea sa tot așa. Creatorul personajului, Shigeru Miyamoto, a spus că mustățile au fost necesare pentru a separa nasul de restul feței. Așa că una dintre caracteristicile principale ale feței lui Mario nu este doar designul personajului, ci și o stratagemă pragmatică. Ce confirmă vechea zicală: „nevoia este mama invenției”.
Etapele principale pentru crearea unui sprite de 32×32 pixeli ne sunt deja cunoscute: schița, culoarea, umbrele, dezvoltarea ulterioară. Dar, în astfel de condiții, ca schiță inițială aleg forme colorate în loc de contururi datorită dimensiunii mici. Culoarea joacă un rol mai important în definirea personajului decât contururile. Uită-te din nou la Mario, el nu are deloc contururi. Nu sunt interesante doar mustățile. Bașii lui definesc forma urechilor, mânecile arată mâinile, iar forma generală reflectă mai mult sau mai puțin clar tot corpul său.
Crearea de sprite-uri mici este un compromis constant. Dacă adaugi un contur, poți pierde spațiul pentru umbră. Dacă mâinile și picioarele personajului sunt bine conturate, capul ar trebui să fie probabil unul mai mic. Dacă utilizezi eficient culoarea, conturul selectiv și antialiasing-ul, obiectul desenat va părea mai mare decât este de fapt.
Pentru sprite-uri mici, îmi place stilul chibi: personajele arată foarte drăguț, au capete și ochi mari. O modalitate excelentă de a crea un erou vibrant într-un spațiu limitat, plus că este un stil foarte plăcut. Dar, dacă trebuie să arăți mobilitatea sau puterea personajului, atunci poți aloca mai puțin spațiu capului, astfel încât corpul să pară mai puternic. Totul depinde de preferințele și obiectivele tale.
O întreagă echipă este adunată!
Formate de fișiere
Astfel de rezultate pot face pe oricare artist pixel să se simtă nervos.
Imaginea pe care o vezi este rezultatul salvării desenului în JPG. O parte din date s-a pierdut din cauza algoritmilor de compresie a fișierului. Pixel-artul de calitate va arăta în cele din urmă rău, iar revenirea la paleta inițială va fi dificilă.
Pentru a salva o imagine statică fără pierderi de calitate, folosește formatul PNG. Pentru animații — GIF.
Cum să împărtășești corect pixel-art
Împărtășirea pixel-artului pe rețelele sociale este o modalitate excelentă de a obține feedback și de a cunoaște alți artiști care lucrează în același stil. Nu uita să folosești hashtag-ul #pixelart. Din păcate, rețelele sociale convertește adesea PNG în JPG fără să ceară, deteriorând astfel munca ta. De asemenea, nu este întotdeauna clar de ce imaginea ta a fost convertită.
Există câteva sfaturi despre cum să păstrezi pixel-artul în calitatea dorită pentru diferite rețele sociale.
Pentru ca fișierul PNG să nu se modifice pe Twitter, folosiți mai puțin de 256 de culori sau , că fișierul dvs. are o latură mai mică de 900 de pixeli. Aș crește dimensiunea fișierului la cel puțin 512×512 pixeli. De asemenea, asigurați-vă că scalarea este un multiplu de 100 (200%, nu 250%) și că marginile rămân clare (Nearest Neighbor în Photoshop).
Fișierele GIF animate pentru postările pe Twitter nu trebuie să depășească 15 MB. Imaginea ar trebui să fie de cel puțin 800×800 pixeli, animația ciclică ar trebui să se repete de trei ori, iar cadrul final ar trebui să dureze de două ori mai puțin decât toate celelalte - aceasta este cea mai populară teorie. Cu toate acestea, nu este clar cât de mult trebuie respectate aceste cerințe, având în vedere că Twitter își schimbă constant algoritmii de afișare a imaginilor.
Din câte știu, nu este posibil să publici o imagine pe Instagram fără a pierde din calitate. Dar cu siguranță va arăta mai bine dacă o crești la cel puțin 512×512 pixeli.
Sursa: habr.com
