23
Adobe Photoshop – Wykorzystanie technik Slices i Rollovers
8
Wykorzystanie technik Slices i Rollovers
W programie Adobe Photoshop i ImageReady istnieje możliwość podzielenie obrazu na samodzielne bloki (Slices), co umożliwia nam zapisania 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 wykorzystaniu 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 grafiki
· Tworzenie efektu Rollovers na banerach reklamowych
· Podmianę tekstu na stronie WWW z zastosowaniem odmiennego stylu tekstu
· Ukrywanie lub pokazywanie warstwy na stronie WWW przez najechanie myszką
· Tworzenie kodu HTML zawierającego tabelę rozmieszczenia obiektów Slices
Lekcja powinna zakończyć się po około 120 minutach całkowitym opanowaniem materiału. Wykonywane ćwiczenia dotyczą programu Adobe Photoshop oraz ImageReady. Przygotuj się do ćwiczenia i skopiuj do lokalnego katalogu Moje dokumenty katalog Photoshop–Lekcja8 z podanej przez prowadzącego lokalizacji.
W dzisiejszej lekcji stworzymy baner reklamowy na stronę WWW. Wykorzystamy 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 Architech.
Plik zawiera wygenerowany kod HTML, który łączy poszczególne części grafiki internetowej, wszystkie są utworzone w Photoshopie i ImageReady. 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 poszczegó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 przeniesie 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 „architech” oraz jak przeglądarka zmienia strony.
4 Jeśli zrozumiałeś jak działa nasza baner, zamknij przeglądarkę i przejdź do właściwej lekcji.
Slices są to powierzchnie na obrazku, które są zdefiniowane na podstawie warstw, linii pomocniczych, precyzyjnej selekcji lub użycia narzędzia Slice Tool. Kiedy definiujesz slices na obrazie, Photoshop lub ImageReady 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 obraz 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.
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 pomocy 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 przycisków.
Podczas tworzenia stron internetowych z użyciem aplikacji Adobe Photoshop 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 Photoshopie, ale posiada też specjalistyczne narzędzia dla tworzenia dynamicznych stron WWW, np. z wykorzystaniem animowanych obrazków i efektów rollovers.
Narzędzia Slice Tool użyjesz w celu zdefiniowania prostokątnych obszaró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 Image Ready automatycznie zamienia wszystkie niezdefiniowane części obrazu, powstałe po podziale użytkownika, na tzw. auto-slice. Przy użyciu narzędzia Slice Tool utworzymy teraz cztery obiekty user-slice dla przyciskó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łatwienia 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 rogu 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.
Powierzchnie z lewej, prawej i dolnej części zaznaczonego przez użytkownika 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 jedną część, która obejmuje całość
Nowo utworzona część obrazu uzyska 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, automatycznie 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 wybierz węzeł i przeciągnij go w odpowiednim kierunku.
11 Zapisz swoją pracę.
cleeo