{"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\/cs\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/00d172ccd0d834f54c3fa1ffe2f03481.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nIndie v\u00fdvoj\u00e1\u0159i \u010dasto mus\u00ed zast\u00e1vat v\u00edce rol\u00ed: hern\u00edho design\u00e9ra, program\u00e1tora, skladatele, v\u00fdtvarn\u00edka. A kdy\u017e dojde na vizu\u00e1ln\u00ed str\u00e1nku, mnoz\u00ed vyb\u00edraj\u00ed pixel art \u2014 na prvn\u00ed pohled se zd\u00e1 b\u00fdt jednoduch\u00fd. Ale k tomu, abyste vytvo\u0159ili n\u011bco kr\u00e1sn\u00e9ho, je pot\u0159eba hodn\u011b zku\u0161enost\u00ed a specifick\u00fdch dovednost\u00ed. Na\u0161el jsem tutori\u00e1l pro ty, kte\u0159\u00ed pr\u00e1v\u011b za\u010d\u00ednaj\u00ed ch\u00e1pat z\u00e1klady tohoto stylu: s popisem speci\u00e1ln\u00edho softwaru a technik kreslen\u00ed na p\u0159\u00edkladu dvou sprite\u016f.<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h2>Pozad\u00ed<\/h2>\n<p>\nPixel art je forma digit\u00e1ln\u00edho um\u011bn\u00ed, v n\u00ed\u017e jsou zm\u011bny prov\u00e1d\u011bny na \u00farovni pixel\u016f. V\u011bt\u0161inou je spojov\u00e1n s grafikou videoher 80. a 90. let. Tehdy museli um\u011blci zohled\u0148ovat omezen\u00ed pam\u011bti a n\u00edzk\u00e9 rozli\u0161en\u00ed. Dnes je pixel art st\u00e1le popul\u00e1rn\u00ed v hr\u00e1ch a jako um\u011bleck\u00fd styl celkov\u011b, i kdy\u017e je mo\u017en\u00e9 vytv\u00e1\u0159et realistickou 3D grafiku. Pro\u010d? I kdy\u017e nebereme v potaz nostalgii, vytvo\u0159en\u00ed skvostn\u00e9ho d\u00edla v tak rigidn\u00edch r\u00e1mc\u00edch je p\u0159\u00edjemnou a cen\u011bnou v\u00fdzvou.<\/p>\n<p>Hranice vstupu do pixel artu je relativn\u011b n\u00edzk\u00e1 ve srovn\u00e1n\u00ed s tradi\u010dn\u00edm um\u011bn\u00edm a 3D grafikou, co\u017e p\u0159itahuje indie v\u00fdvoj\u00e1\u0159e. Ale to neznamen\u00e1, \u017ee to bude snadn\u00e9 <b>dokon\u010dit<\/b> hru v tomto stylu. Vid\u011bl jsem mnoho indie v\u00fdvoj\u00e1\u0159\u016f s pixel art metroidvaniemi na crowdfundingov\u00fdch platform\u00e1ch. Mysleli si, \u017ee v\u0161e dokon\u010d\u00ed za rok, ale ve skute\u010dnosti pot\u0159ebovali dal\u0161\u00edch \u0161est let. <\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/67c754a18d7483e700e801beec5f2ebc.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Metal Slug 3 (Automat). SNK, 2000<\/i><\/p>\n<p>Pixel art na \u00farovni, na kter\u00e9 jej v\u011bt\u0161ina lid\u00ed chce vytv\u00e1\u0159et, zabere hodn\u011b \u010dasu, a kr\u00e1tk\u00fdch tutori\u00e1l\u016f je velmi m\u00e1lo. Prac\u00ed s 3D modelem m\u016f\u017eete rotovat, deformovat, p\u0159esouvat jeho jednotliv\u00e9 \u010d\u00e1sti, kop\u00edrovat animace z jednoho modelu na druh\u00fd a tak d\u00e1le. Pixel art vysok\u00e9 \u00farovn\u011b t\u00e9m\u011b\u0159 v\u017edy zabere spoustu \u00fasil\u00ed na pe\u010dliv\u00e9 um\u00edst\u011bn\u00ed pixel\u016f na ka\u017ed\u00e9m sn\u00edmku.<\/p>\n<p>Celkov\u011b jsem varoval.<\/p>\n<p>A te\u010f n\u011bco o m\u00e9m stylu: v\u011bt\u0161inou vytv\u00e1\u0159\u00edm pixel art pro videohry a v nich nach\u00e1z\u00edm inspiraci. Jsem fanou\u0161ek Famicom\/NES, 16bitov\u00fdch konzol\u00ed a ark\u00e1d z 90. let. Pixel art m\u00fdch obl\u00edben\u00fdch her t\u00e9 doby lze popsat jako \u017eiv\u00fd, sebev\u011bdom\u00fd a \u010dist\u00fd (ale ne p\u0159\u00edli\u0161), nelze ho nazvat tvrd\u00fdm a minimalistick\u00fdm. V tomto stylu pracuji s\u00e1m, ale snadno m\u016f\u017eete aplikovat my\u0161lenky a techniky z tohoto tutori\u00e1lu k vytvo\u0159en\u00ed zcela jin\u00fdch v\u011bc\u00ed. Zkoumejte pr\u00e1ce r\u016fzn\u00fdch um\u011blc\u016f a vytv\u00e1\u0159ejte pixel art, kter\u00fd se v\u00e1m l\u00edb\u00ed!<\/p>\n<h2>Software<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/5dc5fa7ebabd2a31b1375cdfc9437b66.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nZ\u00e1kladn\u00ed digit\u00e1ln\u00ed n\u00e1stroje pro pixel art jsou Zoom a Pencil, abyste mohli umis\u0165ovat pixely. Tak\u00e9 se v\u00e1m hod\u00ed Line, Shape, Select, Move a Paint Bucket. Existuje spousta bezplatn\u00e9ho i placen\u00e9ho softwaru s takovou sadou n\u00e1stroj\u016f. \u0158eknu v\u00e1m o nejpopul\u00e1rn\u011bj\u0161\u00edch a t\u011bch, kter\u00e9 s\u00e1m pou\u017e\u00edv\u00e1m.<\/p>\n<h3>Paint (zdarma)<\/h3>\n<p>\nPokud m\u00e1te Windows, vestav\u011bn\u00fd Paint je primitivn\u00ed program, ale obsahuje v\u0161echny n\u00e1stroje pro pixel art.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.piskelapp.com\/\">Piskel<\/a><\/noindex> (zdarma)<\/h3>\n<p>\nNep\u0159edv\u00eddateln\u011b funk\u010dn\u00ed editor pixel artu, kter\u00fd b\u011b\u017e\u00ed v prohl\u00ed\u017ee\u010di. M\u016f\u017eete exportovat pr\u00e1ci do PNG nebo animovan\u00e9ho GIFu. Skv\u011bl\u00e1 volba pro za\u010d\u00e1te\u010dn\u00edky.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/graphicsgale.com\/us\/\">GraphicsGale<\/a><\/noindex> (zdarma)<\/h3>\n<p>\nGraphicsGale je jedin\u00fd editor z t\u011bch, o kter\u00fdch jsem sly\u0161el, navr\u017een\u00fd speci\u00e1ln\u011b pro pixel art a zahrnuj\u00edc\u00ed anima\u010dn\u00ed n\u00e1stroje. Vytvo\u0159ila ho japonsk\u00e1 spole\u010dnost HUMANBALANCE. Od roku 2017 je distribuov\u00e1n zdarma a st\u00e1le je velmi \u017e\u00e1dan\u00fd, i p\u0159es vzr\u016fstaj\u00edc\u00ed popularitu Aseprite. Bohu\u017eel funguje pouze na Windows.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/\">Aseprite<\/a><\/noindex> ($)<\/h3>\n<p>\nSnad nejpopul\u00e1rn\u011bj\u0161\u00ed editor v sou\u010dasnosti. <noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/faq\/#if-aseprite-source-code-is-available-how-is-that-you-are-selling-it\">Otev\u0159en\u00fd zdrojov\u00fd k\u00f3d<\/a><\/noindex>, spousta mo\u017enost\u00ed, aktivn\u00ed podpora, verze pro Windows, Mac a Linux. Pokud se v\u00e1\u017en\u011b v\u011bnujete pixel artu a st\u00e1le jste nena\u0161li pot\u0159ebn\u00fd editor, mo\u017en\u00e1 je to pr\u00e1v\u011b ono.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.yoyogames.com\/get\">GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n<p>\nGameMaker Studio 2 je vynikaj\u00edc\u00ed 2D n\u00e1stroj s dobr\u00fdm editorem sprite\u016f. Pokud chcete vytv\u00e1\u0159et pixel art pro vlastn\u00ed hry, je velmi pohodln\u00e9 to v\u0161echno d\u011blat v jednom programu. Te\u010f tento software pou\u017e\u00edv\u00e1m p\u0159i pr\u00e1ci na <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>, sb\u00edrce 50 retro her: sprite a animace vytv\u00e1\u0159\u00edm v GameMakeru, zat\u00edmco tilesety ve Photoshopu.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.photoshop.com\/\">Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n<p>\nPhotoshop \u2014 drah\u00fd software, kter\u00fd se distribuuje na z\u00e1klad\u011b p\u0159edplatn\u00e9ho a nen\u00ed optimalizov\u00e1n pro pixel art. Nedoporu\u010duji ho kupovat, pokud se nezab\u00fdv\u00e1te kreslen\u00edm ilustrac\u00ed ve vysok\u00e9m rozli\u0161en\u00ed nebo nepot\u0159ebujete prov\u00e1d\u011bt slo\u017eit\u00e9 manipulace s obr\u00e1zky, jako j\u00e1. Lze v n\u011bm vytv\u00e1\u0159et statick\u00e9 sprite a pixelov\u00e1 d\u00edla, ale je pom\u011brn\u011b slo\u017eit\u00fd ve srovn\u00e1n\u00ed se specializovan\u00fdm softwarem (nap\u0159\u00edklad GraphicsGale nebo Aseprite).<\/p>\n<h2>Ostatn\u00ed<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/e810f041b931c304b6b65f9895a9f325.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>M\u016fj set na pixel art. V\u0161echno \u010dern\u00e9, pr\u00e1v\u011b jsem si toho v\u0161iml.<\/i><\/p>\n<h3>Grafick\u00fd tablet ($$+)<\/h3>\n<p>\nDoporu\u010duji grafick\u00e9 tablety pro jakoukoli pr\u00e1ci s digit\u00e1ln\u00edmi ilustracemi, aby se p\u0159ede\u0161lo syndromu karp\u00e1ln\u00edho tunelu. Je mnohem snaz\u0161\u00ed mu preventivn\u011b p\u0159edej\u00edt, ne\u017e ho l\u00e9\u010dit. Jakmile poc\u00edt\u00edte bolest, bude se pouze zhor\u0161ovat \u2014 starejte se o sebe od za\u010d\u00e1tku. Proto\u017ee jsem kdysi kreslil my\u0161\u00ed, nyn\u00ed m\u00e1m pot\u00ed\u017ee hr\u00e1t hry, kde je nutn\u00e9 ma\u010dkat tla\u010d\u00edtka. Moment\u00e1ln\u011b pou\u017e\u00edv\u00e1m Wacom Intuos Pro S.<\/p>\n<h3>Podpora z\u00e1p\u011bst\u00ed ($)<\/h3>\n<p>\nPokud si nem\u016f\u017eete dovolit tablet, kupte si alespo\u0148 podporu z\u00e1p\u011bst\u00ed. Nejv\u00edce mi sed\u00ed Mueller Green Fitted Wrist Brace. Ostatn\u00ed jsou bu\u010f p\u0159\u00edli\u0161 t\u011bsn\u00e9, nebo neposkytuj\u00ed dostate\u010dnou oporu. Podpory lze bez probl\u00e9m\u016f objednat online.<\/p>\n<h2>96\u00d796 pixel\u016f<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/f8bfaf46d9b833c623bbe1573d40ae64.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Final Fight. Capcom, 1989<\/i><\/p>\n<p>Poj\u010fme na to! Za\u010dneme se sprite postavy 96\u00d796 pixel\u016f. Jako p\u0159\u00edklad jsem nakreslil orka a um\u00edstil ho na screenshot z Final Fight (obr\u00e1zek v\u00fd\u0161e), abyste vid\u011bli m\u011b\u0159\u00edtko. To je <b>velk\u00fd<\/b> sprite pro v\u011bt\u0161inu retro her, velikost screenshotu: 384\u00d7224 pixel\u016f.<\/p>\n<p>Na tak velk\u00e9m spritu bude snaz\u0161\u00ed uk\u00e1zat techniku, o kter\u00e9 chci mluvit. Tak\u00e9 pixelov\u00e9 kreslen\u00ed v\u00edce p\u0159ipom\u00edn\u00e1 tradi\u010dn\u00ed formy um\u011bn\u00ed (nap\u0159\u00edklad kresbu nebo malbu), se kter\u00fdmi mo\u017en\u00e1 l\u00e9pe zn\u00e1te. Jakmile zvl\u00e1dneme z\u00e1kladn\u00ed techniky, p\u0159ejdeme k men\u0161\u00edm sprite.<\/p>\n<h2>1. Vyberte paletu<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/f99208134b3f107fcdf3f14b8c2216b8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nPixel je v pixel artu mnohem hlub\u0161\u00ed pojem ne\u017e v jak\u00fdchkoli jin\u00fdch digit\u00e1ln\u00edch oblastech. Pixel art je definov\u00e1n sv\u00fdmi omezen\u00edmi, jako jsou barvy. Je d\u016fle\u017eit\u00e9 spr\u00e1vn\u011b vybrat paletu, kter\u00e1 pom\u016f\u017ee ur\u010dit v\u00e1\u0161 styl. Ale na za\u010d\u00e1tku navrhuji ne\u0159e\u0161it palety a zvolit jednu z existuj\u00edc\u00edch (nebo prost\u011b n\u011bkolik n\u00e1hodn\u00fdch barev) \u2014 m\u016f\u017eete ji snadno zm\u011bnit v jak\u00e9koli f\u00e1zi.<\/p>\n<p>Pro tento tutori\u00e1l budu pou\u017e\u00edvat paletu ze 32 barev, kterou jsme vytvo\u0159ili pro <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>. Pro pixel-art se \u010dasto sb\u00edraj\u00ed z 32 nebo 16 barev. Na\u0161e je navr\u017eena pro fiktivn\u00ed konzoli, kter\u00e1 by mohla vzniknout n\u011bkde mezi Famicom a PC Engine. M\u016f\u017eete ji vz\u00edt nebo pou\u017e\u00edt jakoukoli jinou \u2014 tutori\u00e1l v\u016fbec nez\u00e1vis\u00ed na zvolen\u00e9 palet\u011b.<\/p>\n<h2>2. Hrub\u00e9 kontury<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/e8ead988dfafeae4b220ff3dc39093e6.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nZa\u010dneme s kreslen\u00edm pomoc\u00ed n\u00e1stroje Tu\u017eka. Nakresl\u00edme skicu, stejn\u011b jako to d\u011bl\u00e1me s b\u011b\u017en\u00fdm perem a pap\u00edrem. Samoz\u0159ejm\u011b, \u017ee pixel-art a tradi\u010dn\u00ed um\u011bn\u00ed se prol\u00ednaj\u00ed, zejm\u00e9na kdy\u017e jde o velk\u00e9 sprity. M\u00e9 pozorov\u00e1n\u00ed ukazuje, \u017ee siln\u00ed pixel-artov\u00ed um\u011blci alespo\u0148 dob\u0159e kresl\u00ed rukou a naopak. Tak\u017ee rozv\u00edjen\u00ed dovednost\u00ed v kreslen\u00ed je v\u017edy u\u017eite\u010dn\u00e9.<\/p>\n<h2>3. Zpracov\u00e1n\u00ed kontur<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/738dde231295a317d5461b4055e2be61.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nZpracov\u00e1v\u00e1me kontury: odstra\u0148ujeme zbyte\u010dn\u00e9 pixely a zten\u010dujeme tlou\u0161\u0165ku ka\u017ed\u00e9 \u010d\u00e1ry na jeden pixel. Ale co p\u0159esn\u011b pova\u017eovat za zbyte\u010dn\u00e9? Abyste na tuto ot\u00e1zku odpov\u011bd\u011bli, mus\u00edte se pono\u0159it do pixelov\u00fdch \u010dar a nerovnost\u00ed.<\/p>\n<h3>Nerovnosti<\/h3>\n<p>\nMus\u00edte se nau\u010dit kreslit dv\u011b z\u00e1kladn\u00ed \u010d\u00e1ry v pixel-artu: p\u0159\u00edm\u00e9 a zak\u0159iven\u00e9. S perem a pap\u00edrem to cel\u00e9 z\u00e1vis\u00ed na svalov\u00e9 kontrole, ale my pracujeme s drobn\u00fdmi barevn\u00fdmi bloky.<\/p>\n<p>Kl\u00ed\u010d k vykreslen\u00ed spr\u00e1vn\u00fdch pixelov\u00fdch \u010dar \u2014 nerovnosti. Jsou to jednotliv\u00e9 pixely nebo mal\u00e9 segmenty, kter\u00e9 naru\u0161uj\u00ed hladkost \u010d\u00e1ry. Jak jsem ji\u017e \u0159ekl, jednotliv\u00fd pixel m\u00e1 v pixel-artu obrovsk\u00fd v\u00fdznam, tak\u017ee nerovnosti mohou zni\u010dit celou estetiku. P\u0159edstavte si, \u017ee kresl\u00edte p\u0159\u00edmou \u010d\u00e1ru na pap\u00ed\u0159e, a najednou n\u011bkdo uhod\u00ed do stolu: nerovnosti v pixel-artu vypadaj\u00ed stejn\u011b jako n\u00e1hodn\u00e9 kliky.<\/p>\n<p>P\u0159\u00edklady:<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/8d873c547fa1fc638d524877599d1788.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>P\u0159\u00edm\u00e9<\/i><\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/0516dfef0ffc74335de791e16708b90f.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Zak\u0159iven\u00e9<\/i><\/p>\n<p>Nerovnosti se objevuj\u00ed na zak\u0159iven\u00fdch \u010dar\u00e1ch, kdy\u017e se d\u00e9lka segment\u016f \u010d\u00e1ry zvy\u0161uje nebo sni\u017euje postupn\u011b.<\/p>\n<p>\u00dapln\u011b se vyhnout nerovnostem nen\u00ed mo\u017en\u00e9 \u2014 ve v\u0161ech va\u0161ich obl\u00edben\u00fdch retro hr\u00e1ch jsou (pokud samoz\u0159ejm\u011b pixel-art neobsahuje v\u00fdhradn\u011b jednoduch\u00e9 tvary). C\u00edl: minimalizovat nerovnosti, p\u0159i\u010dem\u017e ukazuje v\u0161e pot\u0159ebn\u00e9.<\/p>\n<h2>4. Aplikujeme prvn\u00ed barvy<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/b8b937d95667cff41f1060a77e715acb.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nP\u0159ipravte si svou postavu pomoc\u00ed v\u00fdpln\u011b nebo jin\u00e9ho vhodn\u00e9ho n\u00e1stroje. Paleta tento \u00fakol usnadn\u00ed. Pokud software nepodporuje pou\u017eit\u00ed palet, m\u016f\u017eete ji um\u00edstit p\u0159\u00edmo do obr\u00e1zku, jak je uvedeno v p\u0159\u00edkladu v\u00fd\u0161e, a vyb\u00edrat barvy pomoc\u00ed pipety.<\/p>\n<p>V lev\u00e9m doln\u00edm rohu jsem nakreslil na\u0161eho p\u0159\u00edtele, seznamte se, to je \u2013 \u0160ar. S n\u00edm bude snaz\u0161\u00ed pochopit, co se d\u011bje v ka\u017ed\u00e9 f\u00e1zi.<\/p>\n<h2>5. St\u00ednov\u00e1n\u00ed<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/2e0793f9ded395337e4da9ede215b9d8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nJe \u010das zn\u00e1zornit st\u00edny \u2013 jednodu\u0161e p\u0159id\u00e1me tmav\u0161\u00ed barvy na sprite. Tak bude obr\u00e1zek vypadat objemn\u011b. P\u0159edstavme si, \u017ee m\u00e1me jeden zdroj sv\u011btla, um\u00edst\u011bn\u00fd nad orkem nalevo od n\u011bj. To znamen\u00e1, \u017ee osv\u011btleno bude v\u0161e, co je naho\u0159e a p\u0159ed na\u0161\u00ed postavou. P\u0159id\u00e1v\u00e1me st\u00edny zespodu zprava.<\/p>\n<h3>Tvar a objem<\/h3>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/1994fcb30789e1601bcae8ce1a50d5e7.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nPokud v\u00e1m tato f\u00e1ze zp\u016fsobuje pot\u00ed\u017ee, p\u0159edstavte si sv\u016fj obr\u00e1zek jako objemn\u00e9 tvary, nikoli pouze jako \u010d\u00e1ry a barvy. Tvar existuje v trojrozm\u011brn\u00e9m prostoru a m\u016f\u017ee m\u00edt objem, kter\u00fd vytv\u00e1\u0159\u00edme pomoc\u00ed st\u00edn\u016f. Pom\u016f\u017ee to vizualizovat postavu bez detail\u016f a p\u0159edstavit si, \u017ee je vyrobena z hl\u00edny a ne z pixel\u016f. St\u00ednov\u00e1n\u00ed nen\u00ed jen p\u0159id\u00e1n\u00ed nov\u00fdch barev, je to proces utv\u00e1\u0159en\u00ed tvaru. Na dob\u0159e zpracovan\u00e9 postav\u011b detaily nezakr\u00fdvaj\u00ed z\u00e1kladn\u00ed tvary: kdy\u017e z\u00fa\u017e\u00edte o\u010di, uvid\u00edte n\u011bkolik velk\u00fdch shluk\u016f sv\u011btla a st\u00ednu. <\/p>\n<h3>Antialiasing<\/h3>\n<p>\nP\u0159i ka\u017ed\u00e9m pou\u017eit\u00ed nov\u00e9 barvy aplikuji antialiasing (A A). Pom\u00e1h\u00e1 vyhladit pixely p\u0159id\u00e1n\u00edm mezilehl\u00fdch barev na rozhran\u00ed dvou segment\u016f \u010d\u00e1ry:<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/9fc0ab09f076b1de252038c899ada201.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\n\u0160ed\u00e9 pixely zm\u00edr\u0148uj\u00ed \u201etrhliny\u201c v \u010d\u00e1\u0159e. \u010c\u00edm del\u0161\u00ed je segment \u010d\u00e1ry, t\u00edm del\u0161\u00ed je segment A A.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/262533d7923415430375d84f58a9d7fa.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Takto vypad\u00e1 A A na rameni orka. Je pot\u0159eba k vyhlazen\u00ed \u010dar, kter\u00e9 zobrazuj\u00ed k\u0159ivku jeho sval\u016f.<\/i><\/p>\n<p>Antialiasing by nem\u011bl p\u0159esahovat hranice sprite, kter\u00fd bude pou\u017eit ve h\u0159e nebo na pozad\u00ed, jeho\u017e barva nen\u00ed zn\u00e1ma. Nap\u0159\u00edklad, pokud pou\u017eijete A A pro sv\u011btl\u00e9 pozad\u00ed, na tmav\u00e9m pozad\u00ed bude vyhlazen\u00ed vypadat nehezk\u00fd.<\/p>\n<h2>6. V\u00fdb\u011brov\u00fd obrys<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/32574a815ea81137a948f0a18217c8db.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nD\u0159\u00edve byly obrysy zcela \u010dern\u00e9, co\u017e zp\u016fsobovalo, \u017ee sprite vypadal velmi kreslen\u011b. Obr\u00e1zek se jakoby rozd\u011blil na segmenty. Nap\u0159\u00edklad \u010dern\u00e9 \u010d\u00e1ry na ruce p\u0159\u00edli\u0161 kontrastn\u011b zobrazuj\u00ed svalstvo, a postava tak vypad\u00e1 m\u00e9n\u011b celistv\u011b.<\/p>\n<p>Pokud se sprite stane p\u0159irozen\u011bj\u0161\u00edm a segmentace nebude tak jasn\u011b patrn\u00e1, budou z\u00e1kladn\u00ed formy postavy l\u00e9pe \u010diteln\u00e9. K tomu lze pou\u017e\u00edt v\u00fdb\u011brov\u00fd obrys - \u010d\u00e1ste\u010dn\u011b nahradit \u010dern\u00fd obrys sv\u011btlej\u0161\u00edm. Na osv\u011btlen\u00e9 \u010d\u00e1sti sprite lze pou\u017e\u00edt nej sv\u011btlej\u0161\u00ed barvy nebo, tam kde se sprite dot\u00fdk\u00e1 negativn\u00edho prostoru, lze obrys zcela odstranit. M\u00edsto \u010dern\u00e9ho je t\u0159eba pou\u017e\u00edt barvu, kter\u00e1 byla vybr\u00e1na pro st\u00edn - tak se zachov\u00e1 segmentace (pro odd\u011blen\u00ed sval\u016f, srsti atd.).<\/p>\n<p>Tak\u00e9 v t\u00e9to f\u00e1zi jsem p\u0159idal tmav\u0161\u00ed st\u00edny. Vznikly t\u0159i odst\u00edny zelen\u00e9 na poko\u017ece orka. Nej tmav\u011b zelenou barvu lze pou\u017e\u00edt pro v\u00fdb\u011brov\u00fd obrys a AA.<\/p>\n<h2>7. Kone\u010dn\u00e9 \u00fapravy<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/196f80b3ed3928d4c1ac7b9b99782fa1.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nNa z\u00e1v\u011br stoj\u00ed za to p\u0159idat lesky (nej sv\u011btlej\u0161\u00ed skvrny na spritu), detaily (n\u00e1u\u0161nice, n\u00fdty, jizvy) a dal\u0161\u00ed vylep\u0161en\u00ed, dokud nebude postava p\u0159ipravena nebo dokud nebude nutn\u00e9 p\u0159ej\u00edt na dal\u0161\u00ed.<\/p>\n<p>Existuje n\u011bkolik u\u017eite\u010dn\u00fdch trik\u016f, kter\u00e9 lze v t\u00e9to f\u00e1zi aplikovat. Oto\u010dte obr\u00e1zek horizont\u00e1ln\u011b, to \u010dasto pom\u00e1h\u00e1 odhalit chyby v proporc\u00edch a st\u00ednov\u00e1n\u00ed. Tak\u00e9 m\u016f\u017eete odstranit barvu - nastavit saturaci na nula, abyste zjistili, kde je t\u0159eba zm\u011bnit st\u00edny.<\/p>\n<h3>Vytv\u00e1\u0159en\u00ed \u0161umu (dithering, ditherov\u00e1n\u00ed)<\/h3>\n<p>\nDosud jsme v\u011bt\u0161inou pou\u017e\u00edvali velk\u00e9, souvisl\u00e9 oblasti st\u00edn\u016f. Ale existuje i jin\u00e1 technika - ditherov\u00e1n\u00ed, kter\u00e1 umo\u017e\u0148uje p\u0159echod z jedn\u00e9 barvy na druhou bez p\u0159id\u00e1v\u00e1n\u00ed t\u0159et\u00ed. Pod\u00edvejte se na p\u0159\u00edklad n\u00ed\u017ee.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/85c2482ab6f83e0eb972d31d50ff0a2e.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nHorn\u00ed gradient od tmav\u00e9 k sv\u011btl\u00e9 pou\u017e\u00edv\u00e1 stovky r\u016fzn\u00fdch odst\u00edn\u016f modr\u00e9. <\/p>\n<p>St\u0159edn\u00ed gradient pou\u017e\u00edv\u00e1 pouze dev\u011bt barev, ale st\u00e1le v n\u011bm je p\u0159\u00edli\u0161 mnoho odst\u00edn\u016f jedn\u00e9 barvy. Vznik\u00e1 takzvan\u00e9 banding (z anglick\u00e9ho band - pruh), kdy se kv\u016fli siln\u00fdm homogenn\u00edm pruh\u016fm oko soust\u0159ed\u00ed na body styku barev, m\u00edsto na samotn\u00e9 barvy.<\/p>\n<p>Na doln\u00edm gradientu jsme pou\u017eili ditherov\u00e1n\u00ed, kter\u00e9 zabra\u0148uje bandingu a pou\u017e\u00edv\u00e1 pouze dv\u011b barvy. Vytv\u00e1\u0159\u00edme \u0161um r\u016fzn\u00e9 intenzity, abychom napodobili gradaci barvy. Tato technika je velmi podobn\u00e1 halftonu (halft\u00f3nov\u00fd obraz), pou\u017e\u00edvan\u00e9mu p\u0159i tisku; a tak\u00e9 stipplingu (stipplovan\u00e9 obrazy) - v ilustraci a komiksech.<\/p>\n<p>Na orku jsem pou\u017eil dithering jen m\u00e1lo pro p\u0159enos textury. N\u011bkte\u0159\u00ed pixelov\u00ed um\u011blci ho v\u016fbec nepou\u017e\u00edvaj\u00ed, jin\u00ed se naopak neboj\u00ed a d\u011blaj\u00ed to velmi dovedn\u011b. Mysl\u00edm, \u017ee dithering vypad\u00e1 nejl\u00e9pe na velk\u00fdch ploch\u00e1ch vypln\u011bn\u00fdch jednou barvou (pod\u00edvejte se na oblohu na screenshotu Metal Slug, kter\u00fd byl v\u00fd\u0161e) nebo na t\u011bch ploch\u00e1ch, kter\u00e9 by m\u011bly vypadat trochu hrub\u011b a nerovn\u011b (nap\u0159\u00edklad \u0161p\u00edna). Rozhodn\u011bte se sami, jak ho pou\u017e\u00edt.<\/p>\n<p>Pokud chcete vid\u011bt p\u0159\u00edklad s velk\u00fdm a kvalitn\u00edm ditheringem, prostudujte si hry The Bitmap Brothers, britsk\u00e9ho studia z 80. let, nebo hry na po\u010d\u00edta\u010di PC-98. Jen si dejte pozor, \u017ee v\u0161echny jsou NSFW.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/25efcc37096d23b0da636b7f04b17e40.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Kakyusei (PC-98). Elf, 1996<br \/>\nNa tomto obr\u00e1zku je celkem 16 barev!<\/i><\/p>\n<h2>8. Posledn\u00ed pohled<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/e1cccd845e1bffa32b26fccc011b6560.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nJedn\u00edm z nebezpe\u010d\u00ed pixelov\u00e9ho um\u011bn\u00ed je, \u017ee se zd\u00e1 b\u00fdt lehk\u00fdm a jednoduch\u00fdm (kv\u016fli sv\u00e9 struktu\u0159e a stylov\u00fdm omezen\u00edm). Ale nakonec str\u00e1v\u00edte obrovsk\u00e9 mno\u017estv\u00ed \u010dasu dolov\u00e1n\u00edm sv\u00fdch sprite\u016f. Je to jako h\u00e1danka, kterou je t\u0159eba vy\u0159e\u0161it - proto pixelov\u00e9 um\u011bn\u00ed p\u0159itahuje perfekcionisty. Pamatujte, \u017ee jeden sprite by nem\u011bl zab\u00edrat p\u0159\u00edli\u0161 mnoho \u010dasu \u2013 je to jen mal\u00fd kousek velmi slo\u017eit\u00e9ho shluku kousk\u016f. D\u016fle\u017eit\u00e9 je neztr\u00e1cet vid\u011bn\u00ed celkov\u00e9ho obrazu.<\/p>\n<p>I kdy\u017e v\u00e1\u0161 pixel art nen\u00ed pro hry, ob\u010das je dobr\u00e9 \u0159\u00edct si: \u201eV\u0161echno u\u017e je dost dobr\u00e9!\u201c A posunout se d\u00e1l. Nejlep\u0161\u00ed zp\u016fsob, jak rozv\u00edjet sv\u00e9 dovednosti, je co nejv\u00edcekr\u00e1t proj\u00edt cel\u00fd proces od za\u010d\u00e1tku do konce, p\u0159i\u010dem\u017e pou\u017eijete co nejv\u00edce t\u00e9mat. <\/p>\n<p>A n\u011bkdy je u\u017eite\u010dn\u00e9 na chv\u00edli nechat sprite a pod\u00edvat se na n\u011bj pozd\u011bji na sv\u011b\u017e\u00ed pohled. <\/p>\n<h2>32\u00d732 pixel\u016f<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/6a4441d7b2cfa580454f6d6b64b7644b.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nVytvo\u0159ili jsme velk\u00fd sprite o velikosti 96\u00d796 pixel\u016f jako prvn\u00ed, proto\u017ee p\u0159i t\u00e9to velikosti to v\u00edce p\u0159ipom\u00edn\u00e1 malov\u00e1n\u00ed nebo malbu, ale jen s pixely. \u010c\u00edm men\u0161\u00ed sprite, t\u00edm m\u00e9n\u011b se podob\u00e1 tomu, co m\u00e1 zobrazovat, a t\u00edm d\u016fle\u017eit\u011bj\u0161\u00ed ka\u017ed\u00fd pixel.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/ac13676b156c0e357e690e90d4a9bc5d.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nV Super Mario Bros. je Marioho oko tvo\u0159eno pouh\u00fdmi dv\u011bma pixely, kter\u00e9 jsou um\u00edst\u011bny jeden nad druh\u00fd. A jeho ucho tak\u00e9. Tv\u016frce postavy Shigeru Miyamoto \u0159ekl, \u017ee kn\u00edrek byl pot\u0159ebn\u00fd k tomu, aby odd\u011blil nos od zbytku obli\u010deje. Tak\u017ee jeden z hlavn\u00edch rys\u016f M\u00e1riova obli\u010deje je nejen design postavy, ale tak\u00e9 pragmatick\u00fd trik. Co potvrzuje star\u00e9 moudrosti \u2013 \u201epot\u0159eba je matkou vyn\u00e1lezc\u016fm\u201c.<\/p>\n<p>Hlavn\u00ed kroky pro vytvo\u0159en\u00ed sprite 32\u00d732 pixel\u016f u\u017e zn\u00e1me: skica, barva, st\u00edny, dal\u0161\u00ed \u00fapravy. V takov\u00fdch podm\u00ednk\u00e1ch vyb\u00edr\u00e1m jako po\u010d\u00e1te\u010dn\u00ed skicu barevn\u00e9 tvary m\u00edsto kreslen\u00ed obrys\u016f kv\u016fli mal\u00e9 velikosti. Barva hraje d\u016fle\u017eit\u011bj\u0161\u00ed roli p\u0159i ur\u010dov\u00e1n\u00ed postavy ne\u017e obrysy. Pod\u00edvejte se na Maria znovu, nem\u00e1 v\u016fbec \u017e\u00e1dn\u00e9 obrysy. Zaj\u00edmav\u00e9 nejsou jen kn\u00edry. Jeho bacily ur\u010duj\u00ed tvar u\u0161\u00ed, ruk\u00e1vy ukazuj\u00ed pa\u017ee a celkov\u00fd tvar celkem jasn\u011b zobrazuje cel\u00e9 jeho t\u011blo.<\/p>\n<p>Vytv\u00e1\u0159en\u00ed mal\u00fdch sprite\u016f je neust\u00e1l\u00fdm kompromisem. Pokud p\u0159id\u00e1te obrys, m\u016f\u017eete ztratit m\u00edsto pro st\u00edn. Pokud m\u00e1 va\u0161e postava jasn\u011b zobrazen\u00e9 ruce a nohy, hlava by m\u011bla pravd\u011bpodobn\u011b b\u00fdt men\u0161\u00ed. Pokud efektivn\u011b vyu\u017eijete barvu, selektivn\u00ed obrys a vyhlazen\u00ed, vypad\u00e1 nakreslen\u00fd objekt v\u011bt\u0161\u00ed, ne\u017e ve skute\u010dnosti je.<\/p>\n<p>Pro mal\u00e9 spritey se mi l\u00edb\u00ed styl chibi: postavy vypadaj\u00ed velmi roztomile, maj\u00ed velk\u00e9 hlavy a o\u010di. Je to skv\u011bl\u00fd zp\u016fsob, jak vytvo\u0159it \u017eiv\u00e9ho hrdinu v omezen\u00e9m prostoru, a tak\u00e9 velmi p\u0159\u00edjemn\u00fd styl. Ale mo\u017en\u00e1 budete pot\u0159ebovat uk\u00e1zat pohyblivost nebo s\u00edlu postavy, pak m\u016f\u017eete d\u00e1t m\u00e9n\u011b prostoru hlav\u011b, aby t\u011blo vypadalo siln\u011bji. V\u0161echno z\u00e1le\u017e\u00ed na va\u0161ich preferenc\u00edch a c\u00edlech.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/5c32b47afc803e698c9523e183086b9c.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Cel\u00fd t\u00fdm je kompletn\u00ed!<\/i><\/p>\n<h2>Form\u00e1ty soubor\u016f<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed\" src=\"\/wp-content\/uploads\/2019\/12\/c636145341db38f18a33b8c9708c36bf.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Takov\u00fd v\u00fdsledek m\u016f\u017ee nervov\u011b zlomit ka\u017ed\u00e9ho pixelov\u00e9ho um\u011blce.<\/i><\/p>\n<p>Obr\u00e1zek, kter\u00fd vid\u00edte, je v\u00fdsledkem ulo\u017een\u00ed kresby do form\u00e1tu JPG. N\u011bkter\u00e9 \u00fadaje se ztratily kv\u016fli algoritm\u016fm komprese souboru. Kvalitn\u00ed pixelov\u00e9 um\u011bn\u00ed nakonec bude vypadat \u0161patn\u011b, a z\u00edskat zp\u011bt jeho p\u016fvodn\u00ed paletu bude obt\u00ed\u017en\u00e9.<\/p>\n<p>Pro ukl\u00e1d\u00e1n\u00ed statick\u00e9ho obr\u00e1zku bez ztr\u00e1ty kvality pou\u017eijte form\u00e1t PNG. Pro animace \u2014 GIF.<\/p>\n<h2>Jak spr\u00e1vn\u011b sd\u00edlet pixel-art<\/h2>\n<p>\nSd\u00edlen\u00ed pixel-artu na soci\u00e1ln\u00edch s\u00edt\u00edch je skv\u011bl\u00fd zp\u016fsob, jak z\u00edskat zp\u011btnou vazbu a sezn\u00e1mit se s dal\u0161\u00edmi um\u011blci, kte\u0159\u00ed pracuj\u00ed ve stejn\u00e9m stylu. Nezapome\u0148te p\u0159idat hashtag #pixelart. Bohu\u017eel, soci\u00e1ln\u00ed s\u00edt\u011b \u010dasto p\u0159ev\u00e1d\u011bj\u00ed PNG na JPG bez povolen\u00ed, \u010d\u00edm\u017e zhor\u0161uj\u00ed va\u0161i pr\u00e1ci. A nen\u00ed v\u017edy jasn\u00e9, pro\u010d byl v\u00e1\u0161 obr\u00e1zek p\u0159eveden.<\/p>\n<p>Existuje n\u011bkolik rad, jak uchovat pixel-art v po\u017eadovan\u00e9 kvalit\u011b pro r\u016fzn\u00e9 soci\u00e1ln\u00ed s\u00edt\u011b.<\/p>\n<h3>Twitter<\/h3>\n<p>\nAby PNG soubor z\u016fstal nezm\u011bn\u011bn na Twitteru, pou\u017eijte m\u00e9n\u011b ne\u017e 256 barev nebo <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/NolanOBrien\/status\/1199037916019716096\">se ujist\u011bte<\/a><\/noindex>, \u017ee v\u00e1\u0161 soubor je men\u0161\u00ed ne\u017e 900 pixel\u016f na del\u0161\u00ed stran\u011b. Doporu\u010duji zv\u011bt\u0161it velikost souboru alespo\u0148 na 512\u00d7512 pixel\u016f. A to tak, aby m\u011b\u0159\u00edtko bylo n\u00e1sobkem 100 (200 %, nikoliv 250 %) a byly zachov\u00e1ny ostr\u00e9 okraje (Nearest Neighbor v Photoshopu).<\/p>\n<p>Animovan\u00e9 GIF soubory pro p\u0159\u00edsp\u011bvky na Twitteru <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/cyangmou\/status\/989149918534275072?lang=en\">mus\u00ed<\/a><\/noindex> v\u00e1\u017eit maxim\u00e1ln\u011b 15 MB. Obr\u00e1zek by m\u011bl m\u00edt alespo\u0148 800\u00d7800 pixel\u016f, cyklick\u00e1 animace by se m\u011bla opakovat t\u0159ikr\u00e1t a posledn\u00ed sn\u00edmek by m\u011bl trvat polovi\u010dn\u00ed dobu ne\u017e v\u0161echny ostatn\u00ed \u2014 to je nejpopul\u00e1rn\u011bj\u0161\u00ed teorie. Nen\u00ed v\u0161ak jasn\u00e9, jak d\u016fle\u017eit\u00e9 je tyto po\u017eadavky splnit, vzhledem k tomu, \u017ee Twitter neust\u00e1le m\u011bn\u00ed sv\u00e9 algoritmy pro zobrazen\u00ed obr\u00e1zk\u016f.<\/p>\n<h3>Instagram<\/h3>\n<p>\nPokud v\u00edm, nen\u00ed mo\u017en\u00e9 publikovat obr\u00e1zek na Instagramu bez ztr\u00e1ty kvality. Ale ur\u010dit\u011b bude vypadat l\u00e9pe, pokud jej zv\u011bt\u0161\u00edte alespo\u0148 na 512x512 pixel\u016f.<br \/>\n<br \/>Zdroj: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/company\/playgendary\/blog\/482536\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\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 [&hellip;]<\/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<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"\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.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/cs\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"cs_CZ\" \/>\n\t\t<meta property=\"og:site_name\" content=\"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\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\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\" \/>\n\t\t<meta property=\"og:description\" content=\"\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.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/cs\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-12-29T21:00:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2020-02-18T11:02:39+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47Pixel art pro za\u010d\u00e1te\u010dn\u00edky: n\u00e1vod k pou\u017eit\u00ed | ProHoster","description":"Indie v\u00fdvoj\u00e1\u0159i \u010dasto \u010del\u00ed.","canonical_url":"https:\/\/prohoster.info\/cs\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"cs_CZ","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\/cs\/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\/cs\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/cs\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}