{"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\/sl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel art za za\u010detnike: navodila za uporabo","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Pixel
\n
\nNeodvisnim razvijalcem iger pogosto nalaga ve\u010d vlog: igralni oblikovalec, programer, skladatelj, umetnik. Ko pa gre za vizualno podobo, mnogi izberejo piksel umetnost \u2013 na prvi pogled se zdi preprosta. A da bi bilo lepo, potrebujete veliko izku\u0161enj in posebnih ve\u0161\u010din. Na\u0161el sem tutorial za tiste, ki \u0161ele za\u010denjajo obvladovati osnove tega sloga: s opisom posebne programske opreme in tehnik risanja na primeru dveh sprite-ov.<\/a><\/noindex><\/p>\n

Pozadina<\/h2>\n

\nPiksel umetnost je oblika digitalne umetnosti, kjer se spremembe uvajajo na ravni pikselov. V glavnem je povezana z grafiko video iger iz 80-ih in 90-ih let. Takrat so umetniki morali upo\u0161tevati omejitve pomnilnika in nizke lo\u010dljivosti. Danes je piksel umetnost \u0161e vedno priljubljena v igrah in kot umetni\u0161ki slog na splo\u0161no, kljub mo\u017enosti ustvarjanja realisti\u010dne 3D grafike. Zakaj? Tudi \u010de ne upo\u0161tevamo nostalgije, je ustvarjanje odli\u010dnega dela v tako strogih okvirih prijeten in vreden izziv.<\/p>\n

Prag vstopa v piksel umetnost je relativno nizek v primerjavi s tradicionalno umetnostjo in 3D grafiko, kar privla\u010di neodvisne razvijalce. A to nikakor ne pomeni, da bo enostavno doklju\u010diti<\/b> igro v tem slogu. Videl sem veliko neodvisnih razvijalcev s piksel umetnostjo metroidvania na platformah za mno\u017ei\u010dno financiranje. Mislili so, da bodo vse kon\u010dali v letu dni, a v resnici so potrebovali \u0161e vsaj \u0161est let. <\/p>\n

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

Piksel umetnost na tisti ravni, na kateri jo \u017eeli ve\u010dina ustvarjati, zahteva veliko \u010dasa, obse\u017enih tutorialov pa je zelo malo. Pri delu z 3D-modeli lahko model obra\u010date, deformirate, premikate posamezne dele, kopirate animacije z enega modela na drugega in tako naprej. Visokokakovostna piksel umetnost skoraj vedno zahteva ogromno truda za natan\u010dno postavitev pikselov na vsakem okviru.<\/p>\n

Na splo\u0161no, sem vas opozoril.<\/p>\n

Inga, da vam povem malo o svojem slogu: ve\u010dinoma ustvarjam pikselno umetnost za video igre in prav v njih najdem inspiracijo. \u0160e posebej sem obo\u017eevalec Famicom\/NES, 16-bitnih konzol in arkad iz 90-ih let. Pikselna umetnost mojih najljub\u0161ih iger tistega \u010dasa je lahko opisana kot svetla, samozavestna in \u010dista (a ne preve\u010d), je ne moremo opisati kot trdo in minimalisti\u010dno. V tem slogu delam sam, vendar lahko ideje in tehnike iz tega u\u010dnega pripomo\u010dka enostavno uporabite za ustvarjanje povsem druga\u010dnih stvari. Oglejte si dela razli\u010dnih umetnikov in ustvarite pikselno umetnost, ki vam je v\u0161e\u010d!<\/p>\n

Programska oprema<\/h2>\n

\n\"Pixel
\n
\nOsnovna digitalna orodja za pikselno umetnost so Zoom (Zoom) in Pencil (Orodje za svin\u010dnik), ki ju uporabljamo za postavljanje pikslov. Uporabni boste tudi za Line (\u010crta), Shape (Oblika), Select (Izberi), Move (Premik) in Paint Bucket (Vedro za barvanje). Obstaja veliko brezpla\u010dnih in pla\u010dljivih programov s tovrstnimi orodji. Predstavil vam bom najbolj priljubljene in tiste, ki jih uporabljam sam.<\/p>\n

Paint (brezpla\u010dno)<\/h3>\n

\n\u010ce imate Windows, je v njem vgrajen Paint \u2014 preprost program, vendar vsebuje vsa orodja za pikselno umetnost.<\/p>\n

Piskel<\/a><\/noindex> (brezpla\u010dno)<\/h3>\n

\nPresenetljivo funkcionalen urejevalnik pikselne umetnosti, ki se za\u017eene skozi brskalnik. Delo lahko izvozite v PNG ali animirani GIF. Odli\u010den izbor za za\u010detnike.<\/p>\n

GraphicsGale<\/a><\/noindex> (brezpla\u010dno)<\/h3>\n

\nGraphicsGale je edini urejevalnik med tistimi, o katerih sem sli\u0161al, zasnovan posebej za pikselno umetnost in vklju\u010duje orodja za animacijo. Razvilo ga je japonsko podjetje HUMANBALANCE. Od leta 2017 se razdaja brezpla\u010dno in \u0161e vedno je priljubljen, kljub nara\u0161\u010dajo\u010di priljubljenosti Aseprite. Na \u017ealost dela le na Windows.<\/p>\n

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

\nMorda najbolj priljubljen urejevalnik trenutno. Odprtokodni<\/a><\/noindex>, ogromno mo\u017enosti, aktivna podpora, razli\u010dice za Windows, Mac in Linux. \u010ce ste se resno lotili pikselne umetnosti in \u0161e niste na\u0161li pravega urednika, je to morda to, kar potrebujete.<\/p>\n

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

\nGameMaker Studio 2 je odli\u010dno orodje 2D z dobrim urejevalnikom sprite-ov (Urejevalnik sprite-ov). \u010ce \u017eelite ustvarjati pikselno umetnost za lastne igre, je zelo priro\u010dno vse po\u010deti v enem programu. Zdaj to programsko opremo uporabljam pri delu na UFO 50<\/a><\/noindex>, zbirki 50 retro iger: sprite in animacije ustvarjam v GameMakerju, medtem ko tile sete ustvarjam v Photoshopu.<\/p>\n

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

\nPhotoshop je drag program, koji se koristi putem pretplate i nije prilago\u0111en za piksel-art. Ne preporu\u010dujem ga za kupovinu osim ako se ne bavite crtanjem ilustracija visoke rezolucije ili vam nisu potrebne slo\u017eene manipulacije slikom, kao \u0161to je meni. U njemu mo\u017eete praviti stati\u010dne spriteove i piksel radove, ali je prili\u010dno komplikovan u pore\u0111enju sa specijalizovanim softverom (na primer, GraphicsGale ili Aseprite).<\/p>\n

Ostalo<\/h2>\n

\n\"Pixel
\nMoj set za piksel-art. Sve je crno, tek sad sam primetio.<\/i><\/p>\n

Grafi\u010dki tablet ($$+)<\/h3>\n

\nPreporu\u010dujem grafi\u010dke tablete za sve radove sa digitalnim ilustracijama kako biste izbegli sindrom karpalnog tunela. Mnogo je lak\u0161e spre\u010diti nego izle\u010diti. Jednom kada osetite bol, samo \u0107e rasti \u2014 brinite o sebi od samog po\u010detka. Zbog toga \u0161to sam nekada crtao mi\u0161em, sada mi je te\u0161ko igrati igre u kojima treba da pritiskate tastere. Trenutno koristim Wacom Intuos Pro S.<\/p>\n

Podr\u0161ka za zape\u0161\u0107e ($)<\/h3>\n

\nAko ne mo\u017eete nabaviti tablet, kupite bar podr\u0161ku za zape\u0161\u0107e. Najvi\u0161e volim Mueller Green Fitted Wrist Brace. Ostali su ili previ\u0161e \u010dvrsti ili ne pru\u017eaju dovoljno podr\u0161ke. Podr\u0161ke se bez problema mogu naru\u010diti online.<\/p>\n

96\u00d796 piksel\u0430<\/h2>\n

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

Hajde da po\u010dnemo! Po\u010de\u0107emo sa spriteom lika od 96\u00d796 piksel\u0430. Za primer sam nacrtao orka i postavio ga na ekran snimljen iz Final Fight (slika iznad), da razumete razmeru. Ovo je veliki<\/b> sprite za ve\u0107inu retro igara, veli\u010dina snimka: 384\u00d7224 piksel\u0430.<\/p>\n

Na tako velikom spriteu \u0107e biti lak\u0161e prikazati tehniku o kojoj \u017eelim da pri\u010dam. Tako\u0111e, pikselna ilustracija vi\u0161e li\u010di na tradicionalne forme umetnosti (na primer, crtanje ili slikanje), sa kojima ste mo\u017eda bolje upoznati. Nakon \u0161to savladamo osnovne tehnike, pre\u0107i \u0107emo na manje spriteove.<\/p>\n

1. Biramo paletu<\/h2>\n

\n\"Pixel
\n
\nPiksel je mnogo dublji pojam u piksel-artu nego u bilo kojim drugim digitalnim sferama. Piksel-art defini\u0161u njegova ograni\u010denja, kao \u0161to su boje. Va\u017eno je pravilno odabrati paletu, ona \u0107e pomo\u0107i da se oblikuje va\u0161 stil. Ali na po\u010detku predla\u017eem da ne razmi\u0161ljate o paletama i izaberete jednu od postoje\u0107ih (ili jednostavno nekoliko nasumi\u010dnih boja) \u2014 lako je mo\u017eete promeniti u bilo kojem trenutku.<\/p>\n

Za ta vodi\u010d bom uporabil paleto z 32 barvami, ki smo jo ustvarili za UFO 50<\/a><\/noindex>. Pri piksel umetnosti jih pogosto sestavljajo iz 32 ali 16 barv. Na\u0161a je zasnovana za izmi\u0161ljen ra\u010dunalnik, ki bi se lahko pojavil nekje med Famicom in PC Engine. Lahko jo vzamete ali katero koli drugo - vodi\u010d sploh ni odvisen od izbrane palete.<\/p>\n

2. Grobi obrisi<\/h2>\n

\n\"Pixel
\n
\nZa\u010dnimo risanje z orodjem Svin\u010dnik. Nari\u0161imo skico tako, kot to po\u010dnemo s obi\u010dajno svin\u010dnikom in papirjem. Seveda, piksel umetnost in tradicionalna umetnost se prekrivata, \u0161e posebej ko gre za ve\u010dje sprite. Moje opazovanje ka\u017ee, da dobri umetniki piksel umetnosti vsaj dobro ri\u0161ejo s roko in obratno. Zato je vedno koristno razvijati risarske ve\u0161\u010dine.<\/p>\n

3. Dodelava obrisov<\/h2>\n

\n\"Pixel
\n
\nIzpopolnjujemo obrise: odstranimo odve\u010dne piksle in zmanj\u0161amo debelino vsake \u010drte na en piksel. Ampak kaj to\u010dno \u0161teje kot odve\u010dno? Da bi odgovorili na to vpra\u0161anje, moramo razumeti pikselne \u010drte in neravnosti.<\/p>\n

Neravnosti<\/h3>\n

\nNau\u010diti se moramo risati dve osnovni \u010drti v piksel umetnosti: ravne in ukrivljene. S svin\u010dnikom in papirjem se vse zmanj\u0161a na mi\u0161i\u010dno kontrolo, vendar delamo s majhnimi barvnimi bloki.<\/p>\n

Klju\u010d za risanje pravih piksel \u010drt so neravnosti. To so enojni piksli ali majhni segmenti, ki uni\u010dujejo gladkost \u010drte. Kot sem \u017ee omenil, ima en sam piksel ogromen pomen v piksel umetnosti, zato neravnosti lahko uni\u010dijo celo estetiko. Predstavljajte si, da vle\u010dete ravno \u010drto na papirju, in nenadoma vas nekdo udari po mizi: neravnosti v piksel umetnosti izgledajo enako kot naklju\u010dna \u010drta.<\/p>\n

Primeri:<\/p>\n

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

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

Neravnosti se pojavljajo pri ukrivljenih \u010drtah, ko se dol\u017eina segmentov \u010drte ne pove\u010duje ali zmanj\u0161uje postopoma.<\/p>\n

Popolnoma se izogniti neravnostim je nemogo\u010de - v vseh va\u0161ih najljub\u0161ih retro igrah so prisotne (\u010de seveda piksel umetnost ne sestoji izklju\u010dno iz preprostih oblik). Cilj: zmanj\u0161ati neravnosti na minimum, pri tem pa prikazati vse potrebno.<\/p>\n

4. Uporabimo prve barve<\/h2>\n

\n\"Pixel
\n
\nObarvajte svoj lik s pomo\u010djo zalivanja ali drugega primernega orodja. Paleta bo poenostavila ta del dela. \u010ce programska oprema ne predvideva uporabe palet, jo lahko preprosto vklju\u010dite v sliko, kot na zgornjem primeru, in barve izbirate z mi\u0161ko.<\/p>\n

V spodnjem levem kotu sem narisal na\u0161ega prijatelja, spoznajte, to je - \u0160ar. Z njim bo la\u017eje razumeti, kaj to\u010dno se dogaja v vsakem koraku.<\/p>\n

5. Sen\u010denje<\/h2>\n

\n\"Pixel
\n
\n\u010cas je, da prika\u017eemo sence - preprosto dodamo temnej\u0161e barve na sprite. Tako bo slika videti tridimenzionalno. Domnevajmo, da imamo eno svetlobo, ki se nahaja nad orkom levo od njega. To pomeni, da bo osvetljeno vse, kar je zgoraj in spredaj na\u0161ega lika. Dodamo sence spodaj desno.<\/p>\n

Oblika in volumen<\/h3>\n

\n\"Pixel
\n
\n\u010ce vam ta korak povzro\u010da te\u017eave, si predstavljajte svoje risbe kot tridimenzionalne oblike, ne le \u010drte in barve. Oblike obstajajo v tridimenzionalnem prostoru in lahko imajo volumen, ki ga oblikujemo s sen\u010denjem. To bo pomagalo vizualizirati lika brez podrobnosti in si predstavljati, da je narejen iz gline, ne iz pikslov. Sen\u010denje ni samo dodajanje novih barv, temve\u010d proces oblikovanja. Pri dobro oblikovanem liku podrobnosti ne zakrivajo osnovnih oblik: \u010de pripnete o\u010di, boste videli nekaj velikih skupin svetlobe in senc. <\/p>\n

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

\nVsaki\u010d, ko uporabim novo barvo, apliciram anti-aliasing (AA). Pomaga gladiti piksle z dodajanjem vmesnih barv po robovih, kjer se stikata dva segmenta \u010drte:<\/p>\n

\"Pixel
\n
\nSivi piksli omilijo 'razpoke' v \u010drti. Dalj\u0161i je segment \u010drte, dalj\u0161i je segment AA.<\/p>\n

\"Pixel
\nTako AA izgleda na ramenu orka. Potreben je, da omili \u010drte, ki prikazujejo zavoje njegovih mi\u0161ic.<\/i><\/p>\n

Gladitev ne sme prekora\u010diti robov sprita, ki bo uporabljen v igri ali na ozadju, katerega barva ni znana. Na primer, \u010de uporabite AA na svetlem ozadju, bo gladitev na temnem ozadju izgledala grdo.<\/p>\n

6. Izbirni obris<\/h2>\n

\n\"Pixel
\n
\nPrej so bili obrisi popolnoma \u010drni, zaradi \u010desar je sprite izgledal zelo risan. Slika je bila kot razdeljena na segmente. Na primer, \u010drne \u010drte na roki preve\u010d kontrastno prikazujejo mi\u0161i\u010dnoto, in lik izgleda manj celovito.<\/p>\n

\u010ce bo sprite postavljen bolj naravno in segmentacija ne bo tako o\u010ditna, bodo osnovne oblike lika la\u017eje berljive. Za to lahko uporabite selektivno obrobo \u2014 delno zamenjajte \u010drno obrobo z bolj svetlo. Na osvetljenem delu sprite lahko uporabite najsvetlej\u0161e barve ali, kjer sprite pride v stik z negativnim prostorom, lahko popolnoma odstranite obrobo. Namesto \u010drne je treba uporabiti barvo, ki je bila izbrana za senco \u2014 tako se ohrani segmentacija (za lo\u010devanje mi\u0161ic, krzna in podobno).<\/p>\n

Na tej to\u010dki sem dodal tudi temnej\u0161e sence. Izkazalo se je, da imamo tri odtenke zelene na ko\u017ei orka. Najtemnej\u0161o zeleno barvo lahko uporabimo za selektivno obrobo in AA.<\/p>\n

7. Kon\u010dni dotiki<\/h2>\n

\n\"Pixel
\n
\nNa koncu je treba dodati odseve (najsvetlej\u0161e pikice na sprite), podrobnosti (uhani, zakovice, brazgotine) in druge izbolj\u0161ave, dokler lik ni pripravljen ali dokler se ne bomo morali preusmeriti na naslednjega.<\/p>\n

Obstaja ve\u010d koristnih tehnik, ki jih lahko uporabite v tej fazi. Obrnite risbo horizontalno, to pogosto pomaga razkriti napake v proporcijah in sen\u010denju. Tudi barvo lahko odstranite \u2014 nastavite nasi\u010denost na ni\u010d, da vidite, kje je treba spremeniti sence.<\/p>\n

Ustvarjanje \u0161umov (dithering)<\/h3>\n

\nZaenkrat smo ve\u010dinoma uporabljali velike, celovite dele senc. Obstaja pa tudi druga tehnika \u2014 dithering, ki omogo\u010da prehod iz ene barve v drugo brez dodajanja tretje. Oglejte si primer spodaj.<\/p>\n

\"Pixel
\n
\nZgornji gradient od temne do svetle barve uporablja stotine razli\u010dnih odtenkov modre. <\/p>\n

Srednji gradient uporablja le devet barv, a kljub temu je \u0161e vedno preve\u010d odtenkov ene barve. Pojavi se t.i. banding (iz angle\u0161\u010dine band \u2014 pas), pri katerem zaradi debelih enotnih pasov oko osredoto\u010di na to\u010dke stika barv, namesto na same barve.<\/p>\n

Na spodnjem gradientu smo uporabili dithering, ki prepre\u010duje banding in uporablja le dve barvi. Ustvarjamo \u0161um razli\u010dnih intenzitet, da imitiramo gradacijo barve. Ta tehnika je zelo podobna halftonu (halftone \u2014 polt\u00f3nska slika), ki se uporablja pri tisku; prav tako pa tudi stippling (stippling \u2014 zrnasta slika) \u2014 v ilustracijah in stripih.<\/p>\n

Na orku sem uporabil ditherjanje le malo za prenos teksture. Nekateri umetniki pikslov ga sploh ne uporabljajo, drugi pa se ga ne sramujejo in ga delajo zelo spretno. Zdi se mi, da ditherjanje najbolj\u0161e izgleda na velikih povr\u0161inah, napolnjenih z eno barvo (poglejte nebo na posnetku iz igre Metal Slug, ki je bil zgoraj) ali na tistih mestih, ki bi morala izgledati hrapavo in nepravilno (na primer, blato). Odlo\u010dite se sami, kako ga uporabiti.<\/p>\n

\u010ce \u017eelite videti primer z obse\u017enim in kakovostnim ditherjanjem, preu\u010dite igre The Bitmap Brothers, britanske studijske dru\u017ebe iz 80. let, ali igre na ra\u010dunalniku PC-98. Vendar upo\u0161tevajte, da so vse te igre NSFW.<\/p>\n

\"Pixel
\nKakyusei (PC-98). Elf, 1996
\nNa tej sliki je le 16 barv!<\/i><\/p>\n

8. Zadnji pogled<\/h2>\n

\n\"Pixel
\n
\nEna od nevarnosti piksel umetnosti je, da se zdi lahka in preprosta (zaradi njene strukture in omejitev sloga). A na koncu boste porabili ogromno \u010dasa za izpopolnjevanje svojih spritov. Prikazuje se kot uganka, ki jo je treba re\u0161iti \u2014 zato piksel umetnost privla\u010di perfekcioniste. Zapomnite si, da en sprit ne sme vzeti preve\u010d \u010dasa \u2014 to je le drobna ko\u0161\u010dek izjemno kompleksne zbirke ko\u0161\u010dkov. Pomembno je, da ne izgubite vizije celotne slike.<\/p>\n

Celo \u010de va\u0161 piksel umetnost ni za igre, si v\u010dasih povejte: \u201eVse je \u017ee dovolj dobro!\u201c In nadaljujte naprej. Najbolj\u0161i na\u010din za razvoj ve\u0161\u010din je, da \u010dim ve\u010dkrat preidete celoten proces od za\u010detka do konca, pri \u010demer uporabite \u010dim ve\u010d tem. <\/p>\n

In v\u010dasih je koristno za kratek \u010das pustiti sprit, da se na njega pozneje pogledate z novimi o\u010dmi. <\/p>\n

32\u00d732 pixelov<\/h2>\n

\n\"Pixel
\n
\nNajprej smo ustvarili velik sprit velikosti 96\u00d796 pixelov, ker pri tej velikosti bolj spominja na risanje ali slikanje, ampak samo s pixli. Manj\u0161i sprit, kot je, manj je podoben tistemu, kar naj bi prikazoval, in toliko bolj pomemben je vsak pixel.<\/p>\n

\"Pixel
\n
\nV Super Mario Bros. je Mariojev oko le dva pixla, postavljena eden nad drugim. In tudi njegovo uho. Ustvarjalec lika Shigeru Miyamoto je dejal, da so brki potrebni za lo\u010devanje nosu od ostalega obraza. Tako je ena od glavnih zna\u010dilnosti Mariojevega obraza ne samo zasnova lika, temve\u010d tudi pragmati\u010dna zvija\u010da. Kar potrjuje star modrost \u2014 \u201epotreba je mati iznajdljivosti\u201c.<\/p>\n

Osnovni koraci za izradu spritea 32\u00d732 piksela su nam ve\u0107 poznati: skica, boja, senke, dalja dorada. U takvim uslovima, kao po\u010detnu skicu biram obojene figure umesto crtanja kontura zbog male veli\u010dine. Boja igra va\u017eniju ulogu u odre\u0111ivanju karaktera nego konture. Pogledajte ponovo Maria, on uop\u0161te nema konture. Zanimljive su ne samo brkove. Njegove bakarice defini\u0161u oblik u\u0161iju, rukavi pokazuju ruke, a op\u0161ti oblik vi\u0161e-manje jasno prikazuje celo njegovo telo.<\/p>\n

Izrada malih spriteova je neprekidni kompromis. Ako dodate obod, mo\u017eete izgubiti prostor za senku. Ako su ruke i noge va\u0161eg lika jasno prikazane, glava verovatno ne bi trebala biti prevelika. Ako efikasno koristite boju, selektivni obod i antialiasing, tada \u0107e nacrtani objekt izgledati ve\u0107e nego \u0161to zapravo jeste.<\/p>\n

Za male spriteove volim stil chibi: likovi izgledaju veoma slatko, imaju velike glave i o\u010di. Odli\u010dan na\u010din da stvorite \u017eivopisnog junaka u ograni\u010denom prostoru, a u celini, vrlo prijatan stil. Ali, mo\u017eda \u0107ete morati da prika\u017eete pokretljivost ili snagu lika, tada mo\u017eete posvetiti manje prostora glavi, tako da telo izgleda mo\u0107nije. Sve zavisi od va\u0161ih preferencija i ciljeva.<\/p>\n

\"Pixel
\nCela ekipa je okupljena!<\/i><\/p>\n

Formati datoteka<\/h2>\n

\n\"Pixel
\nTakav rezultat mo\u017ee naterati da nervoza zatrese svakog pixel umetnika<\/i><\/p>\n

Slika koju vidite je rezultat \u010duvanja crte\u017ea u JPG. Deo podataka je izgubljen zbog algoritama kompresije datoteke. Kvalitetan pixel-art \u0107e na kraju izgledati lo\u0161e, a povratak originalnoj paleti bi\u0107e te\u017eak.<\/p>\n

Za \u010duvanje stati\u010dne slike bez gubitka kvaliteta koristite format PNG. Za animacije \u2014 GIF.<\/p>\n

Kako ispravno deliti pixel-art<\/h2>\n

\nDeljenje pixel-arta na dru\u0161tvenim mre\u017eama je odli\u010dan na\u010din da dobijete povratne informacije i upoznate druge umetnike koji rade u istom stilu. Ne zaboravite da stavite ha\u0161tag #pixelart. Na\u017ealost, dru\u0161tvene mre\u017ee \u010desto konvertuju PNG u JPG bez pitanja, pogor\u0161avaju\u0107i va\u0161 rad. I nije uvek jasno za\u0161to je va\u0161a slika konvertovana.<\/p>\n

Postoji nekoliko saveta kako da sa\u010duvate pixel-art u potrebnom kvalitetu za razli\u010dite dru\u0161tvene mre\u017ee.<\/p>\n

Twitter<\/h3>\n

\nDa PNG datoteka ne bi bila spremenjena na Twitterju, uporabite manj kot 256 barv ali poskrbite<\/a><\/noindex>, da je va\u0161a datoteka manj\u0161a od 900 pikslov na dolgi strani. Priporo\u010dam, da pove\u010date velikost datoteke vsaj na 512\u00d7512 pikslov. Prav tako mora biti pove\u010danje deljivo s 100 (200%, ne 250%) in ostra robova morajo biti ohranjena (Nearest Neighbor v Photoshopu).<\/p>\n

Animirani GIF datoteki za objave na Twitterju morate<\/a><\/noindex> ne smejo biti te\u017eji od 15 MB. Slika mora biti vsaj 800\u00d7800 pikslov, cikli\u010dna animacija se mora ponoviti trikrat, zadnji kader pa mora biti vsaj dvakrat kraj\u0161i po \u010dasu kot vsi ostali \u2014 to je najpogostej\u0161a teorija. Vendar pa ni povsem jasno, koliko je treba upo\u0161tevati te zahteve, saj Twitter nenehno spreminja svoje algoritme za prikazovanje slik.<\/p>\n

Instagram<\/h3>\n

\nKolikor vem, ni mogo\u010de objaviti slike na Instagramu brez izgube kakovosti. Vendar pa bo zagotovo izgledala bolje, \u010de jo pove\u010date vsaj na 512\u00d7512 pikslov.
\n
Izvor: 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\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 za za\u010detnike: navodila za uporabo | ProHoster","description":"Neodvisni razvijalci pogosto naletijo na.","canonical_url":"https:\/\/prohoster.info\/sl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"sl_SI","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\/sl\/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\/sl\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/sl\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}