Data publikacji: 2006-12-16
Autor: Natalia -Drammen- Topolska

Nie masz pomysłu na top dla swojej strony, a szukasz czegoś prostego, czytelnego i łatwego do wykonania? W takim razie świetnie trafiłeś(-aś) - w niniejszym kursie postaram się pokazać Wam coś, co każdemu średnio-zaawansowanemu użytkownikowi jakiegokolwiek kombajnu graficznego pozwoli dosyć atrakcyjnie zagospodarować to jakże ważne dla wyglądu strony miejsce...

P.S. (a właściwie pseudo-p.s., bo któż widział post scriptum pisane zaraz po wstępie ;)) nie będę tu opisywać d o k ł a d n e g o sposobu przejścia poszczególnych kroków - zakładam, że każdy, kto chce ozdobić jakąkolwiek szatą graficzną swoją (bądź cudzą) stronę, posiada elementarne umiejętności związane z obsługą Photoshopa czy innego programu graficznego. Jeśli nie jesteś sobie w stanie poradzić z pewnymi działaniami w tym tutorialu - poszperaj w sieci, popytaj znajomych (zajrzyj do prostrzych kursów w Strefie). Samokształcenie najlepszą metodą zdobywania wiedzy!

A tymczasem... zaczynamy.

1.


Zaznaczam od razu, że kolor powinieneś(powinnaś) wybrać dowolny, rozumiem bowiem, że zestawienie kolorystyczne przeze mnie wybrane niekoniecznie dobrze pasuje do tematyki Twej strony (serwis o Quake w różu?).
Rysujemy przedstawiony na obrazku kształt - jeśli Twój program posiada możliwość określenia zaokrąglenia każdego rogu z osobna, to świetnie, jeśli nie - wystarczy, że narysujesz prostokąt z zaokrąglonymi "końcówkami", a następnie w dwóch z nich dorysujesz mu maskujące kwadraty. Dla uatrakcyjnienia wyglądu naszej przyszłej belki menu dodałam jej efekt Bevel, bądź, jak kto woli Emboss, aczkolwiek w ledwo zauważalnej postaci - nie bądźmy zbyt agresywni w tym względzie ;).

2.


Cóż, wypadało by ożywić nieco nasz ciemny róż... Zapewne zieleń nie wyda Ci się najszczęśliwszym wyborem, ale zapewniam, że do nadania temu życia i kontrastu nadaje się idealnie! Jasnozielony prostokąt umieszczamy powyżej różowej belki, i ustawiamy go jako warstwę niższą. Możesz go również nieco ozdobić powycinanym, cieniowanym fragmentem białego prostokąta, uatrakcyjniając całość. Całość niezbyt skomplikowaną, jak widać.

3.


Nad belką umieszczamy warstwę z nieco jaśniejszym różem, i nadajemy jej stopniową przezroczystość z 3 stron, z góry i obu boków. Dół obcinamy jak żyletką, by całość sprawiała wrażenie nieco wypukłej. W ten sposób otrzymaliśmy kompletną bazę pod nasze menu.

4.


W prawym górnym rogu możemy umieścić datę (rzecz ważna, ale nie musi się rzucać w oczy) i przycisk umożliwiający (po pocięciu całości do HTML oczywiście) zalogowanie się do serwisu - bądź cokolwiek innego, co tylko uznamy za niezbędne na naszej stronie.
Na lewym końcu belki umieszczamy logo naszej strony (badania mówią, że jest to najbardziej zauważane przez internautów miejsce na całej stronie...), oddzielamy je od reszty pionową linią. Oczywiście, można postawić w tym miejscu zwykłą, pionową krechę. Jednak skoro wysilaliśmy się, by 'uwypuklić' belkę, czemu nie dodać jeszcze odrobiny pseudo-trójwymiarowości do naszego projektu? Można ten efekt uzyskać dzięki narysowaniu obok siebie (bez żadnego odstępu) dwóch linii - ciemnej i bardzo jasnej, manipulując później ich jasnością dla uzyskania bardziej realistycznego efektu.

5.


Co nam pozostało... tylko wypełnić pozostałą część belki pozycjami menu! W tym przykładzie nazwę główną działu, do którego prowadzi odnośnik, napisałam wielkimi literami (niech zwracają uwagę, przecież od tego są), natomiast krótki informacyjny podpis - mniejszą czcionką i już bez wyróżnienia (tak, wiem, że trudno czasem streścić zawartość podstrony w dwóch wyrazach... warto się jednak postarać, może to bardzo pomóc zagubionym niejednokrotnie użytkownikom).
Poszczególne pozycje menu oddzieliłam znaną nam już "wklęsłą" linią, tym razem nieco mniejszą, niż ta początkowa, oddzielająca logo od linków.
Każdy napis (koloru białego) został przeze mnie zdublowany. Kolor "dublera" zmieniłam na róż (nieco ciemniejszy od koloru belki)... To, co otrzymałam w wyniku kombinacji z kolorem, wsunęłam pod napis bazowy, uzyskując w ten sposób przyjemny dla oka efekt cienia (można tenże cień zrobić w sposób klasyczny, jednak nie będzie on wtedy tak ostry i wyrazisty).

6.


Tak... tym sposobem dotarliśmy do końca tutoriala - menu gotowe, wystarczy tylko ;) zaprojektować resztę strony. Tu przykładowy screen z rozwiązaniem połączenia naszego topu z treścią na stronie.