BestpcGame

piter358

Aby na stronę przez Was stworzoną zaglądali użytkownicy internetu potrzebna jest jej reklama. W Internecie wyśmienitym sposobem na reklamę jest banner bądż button, którym wymieniamy się z inną witryną internetową.
Jednak sam banner to za mało, tzn. musi on zaciekawić, nie może być nudny, powinna być zachowana odpowiednia kolorystyka (nie może być zbyt jaskrawy, aby nie raził w oczy, ale też nie może być on szary i bezbarwny). Jednak i to może się okazać za mało, bo..... jest on nieruchomy i nie przyciąga wzroku tak bardzo, jak powinien. Zatem potrzebny jest nam taki, który się rusza, czyli jednym słowem nasz banner będzie animowany.

Do zrobienia takiego bannera (bądź buttona) użyjemy programów firmy Adobe: Photoshop CS2 i ImageReady. W tym pierwszym zrobimy całą oprawę graficzną, a w tym drugim dodamy animację. Wbrew pozorom nie jest to takie trudne, jak na pierwszy rzut oka mogłoby się wydawać.
Wykonać to można na kilka sposobów, przedstawię Wam dwa. W jednym będziemy wszystkie klatki ustawiać samodzielnie, a w drugim zrobi to za nas program i tym samym zobaczymy jak można ułatwić sobie pracę z programem znając dosłownie odrobinę więcej.

Pierwszy sposób
Więc zabieramy się za robienie prostego bannera animowanego. Na początek otwieramy nowy dokument o rozmiarach 400 x 50 pixelów. Robimy jakieś ciekawe tło, takie aby pasowało kolorystycznie i tematycznie do strony, na którą ma prowadzić, np. takie:

Następnym krokiem jest dodanie do niego napisów, więc klikamy na T i wpisujemy przykładowo adres naszej strony. Kolejnie odznaczamy na palecie po prawej, to co wpisaliśmy (aby nam nie przeszkadzał) i w jego miejsce wpisujemy kolejny (jak na załączonym obrazku poniżej), np. informujący o czym jest nasza strona i zapisujemy obrazek w formacie *.psd.

W tym momencie przechodzimy do ImageReady (Ctrl+Shift+M), gdzie zrobimy płynną animację przechodzenia jednego tekstu drugi. Jak już mamy dwie warstwy z tekstem to obie kopiujemy po 5 razy Layer--->Duplicate Layer; Ctrl+J. - Warstwa--->Powiel warstwę. Następnie ustawiamy w nich Opacity - Krycie odpowiednio na: 80%, 60%, 40%, 20% i 10% i tak samo postepujemy z kopiami drugiego tekstu (zmieniamy te ustawienia tylko w kopiach). W zasadzie te czynności mogliśmy jeszcze zrobić w Photoshopie, ale to jest bez znaczenia.

Teraz zajmiemy się już animacją. Otwieramy okienko z animacją Window--->Animation - Okono>Animacja i w owym oknie klikamy na Duplicates current frame - Powiel warstwę tyle razy ile nam jest to potrzebne, tzn. ile mamy mieć klatek animacji (im więcej ich będzie tym przejście będzie płynniejsze, w naszym przypadku 21).

W pierwszej klatce ustawiamy to co chcemy na początku (oczywiście w każdej jest ustawione tło i będziemy zmieniać tylko warstwy (layers) z tekstem), niech będzie to nasz adres strony, ten oryginalny, nie kopia.
W drugiej dajemy też adres, ale już ten z Opacity - Krycie 80% i tak ustawiamy kolejno, aż do 10%. W kolejnej będzie już ten drugi tekst z opacity 10% i z każdą kolejną klatką dajemy następną warstę (20%, 40%...) i na końcu ten tekst oryginalny (ma opacity 100%).

I tym sposobem mamy płynne przejście z jednego tekstu w drugi i tak samo postepujemy, aby zrobic takie przejście z drugiego tekstu w pierwszy.
Teraz pozostało nam już tylko ustawic czas każdej klatki. A więc pierwsza niech będzie miała 1,2 sec. (aby każdy miał czas na przeczytanie adresu, ale można ustawić mniej lub więcej, to już od Was zalezy). Następne 0,1 sec. aż do klatki z oryginalnym drugim tekstem, gdzie też czas będzie wynosił 1,2 sec. (z tego samego powodu) i reszta znowu po 0,1 sec.

Nasz banner jest już gotowy, powinien on wyglądać mniej więcej tak (animacja tekstu):

Drugi sposób - lepszy
Wszystko robimy tak samo w Photoshopie jak w pierwszym sposobie. Przechodzimy do ImageReady. Otwieramy okienko z animacją i w pierwszej klatce dajemy nasz pierwszy tekst i klikamy na Duplicates current frame - Powiel warstwę i tam ustawiamy Opacity - Krycie na 10% (w pierwszej klatce mamy 100%). Nastepnie klikamy na pierwszą klatkę i użyjemy funkcji Tween - Wtrącanie (Tween With - Zmieszaj z: mamy ustawione na Next Frame - Następna Klatka; Frames to Add - Ramki do dodania dajemy, np. na 6). I tym prostym sposobem mamy już gotową pierwszą animację.
Tworzymy kolejną klatkę animacji i tu ustawiamy nasz drugi tekst i postępujemy tak samo jak poprzednio, ale najpierw mamy ustawione Opacity - Krycie na 10%, a potem na 100%.
Tym sposobem mamy płynne przejście z jednego tekstu w drugi i teraz pozostało już zrobić tylko przejście z tego drugiego w pierwszy.
Jak widać ten sposób jest zdecydowanie mniej czasochłonny.

Zapisujemy go w formacie *.psd oraz *.gif File--->Save Optimized As... - Plik--->Zapisz Zoptymalizowany.

Banner z tego tutoriala możecie pobrać stąd w formacie *.psd, a więc macie możliwość podglądnąć taką gotową animację stworzoną w ImageReady oraz dowolnie zmodyfikować.

Na tym prostym przykładzie widać ile korzyści daje, jak poświęcimy odrobinę więcej czasu programowi. Najlepszym sposobem na "poznanie" Photoshopa czy ImageReady, czy jakiegoś innego softu jest odkrywanie jego możliwości metodą prób i błedów, bo wszystkiego się nie dowiecie z tutoriali, a tym większa satysfakcja jak zrobicie coś samemu Smile

Jeżeli coś jest nie tak PISZCIE!!!