Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

czaq

[Tutorial cz.1] Prosty layout z wykorzystaniem Adobe Photosh

Promowane odpowiedzi

czaq    131

Screenshot_1_6985.jpg

Witam, w tym tutorialu pokażę jak zrobić prosty layout który można użyć jako portfolio, stronę firmową itp.

Potrzebna nam będą:

Podstawowa znajomość

- Photoshop

Grid 960

- http://960.gs/ - 16 kolumn

Przydatne skróty klawiszowe:

Nowa warstwa - ctrl + shift + n

Szybkie wypełnianie ctrl + backspace

Grupowanie warstw - ctrl + g

Przywracanie/chowanie miarek - ctrl + h

Miarki - ctrl + r

powielanie - ctrl + j

Więc zaczynamy.

1. Otwieramy 960_grid_16_col.psd

Screenshot_1-(1)_6986.jpg

2. odblokowujemy obie warstwy (ikona kłódki), warstwę 16 col Grid usuwamy, Background możemy Zrasteryzować

Screenshot_2_6987.jpg

3. Teraz zmieniamy obszar roboczy dokumentu w tym celu wchodzimy w Obraz/Rozmiar obszaru roboczego lub

używamy skrótu alt+ctrl+c

Screenshot_3_6988.jpg

i ustawiamy wartości 1300 dla szerokości i 2000 dla wysokości

Screenshot_4_6994.jpg

4. Jak widać, dokument nie wypełnił się kolorem,

Screenshot_5_6995.jpg

dlatego ustawiamy kolor narzędzia wypełniania na biały

Screenshot_6_6996.jpg

i używamy wiadra z farbą lub skrótu ALT+BACKSPACE

Screenshot_7_6997.jpg

5. Nasz obszar roboczy to wszystko pomiędzy tymi liniami:

Screenshot_8_6998.jpg

To co wystaje ma nam tylko dać orientację w naszym dokumencie.

6.Tworzymy 3 grupy Header/Content/Footer (możesz nazwać je jak chcesz, ja mam taką metodykę) za pomocą skrótu ctrl+g

lub za pomocą ikony folderu w oknie warstwy

Screenshot_9_7003.jpg

7. Tworzymy nową podgrupę w grupie HEADER i nazywamy ją menu+logo, odrazu stwórzmy nową warstwę w grupie HEADER

i nazwijmy ją bg_header.

Screenshot_10_7004.jpg

8. Utwórzmy nową linię pomocniczą przeciągając ją z górnej miarki z wciśniętym shiftem na wysokość 100 pixeli.

Screenshot_11_7005.jpg

Będąc upewnionym że masz zaznaczoną warstwę bg_header utwórz na niej takie zaznaczenie i wypełnij ją dowolnym kolorem.

Screenshot_12_7006.jpg

Teraz utworzymy na tej warstwie gradient, wybierzmy z górnego menu

Screenshot_13_7007.jpg

Lub użyjmy ikony efektów w oknie warstwy (FX)

Screenshot_14_7008.jpg

Zastosujmy taki gradient i dajemy ok. kolor z lewej: #ededed kolor z prawej: ffffff

Screenshot_15_7009.jpg

9. W grupie menu+logo dodajmy warstwę logo i wklejmy nasze gotowe logo, zmieńmy jego rozmiar i wypozycjonujmy je

Screenshot_16_7010.jpg

10. Teraz dodajmy nową warstwę tekstową z linkami, ja nazwałem swoje (Strona główna, O nas, Galeria, Kontakt)

Czcionka: Verdana Rozmiar: 14 i umieśćmy je w takim miejscu.

Bez-nazwy-2_7011.jpg

11. Header skończony, teraz zajmiemy się tworzeniem slidera. W grupie Content stwórzmy podgrupę slider i stwórzmy warstwę

bg_slider. Umieśćmy linię pomocniczą na wysokości 400 pix o raz stwórzmy takie zaznaczenie, wypełnijmy je dowolnym kolorem,

gdyż będzie to obrazek.

Screenshot_17_7012.jpg

12. Dodajemy swoją ilustrację możemy na niej dodać jakiś tekst

Screenshot_18_7013.jpg

13. Tworzymy nową grupę o nazwie NAV_SLIDER, dodajemy warstwę o nazwie BUTTON_NAV_L.

Tworzymy na niej prostokąt o wymiarach Wys 300px Szer 50px o kolorze #252525, a na niej tworzymy nową warstwę i strzałkę z Kształtów własnych o kolorze #FFFFFF

i wymiarach szer 30 px i wys 40 px umieszczamy je w tym miejscu

Screenshot_19_7014.jpg

Zaznaczamy nasze dwa element, wciskamy ctrl + j i powielamy je raz, potem wchodzimy do edycja/przekształć/ odbij w poziomie i przesuwamy w to miejsce

Screenshot_20_7015.jpg

Screenshot_21_7016.jpg

Screenshot_22_7017.jpg

To koniec pierwszej części, w kolejnej zajmiemy się tworzeniem button'a do slidera, buttonów oraz Ikon Nagłówków i samymi nagłówkami.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×