Zaczęła się wiosna czas więc zająć się… swoim ogródkiem. W poniższym tutorialu opiszę jak wykonać prosty design strony sklepu ogrodniczego.

1. Tło

Tworzymy nowy plik o szerokości 1024 px. Tło składa się z 3 warstw:

a) kolor tła: #edf7f6, dodatkowo zastosowane pędzle, chmury (można pobrać: www.brusheezy.com)
b) pasek: 6 px, kolor: #c5f3f3
c) gradient: #dffeff - #ffffff

2. Top

a) Tworzymy prostokąt o zaokrągleniu 2 px, zaznaczamy (Ctrl +T) i przechylamy wpisując wartość -5 w odpowiednim miejscu.

Pędzlem tworzymy kropki wielkości 80 px, następnie wybieramy z menu Filter – Blur – Gaussian Blur, ustawiamy wartość : 40 px.

Następnie Blend Mode ustawimy na Overlay. Powracamy do warstwy z prostokątem, zaznaczamy obszar, prawy klawisz myszy – Select Inverse, wracamy do warstwy ze smugami i usuwamy zbędny obszar.

Reksio font: ReservoirGrunge, 19 px, Sharp, Regular,
Sklep ogrodniczy: Arial, 24 px, Sharp, Narrow,
Ikona z www.iconfinder.net

b) zdjęcie z serwisu www.sxc.hu

c) zdjęcia drzew z serwisu www.sxc.hu

3. Menu

a) Tworzymy prostokąt o zaokrągleniu 2 px (patrz pkt. 2a)
b) Font: Tahoma, 11 px, None, Bold
c) Hovery: kolor : #1e9ea1

4. Content

a) Nagłówek (patrz pkt. 2a)
Font: Tahoma, 18 px, Sharp, Bold
b) Treść : Font: Tahoma, 11 px, None, Regular
c) button, kolor: #1fa1a4,
Font: Tahoma, 11 px, None, Bold
Smugi (patrz pkt.2a)

d) Z prawej strony dodajemy kilka zdjęć (WWW.sxc.hu)

5. Stopka

a) kolor tła: #75bc1c, smugi (patrz pkt. 2a), font: Tahoma, 11 px, None, Regular

Dziękuję za uwagę.

Pozdrawiam
2010 © Sylwia Bartyzel
www.forfuture.pl
sylwiabartyzel@forfuture.pl