8
Wykorzystanie
technik Slices i Rol-
lovers
2
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
W programie Adobe Photoshop i ImageReady istnieje możliwość po-
dzielenie obrazu na samodzielne bloki (Slices), co umożliwia nam zapi-
sania każdego z nich w różnych formatach graficznych. Każdy z takich
bloków może być animowany, przypisany do adresu URL lub użyty dla
efektu Rollovers. W dzisiejszej lekcji poznasz następujące zagadnienia:
" Tworzenie samodzielnych bloków (Slices) na obrazie, przy wyko-
rzystaniu różnych metod i technik
" Optymalizację każdego bloku przy użyciu różnorodnych ustawień i
formatów graficznych
" Tworzenie tekstowych (HTML) obiektów Slices, bez zawartości gra-
fiki
" Tworzenie efektu Rollovers na banerach reklamowych
" PodmianÄ™ tekstu na stronie WWW z zastosowaniem odmiennego
stylu tekstu
" Ukrywanie lub pokazywanie warstwy na stronie WWW przez naje-
chanie myszkÄ…
" Tworzenie kodu HTML zawierajÄ…cego tabelÄ™ rozmieszczenia obiek-
tów Slices
Lekcja powinna zakończyć się po około 120 minutach całkowitym opa-
nowaniem materiału. Wykonywane ćwiczenia dotyczą programu Adobe
Photoshop oraz ImageReady. Przygotuj się do ćwiczenia i skopiuj do lo-
kalnego katalogu Moje dokumenty katalog Photoshop Lekcja8 z
podanej przez prowadzÄ…cego lokalizacji.
Rozpoczynamy pracÄ™
W dzisiejszej lekcji stworzymy baner reklamowy na stronÄ™ WWW. Wy-
korzystamy w nim techniki Slices oraz Rollovers. Obejrzymy jednak
najpierw jak wygląda efekt końcowy w przeglądarce internetowej.
Przed rozpoczęciem pracy przywróć domyślne ustawienia aplikacji
(otwarte palety, ustawienia narzędzi). Zobacz  Lekcja 1  Rozpoczęcie
pracy z programem .
1 Uruchom przeglądarkę internetową, np. Internet Explorer i otwórz
plik banner.html z katalogu Phtoshop-Lekcja8/Koniec/Strona Archi-
tech.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
3
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Plik zawiera wygenerowany kod HTML, który łączy poszczególne części
grafiki internetowej, wszystkie sÄ… utworzone w Photoshopie i ImageRe-
ady. Każde ze słów  projekty ,  konstrukcje ,  sztuka i  kontakt mogą
znajdować się w dwóch odmiennych stanach:  wciśnięty  obrazek się
zmienia, kiedy klikasz na nim myszkÄ… oraz  myszka nad  obrazek siÄ™
zmienia, kiedy ustawisz myszkÄ™ nad obrazkiem.
2 Przesuń myszkę nad przyciskami na banerze.
Zauważ jak zmienia się obrazek, kiedy najeżdżasz myszką nad po-
szczególne słowa-przyciski.
Możesz utworzyć dwa różne efekty rollovers, które pojawiają się w
momencie, kiedy najeżdżasz myszką nad przycisk i kiedy wciskasz ten
przycisk. Można również podłączyć pod przycisk adres URL, który prze-
niesie nas do innej strony internetowej w momencie, kiedy na niego
klikniesz.
3 Kliknij teraz myszką na poszczególnych przyciskach: Projekty,
Konstrukcje, Sztuka i Kontakt i zobacz jak zmienia się słowo  ar-
chitech oraz jak przeglÄ…darka zmienia strony.
4 Jeśli zrozumiałeś jak działa nasza baner, zamknij przeglądarkę i
przejdz
do właściwej lekcji.
O technice Slices
Slices są to powierzchnie na obrazku, które są zdefiniowane na podsta-
wie warstw, linii pomocniczych, precyzyjnej selekcji lub użycia narzę-
dzia Slice Tool. Kiedy definiujesz slices na obrazie, Photoshop lub Ima-
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
4
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
geReady tworzy w języku HTML tablicę lub styl kaskadowy z dokładnym
opisem obrazu podzielonego na bloki.
Możesz optymalizować każdą część podzielonego obrazu indywidualnie,
dodawać do niej kod HTML i tekst. Możesz dołączyć do niej adres URL,
a w programie ImageReady utworzyć efekt Rollovers, podmieniając ob-
raz częściami.
W tej lekcji nauczysz się wykorzystywać technikę Slice w programie
Adobe Photoshop i ImageReady, optymalizować części obrazu, tworzyć
efekty Rollover dla przycisków banera.
Dzielenie obrazu w Photoshopie
Adobe Photoshop daje tobie możliwość podzielenia obrazu na części
przy pomocy narzędzia Slice Tool lub konwersję warstwy na slices.
Rozpoczniemy naukę od zdefiniowania na obrazie przycisków przy po-
mocy narzędzia Slice Tool. Nazwiemy każdy zdefiniowany przycisk,
przypiszemy do niego adres URL i zoptymalizujemy je stosujÄ…c zapis
dla WEB. Następnie będziemy kontynuować dzielenie obrazu banera w
programie Image Ready i zastosujemy tam efekt Rollovers dla przyci-
sków.
Tworzenie stron WWW z wykorzystaniem Photoshopa i Image-
Ready (tłumaczenie z wbudowanej pomocy Adobe Photoshop)
Podczas tworzenia stron internetowych z użyciem aplikacji Adobe Pho-
toshop i ImageReady pamiętaj o narzędziach i opcjach dostępnych w
każdej z nich.
" Photoshop zawiera narzędzia do tworzenia i manipulacji statycznymi
obrazami i pozwala przygotować je dla potrzeb stron WWW. Możesz
dzielić obraz na części, dodawać do każdej z nich hiperłącza i tekst w
kodzie HTML, optymalizować obraz częściami i zapisywać jako stronę
WWW.
" ImageReady wspiera wiele z funkcji, które są dostępne w Photosho-
pie, ale posiada też specjalistyczne narzędzia dla tworzenia dynamicz-
nych stron WWW, np. z wykorzystaniem animowanych obrazków i efek-
tów rollovers.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
5
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Użycie narzędzia Slice dla podzielenia obrazu na części
Narzędzia Slice Tool użyjesz w celu zdefiniowania prostokątnych obsza-
rów na obrazie i podzielenia go na części. Części obrazu uzyskane przy
użyciu tej techniki nazywane są w programie jako user-slice. Kiedy
zdefiniujesz na obrazie obiekty user-slice, program Photoshop lub Ima-
ge Ready automatycznie zamienia wszystkie niezdefiniowane części ob-
razu, powstałe po podziale użytkownika, na tzw. auto-slice. Przy użyciu
narzędzia Slice Tool utworzymy teraz cztery obiekty user-slice dla przy-
cisków na naszym banerze.
1 Uruchom program Adobe Photoshop.
2 Otwórz plik L8_slice&rollowers_pocz.psd z katalogu Phtoshop-
Lekcja8/PoczÄ…tek.
Poziome i pionowe linie pomocnicze zostały dodane do pliku w celu uła-
twienia tobie zdefiniowania przycisków na banerze reklamowym.
3 Jeśli nie widzisz na obrazie linii pomocniczych, wybierz View
Show Guides.
Podzielimy teraz części obrazu z tekstem na cztery przyciski.
4 Wybierz View Show Slices.
Numer (01) oraz ikona podziału - pojawią się w lewym górnym ro-
gu okna obrazu. Numer oznacza aktualny podział obrazu na części.
5 Wybierz narzędzie Slice Tool - .
Przejrzyj opcje narzędzia Slice Tool: Slice Style, Line Color itd.
Aby uprościć sobie zadanie rysowania narzędziem Slice Tool obszarów
pod przyciski, możesz włączyć przyciąganie do prowadnic oraz przycią-
ganie do obiektów slice.
6 Jeśli aktualnie nie jest włączone przyciąganie do prowadnic, wybierz
View Snap To Guides.
7 Jeśli aktualnie nie jest włączone przyciąganie do slices, wybierz
View Snap To Slices.
8 Przy użyciu narzędzia Slice Tool narysuj prostokątne zaznaczenie
obejmujące tekst  Projekty , linie zaznaczenia powinny ułożyć się na
liniach pomocniczych. Kiedy zwolnisz przycisk myszki, Photoshop
utworzy obiekt Slice i przypisze jemu kolejny numer, który pojawi
się w górnym lewym rogu nowej części obrazu.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
6
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Powierzchnie z lewej, prawej i dolnej części zaznaczonego przez użyt-
kownika obszaru zostanÄ… automatycznie podzielone i uzyskajÄ… numerki
01, 02, 04, 05, natomiast numerkiem 03 zostanie oznaczony slice
użytkownika.
Domyślnie obraz jest podzielony na Nowo utworzona część obrazu uzyska
jedną część, która obejmuje całość numerek 03
9 Przy użyciu narzędzia Slice Tool podziel obraz na kolejne części,
tworzÄ…c przyciski  Konstrukcje ,  Sztuka i  Kontakt .
Upewnij się, że miedzy podzielonymi częściami obrazu nie ma przerw,
ponieważ zostaną one automatycznie zamienione na obiekty auto-
slices. Jeśli będzie to potrzebne, powiększ obraz, poprawi to znacznie
precyzję narzędzia Slice Tool.
Zauważ, że po każdym utworzonym przez użytkownika podziale, auto-
matycznie są przenumerowywane pozostałe części obrazu.
Obiekty auto-slice są przenumerowywane za każdym razem kiedy tworzysz
nowy user-slice
10 Jeśli chcesz zmienić rozmiar obiektu slice, wybierz narzędzie Slice
Select Tool - ukryte pod narzędziem Slice Tool. Następnie wy-
bierz węzeł i przeciągnij go w odpowiednim kierunku.
11 Zapisz swojÄ… pracÄ™.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
7
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Typy obiektów Slice (tłumaczenie z wbudowanej pomocy Adobe
Photoshop)
Segmenty (Slice), które tworzysz przy pomocy narzędzia Slice Tool na-
zywane są user-slices; segmenty, które powstały z przekształcenia
warstwy sÄ… nazywane layer-based slices. Kiedy tworzysz nowy user-
slices lub layer-based slices, automatycznie sÄ… generowane dodatkowe
segmenty, aby zapełnić pozostałą cześć obrazu. Inaczej mówiąc, seg-
menty auto-slices wypełniają niezdefiniowane przez użytkownika części
obrazu. Segmenty auto-slices są przenumerowywane za każdym razem
gdy definiujesz obiekt user-slices lub layer-based slices. User-slices
layer-based slices oraz auto-slices różnią się wyglądem. Segmenty
user-slices i layer-based slices są obrysowane ciągłą linią, a segmenty
auto-slices liniÄ… kropkowanÄ….
Obiekt subslice jest podtypem segmentu auto-slice i powstaje w mo-
mencie, kiedy tworzone przez ciebie segmenty nakładają się na siebie.
Subslice informuje jak powinien być podzielony obraz, kiedy zapiszesz
zoptymalizowany plik. Nie masz możliwości zaznaczania lub edytowania
tych obiektów oddzielnie. Są one automatycznie zmieniane, kiedy prze-
organizujesz główne obiekty slices.
Ustawianie opcji dla obiektów slices w Photoshopie
Przed optymalizacją segmentów slices, możesz ustawić opcje dla nich,
takie jak nazwa segmentu lub przypisanie adresu URL. Nazwy, które
będziesz nadawać segmentom slices narzucają nazwę dla zoptymalizo-
wanych plików części obrazu.
W tej części lekcji nazwiesz cztery obiekty user-slices, które przedtem
utworzyłeś. Następnie przypiszesz każdemu z nich pustą stronę WWW,
która będzie wyświetlana w przeglądarce jako osobne okno przeglądar-
ki. Wprowadzimy również zastępczy tekst dla przeglądarek, które nie
potrafią wyświetlać grafiki lub mają tą funkcję wyłączoną.
Zapamiętaj: Ustawienie opcji dla obiektu auto-slices automatycznie
zamienia go na obiekt user-slices.
1 Wybierz narzędzie Slice Select Tool - i użyj go do zaznaczenia
segmentu Projekty.
Pasek opcji narzędzia zmieni się teraz i wyświetli ustawienia dotyczące
zaznaczonego obiektu.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
8
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
2 Kliknij przycisk Slice Options na pasku opcji.
Domyślnie Photoshop nazywa każdy segment, zachowując nazwę pliku
oryginalnego pliku i dodaje numer segmentu.
3 W oknie dialogowym Slice Options wprowadz
Projekty_przycisk
w polu Name, Projekty.html w polu URL, _blank w polu Target
oraz Projekty w polu Alt Tag. Następnie kliknij OK.
Ustawianie opcji dla segmentu Projekty w programie Phtoshop
4 Powtórz wszystkie operacje dla kolejnych trzech przycisków. Aby
przyspieszyć pracę możesz wybrać segment narzędziem Slice Se-
lection Tool i kliknąć na nim dwukrotnie, aby wywołać okno opcji
segmentu. W polu Name wpisz kolejno Konstrukcje_przycisk,
Sztuka_przycisk, Kontakt_przycisk; w polu URL: Konstruk-
cje.html, Sztuka.html, Kontakt.html; w polu Alt Tag: Kon-
strukcje, Sztuka, Kontakt jako alternatywny tekst.
W oknie dialogowym Slice Options możesz również określić tekst, który
będzie pojawiać się w przeglądarce na pasku Status, określić rozmiar
segmentu oraz zamienić go na obiekt bez grafiki, ale zawierający kod
HTML i tekst. Dodatkowe ustawienia pojawiÄ… siÄ™ w momencie zapisy-
wania grafiki jako strony sieci WWW optymalizacji plików.
5 Zapisz swojÄ… pracÄ™.
Optymalizacja segmentów slices w Photoshopie
W Photoshopie będziesz optymalizować segmenty slices przez zazna-
czenie ich w oknie dialogowym Save For Web. Następnie dla każdego
segmentu będziesz mógł wybrać indywidualne ustawienia optymalizacji.
Photoshop tworzy specjalny folder do przechowywania zoptymalizowa-
nych plików. Teraz zapiszesz do pliku cztery zdefiniowane wcześniej
segmenty.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
9
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
1 Wybierz File Save for Web.
2 Następnie wybierz narzędzie Slice Select Tool - w oknie dialo-
gowym Save for Web.
3 Naciśnij klawisz Shift i zaznacz do dalszej obróbki wszystkie cztery
segmenty.
4 Z menu Settings wybierz GIF Web Palette i kliknij OK.
5 W oknie dialogowym Save Optimized As, wybierz Images Only z
menu Format, wybierz Selected Slices z dolnego rozwijanego me-
nu, nazwÄ™ pozostaw niezmienionÄ…, a jako folder wybierz Phtoshop-
Lekcja8/Poczatek/Strona Architech i kliknij Save.
Photshop zapisze zoptymalizowane obrazy w folderze Images, jako
nazw plików użyje nazw z okna dialogowego Slice Options. Jeśli między
segmentami były przerwy, zostaną one zapisane w pliku Spacer.gif.
6 Zapisz swoja pracÄ™.
Dzielenie obrazu w ImageReady
Podobnie jak w Photoshopie, w ImageReady istnieje możliwość wyko-
rzystania narzędzia Slice Tool lub konwersji warstwy na segment Slice.
Dodatkowo istnieje możliwość zdefiniowania wszystkich segmentów,
powstałych z konwersji obrazu podzielonego liniami pomocniczymi. Ist-
nieje też możliwość utworzenia precyzyjnego kształtu segmentu przez
konwersję selekcji na slice. W tej części lekcji, utworzysz segment
przez konwersję warstwy na slice oraz utworzysz precyzyjny kształt
segmentu bez obrazu przez konwersjÄ™ selekcji.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
10
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Tworzenie Slices za pomocÄ… linii pomocniczych
W programie ImageReady, masz możliwość konwersji wszystkich po-
wierzchni, powstałych po narysowaniu linii pomocniczych (guides), na
obiekty user-slices. Podczas konwersji linii pomocniczych na segmenty,
cały obraz zostaje podzielony automatycznie, a ewentualne już istnieją-
ce segmenty będą utracone.
1 W programie Photoshop, kliknij na przycisk przełączający do pro-
gramu ImageReady (Jump to Image Ready - ).
Podczas tej operacji, automatycznie w programie ImageReady zostanie
otwarty dokument edytowany w Photoshopie.
2 Wybierz View Show Slices.
3 Wybierz Window Show Slices, aby wyświetlić paletę Slice. Na-
stępnie wybierz z menu palety Show Options, aby rozszerzyć do-
stępne opcje.
Zauważ, że lista opcji dla palety Slice jest podobna do opcji dotępneych
w Photoshopie.
4 Wybierz teraz narzędzie Slice Select Tool - i zaznacz segment
Projekty.
Rozszerzenie opcji palety Slice w ImageReady
Zauważ, że wszystkie ustawione przez nas opcje w programie Photos-
hop, pojawiły się teraz w palecie Slice w ImageReady.
5 Jeśli linie pomocnicze nie są teraz widoczne, wybierz View Show
Guides.
6 Wybierz Slices Create Slices from Guides.
Jest to szybka metoda do utworzenie segmentów z każdej prostokątnej
powierzchni między liniami pomocniczymi.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
11
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
7 Użyj ponownie narzędzia Slice Select Tool, aby zaznaczyć segment
Projekty.
Zauważ, że po tej operacji, wszystkie segmenty zmieniły numerację i
że straciliśmy wszystkie dane wprowadzone w Photoshopie. Dlatego
cofniemy teraz tą operację i zawsze stosujmy ją rozważnie.
8 Wybierz Edit Undo Create Slices from Guides.
Tworzenie Slices z warstw
Inną metodą prowadzącą do uzyskania segmentów jest konwersja z
poszczególnych warstw. Segmenty layer-based slices zawierają wszyst-
kie piksele na warstwie. Kiedy wprowadzasz jakieÅ› zmiany na warstwie,
przenosisz jÄ…, stosujesz jakieÅ› efekty, segmenty automatycznie aktuali-
zują swoją zawartość. Możesz także oddzielić tak stworzony segment i
przekonwertować go na user-slice, aby zachować jego zawartość.
Teraz utworzymy segment przez konwersjÄ™ warstwy z informacjami o
autorze a następnie zastosujemy do tej warstwy efekt i zobaczymy jak
się zmieni utworzony wcześniej segment.
1 W palecie Layers rozwiń grupę Pasek informacyjny i wybierz war-
stwÄ™ Tlo paska.
Warstwa tła jest wypełniona białym kolorem i przechodzi przez wszyst-
kie przyciski na dole banera.
2 Wybierz Layer New Layer Based Slice.
ImageReady zamieni teraz obiekt auto-slices na layer-based slices, po-
wstały z zaznaczonej warstwy. Ikona informacyjna - , która znajduje
się w górnej, lewej części obrazu oznacza, że segment powstał z war-
stwy. Teraz zastosujemy efekt na tej warstwie.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
12
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
3 Z zaznaczonÄ… warstwÄ… Tlo paska, wybierz Layer Layer Style
Outer Glow.
Zauważ, że po zastosowaniu tego efektu, linie, które wyznaczają seg-
ment, zostaną rozszerzone tak, aby objąć nowy obszar.
Przed zastosowaniem efektu Po zastosowaniu efektu
4 Wybierz Edit Undo Outer Glow, aby wycofać z tego efektu.
5 Zapisz swojÄ… pracÄ™.
Tworzenie segmentów bez grafiki
Zarówno w programie Adobe Photoshop jak i Image Ready, możesz
utworzyć segment bez grafiki i dodać do niego tekst lub kod HTML. Ta-
kie segmenty mogą mieć kolorowe jednolite tło i zapisane jak inne w
tablicy w języku HTML.
Podstawową cechą, która wyróżnia tego typu obiekty jest to, że mogą
one póz
niej być edytowane w dowolnym zewnętrznym edytorze HTML,
bez uruchamiania Photoshopa lub ImageReady. NegatywnÄ… cechÄ… jest
natomiast to, że jeśli tekst będzie zbyt duży, aby zmieścić się w tym
segmencie, zostanie on obcięty w tabeli HTML i utworzy się przerwa.
Teraz przekonwertujemy segment Tlo paska na segment bez grafiki i
dodamy do niego tekst.
1 Upewnij się, że segment powstały z warstwy Tlo paska jest zazna-
czony.
2 W palecie Slice wybierz opcjÄ™ No Image z menu Type.
3 W polu Text wprowadz
informacje o tym, kto jest autorem banera.
Tekst, który wprowadziłeś, pojawi się dopiero w przeglądarce interne-
towej i nie będzie widoczny w Photoshopie i ImageReady.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
13
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Uwaga: Aby wprowadzić znak ©, możesz wykorzystać metodÄ™ wpro-
wadzania znaków specjalnych za pomocą podania kodu ASCII potrzeb-
nego znaku. Naciśnij klawisz Alt i wpisz 0169 z klawiatury numerycz-
nej.
Ponieważ wybrałeś segment bez grafiki, to, co widzisz na warstwie w
ImageReady nie będzie widoczne w przeglądarce internetowej.
4 Zapisz swojÄ… pracÄ™
PodglÄ…d w przeglÄ…darce internetowej
Aby zobaczyć, jak wprowadzony tekst będzie wyglądać w przeglądarce
internetowej, możemy włączyć podgląd naszej pracy w systemowej
przeglÄ…darce WWW.
1 Na pasku narzędzi kliknij przycisk Preview In Default Browser -
, jeśli w systemie jest zainstalowych kilka przeglądarek, wybierz
preferowanÄ… przez siebie.
Edytowany obraz zostanie wyświetlony wraz z kodem HTML w oknie
przegladrki.
2 Kiedy obejrzysz swoją pracę w przeglądarce, zamknij ją, aby powró-
cić do ImageReady.
Tworzenie segmentów z selekcji
W programie ImageReady najprostszÄ… metodÄ… utworzenia segmentu z
małego lub niezwykłego kształtu jest wybranie narzędzia Magic Wand
Tool i zamiana selekcji na slice.
Użyjemy tej metody do zaznaczenia niebieskiego pierścienia w logo i
zamienimy selekcjÄ™ na segment.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
14
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
1 W palecie Layers rozwiń grupę Logo i zaznacz warstwę Duzy
okrag.
2 Wybierz narzędzie Magic Wand Tool - .
3 Kliknij narzędziem na niebieskiej powierzchni logo, aby utworzyć
zewnętrzną krawędz
selekcji.
Powstała selekcja posłuży nam do utworzenia segmentu, którego
kształt będzie odpowiadać zewnętrznej krawędzi selekcji.
4 Wybierz Slices Create Slice from Selections.
Zauważ, że przestrzeń wokół zaznaczenia zostanie automatycznie po-
dzielona na części, aby uzupełnić tabelę.
Zaznaczenie elementu graficznego Konwersja selekcji na slice
przy pomocy narzędzia Magic Wand
Tool
5 W palecie Slice, wprowadz
Logo w polu Name, Home.html w polu
URL, oraz Home w polu Alt. Z rozwijanego menu w polu Target
wybierz _blank.
6 Wybierz Select Deselect, aby pozbyć się zaznaczenia.
7 Zapisz swojÄ… pracÄ™.
Optymalizacja slice w programie ImageReady
ImageReady przechowuje ustawienia optymalizacji oddzielnie dla każ-
dego zapisywanego segmentu. Możesz też użyć jednakowych ustawień
dla wszystkich segmentów, jeśli zaznaczysz je w palecie Optimize. Na-
stępnie zaznaczone segmenty możesz zapisać w plikach.
W tej części, nauczysz się zapisywać zoptymalizowane pliki w progra-
mie ImageReady, a następnie łączyć je razem w celu uzyskania jedna-
kowych opcji optymalizacji.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
15
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
1 Wybierz narzędzie Slice Select Tool - .
2 Wybierz segment (auto-slices) o numerze 02.
3 Kliknij na zakładce 2-UP w oknie dokumentu, aby wyświetlić obok
oryginalnego obrazu, jego zoptymalizowanÄ… wersjÄ™.
4 Wybierz powiększenie 200% z rozwijanego menu Zoom Level, w
dolnym lewym rogu okna dokumentu.
Zauważ, że przy domyślnych ustawieniach (GIF Web Palette), jakość
zoptymalizowanego obrazu jest dużo gorsza niż jakość oryginału.
5 Jeśli nie widzisz palety Optimize, wybierz Window Show Opti-
mize, aby ją wyświetlić.
6 W palecie Optimize, wybierz GIF32 Dithered z menu Settings.
Zauważ, że jakość optymalizacji poprawiła się w stosunku do pierwot-
nych ustawień.
Ustawienie GIF Web Palette Ustawienie GIF32 Dithered
7 Zmień powiększenie z powrotem na 100%.
8 Jeśli chcesz, możesz wyłączyć numerki segmentów, przez kliknięcie
na przełączniku Toggles Slices Visibility - na pasku narzędzi.
9 Wybierz na obrazie inny segment auto-slices.
Zauważ, że po wybraniu innego segmentu, który został utworzony au-
tomatycznie, opcje optymalizacji są ustawione takie same, jak te, które
wcześniej ustawiliśmy. Dzieje się tak, dlatego, że wszystkie obiekty au-
to-slices są połączone razem.
A
ączenie segmentów razem
W programie ImageReady, możesz połączyć segmenty razem, co
umożliwia zmianę opcji optymalizacji we wszystkich połączonych seg-
mentach razem. Połączone segmenty są oznaczone innym kolorem, co
pozwala łatwo je odróżnić.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
16
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
1 Naciśnij teraz klawisz Shift i przy pomocy narzędzia Slice Select
Tool - zaznacz wszystkie przyciski, oraz segment automatycznie
utworzony z prawej strony przycisku Kontakt na zoptymalizowa-
nym obrazie.
Przy zaznaczaniu kieruj się zasadą, jeśli jako pierwszy zaznaczysz seg-
ment user-sleices a następnie pozostałe segmenty, dowolnego typu to
przy połączeniu ich razem, wszystkie przybiorą ten sam tryb  user-
slices. I podobnie, jeśli pierwszy będzie typu auto-slices, to w efekcie
wszystkie zaznaczone segmenty przybiorÄ… ten typ.
2 Wybierz Slices Link Slices.
Po tej operacji w połączonych segmentach w górnym lewym rogu poja-
wi się ikona łącznika - , kolory linii i pozostałych ikon zmienią się na
kolor czerwony.
Segmenty rozłączone Segmenty połączone
3 Kliknij teraz poza selekcją, a następnie kliknij z prawej strony seg-
mentu Kontakt.
Zauważ, że wcześniej ustawiona opcja optymalizacji GIF32 Dithered
została zmieniona na GIF Web Palette.
4 Kliknij teraz na zakładce Original w oknie dokumentu, aby powrócić
do pojedynczego widoku obrazu.
5 Zapisz swojÄ… pracÄ™
Zapiszemy zoptymalizowane segmenty obrazu nieco póz
niej, po utwo-
rzeniu efektu rollovers.
Tworzenie efektu rollovers
Program ImageReady pozwala tworzyć tzw. efekt rollovers z segmen-
tów oraz map powierzchni obrazu. Rollover to efekt polegający na
podmianie zdefiniowanej części obrazu na inny w momencie najechania
na niego myszką lub kliknięcia na tym obszarze. Inną odmianą tej
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
17
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
techniki jest podmiana obrazu w innym miejscu niż w tym, który został
zdefiniowany do identyfikacji zdarzenia najazdu lub kliknięcia myszką.
Możesz uzyskać różne efekty, kiedy zdefiniowana powierzchnia znajdu-
je się w jednym z następujących stanów: Normal, Over, Down, Click,
Out, Up. Wszystkie efekty sÄ… tworzone i rozpoznawane za pomocÄ…
skryptu Java, można również utworzyć specyficzne określone przez
użytkownika stany i akcje z nimi związane. Można również przechować
stan, w którym znajduje się dany przycisk i wykorzystać go póz
niej.
W dalszej części lekcji, utworzysz efekt rollovers dla przycisków tek-
stowych, będzie on polegał na pokazaniu w momencie najazdu na
myszką, inną warstwę. Zastosujesz też zmianę tekstu nazwy firmy w
momencie, gdy będą klikanie przyciski.
Wyświetlanie wygiętego tekstu przy stanie przycisku Over
Utworzymy teraz efekt wygięcia tekstu  Architech w momencie naje-
chania myszkÄ… nad przycisk Kontakt.
1 Wybierz Window Show Rollover, aby wyświetlić paletę Rol-
lover.
2 Przy użyciu narzędzia Slice Select Tool - zaznacz segment
przycisku Kontakt.
3 W palecie Rollover, kliknij przycisk Create New Rollover State -
, w celu utworzenia nowego stanu dla wybranego segmentu.
Możesz ustawić następujące stany dla efektów rollovers: Over, Down,
Click, Out, Up, Custom i None.
Stan przycisków dla efektu Rollovers (tłumaczenie z wbudo-
wanej pomocy Adobe Photoshop)
Over  stan podczas przeciÄ…gania myszkÄ… nad segmentem lub mapÄ…
na obrazie, przycisk myszki niewciśnięty.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
18
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Down  stan podczas wciśnięcia przycisku myszki na zdefiniowanym
obszarze obrazu (utrzymuje się tak długo, jak długo zostaje wciśnięty
przycisk myszki).
Click  stan, który pojawia się po kliknięciu na segment lub mapę na
obrazie (utrzymuje się tak długo dopóki nie pojawi się nowe działanie).
Out  stan segmentu, kiedy myszka znajduje siÄ™ poza jego obszarem
(jest to normalny stan przycisku)
Up  stan, który pojawia się w momencie zwolnienia wciśniętego przy-
cisku myszki nad segmentem lub mapÄ… na obrazie.
Custom  stan utworzony przez użytkownika (musi być utworzony w
kodzie JavaScript i dodany do kodu HTML strony WWW).
None  zachowany bieżący stan przycisku z przeznaczeniem póz
niej-
szego użycia (nie jest widoczny na stronie WWW).
Uwaga: Różne przeglądarki lub różne wersje przeglądarek interneto-
wych mogą inaczej traktować pojedyncze i podwójne kliknięcie mysz-
ką, np. niektóre przeglądarki ustawiają przycisk w stan Click po po-
dwójnym kliknięciu, a niektóre w stan Up. Aby być pewnym jak zacho-
wa siÄ™ konkretna przeglÄ…darka, musisz podczas tworzenia strony
sprawdzać jej działanie w różnych (najbardziej popularnych) przeglą-
darkach.
4 W palecie Layers, wskaż warstwę tekstowa Architech.
5 Wybierz narzędzie Type Tool - .
6 Na pasku opcji, kliknij przycisk Created Warped Text - , aby
zmienić wygląd tekstu na warstwie Archirtech.
7 W oknie dialogowym Warp Text, wybierz styl wygięcia tekstu np.
Bulge z menu Style. Przesuń okno dialogowe, aby zobaczyć pod-
gląd zastosowanego stylu (opcja Preview powinna być włączona).
Spróbuj zastosować inny styl i dopasuj go za pomocą suwaków. Jeśli
będziesz zadowolony, kliknij OK.
Zastosowany styl dotyczy stanu przycisku w położeniu Over, czyli po-
jawi siÄ™ w przeglÄ…darce dopiero w momencie najechania na niego
myszkÄ….
8 Rozwiń teraz grupę efektów zastosowanych na warstwie Architech i
kliknij na efekt Drop Shadow. W palecie Drop Shadow, zmień ko-
lor cienia, który powstaje pod napisem, na niebieski (menu rozwija-
ne Color).
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
19
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Normalny stan przycisku Kontakt Stan Over przycisku Kontakt
9 W palecie Rollovers, kliknij na przycisku Norma.
10 Zapisz swojÄ… pracÄ™.
Podgląd działania efektu rollovers w ImageReady
Program ImageReady umożliwia szybki podgląd działania efektu rol-
lovers bez potrzeby uruchamiania podglÄ…du w przeglÄ…darce interneto-
wej. W ImageReady zaimplementowano technikÄ™ podglÄ…du z przeglÄ…-
darki Internet Explorer 5.0 dla Windows.
1 Wybierz View Show Guides, aby ukryć linie pomocnicze.
2 Kliknij przełącznik Toggles Slices Visibility - na pasku narzę-
dzi, aby ukryć podział na segmenty.
3 Kliknij na przycisk Rollover Prewiev - na paku narzedzi.
4 Przesuń wskaz
nik myszki nad przycisk Kontak i zobacz jak zacho-
wuje siÄ™ tekst  Architech .
5 Wyłącz podgląd działania efektu Rollovers (kliknij powtórnie na
przycisk Rollover Prewiev - ).
6 Włącz podgląd podziału obrazu na segmenty.
Włączanie lub wyłączanie warstw dla utworzenia Rollovers
Teraz zastosujemy stan Down dla przycisków  Projekty ,  Konstrukcje
i  Sztuka w celu urywania niektórych literek z napisu  Architech w
momencie wciśnięcia przycisku myszki. Następnie dodamy jeszcze stan
Over, za pomocą, którego będziemy włączać normalnie niewidoczne
warstwy w momencie najechania na nie myszkÄ….
1 Wybierz narzędzie Slice Select Tool - .
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
20
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
2 Zaznacz przycisk Projekty na obrazie.
3 W palecie Rollovers, kliknij przycisk tworzenia nowego stanu Cre-
ate New Rollover State - . Zrób to dwukrotnie, aby powstały
dwa odmienne stany Over oraz Down.
4 Wybierz przycisk oznaczony jako Down.
5 W palecie Layers wybierz zgrupowanÄ… warstwÄ™ Podswietlenie Ar-
chitech.
Zauważ, że poprzedni biały tekst  Architech zostanie przykryty niebie-
skim. Ukryjemy teraz część niebieskich liter.
6 Rozwiń grupę Podświetlanie Architech i kliknij na ikonie z okiem -
z lewej strony czterech ostatnie litery z napisu  Architech (każda
z nich znajduje siÄ™ na osobnej warstwie, sÄ… to litery  t-e-c-h ).
Przyciski Projekty w nor- Ukryte warstwy w położeniu Down przycisku Projek-
malnym stanie ty
Teraz, jeśli przycisk będzie w położeniu Down litery  archi w napisie
będą niebieskie, a litery  tech białe.
Zajmiemy się teraz położeniem przycisku Over.
7 W palecie Rollovers kliknij na przycisk oznaczony Over.
8 W palecie Layers kliknij i rozwiń zgrupowana warstwę Rollovery.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
21
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
9 Kliknij na ikonę z okiem - , tak, aby pozostawić widoczną tylko
warstwÄ™ Dla projektow.
10 Powtarzaj teraz kroki od punktu 2 do 9 dla przycisków Konstrukcje
oraz Sztuka. Poniżej w tabelce podano, które warstwy należy ukryć
a które pokazać dla poszczególnych przycisków.
Dla segmentu Ukryj te warstwy dla położe- Pokaż te warstwy dla poło-
przycisku nia Down żenia Over
Projekty Górne cztery litery (h,c,e,t) Dla projektow w zgrupo-
w zgrupowanej palecie Pod- wanej warstwie Rollovers
swietlenie Architech
Konstrukcje Dolne cztery litery (h, c, r, Dla konstrukcji w zgru-
a) w zgrupowanej palecie powanej warstwie Rol-
Podświetlenie Architech lovers
Sztuka Cztery litery (e, t, r, a) w Dla sztuki w zgrupowanej
zgrupowanej palecie warstwie Rollovers
Podświetlenie Architech
11 Zapisz swojÄ… pracÄ™.
PodglÄ…d gotowego banera w przeglÄ…darce internetowej
Przed zapisaniem kompletnego baneru w przeglÄ…darce internetowe, zo-
baczymy jak wygląda w przeglądarce internetowej. Ponieważ przypisa-
ne przez nas adresy URL nie będą na razie pracować, zobaczymy ich
działanie póz
niej po całkowitym zapisaniu kodu HTML.
1 Na pasku opcji kliknij przycisk Preview In Default Browser - .
2 Przesuń myszkę na każdy przycisk i zobacz czy działają poprawnie,
zgodnie z założeniami.
Różne obrazki powinny pojawiać się w momencie najechania myszką
któryś z trzech pierwszych przycisków oraz powinien zostać wygięty
tekst  Architech na czwartym przycisku.
3 Przytrzymaj wciśnięty przycisk myszki najeżdżając na każdy z przy-
cisków.
Na różnych przyciskach, powinny zmienić kolor na niebieski różne litery
w napisie  Architech .
4 Po sprawdzeniu wszystkich przycisków, zamknij przeglądarkę i po-
wróć ImageReady.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
22
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Zapisanie zoptymalizowanego obrazu w ImageReady
Teraz, kiedy baner jest kompletny, możemy zoptymalizować go, zapi-
sując w pliku i wygenerować kod HTML zawierający tabelę umieszcze-
nia segmentów. ImageReady pozwala także na zapisanie rozmieszcze-
nia segmentów za pomocą stylów kaskadowych CSS.
1 Wybierz File Save Optimized.
2 W oknie dialogowym Save Optimized, wpisz bander.html w polu
Name. Z menu Format wybierz HTML and Images, wybierz All
Slices z rozwijanego menu a plik umieść w katalogu Phtoshop-
Lekcja8/Poczatek/Strona Architech i kliknij Save.
Pojawi się teraz pole dialogowe Replace Files dla czterech przycisków,
które już wcześniej zapisaliśmy w Photoshopie.
3 Kliknij Replace, aby zapisać nowe wersje tych plików.
Program ImageReady utworzy teraz tabelÄ™ HTML z rozmieszczeniem
wszystkich segmentów na obrazie banera i zapisze w pliku HTML. Zapi-
sze też wszystkie zoptymalizowane fragmenty obrazu dla wszystkich
segmentów auto-slices, user-slices, layer-based slices oraz wszystkie
stany efektu rollovers w katalogu Images.
4 Aby przetestować jak działają hiperłącza wprowadzona przez nas dla
wszystkich przycisków, uruchom przeglądarkę internetową i otwórz
w niej plik baner.html.
Zakończyliśmy tworzenie banera reklamowego. Wykorzystaliśmy w nim
technikę tworzenia segmentów Slices oraz efekt Rollovers.
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław
23
Lekcja 8
Adobe Photoshop  Wykorzystanie technik Slices i Rollovers
Pytania kontrolne
1 Co to jest Slices (segment)?
2 Opisz kilka technik tworzenia Slices w programie Photoshop i Ima-
gaReady.
3 Jakie typy obiektów Slices możesz wymienić?
4 Jaka jest korzyść z łączenia segmentów razem?
5 Jaką dostrzegasz negatywną cechę łączenia segmentów razem?
6 Opisz metodę za pomocą, której można utworzyć Slices z bardzo
małych obiektów i obiektów o nietypowym kształcie.
7 Opisz dwa stany, w których może znajdować się przycisk w efekcie
Rollovers oraz jego zachowanie w przeglÄ…darce internetowej.
8 Opisz prostÄ… metodÄ™ utworzenia przycisku z efektem Rollovers.
9 W jakich stanach może znajdować się przycisk w efekcie Rollovers
(opisz je krótko)?
10 Jak można sprawdzić efekty pracy z zastosowaniem technik Slices i
Rollovers?
Materiały szkoleniowe do użytku wewnętrznego CKP Wrocław