Tutorial

Animowany banner reklamowy w programie Adobe Photoshop CS 6

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.

 pf01

 

 

 ETAP 2: Przygotowanie wszystkich elementów, które będą wykorzystane w animacji.

 pf skladowe bannera

  • 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.

pf02

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ę.

pf1

  • 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.

pf2

  • 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%.

pf3

  • 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.

pf41

  • 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%.

pf5

  • 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.

pf6

  • 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.

pf7

  • 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.

pf8

  • 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%.

pf9

  • 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%.

pf91

  • 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.

pf92

  • 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…).

pf93

  • W oknie, które się pojawi, po jego prawej stronie, wybieramy odpowiednie opcje – w prezentowanym tu przykładzie są to: GIF 64 No Dither.

pf94

  • Następnie klikamy Zapisz…(Save…), nazywamy nasz plik i decydujemy w jakim folderze go zapisać → Zapisz i gotowe!

 

EFEKT KOŃCOWY:

 

promujfirme-banner-animowany-250x250

 

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.

Incoming search terms:

  • animowany baner internetowy

Agata Wojtasik

Agata Wojtasik - graphic designer, ilustrator, artysta. Rysuje, maluje - tworzy odkąd pamięta. Grafiką „na poważnie” zajmuje się od 2009 roku i wciąż uczy się czegoś nowego. Jeśli nie zgłębia wiedzy sama, to robi to na kursach i licznych szkoleniach. Najbardziej kręci ją styl komiksowy i flat design. Próbuje swoich sił w web designie. W wolnej chwili realizuje własne projekty.

More Posts