W tym tutorialu pokażę Wam krok po kroku jak zrobić prosty zielony szablon.

Tło

Tworzymy dokument o dowolnych, odpowiadających nam rozmiarach i wypełniamy go ciemnoszarym kolorem, w moim przypadku było to #181b1a. Następnie idziemy do Filter -> Noise -> Add Noise (Filtr -> Szum -> Dodaj szum) i ustawiamy wartość w granicach rozsądku, tym samym nie przekraczając 1.

Mniej więcej na wysokości 2/5 dodajemy zielony pasek (#5f9c00). Używając Text tool na jego górnej oraz dolnej krawędzi rysujemy myślnikami (tak zrobiłam to ja - można to zrobić innymi sposobami) dwie linie, barwy białej i zmniejszamy ich krycie. W swojej pracy dodałam również teksturę w postaci pasków (można użyć każdej innej wedle uznania) - przysunęłam ją do dolnej i górnej krawędzi zielonego paska i za pomocą Eraser tool (gumką) z "Airbrush Soft Round" o wartości 300 usunęłam resztę tekstury, tak, aby było ją widać jedynie przy wspomnianym już wielokrotnie zielonym kształcie. Kolejnym krokiem jest zaznaczenie za pomocą Rectangular Marquee Tool połowy kształtu (od połowy w dół), wybranie Gradient tool (a następnie opcji Foreground to Transparent) i pokrycie owego fragmentu delikatnym, czarnym gradientem. Tę warstwę ustawiamy na krycie Normal - 50%. To samo robimy z drugą połową zielonego paska, z tą różnicą, że zamiast czarnego gradientu, wybieramy gradient biały, zdecydowanie mniejszy i delikatniejszy, nie zmieniając krycia.

Mając gotowe tło należy zabrać się do głównej części strony, w której umieścimy treść.

Podstawa

Pierwszym krokiem w tej części jest stworzenie kształtu, który umieścimy mniej więcej na 2/6 wysokości szablonu. Następnie należy zmniejszyć jego wypełnienie (Fill) do 30%, a w Blending Options zaznaczyć Drop Shadow

oraz Stroke

Powinniśmy otrzymać coś takiego:

Następnie zaznaczamy nasz przezroczysty kształt i idziemy do Select -> Modify -> Contract, ustawiając odpowiadającą nam wartość. Owe zaznaczenie wewnątrz kształtu wypełniamy (na nowej warstwie) białą farbą. Jesteśmy więc na tym etapie:

Menu główne

Do zrobienia menu potrzebny będzie kształt o kolorze #4f9b00, który następnie potraktujemy trochę Dodge Tool (Range - Highlights), aby dodać mu artystycznych rozjaśnień. Kształt oczywiście jak widać w efekcie ostatecznym umieszczamy na górze naszego białego pola.

Dla oddzielenia poszczególnych pozycji wykorzystamy nic innego, jak zwykłe linie. Za pomocą Line Tool tworzymy białą pionową linię na wysokość naszego menu i krycie zmieniamy na Overlay, edytując następnie wedle uznania wartość krycia. Zaraz obok tworzymy linię o kolorze czarnym, z którą postępujemy identycznie jak w przypadku poprzedniej. Uzyskany efekt powinien wyglądać mniej więcej tak

Dodając napisy w poszczególnych opcjach w tym przypadku najlepiej użyć prostej czcionki, o niewielkim rozmiarze, z opcją Sharp (Anti Alias). Pisząc drukowanymi literami, jedyne co dodałam to Drop Shadow w Blending Options

Na koniec, na górze naszego menu pojawił się pasek - to nic innego jak biały kształt z kryciem Soft Light o wartości 40%. Nasze menu powinno wyglądać tak

Menu dolne

Z tym menu postępujemy niemalże identycznie jak z menu poprzednim - jak widać kolory są takie same, tekst "Portafolio por sectores" ma te same wartości co poszczególne kategorie w menu, tak samo jest z owym delikatnym paseczkiem, który się pojawił, a który różni się jedynie tym, że w przeciwieństwie do poprzedniego jest ustawiony w pionie. Jedyna różnica polega na tym, że poszczególne podkategorie zostały wykonane czcionką Verdana

Treść

Ta część zależna jest od Waszej wyobraźni - czyli tradycyjnie. Zdjęcie w topie, elementy treści, krój czcionki i jej kolor najlepiej dobierzcie sami. Od siebie w tej kwestii mogę tylko powiedzieć, że użyłam (jak zwykle ) Verdany o rozmiarze 11, w kolorze #494949. Napisy w stopce to również Verdana, jednak o jeden punkcik mniejsza i w innym kolorze.

"Resztki"

Pisząc resztki, mam na myśli wskazane czerwonymi strzałkami elementy

To nic innego jak "dopieszczenie" szablonu - tak, by nie było pustych miejsc, suchego tekstu, etc. Warto formatować nawet zwykły Lorem Ipsum, gdyż zawsze inaczej się to prezentuje. W miejsce większych napisów można wstawić logotypy czy inne symbole firmy - byle to tylko miało ręce i nogi.

Zobacz ostateczną wersję