Blog > Komentarze do wpisu

Tutorial: Layout od podstaw cz. 1 (Photoshop)

Parę dni temu postanowiłem przygotować nowy szablon dla Bloksa, mocno nawiązujący do grunge oraz hand-drawing design. Z biegiem czasu koncepcja nieco ewoluowała i tak w mojej głowie narodził się pomysł na artykuł, który w miarę przystępny sposób, opisywałby poszczególne etapy tworzenia layoutu w Photoshopie oraz jego późniejszą obróbkę (HTML + CSS), i uwaga - oto jest.

W poradniku umieściłem również kilka ogólnych wskazówek pomocnych przy projektowaniu wyglądu witryny. Tutorial jest przeznaczony zarówno dla średnio zaawansowanych, jak i początkujących użytkowników, dlatego parafrazując mistrza gatunku, w tekście być może natchniecie się na oczywiste oczywistości. Zacznijmy od efektu końcowego:

Krok 1. Po pierwsze potrzebny jest nam pomysł. W poszukiwaniu inspiracji odwiedzamy takie serwisy, jak: DeviantART, Web Creme, czy CSS Mania.

Krok 2. Dalej sięgamy po długopis lub ołówek i przelewamy nasze wszystkie pomysły na papier, co pozwoli nam na dokonanie wstępnej selekcji, dzięki której zaoszczędzimy mnóstwo czasu i jeszcze więcej nerwów.

Krok 3. Kolejnym krokiem jest dobranie odpowiedniej kolorystyki. W tym celu korzystamy z kreatorów (np. ColorBlender), bądź sięgamy po gotowe palety barw opublikowane na łamach COLOURlovers, czy Kulera.

Krok 4. Pora przygotować tło dla naszego szablonu. Dość ciekawy zbiór tekstur oferuje na przykład serwis Amazing Textures. Po wybraniu odpowiedniego zdjęcia, najwyższy czas odpalić Photoshopa i nieco je obrobić.

  • Korzystając z narzędzia prostokątnej selekcji (M) zaznaczamy cztery deski od prawej i tworzymy z nich nowy dokument.

  • Za pomocą patch tool (J) i od czasu do czasu clone stamp tool (S) usuwamy zanadto rzucające się w oczy zabrudzenia oraz skazy.

  • Narzędziem dodge tool (O) likwidujemy ciemne plamy na drewnie (Exposure: 15 - 20%).

  • Skrótem Ctrl+U wywołujemy okno Hue/Saturation i zabarwiamy drewno na brązowy kolor (tryb Colorize, Hue: 33, Saturation: 25, Lightness: -18).

  • Kolor podkreślamy przy użyciu okna Levels (Ctrl + L) i aplikujemy następujące wartości w sekcji Input Levels: 44, 0.79, 240.

  • W dalszej kolejności lekko wyostrzamy teksturę (z menu głównego wybieramy Filter > Sharpen > Sharpen).

  • Na koniec z naszego tła definiujemy nowy pattern (Edit > Define Pattern).

Krok 5. Tworzymy nowy dokument o wymiarach 778 na 900 pikseli z przeźroczystym tłem.

Krok 6. Wypełniamy warstwę dowolnym kolorem (G). W oknie Blending Options (klikamy prawym przyciskiem myszy na aktualnej warstwie i wskazujemy polecenie Blending Options) zaznaczamy sekcję Pattern Overlay i z listy wybieramy nasz świeżo zdefiniowany pattern.

Krok 7. Rysujemy prostokąt (U) z zaokrąglonymi rogami (Radius: 10 px, Fixed Size: 758x650 px, Snap to Pixels). Figurę centrujemy, oddalamy od górnej krawędzi o jakieś 175 px i przekształcamy na obiekt typu rastrowego (klikamy na nim prawym przyciskiem myszy w panelu Warstw i z menu kontekstowego wybieramy polecenie Rasterize Layer).

Krok 8. Za pomocą narzędzia selekcji odmierzamy od prawej krawędzi 210 pikseli, tak aby uprzednio stworzona figura znalazła się w obrębie zaznaczenia na całej swojej wysokości. Następnie klikamy na zaznaczonym obszarze prawym klawiszem i wybieramy opcję Layer via Cut. Innymi słowy odcinamy panel boczny od kontenera na treść o szerokości 200 px ;)

Krok 9. Zaznaczamy dopiero co utworzoną warstwę i analogicznie do wcześniejszego punktu odcinamy od figury pasek o szerokości 196 pikseli. W ten oto sposób otrzymaliśmy trzy paski o szerokości 558, 4 oraz 196 pikseli.

Krok 10. Najcieńszy pasek wypełniamy kolorem #d6c7b9 (Blending Options > Color Overlay), szerszy #ebe2d9. Nazwę warstwy z najszerszym kontenerem zmieniamy na "content".

Krok 11. Z wciśniętym klawiszem Ctrl klikamy lewym przyciskiem myszy na miniaturę warstwy "content". Z menu wybieramy polecenie Select > Modify > Contract i wartość ustalamy na 2 piksele. Górną cześć selekcji wypełniamy gradientem liniowym (kolor #eeeeee do przeźroczystości).

Krok 12. Tworzymy nową warstwę o nazwie "search box” i za pomocą prostokątnej selekcji oraz wiaderka z farbą rysujemy prostokąt o wymiarach 210 na 125 pikseli. Dalej z paska narzędziowego wybieramy lasso (L) i według poniższego wzoru zaznaczamy dolną cześć czworokąta (Feather 0, wyłączony Anti-alias), a następnie usuwamy selekcję. Powstałą figurę obracamy (Ctrl + T) o jakieś 3 - 3.5 stopnia i pozycjonujemy, tak aby nie dotykała ona prawej krawędzi dokumentu (1 piksel odstępu wystarczy).

Krok 13. Potrzebujemy teraz zdjęcie, przedstawiające pomiętą kartkę papieru.

  • Wklejamy obraz w nowej warstwie o nazwie "paper" (całkowicie przysłaniamy nim figurę utworzoną w punkcie 12).

  • Z wciśniętym klawiszem Ctrl, klikamy lewym przyciskiem myszy na miniaturę warstwy "search box", odwracamy selekcję (Shift + Ctrl + I) i zaznaczamy warstwę "paper". Z menu głównego wybieramy Layer > Layer Mask > Reveal All i wypełniamy selekcję czarnym kolorem. Dzięki temu w razie czego, po odłączeniu maski od warstwy, będziemy mogli swobodnie przemieszczać teksturę w obrębie danego kształtu. Opacity warstwy (w panelu Layers) ustalamy na 90%.

  • Zawartość warstwy "search box" wypełniamy białym kolorem (Blending Options).

Krok 14. Duplikujemy warstwę "search box" i przeciągamy ją pod oryginał w panelu Warstw. Obiekt wypełniamy czarnym kolorem, obracamy o około 3.5 stopnia i przesuwamy o 7 pikseli w dół. Aplikujemy filtr Gaussian Blur (Filter > Blur) o wartości 2.5 px. Opacity wartswy ustalamy na 45%.

Krok 15. Ponownie z wciśniętym klawiszem Ctrl, klikamy lewym przyciskiem myszy na miniaturę warstwy "search box" i tworzymy nowy layer. Korzystając z pędzla (B) nanosimy lekkie zabrudzenia (w panelu Brushes aplikujemy poniższe ustawienia).

Krok 16. Rysujemy spinacz o rozmiarach mniej więcej 25 na 79 pikseli (znajduje się w Custom Shape Tool (U) w sekcji Objects). Wypełniamy go kolorem #d6c7b9 i obracamy o parę stopni, a w panelu Blending Options zaznaczamy sekcję Bevel and Emboss (Size: 0). Dalej tworzymy nowy pusty layer i scalamy go ze spinaczem (zaznaczamy obie warstwy w panelu i wciskamy Ctrl + E). Potem odpowiednio przycinamy powstały obiekt.

Krok 17. Rysujemy lupę (Custom Shape, sekcja Web) o rozmiarze 36 na 29 pikseli. Następnie zaznaczamy ją, zaraz potem usuwamy, a dalej tworzymy nową warstwę i "niedbale" wypełniamy selekcję przy pomocy pędzla (1 px, #486cbd).

Krok 18. Dodajemy napis "Szukaj". Odręczną czcionkę, niezbędną do wykonania projektu pobieramy ze strony Dafont.com.

Krok 19. Korzystając z pędzla (2 px, #486cbd) rysujemy strzałkę.

Krok 20. Tworzymy prostokąt z zaokrąglonymi rogami (Radius: 5px) o wymiarach 135 na 25 px. Za sprawą Blending Options wypełniamy go kolorem #f1efe5 i dodajemy obramowanie (Stroke, Size: 1px, Position: Inside, Color: #b9aca0).

Krok 21. W nowej warstwie o nazwie "note" rysujemy prostokąt (186x194 px). Dalej przycinamy jego dolną krawędź, wypełniamy kolorem #efecb5 i aplikujemy podane style.

Krok 22. Tworzymy kolejną warstwę, następnie zaznaczamy figurę utworzoną w poprzednim punkcie, zmniejszamy selekcję o jeden piksel i analogicznie do punktu 15 nanosimy delikatne zabrudzenia. W dolnej części obiektu, korzystając z gradientu liniowego (np. #dedbab do przeźroczystości) tworzymy lekki cień.

Krok 23. Pod warstwą "note" rysujemy czarny czworokąt i lekko go rozmazujemy (Gaussian Blur, 2.5 px).

Krok 24. Dodajemy nową warstwę i rysujemy na niej niewielki prostokąt. "Szarpiemy" boczne krawędzie figury (analogicznie do punktu 12), dalej obracamy ją o parę stopni i aplikujemy następujące style w Blending Options: Opacity (30%), Color Overlay (#ffffff), Stroke (1px, Inside, #cacaca).

Krok 25. Nad górną częścią największego kontenera dodajemy napis "Start" (Georgia, 16px). Tworzymy nową warstwę, przeciągamy ją pod napis i rysujemy czworokąt. Następnie go zaznaczamy, zmniejszamy selekcję o dwa piksele i w nowej warstwie na jej końcach, gradientem liniowym (czarny do przeźroczystości), rysujemy lekkie cienie. Opacity warstwy ustawiamy na około 18%.

Krok 26. Ikonę RSS pobieramy ze strony Feed Icons. Wybieramy grafikę o wymiarach 32x32 px.

  • Zaznaczamy ikonę, a następnie ją ukrywamy. W nowej warstwie "niedbale" wypełniamy selekcję pędzlem (1px, #e06a31).

  • Na chwilę przywracamy domyślną ikonę i przy pomocy różczki (Tolerance: 20%) zaznaczamy biały obszar na grafice. Selekcję wypełniamy białą barwą, a grafikę źródłową usuwamy.

Krok 27. Pora zająć się czcionkami.

Krok 28. Na koniec rysujemy strzałki, posługując się już dobrze znaną nam techniką (Custom Shape, sekcja Arrows) i gotowe!

Zobacz także:

środa, 08 października 2008, stl

Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
takie prace warto propagować z experymenty informatyczne
Mimo, że kilka dni temu zrobiłem już o tym wzmiankę w minizapiskach , ale wciąż jestem pod wielkim wrażeniem graficznej doskonałości nowego projektu SenTineLa stl , czyli szablonu na bloxa o nazwie Wood.n i postanowiłem napisać o nim coś więcej. ... »
Wysłany 2008/10/10 23:45:53
Wood.n Blox Edition z Long Way
Pomysł na uwiecznienie tegoż procesu podkradłem z Perfection or Vanity . I to by było na tyle, jeśli chodzi o wstęp, przejdźmy teraz do praw autorskich. Całość, czyli grafika oraz CSS jest udostępniona na licencji Creative Commons 2.5 Polska ... »
Wysłany 2009/02/26 11:02:58
Komentarze
sgk
2008/10/08 22:55:46
Estetyczna Absolutna Ekstraklasa!
Bardzo mi się podoba!
Kilka tricków zapewne "przetłumaczę" sobie na GIMPa...

Czekam teraz na powiązanie tego z CSSem i "live demo" ;)
-
2008/10/10 14:18:53
bardzo fajne, inspirujące i pomocne. Jestem tępakiem w tych sprawach, ale powiem szczerze, że bardzo przydały mi się linki i te porady, ale nie mam photoshopa, tylko GIMP'a. Jednakże super! Gratuluję, dziękuję i pozdrawiam!
-
Gość: weasel, *.chello.pl
2008/10/12 02:46:59
Bardzo ciekawy tutorial i bardzo ładny layout. Właśnie szukałem takiego opisu bo zaczynam zabawę w stronki :) Tylko przydał by się jakiś screencast bo dla autora to mniej pisania i robienia screenów a dla czytelników przyjemniejszy nośnik informacji. Nie mogę się doczekać połączenia CSS. Bardzo mnie to interesuje.
-
stl
2008/10/12 14:04:05
@eskey: Dzięki za uznanie, a szczególnie za świetną promocję :) Niestety druga część poradnika nie pojawi się tutaj zbyt szybko.

@m_e_l_a_s_a: Co do GIMP'a - może w przyszłości coś mądrego przygotuję, ale na razie sam muszę nauczyć się jego obsługi ;)

@weasel: Z jednej strony masz rację, jednak z drugiej, pewnie kosztowałoby mnie to o wiele więcej czasu (którego ostatnio mi brak), a poza tym nie mam odpowiedniego oprogramowania, CamStudio to odrobinę za mało.
-
au.lait
2008/10/26 14:07:50
Pokłon do ziemi! Świetna robota, niesamowicie cieszy oko.
Za lekcję step-by-step - pokłon #2.
-
stl
2008/10/28 06:38:07
Dzięki za uznanie - dla twórcy nie ma nic bardziej cennego :)
-
2008/10/29 19:56:22
Pięknie, dokładnie wytłumaczone, tylko ja mam Photoshopa z polską wersją:( i nic nie rozumiem, albo zbyt mało, aby to zrobić:(
-
stl
2008/10/29 20:30:58
Hmm, wciśnij Ctrl + K, w oknie, które się pojawi odszukaj opcję odpowiedzialną za język interfejsu i z listy wybierz Angielski.
-
Gość: kubik, *.dolsat.pl
2008/12/09 11:58:17
Pomocy!!! Zawiesiłem się na 8 i 9 punkcie i nie jestem w stanie tego przeskoczyć. Pomocy!!!
-
stl
2008/12/09 21:48:12
Hmm, nie wiem na czym dokładnie polega Twój problem. Musisz po prostu podzielić kontener na trzy części przy użyciu narzędzia selekcji, spójrz proszę na obrazek pod krokiem numer 10.
-
Gość: kubik, *.dolsat.pl
2008/12/30 15:50:00
Layout wykonany. Nie sadziłem, że to jest takie proste. Gorzej będzie z 2 i 3 częścią. Dzięki za tutorial. Jest naprawdę konkretny.Pozdr.
-
Gość: rudek, *.mlyniec.gda.pl
2009/01/04 23:30:39
Witam. Mam pytanie odnośnie layotu.
Po stworzeniu go w photoshopie muszę go pociąć na kawałki tak? W jaki sposó to zrobić?
pozdr
-
stl
2009/01/05 21:18:15
Bardzo ogólnie rzecz ujmując, należy odpowiednio połączyć ze sobą warstwy i przy pomocy narzędzia selekcji i ewentualnie prowadnic, przygotować poszczególne obrazki. Zajrzyj do drugiej części poradnika, przeanalizuj arkusz stylów oraz pliki graficzne zawarte w archiwum z gotowym szablonem.
-
Gość: Morean, *.lanet.net.pl
2009/01/07 15:10:59
Bardzo bym prosił o screen do kroku 8 bo po prostu nie rozumiem pojęcia "narzędzie selekcji".
-
stl
2009/01/08 00:29:57
Myślę, że ten obrazek rozwiąże wszystkie Twoje wątpliwości.
-
Gość: rudek, *.mlyniec.gda.pl
2009/01/19 17:13:20
Moze mi ktos wytłumaczyc dlaczego w kroku 4 w drugiej czesci tutorialu w kodzie użyty jest selektor a nie . A potem w definiowaniu styli użyty display: block. Czym rózni sie ta definicja od tej gdybym użył div???
-
Gość: rudek, *.mlyniec.gda.pl
2009/01/19 17:26:30
span a nie div:)
-
stl
2009/01/19 17:28:38
Tak naprawdę niczym się nie różni, chciałem po prostu pokazać, jak łatwo przekształcić element liniowy na blokowy.
-
Gość: gosc, *.neoplus.adsl.tpnet.pl
2009/01/30 23:50:01
Tutorial bardzo ciekawy ,ale czy mógłbys dodac kilka zdjec miedzy krokiem 7 ,a 10 :)
Pozdrawiam
-
stl
2009/01/31 13:05:08
No dobrze, tutaj masz krok 7, a tu krok 8.
-
2009/02/15 09:20:31
Powiem tak - tutek wspaniały (kończę część 1- od wczoraj ;-)
Trochę czasu potrawało zanim przesiadłam się z Gimpa na PS - niektóre kroki może troche zbyt lakoniczne. Na parę tricków znalazłam swoje patenty.

Stl - Wielkie dzięki!
-
Gość: shapi, *.neoplus.adsl.tpnet.pl
2009/05/12 14:02:08
moze mi ktos łopatologicznie wytlumaczyc co po kolei mam zrobic w kroku 13 z tą kartką? bo wstawiam ja i staram sie robic jak w instrukcji, ale albo w efekcie wszysko koloruje na czarno, albo zostaje mi kartka papieru na wierzchu :/
-
stl
2009/05/12 18:09:52
Tworzysz nową warstwę o nazwie "paper" i umieszczasz w niej kartkę papieru, tak aby grafika przysłaniała warstwę "search box". Dalej w panelu Warstw z wciśniętym klawiszem Ctrl klikasz na miniaturę warstwy "search box" (wokół kształtu pojawi się obramowanie). Następnie odwracasz selekcję (Shift + Ctrl + I), w panelu warstw zaznaczasz warstwę "paper" i wciskasz przycisk Delete.
-
Gość: shapi, *.neoplus.adsl.tpnet.pl
2009/05/19 23:10:23
Skonczyłem tego tutka, i jest genialny, wrecz najlepszy z tego co dotychczas znalazłem na necie. Tylko pytanie - nie moglbys jeszcze wstawic jakiegos przystepnego kursu cięcia strony na plasterki?
-
Gość: Lolek, *.neoplus.adsl.tpnet.pl
2011/03/22 09:47:50
A mógłbyś udostępnić ten layout w pliku .psd ?
-
stl
2011/03/22 16:41:07
Hmm, raczej nie.
-
Gość: Lolek, *.neoplus.adsl.tpnet.pl
2011/03/23 09:38:06
A mógłbyś mi powiedzieć od czego mam zacząć zabawę ze stronami internetowymi ?
Jakiego języka się nauczyć ? Jaki edytor wybrać? itp.
-
stl
2011/03/23 10:35:40
Dokładnie przejrzyj: Poradnik Webmastera oraz Kurs BrowseHappy a na pewno znajdziesz odpowiedzi na wszystkie swoje pytania :)
-
Gość: Lolek, *.neoplus.adsl.tpnet.pl
2011/03/23 11:01:33
Dzięki za pomoc właśnie pobrałem edytor kED , wcześniej maiłem frontPage ale w tym kursie nie polecają go. Jeszcze raz dzięki
-
Gość: agelock, *.dynamic.chello.pl
2011/04/12 22:40:20
Wciągający tutorial! :) Przyłączam się do prośby kolegi piszącego wcześniej - w jaki sposób ciąć poszczególne elementy? I jeszcze pytanie: dlaczego obecnie lepsze jest korzystanie z pojemników w layoucie, a nie w prost z tabeli wygenerowanej z photoshopa przez 'slice-ing'. Pozdrawiam!
-
Gość: Iwet, *.015.c87.petrotel.pl
2011/04/27 19:47:03
Wszystko fajnie, ale i tak topornie mi idzie. W kroku 8 zaznaczyłam sobie prostokąt i niestety warstwa przez wycinanie jest nieaktywna :/....
-
Gość: trick, *.radom.vectranet.pl
2011/09/11 00:26:59
bardzo fany tutek więcej takich :) pozdrawiaqm autora
-
Gość: jeremiah, *.ssp.dialog.net.pl
2012/05/10 15:29:49
Extra, tylko proszę o zamieszczenie .psd.
Pozdrawiam
-
Gość: ter, *.dynamic.gprs.plus.pl
2013/09/07 22:03:25
po 10 godzinach spędzonych z poradnikiem udało mi się ukończyć grafikę, jako osoba, która nigdy w życiu nie miała styczności z photoshopem, dzięki wielkie super poradnik
-
Gość: pogo, *.48.classcom.pl
2015/04/02 20:51:41
przydało by się dodać do tutoriala jeszcze jak pociąć szablon w photoshopie
longway

Mini blog

Treść bloga dostępna jest na licencji Creative Commons. by-nc-nd

stat4u