Łebdizajn domowy

Ciekawostki | Dvd,Mp3 | Ebiznes | Gry komputerowe | Internet | Kościół i Internet | Oprogramowanie | Sprzęt |

Łebdizajn domowy

Tomasz Melissa

Co sprawia, że Internet każdego dnia przyciąga setki milionów ludzi? Niespotykane gdzie indziej bogactwo informacji, nieprzebrana ilość danych na każdy temat, dostępnych przez 24 godziny 7 dni w tygodniu? A może wszechobecne bajecznie kolorowe, wirujące lub migające obrazki, graficzne ozdobniki? Jakikolwiek jest powód, jedno nie ulega wątpliwości: dobra oprawa graficzna witryny to najskuteczniejsza przynęta dla internetowych ciekawskich. Po wakacyjnym odpoczynku przyszedł czas na odnowienie lekko zakurzonych witryn domowych.

Większość przedstawionych przykładów prezentujemy w Photoshopie 6, ale wykorzystywane narzędzie i filtry dostępne są w większości popularnych edytorów graficznych. Różnice polegają tylko na sposobie dotarcia do nich.

Trójwymiarowe ramki

Photoshop dzięki samym ustawieniom warstw pozwala łatwo utworzyć atrakcyjne trójwymiarowe ramki, które można wykorzystać na własnej stronie internetowej. Informacje będą przedstawione w atrakcyjnej formie i łatwiej przyciągną uwagę odwiedzających. Prezentowany tu sposób ich wykonania pozwala na bardzo proste wprowadzenie późniejszych zmian w razie potrzeby.

Etap 1. Zaczniemy od określenia rozmiarów ramki. Większość stron internetowych przygotowywana jest do oglądania na monitorze o rozdzielczości 800x600 pikseli. Oznacza to, że mamy do dyspozycji około 770 pikseli, pozostałe to boczne suwaki i brzegi przeglądarki. Zwykle około 300 pikseli zabierają boki strony, na których umieszczone są przyciski nawigacyjne oraz skrócone informacje o zawartości. Środek o szerokości zwykle około 460 pikseli to właśnie miejsce prezentowania najważniejszych informacji. Spróbujmy odtworzyć ten schemat.

Otwieramy nowy dokument o wymiarach 770x600 pikseli i przezroczystym tle. Za pomocą prowadnic (Guides) zdefiniujemy wstępnie podstawowe elementy strony. Prowadnicę można umieścić poleceniem View | New Guide. Określamy tylko, czy ma być pionowa (Vertical) czy pozioma (Horizontal) oraz w jakiej odległości od lewego brzegu lub góry dokumentu się pojawi. Przyjmujemy, że pierwsze 160 pikseli szerokości strony przeznaczone będzie na pasek zawierający przyciski nawigacyjne. Pasek będzie miał szerokość 150 pikseli, a 5 pikseli z lewej i z prawej strony zapewni odstęp od krawędzi i środka strony. Pierwsza pionowa prowadnica powinna się zatem znaleźć w odległości 5 pikseli od krawędzi, a druga o 150 pikseli dalej. Środek strony będzie miał szerokość 460 pikseli, w tym przypadku również 10 zarezerwujemy na odstęp po obu stronach. Umieszczamy zatem prowadnice po kolei na 160, 165, 615, 620, 625, 765 pikselu.

Dodamy jeszcze dwie poziome prowadnice: pierwszą w odległości 150 pikseli od góry strony i drugą 200 pikseli dalej. Teraz należy włączyć opcję View | Snap to | Guides. Osadzane elementy będą przyciągane przez prowadnice i z łatwością umieścimy je dokładnie w wyznaczonym miejscu. Prowadnice ułatwią również późniejsze pocięcie elementów w programie ImageReady.

Etap 2. Narzędziem Rounded Rectangle rysujemy w środkowej części prostokątny kształt będący podstawą ramki. Dzięki prowadnicom łatwo uzyskamy wymiary 450x200 pikseli.

Etap 3. Przechodzimy do edycji właściwości i stylu warstwy. Poleceniem Layer Properties nadajmy jej nazwę Podstawa środka. Polecenie Blending Options otwiera okno Layer Style, w którym zdefiniujemy wygląd ramki .

Etap 4. Zaczniemy od wyboru koloru ramki. Zaznaczamy opcję Color Overlay, która powoduje pokrycie całej aktywnej warstwy wybranym kolorem. Korzystając z opcji Bevel and Emboss, określamy sposób uwypuklenia ramki. Wybieramy opcję Inner Bevel, w górę (Up) na wysokość 6 pikseli. Dodajemy jeszcze niewielki cień o wymiarach nieprzekraczających 5 pikseli, aby nie wyszedł poza cały obszar zarezerwowany na środkową część strony. Służy do tego polecenie Drop Shadow (rys. 9), w którego oknie dialogowym należy ustawić odległość (Distance) na 5 pikseli. Zamykamy okno Layer Style i podstawę mamy gotową.

Etap 5. Tworzymy kopię warstwy i nadajemy jej nazwę Wnętrze środka. Następnie klikamy kolejno polecenia Edit | Transform Path | Scale i zmieniamy jej wymiary na 97 procent pierwotnej szerokości i 75 procent wysokości.

Etap 6. Przystępujemy do definicji stylu tej warstwy. Zaczniemy od zmiany koloru. W tym miejscu na stronie internetowej będzie się znajdował tekst. Tło musi dobrze kontrastować z jego kolorem, aby całość była dostatecznie czytelna. W naszym przykładzie wybraliśmy kolor jasnoszary o wartościach RGB: R 220, G 220, B 220. Środek ramki będzie wklęsły, zmienimy więc ustawienia opcji Bevel and Emboss. Wybieramy opcję Outer Bevel, w dół (Down) na głębokość 4 pikseli. Usuwamy również zewnętrzny cień, wyłączając opcję Drop Shadow. Dodamy za to dodatkowy cień wewnątrz okna, zaznaczając Inner Shadow. Cień będzie padał maksymalnie 3 piksele od krawędzi - pole Distance.

Etap 7. W ten sam sposób utworzymy teraz oba boczne paski. Nie musimy powtarzać wszystkich czynności. Wystarczy narzędziem Rounded Rectangle określić kształt ramek, a następnie poleceniem kopiowania stylu warstwy Copy Layer Style oraz wklejania Paste Layer Style przenieść style na odpowiednie elementy. Można je, oczywiście, zmodyfikować, zmienić kolory, uwypuklenie itd. W podobny sposób szybko dodamy na dole lub na górze środkowej ramki np. małe okna, w których będzie można umieścić datę lub elementy nawigacyjne.

Ramki gotowe, przejdźmy do cięcia ich na kawałki, które wykorzystamy na naszej stronie

Tniemy kawałki

Etap 1. Przechodzimy do programu ImageReady, naciskając przycisk na samym dole palety narzędzi Photoshopa. Teraz wykorzystamy osadzone wcześniej prowadnice (Guides) do wstępnego zdefiniowania poszczególnych kawałków (Slices), na które podzielimy ramki. Służy do tego polecenie Slices | Create Slices from Guides. Nie wszystkie utworzone tym sposobem wycinki ramek będą potrzebne. Usuniemy zbędne i dodamy nowe.

Etap 2. Wybieramy narzędzie Knife - nóż, a właściwie jego drugą odmianę, tzn. Slice Select Tool. Prawym przyciskiem myszy klikamy środkową, dużą ramkę i z podręcznego menu wybieramy polecenie Divide Slice. Podzielimy teraz ten kawałek wzdłuż na dwa mniejsze. Zaznaczamy zatem opcję Divide Horizontally Into (Podziel poziomo), a w pole slices down, evenly spaced wstawiamy wartość 2. W rezultacie otrzymamy dwa nowe, identyczne kawałki, które wykorzystamy do wycięcia góry i dołu ramki.

Etap 3. Powiększymy teraz lewy górny róg ramki tak, żeby widoczne były pojedyncze piksele. Narzędziem Slice Select przeciągamy dolną krawędź tego kawałka aż do punktu, poniżej którego brzeg ramki jest jednolity. Analogicznie postępujemy z dołem ramki, tyle że brzeg będzie jednolity powyżej krawędzi kawałka. Potrzebne będą również kawałki jednolitego brzegu z góry i z dołu ramki. Wystarczą dwa piksele szerokości.

Etap 4. W podobny sposób wycinamy teraz rogi ramki. Dzielimy kawałki górny i dolny w poprzek, a krawędzie dociągamy do granicy jednolitego brzegu ramki. Ważne jest, aby dolne i górne rogi po obu stronach ramki miały tę samą szerokość. Można sprawdzić na palecie Info pozycje W (Width - Szerokość) oraz H (Height - Wysokość).

Etap 5. Teraz wytnijmy wąski kawałek środka, a właściwie jego brzegi o tej samej szerokości co rogi ramki. Wystarczą dwa paski o wysokości dwóch pikseli.

Etap 6. Nadajemy nazwy poszczególnym kawałkom. Będą one nazwami plików GIF, które otrzymamy po wyeksportowaniu całości. Służy do tego paleta Slice przywoływana poleceniem Window | Show Slice (rys. 8). Za pomocą tej palety możemy również zaznaczyć niepotrzebne kawałki, które powstały po użyciu polecenia Create Slices from Guides. Zaznaczając No Image w polu Type palety Slice, unikniemy zapisania ich w postaci oddzielnych plików.

Etap 7. Ustawimy teraz podstawowe parametry optymalizacji plików GIF. Zaznaczamy wszystkie kawałki, naciskając klawisze [Ctrl A], na palecie Optimize (rys. 9) wybieramy Settings (ustawienia) GIF 128 Dithered, zaznaczamy Transparency (przezroczystość) i wskazujemy kolor tła strony WWW w polu Matte. Zapisujemy całość poleceniem File | Save Optimized As. Przedstawiamy opcję zapisu tylko plików graficznych, ponieważ program ImageReady utworzyłby tabelę zawierającą wszystkie kawałki, a nie o to nam chodzi. Prawidłowy kod HTML tabeli powinien wyglądać mniej więcej tak jak na rysunku 10.

W stylu iMaca

Komputery iMac szybko podbiły serca użytkowników. Na pewno niebagatelną rolę odegrał przy tym zupełnie nowy wygląd tych maszyn. Przezroczyste plastykowe obudowy i peryferia wyglądają naprawdę intrygująco. Spróbujemy w tym samym stylu utworzyć kilka przycisków do wykorzystania na stronie internetowej.

Etap 1. Zaczynamy od utworzenia nowego dokumentu o wymiarach 400x200 pikseli i białym tle (rys. 1). Następnie dodajemy nową warstwę o nazwie Przycisk.

Etap 2. Przechodzimy do palety Channels i wstawiamy nowy kanał o nazwie Kształt. Narzędziem Rectangular Marquee zaznaczamy prostokątny kształt przycisku, a następnie wypełniamy go kolorem białym za pomocą Paint Bucket. Duplikujemy kanał i kopię nazywamy np. Zaokrąglenia (rys. 2).

Etap 3. Używając filtru Gaussian Blur (rys. 2) i korekty poziomów (Levels), zaokrąglimy teraz rogi przycisku. Ten sam efekt można osiągnąć w Photoshopie 6 za pomocą nowego narzędzia Rounded Rectangle Tool. Filtr Gaussian Blur musimy zastosować do całego kanału, rezygnujemy więc z zaznaczenia za pomocą skrótu [Ctrl D]. Wartość promienia ustawiamy na 8 pikseli. Teraz za pomocą korekty poziomów [Ctrl L] wygładzamy krawędzie. Osiągniemy ten efekt, przeciągając czarny i biały suwak do środka lub wpisując w pozycji Input levels wartości zbliżone do zastosowanych na rysunku 3.

Etap 4. Wczytujemy utworzony w ten sposób kształt jako zaznaczenie, klikając nazwę kanału na palecie kanałów z naciśniętym klawiszem [Ctrl]. Przechodzimy do warstwy Przycisk na palecie Layers i wypełniamy zaznaczenie kolorem czarnym. Wracamy do palety kanałów i tym razem jako zaznaczenie ładujemy pierwszy utworzony kanał o nazwie Kształt. Narzędziem Rectangular Marquee i z naciśniętym klawiszem [Alt] odznaczamy górną część zaznaczenia (rys. 4). Pozostałą część wypełniamy ponownie czarnym kolorem, korzystając z polecenia Edit | Fill. W rezultacie otrzymamy kształt o kanciastej podstawie i zaokrąglonych górnych rogach.

Etap 5. Zaznaczając opcję Lock Transparent Pixels na palecie warstw, blokujemy wszystkie przezroczyste piksele na warstwie Przycisk, a następnie wypełniamy ją dowolnym gradientem. Niezaznaczenie opcji spowodowałoby wypełnienie całej warstwy, a przecież nie o to nam chodzi. Kolory gradientu mogą być dowolne, ale ciemniejszy powinien się znaleźć na górze, jaśniejszy zaś na dole (rys. 5).

Etap 6. Dodajemy teraz efekt trójwymiarowości przycisku. Zaczynamy od boków. Ładujemy warstwę Przycisk jako zaznaczenie, klikając jej nazwę na palecie warstw z naciśniętym klawiszem [Ctrl]. Tworzymy nową warstwę o nazwie Boki. Korzystając z polecenia Select | Modify | Contract, zmniejszamy zaznaczenie o 2 piksele. Teraz obrysowujemy zaznaczenie od wewnątrz, stosując polecenie Edit | Stroke. Obrys ma kolor biały, a jego szerokość wynosi 2 piksele (rys. 6).

Etap 7. Za pomocą filtru Motion Blur (Filtr | Blur | Motion Blur) modyfikujemy obrys tak, żeby zostały tylko jego boki. Wartości filtru powinny być takie jak na rysunku 8. Anulujemy zaznaczenie, naciskając [Ctrl D], i narzędziem Move przesuwamy całą warstwę Boki o 3 piksele w dół. Następnie zmieniamy sposób pokrycia warstwy na Soft Light (rys. 7).

Etap 8. Teraz zajmiemy się górnym cieniem. Wczytujemy warstwę Przycisk jako zaznaczenie w sposób opisany wcześniej i tworzymy nową warstwę o nazwie Góra. Narzędziem Airbrush i z naciśniętym klawiszem [Shift] rysujemy poziomą białą linię na górze przycisku. Dzięki temu, że aktywne zaznaczenie zawiera tylko kształt przycisku, nawet gdy pociągniemy pędzlem poza jego granice, nic się nie zmieni. Narzędziem Eraser również w trybie Airbrush skorygujemy nieco brzegi.

Etap 9. Pozostało tylko dodanie tekstu z niewielkim 3-, 4-pikselowym cieniem oraz - jeżeli chcemy, żeby przycisk rzeczywiście był przezroczysty - zmiana krycia (Opacity) warstwy Przycisk na np. 60 procent. Spowoduje to rozjaśnienie kolorów. Najprostszym rozwiązaniem będzie zduplikowanie tej warstwy i połączenie kopii z oryginałem poleceniem Layer | Merge Visible. Polecenie to zadziała prawidłowo, jeżeli będą widoczne tylko te dwie warstwy. Pozostałe należy wyłączyć, klikając ikonę oka po prawej stronie nazwy danej warstwy w palecie warstw.

Tekst techno

Podczas internetowych wędrówek na pewno nieraz widzieliście elementy graficzne i czcionki ozdobione jakby kropelkami wody. Ten bardzo ciekawy i ostatnio często stosowany efekt można z powodzeniem zastosować na własnej stronie. W poniższym przykładzie wykorzystujemy tekst, ale w ten sam sposób można ozdobić każdy inny element graficzny.

Etap 1. Po umieszczeniu czarnego tekstu na jednej z warstw, kliknij jej nazwę w palecie warstw, naciskając klawisz [Ctrl]. Spowoduje to zaznaczenie całej zawartości, czyli w tym przypadku tekstu. Przejdź do palety kanałów i dodaj nowy kanał - otrzyma on nazwę Alpha 1. Wypełnij teraz zaznaczenie białym kolorem za pomocą narzędzia Paint Bucket - skrót klawiaturowy [G] (rys. 1). Teraz dodaj jeszcze jeden kanał - Alpha 2.

Etap 2. Zmiękczamy trochę zaznaczenie w tym kanale za pomocą polecenia Feather. Wartość podajemy w pikselach i zależy ona od wielkości całego elementu. W tym przykładzie czcionka ma wysokość około 150 pikseli i odpowiednią wartością będzie 10. Ponownie wypełniamy zaznaczenie kolorem białym (rys. 2).

Etap 3. Rezygnujemy z zaznaczenia za pomocą skrótu [Ctrl D], żeby zastosować filtr do całego kanału, a nie tylko do jego zaznaczonego fragmentu. Klikamy Filter | Pixelate | Color Halftone. Najistotniejszym parametrem tego filtru jest maksymalny promień rastra, czyli kropki. W naszym przykładzie ustawiono go na 8 pikseli (rys. 3).

Etap 4. Wracamy do palety warstw. Musimy teraz zrenderować warstwę zawierającą tekst, żeby można było zastosować na niej kolejny efekt. Wystarczy kliknąć prawym przyciskiem myszy nazwę warstwy w palecie i wybrać polecenie Rasterize Layer (rys. 4).

Etap 5. Zmniejszamy zaznaczenie o cztery piksele, żeby brzegi liter nie zostały poddane działaniu filtru Lightning Effects. Służy do tego polecenie Select | Modify | Contract. Rezultat powinien być zbliżony do pokazanego na rysunku 5.

Etap 6. Przechodzimy do najważniejszej części, czyli nadania literom pożądanego wyglądu. Poleceniem Filter | Render | Lightning Effects uruchamiamy filtr, za pomocą którego osiągniemy efekt oświetlenia liter, wykorzystując przy tym kanał Alpha 2. Można wykorzystać podobne parametry do zastosowanych na rysunku 6, ale nic nie stoi na przeszkodzie, aby nieco je modyfikując, osiągnąć inny ciekawy efekt. Można oczywiście zastosować filtr do całego tekstu lub tylko do pojedynczych liter.

Etap 7. Nadszedł czas na drobne wykończenia. Napis jest zupełnie płaski, trochę bez wyrazu. Warto nadać mu pozory trójwymiarowości. Zastosujemy polecenia Bevel and Emboss oraz Drop Shadow z okna stylu warstw. Pierwsze uwypukli nieco tekst, a drugie doda niewielki cień i całość będzie do złudzenia przypominać wytłoczony napis. Gotowe!

Okrągłe przyciski

Okrągłe przyciski od lat cieszą się dużym powodzeniem. Proste, funkcjonalne, a przede wszystkim "ważące" niewiele kilobajtów znajdą na pewno swoje miejsce i na Twoich stronach. Prezentowany poniżej sposób jest na tyle uniwersalny, że można go zastosować także i do innych kształtów czy elementów strony.

Etap 1. Zaczynamy od zaznaczenia okrągłego obszaru narzędziem Eliptical Marquee z podstawowej palety narzędzi Photoshopa . Naciśnięty podczas zaznaczania klawisz [Shift] umożliwi zachowanie równych proporcji. Wypełniamy teraz zaznaczenie owalnym gradientem i na ekranie pojawia się podstawa przycisku przypominająca trójwymiarową sfere.

Etap 2. Anulujemy zaznaczenie, naciskając klawisze [Ctrl-D], i wewnątrz sfery zaznaczamy mniejszy okrąg. Nie korzystamy w tym przypadku z polecenia Contract, ponieważ przy tak dużym skoku nie zapewnia idealnie okrągłego kształtu. Powstałą w ten sposób selekcję odwracamy o 180 stopni, klikając Edit | Transform | Rotate (rys. 3).

Etap 3. Teraz musimy zmniejszyć zaznaczenie jedynie o 3-4 piksele, klikamy zatem polecenie Contract. I znowu odwracamy wszystko do góry nogami (rys. 4).

Etap 4. W takiej postaci przycisk można z powodzeniem wykorzystać jako nieaktywną wersję w efektach typu rollover. Przycisk aktywny, który wyświetli przeglądarka internetowa po najechaniu na niego myszą, powinien zaświecić w jakimś kolorze. Pokolorujemy środek przycisku, używając polecenia Image | Adjust | Hue-Saturation. Zaznaczamy tylko opcję Colorize i suwakiem Hue wybieramy odpowiedni kolor (rys. 5). Gotowe!

Telewizyjny przeplot

Na wielu stronach spotkać można zdjęcia lub ich fragmenty wyglądające tak, jakby fotografowany obiekt wyświetlany był w telewizorze rodem z lat sześćdziesiątych. Takie wrażenie sprawiają poziome linie imitujące przeplot. Podobnie wyglądają animowane sekwencje w niektórych grach komputerowych, gdzie przez wzgląd na użytkowników mających słabsze karty graficzne wyświetlana jest tylko co druga linia obrazu.

Etap 1. Zaczniemy od utworzenia wzoru, którym pokryjemy zdjęcie. Należy otworzyć nowy dokument o wymiarach 100x2 piksele i przezroczystym tle (rys. 1).

Etap 2. Powiększamy go mak-symalnie, klikając View | Fit on Screen [Ctrl 0], a z palety na-rzędzi wybieramy linię (rys. 2). Ustawiamy jej szerokość na jeden piksel, a krycie (Opacity) na 100 procent. Rysujemy linie na całej szerokości dokumentu.

Etap 3. Korzystając z polecenia Edit | Define Pattern, tworzymy nowy deseń, gotowy do wielokrotnego wykorzystania (rys. 3).

Etap 4. Otwieramy zdjęcie, które zamierzamy wzbogacić o efekt przeplotu, i klikając Edit | Fill, wypełniamy je utworzonym deseniem. W tym celu w menu Use wybieramy pozycję Pattern i wskazujemy deseń (rys. 4). Rezultat będzie dużo lepszy, gdy zamiast standardowego sposobu pokrycia wybierzemy opcję Overlay. Dzięki temu deseń wtopi się w tło, chociaż poziome linie będą wciąż widoczne. Gotowe.

Malutki spacer

Nie, nie namawiamy w tej chwili do spaceru, chociaż po kilku godzinach spędzonych przy komputerze byłby jak najbardziej wskazany. Spacer to angielska nazwa najpopularniejszego w Internecie pliku w formacie GIF, zawierający tylko jeden, w dodatku przezroczysty piksel. Służy zazwyczaj do specjalnego formatowania stron internetowych, niemożliwego do osiągnięcia za pomocą poleceń HTML. Najczęściej pojawia się w tabelach, w których umieszczenie tekstu z dokładnością do jednego piksela bywa czasem trudne.

Na rysunku powyżej widać nagłówek bocznej ramki. Jest to jedna komórka tabeli zdefiniowana w następujący sposób:

<td align="center" valign="top" background="tlo_belki.gif" height="33">Nasze ostatnie testy</td>

Dzięki parametrom align i valign tytuł belki znajduje się na samej górze komórki w jej centralnej części. Chcemy jednak, żeby znalazł się o sześć pikseli niżej. Tu przychodzi z pomocą jednopikselowy pomocnik. Umieszczamy go nad napisem w ten sposób:

<td align="center" valign="top" background="tlo_belki.gif" height="33">
<img height=6 width=1 src="spacer.gif" alt=""><br>Nasze ostatnie testy</td>

W rezultacie tytuł przesunął się w dół dokładnie o 6 pikseli. Wyświetlając stronę, przeglądarki potraktują plik spacer.gif tak, jakby miał wymiary 6x1 piksel, mimo że w rzeczywistości wciąż jest to plik 1x1.

W podobny sposób można dokładnie osadzać inne elementy strony HTML zarówno w pionie, jak i w poziomie. Samodzielne utworzenie pliku jest banalnie proste. Wystarczy utworzyć nowy dokument o wymiarach 1 na 1 piksel, z przezroczystym tłem, i zapisać go w formacie GIF z zachowaniem przezroczystości. Dla wygody i oszczędności kodu można go nazwać np. o.gif i gotowe! Przyszedł wreszcie czas na prawdziwy jesienny spacer.

opr. JU/PO