Wyobrażając sobie wszelkie animacje oraz poruszające się obiekty na ekranie mamy zazwyczaj wizję ich projektowania w bardziej skomplikowanych programach do obróbki wideo takich jak np. Adobe Premier Pro, czy też After Effect. W momencie kiedy tworzymy animację, która ma mieć prosty efekt zmiany zdjęć nie potrzebujemy ich. Jak najbardziej będzie wystarczył sam Photoshop. Efekt jaki można przy tym uzyskać może zaskoczyć nie jedną osobę. Proste gify są idealnym urozmaiceniem stron produktowych w sklepach internetowych, które prezentują m.in. proces instalacji i konfiguracji jakiegoś produktu. Po co się więc silić na zawiłe rozwiązania, skoro te proste mają zadowalający efekt przy małej ilości włożonej pracy? W dzisiejszym artykule chciałbym przedstawić wam jak stworzyć obrazek animowany, czyli tzw. Gif w programie Adobe Photoshop.
Spis treści
Pisząc „prostą animację” mam na myśli sekwencję zdjęć (im większą tym lepiej), która zmienia się w danym okresie czasu tworząc płynne przejście. Im krótsze odstępy między zdjęciami nadamy naszej animacji tym efekt przejścia będzie bardziej swobodny, należy wtedy pamiętać aby zaopatrzyć się w wystarczającą ilość zdjęć tak aby animacja nie trwała krócej niż sekundę. Bardzo istotną kwestią o której należy pamiętać jest zaplanowanie rozmiaru docelowej animacji. Prawdą jest, że na etapie eksportu animacji będziemy w stanie wykadrować ją jednak nie będziemy mieli kontroli nad polem roboczym uciętym przez program. Przejdźmy zatem do stworzenia animacji.
Tworzenie animacji w programie Photoshop
Aby rozpocząć nowy projekt klikamy w Plik -> Nowy. Ustalamy szerokość i wysokość dokumentu w pikselach. Pamiętaj o poprawnym trybie kolorów (na potrzeby Internetu jest to RGB). Wybierz orientację dokumentu oraz kliknij Utwórz.
Zaimportuj zdjęcie do programu Adobe Photoshop poprzez Plik -> Otwórz lub też poprzez Plik -> Przeglądaj w programie Bridge. Gdy zdjęcie zostanie zaimportowane możesz je przenieść do okna, w którym znajduje się twój projekt animacji. Na potrzeby tego poradnika wybrałem zdjęcie fidget spinnera. W tym momencie istnieją dwie drogi stworzenia animacji. Jeśli przygotowałeś serię zdjęć zaimportuj je kolejno do programu oraz przenoś je do okienka twojego projektu. Jeśli (tak jak ja) masz do wyboru tylko jeden obrazek, możesz przenieść obiekt spinnera na nową warstwę, zaś podczas animacji manipulować ją tak aby uzyskać efekt ruchu.
Przejdźmy zatem do rzeczy. Wyeksportuj obiekt spinnera. Najprostszy sposób aby to zrobić jest wybór narzędzia do zaznaczania z przybornika np. Lasso oraz kliknij „Zaznacz i maskuj” znajdujące się na górnej belce programu. Następnie należy kliknąć zaznacz temat, zaś program automatycznie powinien zaznaczyć obiekt. Jeśli widzisz niedoskonałości zaznaczenia wybierz z przybornika po lewej stronie okienka „Szybkie zaznaczanie” oraz popraw obiekt tak aby dało się go w łatwy sposób przenieść na nową warstwę. Gdy będziesz zadowolony z efektu kliknij „Okej”.
W tym momencie powinieneś mieć zaznaczony obiekt. Aby przenieść go na nową warstwę kliknij CTRL + J lub Warstwa -> Nowa -> Warstwa przez wycinanie. Zauważysz, że pozostał ślad po przeniesionej warstwie. Aby się go pozbyć użyj Wypełniania zawartością, lub też inną metodą wypełnij pustą przestrzeń.
Gdy ukończyłeś poprzedni krok zauważysz, że na zdjęciu nie znajduje się już cień. Aby sprawić aby obiekt był bardziej realistyczny możesz go dodać do kompozycji, jednak na potrzeby tego poradnika nie musisz tego robić. Zajmijmy się animacją. Wejdź w zakładkę menu Okno oraz wybierz „Oś czasu”. Twoim oczom ukaże się nowe okienko w dolnej części programu. Kliknij „Utwórz oś czasu wideo”. Zauważysz, że Adobe Photoshop oferuję również możliwość edycji wideo oraz dodawania do niego ścieżki dźwiękowej, oczywiście w ograniczonym zakresie. W lewym dolnym rogu znajdziesz ikonę trzech kwadratów, kliknij w nią. Otrzymasz uproszczony widok osi czasu. Teraz należy dodawać kolejne warstwy animacji oraz nadać im odpowiedni czas przejścia do następnego zdjęcia. Zanim to zrobisz utwórz każdy z kadrów animacji.
Zaznacz warstwę na której znajduje się spinner oraz zduplikuj ją klikając jednocześnie CTRL + J. Gdy zduplikujesz warstwę kliknij CTRL + T oraz chwytając róg zaznaczonego obiektu (lub wpisując odpowiednią wartość w górnej belce) obróć go o wyznaczoną ilość stopni (w zależności ile chcesz mieć zdjęć do animacji). Ja wybrałem 30 stopni. Wyłącz wszystkie warstwy za wyjątkiem tła oraz pierwszej warstwy spinnera. Utwórz nową klatkę animacji w oknie osi czasu. Teraz wyłącz podgląd warstwy klikając ikonę oka oraz powtarzaj operację aż dojdziesz do ostatniej klatki.
Eksportowanie animacji do formatu GIF
Aby wyeksportować animację do formatu GIF należy przejść do Plik -> Eksportuj -> Zapisz dla Internetu (Starsza opcja). Następnie wybieramy odpowiednie rozszerzenie znajdujące się w oknie na samej górze. Im większa liczba kolorów tym gif będzie lepszej jakości. Pamiętaj aby wybrać opcję z ditheringiem. Następnie przejdź do rozmiaru obrazu i wybierz ten, który cię najbardziej interesuje. Możesz również wybrać wartość procentową. Będziesz miał wtedy pewność że animacja się wyeksportuje w odpowiednim ratio. Pamiętaj aby zaznaczyć opcję powtarzania „na zawsze”. Dzięki tej opcji uzyskamy smukłą pętlę dzięki której animacja będzie płynna. Klikasz Zapisz, wybierasz ścieżkę docelową i to tyle!
Mam nadzieję, że udało mi się rozwiązać Twój problem. Jeśli czytałeś z ciekawości po prostu cieszę się że mogłeś poznać technikę tworzenia GIFów w Photoshopie. W razie jakichkolwiek pytań jestem do dyspozycji. Poniżej znajdziecie animację, którą stworzyłem na potrzebę tego kursu. Składa się ona z 12 klatek animacji, które zmieniają się po sobie w odstępie 0,1 sekundy. Można zauważyć, że mimo tak krótkiego odstępu nadal widać efekt przejścia. Aby był bardziej płynny należało by zmniejszyć czas przejścia oraz zwiększyć ilość klatek.
