Jak stworzyć własną skórę przeglądarki ?

1. Za pomocą przeglądarki kopiujemy na dysk twardy dwa pliki graficzne: buttons.bmp, background.bmp, które zawierają obrys przycisków i panela głównego. Zbiory te możemy znaleźć na niniejszej płycie w kategorii NARZĘDZIA pod nazwą Maski.
   
   
2. Do tworzenia nowej skóry do przeglądarki możemy wykorzystać dowolny program graficzny operujący na plikach rastrowych np.: Adobe PhotoShop, Paint Shop Pro lub Paint. W przykładzie tym posłużymy się programem Paint Shop Pro znajdującym się także na naszych płytach (w bieżącym numerze publikujemy wersję 5.03). Po uruchomieniu programu w menu File wybieramy opcję Open i wczytujemy plik background.bmp, który powinien znajdować się w katalogu C:\CHIP\MASKI\
   
   
   
   
3. Następnie pokrywamy teksturą powierzchnię głównego okna przeglądarki. W tym celu użyjemy obrazka zapisanego również w formacie BMP i zawierającego imitację powierzchni korkowej. Jako teksturę możemy wykorzystać dowolny plik zawierający grafikę o wymiarach 800X600. Zbiór zawierający wybrane tło wczytujemy analogicznie jak w przypadku maski. Następnie uaktywniamy okno z teksturą i wybieramy opcję Copy z menu Edit. Tekstura zostanie skopiowana do schowka systemowego. Wklejamy ją do okna zawierającego obrys interfejsu przeglądarki. W tym celu uaktywniamy okno background.bmp i tym razem z menu Edit wybieramy opcję Paste as new layer. W pliku background.bmp utworzy się nowa warstwa (ang. layer) zawierająca naszą teksturę.
   
   
   W obszarze roboczym programu znajduje się okno Layers, za pomocą którego możemy przełączać się pomiędzy warstwami, ustalać parametry przeźroczystości, widoczności itp. Klikając prawym przyciskiem myszy nazwę warstwy i wybierając opcję Properties możemy ją zmienić na bardziej intuicyjną. W naszym przykładzie warstwę z teksturą nazwiemy "Tekstura", a warstwę zawierająca kształt "Tlo".
   
   
4. Wybieramy prawym przyciskiem myszy w oknie Layers warstwę Tlo. Dzięki tej operacji aktywną warstwą jest Tlo i wszystkie operacje graficzne są wykonywane jedynie na jej powierzchni. Możemy również, co znacznie ułatwi pracę, ukryć na chwilę warstwę Tekstura. Z menu bocznego wybieramy funkcję Magic Wand i klikamy na niebieskim tle w lewym górnym rogu naszego obrazka. Po wykonaniu tej operacji kształt naszej przeglądarki oraz obszar prostokątny całego rysunku powinien być obrysowany przerywaną linią tak podobnie jak na poniższym rysunku.
   
   
   
   Uaktywniamy warstwę Tekstura i wycinamy zbędną część opcją Cut znajdującą się w menu Edit. Następnie poprzez kombinację klawiszy Shift+Ctrl+I odwracamy selekcję. Ten sam skutek osiągniemy wybierając z menu kolejno opcje Selections i Invert Selections. W efekcie obrysowany jest pełny kształt okna głównego przeglądarki, dodatkowo pokryty nową fakturą. W menu Colors znajdziemy szereg funkcji umożliwiających manipulację kolorów zaznaczonej warstwy. W naszym przykładzie wykorzystamy opcję Colorize, aby zmienić odcień tekstury na bardziej zielonkawy.
   
   
   
   
5. Kolejnym krokiem podczas tworzenia skóry jest odpowiednie wycięcie otworów w tzw. uszach. W tym celu ponownie przechodzimy na warstwę Tlo, wybieramy funkcję Magic Wand i klikamy na otworze po lewej stronie przeglądarki. Przytrzymując wciśnięty klawisz Shift klikamy z kolei w prawy otwór. Uaktywniamy warstwę Tekstura i wycinamy zbędne obszary.
   
   
   
   
6. Tworzenie tła elementów sterujących naszej aplikacji zacznijmy od listy wyświetlającej kategorie programów lub programy. Jako teksturę wykorzystamy przykładowe zdjęcie odpowiednio przetworzone dostępnymi filtrami. Wczytujemy je i analogicznie jak w punkcie 3, kopiujemy je i wklejamy jako nową warstwę. Następnie zmieniamy nazwę warstwy na np. Panel. Uaktywniamy warstwę Tlo, aby zaznaczyć odpowiedni obrys powierzchni. Za pomocą narzędzia Wind Magic (boczne menu) klikamy na niebieską powierzchnię listy i w efekcie otrzymujemy obrys kształtu zaznaczony linią przerywaną. Następnie przechodzimy na nowo utworzoną warstwę Panel i odpowiednio kadrujemy warstwę, jak na poniższym rysunku.
   
   
   
   Za pomocą kombinacji klawiszy Shift+Ctrl+I lub opcji Invert w menu Selections odwracamy selekcje i wycinamy zbędne obszary warstwy (Edit | Cut). Naszym oczom ukazuje się dokładny kształt Panelu. Zdjęcie jest zbyt wyraźne i może przeszkadzać w czytaniu tekstów na nim się pojawiających. Chcąc tego uniknąć możemy użyć filtrów z menu Image np. Blur, Edge, Noise, Sharpen, Other dobierając eksperymentalnie jego jakość. W tym przykładzie wykorzystujemy filtr Hot Wax Coating (Image | Other | Hot Wax Coating), a następnie rozjaśniamy warstwę poprzez zastosowanie opcji Brightness/Contrast w menu Colors | Adjust.
   
   
7. Analogiczne operacje do opisanych w powyższym punkcie należy przeprowadzić, w celu utworzenia obszaru w którym wyświetlane będą opisy programów. Do pokrycia powierzchni przeglądarki wykorzystamy zdjęcie wody. Wczytujemy nowe zdjęcie, kopiujemy i wklejamy jako nową warstwę. Warstwę nazywamy jako Memo. W tym przypadku również można wykorzystać filtry i zmienić jej kolorystykę. Wybieramy filtr Emboss w grupie Other w menu Image, a następnie rozjaśniamy warstwę (Brightness/Contrast menu Colors | Adjust). Efekt opisywanych operacji widoczny jest poniżej.
   
   
   
   
8. Kolejnym krokiem jest utworzenie powierzchni, na której umieszczone są przyciski w przeglądarce CHIP-CD. Przełączamy się na warstwę Tlo i magiczną różdżką wybieramy miejsce, w którym znajdują się przyciski po lewej stronie. Przytrzymując wciśnięty klawisz SHIFT klikamy w miejsce przeznaczone na przyciski znajdujące się po prawej stronie ekranu. Jeśli mamy zaznaczone odpowiednie obszary, to możemy je następnie wypełnić żądanym kolorem. Zastosujemy kolor jasnozielony oraz narzędzie Flood Fill. Efekt jest widoczny poniżej.
   
   
   
   
9. Ostatnim etapem pracy na skórą do przeglądarki jest wykonanie przycisków. Niezbędne jest w tym miejscu wyjaśnienie zasady funkcjonowania mechanizmu skór. Aby zmienić wygląd interfejsu, należy umieścić dwa zbiory: background.bmp i buttons.bmp w katalogu, którego nazwa będzie wykorzystywana również jako nazwa skóry. W pierwszym pliku umieszczona jest bitmapa głównego okna wraz z przyciskami, które są standardowo zawsze widoczne tj. Opcje, Pomoc, O nas, Znajdź, Minimalizacja, Wyjście. W pliku buttons.bmp zapisane są wszystkie (łącznie z wymienionymi powyżej) przyciski w trzech kolumnach: pierwsza przedstawia stan normalny przycisku, druga zawiera przyciski wyświetlane podczas "najechania" na nie kursorem myszki, a ostatnia przyciski ukazujące się po ich kliknięciu. Otwieramy plik buttons.bmp zaznaczamy kształt poszczególnych przycisków narzędziem Magic Hand, a następnie tworzymy przycisk w tym obszarze za pomocą operacji wklejania innych obrazków lub piktogramów lub też wypełniania tekstem. Po stworzeniu wszystkich przycisków możemy spróbować zobaczyć efekt naszej pracy na działającej przeglądarce. Rysunki, nad którymi pracowaliśmy, zapisujemy w formacie BMP o rodzielczości kolorów 24 bity i nazywamy background.bmp oraz buttons.bmp. W katalogu C:\CHIP\SKINS tworzymy nowy katalog o nazwie np. Proba. Kopiujemy do niego utworzone bitmapy, a następnie uruchamiamy przeglądarkę z płyty 7/99. W opcji Zmiana skóry ustawiamy katalog C:\CHIP\SKINS i wybieramy skórę Proba i zatwierdzamy zmiany przyciskiem Zastosuj.