Ekran 1
Skończyliśmy nasz Projekt i teraz myślimy - jak przerobić nasze dzieło na stronę www, tak by każdy mógł nam zazdrościć?

Ekran 2
Zaczynamy od Prowadnic:
- naciskamy CTRL+R (z góry i z lewej pojawią się miarki) i narzędziem V "wyciągamy" z tych bocznych linijek nasze prowadnice.
Należy bardzo dokładnie przemyśleć gdzie umieścimy prowadnice - wzdłuż tych prowadnic będziemy ciąć potem nasz obrazek na plasterki. Prowadnic zawsze jest sporo, wydaje się nawet, że jest ich zbyt wiele. To tylko pozór - na tym obrazku ważne są trzy części: Logo, napis "Zapraszam" i delikatna ramka wokół obrazka. Nasze prowadnice muszą nam pozwolić pociąć obrazek w ten sposób, by każda z tych części tworzyła inną część. Na powiększeniu pomalowałem te trzy newralgiczne miejsca kolorami - obszar który będzie ramką na różowy a logo i napis na żółto.

Ekran 3
Kiedy na obrazku mamy już prowadnice a w głowie plan plasterkowania - naciskamy guziczek "przenieś mnie do ImageReady" na palecie PhotoShopa.

Ekran 4
Zaczynamy zabawę - wybieramy narzędzie Slice Tool (naciskając klawisz K na klawiaturce).

Ekran 5
Za pomocą SliceTool tniemy obrazek na plastry - kreśląc prostąkąty i kwadraty wzdłuż prowadnic przygotowanych wcześniej.
Owszem, jest opcja "stwórz Slicesy z prowadnic", ale nie polecam. Wprowadza zamieszanie. Jak sam zrobisz - wiesz, co masz.
Cały obrazek należy starannie pokawałkować - jeśli coś pominiesz, program stworzy w tym miejscu Slices samodzielnie - ale nie masz nad tym kontroli.
By zaznaczyć konkretny Slice należy wybrać narzędzie Slice Select Tool - jest bardzo wygodne, bo nie tnie nam obrazka przy byle potknięciu :o)
I to w zasadzie wszystko jeśli chodzi o kawałkowanie obrazków.

Ekran 6
Teraz możemy zająć się jakąś najprostszą animacją naszej strony. Proponuję, by po najechaniu myszą na napis "Zapraszam" zmienił on swoją barwę...
Mamy wybrane narzędzie Slice Select Tool, klikamy więc w slicesa w którym zamknięty jest napis "Zapraszam".
Teraz UWAGA - będziemy zmieniać nie slicesa, a zawartość obrazka. Dlatego bardzo ważne jest, by na palecie Layers wybrana była warstwa którą zamierzamy zmieniać! Tutaj jest to warstwa z tekstem.

Ekran 7
Odszukujemy paletę Rollowers - w wersji 7 PhoShopa jest razem z innymi paletami z prawej strony, w wersji 6 jest na palecie Animacja (tej długiej poziomej pod obrazkiem). Stara wersja tej palety bardziej mi odpowiadała. Trudno, co robić...
Co to jest Rollover - krótko:kiedy najedziemy myszą nad obrazek, może on się zmienić. Takie właśnie coś (akcja myszki i jakieś zdarzenie) nazywamy rolloverem. Są trzy podstawowe stany R: "on mouse over" czyli myszka najechała nad coś, "on mouse down" czyli myszka przycisneła lewy klawisz i "on mouse out" czyli myszka odjechała na bok. Jest ich jeszcze kilka ale tutaj je pominę. Zajmiemy się animacją "onmouseover".
Na palecie Layers mamy wybrany tekst, na palecie Rollovers klikamy "małą białą karteczkę" czyli "Create rollover state". Teraz wybieramy kolor na jaki zmienimy tekst (ja wybrałem czerowny #FF0000) i zmieniamy kolor tekstu (najprościej - przeciągamy kolor na warstwę tekstową na palecie Layers). I tyle - to już będzie działało. Jeszcze tylko jedna uwaga:
- Zawsze, absolutnie zawsze po stworzeniu nowego rollovera kliknij jego stan Poprzedni na palecie. Zaoszczędzisz sobie wiele czasu na poprawianie "niechcianych" rolloverów.
By zobaczyć efekt naszej pracy kliknij niebieską ikonkę IE na palecie narzędziowej ImageReady. By zapisać robotę jako stronę www, wybierz File/SaveOptymizedAs... Program stworzy katalog Images z obrazkami i plik *.html

Ekran 8
Fajnie, że zmienia nam się kolor napisu. A może chcemy, by było jeszcze fajniej?
Dlaczego kolor napisu się zmienia? Czy to czary? Niestety, nie... Program zrobił dla nas dwa obrazki o identycznych wymiarach (takich jak ograniczający obszar Slice) które różnią się zawartością - w naszym przypadku - jeden z nich ma napis w kolorze czarnym (zwykły stan) a drugi w czerwonym (stan Over). IR wygenerował też javascript podmieniający te obrazki gdy najedziemy na nie myszką. I tutaj kryją się dla nas kolejne możliwości - możemy samodzielnie stworzyć obrazek (o tamtych wymiarach) który może być np. animowanym gifem. Po najechaniu na "czarny" obrazek program podmieni ten obrazek na naszego animowanego gifa (gdzie Królewna może całować księcia lub żabkę).
W Phoshopie kadrujemy nasz wyjściowy obrazek do wielkości slicesa "Zapraszam" i otwieramy go znów w ImageReady. Jesteśmy na warstwie tekstowej, otwieramy paletę Animation i klikamy "małą białą karteczkę" (duplicates current frames) czyli tworzymy nową klatkę animacji i kolorujemy napis (tak samo jak poprzednio).

Ekran 10
Zmienimy jeszcze tempo wyświetlania naszej kolorowej klatki. Możemy dowolnie ustawiać czas otwarcia każdej klatki - warto poeksperymentować.
Jak podmieniamy nasz obrazek: należy odszukać w katalogu Images stworzonym przez program obrazek z czerwonym napisem Zapraszam (index_06-over.gif). Zmieniamy mu nazwę (bo szkoda kasować) i a ten obrazek zrobiony przez nas nazywamy tak właśnie (index_06-over.gif) i kopiujemy go do katalogu Images. Przeglądarka wyświetli nam teraz w miejsce starego, nowy obrazek.