Templatka dla strony o psach

Drukuj PDF

Z tego tutoriala nauczysz sie jak łatwo zrobić tmeplatkę dla strony o psach.

 

templatka o psach

 

 

Na początek stwórz nowy dokument, w którym będziesz rysować swój szablon.

Teraz wybierz zaznaczenie prostokątne i zaznacz prostokąt który będzie headerem strony.

templatka o psach

Stwórz teraz nową warstwę i wypełnij zaznaczenie gradientem.

tepmlatka o psach

Znajdź teraz jakieś fajne zdjęcie które umieścisz w headerze. Ja znalazłem dziecko, które bawi się z psem. Następnie wytnij postać i ustaw ją w odpowiednim miejscu.

templatka o psach

Teraz wybierz narzędzie horizontal type tool(tekst poziomy) i napisz białymi literami nazwę strony.

templatka o psach

Teraz stwórz nową warstwę, na której zrobimy logo strony.

Wybierz narzędzie zaznaczenie prostokątne i narysuj kwadrat po lewej stronie headera, a następnie wypełnij go gradientem.

templatka o psach

W tym miejscu zdaję się na Twoja inwencję twórczą i proponuję wymyslenie własnego loga. Żeby je zrobic stwórz nową warstwę i namaluj coś a potem dopisz jakiś tekst. Moje logo wygląda tak:

templatka o psach

Obydwa kształty możesz znaleźć w standartowych kształtach photoshopa, wystarczy wybrać narzędzie custom shape tool(kształt własny) i wybrać interesujący obrazek.

Kolejną rzeczą jaką zrobimy będzie pasek menu.

Stwórz nową warstwę i zaznacz na niej cienki długi prostokąt, a następnie wypełnij zaznaczenie kolorem.

templatka o psach

Teraz wybierz narzędzie tekst poziomy i napisz nazwy odnośników, każdą na nowej warstwie.

templatka o psach

Następnie stwórz nowa warstwę i namaluj na niej biały pasek oddzielający Aktualności od Porad.

templatka o psach

Zmniejsz krycie warstwy z oddzielaczem do około 20%

templatka o psach
templatka o psach

Skopiuj teraz warstwę z oddzielaczem kilka razy i poumieszczaj ją między wszystkimi zakładkami na pasku menu.

templatka o psach

Dobra, przechodzimy do dalszej części.

Na nowej warstwie zaznacz kolejny prostokąt. Będzie to boks z newsami dlatego musi być w miarę szeroki i wysoki. Po stworzeniu zaznaczenia wypełnij je jakimś jasnym kolorem.

templatka o psach

Pod spodem stwórz kolejny prostokąt, tej samej szerokości ale nieco niższy. Można w nim umieszczeć jakieś najważniejsze ogłoszenia, albo życzenia co tylko chcesz.

templatka o psach

Sklej ze soba obie warstwy z prostokątami i zastosuj do nich efekt inner shadow z zakładki layer>layer style>inner shadow(warstwa > styl warstwy > cień wewnętrzny) z moniższymi ustawieniami.

templatka o psach

Teraz stwórz nową warstwę i namaluj na niej oddzielenia dla poszczególnych działów na stronie.

tmeplatka o psach

Chodzi o te cienkie linie.

Następnie na nowej warstwie namaluj kolejny prstokąt, i wypełnij go kolorem (mój możesz zobaczyc na obrazku powyżej, zajmuje on całą szerokość szablonu)

W sumie templatka jest już gotowa. Spytasz pewnie "Hej, ale wygląda zupełnie inaczej niż ta z pierwszego obrazka". Spokojnie już tłumaczę co i jak.

Żeby tempatka wyglądała tak samo stwórz nową warstwę pod wszystkimi innymi, ale nad tłem i zaznacz na niej prostokąt, który będzie obejmował wszystkie elementy, które wcześniej stworzyliśmy, a nasępnie wypełnij go na biało.

Teraz wypełnij tło jakimś ciemnym kolorem.

Jeszcze jedna rzecz jaką zrobiłem to skopiowałem warstwę z białym tłem (tą którą przed chwilą zrobiliśmy) wypełniłem ją jasnym beżowym kolorem i przesunałem pod białą warstwę. Potem wybrałem narzędzie move (przesuń) i strzałkami przesunąłem ją trzy piksele w dół i w bok (trzy razy wcisnij klawisz w dół i trzy razy klawisz w bok). Na koniec dodałem do białej warstwy cień.

templatka o psach

Na juz samiutki koniec pododawałem troche tekstu po to żeby zobaczyć jak całośc prezentuje się wypełniona zawartością.

Oto końcowy efekt:

 

templatka o psach

 

To juz koniec. Mam nadzieję że nie było zbyt duzych problemów podczas wykonania tego tutoriala.

źródło: photoshopportal.pl

Dodaj komentarz

Kod antysapmowy
Odśwież