W tym tutorialu nauczę Was jak stworzyć prosty animowany banner reklamowy, który będziecie mogli wykorzystać w kampanii reklamowej w Internecie do promowania swojej strony www.
ETAP 1: Tworzenie nowego dokumentu.
Otwórz Photoshop’a CS 6 a następnie kliknij: Plik → Nowy (File → New) lub CTRL + N, aby utworzyć nowy dokument. Będziemy tworzyć banner o wymiarach 250×250 px, tak więc w zaznaczonych poniżej polach wpisuję podane wartości; reszta pozostaje bez zmian, czyli:
Resolution: 72 pixels/inch
Color Mode: RGB (pamiętajmy, że tworzymy grafikę dla Internetu) 8 bit
Background: White.
ETAP 2: Przygotowanie wszystkich elementów, które będą wykorzystane w animacji.
- Logo naszej firmy zwykłe oraz monochromatyczne.
- Teksty reklamujące naszą firmę, które będą się pojawiały kolejno jeden po drugim (mogą to też być jakieś elementy graficzne, kojarzone z naszą firmą itd., w realizowanym tu przypadku pojawia się i tekst i element graficzny)
- Teksty zachęcające potencjalnego klienta do podjęcia akcji
- Strzałka imitująca przycisk.
- Dodatkowe tło – tutaj różowy kwadrat.
Wszystkie te elementy muszą być odpowiednio przeskalowane tak, aby rozmiarowo pasowały do ograniczonego pola naszego bannera (250×250 px).
Umieszczamy je po kolei w naszym otwartym pliku z bannerem.
Każdy element, który będzie animowany musi znajdować się na osobnej warstwie.
W naszym przypadku warstw jest 9, po jednej na każdy element.
Rozmieszczamy wszystkie elementy we właściwych im miejscach.
Etap 3: ANIMACJA
- Jeśli nie mamy włączonego panelu Oś czasu (Timeline) dla animacji to należy go włączyć teraz: klikamy Okno (Window) i po rozwinięciu się menu zaznaczamy opcję Oś czasu (Timeline).
- Kiedy już się włączy, na środku panelu Oś czasu, wybieramy polecenie Utwórz animację klatek (Create Frame Animation) i kliknij przycisk obok strzałki. Jeśli na przycisku widoczny jest napis Utwórz oś czasu wideo (Create Video Timeline), wtedy klikamy strzałkę obok przycisku i z menu wybieramy właściwą opcję.
- Odznaczamy wszystkie warstwy poprzez kliknięcie na oczka znajdujące się przy warstwach – chcemy, aby stały się niewidoczne. Widoczna ma pozostać tylko jedna warstwa, nr 1, na której znajduje się nasze kolorowe logo firmy – będzie ono animowane jako pierwsze.
- Klikamy w warstwę z logo – warstwę, na której będziemy obecnie pracować.
- Upewniamy się, że mamy włączone narzędzie do przesuwania (Move Tool // V) i za pomocą wciśniętej dolnej strzałki przesuwamy nasze logo w dół tak długo, aż zniknie z pola widzenia.
- Następnie zduplikuj klatkę (nr 1) animacji, klikając w małą ikonkę zagiętego kwadratu (Duplicates selected frames), znajdującą się obok ikonki kosza na śmieci.
- W tak utworzonej klatce nr 2 (kliknij w nią, aby ją zaznaczyć), przesuń logo w górę, wciskając górną strzałkę ok 55 razy, od momentu, w którym zobaczysz, jak logo pojawia się przy dolnej krawędzi bannera.
- Następnie ustaw krycie (Opacity) na 40%.
- Ponownie skopiuj klatkę (nr 2) → ikona kwadratu i znowu przesuń logo w górę, wciskając górną strzałkę ok 80 razy. Teraz ustaw krycie (Opacity) na 70%.
- Skopiuj klatkę nr 3 (Duplicates selected frames), wciśnij górną strzałkę ok 97 razy i ustaw krycie (Opacity) na 100%.
- Kliknij klatkę nr 2, i ze wciśniętym klawiszem Shift kliknij klatkę nr 3 – w ten sposób masz zaznaczone dwie klatki naraz.
- Teraz kliknij ikonkę „kometkę” (Tweens animation frames), obok ikonki kwadratu do duplikacji i w panelu Tween, który się pojawi, w okienku Frames to Add wpisz 2 – w ten sposób dodaliśmy 2 klatki, które uzupełnią ruch.
- Tak samo zaznacz klatki nr 5 i 6, kliknij „kometkę”, wpisz 2 i kliknij OK.
- Kopiuj klatkę nr 8.
- W klatce nr 9 – kliknij w nią, aby ją zaznaczyć – włącz widoczność warstwy nr 2 z pierwszym tekstem, jaki ma się pojawić – tutaj: „Dlaczego my?”. Umieść go w podobnym miejscu, jak to widać na załączonym obrazku i nadaj mu krycie (Opacity) 40%.
- Kopiuj klatkę nr 9.
- W klatce nr 10, upewnij się, że masz zaznaczoną właściwą warstwę z tekstem i przesuń ten tekst w górę wciskając górną strzałkę ok 12 razy. Zmień jego krycie (Opacity) na 70%.
- Kopiuj klatkę nr 10.
- W klatce nr 11 wciśnij ok 10 razy górną strzałkę, zmień krycie (Opacity) na 100 %.
- Kopiuj klatkę nr 11.
- W klatce nr 12 wciśnij 2 razy górną strzałkę.
- Kopiuj klatkę nr 10 i powstałą obok klatkę nr 11 przesuń za obecną klatkę nr 13.
- To samo zrób z klatką nr 9 – skopiuj i powstałą klatkę nr 10 przesuń za obecną klatkę nr 14.
- Kopiuj klatkę nr 14.
- W klatce nr 15 wyłącz widoczność warstwy z tekstem nr 1 (na oczku) oraz włącz widoczność tekstu nr 2.
- Teraz wszystkie kroki od do zastosuj tak samo do tekstu nr 2 „Co dodatkowo zyskasz?” i tekstu nr 3 „Płać tylko za wyniki”. Pamiętaj, żeby w tym samym miejscu, w którym znika jeden tekst, pojawiał się następny.
- W klatce nr 27, po wyłączeniu widoczności tekstu nr 3, włącz widoczność warstwy z różowym kwadratem oraz warstwy z logiem monochromatycznym, które powinno znajdować się dokładnie w tym samym miejscu, w którym było umieszczone logo kolorowe.
- Kopiuj klatkę nr 27.
- W klatce nr 28 włącz widoczność warstwy z tekstem nr 1 zachęcającym do akcji; przesuń ten tekst przy użyciu dolnej strzałki poza krawędź bannera, a następnie wciśnij ok 53 razy górną strzałkę od momentu pojawienia się tego tekstu przy krawędzi. Ustaw krycie (Opacity) na 20%.
- Kopiuj klatkę nr 28.
- W klatce nr 29 wciśnij ok 25 razy górną strzałkę, ustaw krycie (Opacity) na 40%.
- Kopiuj klatkę nr 29.
- W klatce nr 30 wciśnij ok 30 razy górną strzałkę, ustaw krycie (Opacity) na 70%.
- Kopiuj klatkę nr 30.
- W klatce nr 31 wciśnij ok 45 razy górną strzałkę, ustaw krycie (Opacity) na 100%.
- Kopiuj klatkę nr 31.
- W klatce nr 32 włącz widoczność warstwy z tekstem nr 2 zachęcającym do akcji; przesuń ten tekst przy użyciu dolnej strzałki poza krawędź bannera, a następnie wciśnij ok 46 razy górną strzałkę od momentu pojawienia się tego tekstu przy krawędzi. Ustaw krycie (Opacity) na 40%.
- Kopiuj klatkę nr 32.
- W klatce nr 33 wciśnij ok 13 razy górną strzałkę, ustaw krycie (Opacity) na 70%.
- Kopiuj klatkę nr 33.
- W klatce nr 34 wciśnij ok 27 razy górną strzałkę, ustaw krycie (Opacity) na 100%.
- Kopiuj klatkę nr 34.
- W klatce nr 35 zaznacz obie warstwy z tymi tekstami, używając klawisza Shift i oba teksty razem w dół przy użyciu dolnej strzałki, wciskając ją ok 20 razy, zmniejszamy też krycie (Opacity) obu tekstów na 70%.
- Kopiuj klatkę nr 35.
- W klatce nr 36 wciśnij ok 38 razy dolną strzałkę, ustaw krycie (Opacity) na 40%.
- Kopiuj klatkę nr 36.
- W klatce nr 37 wyłącz widoczność obu tekstów oraz włącz widoczność warstwy z imitacją przycisku. Przesuń go przy użyciu dolnej strzałki poza krawędź bannera, a następnie wciśnij ok 55 razy górną strzałkę od momentu pojawienia się przycisku przy krawędzi. Ustaw krycie (Opacity) na 40%.
- Kopiuj klatkę nr 37.
- W klatce nr 38 wciśnij ok 70 razy górną strzałkę, ustaw krycie (Opacity) na 70%.
- Kopiuj klatkę nr 38.
- W klatce nr 39 wciśnij ok 30 razy górną strzałkę, ustaw krycie (Opacity) na 100%.
Na koniec musimy jeszcze zmienić czas w niektórych klatkach. I tak:
- Zaznaczamy następujące klatki: 8, 11, 17, 23, 34, i 39 – robimy to z wciśniętym klawiszem CTRL.
- W klatce nr 8 kliknij małą strzałkę obok napisu 0 sec. i z rozwiniętego menu wybierz 2.0 – taki czas ustawi się nam we wszystkich sześciu zaznaczonych klatkach. Jest to czas opóźnienia (delay) w miejscach, w których nasze teksty mają 100 % widoczności.
- W klatce nr 31 ustawiamy czas na 1 sec., a w klatce nr 36 – 0.5 sec.
- Możemy jeszcze ustawić powtarzalność animacji – do wyboru z listy mamy: 1 raz (Once), 3 razy (3 times) i cały czas (Forever) =zapętlenie animacji.
ETAP 4: Zapisywanie dokumentu.
Ostatecznym elementem jest zapisanie pliku w formacie .GIF.
- Klikamy Plik → Zapisz dla Internetu… (File → Save for Web…).
- W oknie, które się pojawi, po jego prawej stronie, wybieramy odpowiednie opcje – w prezentowanym tu przykładzie są to: GIF 64 No Dither.
- Następnie klikamy Zapisz…(Save…), nazywamy nasz plik i decydujemy w jakim folderze go zapisać → Zapisz i gotowe!
EFEKT KOŃCOWY:
Bardzo dziękuję za uwagę poświęconą temu tutorialowi, zwłaszcza że jest bardzo długi. Mam nadzieję, że okaże się przydatny i przybliży trochę temat animacji poklatkowej realizowanej w najnowszym Photoshopie CS 6.
Czekam również na wszelkie komentarze, zwłaszcza z uwagami dotyczącymi samej realizacji tutoriala, w celu poprawy użyteczności tego typu publikacji w przyszłości.
Zostaw komentarz