[TuT][Photoshop] Tworzenie Tumbrl za pomocą Adobe Photoshop w 10 min.

[Pan Suavek]

W tym tutorialu będziemy starali się odtworzyć układ Tumblr. Należy pamiętać, że nie chcemy skopiować projektu ze złych intencji, ale tylko rozwijać nasze umiejętności i chcemy zobaczyć, czy uda nam się uzyskać dokładny, a przynajmniej podobny układ tej strony internetowej.

 

Ten poradnik jest przeznaczony dla początkujących, tych, którzy chcą zrozumieć podstawy Photoshopa w zakresie tworzenia layoutów internetowych. Pod koniec tego kursu, będziesz już bardziej to rozumiał.

 

Na co ty czekasz? Zacznijmy!

 

Wygląd końcowy:

 

 

Krok 1.

 

 

Zaczynamy od utworzenia obszaru o następujących rozmiarach: 1000 px szerokości i 900 px wysokości. Nadajemy mu kolor niebieski (# 3a5975) i za pomocą narzędzia Prostokąt zaokrąglony (U) dodajemy mniejszy, ciemno-niebieski o rozmiarach około 900 pikseli w szerokości i 500 pikseli wysokości. Początek gradientu musi ciemnoniebieski i jeden dolny powinien być identyczny z tłem. W ten sposób możemy stworzyć ładny gradient, który zniknie w tle.

 

Krok 2.

 

Ponieważ to poradnik dla rozwijających umiejętności tylko do tych celów, nie będziemy kopiowali, tylko tworzyli własne logo. Umieszczamy podobne logo na górze strony (patrz tumblr.com dla porównania).

 

Krok 3.

 

 

Możemy przejść do tworzenia jednego z przycisków najwyżej, można zobaczyć na oficjalnej stronie Tumblr. Korzystając z narzędzia Prostokąt zaokrąglony, tworzymy figurę z kolorowym tłem. Zastosuj biały efekt wewnętrzny cień jak na rysunku, aby osiągnąć ten biały górny pasek.

 

Krok 4.

 

 

Zastosuj niebieskawą nakładkę gradientu. Kolory użyte są bardzo podobne do tła, ale robimy to specjalnie.

 

Krok 5.

 

 

Ostatnim akcentem dla naszego przycisku będzie obramowanie, które jest w zasadzie najważniejszym elementem. Ledwo można zauważyć przycisk bez efektu obramowania, dlatego kolor używany do paska jest ciemno-niebieski.

 

Krok 6.

 

 

Teraz czas, na to aby utworzyć kolejny przycisk, który można zobaczyć na stronie tumblr. Tym razem będziemy używać jasny kontrast niebieskiego. Dodaj czarny efekt cieni do niego i ustawić przezroczystość do 15 procent, który nada jej naprawdę ładny i elegancki wygląd.

 

Krok 7.

 

 

Dodajemy sam efekt co daliśmy do poprzedniego przycisku - Cień wewnętrzny, z białym paskiem u góry.

 

Krok 8.

 

 

Dodamy trochę "Faseta i płaskorzeźba" do przycisku. Wraz z momentem nałożenia gradientu, lekko będzie się wyróżniać.

 

Krok 9.

 

 

Dodajemy efekt gradientu za pomocą dwukrotnego kliknięcia w pasek. dodajemy po jednej i drugiej stronie kolor jasno niebieski.

 

Krok 10.

 

 

Zakończmy przycisk dodając obramowanie ustawiając krycie na: 30 proc.

 

Krok 11.

 

 

Używając Helvetica Neue Bold, piszemy jakiś tekst na przyciskach. Postanowiłem tutaj zrobić tak jak na tumblr z przyciskami, które są "Sign In" i "Zarejestruj się teraz".

 

Krok 12.

 

 

Kontynuujemy nasz szablon, tworząc formularz wyszukiwania. Korzystając z narzędzia Prostokąt zaokrąglony (U), tworzymy kształt i ustawiamy "wypełnienie" do 0 proc. Następnie stosujemy ciemny niebieski, 1 pikselowy efekt lini i prawie widoczny wewnętrzny efekt blasku. Używając Helvetica Neue Bold, wprowadzamy jakiś tekst wewnątrz formularza wyszukiwania. Daj tekst ciemnożółty kolor i 1 piksel, niebieskiego efektu cienia (30% przezroczystości). Skorzystaj z bezpłatnej ikon IconSweets z Yummygum i znajdź "Lupy". Daj jej ciemnoniebieski kolor i umieść go w pobliżu prawej krawędzi formularza.

 

Krok 13.

 

 

Użyj narzędzia Prostokąt zaokrąglony (U) ponownie, i utwórz kształt około 190 pikseli szerokości i 200 pikseli wysokości. Wykonaj dokładne kroki mające stworzyć nasz pierwszy przycisk od nagłówka, tylko tym razem dodanie będzie proste każde 35 pikseli. Następująca linia podzieli nasz element na równe kształty. Aby utworzyć linię można użyć narzędzia wiersza (U) i przytrzymaj klawisz Shift podczas przeciągania go.

 

Krok 14.

 

 

Za pomocą przycisku, nadajemy naszemu kształtowi ledwo widoczny biały wewnętrzny blask, 3 proc. Zastosuj skok 1 piksel o nieprzezroczystości 60 procent i ciemnym kolorze niebieskim.

 

Krok 15.

 

 

Krok 16 (Pusty szablon gotowy).

 

 

Tutorial nie jest mojego autorstwa, został on skopiowany i przetłumaczony przezemnie:

http://www.1stwebdesigner.com/tutorials/recreate-tumblr-layout-using-photoshop/

 

PSD Download:

http://dl.dropbox.com/u/35995890/tumblr.psd

 

Ze względu na to że nie ja uploadowałem ten plik,

a udostępniam go z innej witryny ufam iż plik nie zawiera wirusa,

dlatego skan wydaje mi się zbędny.

 

[Pan Suavek]

r

[Pan Suavek]

r

[Cristiano.]

Poradniki odświeżamy po upływie tygodnia

[Equener.]

Super na pewno się przyda tym bardziej że podchodzi to pod webdesing ^_^ dużo ogarnąć można co do stylu warstw ^_^

[iGu]

Duzo pracy wlozyles, jest efekt...