{"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\/pl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","title":{"rendered":"Pixel art dla pocz\u0105tkuj\u0105cych: instrukcja u\u017cytkowania","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Pixel
\n
\nNiezale\u017cni deweloperzy cz\u0119sto musz\u0105 \u0142\u0105czy\u0107 kilka r\u00f3l: projektanta gier, programisty, kompozytora, artysty. A kiedy przychodzi do wizualizacji, wielu wybiera pixel art \u2014 na pierwszy rzut oka wydaje si\u0119 prosty. Ale aby stworzy\u0107 co\u015b pi\u0119knego, potrzeba du\u017co do\u015bwiadczenia i okre\u015blonych umiej\u0119tno\u015bci. Znalaz\u0142em tutorial dla tych, kt\u00f3rzy dopiero zaczynaj\u0105 poznawa\u0107 podstawy tego stylu: zawiera opisy specjalnego oprogramowania i technik rysowania na przyk\u0142adzie dw\u00f3ch sprite'\u00f3w.<\/a><\/noindex><\/p>\n

T\u0142o<\/h2>\n

\nPixel art to forma cyfrowej sztuki, w kt\u00f3rej zmiany wprowadza si\u0119 na poziomie pikseli. G\u0142\u00f3wnie kojarzy si\u0119 z grafik\u0105 gier wideo z lat 80. i 90. Wtedy arty\u015bci musieli uwzgl\u0119dnia\u0107 ograniczenia pami\u0119ci i nisk\u0105 rozdzielczo\u015b\u0107. Obecnie pixel art nadal cieszy si\u0119 popularno\u015bci\u0105 w grach i jako styl artystyczny w og\u00f3le, mimo mo\u017cliwo\u015bci tworzenia realistycznej grafiki 3D. Dlaczego? Nawet pomijaj\u0105c nostalgi\u0119, stworzenie \u015bwietnego dzie\u0142a w tak surowych ramach to przyjemne i warto\u015bciowe wyzwanie.<\/p>\n

Pr\u00f3g wej\u015bcia w pixel art jest stosunkowo niski w por\u00f3wnaniu do tradycyjnej sztuki i grafiki 3D, co przyci\u0105ga niezale\u017cnych deweloper\u00f3w. Ale to wcale nie oznacza, \u017ce b\u0119dzie \u0142atwo uko\u0144czy\u0107<\/b> gr\u0119 w tym stylu. Widzia\u0142em wielu niezale\u017cnych tw\u00f3rc\u00f3w z metroidvaniami w pixel arcie na platformach crowdfundingowych. My\u015bleli, \u017ce sko\u0144cz\u0105 wszystko w rok, ale w rzeczywisto\u015bci potrzebowali jeszcze sze\u015bciu lat. <\/p>\n

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

Pixel art na poziomie, na kt\u00f3rym wi\u0119kszo\u015b\u0107 chce go tworzy\u0107, zajmuje du\u017co czasu, a kr\u00f3tkich instrukcji jest bardzo ma\u0142o. Pracuj\u0105c z modelem 3D mo\u017cna go obraca\u0107, deformowa\u0107, przesuwa\u0107 jego poszczeg\u00f3lne cz\u0119\u015bci, kopiowa\u0107 animacje z jednego modelu na drugi itp. Pixel art na wysokim poziomie prawie zawsze wymaga mn\u00f3stwa wysi\u0142ku na skrupulatne rozmieszczanie pikseli w ka\u017cdej klatce.<\/p>\n

Og\u00f3lnie ostrzeg\u0142em.<\/p>\n

A teraz troch\u0119 o moim stylu: g\u0142\u00f3wnie rysuj\u0119 pixel art do gier wideo i w nich znajduj\u0119 inspiracj\u0119. Szczeg\u00f3lnie uwielbiam Famicom\/NES, konsole 16-bitowe i arcade z lat 90. Pixel art moich ulubionych gier z tamtego okresu mo\u017cna opisa\u0107 jako jasny, pewny siebie i czysty (ale nie za bardzo), nie jest surowy ani minimalistyczny. W tym stylu pracuj\u0119 sam, ale bez trudu mo\u017cesz zastosowa\u0107 pomys\u0142y i techniki z tego samouczka do stworzenia zupe\u0142nie innych rzeczy. Analizuj prace r\u00f3\u017cnych artyst\u00f3w i tw\u00f3rz pixel art, kt\u00f3ry ci si\u0119 podoba!<\/p>\n

Oprogramowanie<\/h2>\n

\n\"Pixel
\n
\nPodstawowe narz\u0119dzia cyfrowe do pixel artu \u2014 Powi\u0119kszenie (Zoom) i O\u0142\u00f3wek (Pencil), aby umieszcza\u0107 piksele. Przydadz\u0105 si\u0119 r\u00f3wnie\u017c Linia (Line), Kszta\u0142t (Shape), Wybierz (Select), Przenie\u015b (Move) i Bucket z farb\u0105 (Paint Bucket). Jest wiele darmowych i p\u0142atnych program\u00f3w z takim zestawem narz\u0119dzi. Opowiem o najpopularniejszych i tych, z kt\u00f3rych sam korzystam.<\/p>\n

Paint (darmowy)<\/h3>\n

\nJe\u015bli masz Windows, wbudowany w system Paint to prymitywny program, ale zawiera wszystkie narz\u0119dzia do pixel artu.<\/p>\n

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

\nNiespodziewanie funkcjonalny edytor pixel artu, kt\u00f3ry dzia\u0142a przez przegl\u0105dark\u0119. Mo\u017cna eksportowa\u0107 prace do PNG lub animowanego GIF-a. Doskona\u0142a opcja dla pocz\u0105tkuj\u0105cych.<\/p>\n

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

\nGraphicsGale to jedyny edytor spo\u015br\u00f3d tych, o kt\u00f3rych s\u0142ysza\u0142em, stworzony specjalnie do pixel artu i zawieraj\u0105cy narz\u0119dzia do animacji. Zosta\u0142 opracowany przez japo\u0144sk\u0105 firm\u0119 HUMANBALANCE. Od 2017 roku jest dost\u0119pny za darmo i nadal cieszy si\u0119 popularno\u015bci\u0105, mimo wzrostu popularno\u015bci Aseprite. Niestety, dzia\u0142a tylko na Windows.<\/p>\n

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

\nBy\u0107 mo\u017ce najpopularniejszy obecnie edytor. Otwarty kod \u017ar\u00f3d\u0142owy<\/a><\/noindex>, mn\u00f3stwo mo\u017cliwo\u015bci, aktywne wsparcie, wersje na Windows, Mac i Linux. Je\u015bli powa\u017cnie zabra\u0142e\u015b si\u0119 za pixel art i wci\u0105\u017c nie znalaz\u0142e\u015b odpowiedniego edytora, by\u0107 mo\u017ce to w\u0142a\u015bnie to, czego potrzebujesz.<\/p>\n

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

\nGameMaker Studio 2 to \u015bwietne narz\u0119dzie 2D z dobrym edytorem sprite\u2019\u00f3w (Sprite Editor). Je\u015bli chcesz tworzy\u0107 pixel art do w\u0142asnych gier, bardzo wygodnie wszystko robi\u0107 w jednym programie. Aktualnie u\u017cywam tego oprogramowania do pracy nad UFO 50<\/a><\/noindex>, kolekcj\u0105 50 retro-gier: sprity i animacje tworz\u0119 w GameMaker, a tile-sety \u2014 w Photoshopie.<\/p>\n

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

\nPhotoshop to drogie oprogramowanie dost\u0119pne w modelu subskrypcyjnym, nie przystosowane do pixel artu. Nie polecam jego zakupu, je\u015bli nie zajmujesz si\u0119 rysowaniem ilustracji w wysokiej rozdzielczo\u015bci lub nie potrzebujesz przeprowadza\u0107 skomplikowanych manipulacji obrazem, jak ja. Mo\u017cna w nim tworzy\u0107 statyczne sprite'y i prace pikselowe, ale jest znacznie bardziej skomplikowany w por\u00f3wnaniu z dedykowanym oprogramowaniem (na przyk\u0142ad GraphicsGale czy Aseprite).<\/p>\n

Inne<\/h2>\n

\n\"Pixel
\nM\u00f3j zestaw do pixel artu. Ca\u0142y czarny, dopiero teraz zauwa\u017cy\u0142em.<\/i><\/p>\n

Tablet graficzny ($$+)<\/h3>\n

\nPolecam tablety graficzne do wszelkich prac z ilustracjami cyfrowymi, aby unikn\u0105\u0107 zespo\u0142u cie\u015bni nadgarstka. \u0141atwiej jest temu zapobiega\u0107 ni\u017c leczy\u0107. Gdy poczujesz b\u00f3l, tylko si\u0119 nasili \u2014 dbaj o siebie od samego pocz\u0105tku. Kiedy\u015b rysowa\u0142em myszk\u0105, teraz trudno mi gra\u0107 w gry, w kt\u00f3rych trzeba naciska\u0107 przyciski. Obecnie u\u017cywam Wacom Intuos Pro S.<\/p>\n

Wsparcie dla nadgarstka ($)<\/h3>\n

\nJe\u015bli nie mo\u017cesz kupi\u0107 tabletu, przynajmniej kup wsparcie dla nadgarstka. Najbardziej podoba mi si\u0119 Mueller Green Fitted Wrist Brace. Inne s\u0105 albo za ciasne, albo zapewniaj\u0105 niewystarczaj\u0105ce wsparcie. Wsparcia mo\u017cna bez problemu zam\u00f3wi\u0107 online.<\/p>\n

96\u00d796 pikseli<\/h2>\n

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

Zaczynamy! Rozpoczniemy od sprite'a postaci 96\u00d796 pikseli. Dla przyk\u0142adu narysowa\u0142em orka i umie\u015bci\u0142em go na zrzucie ekranu z Final Fight (zdj\u0119cie powy\u017cej), aby\u015b zrozumia\u0142 skal\u0119. To du\u017cy<\/b> sprite dla wi\u0119kszo\u015bci retro gier, rozmiar zrzutu ekranu: 384\u00d7224 pikseli.<\/p>\n

Na tak du\u017cym sprite'cie \u0142atwiej b\u0119dzie pokaza\u0107 technik\u0119, o kt\u00f3rej chc\u0119 opowiedzie\u0107. Rysowanie pikselowe jest r\u00f3wnie\u017c bardziej podobne do tradycyjnych form sztuki (na przyk\u0142ad rysunku czy malarstwa), z kt\u00f3rymi by\u0107 mo\u017ce jeste\u015b lepiej zaznajomiony. Po opanowaniu podstawowych technik, przejdziemy do mniejszych sprite'\u00f3w.<\/p>\n

1. Wybieramy palet\u0119<\/h2>\n

\n\"Pixel
\n
\nPiksel to znacznie g\u0142\u0119bsze poj\u0119cie w pixel arcie ni\u017c w jakiejkolwiek innej dziedzinie cyfrowej. Ograniczenia, takie jak kolory, definiuj\u0105 pixel art. Wa\u017cne jest, aby odpowiednio dobra\u0107 palet\u0119, ona pomo\u017ce okre\u015bli\u0107 tw\u00f3j styl. Ale na pocz\u0105tku proponuj\u0119 nie my\u015ble\u0107 o paletach i wybra\u0107 jedn\u0105 z istniej\u0105cych (lub po prostu kilka losowych kolor\u00f3w) \u2014 mo\u017cesz j\u0105 \u0142atwo zmieni\u0107 na ka\u017cdym etapie.<\/p>\n

Dla tego samouczka b\u0119d\u0119 u\u017cywa\u0107 palety z 32 kolorami, kt\u00f3r\u0105 stworzyli\u015bmy dla UFO 50<\/a><\/noindex>. W przypadku pixel artu cz\u0119sto zbiera si\u0119 z 32 lub 16 kolor\u00f3w. Nasza jest zaprojektowana z my\u015bl\u0105 o fikcyjnej konsoli, kt\u00f3ra mog\u0142aby si\u0119 pojawi\u0107 gdzie\u015b pomi\u0119dzy Famicom a PC Engine. Mo\u017cesz wzi\u0105\u0107 j\u0105 lub jak\u0105kolwiek inn\u0105 - samouczek wcale nie zale\u017cy od wybranej palety.<\/p>\n

2. Grube kontury<\/h2>\n

\n\"Pixel
\n
\nZaczniemy rysowanie za pomoc\u0105 narz\u0119dzia O\u0142\u00f3wek. Narysujemy szkic tak, jak to robimy zwyk\u0142ym d\u0142ugopisem na papierze. Oczywi\u015bcie pixel art i sztuka tradycyjna si\u0119 przenikaj\u0105, zw\u0142aszcza gdy mowa o du\u017cych sprite'ach. Moje obserwacje pokazuj\u0105, \u017ce utalentowani arty\u015bci pixel artu przynajmniej w miar\u0119 dobrze rysuj\u0105 r\u0119cznie i odwrotnie. Dlatego rozwijanie umiej\u0119tno\u015bci rysowania zawsze jest korzystne.<\/p>\n

3. Dopracowanie kontur\u00f3w<\/h2>\n

\n\"Pixel
\n
\nDopracowujemy kontury: usuwamy zb\u0119dne piksele i skracamy grubo\u015b\u0107 ka\u017cdej linii do jednego piksela. Ale co w\u0142a\u015bciwie uznaje si\u0119 za zb\u0119dne? Aby odpowiedzie\u0107 na to pytanie, musimy zrozumie\u0107 pixelowe linie i nier\u00f3wno\u015bci.<\/p>\n

Nier\u00f3wno\u015bci<\/h3>\n

\nNale\u017cy nauczy\u0107 si\u0119 rysowa\u0107 dwie podstawowe linie w pixel arcie: proste i krzywe. Z d\u0142ugopisem i papierem chodzi o kontrol\u0119 mi\u0119\u015bniow\u0105, ale my pracujemy z malutkimi kolorowymi blokami.<\/p>\n

Kluczem do rysowania poprawnych pixelowych linii s\u0105 nier\u00f3wno\u015bci. S\u0105 to pojedyncze piksele lub ma\u0142e segmenty, kt\u00f3re niszcz\u0105 g\u0142adko\u015b\u0107 linii. Jak ju\u017c m\u00f3wi\u0142em, pojedynczy piksel ma ogromne znaczenie w pixel arcie, dlatego nier\u00f3wno\u015bci mog\u0105 zniszczy\u0107 ca\u0142\u0105 estetyk\u0119. Wyobra\u017a sobie, \u017ce rysujesz prost\u0105 lini\u0119 na papierze, a nagle kto\u015b uderza w st\u00f3\u0142: nier\u00f3wno\u015bci w pixel arcie wygl\u0105daj\u0105 tak samo, jak przypadkowe zakr\u0119ty.<\/p>\n

Przyk\u0142ady:<\/p>\n

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

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

Nier\u00f3wno\u015bci pojawiaj\u0105 si\u0119 na krzywych, gdy d\u0142ugo\u015b\u0107 segment\u00f3w linii zmienia si\u0119 nie stopniowo.<\/p>\n

Nie da si\u0119 ca\u0142kowicie unikn\u0105\u0107 nier\u00f3wno\u015bci \u2014 we wszystkich twoich ulubionych retro grach one s\u0105 (je\u015bli oczywi\u015bcie pixel art nie sk\u0142ada si\u0119 wy\u0142\u0105cznie z prostych form). Celem jest zminimalizowanie nier\u00f3wno\u015bci, jednocze\u015bnie pokazuj\u0105c wszystko, co potrzebne.<\/p>\n

4. Stosujemy pierwsze kolory<\/h2>\n

\n\"Pixel
\n
\nPokryj swojego bohatera za pomoc\u0105 wype\u0142nienia lub innego odpowiedniego narz\u0119dzia. Paleta u\u0142atwi t\u0119 cz\u0119\u015b\u0107 pracy. Je\u015bli oprogramowanie nie przewiduje u\u017cycia palet, mo\u017cna umie\u015bci\u0107 j\u0105 bezpo\u015brednio na obrazie, jak w powy\u017cszym przyk\u0142adzie, i wybiera\u0107 kolory za pomoc\u0105 pipety.<\/p>\n

W lewym dolnym rogu narysowa\u0142em naszego przyjaciela, poznajcie, to \u2014 Szar. Z nim b\u0119dzie \u0142atwiej zrozumie\u0107, co dok\u0142adnie dzieje si\u0119 na ka\u017cdym etapie.<\/p>\n

5. Cieniowanie<\/h2>\n

\n\"Pixel
\n
\nCzas pokaza\u0107 cienie \u2014 po prostu dodajemy ciemniejsze kolory do sprite'a. Tak obraz b\u0119dzie wygl\u0105da\u0142 na bardziej tr\u00f3jwymiarowy. Za\u0142\u00f3\u017cmy, \u017ce mamy jedno \u017ar\u00f3d\u0142o \u015bwiat\u0142a, umiejscowione powy\u017cej orka, nieco z jego lewej strony. Oznacza to, \u017ce o\u015bwietlone b\u0119d\u0105 wszystkie elementy znajduj\u0105ce si\u0119 na g\u00f3rze i przed naszym bohaterem. Dodajemy cienie z do\u0142u po prawej.<\/p>\n

Forma i obj\u0119to\u015b\u0107<\/h3>\n

\n\"Pixel
\n
\nJe\u015bli ten etap sprawia Ci trudno\u015bci, wyobra\u017a sobie sw\u00f3j rysunek jako tr\u00f3jwymiarowe formy, a nie tylko linie i kolory. Formy istniej\u0105 w przestrzeni tr\u00f3jwymiarowej i mog\u0105 mie\u0107 obj\u0119to\u015b\u0107, kt\u00f3r\u0105 tworzymy za pomoc\u0105 cieni. To pomo\u017ce zwizualizowa\u0107 bohatera bez szczeg\u00f3\u0142\u00f3w i wyobrazi\u0107 sobie, \u017ce jest zrobiony z gliny, a nie z pikseli. Cieniowanie to nie tylko dodawanie nowych kolor\u00f3w, to proces budowania formy. Na dobrze wykonanym bohaterze detale nie zacieraj\u0105 podstawowych form: je\u015bli si\u0119 zmru\u017cysz, zobaczysz kilka du\u017cych skupisk \u015bwiat\u0142a i cienia. <\/p>\n

Wyg\u0142adzanie (anti-aliasing, anty-aliasing)<\/h3>\n

\nZa ka\u017cdym razem, gdy u\u017cywam nowego koloru, stosuj\u0119 wyg\u0142adzanie (AA). Pomaga to wyg\u0142adzi\u0107 piksele, dodaj\u0105c po\u015brednie kolory w rogach, w miejscu styku dw\u00f3ch segment\u00f3w linii:<\/p>\n

\"Pixel
\n
\nSzare piksele \u0142agodz\u0105 \"rozrywy\" w linii. Im d\u0142u\u017cszy segment linii, tym d\u0142u\u017cszy segment AA.<\/p>\n

\"Pixel
\nTak AA wygl\u0105da na ramieniu orka. Jest potrzebne, aby wyg\u0142adzi\u0107 linie przedstawiaj\u0105ce krzywizn\u0119 jego mi\u0119\u015bni.<\/i><\/p>\n

Wyg\u0142adzanie nie powinno przekracza\u0107 granic sprite'a, kt\u00f3ry b\u0119dzie u\u017cywany w grze lub na tle, kt\u00f3rego kolor jest nieznany. Na przyk\u0142ad, je\u015bli zastosujesz AA na jasnym tle, na ciemnym tle wyg\u0142adzanie b\u0119dzie wygl\u0105da\u0107 nieestetycznie.<\/p>\n

6. Selektywny kontur<\/h2>\n

\n\"Pixel
\n
\nDawniej kontury by\u0142y ca\u0142kowicie czarne, przez co sprite wygl\u0105da\u0142 bardzo kresk\u00f3wkowo. Obraz by\u0142 jakby podzielony na segmenty. Na przyk\u0142ad czarne linie na r\u0119ce zbyt kontrastowo przedstawiaj\u0105 muskulatur\u0119, a bohater wygl\u0105da mniej sp\u00f3jnie.<\/p>\n

Je\u015bli sprite stanie si\u0119 bardziej naturalny, a segmentacja mniej oczywista, podstawowe kszta\u0142ty postaci b\u0119d\u0105 \u0142atwiejsze do odczytania. W tym celu mo\u017cna zastosowa\u0107 wybi\u00f3rczy kontur \u2014 cz\u0119\u015bciowo zast\u0105pi\u0107 czarny kontur ja\u015bniejszym kolorem. Na o\u015bwietlonej cz\u0119\u015bci sprite'a mo\u017cna u\u017cy\u0107 najja\u015bniejszych kolor\u00f3w lub, tam gdzie sprite styka si\u0119 z negatywn\u0105 przestrzeni\u0105, mo\u017cna ca\u0142kowicie usun\u0105\u0107 kontur. Zamiast czarnego nale\u017cy u\u017cy\u0107 koloru, kt\u00f3ry zosta\u0142 wybrany dla cienia \u2014 w ten spos\u00f3b zachowa si\u0119 segmentacja (dla rozgraniczenia mi\u0119\u015bni, futra itd.).<\/p>\n

Na tym etapie doda\u0142em r\u00f3wnie\u017c ciemniejsze cienie. Powsta\u0142y trzy odcienie zieleni na sk\u00f3rze orka. Najciemniejszy odcie\u0144 zielonego mo\u017cna u\u017cy\u0107 do wybi\u00f3rczego konturu i AA.<\/p>\n

7. Ostateczne szlify<\/h2>\n

\n\"Pixel
\n
\nNa ko\u0144cu warto doda\u0107 odbicia (najja\u015bniejsze plamy na spricie), detale (kolczyki, nity, blizny) i inne ulepszenia, a\u017c posta\u0107 b\u0119dzie gotowa lub a\u017c b\u0119dziemy musieli przej\u015b\u0107 do nast\u0119pnego etapu.<\/p>\n

Jest kilka przydatnych technik, kt\u00f3re mo\u017cna zastosowa\u0107 na tym etapie. Obra\u017a rysunek poziomo, to cz\u0119sto pomaga w wykrywaniu b\u0142\u0119d\u00f3w w proporcjach i cieniowaniu. Mo\u017cna tak\u017ce usun\u0105\u0107 kolor \u2014 ustawi\u0107 nasycenie na zero, aby zrozumie\u0107, gdzie trzeba zmieni\u0107 cienie.<\/p>\n

Tworzenie szum\u00f3w (dithering)<\/h3>\n

\nJak dot\u0105d g\u0142\u00f3wnie stosowali\u015bmy du\u017ce, solidne obszary cieni. Istnieje jednak inna technika \u2014 dithering, kt\u00f3ra pozwala przej\u015b\u0107 od jednego koloru do drugiego bez dodawania trzeciego. Zobacz przyk\u0142ad poni\u017cej.<\/p>\n

\"Pixel
\n
\nG\u00f3rny gradient od ciemnego do jasnego u\u017cywa setek r\u00f3\u017cnych odcieni niebieskiego. <\/p>\n

\u015arodkowy gradient wykorzystuje tylko dziewi\u0119\u0107 kolor\u00f3w, ale wci\u0105\u017c jest w nim zbyt wiele odcieni jednego koloru. Powstaje tak zwany banding, w kt\u00f3rym przez grube jednorodne pasy oko koncentruje si\u0119 na punktach styku kolor\u00f3w, zamiast na samych kolorach.<\/p>\n

W dolnym gradientie zastosowali\u015bmy dithering, kt\u00f3ry pozwala unikn\u0105\u0107 bandingu i u\u017cywa tylko dw\u00f3ch kolor\u00f3w. Tworzymy szum o r\u00f3\u017cnej intensywno\u015bci, aby imitowa\u0107 gradacj\u0119 koloru. Technik\u0119 t\u0119 mo\u017cna por\u00f3wna\u0107 do halftone stosowanego w druku oraz stippling w ilustracji i komiksach.<\/p>\n

Na orku zastosowa\u0142em delikatne ditherowanie, aby przekaza\u0107 tekstur\u0119. Niekt\u00f3rzy arty\u015bci pikselowi w og\u00f3le go nie u\u017cywaj\u0105, inni wr\u0119cz przeciwnie, nie wahaj\u0105 si\u0119 i robi\u0105 to bardzo umiej\u0119tnie. Uwa\u017cam, \u017ce najwi\u0119ksze ditherowanie najlepiej wygl\u0105da na du\u017cych obszarach wype\u0142nionych jednym kolorem (zwr\u00f3\u0107cie uwag\u0119 na niebo w zrzucie ekranu z Metal Slug, kt\u00f3ry by\u0142 wcze\u015bniej) lub na tych obszarach, kt\u00f3re powinny wygl\u0105da\u0107 chropowato i nier\u00f3wno (na przyk\u0142ad brud). Zdecydujcie sami, jak go u\u017cywa\u0107.<\/p>\n

Je\u015bli chcecie zobaczy\u0107 przyk\u0142ad z rozleg\u0142ym i jako\u015bciowym ditherowaniem, zapoznajcie si\u0119 z grami The Bitmap Brothers, brytyjskiej studia z lat 80-tych, lub z grami na komputerach PC-98. Tylko pami\u0119tajcie, \u017ce wszystkie one s\u0105 NSFW.<\/p>\n

\"Pixel
\nKakyusei (PC-98). Elf, 1996 rok
\nNa tym obrazie jest zaledwie 16 kolor\u00f3w!<\/i><\/p>\n

8. Ostatni rzut oka<\/h2>\n

\n\"Pixel
\n
\nJednym z zagro\u017ce\u0144 zwi\u0105zanych z pixel artem jest to, \u017ce wydaje si\u0119 on \u0142atwy i prosty (przez swoj\u0105 struktur\u0119 i ograniczenia stylu). Ale na ko\u0144cu sp\u0119dzicie ogromn\u0105 ilo\u015b\u0107 czasu na dopracowywaniu swoich sprite'\u00f3w. To jak zagadka do rozwi\u0105zania \u2014 dlatego pixel art przyci\u0105ga perfekcjonist\u00f3w. Pami\u0119tajcie, \u017ce jeden sprite nie powinien zajmowa\u0107 zbyt du\u017co czasu \u2014 to tylko malutki kawa\u0142ek niezwykle skomplikowanej uk\u0142adanki. Wa\u017cne jest, aby nie traci\u0107 wizji ca\u0142o\u015bci.<\/p>\n

Nawet je\u015bli wasz pixel art nie jest przeznaczony do gier, czasem warto powiedzie\u0107 sobie: \u201eWszystko jest ju\u017c wystarczaj\u0105co dobre!\u201d I przej\u015b\u0107 do przodu. Najlepszym sposobem na rozw\u00f3j umiej\u0119tno\u015bci jest jak najwi\u0119cej razy przej\u015b\u0107 ca\u0142y proces od pocz\u0105tku do ko\u0144ca, u\u017cywaj\u0105c jak najwi\u0119cej temat\u00f3w. <\/p>\n

Czasami dobrze jest na chwil\u0119 zostawi\u0107 sprite'a, aby p\u00f3\u017aniej spojrze\u0107 na niego \u015bwie\u017cym okiem. <\/p>\n

32\u00d732 piksele<\/h2>\n

\n\"Pixel
\n
\nZacz\u0119li\u015bmy od stworzenia du\u017cego sprite'a 96\u00d796 pikseli, poniewa\u017c przy tej wielko\u015bci bardziej przypomina to rysowanie lub malarstwo, ale tylko pikselami. Im mniejszy sprite, tym mniej przypomina to, co powinien przedstawia\u0107, i tym bardziej ka\u017cdy piksel staje si\u0119 wa\u017cny.<\/p>\n

\"Pixel
\n
\nW Super Mario Bros. oko Mario to zaledwie dwa piksele, jeden nad drugim. I jego ucho te\u017c. Tw\u00f3rca postaci, Shigeru Miyamoto, powiedzia\u0142, \u017ce w\u0105sy by\u0142y potrzebne, aby oddzieli\u0107 nos od reszty twarzy. Tak wi\u0119c jedn\u0105 z g\u0142\u00f3wnych cech twarzy Mario jest nie tylko projekt postaci, ale i pragmatyczny zabieg. Co potwierdza star\u0105 m\u0105dro\u015b\u0107 \u2014 \"potrzeba jest matk\u0105 wynalazk\u00f3w.\"<\/p>\n

Znane s\u0105 nam ju\u017c g\u0142\u00f3wne etapy tworzenia sprite'a o wymiarach 32\u00d732 pikseli: szkic, kolor, cienie, dalsza obr\u00f3bka. Jednak w takich warunkach, jako pocz\u0105tkowy szkic wybieram kolorowe figury zamiast rysowania kontur\u00f3w z powodu ma\u0142ego rozmiaru. Kolor odgrywa wa\u017cniejsz\u0105 rol\u0119 w definiowaniu postaci ni\u017c kontury. Sp\u00f3jrz ponownie na Mario, nie ma w og\u00f3le kontur\u00f3w. Interesuj\u0105ce s\u0105 nie tylko w\u0105sy. Jego bokobrody definiuj\u0105 kszta\u0142t uszu, r\u0119kawy pokazuj\u0105 r\u0119ce, a og\u00f3lny kszta\u0142t w mniejszym lub wi\u0119kszym stopniu oddaje ca\u0142e jego cia\u0142o.<\/p>\n

Tworzenie ma\u0142ych sprite'\u00f3w to ci\u0105g\u0142e kompromisy. Je\u015bli dodasz obramowanie, mo\u017cesz straci\u0107 miejsce na cie\u0144. Je\u015bli posta\u0107 ma wyra\u017anie zaznaczone r\u0119ce i nogi, g\u0142owa prawdopodobnie powinna by\u0107 niezbyt du\u017ca. Je\u015bli skutecznie wykorzystasz kolor, selektywne obramowanie i wyg\u0142adzanie, narysowany obiekt mo\u017ce wydawa\u0107 si\u0119 wi\u0119kszy, ni\u017c jest w rzeczywisto\u015bci.<\/p>\n

Dla ma\u0142ych sprite'\u00f3w lubi\u0119 styl chibi: postacie wygl\u0105daj\u0105 bardzo uroczo, maj\u0105 du\u017ce g\u0142owy i oczy. To \u015bwietny spos\u00f3b na stworzenie wyrazistego bohatera w ograniczonej przestrzeni, a tak\u017ce bardzo przyjemny styl w og\u00f3le. Ale je\u015bli musisz pokaza\u0107 mobilno\u015b\u0107 lub si\u0142\u0119 postaci, wtedy mo\u017cesz po\u015bwi\u0119ci\u0107 mniej miejsca na g\u0142ow\u0119, aby cia\u0142o wydawa\u0142o si\u0119 bardziej pot\u0119\u017cne. Wszystko zale\u017cy od Twoich preferencji i cel\u00f3w.<\/p>\n

\"Pixel
\nCa\u0142a dru\u017cyna w komplecie!<\/i><\/p>\n

Formaty plik\u00f3w<\/h2>\n

\n\"Pixel
\nTaki wynik mo\u017ce zaniepokoi\u0107 ka\u017cdego artyst\u0119 pikselowego.<\/i><\/p>\n

Obrazek, kt\u00f3ry widzisz, to rezultat zapisania rysunku w formacie JPG. Cz\u0119\u015b\u0107 danych zosta\u0142a utracona z powodu algorytm\u00f3w kompresji pliku. Jako\u015bciowy piksel-art w efekcie b\u0119dzie wygl\u0105da\u0142 \u017ale, a odzyskanie jego pierwotnej palety b\u0119dzie trudne.<\/p>\n

Aby zachowa\u0107 statyczny obrazek bez utraty jako\u015bci, u\u017cyj formatu PNG. Do animacji - GIF.<\/p>\n

Jak poprawnie dzieli\u0107 si\u0119 piksel-artem<\/h2>\n

\nDzielenie si\u0119 piksel-artem w mediach spo\u0142eczno\u015bciowych to \u015bwietny spos\u00f3b na uzyskanie informacji zwrotnej i poznanie innych artyst\u00f3w pracuj\u0105cych w tym samym stylu. Nie zapomnij u\u017cy\u0107 hashtagu #pixelart. Niestety, serwisy spo\u0142eczno\u015bciowe cz\u0119sto konwertuj\u0105 PNG na JPG bez pytania, pogarszaj\u0105c Twoj\u0105 prac\u0119. Nie zawsze te\u017c wiadomo, dlaczego Twoje zdj\u0119cie zosta\u0142o przekonwertowane.<\/p>\n

Istnieje kilka wskaz\u00f3wek dotycz\u0105cych zachowania piksel-artu w odpowiedniej jako\u015bci dla r\u00f3\u017cnych medi\u00f3w spo\u0142eczno\u015bciowych.<\/p>\n

Twitter<\/h3>\n

\nAby plik PNG nie zmieni\u0142 si\u0119 w Twitterze, u\u017cyj mniej ni\u017c 256 kolor\u00f3w lub upewnij si\u0119<\/a><\/noindex>, \u017ce tw\u00f3j plik ma mniej ni\u017c 900 pikseli po d\u0142u\u017cszym boku. Sugerowa\u0142bym, aby rozmiar pliku wynosi\u0142 co najmniej 512\u00d7512 pikseli. Wa\u017cne jest, aby skalowanie by\u0142o wielokrotno\u015bci\u0105 100 (200%, a nie 250%) i aby zachowa\u0142y si\u0119 ostre kraw\u0119dzie (Nearest Neighbor w Photoshopie).<\/p>\n

Animowane pliki GIF do post\u00f3w na Twitterze powinny<\/a><\/noindex> nie mog\u0105 mie\u0107 wi\u0119cej ni\u017c 15 MB. Obrazek powinien mie\u0107 co najmniej 800\u00d7800 pikseli, a cykliczna animacja powinna powtarza\u0107 si\u0119 trzy razy, a ostatnia klatka powinna by\u0107 dwa razy kr\u00f3tsza w czasie ni\u017c wszystkie pozosta\u0142e \u2014 to najpopularniejsza teoria. Jednak nie jest jasne, w jakim stopniu nale\u017cy spe\u0142nia\u0107 te wymagania, bior\u0105c pod uwag\u0119, \u017ce Twitter stale zmienia swoje algorytmy wy\u015bwietlania obrazk\u00f3w.<\/p>\n

Instagram<\/h3>\n

\nZ tego, co wiem, niemo\u017cliwe jest opublikowanie obrazka na Instagramie bez utraty jako\u015bci. Jednak z pewno\u015bci\u0105 b\u0119dzie wygl\u0105da\u0107 lepiej, je\u015bli zwi\u0119kszysz go chocia\u017c do 512\u00d7512 pikseli.
\n
\u0179r\u00f3d\u0142o: habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"

\u0418\u043d\u0434\u0438-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0432\u043c\u0435\u0449\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u043e\u043b\u0435\u0439: \u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0430, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u0430, \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0430, \u0445\u0443\u0434\u043e\u0436\u043d\u0438\u043a\u0430. \u0418, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043b\u043e \u0434\u043e\u0445\u043e\u0434\u0438\u0442 \u0434\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u0430, \u043c\u043d\u043e\u0433\u0438\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c-\u0430\u0440\u0442 \u2014 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043e\u043d \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u043c. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u043d\u0443\u0436\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430\u0432\u044b\u043a\u0438. \u041d\u0430\u0448\u0435\u043b \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b \u0434\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b \u043f\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u044b \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0438\u043b\u044f: \u0441 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0444\u0442\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u043a \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f […]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[702],"tags":[],"class_list":["post-54617","post","type-post","status-publish","format-standard","hentry","category-news"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\n","aioseo_head_json":{"title":"\ud83e\udd47Pixel Art dla pocz\u0105tkuj\u0105cych: instrukcja dla u\u017cytkownik\u00f3w | ProHoster","description":"Niezale\u017cnym deweloperom cz\u0119sto przychodzi si\u0119 zmierzy\u0107 z.","canonical_url":"https:\/\/prohoster.info\/pl\/blog\/news\/piksel-art-dlya-nachinayushhih-instruktsiya-po-primeneniyu","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"pl_PL","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\/pl\/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\/pl\/wp-json\/wp\/v2\/posts\/54617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/comments?post=54617"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/posts\/54617\/revisions"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/media?parent=54617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/categories?post=54617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/pl\/wp-json\/wp\/v2\/tags?post=54617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}