www

58

.psd StarterKit 04/2007 » www.psdmag.org

30 min

poziom trudności:

Photoshop CS2

www

58

.psd StarterKit 04/2007 » www.psdmag.org

PRZEPIS NA

PROSTY BANER

ü

59

.psd StarterKit 04/2007 » www.psdmag.org

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.

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ą grafiką. Warstwę nazywamy

niebo i przenosimy pod warstwę z tra-

wą. Następnie ją skalujemy [

Ctrl]+[T] tak, by było widać chmury.

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

0

1

0

2

0

3

0

4

przepis na prosty baner

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.

w Photoshopie

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/

www

60

.psd StarterKit 04/2007 » www.psdmag.org

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ą grafiką. 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%.

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.

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

filtr

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.

animacja w ImageReady

Importujemy naszą grafikę 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.

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

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

0

5

0

6

0

7

0

8

0

9

1

0