Lato w pełni, słońce świeci... a rybka lubi pływać. W poniższym artykule zaprezentuję jak wykonać prosty i przejrzysty design o tematyce akwarystycznej. Zapraszam.

Tło

W tym przypadku tło wypełniają zdjęcia z serwisu iStockphoto.com. Zarówno fale jak i ryba odgrywają kluczową rolę na stronie.

Logo

Adres: moje-rybki.pl
font: Aronia StO, Bold, 39 px, Sharp, #03303d.

Menu

Pierwszy elementem jest stworzenie poziomego paska u góry strony. Kolor : #198fda, wysokość ; 8 px. Kolejnym krokiem jest stworzenie przycisku. Tworzymy zatem prostokącik o proporcjach widocznym na projekcie. Ustawiamy gradient tak jak na screenie.

Aby dopełnić menu tworzymy kolejny prostokąt.

Ustawiamy odpowiedni gradient i przezroczystość.

Ostatnim elementem jest usunięcie niepotrzebnych rogów. Wybieramy Rectangular Marquee Tool (M) Feather ustawiamy na 10 px.

Następnie zaznaczamy obszar od jednego boku do drugiego, klikamy prawym klawiszem myszy na zaznaczeniu i wybierami Select Inverse. Wciskamy klawisz Delete dwukrotnie i niechciany obszar znika. Do dopełnienia menu dodajemy oczywiście napis. W tym przypadku font: Fontin Sans, regular, 18 px, Sharp. Pozostałą część przycisków tworzymy analogicznie.

Content

Na content składa się prostokąt w kolorze #fffff i ramce #ebebeb, 3px.
"Strona Główna": Arial, Regular, 11 px, None, #000000
"Rybka lubi pływać": Fontin Sans, Regular, 25 px, Sharp, #000000
Tekst przykładowy: Arial, Regular, 11 px, None, #000000

Dział z linkami

1. ikona z darmowych komponentów internetowych
2. Napis 'Linki': Fontin Sans, Regular, 16 px, Sharp, #000000
3. Tło: gradient, #f5f5f5 - #ffffff
4. akwarium z zasobów iStockphoto.com. Dodatkowo można stworzyć cień akwarium. W tym celu wybieramy Eliptical Marquee Tool, tworzymy owal i wypełniamy go kolorem.

   

   Następnie rozmywamy warstwę: Filter - Blur - Gaussian Blur - 5 px. Przezroczystość warstwy zmieniamy na 20 %.

5. punktatory, wykonane ołówkiem, 1 px, #000000

   

6. Linki: Arial, Regular, 11 px, None, #000000

Stopka

Podpis: Arial, Regular, 11 px, None, #ffffff
Aby wykonać odbicie pola tekstowego tworzymy prostokąt o tej samej szerokośc.

Tworzymy gradient : kolor pola tekstowego: #ffffff wraz z kolorem tła: #027393. Przezroczystość ustawiamy na 15%.

Efekt:

Dziękuję za uwagę.
Sylwia Bartyzel, 2009
www.forfuture.pl
sylwiabartyzel@forfuture.pl