animowany-baner.pdf
(
496 KB
)
Pobierz
10821838 UNPDF
www
poziom trudności:
ü
30 min
Photoshop CS2
PROSTY BANER
58
.psd StarterKit 04/2007 » www.psdmag.org
www
PRZEPIS NA
58
.psd StarterKit 04/2007 » www.psdmag.org
www
przepis na prosty baner
w Photoshopie
Photoshop jako narzędzie do obróbki fotografii jest pro-
gramem bardzo uniwersalnym i stanowiącym swoisty
standard sam w sobie. Pozwala nie tylko na przygoto-
wywanie zdjęć czy całych prac do druku, ale również jest
bardzo pomocnym narzędziem pracy dla wszelakiej ma-
ści webdesignerów. W poniższym tutorialu dowiemy się,
jak przy użyciu samego tylko Photoshopa, zupełnie bez
znajomości Flasha stworzyć animowany baner do uży-
cia na stronie WWW.
o autorze
Anna Grabowska
Pracownica jednej z białostockich drukarni na sta-
nowisku specjalista operator DTP. Wolny czas spę-
dza w kinie i na kręglach z przyjaciółmi oraz na
tworzeniu stron internetowych.
Portfolio:
www.tysmin.deviantart.com/gallery/
utworzenie nowego dokumentu.
Tworzymy nowy plik:
Plik>Nowy
... (
File>New...
) o wymiarach 800 px,
wysokości 300 px i białym tle. Następnie otwieramy zdjęcie
tra-
wa.jpg
. Narzędziem
Piórko
(
Pen Tool
) zaznaczamy na dolną część tra-
wy (zaznaczenie nie musi być dokładne) i ładujemy ścieżkę jako selek-
cję (
Load path as a selection
). Następnie przenosimy wyciętą trawę do
naszego głównego dokumentu, skalujemy [
Ctrl
]+[
T
] i narzędziem
Gum-
ka
(
Eraser Tool
) o miękkiej końcówce usuwamy niepotrzebne fragmenty.
dopasowanie kolorystyki
Aby trawa była bardziej zielona do warstwy z trawą dodajemy nową war-
stwę dopasowania:
Warstwa>Nowa warstwa dopasowania>Kolor selek-
tywny
(
Layer>New Adjustement Layer>Selective Colour
). W zakładce
Kolo-
ry
wybieramy
Zielenie
(
Colours: Greens
) oraz ustawiamy suwaki na warto-
ściach CMYK: +68; +38; +43; +42. Podobnie postępujemy z niebem. Doda-
jemy do warstwy nową warstwę dopasowania:
Warstwa>Nowa warstwa do-
pasowania>Kolor selektywny
(
Layer>New Adjustement Layer >Selective Co-
lour
). Tym razem w zakładce
Kolory
wybieramy
Niebieskości
(
Colours: Blues
)
i suwaki ustawiamy na wartościach CMYK: +78; +30; 0; 0.
niebo w tle
Otwieramy plik
niebo.jpg
i przenosimy go do naszego głównego do-
kumentu, poprzez przeciągnięcie warstwy z pliku jpg na okno z na-
szą graiką. Warstwę nazywamy
niebo
i przenosimy pod warstwę z tra-
wą. Następnie ją skalujemy [
Ctrl
]+[
T
] tak, by było widać chmury.
niebo cd.
Wtapiamy delikatnie niebo w tło. Zmieniamy kolor tła na biały, nato-
miast kolor planu pierwszego na czarny. Dodajemy maskę wektoro-
wą do warstwy
Niebo
i wybieramy narzędzie
Gradient>Gradient liniowy
(
Gradient Tool>Linear Gradient
). Rysujemy na masce gradient pionowo
w górę zaczynając od dołu.
.psd StarterKit 04/2007 » www.psdmag.org
59
0
1
0
3
0
2
0
4
www
0
5
postać pierwszoplanowa
Otwieramy plik o nazwie
kobieta.jpg
i przenosimy go do naszego
głównego dokumentu poprzez przeciągnięcie warstwy z pliku jpg
na okno z naszą graiką. Następnie skalujemy postać [
Ctrl
]+[
T
] tak, by
zmieściła się nam w naszym polu roboczym. Wybieramy gumkę o mięk-
kiej końcówce (
Eraser Tool
) i usuwamy białe tło dookoła postaci. Wartość
Krycie
(
Opacity
) ustawiamy na 75%.
animacja w ImageReady
Importujemy naszą graikę do ImageReady, klikając ikonkę
Importuj
do ImageReady
w narzędziach (
Import to ImageReady
). Otwieramy
zakładkę
Okno>Animacje
(
Window>Animations
). Wyłączamy warstwy
z tekstami oraz zblurowanym tłem. W opcjach animacji dodajemy
No-
wą klatkę
(
New Frame
). Włączamy widoczność warstwy z tłem zbluro-
wanym. Następnie wybieramy opcję
Animuj
(
Tween
) z zakładki podręcz-
nej panelu Animacji z wartościami podanymi na zrzutce.
0
6
dodanie tekstu
Dodajemy tekst reklamowy: adres sklepu, który jest automatycznie
jego nazwą oraz przykładowy tekst reklamowy. Dla akcentu pierw-
sze litery w nazwie sklepu zostały wyróżnione na czerwono tak, by ca-
łość była łatwa do odczytu dla przeciętnego użytkownika internetu. Każ-
dy z tekstów, który ma być animowany powinien znajdować się na osob-
nej warstwie.
dodanie tekstów do animacji
Dodajemy nową klatkę i włączamy widoczność warstwy z nazwą
sklepu. Następnie znowu przechodzimy do opcji
Animuj
(
Tween
) tak,
jak w poprzednim punkcie – z identycznymi wartościami jak poprzed-
nio. Nasz krok powtarzamy po raz trzeci i ostatni tym razem dla warstwy
z tekstem reklamowym. By zwiększyć płynność animacji zwiększamy
parametr
Ramki do dodania
(
Frames To Add
).
0
7
powielenie elementów
Na początku odznaczamy oczka, czyli widoczność przy warstwach
z napisami oraz warstwie z kobietą. Następnie zaznaczamy całość
[
Ctrl
]+[
A
]. Wybieramy polecenie
Edycja>Kopiuj złączone
(
Edit>Copy Mer-
ged
) i wklejamy to, co mamy w pamięci jako nową warstwę ponad warstwą
trawa
jako
Tło_blur
. Włączamy teraz na nowo widoczność wszystkich wyłą-
czonych do tej pory warstw. Przechodzimy do warstwy
Tło_blur
, wybieramy
iltr
Filtr>Blur>Blur Gausowski
... (
Filter>Blur>Gaussian Blur..
.) z promieniem
3 px. Na tym kończymy naszą pracę w Photoshopie. Nadeszła pora, by do
animacji zaprzęgnąć młodszego brata, czyli ImageReady.
eksport animacji
Nasza animacja jest już gotowa do wyeksportowania do pliku *.swf.
Klikamy
Plik>Eksport>Macromedia Flash SWF
(
File>Export>Ma-
cromedia Flash SWF
). Zaznaczamy
checkbox
przy opcji
Generuj HTML
(
Generate HTML
), jeżeli chcemy, by od razu został nam stworzony plik
html. Nie musimy tego zaznaczać, jeżeli potrzebujemy samej anima-
cji lash.
60
.psd StarterKit 04/2007 » www.psdmag.org
0
8
0
9
1
0
Plik z chomika:
lee-18
Inne pliki z tego folderu:
Fotografia_i_obrobka_Zdjec_slubnych_PSD_09_PL.pdf
(16844 KB)
Naucz_sie_robic_efekt_zaklocenia_jak_z_tej_okladki.pdf
(16182 KB)
Magia_w_studio_psd_02_2011.pdf
(12127 KB)
psd_2010_06.pdf
(16254 KB)
Sprz_t_dla_grafika_10_2010.pdf
(11714 KB)
Inne foldery tego chomika:
♣AUDIOBOOKI
DARMOWE EBOOKI (ebooki-download)
Dla dorosłych (ebooki-download)
E-biznes (ebooki-download)
Edukacja finansowa (ebooki-download)
Zgłoś jeśli
naruszono regulamin