Podobno w fotografii powrócił do łask efekt retro i różnego rodzaju zabrudzenia, tak niedawno przeczytałam u Jest Rudo. Dziś chciałabym opowiedzieć Wam o czymś podobnym w odniesieniu do ilustracji, zwłaszcza tej tworzonej na użytek gier.
Ostatnio pracuję nad projektem pewnej gry, w której zamierzam wykorzystać właśnie taki efekt przybrudzenia i ziarna. Aby zobrazować Wam, co dokładnie mam na myśli, odeślę Was do inspirującego i bardzo klimatycznego projektu autorstwa Inky Octopuss – Finnish Summer Cottage Poster.
Kiedy przyjrzeć się detalom zawartym w tym projekcie, można dostrzec, to o czym mówię – delikatną teksturę z zabrudzeniami i ziarnem, która dodaje specyficznego charakteru całości.
Choć u wspomnianej na początku Natalii z Jest Rudo znalazłam kilka tutoriali, jak dodać efekt ziarna do zdjęcia i gorąco Wam je polecam, to jednocześnie chciałabym pokazać Wam, jak można owo ziarno wykorzystać również przy tworzeniu ilustracji. Różnica polega na tym, że w fotografii mamy jedną warstwę, którą „brudzimy”, a w ilustracji możemy mieć ich kilka.
W poniższym tutorialu będziemy zatem dodawać efekt zabrudzenia do wielu warstw, wykorzystamy także dostępną w Photoshopie funkcję maskowania, by efekt końcowy był szałowy ;)
Do czego dążymy:
Jak w Photoshopie dodać efekt zabrudzenia do ilustracji?
W tutorialu wykorzystuję Photoshopa w wersji CS6.
Krok 1
Tworzymy nowy dokument w Photoshopie
W wspomnianej przeze mnie grze, którą tworzę, będą fruwały banany. To właśnie tym elementom chcę nadać efekt zabrudzenia, więc zaczynam od utworzenia nowego dokumentu o wymiarach docelowych mojej gry.
Otwieramy Photoshopa, z górnego menu wybieramy polecenie Plik > Nowy (File > New) tworzymy nowy dokument o wymiarach 640x960px, rozdzielczość (Resolution) 72 piksele na cal, tryb kolorów (Color Mode): RGB. Na koniec nazywamy dowolnie nasz nowy dokument, ja użyłam nazwy the-game-with-dirty-textures ;)
Krok 2
Przygotowujemy ilustrację
Pokażę Wam, jak przygotowałam fajną ilustrację banana do gry.
Zaczęłam od stworzenia tła:
W panelu warstw wybieramy ikonkę Nowa warstwa wypełnienia lub dopasowania (Create new fill or adjustment layer) i tworzymy nową warstwę wypełnienia.
Nową warstwę nazywamy np. background-color i nadajemy jej kolor: #f7a1ee.
Na tak przygotowanym tle rysujemy kształt banana. W tym celu wybieramy z bocznego menu narzędzie Kształt własny (Custom Shape). Po wybraniu tego narzędzia, w górnym panelu pojawią nam się jego opcje, takie jak kolor, obramowanie, wymiary, itp. a prawie na samym końcu znajduje się rozwijane menu, w którym możemy wybrać dowolny Własny kształt spośród tych dostępnych w naszym programie.
Jeśli chcecie mieć wśród swoich Kształtów własnych mój autorski kształt banana, to możecie kliknąć na poniższej ikonce, pobrać plik banana-shape-from-mypoint.csh, a po zapisaniu go we wskazanym przez siebie miejscu na Waszym dysku kliknąć dwukrotnie – to spowoduje dodanie tego konkretnego kształtu do Waszej listy kształtów. Będzie on znajdowała się na jej końcu.
Teraz wystarczy wybrać kształt banana z listy i z wciśniętym klawiszem Shift i lewym przyciskiem myszy przeciągnąć po przestrzeni roboczej, aby narysować banana o wielkości zbliżonej do tej na poniższym obrazku:
Warstwę z bananem, dla porządku nazywamy, np. banana:
Klikając dwukrotnie na miniaturce banana w panelu warstw otwieramy Próbnik kolorów (Color Picker) i ustalamy kolor naszego banana na #ffe700.
W bocznym menu chwytamy za narzędzie Pióro (Pen Tool) i tworzymy taki sobie nieregularny kształt przykrywający część banana od strony wygięcia. Kształt powinien „wychodzić” poza kształt banana, jak na obrazku:
Warstwę z naszym nowym, nieregularnym kształtem nazywamy w panelu warstw, np. depth.
Klikając dwukrotnie na warstwie otwieramy dla niej okno Style (Layer Style) i nadajemy jej nałożenie gradientu (Gradient Overlay). W parametrach gradientu ustalamy tryb mieszania (Blend Mode) na normalny (Normal) i kąt (Angle) na 4 stopnie…
… a po kliknięciu na sam gradient ustalamy jego kolory na:
lewy – #ffde00 w położeniu 46% i prawy – #eda425 w położeniu 100%. Zatwierdzamy.
Wracamy do naszej warstwy, klikamy na niej prawym przyciskiem myszy i wybieramy Utwórz maskę odcinania (Create Clipping Mask).
Teraz zbliżamy się do dolnego zakończenia banana i ponownie w bocznym menu chwytamy za narzędzie Pióro (Pen Tool) i tworzymy taki sobie nieregularny kształt przykrywający część banana od spodu. Kształt powinien „wychodzić” poza kształt banana, jak na obrazku:
Klikając dwukrotnie na miniaturce naszego nowego kształtu w panelu warstw otwieramy Próbnik kolorów (Color Picker) i ustalamy jego kolor na #593a43.
Nazywamy nowy kształt, np. bottom-end.
To samo powtarzamy na górze:
Górny kształt nazywamy np. top-end i dla obu kształtów tworzymy maskę odcinania:
– klikamy na warstwie bottom-end prawym przyciskiem myszy i wybieramy Utwórz maskę odcinania (Create Clipping Mask),
– klikamy na warstwie top-end prawym przyciskiem myszy i wybieramy Utwórz maskę odcinania (Create Clipping Mask).
Po raz ostatni chwytamy za narzędzie Pióro (Pen Tool) i na nowej warstwie, którą umiejscawiamy między warstwami top-end i bottom-end tworzymy nieregularny kształt przykrywający część banana na górze, tym razem całą górną końcówkę (na obrazku widać, że maska odcięcia utworzyła się dla nowej warstwy automatycznie – o to chodziło). Kształt powinien „wychodzić” poza kształt banana, jak na obrazku:
Klikając dwukrotnie na warstwie otwieramy dla niej okno Style (Layer Style) i nadajemy jej nałożenie gradientu (Gradient Overlay). W parametrach gradientu ustalamy tryb mieszania (Blend Mode) na normalny (Normal) i kąt (Angle) na -39 stopni…
… a po kliknięciu na sam gradient ustalamy jego kolory na:
lewy – #512430 w położeniu 0% i prawy – #ffe700 w położeniu 100%. Zatwierdzamy.
Warstwę nazywamy np. shadow.
So far, so good – idzie nam znakomicie :)
Krok 3
Tworzymy warstwę z zabrudzeniem
W panelu warstw wybieramy ikonkę Nowa warstwa wypełnienia lub dopasowania (Create new fill or adjustment layer) i tworzymy nową warstwę wypełnienia, ustalając jej kolor na biały #ffffff.
Pozostając na naszej nowo-utworzonej warstwie, w górnym Menu wybieramy Filtr (Filter) > Galeria filtrów (Filter Gallery). Po pojawieniu się pytania ze strony programu, czy chcemy zrasteryzować naszą warstwę, klikamy OK.
W galerii filtrów wybieramy Ziarno błony fotograficznej (Film Grain) i ustawiamy parametry filtra:
Ziarno (Grain) – 20
Obszar podświetlenia (Highlight Area) – 20
Intensywność (Intensity) – 6
Zatwierdzamy.
Warstwę z ziarnem nazywamy, np. grain.
Krok 4
Dodajemy zabrudzenie do wybranych elementów ilustracji
Aby uzyskać fajny efekt musimy troszkę poprzestawiać nasze warstwy. Chcę, aby utworzone właśnie zabrudzenie znajdowało się na skórce banana, ale nie na jego zakończeniach, dlatego wszystkie warstwy związane ze skórką banana (banana, depth oraz shadow) muszą znaleźć się poniżej warstwy grain, a końcówki banana (bottom-end i top-end) powyżej. Zwróćcie uwagę na dwie rzeczy:
1. Wszystkie warstwy powyżej banana mają maskę odcięcia, dzięki czemu „wypełniają” kształt banana.
2. Bardzo ważne jest nazywanie warstw w sposób opisujący ich zawartość – dzięki temu nie pogubimy się w naszym dokumencie.
Przechodzimy do samego sedna – utworzona warstwa z ziarnem (grain) będzie prezentowała się najbardziej efektownie jeśli ustawimy jej tryb mieszania (Blend Mode) na Łagodne światło (Soft Light).
Maskujemy
Teraz czas na wisienkę na torcie – maskowanie, które pozwoli nam precyzyjnie określić, które obszary ilustracji mają pozostać „brudne”, a które nie.
Może wydawać się, że jest to dość skomplikowany krok, zwłaszcza dla początkujących, ale jeśli zrobimy wszystko po kolei, to z pewnością damy radę.
Pamiętacie naszą warstwę z ziarnem (grain)? Kiedy tworzyliśmy ją za pomocą Nowej warstwy wypełnienia lub dopasowania (Create new fill or adjustment layer) pojawiła nam się warstwa z miniaturką naszego białego tła i dodatkowym białym prostokątem na prawo od miniaturki. Ten dodatkowy biały prostokąt to właśnie maska. W takim ustawieniu jest to maska, która niczego nie zakrywa, ponieważ o maskach wiedzieć musimy jedno – białe odkrywa, czarne – zakrywa.
Mamy więc maskę, która okrywa nam zabrudzenia na warstwach skórki od banana. Chciałabym, aby zabrudzenia były widoczne tylko w tej zewnętrznej części skórki, na łuku wygięcia.
1. Klikam więc na prostokącie z maską na warstwie grain.
2. W bocznym menu wybieram narzędzie miękki Pędzel (Brush Tool)
3. W górnym menu z parametrami pędzla ustawiam jego wielkość na 119px, krycie (Opacity) 100%.
4. Kolor dla pędzla musi być czarny (#000000), bo chcemy zakryć co nieco.
5. Łagodnym ruchem po łuku malujemy tak jak na obrazku poniżej zarówno w górnej części banana…
… jak i na jego dole.
Efekt końcowy:
Nieźle – o to chodziło!
Jeszcze chwila na porządki. Z wciśniętym klawiszem Ctrl klikamy na warstwy: top-end, bottom-end, grain, shadow, depth i banana i klikamy Ctrl+G.
Dzięki temu wszystkie elementy banana znalazły się w dedykowanej grupie o nazwie np. banana.
Jeszcze raz – gratulacje. Widzicie efekt zabrudzenia na skórce banana?
Plik źródłowy tutoriala znajdziecie tu: the-game-with-dirty-textures.zip
Co sądzicie o powyższym tutorialu? Macie jakieś sugestie, pytania? Chętnie odpowiem :)
Dodaj komentarz