Złudzenie

Wstęp

Zaprezentuję pewien efekt, który wydaje mi się całkiem ciekawy. Od razu mówię, że nie przyda się jakoś specjalnie Webmasterom - umieszczam go jako 'sztuka dla sztuki' ;-)

Opis

Efektem tutoriala będzie plik SWF wygenerowany przez Flash'a, który będzie przedstawiał zdjęcie w "dziwnych" kolorach, a po najechaniu myszką ukaże się ono w skali szarości. Złudzenie polega na tym, iż po nie odrywaniu wzroku z pierwszego zdjęcia przez około 30 sekund, w momencie gdy ukazuje się drugie zdjęcie - powinno ono sprawiać wrażenie kolorowego. Oczywiście odwzorowania kolorów nie będą w zupełności zgodne z oryginałem, ale przy odpowiednim dobraniu zdjęcia - można uzyskać całkiem ładny efekt.

Przygotowanie grafiki

Wyszukujemy jakieś ulubione zdjęcie. Najlepiej jeśli posiada dobre kontrasty i stosunkowo duże obszary o podobnym odcieniu. W przykładzie posłużyłem się pasiastą maskotką koleżanki - Zebrem. Jeśli masz problem z wyborem obrazka, proponuję poszukać czegoś ze stylu: góra-niebo, środek-obiekt, dół-trawa/woda - taki zestaw jest idealny do tego efektu.

Wrzucamy zdjęcie do ulubionego programu graficznego. U mnie standardowo - Photoshop, którego to instrukcje będą dotyczyć. Nazwijmy warstwę ze zdjęciem np. "b&w" ( black and white ). Duplikujemy warstwę np.
Layer - Duplicate Layer i nazywamy np. "luminosity". Wypełniamy tą warstwę : Edit - Fill... lub "Shift+F5". Wybieramy: Contents: Use: 50% Gray i Blending: Mode: Luminosity - reszta opcji bez zmian. Teraz inwersja kolorów: Image: Adjustments: Invert lub Ctrl+i. Okey - mamy gotowy pierwszy obrazek. Stwórzmy nową warstwę Ctrl+Shift+n i narysujmy niewielką, czarną - kropkę. Teraz należy ją wyśrodkować, czyli: zaznaczamy cały obrazek Ctrl-a i wciskamy ikonki wyśrodkowania tak w pionie, jak i poziomie

Pierwszy obrazek mamy gotowy. Zapisujemy dajmy na to pod nazwą: "1.jpg". Kasujemy warstwy z kropką i "luminosity", po czym zajmujemy się "b&w". Należy przekonwertować ją do skali szarości. Robimy to najprostszym sposobem : Image: Adjustments: Desaturate lub Ctrl+Shift+u.

Uwaga: faktycznie - jest to najprostszy i najszybszy sposób, lecz jednocześnie nieefektywny. Uzyskanie dobrej jakości skali szarości uzyskuje się na kilka innych sposobów, których przedstawiać tu nie będę, gdyż nie jest to tematem tutoriala.

Zapisujemy obrazek pod nazwą "2.jpg" i odpalamy Flash'a.

Rollover - Flash

Stosowanie Flash'a w tym przypadku to trochę jak polowanie na muchę z armatą, gdyż jedyne co chcemy teraz uzyskać, to efekt rollover - czyli podmiany obrazka w momencie najechania myszką. Także Flash służy jedynie jako przykład - efekt ten można dokonać w innych programach. Tyle gwoli wyjaśnienia.

Wczytujemy oba obrazki do Flasha. Ustawiamy rozmiar sceny na identyczny z rozmiarem zdjęć. Ze zdjęcia "1.jpg" tworzymy przycisk ( F8 ), a następnie ustawiamy na środku sceny. Klikamy 2 razy na stworzonym buttonie i ustawiamy nowy klucz na stanie Over. Teraz zamieniamy zdjęcie "1.jpg" na "2.jpg". Naciskamy Ctrl+Enter by wyeksportować dokument SWF i oglądamy efekt.

Instrukcja oglądania