Pikselizacja, czyli stylowy powrót do lat osiemdziesiątych!

W dzisiejszym artykule zaprezentuję jak w łatwy sposób skonwertować w programie Adobe Photoshop grafiki na styl 'pixel art' - nadając im klimat gier lat 80/90.

 

Grafika pikselowa charakteryzuje się ostrymi krawędziami pikseli, niską rozdzielczością obrazu i limitowaną (często do 8-32 kolorów) paletą kolorystyczną. Mogłoby się wydawać, że stylistyka ta jest już zapomniana, ale... wraz z powstawaniem nowych, niezależnych gier 'indie' oraz seriali i filmów nawiązujących do klimatu lat osiemdziesiątych- pixel art przeżywa obecnie swój renesans.

Powyżej: przykład zastosowania pikselizacji na obrazku AI - czyż nie jest to dobra grafika dla gry w klimacie Retro / Cyber Punk?

 


Jak ze zwykłych grafik wydobyć ten klimat?

 

 

1. Paleta kolorystyczna

 

W celu uzyskania jednolitych efektów końcowych potrzebujemy wybrać lub stworzyć paletę kolorystyczną, z której będziemy korzystać. Oczywiście nie będziemy korzystać z dobrodziejstw palety sRGB (typowej dla plików JPG/PNG) - gdyż 16,78 mln kolorów nie pozwoli nam uzyskać nastrojowej grafiki w stylu 'pixel art' (kolorów będzie zbyt dużo). Potrzebujemy więc ograniczyć paletę kolorów. Pamiętajmy, że często im mniej tym lepiej (podstawowa wersja Nintendo Game Boy'a wyświetlała jedynie 4 kolory/odcienie - co nie przeszkadzało twórcom w uzyskiwaniu wyjątkowych efektów wizualnych).

 

Jeżeli chcesz, aby to Adobe Photoshop sam wybrał za Ciebie kolory Twojego zdjęcia (i samemu ograniczył je do wybranej liczby - możesz pominąć poniższe instrukcje i przejść od razu do punktu 2.

 

Jeżeli jednak chcesz wybrać dla Twojej grafiki konkretną paletę kolorystyczną, polecam poniższą stronę:

Na tej stronie internetowej możesz zapoznać się również z grafikami 'pixel art' przygotowanymi przez artystów, obejrzeć tutoriale lub podjąć się kursu tworzenia grafik pixelowych. Polecam!


W celu wybrania odpowiedniej palety kolorystycznej dla Twojego projektu skorzystaj z filtrowania (ogranicz dodatkowo liczbę kolorów dla wyszukiwanych palet) lub wpisz odpowiednie słowa kluczowe w wyszukiwarce, które mogą pomóc Tobie odnaleźć palety nawiązujące do trybów graficznych prawdziwych retro komputerów (np.: 'Commodore', 'Amstrad', 'Nintendo').


Gdy wybierzemy już odpowiednią paletę kolorystyczną, musimy pobrać odpowiedni plik w dziale 'Downloads'.

  • Jeżeli potrzebujesz pliku palety, dzięki któremu będziesz sam malował grafiki pixel art lub edytował je w Adobe Photoshop - wybierz plik PHOTOSHOP ASE.
  • Jeżeli potrzebujesz pliku, który będzie służył nam do automatycznej konwersji grafik na pixel art (krok 2) - wybierz dowolną wersję pliku PNG.

Kolejną rzeczą, jaką musimy zrobić to konwersja pliku PNG z paletą kolorów na format tablicy kolorów ACT, wykonujemy to w poniższych krokach:

  • Otwieramy w Adobe Photoshop plik PNG z naszą paletą kolorów.
  • W programie Adobe Photoshop wybieramy z menu górnego: PLIK -> EKSPORTUJ -> ZAPISZ DLA INTERNETU (STARSZA OPCJA).
  • W oknie, które się pojawi w menu rozwijanym 'Menu palety kolor' (obok tablicy kolorów) wybieramy opcję 'Zapisz tablicę kolorów' i dzięki temu konwertujemy plik PNG do formatu ACT.

2. Konwertowanie grafiki do 'pixel art'


Gdy mamy już przygotowane palety kolorystyczne- kreatywna zabawa dopiero się rozpoczyna! Zachęcam do eksperymentowania z różnymi, czasem nawet skrajnie różnymi paletami, aby uzyskać zaskakujące i często bardzo inspirujące efekty.


Przede wszystkim otwieramy plik, który chcemy skonwertować i tak samo jak w kroku pierwszym korzystamy z menu górnego: PLIK -> EKSPORTUJ -> ZAPISZ DLA INTERNETU (STARSZA OPCJA).


Cały proces wykonujemy w 3 krokach:

  • Wczytujemy tablicę kolorów w formacie ACT.
  • Wybieramy docelową wielkośc pliku graficznego i tym samym wielkość pikseli. Znaczące zmniejszenie wielkości pliku docelowego da bardziej radykalne efekty (do czego zachęcam).
  • Wybieramy poziom 'roztrząsania' - czyli sposobu w jaki tworzone będą przejścia kolorystyczne i uzyskiwanie kolorów docelowych. Z doświadczenia polecam wartość około 80-95%.

Poniżej przedstawiam dwa przykłady:

  • Jeżeli chciałbyś wyświetlać pixel art jako grafikę na stronie internetowej lub w kodzie HTML, pamiętaj żeby skorzystać z parametru CSS image-rendering: crisp-edges; - dzięki czemu Twoje piksele będą zawsze ostre i wyraźne jak na poniższym przykładzie.
  • Na moich przykładach wykorzystałem rozszerzoną paletę PICO-8, która powstała specjalnie dla wirtualnej konsoli o takiej samej nazwie- mającej imitować sprzęt retro (co zresztą świetnie jej wychodzi!).
  • Wykorzystując pikselizację oraz sztuczną inteligencję do tworzenia grafik - uzyskujemy niesamowitą kombinację umożliwiającą przygotowywanie najwyższej jakości plików, które wykorzystać możemy przy własnych projektach gier retro. Polecam!
  • Aby uzyskać jak najlepszy efekt, skorzystaj docelowo z pliku w formacie GIF lub PNG. Unikałbym formatu JPG, który podczas nadmiernej kompresji może dodać nam tzw. niechciane 'artefakty'.

Zachęcam do eksperymentowania z paletami kolorystycznymi i życzę udanych pikselizacji!

Kamil Żurek

Kamil Żurek

Pasjonat zwinnego zarządzania, sprytnego projektowania i zapachu analogowej kliszy. Miłośnik nietypowych rozwiązań i niełatwych zadań. Retromaniak zafascynowany nowoczesnością! Gdy czegoś nie umie- zrobi wszystko, aby się tego nauczyć!