{"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\/hu\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/00d172ccd0d834f54c3fa1ffe2f03481.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nAz indie fejleszt\u0151knek gyakran t\u00f6bb szerepet kell bet\u00f6lteni\u00fck: j\u00e1t\u00e9ktervez\u0151t, programoz\u00f3t, zeneszerz\u0151t, m\u0171v\u00e9szt. \u00c9s amikor a vizu\u00e1lis megjelen\u00e9sre ker\u00fcl a sor, sokan a pixelm\u0171v\u00e9szetet v\u00e1lasztj\u00e1k \u2014 els\u0151 pillant\u00e1sra egyszer\u0171nek t\u0171nik. De ahhoz, hogy sz\u00e9p legyen, sok tapasztalat \u00e9s bizonyos k\u00e9szs\u00e9gek sz\u00fcks\u00e9gesek. Tal\u00e1ltam egy oktat\u00f3t annak, aki most kezdi felfedezni ennek a st\u00edlusnak az alapjait: a sz\u00fcks\u00e9ges szoftverek \u00e9s rajzol\u00e1si technik\u00e1k le\u00edr\u00e1s\u00e1val k\u00e9t sprite p\u00e9ld\u00e1j\u00e1n.<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><\/p>\n<h2>H\u00e1tt\u00e9r<\/h2>\n<p>\nA pixelm\u0171v\u00e9szet a digit\u00e1lis m\u0171v\u00e9szet egy form\u00e1ja, amelyben a m\u00f3dos\u00edt\u00e1sokat pixelek szintj\u00e9n v\u00e9gzik. F\u0151k\u00e9nt a 80-as \u00e9s 90-es \u00e9vek vide\u00f3j\u00e1t\u00e9kainak grafik\u00e1j\u00e1val t\u00e1rs\u00edtj\u00e1k. Akkor a m\u0171v\u00e9szeknek figyelembe kellett venni\u00fck a mem\u00f3ria- \u00e9s alacsony felbont\u00e1s korl\u00e1tait. Ma a pixelm\u0171v\u00e9szet tov\u00e1bbra is n\u00e9pszer\u0171 a j\u00e1t\u00e9kokban \u00e9s mint m\u0171v\u00e9szeti st\u00edlus, annak ellen\u00e9re, hogy lehet\u0151s\u00e9g van a val\u00f3s\u00e1gh\u0171 3D grafika k\u00e9sz\u00edt\u00e9s\u00e9re. Mi\u00e9rt? M\u00e9g ha nem is vessz\u00fck figyelembe a nosztalgi\u00e1t, egy remek munka elk\u00e9sz\u00edt\u00e9se ilyen szigor\u00fa keretek k\u00f6z\u00f6tt kellemes \u00e9s meg\u00e9rdemelt kih\u00edv\u00e1s.<\/p>\n<p>A pixelm\u0171v\u00e9szethez val\u00f3 bel\u00e9p\u00e9s neh\u00e9zs\u00e9gi k\u00fcsz\u00f6be viszonylag alacsony a hagyom\u00e1nyos m\u0171v\u00e9szethez \u00e9s a 3D grafika vil\u00e1g\u00e1hoz k\u00e9pest, ami vonz\u00f3v\u00e1 teszi az indie fejleszt\u0151k sz\u00e1m\u00e1ra. De ez egy\u00e1ltal\u00e1n nem jelenti azt, hogy egyszer\u0171 lesz <b>befejezni<\/b> a j\u00e1t\u00e9kot ebben a st\u00edlusban. L\u00e1ttam sok indie fejleszt\u0151t pixelm\u0171v\u00e9szetet haszn\u00e1l\u00f3 metroidvani\u00e1kkal a k\u00f6z\u00f6ss\u00e9gi finansz\u00edroz\u00e1si platformokon. \u00dagy gondolt\u00e1k, mindent megtudnak csin\u00e1lni egy \u00e9v alatt, de val\u00f3j\u00e1ban m\u00e9g hat \u00e9vre volt sz\u00fcks\u00e9g\u00fck. <\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/67c754a18d7483e700e801beec5f2ebc.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Metal Slug 3 (Ark\u00e1da). SNK, 2000<\/i><\/p>\n<p>A pixelm\u0171v\u00e9szet azon a szinten, amelyen a legt\u00f6bben szeretn\u00e9k k\u00e9sz\u00edteni, sok id\u0151t ig\u00e9nyel, \u00e9s nagyon kev\u00e9s a r\u00f6vid oktat\u00f3anyag. 3D modellel dolgozva forgathatja, deform\u00e1lhatja, mozgatja a r\u00e9szeit, m\u00e1s modellekb\u0151l m\u00e1solhat anim\u00e1ci\u00f3kat, stb. A magas szint\u0171 pixelm\u0171v\u00e9szet szinte mindig rengeteg energi\u00e1t em\u00e9szt fel a pixelek gondos elhelyez\u00e9s\u00e9re minden egyes k\u00e9pkock\u00e1n.<\/p>\n<p>\u00d6sszess\u00e9g\u00e9ben figyelmeztettem.<\/p>\n<p>Most m\u00e1r egy kicsit a st\u00edlusomr\u00f3l: f\u0151k\u00e9nt pixel-artot rajzolok vide\u00f3j\u00e1t\u00e9kokhoz, \u00e9s ebb\u0151l mer\u00edtek inspir\u00e1ci\u00f3t. K\u00fcl\u00f6n\u00f6sen nagy rajong\u00f3ja vagyok a Famicom\/NES-nek, a 16 bites konzoloknak \u00e9s a 90-es \u00e9vek arcade j\u00e1t\u00e9kainak. Az akkori kedvenc j\u00e1t\u00e9kaim pixel-artj\u00e1t \u00e9l\u00e9nknek, hat\u00e1rozottan \u00e9s tiszt\u00e1n lehet le\u00edrni (de nem t\u00falzottan), nem nevezhet\u0151 kem\u00e9nynek vagy minimalista st\u00edlus\u00fanak. Ebben a st\u00edlusban dolgozom, de az ebb\u0151l a tutorialb\u00f3l sz\u00e1rmaz\u00f3 \u00f6tleteket \u00e9s technik\u00e1kat k\u00f6nnyen alkalmazhatod teljesen m\u00e1s dolgok l\u00e9trehoz\u00e1s\u00e1ra is. Tanulm\u00e1nyozd k\u00fcl\u00f6nb\u00f6z\u0151 m\u0171v\u00e9szek munk\u00e1it, \u00e9s k\u00e9sz\u00edts pixel-artot, ami neked tetszik!<\/p>\n<h2>Szoftver<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/5dc5fa7ebabd2a31b1375cdfc9437b66.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nAlapvet\u0151 digit\u00e1lis eszk\u00f6z\u00f6k pixel-arthoz \u2014 Zoom (Zoom) \u00e9s Ceruza (Pencil), hogy elhelyezhesd a pixeleket. Haszn\u00e1lni fogod a vonalat (Line), az alakzatot (Shape), a kijel\u00f6l\u00e9st (Select), a mozgat\u00e1st (Move) \u00e9s a fest\u00e9ket (Paint Bucket) is. Sok ingyenes \u00e9s fizet\u0151s szoftver l\u00e9tezik egy ilyen eszk\u00f6zk\u00e9szlettel. \u00c9n a legn\u00e9pszer\u0171bbeket mutatom be, valamint azokat, amelyeket magam is haszn\u00e1lok.<\/p>\n<h3>Paint (ingyenes)<\/h3>\n<p>\nHa Windowsod van, a be\u00e9p\u00edtett Paint egy primit\u00edv program, de minden sz\u00fcks\u00e9ges eszk\u00f6zt megad a pixel-arthoz.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.piskelapp.com\/\">Piskel<\/a><\/noindex> (ingyenes)<\/h3>\n<p>\nMeglepet\u00e9sre funkcion\u00e1lis pixel-art szerkeszt\u0151, amely b\u00f6ng\u00e9sz\u0151b\u0151l ind\u00edthat\u00f3. A munk\u00e1d export\u00e1lhat\u00f3 PNG vagy anim\u00e1lt GIF form\u00e1tumban. Nagyszer\u0171 v\u00e1laszt\u00e1s kezd\u0151knek.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/graphicsgale.com\/us\/\">GraphicsGale<\/a><\/noindex> (ingyenes)<\/h3>\n<p>\nA GraphicsGale az egyetlen szerkeszt\u0151, amelyr\u0151l hallottam, kifejezetten pixel-arthoz k\u00e9sz\u00fclt, \u00e9s anim\u00e1ci\u00f3s eszk\u00f6z\u00f6ket is tartalmaz. A HUMANBALANCE nev\u0171 jap\u00e1n c\u00e9g fejlesztette ki. 2017 \u00f3ta ingyenesen terjesztik, \u00e9s tov\u00e1bbra is n\u00e9pszer\u0171, annak ellen\u00e9re, hogy az Aseprite n\u00e9pszer\u0171s\u00e9ge n\u0151tt. Sajnos csak Windows-on m\u0171k\u00f6dik.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/\">Aseprite<\/a><\/noindex> ($)<\/h3>\n<p>\nTal\u00e1n a legn\u00e9pszer\u0171bb szerkeszt\u0151 jelenleg. <noindex><a rel=\"nofollow\" href=\"https:\/\/www.aseprite.org\/faq\/#if-aseprite-source-code-is-available-how-is-that-you-are-selling-it\">Ny\u00edlt forr\u00e1sk\u00f3d<\/a><\/noindex>, rengeteg lehet\u0151s\u00e9g, akt\u00edv t\u00e1mogat\u00e1s, Windows, Mac \u00e9s Linux verzi\u00f3k. Ha komolyan veszed a pixel-artot, \u00e9s m\u00e9g nem tal\u00e1ltad meg a megfelel\u0151 szerkeszt\u0151t, lehet, hogy ez az, amire sz\u00fcks\u00e9ged van.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.yoyogames.com\/get\">GameMaker Studio 2<\/a><\/noindex> ($$+)<\/h3>\n<p>\nA GameMaker Studio 2 kiv\u00e1l\u00f3 2D-es eszk\u00f6z, j\u00f3 sprite szerkeszt\u0151vel (Sprite Editor). Ha pixel-artot szeretn\u00e9l k\u00e9sz\u00edteni a saj\u00e1t j\u00e1t\u00e9kaidhoz, nagyon k\u00e9nyelmes mindent egy programban megoldani. Jelenleg ezt a szoftvert haszn\u00e1lom a <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>, egy 50 retro j\u00e1t\u00e9kb\u00f3l \u00e1ll\u00f3 gy\u0171jtem\u00e9nyen: a sprite-okat \u00e9s anim\u00e1ci\u00f3kat a GameMakerben k\u00e9sz\u00edtem, m\u00edg a tileset-eket Photoshopban.<\/p>\n<h3><noindex><a rel=\"nofollow\" href=\"https:\/\/www.photoshop.com\/\">Photoshop<\/a><\/noindex> ($$$+)<\/h3>\n<p>\nA Photoshop egy dr\u00e1ga szoftver, amelyet el\u0151fizet\u00e9ssel lehet haszn\u00e1lni, \u00e9s nem kifejezetten pixel-art k\u00e9sz\u00edt\u00e9s\u00e9re k\u00e9sz\u00fclt. Nem aj\u00e1nlom megv\u00e1s\u00e1rolni, ha nem illusztr\u00e1ci\u00f3kat k\u00e9sz\u00edtesz magas felbont\u00e1sban, vagy ha nem sz\u00fcks\u00e9ges bonyolult k\u00e9pm\u00f3dos\u00edt\u00e1sokat v\u00e9gezni, mint ahogy \u00e9n szoktam. Statikus sprite-okat \u00e9s pixelmunk\u00e1kat l\u00e9trehozni lehet benne, de viszonylag bonyolultabb a szakosodott szoftverekhez (p\u00e9ld\u00e1ul a GraphicsGale vagy az Aseprite) k\u00e9pest.<\/p>\n<h2>Egy\u00e9b<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/e810f041b931c304b6b65f9895a9f325.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Az \u00e9n pixel-art k\u00e9szletem. Minden fekete, csak most vettem \u00e9szre.<\/i><\/p>\n<h3>Grafikus tablet ($$+)<\/h3>\n<p>\nAj\u00e1nlom a grafikus tableteket b\u00e1rmilyen digit\u00e1lis illusztr\u00e1ci\u00f3s munk\u00e1hoz, hogy elker\u00fcld a karpaltunnel szindr\u00f3m\u00e1t. Sokkal k\u00f6nnyebb megel\u0151zni, mint kezelni. Ha egyszer f\u00e1jdalmat \u00e9rzel, az csak fokoz\u00f3dni fog \u2014 vigy\u00e1zz magadra az elej\u00e9n. Mivel valaha eg\u00e9rrel rajzoltam, most nehezen tudok olyan j\u00e1t\u00e9kokkal j\u00e1tszani, amelyekben gombokat kell nyomni. Jelenleg Wacom Intuos Pro S-t haszn\u00e1lok.<\/p>\n<h3>Csukl\u00f3t\u00e1masz ($)<\/h3>\n<p>\nHa nem tudsz tabletet v\u00e1s\u00e1rolni, legal\u00e1bb egy csukl\u00f3t\u00e1maszt v\u00e1s\u00e1rolj. Nekem a Mueller Green Fitted Wrist Brace tetszik a legjobban. A t\u00f6bbiek vagy t\u00fal szorosak, vagy nem ny\u00fajtanak elegend\u0151 t\u00e1maszt. A t\u00e1maszokat k\u00f6nnyen rendelheted online.<\/p>\n<h2>96\u00d796 pixel<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" 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>Kezdj\u00fck! Kezdj\u00fck a 96\u00d796 pixel m\u00e9ret\u0171 karakter sprite-tal. P\u00e9ldak\u00e9nt rajzoltam egy ork\u00e1t, \u00e9s elhelyeztem egy k\u00e9perny\u0151k\u00e9pen a Final Fight-b\u00f3l (a fenti k\u00e9pen), hogy \u00e9rtsd a m\u00e9retet. Ez <b>nagy<\/b> sprite a legt\u00f6bb retro j\u00e1t\u00e9khoz, a k\u00e9perny\u0151k\u00e9p m\u00e9rete: 384\u00d7224 pixel.<\/p>\n<p>Ekkora sprite-n\u00e1l k\u00f6nnyebb bemutatni azokat a technik\u00e1kat, amelyeket szeretn\u00e9k megosztani. A pixelalap\u00fa rajzol\u00e1s jobban hasonl\u00edt a hagyom\u00e1nyos m\u0171v\u00e9szeti form\u00e1khoz (p\u00e9ld\u00e1ul a rajzol\u00e1shoz vagy a fest\u00e9shez), amellyel val\u00f3sz\u00edn\u0171leg jobban ismer\u0151s vagy. A alapvet\u0151 technik\u00e1k elsaj\u00e1t\u00edt\u00e1sa ut\u00e1n \u00e1tt\u00e9r\u00fcnk a kisebb sprite-okra.<\/p>\n<h2>1. V\u00e1lasszunk palett\u00e1t<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/f99208134b3f107fcdf3f14b8c2216b8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nA pixel sokkal m\u00e9lyebb fogalom a pixel-artban, mint b\u00e1rmely m\u00e1s digit\u00e1lis ter\u00fcleten. A pixel-art a korl\u00e1toz\u00e1sai, p\u00e9ld\u00e1ul a sz\u00ednek \u00e1ltal van meghat\u00e1rozva. Fontos a paletta helyes kiv\u00e1laszt\u00e1sa, ez seg\u00edt meghat\u00e1rozni a st\u00edlusodat. De a kezdetekben azt javaslom, hogy ne gondolj a palett\u00e1kra, \u00e9s v\u00e1lassz egy megl\u00e9v\u0151t (vagy egyszer\u0171en n\u00e9h\u00e1ny v\u00e9letlenszer\u0171 sz\u00ednt) \u2014 az b\u00e1rmikor k\u00f6nnyed\u00e9n megv\u00e1ltoztathat\u00f3.<\/p>\n<p>Ehhez a oktat\u00f3anyaghoz egy 32 sz\u00ednb\u0151l \u00e1ll\u00f3 palett\u00e1t fogok haszn\u00e1lni, amelyet mi k\u00e9sz\u00edtett\u00fcnk a <noindex><a rel=\"nofollow\" href=\"https:\/\/50games.fun\/\">UFO 50<\/a><\/noindex>. A pixelm\u0171v\u00e9szethez gyakran 32 vagy 16 sz\u00ednb\u0151l \u00e1ll\u00f3 palett\u00e1kat gy\u0171jtenek. A mi\u00e9nk egy fikt\u00edv konzolhoz k\u00e9sz\u00fclt, amely valahol a Famicom \u00e9s a PC Engine k\u00f6z\u00f6tt l\u00e9tezhetett volna. Haszn\u00e1lhatja ezt vagy b\u00e1rmely m\u00e1s palett\u00e1t \u2014 az oktat\u00f3anyag teljesen f\u00fcggetlen a v\u00e1lasztott palett\u00e1t\u00f3l.<\/p>\n<h2>2. Durva kont\u00farok<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/e8ead988dfafeae4b220ff3dc39093e6.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nKezdj\u00fck a rajzol\u00e1st a Ceruza eszk\u00f6zzel. K\u00e9sz\u00edts\u00fcnk egy v\u00e1zlatot, ahogy azt a hagyom\u00e1nyos tollal \u00e9s pap\u00edrral tenn\u00e9nk. Term\u00e9szetesen a pixelm\u0171v\u00e9szet \u00e9s a hagyom\u00e1nyos m\u0171v\u00e9szet \u00e1tfed\u00e9seket mutat, k\u00fcl\u00f6n\u00f6sen ha nagyobb sprite-okr\u00f3l van sz\u00f3. Tapasztalataim szerint a tehets\u00e9ges pixelm\u0171v\u00e9szek legal\u00e1bb annyira j\u00f3l rajzolnak k\u00e9zzel, \u00e9s ford\u00edtva. Teh\u00e1t a rajzol\u00e1si k\u00e9szs\u00e9gek fejleszt\u00e9se mindig hasznos.<\/p>\n<h2>3. Kont\u00farok kidolgoz\u00e1sa<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/738dde231295a317d5461b4055e2be61.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nFinom\u00edtsuk a kont\u00farokat: t\u00e1vol\u00edtsuk el a felesleges pixeleket, \u00e9s cs\u00f6kkents\u00fck a vonalak vastags\u00e1g\u00e1t egy pixelre. De mi sz\u00e1m\u00edt feleslegesnek? Ehhez meg kell \u00e9rten\u00fcnk a pixelvonalakat \u00e9s a g\u00f6rb\u00fcleteket.<\/p>\n<h3>G\u00f6rb\u00fcletek<\/h3>\n<p>\nMeg kell tanulni k\u00e9t alapvet\u0151 vonalat rajzolni pixelm\u0171v\u00e9szetben: egyenes \u00e9s g\u00f6rbe vonalakat. Tollal \u00e9s pap\u00edrral minden az izomkontrollr\u00f3l sz\u00f3l, de mi apr\u00f3, sz\u00ednes blokkokkal dolgozunk.<\/p>\n<p>A helyes pixelvonalak rajzol\u00e1s\u00e1nak kulcsa a g\u00f6rb\u00fcletek. Ezek egyes pixelek vagy kis szegmensek, amelyek megszak\u00edtj\u00e1k a vonal simas\u00e1g\u00e1t. Ahogy m\u00e1r eml\u00edtettem, egyetlen pixel hatalmas jelent\u0151s\u00e9ggel b\u00edr a pixelm\u0171v\u00e9szetben, ez\u00e9rt a g\u00f6rb\u00fcletek t\u00f6nkretehetik az eg\u00e9sz eszt\u00e9tik\u00e1t. K\u00e9pzelje el, hogy egy egyenes vonalat h\u00faz a pap\u00edrra, \u00e9s hirtelen valaki meg\u00fcti az asztalt: a pixelm\u0171v\u00e9szetben a g\u00f6rb\u00fcletek \u00fagy n\u00e9znek ki, mint egy v\u00e9letlen firka.<\/p>\n<p>P\u00e9ld\u00e1k:<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/8d873c547fa1fc638d524877599d1788.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Egyenesek<\/i><\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/0516dfef0ffc74335de791e16708b90f.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>G\u00f6rb\u00e9k<\/i><\/p>\n<p>A g\u00f6rb\u00fcletek akkor jelennek meg, amikor a vonal szegmenseinek hossza fokozatosan cs\u00f6kken vagy n\u0151.<\/p>\n<p>A g\u00f6rb\u00fcletek elker\u00fcl\u00e9se lehetetlen \u2014 minden kedvenc retro j\u00e1t\u00e9k\u00e1ban megtal\u00e1lhat\u00f3ak (ha persze a pixelm\u0171v\u00e9szet nem kiz\u00e1r\u00f3lag egyszer\u0171 form\u00e1kb\u00f3l \u00e1ll). A c\u00e9l: minimaliz\u00e1lni a g\u00f6rb\u00fcleteket, mik\u00f6zben minden sz\u00fcks\u00e9geset bemutatunk.<\/p>\n<h2>4. Az els\u0151 sz\u00ednek alkalmaz\u00e1sa<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/b8b937d95667cff41f1060a77e715acb.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nSz\u00ednezd ki a figur\u00e1dat kit\u00f6lt\u00e9ssel vagy m\u00e1s megfelel\u0151 eszk\u00f6zzel. A paletta megk\u00f6nny\u00edti ezt a r\u00e9szt. Ha a szoftver nem t\u00e1mogatja a palett\u00e1k haszn\u00e1lat\u00e1t, akkor az k\u00e9pet k\u00f6zvetlen\u00fcl beillesztheted, ahogy az a fenti p\u00e9ld\u00e1ban l\u00e1that\u00f3, \u00e9s a pipetta seg\u00edts\u00e9g\u00e9vel v\u00e1laszthatod ki a sz\u00edneket.<\/p>\n<p>A bal als\u00f3 sarokban megrajzoltam a bar\u00e1tunkat, ismerkedjetek meg vele, \u0151 \u2014 Shar. Rajta kereszt\u00fcl k\u00f6nnyebb meg\u00e9rteni, mi t\u00f6rt\u00e9nik minden egyes l\u00e9p\u00e9sn\u00e9l.<\/p>\n<h2>5. \u00c1rny\u00e9kol\u00e1s<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/2e0793f9ded395337e4da9ede215b9d8.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nItt az ideje, hogy megjelen\u00edts\u00fck az \u00e1rny\u00e9kokat \u2014 egyszer\u0171en s\u00f6t\u00e9tebb sz\u00edneket adunk a sprite-hoz. \u00cdgy a k\u00e9p t\u00e9rbeli hat\u00e1s\u00fa lesz. Tegy\u00fck fel, hogy egy f\u00e9nyforr\u00e1sunk van, amely az ork felett balra tal\u00e1lhat\u00f3. Ez\u00e9rt minden, ami a figura f\u00f6l\u00f6tt \u00e9s el\u0151l helyezkedik el, vil\u00e1g\u00edtva lesz. Adjunk \u00e1rny\u00e9kokat alul jobbra.<\/p>\n<h3>Forma \u00e9s t\u00e9rfogat<\/h3>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/1994fcb30789e1601bcae8ce1a50d5e7.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nHa ez a l\u00e9p\u00e9s neh\u00e9zs\u00e9get okoz, k\u00e9pzeld el a rajzodat t\u00e9rbeli form\u00e1kk\u00e9nt, \u00e9s ne csup\u00e1n vonalak \u00e9s sz\u00ednek halmazak\u00e9nt. A form\u00e1k h\u00e1romdimenzi\u00f3s t\u00e9rben l\u00e9teznek, \u00e9s rendelkezhetnek t\u00e9rfogattal, amelyet \u00e1rny\u00e9kok seg\u00edts\u00e9g\u00e9vel alak\u00edtunk ki. Ez seg\u00edt vizualiz\u00e1lni a karaktert r\u00e9szletek n\u00e9lk\u00fcl \u00e9s elk\u00e9pzelni, hogy az agyagb\u00f3l k\u00e9sz\u00fclt, nem pedig pixelekb\u0151l. Az \u00e1rny\u00e9kol\u00e1s nem csup\u00e1n \u00faj sz\u00ednek hozz\u00e1ad\u00e1sa, hanem a forma kialak\u00edt\u00e1s\u00e1nak folyamata. Egy j\u00f3l kidolgozott karakteren a r\u00e9szletek nem takarj\u00e1k el az alapvet\u0151 form\u00e1kat: ha hunyor\u00edtasz, t\u00f6bb nagyobb f\u00e9ny- \u00e9s \u00e1rny\u00e9kk\u00f6z\u00e9ppontot l\u00e1thatsz. <\/p>\n<h3>Sim\u00edt\u00e1s (anti-aliasing, antialiasing)<\/h3>\n<p>\nMinden alkalommal, amikor \u00faj sz\u00ednt haszn\u00e1lok, alkalmazom az antialiasingot (AA). Ez seg\u00edt sim\u00edtani a pixeleket, k\u00f6zbens\u0151 sz\u00ednek hozz\u00e1ad\u00e1s\u00e1val a vonal k\u00e9t szegmense \u00e9rintkez\u00e9s\u00e9nek sarkain\u00e1l:<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/9fc0ab09f076b1de252038c899ada201.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nA sz\u00fcrke pixelek enyh\u00edtik a vonal \"t\u00f6r\u00e9seit\". Min\u00e9l hosszabb a vonalszegmens, ann\u00e1l hosszabb az AA-szegmens.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/262533d7923415430375d84f58a9d7fa.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>\u00cdgy n\u00e9z ki az AA az ork v\u00e1ll\u00e1n. Erre van sz\u00fcks\u00e9ge, hogy sim\u00edtsa a vonalakat, amelyek az izmai \u00edv\u00e9t \u00e1br\u00e1zolj\u00e1k.<\/i><\/p>\n<p>A sim\u00edt\u00e1s nem l\u00e9pheti t\u00fal azt a sprite-ot, amelyet a j\u00e1t\u00e9kban vagy h\u00e1tt\u00e9rben haszn\u00e1lnak, aminek a sz\u00edne ismeretlen. P\u00e9ld\u00e1ul, ha AA-t alkalmazol vil\u00e1gos h\u00e1tt\u00e9rre, s\u00f6t\u00e9t h\u00e1tt\u00e9r eset\u00e9n a sim\u00edt\u00e1s cs\u00fany\u00e1n n\u00e9z ki.<\/p>\n<h2>6. Kiv\u00e1lasztott k\u00f6rvonal<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/32574a815ea81137a948f0a18217c8db.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nKor\u00e1bban a k\u00f6rvonalak teljesen feket\u00e9k voltak, ami miatt a sprite nagyon mesebeli hat\u00e1st keltett. A k\u00e9p mintha szegmensekre lett volna bontva. P\u00e9ld\u00e1ul a karon l\u00e9v\u0151 fekete vonalak t\u00fal kontrasztosan \u00e1br\u00e1zolj\u00e1k az izmokat, \u00e9s a karakter kev\u00e9sb\u00e9 t\u0171nik egys\u00e9gesnek.<\/p>\n<p>Ha a spr\u00e1jt term\u00e9szetesebb lesz, \u00e9s a szegment\u00e1l\u00e1s nem lesz olyan nyilv\u00e1nval\u00f3, akkor a karakter alapvet\u0151 form\u00e1i k\u00f6nnyebben olvashat\u00f3ak lesznek. Ehhez haszn\u00e1lhatunk szelekt\u00edv kont\u00fart \u2014 a fekete kont\u00far r\u00e9szben vil\u00e1gosabbal helyettes\u00edthet\u0151. A spr\u00e1jt vil\u00e1gos r\u00e9sz\u00e9n a legvil\u00e1gosabb sz\u00edneket haszn\u00e1lhatjuk, vagy ott, ahol a spr\u00e1jt a negat\u00edv t\u00e9rrel \u00e9rinti, teljesen elt\u00fcntethetj\u00fck a kont\u00fart. A fekete helyett olyan sz\u00ednt kell haszn\u00e1lni, ami a \u00e1rny\u00e9knak lett kiv\u00e1lasztva \u2014 \u00edgy megmarad a szegment\u00e1l\u00e1s (az izmok, sz\u0151rzet \u00e9s hasonl\u00f3k hat\u00e1rvonalainak megk\u00fcl\u00f6nb\u00f6ztet\u00e9s\u00e9re).<\/p>\n<p>Ezen a ponton s\u00f6t\u00e9tebb \u00e1rny\u00e9kokat is hozz\u00e1adtam. H\u00e1rom k\u00fcl\u00f6nb\u00f6z\u0151 z\u00f6ld \u00e1rnyalatot haszn\u00e1ltunk az ork b\u0151r\u00e9n. A legs\u00f6t\u00e9tebb z\u00f6ld sz\u00ednt a szelekt\u00edv kont\u00farhoz \u00e9s AA-hoz haszn\u00e1lhatjuk.<\/p>\n<h2>7. V\u00e9gs\u0151 sim\u00edt\u00e1sok<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/196f80b3ed3928d4c1ac7b9b99782fa1.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nA v\u00e9g\u00e9n \u00e9rdemes csillog\u00e1sokat (a spr\u00e1jton a legvil\u00e1gosabb foltok), r\u00e9szleteket (f\u00fclbeval\u00f3k, szegecsek, hegek) \u00e9s egy\u00e9b jav\u00edt\u00e1sokat hozz\u00e1adni, am\u00edg a karakter k\u00e9sz nem lesz, vagy am\u00edg nem kell a k\u00f6vetkez\u0151re \u00e1tt\u00e9rni.<\/p>\n<p>Ez a szakasz t\u00f6bb hasznos tr\u00fckk\u00f6t is alkalmazhat. Ford\u00edtsuk el a k\u00e9pet v\u00edzszintesen, ez gyakran seg\u00edt felt\u00e1rni a ar\u00e1ny- \u00e9s \u00e1rny\u00e9kol\u00e1si hib\u00e1kat. A sz\u00ednt is elt\u00fcntethetj\u00fck \u2014 \u00e1ll\u00edtsuk a tel\u00edtetts\u00e9get null\u00e1ra, hogy l\u00e1ssuk, hol kell megv\u00e1ltoztatni az \u00e1rny\u00e9kokat.<\/p>\n<h3>Zaj l\u00e9trehoz\u00e1sa (dithering)<\/h3>\n<p>\nEddig alapvet\u0151en nagy, t\u00f6m\u00f6r \u00e1rny\u00e9kter\u00fcleteket alkalmaztunk. De l\u00e9tezik egy m\u00e1sik technika is \u2014 a dithering, amely lehet\u0151v\u00e9 teszi az egyik sz\u00ednr\u0151l a m\u00e1sikra val\u00f3 \u00e1tt\u00e9r\u00e9st an\u00e9lk\u00fcl, hogy harmadik sz\u00ednt adunk hozz\u00e1. N\u00e9zze meg az al\u00e1bbi p\u00e9ld\u00e1t.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/85c2482ab6f83e0eb972d31d50ff0a2e.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nA fels\u0151 \u00e1rnyalat a s\u00f6t\u00e9tb\u0151l vil\u00e1gosra haszn\u00e1lja a k\u00e9k sz\u00ednek sz\u00e1zait. <\/p>\n<p>A k\u00f6z\u00e9ps\u0151 \u00e1rnyalat mind\u00f6ssze kilenc sz\u00ednt haszn\u00e1l, de m\u00e9g mindig t\u00fals\u00e1gosan sok ugyanannak a sz\u00ednnek az \u00e1rnyalat\u00e1t tartalmazza. Fell\u00e9p a banding, ami miatt a vastag egys\u00e9ges cs\u00edkok miatt a szem a sz\u00ednek tal\u00e1lkoz\u00e1si pontjaira \u00f6sszpontos\u00edt a sz\u00ednek helyett.<\/p>\n<p>Az als\u00f3 \u00e1rnyalaton ditheringet alkalmaztunk, amely lehet\u0151v\u00e9 teszi a banding elker\u00fcl\u00e9s\u00e9t, \u00e9s mind\u00f6ssze k\u00e9t sz\u00ednt haszn\u00e1l. K\u00fcl\u00f6nb\u00f6z\u0151 intenzit\u00e1s\u00fa zajt hozunk l\u00e9tre, hogy imit\u00e1ljuk a sz\u00edn\u00e1tmenetet. Ez a technika nagyon hasonl\u00edt a halftone-ra, amely nyomtat\u00e1sn\u00e1l alkalmazhat\u00f3; valamint a stippling-ra is \u2014 amelyet illusztr\u00e1ci\u00f3kn\u00e1l \u00e9s k\u00e9preg\u00e9nyekn\u00e9l haszn\u00e1lnak.<\/p>\n<p>Az orkn\u00e1l nagyon keveset alkalmaztam a diszkr\u00e9t sz\u0171r\u00e9st a text\u00fara \u00e1tad\u00e1s\u00e1hoz. N\u00e9h\u00e1ny pixelm\u0171v\u00e9sz egy\u00e1ltal\u00e1n nem haszn\u00e1lja, m\u00e1sok viszont nem haboznak, \u00e9s nagyon \u00fcgyesen alkalmazz\u00e1k. Szerintem a diszkr\u00e9t sz\u0171r\u00e9s legjobban a nagy, egy sz\u00ednnel kit\u00f6lt\u00f6tt ter\u00fcleteken n\u00e9z ki (figyelj az \u00e9gre a kor\u00e1bban bemutatott Metal Slug k\u00e9pen), vagy azokon a ter\u00fcleteken, amelyeknek durv\u00e1nak \u00e9s egyenetlennek kell kin\u00e9zni\u00fck (p\u00e9ld\u00e1ul a s\u00e1r). D\u00f6nts el, hogyan haszn\u00e1lod.<\/p>\n<p>Ha szeretn\u00e9l egy p\u00e9ld\u00e1t l\u00e1tni a nagyszab\u00e1s\u00fa \u00e9s min\u0151s\u00e9gi diszkr\u00e9t sz\u0171r\u00e9sre, tanulm\u00e1nyozd a The Bitmap Brothers j\u00e1t\u00e9kait, a brit st\u00fadi\u00f3b\u00f3l az 80-as \u00e9vekb\u0151l, vagy a PC-98-ra k\u00e9sz\u00fclt j\u00e1t\u00e9kokat. Csak vedd figyelembe, hogy mindegyik NSFW.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/25efcc37096d23b0da636b7f04b17e40.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Kakyusei (PC-98). Elf, 1996.<br \/>\nEzen a k\u00e9pen mind\u00f6ssze 16 sz\u00edn van!<\/i><\/p>\n<h2>8. Utols\u00f3 pillant\u00e1s<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/e1cccd845e1bffa32b26fccc011b6560.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nA pixel-art egyik vesz\u00e9lye, hogy k\u00f6nny\u0171nek \u00e9s egyszer\u0171nek t\u0171nik (a fel\u00e9p\u00edt\u00e9se \u00e9s a st\u00edlus korl\u00e1tai miatt). De v\u00e9g\u00fcl rengeteg id\u0151t fogsz elt\u00f6lteni a sprite-jaid finom\u00edt\u00e1s\u00e1val. Olyan, mint egy rejtv\u00e9ny, amelyet meg kell oldani \u2013 ez\u00e9rt vonzza a pixel-m\u0171v\u00e9szet a perfekcionist\u00e1kat. Ne feledd, hogy egy sprite-nak nem szabad t\u00fal sok id\u0151t elvennie \u2013 ez csup\u00e1n egy apr\u00f3 darabja egy rendk\u00edv\u00fcl bonyolult, darabokb\u00f3l \u00e1ll\u00f3 \u00f6sszegy\u0171jt\u00e9snek. Fontos, hogy ne vesz\u00edtsd el a teljes k\u00e9p l\u00e1t\u00e1s\u00e1t.<\/p>\n<p>M\u00e9g ha a pixel-artod nem is j\u00e1t\u00e9kokhoz k\u00e9sz\u00fclt, n\u00e9ha \u00e9rdemes azt mondani magadnak: \"Minden el\u00e9g j\u00f3l n\u00e9z ki!\" \u00c9s tov\u00e1bbl\u00e9pni. A legjobb m\u00f3dja a k\u00e9szs\u00e9gek fejleszt\u00e9s\u00e9nek, ha min\u00e9l t\u00f6bbsz\u00f6r v\u00e9gigj\u00e1rsz az eg\u00e9sz folyamaton, kezdett\u0151l a v\u00e9g\u00e9ig, min\u00e9l t\u00f6bb t\u00e9m\u00e1t haszn\u00e1lva. <\/p>\n<p>\u00c9s n\u00e9ha hasznos kis id\u0151re f\u00e9lretenni a sprite-ot, hogy k\u00e9s\u0151bb friss szemmel n\u00e9zhesd meg. <\/p>\n<h2>32\u00d732 pixel<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/6a4441d7b2cfa580454f6d6b64b7644b.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nEgy nagy 96\u00d796 pixel m\u00e9ret\u0171 sprite-ot k\u00e9sz\u00edtett\u00fcnk el\u0151sz\u00f6r, mert ebben a m\u00e9retben ez ink\u00e1bb hasonl\u00edt a rajzol\u00e1sra vagy fest\u00e9sre, de csak pixel form\u00e1j\u00e1ban. Min\u00e9l kisebb a sprite, ann\u00e1l kev\u00e9sb\u00e9 hasonl\u00edt arra, amit meg kellene jelen\u00edtenie, \u00e9s ann\u00e1l fontosabb\u00e1 v\u00e1lik minden egyes pixel.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/ac13676b156c0e357e690e90d4a9bc5d.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<br \/>\nA Super Mario Bros.-ban Mario szeme mind\u00f6ssze k\u00e9t pixelb\u0151l \u00e1ll, egy a m\u00e1sik f\u00f6l\u00f6tt. \u00c9s a f\u00fcle is. A karakter megalkot\u00f3ja, Shigeru Miyamoto azt mondta, hogy a bajuszra az\u00e9rt volt sz\u00fcks\u00e9g, hogy elv\u00e1lassza az orr\u00e1t a t\u00f6bbi arct\u00f3l. Teh\u00e1t Mario arca egyik f\u0151 jellemz\u0151je nem csup\u00e1n a karakter designja, hanem egy praktikus tr\u00fckk is. Ami meger\u0151s\u00edti a r\u00e9gi b\u00f6lcsess\u00e9get - \"a sz\u00fcks\u00e9g a tal\u00e1l\u00e9konys\u00e1g anyja\".<\/p>\n<p>A sprite of 32\u00d732 pixels already consists of familiar stages: sketch, color, shadows, and further refinement. However, in such cases, I choose colored shapes as the initial sketch instead of outlining due to the small size. Color plays a more significant role in defining a character than outlines do. Take another look at Mario; he has no outlines at all. It's not just the mustache that's interesting; his sideburns define the shape of his ears, his sleeves indicate his arms, and the overall shape fairly clearly represents his entire body.<\/p>\n<p>Creating small sprites involves constant compromises. If you add an outline, you might lose space for shading. If your character's arms and legs are clearly visible, the head usually has to be relatively small. If you use color effectively, selective outlining, and anti-aliasing, the drawn object will appear larger than it actually is.<\/p>\n<p>For small sprites, I enjoy the chibi style: characters look very cute, with large heads and eyes. It's a great way to create a vibrant hero in limited space, and overall, it's a very pleasant style. However, if you need to showcase the character's agility or strength, you might want to dedicate less space to the head for the body to appear more powerful. It all depends on your preferences and goals.<\/p>\n<p><img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/5c32b47afc803e698c9523e183086b9c.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>The whole team is assembled!<\/i><\/p>\n<h2>File Formats<\/h2>\n<p>\n<img decoding=\"async\" alt=\"Pixel-art kezd\u0151knek: haszn\u00e1lati utas\u00edt\u00e1s\" src=\"\/wp-content\/uploads\/2019\/12\/c636145341db38f18a33b8c9708c36bf.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Such an outcome can make any pixel artist nervous.<\/i><\/p>\n<p>The image you see is the result of saving the drawing in JPG. Some data was lost due to file compression algorithms. Quality pixel art will ultimately look poor, and restoring its original palette can be challenging.<\/p>\n<p>To save a static image without losing quality, use the PNG format. For animations, use GIF.<\/p>\n<h2>How to properly share pixel art<\/h2>\n<p>\nSharing pixel art on social media is a great way to receive feedback and connect with other artists working in the same style. Don't forget to use the hashtag #pixelart. Unfortunately, social networks often convert PNG to JPG without asking, degrading your work. Moreover, it's not always clear why your image was converted.<\/p>\n<p>Here are some tips on how to preserve pixel art in the right quality for various social media.<\/p>\n<h3>vagy a<\/h3>\n<p>\nA PNG f\u00e1jl Twitter-ben val\u00f3 megjelen\u00edt\u00e9s\u00e9hez haszn\u00e1ljon kevesebb mint 256 sz\u00ednt, vagy <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/NolanOBrien\/status\/1199037916019716096\">gy\u0151z\u0151dj\u00f6n meg r\u00f3la,<\/a><\/noindex>, hogy a f\u00e1jlja kevesebb mint 900 pixel hossz\u00fa oldal\u00fa. \u00c9rdemes a f\u00e1jl m\u00e9ret\u00e9t legal\u00e1bb 512\u00d7512 pixelre n\u00f6velni. R\u00e1ad\u00e1sul a m\u00e9retez\u00e9snek 100-ra oszthat\u00f3nak kell lennie (200%, nem 250%), \u00e9s meg kell \u0151rizni az \u00e9les sz\u00e9leket (Nearest Neighbor a Photoshopban).<\/p>\n<p>Anim\u00e1lt GIF f\u00e1jlok Twitter posztokhoz <noindex><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/cyangmou\/status\/989149918534275072?lang=en\">kell<\/a><\/noindex> legfeljebb 15 MB nagys\u00e1g\u00faak lehetnek. A k\u00e9pen legal\u00e1bb 800\u00d7800 pixelnek kell lennie, a ciklikus anim\u00e1ci\u00f3nak h\u00e1romszor kell ism\u00e9tl\u0151dnie, \u00e9s az utols\u00f3 snittnek fele olyan hossz\u00fa id\u0151tartammal kell rendelkeznie, mint a t\u00f6bbi \u2013 ez a legn\u00e9pszer\u0171bb elm\u00e9let. Mindazon\u00e1ltal nem vil\u00e1gos, mennyire sz\u00fcks\u00e9ges megfelelni ezeknek a k\u00f6vetelm\u00e9nyeknek, figyelembe v\u00e9ve, hogy a Twitter folyamatosan m\u00f3dos\u00edtja a k\u00e9pek megjelen\u00edt\u00e9s\u00e9nek algoritmusait.<\/p>\n<h3>Instagram<\/h3>\n<p>\nA tudom\u00e1som szerint lehetetlen k\u00e9pet k\u00f6zz\u00e9tenni Instagramon min\u0151s\u00e9gi vesztes\u00e9g n\u00e9lk\u00fcl. De biztosan jobban fog kin\u00e9zni, ha legal\u00e1bb 512\u00d7512 pixelre n\u00f6veli.<br \/>\n<br \/>Forr\u00e1s: <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\/hu\/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=\"hu_HU\" \/>\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\/hu\/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 kezd\u0151knek: \u00fatmutat\u00f3 a haszn\u00e1lathoz | ProHoster","description":"Az indie fejleszt\u0151k gyakran tal\u00e1lkoznak ezzel.","canonical_url":"https:\/\/prohoster.info\/hu\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"hu_HU","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\/hu\/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\/hu\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}