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

\"Pixel
\n
\nIndie devovi \u010desto moraju kombinirati vi\u0161e uloga: dizajnera igara, programera, kompozitora, umjetnika. Kada je rije\u010d o vizualima, mnogi biraju pixel art \u2014 na prvi pogled izgleda jednostavno. No, da bi se to napravilo lijepo, potrebno je puno iskustva i odre\u0111ene vje\u0161tine. Na\u0161ao sam tutorial za one koji tek po\u010dinju u\u010diti osnove ovog stila: s opisom specijalnog softvera i tehnika slikanja kroz dva spritea.<\/a><\/noindex><\/p>\n

Pozadina<\/h2>\n

\nPixel art je oblik digitalne umjetni\u010dke forme u kojem se promjene unose na razini piksela. Uglavnom se povezuje s grafikom video igara iz 80-ih i 90-ih. Tada su umjetnici morali uzeti u obzir ograni\u010denja memorije i nisku razlu\u010divost. Danas je pixel art jo\u0161 uvijek popularan u igrama i kao umjetni\u010dki stil u cjelini, unato\u010d mogu\u0107nosti stvaranja realisti\u010dne 3D grafike. Za\u0161to? \u010cak i ne ra\u010dunaju\u0107i nostalgiju, stvaranje odli\u010dnog djela unutar tako strogih okvira je ugodan i vrijedan izazov.<\/p>\n

Prag ulaska u pixel art je relativno nizak u usporedbi s tradicionalnom umjetno\u0161\u0107u i 3D grafikom, \u0161to privla\u010di indie devove. No, to ne zna\u010di da \u0107e biti lako dovr\u0161iti<\/b> igru u ovom stilu. Vidio sam mnogo indie developera s pixel art metroidvaniama na crowdfunding platformama. Mislili su da \u0107e sve zavr\u0161iti za godinu dana, ali u stvarnosti im je trebalo jo\u0161 \u0161est godina. <\/p>\n

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

Pixel art na razini na kojoj ve\u0107ina \u017eeli raditi oduzima puno vremena, a kratkih vodi\u010da ima vrlo malo. Rad s 3D modelima omogu\u0107uje vam da ih pove\u0107avate, deformirate, premje\u0161tate njihove dijelove, kopirate animacije s jednog modela na drugi itd. Pixel art visoke razine gotovo uvijek zahtijeva puno truda na pomnom postavljanju piksela na svakom okviru.<\/p>\n

U svakom slu\u010daju, upozorio sam.<\/p>\n

A sada malo o mom stilu: uglavnom radim pixel art za videoigre i u njima pronalazim inspiraciju. Konkretno, obo\u017eavam Famicom\/NES, 16-bitne konzole i arkadne igre iz 90-ih. Pixel art mojih omiljenih igara iz tog vremena mo\u017ee se opisati kao \u017eivopisan, samouvjeren i \u010dist (ali ne previ\u0161e), ne mo\u017ee se nazvati krutim i minimalnim. U ovom stilu radim sam, ali lako mo\u017eete primijeniti ideje i tehnike iz ovog vodi\u010da za stvaranje potpuno drugih stvari. Istra\u017eujte radove raznih umjetnika i stvarajte pixel art koji vam se svi\u0111a!<\/p>\n

Softver<\/h2>\n

\n\"Pixel
\n
\nOsnovni digitalni alati za pixel art su Zoom i Olovka, kako biste postavljali piksele. Tako\u0111er \u0107e vam biti korisne Linija, Oblik, Odabir, Premjesti i Kanta za boju. Postoji mnogo besplatnog i pla\u0107enog softvera s tim skupom alata. Govorit \u0107u o najpopularnijima i onima koje ja osobno koristim.<\/p>\n

Paint (besplatno)<\/h3>\n

\nAko koristite Windows, ugra\u0111eni Paint je primitivni program, ali ima sve alate za pixel art.<\/p>\n

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

\nIznena\u0111uju\u0107e funkcionalan editor pixel arta, koji se pokre\u0107e putem preglednika. Mo\u017eete izvesti rad u PNG ili animirani GIF. Izvrsna opcija za po\u010detnike.<\/p>\n

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

\nGraphicsGale je jedini editor od onih koje sam \u010duo, razvijen isklju\u010divo za pixel art i uklju\u010duje alate za animaciju. Razvila ga je japanska tvrtka HUMANBALANCE. Od 2017. godine se besplatno distribuira i jo\u0161 uvijek je popularan, unato\u010d rastu popularnosti Aseprite-a. Na\u017ealost, radi samo na Windows-u.<\/p>\n

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

\nMo\u017eda najpopularniji editor u ovom trenutku. Otvoreni izvor<\/a><\/noindex>, puno mogu\u0107nosti, aktivna podr\u0161ka, verzije za Windows, Mac i Linux. Ako ste ozbiljno shvatili pixel art i jo\u0161 niste prona\u0161li pravi editor, mo\u017eda je to ono \u0161to vam treba.<\/p>\n

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

\nGameMaker Studio 2 je izvrstan 2D alat s dobrim editorom sprite-ova. Ako \u017eelite stvarati pixel art za vlastite igre, vrlo je prakti\u010dno sve raditi u jednom programu. Trenutno koristim ovaj softver na radu na UFO 50<\/a><\/noindex>, kolekciji od 50 retro igara: sprite-ove i animacije radim u GameMaker-u, a tile setove u Photoshop-u.<\/p>\n

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

\nPhotoshop \u2014 skup softver, koji se distribuira putem pretplate, nije prilago\u0111en za piksel-art. Ne preporu\u010dujem kupnju ako se ne bavite izradom ilustracija visoke razlu\u010divosti ili vam nisu potrebne slo\u017eene manipulacije slikama, poput onih koje ja radim. U njemu se mogu stvarati stati\u010dni spriteovi i pikselni radovi, ali je prili\u010dno slo\u017een u usporedbi sa specijaliziranim softverom (poput GraphicsGale ili Aseprite).<\/p>\n

Ostalo<\/h2>\n

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

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

\nPreporu\u010dujem grafi\u010dke tablete za sve radove s digitalnim ilustracijama, kako biste izbjegli sindrom karpalnog tunela. Lak\u0161e ga je sprije\u010diti nego lije\u010diti. Jednom kada osjetite bol, ona \u0107e se samo pogor\u0161ati \u2014 brinite o sebi od samog po\u010detka. Zbog toga \u0161to sam neko\u0107 crtao mi\u0161em, sada mi je te\u0161ko igrati igre u kojima treba pritiskati tipke. Trenutno koristim Wacom Intuos Pro S.<\/p>\n

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

\nAko ne mo\u017eete priu\u0161titi tablet, kupite barem podr\u0161ku za zape\u0161\u0107e. Najvi\u0161e mi se svi\u0111a Mueller Green Fitted Wrist Brace. Ostale su ili previ\u0161e uske ili pru\u017eaju nedovoljnu podr\u0161ku. Podr\u0161ke se bez problema mogu naru\u010diti online.<\/p>\n

96\u00d796 piksela<\/h2>\n

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

Po\u010dnimo! Zapo\u010det \u0107emo s spriteom lika od 96\u00d796 piksela. Kao primjer, nacrtao sam orka i stavio ga na snimku ekrana iz Final Fight-a (slika iznad), kako biste razumjeli razmjere. To je velik<\/b> sprite za ve\u0107inu retro igara, veli\u010dina snimke: 384\u00d7224 piksela.<\/p>\n

Na tako velikom spriteu bit \u0107e lak\u0161e prikazati tehniku koju \u017eelim objasniti. Tako\u0111er, pikselizirano crtanje vi\u0161e nalikuje tradicionalnim oblicima umjetnosti (npr. slikanje ili crtanje), s kojima ste mo\u017eda bolje upoznati. Kada savladamo osnovne tehnike, prije\u0107i \u0107emo na manje spriteove.<\/p>\n

1. Biramo paletu<\/h2>\n

\n\"Pixel
\n
\nPiksel je mnogo dublja koncepcija u piksel-artu nego u bilo kojoj drugoj digitalnoj sferi. Piksel-art definiraju njegova ograni\u010denja, poput boja. Va\u017eno je pravilno odabrati paletu, ona \u0107e pomo\u0107i u odre\u0111ivanju va\u0161eg stila. Ali na po\u010detku predla\u017eem da ne razmi\u0161ljate o paletama i odaberete jednu od postoje\u0107ih (ili jednostavno nekoliko nasumi\u010dnih boja) \u2014 lako je mo\u017eete promijeniti u bilo kojem trenutku.<\/p>\n

Za ovaj tutorijal \u0107u koristiti paletu od 32 boje koju smo stvorili za UFO 50<\/a><\/noindex>. Za pixel art \u010desto se sastavljaju od 32 ili 16 boja. Na\u0161a je dizajnirana za izmi\u0161ljenu konzolu koja bi mogla postojati negdje izme\u0111u Famicom-a i PC Engine-a. Mo\u017eete uzeti nju ili bilo koju drugu \u2013 tutorijal se ne oslanja na odabranu paletu.<\/p>\n

2. Grubi konturi<\/h2>\n

\n\"Pixel
\n
\nPo\u010det \u0107emo crtati s alatom olovka. Nacrtat \u0107emo skicu onako kako to radimo s obi\u010dnom olovkom i papirom. Naravno, pixel art i tradicionalna umjetnost se preklapaju, posebno kada su u pitanju veliki sprite-ovi. Moja zapa\u017eanja pokazuju da sna\u017eni pixel art umjetnici barem solidno crtaju ru\u010dno i obrnuto. Tako da je korisno razvijati vje\u0161tine crtanja.<\/p>\n

3. Razrada kontura<\/h2>\n

\n\"Pixel
\n
\nNadogra\u0111ujemo konture: uklanjamo suvi\u0161ne piksele i smanjujemo debljinu svake linije na jedan piksel. No, \u0161to to\u010dno smatrati suvi\u0161nim? Da bismo odgovorili na ovo pitanje, potrebno je razumjeti pikselne linije i neravnomjernosti.<\/p>\n

Neravnomjernosti<\/h3>\n

\nMora se nau\u010diti crtati dvije osnovne linije u pixel art-u: ravne i zakrivljene. S olovkom i papirom sve se svodi na kontrolu mi\u0161i\u0107a, ali mi radimo s malim obojenim blokovima.<\/p>\n

Klju\u010d za crtanje pravih pikselnih linija su neravnomjernosti. To su pojedina\u010dni pikseli ili mali segmenti koji razbijaju glatko\u0107u linije. Kao \u0161to sam ve\u0107 spomenuo, pojedina\u010dni piksel ima ogroman zna\u010daj u pixel art-u, tako da neravnomjernosti mogu uni\u0161titi cijelu estetiku. Zamislite da crtate ravnu liniju na papiru, a iznenada vas netko udari po stolu: neravnomjernosti u pixel art-u izgledaju kao slu\u010dajna \u0161krabavost.<\/p>\n

Primjeri:<\/p>\n

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

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

Neravnomjernosti se pojavljuju na zakrivljenim linijama kada se duljina segmenata linije naglo mijenja.<\/p>\n

Potpuno izbjegavanje neravnomjernosti je nemogu\u0107e \u2014 u svim va\u0161im omiljenim retro igrama one postoje (ako pixel art ne sastoji isklju\u010divo od jednostavnih oblika). Cilj: minimizirati neravnomjernosti, a pritom prikazati sve \u0161to je potrebno.<\/p>\n

4. Primjena prvih boja<\/h2>\n

\n\"Pixel
\n
\nObojite svog lika pomo\u0107u alata za punjenje ili drugog prikladnog alata. Paleta \u0107e olak\u0161ati ovaj dio posla. Ako softver ne omogu\u0107uje kori\u0161tenje paleta, mo\u017eete je smjestiti izravno u sliku, kao na prethodnom primjeru, i birati boje pomo\u0107u pipete.<\/p>\n

U donjem lijevom kutu nacrtao sam na\u0161eg prijatelja, upoznajte, to je - \u0160ar. S njim \u0107e biti lak\u0161e razumjeti \u0161to se to\u010dno doga\u0111a u svakom koraku.<\/p>\n

5. Sijenjenje<\/h2>\n

\n\"Pixel
\n
\nVrijeme je da prikazujemo sjene - jednostavno dodajemo tamnije boje na sprite. Tako \u0107e slika izgledati trodimenzionalno. Pretpostavimo da imamo jedan izvor svjetlosti, smje\u0161ten iznad ili\u010da s lijeve strane. To zna\u010di da \u0107e biti osvijetljeno sve \u0161to se nalazi iznad i ispred na\u0161eg lika. Dodajemo sjene dolje desno.<\/p>\n

Oblik i volumen<\/h3>\n

\n\"Pixel
\n
\nAko vam ovaj korak stvara pote\u0161ko\u0107e, zamislite crte\u017e kao trodimenzionalne oblike, a ne samo linije i boje. Oblici postoje u trodimenzionalnom prostoru i mogu imati volumen koji gradimo pomo\u0107u sjena. To \u0107e pomo\u0107i vizualizirati lika bez detalja i zamisliti da je napravljen od gline, a ne od piksela. Sijenjenje nije samo dodavanje novih boja, to je proces izgradnje oblika. Na dobro izra\u0111enom liku, detalji ne skrivaju osnovne oblike: ako za\u017emirite, vidjet \u0107ete nekoliko velikih skupina svjetlosti i sjene. <\/p>\n

Antialiasing<\/h3>\n

\nSvaki put kada koristim novu boju, primjenjujem antialiasing (AA). Poma\u017ee u gla\u0111enju piksela dodavanjem me\u0111ubojica na rubovima, na mjestu dodira dviju segmenata linije:<\/p>\n

\"Pixel
\n
\nSivi pikseli ubla\u017euju 'pukotine' u liniji. \u0160to je segment linije du\u017ei, du\u017ei je i AA-segment.<\/p>\n

\"Pixel
\nTako izgleda AA na ramenu orci. Potreban je za gla\u0111enje linija koje prikazuju zakrivljenost njegovih mi\u0161i\u0107a.<\/i><\/p>\n

Antialiasing ne smije izlaziti izvan sprita koji \u0107e se koristiti u igri ili na pozadini, \u010dija boja nije poznata. Na primjer, ako primijenite AA za svijetlu pozadinu, na tamnoj pozadini, gla\u0111enje \u0107e izgledati neuredno.<\/p>\n

6. Odabrani kontur<\/h2>\n

\n\"Pixel
\n
\nPrije su konture bile potpuno crne, zbog \u010dega je sprite izgledao vrlo crta\u010dki. Slika je izgledala kao da je podijeljena na segmente. Na primjer, crne linije na ruci previ\u0161e kontrastno prikazuju mi\u0161i\u0107nu strukturu, a lik izgleda manje cjelovito.<\/p>\n

Ako \u0107e sprite postati prirodniji, a segmentacija manje o\u010dita, osnovne forme lika \u0107e biti lak\u0161e \u010ditati. Za to se mo\u017ee koristiti odabirni kontur \u2014 djelomi\u010dno zamijeniti crni kontur svjetlijim. Na osvijetljenoj dijelu spritea mogu se koristiti najsvjetlije boje ili, tamo gdje se sprite dodiruje s negativnim prostorom, mo\u017ee se potpuno ukloniti kontur. Umjesto crnog, treba koristiti boju koja je odabrana za sjenu \u2014 tako \u0107e se zadr\u017eati segmentacija (za razlikovanje mi\u0161i\u0107a, krzna itd.).<\/p>\n

Tako\u0111er, u ovoj fazi sam dodao tamnije sjene. Dobio sam tri gradacije zelene na ko\u017ei orkova. Najtamnije zelena boja mo\u017ee se koristiti za odabirni kontur i AA.<\/p>\n

7. Zavr\u0161ni dodiri<\/h2>\n

\n\"Pixel
\n
\nNa kraju bi trebalo dodati odsjaje (najsvjetlije to\u010dke na spriteu), detalje (nau\u0161nice, zakovice, o\u017eiljke) i druge pobolj\u0161anja, dok lik ne bude spreman ili dok ne budemo morali prije\u0107i na sljede\u0107e.<\/p>\n

Postoji nekoliko korisnih tehnika koje se mogu primijeniti u ovoj fazi. Okrenite crte\u017e horizontalno, to \u010desto poma\u017ee u otkrivanju gre\u0161aka u proporcijama i sjen\u010danju. Tako\u0111er mo\u017eete ukloniti boju \u2014 postaviti zasi\u0107enje na nulu, da biste shvatili gdje treba promijeniti sjene.<\/p>\n

Stvaranje \u0161uma (dithering, disering)<\/h3>\n

\nZa sada smo uglavnom primjenjivali velike, cjelovite dijelove sjena. No postoji i druga tehnika \u2014 disering, koja omogu\u0107ava prijelaz s jedne boje na drugu bez dodavanja tre\u0107e. Pogledajte primjer u nastavku.<\/p>\n

\"Pixel
\n
\nGornji gradient od tamnog do svijetlog koristi stotine razli\u010ditih nijansi plave. <\/p>\n

Srednji gradient koristi samo devet boja, ali jo\u0161 uvijek sadr\u017ei previ\u0161e nijansi jedne boje. Javlja se tzv. banding (od eng. band \u2014 trak), gdje zbog debelih homogena traka oko o\u010diju fokusira na to\u010dke dodira boja, umjesto na same boje.<\/p>\n

Na donjem gradientu primijenili smo disering, koji omogu\u0107ava izbjegavanje bandinga i koristi samo dvije boje. Stvaramo \u0161um razli\u010ditih intenziteta kako bismo opona\u0161ali gradaciju boje. Ova tehnika je vrlo sli\u010dna halftone (halftonska slika), koja se koristi u tisku; kao i stippling (stipling \u2014 zrnasta slika) \u2014 u ilustracijama i stripovima.<\/p>\n

Na orku sam primijenio dezeringanje samo malo kako bih prenio teksturu. Neki umjetnici piksela ga uop\u0107e ne koriste, dok ga drugi vrlo vje\u0161to i bez zadr\u0161ke primjenjuju. \u010cini mi se da dezeringanje najbolje izgleda na velikim podru\u010djima ispunjenim jednom bojom (pogledajte nebo na snimci Metal Slug, koja je bila iznad) ili na dijelovima koji trebaju izgledati hrapavo i neravnomjerno (na primjer, blato). Odlu\u010dite sami kako ga koristiti.<\/p>\n

Ako \u017eelite vidjeti primjer s opse\u017enim i kvalitetnim dezeringanjem, prou\u010dite igre The Bitmap Brothers, britanske studije iz 80-ih, ili igre na ra\u010dunalu PC-98. Samo imajte na umu da su sve one NSFW.<\/p>\n

\"Pixel
\nKakyusei (PC-98). Elf, 1996. godina
\nNa ovoj slici ima samo 16 boja!<\/i><\/p>\n

8. Posljednji pogled<\/h2>\n

\n\"Pixel
\n
\nJedna od opasnosti pikselske umjetnosti je \u0161to se \u010dini jednostavnom i lakom (zbog svoje strukture i stilskih ograni\u010denja). No, na kraju \u0107ete potro\u0161iti ogromnu koli\u010dinu vremena na doradu svojih spritova. To je poput zagonetke koju treba rije\u0161iti \u2014 zbog toga pikselska umjetnost privla\u010di perfekcioniste. Zapamtite, jedan sprite ne bi trebao oduzeti previ\u0161e vremena \u2014 to je samo mali komadi\u0107 u izuzetno slo\u017eenoj zbirci dijelova. Va\u017eno je ne izgubiti iz vida cjelokupnu sliku.<\/p>\n

\u010cak i ako va\u0161a pikselska umjetnost nije za igre, ponekad bi trebali re\u0107i sebi: 'Sve je ve\u0107 dovoljno dobro!' i krenuti dalje. Najbolji na\u010din za razvoj vje\u0161tina je pro\u0107i kroz cijeli proces od po\u010detka do kraja \u0161to vi\u0161e puta, koriste\u0107i \u0161to vi\u0161e tema. <\/p>\n

I ponekad je korisno na trenutak ostaviti sprite kako bi mu kasnije mogli pogledati svje\u017eim o\u010dima. <\/p>\n

32\u00d732 piksela<\/h2>\n

\n\"Pixel
\n
\nKrenuli smo s velikim spriteom od 96\u00d796 piksela, jer ta veli\u010dina vi\u0161e nalikuje slikanju ili crtanju, ali pikselima. \u0160to je sprite manji, to se manje uklapa u ono \u0161to bi trebao prikazivati, a svaki piksel postaje va\u017eniji.<\/p>\n

\"Pixel
\n
\nU Super Mario Bros. Mario o\u010dima ima samo dva piksela, jednog iznad drugog. I njegovo uho tako\u0111er. Autor lika Shigeru Miyamoto rekao je da su brkovi bili potrebni da odvoje nos od ostatka lica. Tako da jedna od glavnih karakteristika lica Marija nije samo dizajn lika, ve\u0107 i pragmati\u010dan trik. \u0160to potvr\u0111uje staru mudrost \u2014 'potreba je majka izumiteljstva.'<\/p>\n

Glavni koraci za izradu spritea 32\u00d732 piksela su nam ve\u0107 poznati: skica, boja, sjene, daljnje dorade. U ovim uvjetima, kao po\u010detnu skicu biram \u0161arene oblike umjesto crtanja kontura zbog male veli\u010dine. Boja igra va\u017eniju ulogu u definiranju lika od kontura. Pogledajte opet Maria, on uop\u0107e nema konture. Nisu zanimljive samo brkove. Njegove brade definiraju oblik u\u0161iju, rukavi pokazuju ruke, a op\u0107i oblik vi\u0161e-manje jasno prikazuje cijelo njegovo tijelo.<\/p>\n

Izrada malih spriteova je stalni kompromis. Ako dodate obrub, mo\u017eete izgubiti prostor za sjenu. Ako su ruke i noge va\u0161eg lika jasno prikazane, glava najvjerojatnije ne bi trebala biti prevelika. Ako u\u010dinkovito koristite boje, selektivne obrube i antialiasing, tada \u0107e prikazani objekt izgledati ve\u0107i nego \u0161to zapravo jest.<\/p>\n

Za male spriteove svi\u0111a mi se chibi stil: likovi izgledaju jako slatko, imaju velike glave i o\u010di. Sjajan na\u010din za stvaranje \u017eivopisnog junaka u ograni\u010denom prostoru, a i u cjelini, vrlo prijatan stil. Ali, mo\u017eda \u0107ete trebati pokazati mobilnost ili snagu lika, tada mo\u017eete posvetiti manje prostora glavi da bi tijelo izgledalo mo\u0107nije. Sve ovisi o va\u0161im \u017eeljama i ciljevima.<\/p>\n

\"Pixel
\nCijela ekipa je tu!<\/i><\/p>\n

Formati datoteka<\/h2>\n

\n\"Pixel
\nTakav rezultat mo\u017ee uznemiriti svakog pixel umjetnika<\/i><\/p>\n

Slika koju vidite je rezultat spremanja crte\u017ea u JPG. Dio podataka je izgubljen zbog algoritama kompresije datoteke. Kvalitetna pixel umjetnost na kraju \u0107e izgledati lo\u0161e, a vra\u0107anje izvorne palete bit \u0107e te\u0161ko.<\/p>\n

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

Kako ispravno dijeliti pixel umjetnost<\/h2>\n

\nDijeljenje pixel umjetnosti na dru\u0161tvenim mre\u017eama odli\u010dan je na\u010din za dobivanje povratnih informacija i upoznavanje s drugim umjetnicima koji rade u istom stilu. Ne zaboravite dodati he\u0161teg #pixelart. Na\u017ealost, dru\u0161tvene mre\u017ee \u010desto konvertiraju PNG u JPG bez pitanja, pogor\u0161avaju\u0107i va\u0161u rad. Pri tome nije uvijek jasno za\u0161to je va\u0161a slika konvertirana.<\/p>\n

Postoji nekoliko savjeta kako sa\u010duvati pixel umjetnost u potrebnoj kvaliteti za razne dru\u0161tvene mre\u017ee.<\/p>\n

Twitter<\/h3>\n

\nDa PNG datoteka ne bi bila promijenjena na Twitteru, koristite manje od 256 boja ili provjerite<\/a><\/noindex>, da je va\u0161a datoteka manja od 900 piksela na du\u017eoj strani. Pove\u0107ao bih veli\u010dinu datoteke barem na 512\u00d7512 piksela. Tako\u0111er, skaliranje bi trebalo biti u omjeru 100 (200%, a ne 250%) i o\u0161tri rubovi bi se trebali zadr\u017eati (Nearest Neighbor u Photoshopu).<\/p>\n

Animirane GIF datoteke za objave na Twitteru moraju<\/a><\/noindex> ne smiju biti ve\u0107e od 15 MB. Slika bi trebala biti barem 800\u00d7800 piksela, cikli\u010dna animacija trebala bi se ponoviti tri puta, a posljednji kadar trebao bi biti upola kra\u0107i po vremenu od svih ostalih \u2014 to je najpopularnija teorija. Ipak, nejasno je koliko je potrebno ispuniti te zahtjeve, s obzirom na to da Twitter stalno mijenja svoje algoritme za prikaz slika.<\/p>\n

Instagram<\/h3>\n

\nKoliko znam, nije mogu\u0107e objaviti sliku na Instagramu bez gubitka kvalitete. No, sigurno \u0107e izgledati bolje ako je pove\u0107ate barem na 512x512 piksela.
\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 po\u010detnike: priru\u010dnik za kori\u0161tenje | ProHoster","description":"Nezavisnim programerima \u010desto se doga\u0111a.","canonical_url":"https:\/\/prohoster.info\/hr\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"hr_HR","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\/hr\/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\/hr\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/hr\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}