{"id":54617,"date":"2019-12-30T00:00:00","date_gmt":"2019-12-29T21:00:00","guid":{"rendered":"https:\/\/prohoster.info\/blog\/blog_prohoster\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu"},"modified":"2020-02-18T14:02:39","modified_gmt":"2020-02-18T11:02:39","slug":"piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","status":"publish","type":"post","link":"https:\/\/prohoster.info\/ro\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel art pentru \u00eencep\u0103tori: instruc\u021biuni de utilizare","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Pixel
\n
\nDezvoltatorii indie sunt adesea nevoi\u021bi s\u0103 combine mai multe roluri: designer de jocuri, programator, compozitor, artist. \u0218i, c\u00e2nd vine vorba despre vizual, mul\u021bi aleg pixel art \u2013 care la prima vedere pare simplu. Dar pentru a face ceva frumos, ai nevoie de mult\u0103 experien\u021b\u0103 \u0219i abilit\u0103\u021bi specifice. Am g\u0103sit un tutorial pentru cei care tocmai au \u00eenceput s\u0103 \u00eenve\u021be elementele fundamentale ale acestui stil: cu descrierea software-ului special \u0219i tehnicilor de desenare, prin exemplul a dou\u0103 sprite-uri.<\/a><\/noindex><\/p>\n

Fundal<\/h2>\n

\nPixel art-ul este o form\u0103 de art\u0103 digital\u0103 \u00een care modific\u0103rile sunt f\u0103cute la nivel de pixeli. Acesta este asociat \u00een principal cu grafica jocurilor video din anii '80 \u0219i '90. Atunci, arti\u0219tii trebuiau s\u0103 \u021bin\u0103 cont de limitele de memorie \u0219i de rezolu\u021bia sc\u0103zut\u0103. \u00cen prezent, pixel art-ul este \u00eenc\u0103 popular \u00een jocuri \u0219i ca stil artistic \u00een general, \u00een ciuda posibilit\u0103\u021bii de a crea grafic\u0103 3D realist\u0103. De ce? Chiar \u0219i f\u0103r\u0103 a lua \u00een considerare nostalgia, crearea unei lucr\u0103ri grozave \u00een astfel de condi\u021bii stricte este o provocare pl\u0103cut\u0103 \u0219i valoroas\u0103.<\/p>\n

Pragul de intrare \u00een pixel art este relativ sc\u0103zut comparativ cu arta tradi\u021bional\u0103 \u0219i grafic\u0103 3D, ceea ce atrage dezvoltatori indie. Dar asta nu \u00eenseamn\u0103 c\u0103 va fi u\u0219or s\u0103 finalizezi<\/b> un joc \u00een acest stil. Am v\u0103zut mul\u021bi dezvoltatori indie cu metroidvanii pixel art pe platformele de crowdfunding. Ei credeau c\u0103 vor termina totul \u00een decurs de un an, dar de fapt le-a mai fost necesar\u0103 \u00eenc\u0103 \u0219ase ani. <\/p>\n

\"Pixel
\nMetal Slug 3 (Arcade). SNK, 2000<\/i><\/p>\n

Pixel art-ul la nivelul la care majoritatea vrea s\u0103 \u00eel creeze ia mult timp, iar tutorialele scurte sunt foarte pu\u021bine. Lucr\u00e2nd cu un model 3D, po\u021bi s\u0103-l rote\u0219ti, s\u0103-l deformezi, s\u0103 mu\u021bi p\u0103r\u021bi separate, s\u0103 copiezi anima\u021bii de la un model la altul \u0219i a\u0219a mai departe. Pixel art-ul de nivel \u00eenalt necesit\u0103 aproape \u00eentotdeauna mult\u0103 munc\u0103 pentru a plasa cu minu\u021biozitate pixele pe fiecare cadru.<\/p>\n

\u00cen general, te-am avertizat.<\/p>\n

Acum un pic despre stilul meu: \u00een principal, creez pixel art pentru jocuri video \u0219i \u00eemi g\u0103sesc inspira\u021bia \u00een ele. \u00cen special, sunt fan al Famicom\/NES, consolelor de 16 bi\u021bi \u0219i arcade din anii '90. Pixel artul jocurilor mele preferate din acea perioad\u0103 poate fi descris ca fiind vibrant, \u00eencrez\u0103tor \u0219i curat (dar nu prea), nu poate fi numit dur \u0219i minimalist. \u00cen acest stil lucrez eu \u00eensumi, dar po\u021bi aplica u\u0219or ideile \u0219i tehnicile din acest tutorial pentru a crea lucruri complet diferite. Studiaz\u0103 lucr\u0103rile diferi\u021bilor arti\u0219ti \u0219i creeaz\u0103 pixel art care \u00ee\u021bi place!<\/p>\n

Software<\/h2>\n

\n\"Pixel
\n
\nInstrumentele digitale de baz\u0103 pentru pixel art sunt Zoom \u0219i Pencil pentru a plasa pixeli. De asemenea, \u00ee\u021bi vor fi utile Line, Shape, Select, Move \u0219i Paint Bucket. Exist\u0103 multe programe gratuite \u0219i pl\u0103tite cu un astfel de set de instrumente. Voi vorbi despre cele mai populare \u0219i cele pe care le folosesc eu.<\/p>\n

Paint (gratuit)<\/h3>\n

\nDac\u0103 ai Windows, Paint-ul integrat este un program primitiv, dar are toate instrumentele necesare pentru pixel art.<\/p>\n

Piskel<\/a><\/noindex> (gratuit)<\/h3>\n

\nUn editor de pixel art surprinz\u0103tor de func\u021bional, care func\u021bioneaz\u0103 prin browser. Po\u021bi exporta lucr\u0103rile \u00een PNG sau GIF animat. O alegere excelent\u0103 pentru \u00eencep\u0103tori.<\/p>\n

GraphicsGale<\/a><\/noindex> (gratuit)<\/h3>\n

\nGraphicsGale este singurul editor dintre cele despre care am auzit, dezvoltat special pentru pixel art \u0219i care include instrumente de anima\u021bie. A fost creat de compania japonez\u0103 HUMANBALANCE. Din 2017, este distribuit gratuit \u0219i \u00eenc\u0103 se bucur\u0103 de popularitate, \u00een ciuda cre\u0219terii popularit\u0103\u021bii Aseprite. Din p\u0103cate, func\u021bioneaz\u0103 doar pe Windows.<\/p>\n

Aseprite<\/a><\/noindex> ($)<\/h3>\n

\nProbabil cel mai popular editor de moment. Open source<\/a><\/noindex>, o mul\u021bime de func\u021bionalit\u0103\u021bi, suport activ, versiuni pentru Windows, Mac \u0219i Linux. Dac\u0103 te-ai apucat serios de pixel art \u0219i \u00eenc\u0103 nu ai g\u0103sit editorul potrivit, poate c\u0103 acesta este ceea ce ai nevoie.<\/p>\n

GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n

\nGameMaker Studio 2 este un instrument excelent 2D cu un editor de sprite-uri (Sprite Editor) bun. Dac\u0103 vrei s\u0103 creezi pixel art pentru propriile tale jocuri, este foarte convenabil s\u0103 faci totul \u00eentr-un singur program. Acum folosesc acest software \u00eentr-o lucrare la UFO 50<\/a><\/noindex>, o colec\u021bie de 50 de jocuri retro: sprite-urile \u0219i anima\u021biile le creez \u00een GameMaker, iar tileset-urile \u00een Photoshop.<\/p>\n

Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n

\nPhotoshop \u2014 un software costisitor, disponibil prin abonament, nu este optimizat pentru pixel art. Nu \u00eel recomand, dec\u00e2t dac\u0103 nu te ocupi cu ilustrarea \u00een rezolu\u021bii \u00eenalte sau nu ai nevoie de manipul\u0103ri complexe ale imaginii, a\u0219a cum fac eu. Po\u021bi crea sprite statice \u0219i lucr\u0103ri pixelate \u00een el, dar este destul de complicat \u00een compara\u021bie cu programele specializate (de exemplu, GraphicsGale sau Aseprite).<\/p>\n

Altele<\/h2>\n

\n\"Pixel
\nSetul meu pentru pixel art. Totul este negru, abia acum am observat.<\/i><\/p>\n

Tablet\u0103 grafic\u0103 ($$+)<\/h3>\n

\nRecomand tabletele grafice pentru orice lucru cu ilustra\u021bii digitale, pentru a evita sindromul tunelului carpian. Este mult mai u\u0219or s\u0103 previi dec\u00e2t s\u0103 tratezi. Odat\u0103 ce sim\u021bi durerea, aceasta va continua s\u0103 creasc\u0103 \u2014 are grij\u0103 de tine de la \u00eenceput. Din cauza c\u0103 am desenat odat\u0103 cu mouse-ul, acum \u00eemi e greu s\u0103 joc jocuri care necesit\u0103 ap\u0103sarea pe taste. Acum folosesc Wacom Intuos Pro S.<\/p>\n

Suport pentru \u00eencheietur\u0103 ($)<\/h3>\n

\nDac\u0103 nu po\u021bi achizi\u021biona o tablet\u0103, cump\u0103r\u0103 m\u0103car un suport pentru \u00eencheietur\u0103. \u00cemi place cel mai mult Mueller Green Fitted Wrist Brace. Celelalte sunt fie prea str\u00e2nse, fie ofer\u0103 suport insuficient. Suporturile pot fi comandate cu u\u0219urin\u021b\u0103 online.<\/p>\n

96\u00d796 pixeli<\/h2>\n

\n\"Pixel
\nFinal Fight. Capcom, 1989<\/i><\/p>\n

S\u0103 \u00eencepem! Vom \u00eencepe cu sprite-ul unui personaj de 96\u00d796 pixeli. Ca exemplu, am desenat un ork \u0219i l-am plasat pe un screenshot din Final Fight (imaginea de mai sus), pentru a \u00een\u021belege escala. Acesta este mare<\/b> un sprite pentru majoritatea jocurilor retro, dimensiunea screenshot-ului: 384\u00d7224 pixeli.<\/p>\n

Pe un sprite at\u00e2t de mare, va fi mai u\u0219or s\u0103 ar\u0103t tehnica despre care vreau s\u0103 vorbesc. De asemenea, desenul pixel cu pixel seam\u0103n\u0103 mai mult cu formele tradi\u021bionale de art\u0103 (de exemplu, desen sau pictur\u0103), cu care poate e\u0219ti mai familiarizat. Dup\u0103 ce am \u00eenv\u0103\u021bat tehnicile de baz\u0103, ne vom \u00eendrepta spre sprite-uri mai mici.<\/p>\n

1. Alegerea paletei<\/h2>\n

\n\"Pixel
\n
\nPixelul este un concept mult mai profund \u00een pixel art dec\u00e2t \u00een orice alte sfere digitale. Pixel art-ul este definit de limit\u0103rile sale, cum ar fi culorile. Este important s\u0103 alegi corect paleta, deoarece aceasta \u00ee\u021bi va ajuta s\u0103 \u00ee\u021bi define\u0219ti stilul. \u00cens\u0103 la \u00eenceput, \u00ee\u021bi recomand s\u0103 nu te g\u00e2nde\u0219ti prea mult la palete \u0219i s\u0103 alegi una dintre cele existente (sau pur \u0219i simplu c\u00e2teva culori la \u00eent\u00e2mplare) \u2014 o po\u021bi schimba cu u\u0219urin\u021b\u0103 \u00een orice etap\u0103.<\/p>\n

Pentru acest tutorial, voi folosi o palet\u0103 de 32 de culori, pe care am creat-o pentru UFO 50<\/a><\/noindex>. Pentru pixel art, acestea sunt adesea adunate din 32 sau 16 culori. Paleta noastr\u0103 a fost dezvoltat\u0103 pentru o consol\u0103 imaginar\u0103, care ar putea ap\u0103rea undeva \u00eentre Famicom \u0219i PC Engine. O pute\u021bi folosi pe aceasta sau pe alta \u2014 tutorialul nu depinde deloc de paleta aleas\u0103.<\/p>\n

2. Contururi grosiere<\/h2>\n

\n\"Pixel
\n
\nS\u0103 \u00eencepem desenarea folosind instrumentul Creion. Vom face o schi\u021b\u0103 a\u0219a cum am face-o cu un pix \u0219i o foaie de h\u00e2rtie. Sigur, pixel art \u0219i arta tradi\u021bional\u0103 se suprapun, mai ales c\u00e2nd vine vorba de sprite-uri mari. Observa\u021biile mele arat\u0103 c\u0103 arti\u0219tii buni de pixel art pot desena cel pu\u021bin decent de m\u00e2n\u0103 \u0219i invers. A\u0219adar, dezvoltarea abilit\u0103\u021bilor de desenare este \u00eentotdeauna benefic\u0103.<\/p>\n

3. Finisarea conturilor<\/h2>\n

\n\"Pixel
\n
\nRefin\u0103m contururile: elimin\u0103m pixelii \u00een plus \u0219i reducem grosimea fiec\u0103rei linii la un pixel. Dar ce anume consider\u0103m ca fiind \u00een plus? Pentru a r\u0103spunde la aceast\u0103 \u00eentrebare, trebuie s\u0103 \u00een\u021belegem liniile pixelate \u0219i imperfec\u021biunile.<\/p>\n

Imperfec\u021biuni<\/h3>\n

\nTrebuie s\u0103 \u00eenv\u0103\u021ba\u021bi s\u0103 desena\u021bi dou\u0103 linii de baz\u0103 \u00een pixel art: drepte \u0219i curbe. Cu un pix \u0219i o foaie de h\u00e2rtie, totul se reduce la controlul muscular, dar noi lucr\u0103m cu blocuri mici de culoare.<\/p>\n

Cheia pentru a desena linii pixelate corecte sunt imperfec\u021biunile. Acestea sunt pixelii unici sau segmente mici care distrug netezimea liniei. A\u0219a cum am spus, un singur pixel are o importan\u021b\u0103 uria\u0219\u0103 \u00een pixel art, a\u0219adar imperfec\u021biunile pot distruge \u00eentreaga estetic\u0103. Imagina\u021bi-v\u0103 c\u0103 desena\u021bi o linie dreapt\u0103 pe h\u00e2rtie \u0219i, dintr-o dat\u0103, cineva love\u0219te masa: imperfec\u021biunile \u00een pixel art arat\u0103 la fel ca o smulgere accidental\u0103.<\/p>\n

Exemple:<\/p>\n

\"Pixel
\nDrepte<\/i><\/p>\n

\"Pixel
\nCurve<\/i><\/p>\n

Imperfec\u021biunile apar pe curbe atunci c\u00e2nd lungimea segmentelor liniei cre\u0219te sau scade nu treptat.<\/p>\n

Este imposibil s\u0103 evita\u021bi complet imperfec\u021biunile \u2014 \u00een toate jocurile retro preferate exist\u0103 (dac\u0103, desigur, pixel art nu const\u0103 exclusiv din forme simple). Obiectivul: s\u0103 minimiza\u021bi imperfec\u021biunile, \u00een timp ce ar\u0103ta\u021bi tot ce este necesar.<\/p>\n

4. Aplic\u0103m primele culori<\/h2>\n

\n\"Pixel
\n
\nColoreaz\u0103-\u021bi personajul folosind umplerea sau un alt instrument corespunz\u0103tor. Paleta va simplifica aceast\u0103 parte a muncii. Dac\u0103 software-ul nu prevede utilizarea paletelor, o po\u021bi plasa direct \u00een imagine, ca \u00een exemplul de mai sus, \u0219i po\u021bi alege culorile cu ajutorul pipetei.<\/p>\n

\u00cen col\u021bul din st\u00e2nga jos am desenat prietenul nostru, s\u0103-l cunoa\u0219tem, acesta este - \u0218ar. Cu el va fi mai simplu s\u0103 \u00een\u021belegem exact ce se \u00eent\u00e2mpl\u0103 \u00een fiecare etap\u0103.<\/p>\n

5. Umbrarea<\/h2>\n

\n\"Pixel
\n
\nE timpul s\u0103 reprezent\u0103m umbrele - ad\u0103ug\u0103m pur \u0219i simplu culori mai \u00eentunecate pe sprite. Astfel, imaginea va p\u0103rea tridimensional\u0103. S\u0103 presupunem c\u0103 avem o surs\u0103 de lumin\u0103 situat\u0103 deasupra orcului, \u00een st\u00e2nga de acesta. Aceasta \u00eenseamn\u0103 c\u0103 tot ce se afl\u0103 deasupra \u0219i \u00een fa\u021ba personajului nostru va fi luminat. Ad\u0103ug\u0103m umbre \u00een partea de jos, dreapta.<\/p>\n

Form\u0103 \u0219i volum<\/h3>\n

\n\"Pixel
\n
\nDac\u0103 aceast\u0103 etap\u0103 \u00ee\u021bi provoac\u0103 dificult\u0103\u021bi, imagineaz\u0103-\u021bi desenul t\u0103u ca forme volumetrice, nu doar linii \u0219i culori. Formele exist\u0103 \u00een spa\u021biul tridimensional \u0219i pot avea volum, pe care \u00eel construim cu ajutorul umbrelor. Acest lucru te va ajuta s\u0103 vizualizezi personajul f\u0103r\u0103 detalii \u0219i s\u0103-\u021bi \u00eenchipui c\u0103 este f\u0103cut din lut, nu din pixeli. Umbrarea nu este doar ad\u0103ugarea unor culori noi, ci un proces de construirea formei. La un personaj bine lucrat, detaliile nu ascund formele de baz\u0103: dac\u0103 te ui\u021bi atent, vei vedea c\u00e2teva grupuri mari de lumin\u0103 \u0219i umbr\u0103. <\/p>\n

Urm\u0103rirea (anti-aliasing, anti-aliasing)<\/h3>\n

\nDe fiecare dat\u0103 c\u00e2nd folosesc o nou\u0103 culoare, aplic anti-aliasing (AA). Acesta ajut\u0103 la netezirea pixelilor, ad\u0103ug\u00e2nd culori intermediare la col\u021buri, acolo unde se \u00eent\u00e2lnesc cele dou\u0103 segmente ale liniei:<\/p>\n

\"Pixel
\n
\nPixeli gri netezesc \"rupturile\" din linie. Cu c\u00e2t segmentul liniei este mai lung, cu at\u00e2t segmentul AA este mai lung.<\/p>\n

\"Pixel
\nA\u0219a arat\u0103 AA pe um\u0103rul orcului. Este necesar pentru a netezi liniile care reprezint\u0103 arcuirea mu\u0219chilor s\u0103i.<\/i><\/p>\n

Urm\u0103rirea nu trebuie s\u0103 dep\u0103\u0219easc\u0103 sprite-ul care va fi folosit \u00een joc sau pe un fundal al c\u0103rui culoare nu este cunoscut. De exemplu, dac\u0103 aplici AA pentru un fundal deschis, pe un fundal \u00eentunecat, urm\u0103rirea va ar\u0103ta destul de nepl\u0103cut.<\/p>\n

6. Contur selectiv<\/h2>\n

\n\"Pixel
\n
\nAnterior, contururile erau complet negre, ceea ce f\u0103cea ca sprite-ul s\u0103 arate foarte cartoonesc. Imaginea p\u0103rea c\u0103 este \u00eemp\u0103r\u021bit\u0103 \u00een segmente. De exemplu, liniile negre de pe m\u00e2n\u0103 eviden\u021biaz\u0103 prea mult musculatura, iar personajul arat\u0103 mai pu\u021bin unitar.<\/p>\n

Dac\u0103 sprite-ul devine mai natural, iar segmentarea nu este at\u00e2t de evident\u0103, formele de baz\u0103 ale personajului vor fi mai u\u0219or de citit. \u00cen acest sens, se poate folosi conturul selectiv \u2014 \u00eenlocuind par\u021bial conturul negru cu unul mai deschis. Pe partea iluminat\u0103 a sprite-ului, se pot folosi cele mai deschise culori sau, acolo unde sprite-ul se \u00eent\u00e2lne\u0219te cu spa\u021biul negativ, se poate elimina complet conturul. \u00cen locul negrului, trebuie folosit\u0103 culoarea aleas\u0103 pentru umbr\u0103 \u2014 astfel, se p\u0103streaz\u0103 segmentarea (pentru a distinge mu\u0219chii, blana etc.).<\/p>\n

De asemenea, \u00een aceast\u0103 etap\u0103 am ad\u0103ugat umbre mai \u00eentunecate. Au rezultat trei grada\u021bii de verde pe pielea orc-ului. Culoarea verde \u00eenchis poate fi folosit\u0103 pentru conturul selectiv \u0219i AA.<\/p>\n

7. Detalii finale<\/h2>\n

\n\"Pixel
\n
\nLa final, este important s\u0103 ad\u0103uga\u021bi reflexii (cele mai deschise pete pe sprite), detalii (cercei, \u021binte, cicatrici) \u0219i alte \u00eembun\u0103t\u0103\u021biri, p\u00e2n\u0103 c\u00e2nd personajul este gata sau p\u00e2n\u0103 c\u00e2nd trebuie s\u0103 trece\u021bi la urm\u0103torul.<\/p>\n

Exist\u0103 c\u00e2teva tehnici utile care pot fi aplicate \u00een aceast\u0103 etap\u0103. Roti\u021bi desenul orizontal, acest lucru ajut\u0103 adesea s\u0103 identifica\u021bi gre\u0219elile de propor\u021bii \u0219i umbrire. De asemenea, pute\u021bi elimina culoarea \u2014 seta\u021bi satura\u021bia la zero pentru a \u00een\u021belege unde trebuie s\u0103 modifica\u021bi umbrele.<\/p>\n

Crearea zgomotului (dithering)<\/h3>\n

\nP\u00e2n\u0103 acum, am folosit \u00een principal zone mari, uniforme de umbre. Dar exist\u0103 \u0219i o alt\u0103 tehnic\u0103 \u2014 dithering, care permite trecerea de la o culoare la alta f\u0103r\u0103 a ad\u0103uga o a treia. Uita\u021bi-v\u0103 la exemplul de mai jos.<\/p>\n

\"Pixel
\n
\nGradientul superior de la \u00eentunecat la deschis folose\u0219te sute de nuan\u021be diferite de albastru. <\/p>\n

Gradientul mediu folose\u0219te doar nou\u0103 culori, dar \u00eenc\u0103 are prea multe nuan\u021be ale acelea\u0219i culori. Se produce a\u0219a-numitul banding, unde, din cauza benzilor uniforme groase, privirea se concentreaz\u0103 pe punctele de contact ale culorilor, \u00een loc de culorile \u00een sine.<\/p>\n

Pe gradientul inferior am aplicat dithering, care permite evitarea banding-ului \u0219i folose\u0219te doar dou\u0103 culori. Cre\u0103m zgomot de intensitate variat\u0103 pentru a imita grada\u021bia culorii. Aceast\u0103 tehnic\u0103 este foarte asem\u0103n\u0103toare cu halftone - imaginea \u00een tonuri de gri aplicat\u0103 la tip\u0103rire; precum \u0219i stippling - imaginea granuloas\u0103 \u00een ilustra\u021bii \u0219i benzi desenate.<\/p>\n

Pe orc am aplicat dithering doar pu\u021bin pentru a transmite textura. Anumi\u021bi arti\u0219ti pixelari nu \u00eel folosesc deloc, al\u021bii, dimpotriv\u0103, nu se sfiesc \u0219i \u00eel aplic\u0103 foarte abil. Mi se pare c\u0103 dithering-ul arat\u0103 cel mai bine pe suprafe\u021be mari umplute cu o singur\u0103 culoare (uita\u021bi-v\u0103 la cerul din captura de ecran Metal Slug, care a fost mai sus) sau pe acele zone care ar trebui s\u0103 par\u0103 aspre \u0219i neregulate (de exemplu, noroiul). Decide\u021bi singuri cum s\u0103 \u00eel folosi\u021bi.<\/p>\n

Dac\u0103 dori\u021bi s\u0103 vede\u021bi un exemplu de dithering extins \u0219i de calitate, studia\u021bi jocurile The Bitmap Brothers, un studio britanic din anii '80, sau jocurile pe PC-98. Numai s\u0103 \u021bine\u021bi cont c\u0103 toate acestea sunt NSFW.<\/p>\n

\"Pixel
\nKakyusei (PC-98). Elf, an 1996
\n\u00cen aceast\u0103 imagine sunt doar 16 culori!<\/i><\/p>\n

8. Ultima privire<\/h2>\n

\n\"Pixel
\n
\nUna dintre pericolele pixel-art-ului este c\u0103 acesta pare u\u0219or \u0219i simplu (din cauza structurii \u0219i limit\u0103rilor stilului). Dar, \u00een final, ve\u021bi petrece o cantitate imens\u0103 de timp rafin\u00e2nd sprite-urile dumneavoastr\u0103. Este ca un puzzle de rezolvat \u2014 de aceea pixel-art-ul atrage perfec\u021bioni\u0219tii. Aminti\u021bi-v\u0103 c\u0103 un sprite nu ar trebui s\u0103 dureze prea mult \u2014 este doar o mic\u0103 bucat\u0103 dintr-o adunare extrem de complex\u0103 de buc\u0103\u021bi. Este important s\u0103 nu pierde\u021bi vederea asupra imaginii de ansamblu.<\/p>\n

Chiar dac\u0103 pixel-art-ul dumneavoastr\u0103 nu este pentru jocuri, uneori este bine s\u0103 v\u0103 spune\u021bi: \u201eTotul este deja suficient de bun!\u201d \u0219i s\u0103 merge\u021bi mai departe. Cea mai bun\u0103 modalitate de a v\u0103 dezvolta abilit\u0103\u021bile este s\u0103 parcurge\u021bi \u00eentregul proces de c\u00e2t mai multe ori, de la \u00eenceput p\u00e2n\u0103 la sf\u00e2r\u0219it, folosind c\u00e2t mai multe teme. <\/p>\n

\u0218i uneori este util s\u0103 l\u0103sa\u021bi sprite-ul pentru un timp, pentru a-l privi mai t\u00e2rziu cu ochi proaspe\u021bi. <\/p>\n

32\u00d732 pixeli<\/h2>\n

\n\"Pixel
\n
\nAm creat mai \u00eent\u00e2i un sprite mare de 96\u00d796 pixeli, pentru c\u0103 la aceast\u0103 dimensiune mai mult seam\u0103n\u0103 cu desenul sau pictura, dar doar cu pixeli. Cu c\u00e2t sprite-ul este mai mic, cu at\u00e2t mai pu\u021bin seam\u0103n\u0103 cu ceea ce ar trebui s\u0103 reprezinte \u0219i cu at\u00e2t mai mult conteaz\u0103 fiecare pixel.<\/p>\n

\"Pixel
\n
\n\u00cen Super Mario Bros., ochiul lui Mario este doar dou\u0103 pixeli, a\u0219ezate una deasupra celeilalte. \u0218i urechea sa tot a\u0219a. Creatorul personajului, Shigeru Miyamoto, a spus c\u0103 must\u0103\u021bile au fost necesare pentru a separa nasul de restul fe\u021bei. A\u0219a c\u0103 una dintre caracteristicile principale ale fe\u021bei lui Mario nu este doar designul personajului, ci \u0219i o stratagem\u0103 pragmatic\u0103. Ce confirm\u0103 vechea zical\u0103: \u201enevoia este mama inven\u021biei\u201d.<\/p>\n

Etapele principale pentru crearea unui sprite de 32\u00d732 pixeli ne sunt deja cunoscute: schi\u021ba, culoarea, umbrele, dezvoltarea ulterioar\u0103. Dar, \u00een astfel de condi\u021bii, ca schi\u021b\u0103 ini\u021bial\u0103 aleg forme colorate \u00een loc de contururi datorit\u0103 dimensiunii mici. Culoarea joac\u0103 un rol mai important \u00een definirea personajului dec\u00e2t contururile. Uit\u0103-te din nou la Mario, el nu are deloc contururi. Nu sunt interesante doar must\u0103\u021bile. Ba\u0219ii lui definesc forma urechilor, m\u00e2necile arat\u0103 m\u00e2inile, iar forma general\u0103 reflect\u0103 mai mult sau mai pu\u021bin clar tot corpul s\u0103u.<\/p>\n

Crearea de sprite-uri mici este un compromis constant. Dac\u0103 adaugi un contur, po\u021bi pierde spa\u021biul pentru umbr\u0103. Dac\u0103 m\u00e2inile \u0219i picioarele personajului sunt bine conturate, capul ar trebui s\u0103 fie probabil unul mai mic. Dac\u0103 utilizezi eficient culoarea, conturul selectiv \u0219i antialiasing-ul, obiectul desenat va p\u0103rea mai mare dec\u00e2t este de fapt.<\/p>\n

Pentru sprite-uri mici, \u00eemi place stilul chibi: personajele arat\u0103 foarte dr\u0103gu\u021b, au capete \u0219i ochi mari. O modalitate excelent\u0103 de a crea un erou vibrant \u00eentr-un spa\u021biu limitat, plus c\u0103 este un stil foarte pl\u0103cut. Dar, dac\u0103 trebuie s\u0103 ar\u0103\u021bi mobilitatea sau puterea personajului, atunci po\u021bi aloca mai pu\u021bin spa\u021biu capului, astfel \u00eenc\u00e2t corpul s\u0103 par\u0103 mai puternic. Totul depinde de preferin\u021bele \u0219i obiectivele tale.<\/p>\n

\"Pixel
\nO \u00eentreag\u0103 echip\u0103 este adunat\u0103!<\/i><\/p>\n

Formate de fi\u0219iere<\/h2>\n

\n\"Pixel
\nAstfel de rezultate pot face pe oricare artist pixel s\u0103 se simt\u0103 nervos.<\/i><\/p>\n

Imaginea pe care o vezi este rezultatul salv\u0103rii desenului \u00een JPG. O parte din date s-a pierdut din cauza algoritmilor de compresie a fi\u0219ierului. Pixel-artul de calitate va ar\u0103ta \u00een cele din urm\u0103 r\u0103u, iar revenirea la paleta ini\u021bial\u0103 va fi dificil\u0103.<\/p>\n

Pentru a salva o imagine static\u0103 f\u0103r\u0103 pierderi de calitate, folose\u0219te formatul PNG. Pentru anima\u021bii \u2014 GIF.<\/p>\n

Cum s\u0103 \u00eemp\u0103rt\u0103\u0219e\u0219ti corect pixel-art<\/h2>\n

\n\u00cemp\u0103rt\u0103\u0219irea pixel-artului pe re\u021belele sociale este o modalitate excelent\u0103 de a ob\u021bine feedback \u0219i de a cunoa\u0219te al\u021bi arti\u0219ti care lucreaz\u0103 \u00een acela\u0219i stil. Nu uita s\u0103 folose\u0219ti hashtag-ul #pixelart. Din p\u0103cate, re\u021belele sociale converte\u0219te adesea PNG \u00een JPG f\u0103r\u0103 s\u0103 cear\u0103, deterior\u00e2nd astfel munca ta. De asemenea, nu este \u00eentotdeauna clar de ce imaginea ta a fost convertit\u0103.<\/p>\n

Exist\u0103 c\u00e2teva sfaturi despre cum s\u0103 p\u0103strezi pixel-artul \u00een calitatea dorit\u0103 pentru diferite re\u021bele sociale.<\/p>\n

Twitter<\/h3>\n

\nPentru ca fi\u0219ierul PNG s\u0103 nu se modifice pe Twitter, folosi\u021bi mai pu\u021bin de 256 de culori sau asigura\u021bi-v\u0103<\/a><\/noindex>, c\u0103 fi\u0219ierul dvs. are o latur\u0103 mai mic\u0103 de 900 de pixeli. A\u0219 cre\u0219te dimensiunea fi\u0219ierului la cel pu\u021bin 512\u00d7512 pixeli. De asemenea, asigura\u021bi-v\u0103 c\u0103 scalarea este un multiplu de 100 (200%, nu 250%) \u0219i c\u0103 marginile r\u0103m\u00e2n clare (Nearest Neighbor \u00een Photoshop).<\/p>\n

Fi\u0219ierele GIF animate pentru post\u0103rile pe Twitter ar trebui<\/a><\/noindex> nu trebuie s\u0103 dep\u0103\u0219easc\u0103 15 MB. Imaginea ar trebui s\u0103 fie de cel pu\u021bin 800\u00d7800 pixeli, anima\u021bia ciclic\u0103 ar trebui s\u0103 se repete de trei ori, iar cadrul final ar trebui s\u0103 dureze de dou\u0103 ori mai pu\u021bin dec\u00e2t toate celelalte - aceasta este cea mai popular\u0103 teorie. Cu toate acestea, nu este clar c\u00e2t de mult trebuie respectate aceste cerin\u021be, av\u00e2nd \u00een vedere c\u0103 Twitter \u00ee\u0219i schimb\u0103 constant algoritmii de afi\u0219are a imaginilor.<\/p>\n

Instagram<\/h3>\n

\nDin c\u00e2te \u0219tiu, nu este posibil s\u0103 publici o imagine pe Instagram f\u0103r\u0103 a pierde din calitate. Dar cu siguran\u021b\u0103 va ar\u0103ta mai bine dac\u0103 o cre\u0219ti la cel pu\u021bin 512\u00d7512 pixeli.
\n
Sursa: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u043e\u043b\u0435\u0439: \u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430, \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0430, \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430. \u0418, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u2014 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043d \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438. \u041d\u0430\u0448\u0435\u043b \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b \u043f\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f: \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0444\u0442\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-54617","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Pixel art pentru \u00eencep\u0103tori: instruc\u021biuni de utilizare | ProHoster","description":"Dezvoltatorii indie se confrunt\u0103 des.","canonical_url":"https:\/\/prohoster.info\/ro\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"ro_RO","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u041f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u0434\u043b\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0449\u0438\u0445: \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f \u043f\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044e | ProHoster","og:description":"\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f.","og:url":"https:\/\/prohoster.info\/ro\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-12-29T21:00:00+00:00","article:modified_time":"2020-02-18T11:02:39+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"54617","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-24 12:06:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-02-28 20:01:33","updated":"2026-01-24 12:06:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/ro\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}