plStyle.pl

Templatka dla strony o psach

Ocena użytkowników: 0 / 5

Gwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywna
 

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 antyspamowy
Odśwież

Ostatnie komentarze

  • Gry online - przegląd portali z grami

    Loki 27.01.2018 21:51
    Ciekawe gry są na grywacz.pl

    Czytaj więcej...

     
  • Programy graficzne warte rozważenia 2017/2018

    Kari 07.12.2017 10:24
    Flash niby umarł a w sieci jest go jeszcze bardzo dużo, gry w HTML5 do piet nie dorastają produkcjom ...

    Czytaj więcej...

     
  • Letnie zdjęcie

    ogolny 03.11.2017 20:47
    ogólnie dobrze, tylko bez kształtów lepiej.

    Czytaj więcej...

     
  • Letnie zdjęcie

    Valdi 28.10.2017 17:52
    po prostu jako efekt zniszczen starego zdjecia - nie widziałeś nigdy takich ?

    Czytaj więcej...

     
  • Letnie zdjęcie

    Moder 31.07.2017 07:28
    jakie kształty?

    Czytaj więcej...

     
  • Letnie zdjęcie

    Misiek 30.07.2017 23:09
    Tak się zastanawiam... Te kształty czemu mają służyć?

    Czytaj więcej...

     
  • Letnie zdjęcie

    mru 27.07.2017 11:54
    efekt daje radę ale te białe plamy wyglądają jak zacieki emalii

    Czytaj więcej...

     
  • Letnie zdjęcie

    Magda 01.04.2017 10:11
    Bardzo fajny tutorial. Kształty moim zdaniem niepotrzebne, ale cała reszta bardzo przydatna.

    Czytaj więcej...

     
  • Letnie zdjęcie

    Malenee 13.01.2017 23:17
    prosze o instrukcje w języku polskim

    Czytaj więcej...

     
  • Ork fanem pilki ?;)

    lol 08.10.2016 13:14

Please publish modules in offcanvas position.