Witam, w dzisiejszym tutorialu pokażę Wam jak w miarę prosty sposób stworzyć layout na stronę o tematyce ogrodniczej.
Jest to bardzo proste do wykonania, a zarazem można uzyskać naprawdę ciekawy efekt. Myślę, że nawet początkujący graficy powinni sobie w tym poradzić. Nauczy ich ten tutorial nowych funkcji i pokaże proste sposoby na wykonanie poszczególnych elementów.
Liczę, że mój tutorial przyda się komuś. Życzę miłej lektury.

Tło

Pierwszą rzeczą, którą się zajmiemy będzie oczywiście tło strony. Tło wykonane jest za pomocą gradientu o takich ustawieniach :

Top

W topie możemy zastosować różne ciekawe elementy związane z tematyką
pracy choć nie koniecznie. W moim layoucie umieściłem trawę wystającą
zza menu, napis oraz chmury.
Ustawienia napisu :
Drop Shadow

Gradient

Stroke

Menu

Przechodzimy teraz do menu, które tutaj odgrywa bardzo ważną rolę, dlatego trzeba zadbać o jego przejrzystość i czytelność.

Tworzymy zaznaczenie obszaru (prostokąta) , którym będzie menu i wybieramy Edit > Stroke.
I ustawiamy tak :

Następnie w środku równo tworzymy kolejny prostokąt tak jak na rysunku :

Następnie tworzymy taki gradient w prostokącie w środku :

Oraz obrys (w tym samym prostokącie):

Teraz jak chcemy możemy dodać jakiś efekt np. biały prostokąt na całą szerokość i zmniejszyć Opacity (krycie), a także wypadałoby dodać linie oddzielające teksty.

Możemy także zrobić tzw. roll-over. Czyli to co się będzie działo po najechaniu myszką na menu ( o ile chcemy kodować naszą stronę ) . Ja zrobiłem to tak :

Zrobiłem prostokąt w miejscu gdzie ma się znaleźć moje "zaznaczenie" i dałem taki gradient :

Teraz pozostaje nam dodać tekst i menu gotowe.

Oto efekt menu :

Obrazek

Teraz zajmiemy się znalezieniem odpowiedniego obrazka. Wstawiamy go pod menu i dajemy w miarę duży obrys o kolorze białym. Możemy też dodać prostokąty z cyferkami, które pokazują, że można wybrać inny obraz.

Elementy tekstowe

Teraz już najłatwiejsze do wykonania elementy. Tworzymy prostokąt z jakimś gradientem najlepiej lekkie przejście z jasnego żółtego w biały. Dodajemy tekst a także mały prostokąt z napisem więcej, po którego kliknięciu przeczytamy cały artykuł.

Możemy także dodać tak jak to zrobiłem ja na dole tabelkę z cennikiem różnych rzeczy. Jest to bardzo proste. Wystarczy dobrze umieścić obrazek i dodać tekst oraz pogrubić ważniejsze informację.

Warto by dodać także stopkę, która dostarczy czytelnikom strony informacji o autorze i innych ważnych rzeczach.

Efekt końcowy

Dziękuję za przeczytanie tutorialu. Mam nadzieję, że dowiedzieliście się czegoś nowego, a ja przyczyniłem się do waszego "rozwoju" w tym kierunku .

Pozdrawiam, Damian "Creatflu" Bartosiewicz