Pawel Zakrzewski - Adobe Certified Expert | Adobe Community Expert

Prezentowany obszerny fragment artykułu pochodzi z magazynu .PSD

Tak, może to brzmi nieprawdopodobnie, jednak program Adobe Photoshop CS4 Extended pozwala nam łatwo i wygodnie tworzyć animacje trójwymiarowe. Gotowy film możemy wykorzystać podczas dalszej pracy w Adobe Premiere czy After Effects. Może on także stanowić pełną, samodzielną reklamę. Jak się za to zabrać?

Wraz z najnowszą wersję programu Adobe Photoshop CS4 Extended, znacznie poprawiono jego możliwości tworzenia oraz edycji obiektów trójwymiarowych.

Z pewnością praca z 3D nie jest to podstawowe zastosowanie Photoshopa, jednak w wielu przypadkach, umiejętność budowy prostych figur 3D, ich teksturowania, a w końcu animowania otwiera przed nami zupełnie nowe możliwości. To właśnie zagadnieniom związanym z tworzeniem prostych obiektów 3D oraz ich animacji poświęcimy ten krótki tutorial.

Co ważne wszystkie wykorzystane tu techniki, możemy z powodzeniem wykorzystywać do tworzenia zwykłych animacji. Przykład ukazuje bowiem ogólne zasady tworzenia animacji w oparciu o klatki kluczowe. Wykorzystanie w tym celu obiektów 3D daje nam dodatkowe, niezwykłe możliwości.

Wykorzystujemy prosty model 3D

Naszą pracę rozpoczynamy od budowy prostego modelu 3D – sześcianu. Co bardzo istotne, Adobe Photoshop CS4 pozwala nie tylko importować gotowe modele zapisane w popularnych formatach DXF, OBJ, 3DS, czy też DAE (Collada) ale także umożliwia wykorzystanie prostych modeli dostępnych w programie. W tym przypadku skorzystamy z takiej właśnie możliwości i naszą prostą animację przygotujemy na podstawie gotowego modelu sześcianu, standardowo dostępnego w Photoshopie CS4 Extended.

Uwaga!
Wszystkie efekty, animacje oraz cała praca związana z grafiką trójwymiarową dostępna jest wyłącznie dla posiadaczy programu Adobe Photoshop CS4 Extended. Wersja oznaczona jako Standard nie daje możliwości pracy z obiektami 3D.
Aby gotowa animacja dobrze komponowała się z tłem rozpoczniemy od przygotowania nowego dokumentu, o tymczasowo białym tle. Po zakończeniu animacji, zdecydujemy się na dodanie tła najbardziej dopasowanego do utworzonej sceny. W rezultacie do budowy naszego przykładu utworzymy dokument RGB o wielkości 720×576 pikseli i rozdzielczości 72 ppi.

Do prac testowych, nie ma sensu budować większych projektów. Jak się niebawem przekonamy, budowa animacji 3D w znaczący sposób obciąża procesor naszego komputera, toteż mniejszy dokument pozwali na większą płynność wykonywanych prac. Co niezwykle ważne, zaproponowany tu rozmiar dokumentu w pełni odpowiada wielkości klatki filmu w standardzie PAL. W ten sposób, gotowa animacja będzie od razu doskonale dopasowana do prezentacji na ekranie standardowego telewizora.

Do szybkiego budowania dokumentów PSD z myślą o różnego typu zastosowaniach wideo, możemy pokusić się o użycie predefiniowanych ustawień.

Cóż to daje? Nowy dokument utworzony na bazie standardu posiada dodatkowe linie pomocnicze czyli tak zwane strefy bezpieczeństwa.

Zewnętrzna oznacza strefę akcji, gdzie powinny znaleźć się wszystkie istotne elementy naszego filmu. Wewnętrzna, czyli strefa tytułów określa miejsce, gdzie powinien znaleźć się tytuł animacji. Ze względu na zjawisko zwane Overscan, w niektórych telewizorach nie widać pełnego obrazu PAL. Przycięcie ważnej sekcji animacji lub co gorsza tytułu bardzo źle świadczy o autorze animacji.

Po utworzeniu nowego dokumentu dalsze prace rozpoczynamy od importu/umiesczenia wzorcowego modelu 3D. W tym celu przechodzimy do menu górnego 3D i wskazujemy polecenie New Shape From Layer (rysunek 4). Na dostępnej tu liście znajduje się szereg prostych wzorców do tworzenia modeli w programie Adobe Photoshop. Co ważne, wszystkie widoczne tu przykłady zapisane są w uniwersalnym formacie Collada (*.dae) i są zapisane na naszym dysku. Aby dodać nowe modele do tego menu, wystarczy dowolny obiekt 3D zapisać w formacie Collada (*.dae) i umieścić go w katalogu o nazwie Meshes naszego Photoshopa (rysunek 5).

Pełna ścieżka do tej lokalizacji wygląda następująco: Adobe/Photoshop CS4/Prestes/Meshes. Każy umieszczony tu dokument w formacie Collada będzie automatycznie widoczny na liście predefiniowanych modeli 3D dostępnej w menu New Shape From Layer Phoptoshopa CS4. To naprawdę niezła sprawa!

W naszym przykładzie wybieramy z dostępnej listy Cube i automatycznie w oknie naszego dokumentu pojawia się podgląd sześcianu. Domyślnie każda z jego ścianek prezentowana jest w innym kolorze. Raczej trudno powiedzieć, że wygląda to atrakcyjnie. Tym właśnie musimy się zająć.

Za pomocą narzędzia 3D Rotate Tool (K) mamy możliwość swobodnego obracania figury. Dodatkowe narzędzia edycji podglądu modelu 3D jak na przykład Drag 3D Roll 3D aktywują się na górnym pasku właściwości w chwili rozpoczęcia pracy z grafika trójwymiarową.

Naturalnie tak przygotowany model nie jest żadną atrakcją i budowa animacji sześcianu w tej formie z pewnością nie ma sensu. Pokusimy się zatem o dodanie atrakcyjnych tekstur, które pozwolą na zdecydowaną poprawę wizerunku całej animacji. W tym celu musimy dodać do naszej pracy elementy graficzne jakie chcielibyśmy wykorzystać w animacji.

W naszym przypadku pokusiłem się o dodanie kilku ikon graficznych popularnych programów Adobe. Każdy symbol dodany zostanie na osobnej ściance sześcianu. W rezultacie powstanie animowana kostka, którą można by wykorzystać do losowania programów Adobe.

Dodajemy tekstury obiektów 3D

Dodawanie tekstury na każda ściankę nie jest trudnym zadaniem. Wymaga jednak nieco precyzji w działaniu. W pierwszym kroku importujemy odpowiednie elementy graficzne i umieszczamy je na kolejnych warstwach naszego projektu. Niewątpliwym atutem Photoshopa CS4 jest możliwość użycia wektorowych elementów typu Smart Object jako tekstury dla naszych obiektów 3D. W tym przypadku, skorzystamy jednak z tradycyjnych grafik bitmapowych.

Otwieramy dowolne pliki graficzne i przeciągamy je w okno naszego roboczego dokumentu. W rezultacie każdy dodany element zapisany jest na osobnej warstwie i to nam odpowiada. Aby ułatwić sobie kolejne działania tymczasowo wyłączamy podgląd dodatkowych warstw i powracamy do pracy z  modelem 3D.

Na tym etapie, bardzo ważne jest to by obrócić model górną ścianką w naszym kierunku. W tym celu przechodzimy do górnego paska właściwości i w sekcji View wskazujemy podgląd pierwszej ścianki – Top.

W rezultacie sześcian wizualnie stracił swoje trójwymiarowe właściwości. Bez obawy, to tylko podgląd, nasz obiekt wciąż pozostaje pełnowartościowym modelem 3D.

Uruchamiamy teraz podgląd pierwszej z warstw zawierających grafikę do umieszczenia na wskazanej ściance. W naszym przypadku jaką pierwszą wskazałem warstwę zawierającą ikonę programu Adobe Photoshop. Za pomocą narzędzi transformacji (Ctrl+T lub Cmd+T na Macu) należy dopasować wielkość nowej grafiki do obiektu 3D na stronie. O ile to przydatne, możemy tymczasowo zmienić poziom krycia (Opacity) ikonki, by ułatwić sobie precyzyjne przekształcenia. Po dostosowaniu rozmiaru grafiki ponownie nadajemy jej pełen poziom krycia – Opacity 100%.

Kolejny krok jest stosunkowo prosty jednak bardzo istotny. Musimy bowiem odpowiednio zmodyfikować układ warstw naszej pracy. Bardzo ważne jest to, by warstwa którą właśnie edytujemy (tekstura pierwszej ścianki sześcianu) znajdowała się bezpośrednio powyżej obiektu 3D w palecie Layers. Jedynie taki układ warstw umożliwia dodanie tekstury do naszego modelu. Aby dostosować kolejność warstw do tych wymagań, po prostu przeciągamy bieżącą warstwę ponad obiekt 3D w palecie Layers.

W naszym przykładzie, ikona programu Photoshop przypadkowo znalazła się bezpośrednio powyżej obiektu 3D. W naszym przykładzie nie było konieczności modyfikacji układu warstw. Jednak w większości innych przypadków będzie to naprawdę niezbędny krok.

Teraz postaramy się połączyć obie warstwy zachowując jednak model 3D. W tym celu upewniamy się, że aktywna jest warstwa tekstury i znajduje się ona bezpośrednio powyżej obiektu 3D. Jeśli  tak, za pomocą polecenia Merge Down (Ctrl+E lub Cmd+E na Macu) dostępnego w opcjach palety Layers oraz menu górnym Layers łączymy obie warstwy.

W rezultacie, warstwa z grafiką stała się teksturą pierwszej ścianki naszej trójwymiarowej kostki. Tak, nawet pisząc ten tekst wciąż muszę przyznać, że to robi wrażenie. Teraz korzystając z narzędzia 3D Rotate Tool (K) możemy łatwo obrócić sześcian w dowolnym kierunku a przygotowana tekstura obraca się wraz z ruchem modelu.

Początkowo, dodana tekstura jest dość ciemna, jednak nie stanowi to problemu w tej chwili, Edycją wszystkich ścianek sześcianu zajmiemy się nieco później.

W podobny sposób dodamy kolejne tekstury. Podobnie jak poprzednio przechodzimy do górnego paska właściwości i z menu View wybieramy teraz podgląd Front – przedniej ścianki sześcianu.

Podobnie jak to miało miejsce wcześniej, sześcian został automatycznie obrócony tak, by jego tym razem górna płaszczyzna znalazła się przodem do nas. Uruchamiamy podgląd kolejnej warstwy i za pomocą tradycyjnych przekształceń dopasowujemy jej kształt do ścianki modelu.

Po dopasowaniu figury należy ponownie dostosować układ warstw w palecie Layers. Bieżąca tekstura musi znajdować się bezpośrednio ponad modelem 3D. Po korekcie układu warstw za pomocą polecenia Merge Down (Ctrl+E lub Cmd+E) łaczymy teksturę z obiektem trójwymiarowym.

Także w tym przypadku, jeśli za pomocą narzędzia 3D Rotate Tool (K) obrócimy obiekt, kolejna tekstura zostanie automatycznie dopasowana do widoku 3D.

Dokładnie w ten sam sposób dodajemy tekstury kolejno dla wszystkich ścianek modelu 3D. Należy przy tym pamiętać, by wcześniej ustawić obiekt (sześcian) w odpowiedniej pozycji, dostosować rozmiar warstwy – tektury i co najważniejsze umieścić ją (teksturę) bezpośrednio ponad warstwą 3D. Dopiero wówczas można za pomocą polecenia Merge Down połączyć ją z modelem trójwymiarowym.

W tym miejscu warto zwrócić uwagę na fakt, że możemy wykorzystać tekstury o dowolnym kształcie czy wielkości. Nie muszą być one dokładnie dopasowane do płaszczyzny edytowanego obiektu 3D. Naturalnie w finalnej wersji pracy daje to nieco inne rezultaty jednak warto w niektórych sytuacjach przetestować takie możliwości.

Po dodaniu tekstury dla wszystkich ścianek sześcianu, możemy z łatwością obracać go w dowolnym kierunku. Dzięki użyciu narzędzi edycji 3D, jak na przykład 3D Rotoate Tool można łatwo odnaleźć najbardziej atrakcyjny widok kostki.

Jak już wcześniej wspominałem, cały model sprawia wrażenie nieco zbyt ciemnego. Ikony programów jakie wykorzystaliśmy do budowy kostki nie były aż tak ciemne. Coś jest nie tak, spróbujmy to teraz zmienić. Okazuje się, że możliwości jakie oferuje nam Photoshop CS4 w zakresie zarządzania oświetleniem są naprawdę duże. Jak to działa?
Sterujemy oświetleniem obiektów 3D

Dwukrotne kliknięcie w miniaturkę warstwy 3D w palecie Layers otwiera dodatkowy panel zwany 3D Scene.

W tym miejscu mamy dostęp do szczegółowych właściwości naszych obiektów. W tym także oświetlenia modelu. Za pomocą przycisku o kształcie żarówki (Filter By Lights) przechodzimy do sekcji odpowiedzialnej za zarządzanie oświetleniem naszej pracy.

W tym miejscu, w dolnej sekcji Infinite Lights odnajdziemy trzy domyślnie dołączone żródla światła: Infinite Light 1, Infinite Light 2 oraz Infinite Light 3. Standardowo, intensywność każdego z nich ustawiona jest w minimalnym zakresie na poziomie 1%.

Zmiana czyli wprowadzenie większych wartości pozwala oczywiście na lepsze oświetlenie naszego modelu. Co ważne, wszystkie wprowadzone tu zmiany widać bezpośrednio w oknie dokumentu co pozwoli nam łatwo dostosować oświetlenie do naszych potrzeb w konkretnej sytuacji.

Oczywiście każde źródło światła działa na inną część naszej pracy. Warto więc skorzystać z możliwości obrotów obiektu by dokładnie dostosować intensywność oświetlenie.

Dodajemy tło

Gotowy oświetlony obiekt pora umieścić na odpowiednim tle. W tym celu otwieramy przygotowane wcześniej zdjęcie lub grafikę i umieszczamy ją na nowej warstwie naszego projektu. Oczywiście całą warstwę przenosimy na spód w palecie Layers. W rezultacie grafika ta stanie się tłem całej przyszłej animacji.

Animacje 3D w programie Adobe Photoshop CS4

Do budowy animacji obiektu 3D skorzystamy z palety Animation dostępnej w menu górnym Window. Animation to paleta/narzędzie które umożliwia tworzenia animacji podobnie jak w innych programach Adobe jak Flash, After Effects czy Director w oparciu o klatki kluczowe.

Paleta Animation znana z Photoshopa pozwala także na przejście do trybu Frame Animation szczególnie przydatnego podczas tworzenia animowanych plików w formacie GIF.

W naszym przykładzie skorzystamy z możliwości budowy animacji na podstawie klatek kluczowych i nie mamy więc konieczności by zmieniać domyślny wygląd palety Animation. Ta w swej standardowej formie zawiera oś czasu – Timeline doskonale znana użytkownikom programów After Effects, Premiere czy Flash. Tu bowiem na osi czasu odłożone są kolejne sekundy i klatki naszej animacji.

Ogólnie  rzecz ujmując animacje tworzone na podstawie klatek kluczowych budowane są na podstawie co najmniej dwóch ujęć – klatek kluczowych. W pierwszej animowany obiekt prezentowany jest przykładowo w widoku od przodu. W drugiej klatce kluczowej zmieniamy jego obrót, położenie czy też inne atrybuty a komputer automatycznie buduje stosowną animację. Tego typu podejście nazywane jest Tweeningiem i wykorzystywane jest przez wiele programów multimedialnych w tym także Photoshopa.

W ten sposób do budowy naszej animacji potrzebujemy dodać co najmniej dwie klatki kluczowe, które staną się podstawą do utworzenia Tweeningu – właściwej animacji. Adobe Photoshop CS4 oferuje w tym względzie interfejs przypominający nieco Adobe After Efects.

Dodajemy klatki kluczowe i budujemy animację

Aby dodać prostą animacje trójwymiarową zaznaczamy warstwę z obiektem 3D i przechodzimy do palety Animation. Tuż obok jej nazwy widoczny jest niewielki trójkątny przycisk. Pozwala on na przejście do edycji klatek kluczowych dla wybranych właściwości warstwy lub obiektu 3D.

W naszym przypadku po rozwinięciu właściwości warstwy za pomocą niewielkiego przycisku o kształcie stopera dodajemy pierwszą klatkę kluczową dla właściwości 3D Object Posiotion.

W ten sposób mamy gotową pierwszą, startową klatkę animacji. Aby możliwe było wykorzystanie komputera do utworzenia automatycznej animacji typu Tweening, konieczne jest dodanie drugiej klatki kluczowej. W tym celu przestawiamy wskaźnik czasu do wybranej sekundy naszej animacji i za pomocą dowolnych narzędzi 3D np. 3D Rotate Tool (K) wprowadzamy zmiany w wyglądzie kostki.

W rezultacie we wskazanej lokalizacji utworzona została automatycznie druga klatka kluczowa a Photoshop utworzył animację pomiędzy pierwszą a bieżącą klatką. Aby się o tym przekonać, wystarczy przesunąć nieco wskaźnik czasu bieżącego. Trójwymiarowy model kostki zmienia swój obrót i inne zmodyfikowane wcześniej właściwości wraz e zmianą czasu. I to jest właśnie nasza pierwsza animacja.

W podobny sposób możemy wskazać kolejny punkt na osi czasu i ponownie zmodyfikować obrót, wielkość czy położenia naszej kostki w trójwymiarowej przestrzeni. Każda modyfikacja automatycznie tworzy kolejną klatkę kluczową i odpowiednią animację.

Co ważne, do edycji obiektu 3D możemy wykorzystać także inne narzędzia jak choćby Scale the 3D Object, Slide the 3D Object czy Roll the 3D Object. Wszystkie zmiany wprowadzone za pomocą tych właśnie narzędzi są automatycznie rejestrowane w postaci klatek kluczowych na osi czasu naszej animacji.

Na podstawie tego prostego przykładu widać wyraźnie, że tworzenia nawet trójwymiarowych animacji w programie Adobe Photoshop CS4 nie jest trudnym zadaniem. Z pewnością jednak wymaga nieco cierpliwości. Niestety wszystkie przekształcenia nawet tak prostego obiektu w przestrzeni 3D wymagają nieco czasu na przeliczenie. Podgląd gotowej animacji za pomocą przesuwania wskaźnika czasu bieżącego także pozostawia wiele do życzenia.

Zdecydowanie nie ma co narzekać, możliwości jakie oferuje Adobe Photoshop CS4 są naprawdę imponujące. A to jeszcze nie wszystko!

Jeśli zwrócimy uwagę na właściwości jakie można animować za pomocą klatek kluczowych wyraźnie widać tam: 3D Object Position, 3D Camera Position, 3D Render Settings oraz 3D Cross Section. Taki zestaw animowanych właściwości otwiera przed nami niemal nieograniczone możliwości tworzenia naprawdę widowiskowych i atrakcyjnych animacji obiektów 3D. Serdecznie namawiam do prób we własnym zakresie. W każdym przypadku zasada jest bowiem identyczna. Dodajemy klatkę kluczową dla wybranej właściwości np. 3D Cross Section (przekrój poprzeczny), wskazujemy dowolny punkty na osi czasu i modyfikujemy atrybuty wybranej właściwości – tu Cross Section. Pozwoli to na animację przekrojów w czasie – po prostu Rewelacja !

Podgląd animacji

Do podglądu przygotowanej animacji możemy wykorzystać metody znane wszystkim użytkownikom aplikacji do edycji filmów wideo. Najprostszym (niestety nie najszybszym) sposobem jest przeciąganie wskaźnikiem czasu bieżącego po osi czasu – Timeline . Dopóty nie zrenderujemy naszego projektu podgląd tego typu jest bardzo powolny, ale działa.

Innym rozwiązaniem jest użycie klawisza Space. Pierwsze wciśnięcie klawisza Spacja uruchamia podgląd animacji, kolejne zatrzymuje ją. Pierwsze uruchomienie podglądu tą metodą, wymaga nieco cierpliwości, program bowiem renderuje budowaną animację. Już po zrenderowaniu możemy oglądać ją w rzeczywistej prędkości. To mechanizm znany z wielu programów do edycji plików wideo.

Oczywiście do Obsługi naszej animacji możemy wykorzystać także tradycyjne przyciski Play (odtwarzanie i zatrzymania odtwarzania), Select First Frame (przewinięcie do początku animacji), Select Previous Frame (Przejście do poprzedniej klatki) itp. widoczne w dolnej sekcji palety Animation. Osobiście częściej korzystam z klawisza Space.

Raz zrenderowaną animację możemy już szybko przeglądać dowolną metodą. Oczywiście wprowadzenie dodatkowej modyfikacji ponownie wydłuży czas pierwszego podglądu – renderowania.

Zapis gotowej animacji.

Aby przygotowaną animację można było wykorzystać w reklamie czy innym programie należy zapisać ją w formacie czytelnym dla innych aplikacji umożliwiających prace z plikami Wideo. Najprostszym rozwiązaniem będzie tu więc wybór polecenia Export i wskazanie polecenia Render Video. W ten sposób przygotowana za pomocą Photoshopa animacja zapisana będzie w wybranym formacie typowym dla zapisu filmów wideo.

W oknie Render Video mamy możliwość określić wiele istotnych parametrów całej animacji. Wskazujemy właściwą lokalizację dla pracy oraz wprowadzamy stosowną nazwę. W sekcji Quick Time Options wskazujemy jeden z dostępnych formatów wideo, najlepiej dopasowany do dalszych zastosowań naszej animacji. Warto zwrócić tu uwagę na możliwość zapisu animacji w formacie FLV (Flash Video) doskonałym do szybkiej publikacji na stronie WWW.

Aby zapisać animację do dalszej edycji w programach typu After Effects, Premiere czy też Final Cut Pro warto wskazać jeden z formatów bez kompresji obrazu: Quick Time czy AVI. Niekiedy przydatny jest także eksport sekwencji obrazów bitmapowych. Każdy program do edycji wideo pozwala budować animacje na podstawie sekwencji obrazów bitmapowych.

W dolnej części okna możemy wskazać także docelową prędkość odtwarzania naszej animacji. Dla standardu PAL obowiązującego w naszym kraju jest to 25 fps.

Film zapisany w formacie Quick Time czy też AVI możemy bez problemów przeglądać dowolnym odtwarzaczem plików wideo na naszym komputerze. Jeśli przypomnimy sobie od czego rozpoczynaliśmy ten przykład, okazuje się, że możliwości Adobe Photoshopa CS4 stają się powoli nieograniczone.