w tym samouczku do projektowania stron internetowych Photoshop zaprojektujemy oszałamiający, czysty i profesjonalny układ strony internetowej w Photoshopie. Układ, który robimy w tym samouczku, może być używany jako osobisty lub korporacyjny Projekt strony internetowej. Ten projekt jest dość przyjazny dla użytkownika, więc powinien być świetny dla reputacji Twojej witryny.
aktualizacja: Jest to pierwsza część dwuczęściowej serii, która nauczy Cię, jak tworzyć układ w Photoshopie, a następnie jak przekonwertować go na zgodny ze standardami (X)HTML Projekt strony internetowej.
Seria „czyste i profesjonalne projektowanie stron internetowych”
- Część 1: Tworzenie czystego i profesjonalnego projektowania stron internetowych w Photoshopie
- część 2: Kodowanie czystego i profesjonalnego projektowania stron internetowych
końcowy podgląd
spójrz na układ, który będziemy tworzyć w tym samouczku. Możesz zobaczyć końcowy podgląd obrazu poniżej lub kliknij tutaj, aby zobaczyć pełną wersję. 
przygotuj dokument programu Photoshop
1 Utwórz nowy dokument w programie Photoshop (Ctrl/Cmd + N), korzystając z ustawień z poniższego obrazu.
Ustaw ustawienia jednostek i miarek
2 Upewnij się, że pracujesz w jednostkach pikseli, które są standardową stałą jednostką do projektowania stron internetowych.
ustaw następujące ustawienia miarek w oknie dialogowym Preferencje (Ctrl / Cmd + K); kliknij jednostki & miarki i upewnij się, że masz wszystko ustawione tak, jak pokazano na poniższym rysunku. 
Dodaj linie pomocnicze do wyznaczania obszaru zawartości
3 Aktywuj miarki programu Photoshop z widoku miarek >.
Przełącz widoczność miarek, naciskając „Ctrl / Cmd + R”.
otwórz również Panel informacji z okna > Info (klawisz skrótu: F8).
panel Info podaje przydatne informacje w zależności od wybranego narzędzia.
naciskając „M”, wybierz prostokątne narzędzie markizy i utwórz pudełko o szerokości 120px z lewego rogu obszaru roboczego. Rozmiar można dostosować, przeglądając panel informacji podczas dokonywania wyboru.
teraz kliknij lewą miarkę i przeciągnij przewodnik po prawej stronie zaznaczenia markizy, jak pokazano na poniższym obrazku. 
4 przenieś ten wybór na prawą krawędź obszaru roboczego. Przypisz inny przewodnik po lewej stronie zaznaczenia.
twoje płótno powinno teraz wyglądać tak: 
tworzenie logo
5 teraz zamierzamy stworzyć logo dla naszej strony internetowej.
logo będzie bardzo proste i będzie miało efekt gradientu kolorów. Utwórz nową grupę (warstwa > Nowa > Grupa) i nadaj jej nazwę „logo”.
6 Wybierz narzędzie typu poziomego (T) i wpisz „SMASHING” (lub nazwę twojej witryny) wielkimi literami.
7 Następnie w Panelu znak Ustaw czcionkę na Arial, Styl na pogrubiony, a rozmiar na 42pt. Ustaw również opcję metody wygładzania na Sharp i użyj koloru # 101112.
możesz również ustawić te opcje na pasku opcji, gdy narzędzie typ jest aktywnym narzędziem. 
8 Kliknij dwukrotnie, aby otworzyć okno dialogowe Styl warstwy. Wybierz nakładkę gradientu, kliknij edytor gradientu i użyj ustawień, jak pokazano poniżej.
9 umieść warstwę typu „SMASHING” w odległości 35px od góry i 0px od lewej prowadnicy. Możesz to zrobić dokładnie za pomocą narzędzia Move (V) i klawiszy strzałek. Duplikuj tę warstwę typu (Layer > Duplicate Layer).
Przesuń zduplikowaną warstwę tuż obok słowa ” SMASHING „i edytuj tekst na”Dzine”. Powtórz kroki 6, 7, 8, ale użyj różnych kolorów gradientu (Lewy przystanek koloru: #b27625, Prawy przystanek koloru: #e5ad27) dla słowa „Dzine”.
10 wybierz narzędzie typu poziomego (T) i dodaj wiersz znacznika pod logo z następującymi ustawieniami. 
11 ostateczne logo powinno wyglądać jak obrazek poniżej.
aby aktywować / dezaktywować linie pomocnicze, przejdź do widoku > Pokaż > siatkę lub użyj skrótu Ctrl/Cmd + ; 
Tworzenie paska nawigacji
12 Utwórz nową grupę i nazwij ją „nawigacja”, powinna znajdować się nad grupą „logo”. Przeciągnij linię pomocniczą z górnej miarki, 150 pikseli poniżej górnej krawędzi obszaru roboczego. Wybierz narzędzie Prostokąt (U)i narysuj poziomą linię o wysokości 4px z kolorem # e3ab27 na obszarze roboczym.
13 Dodaj linki nawigacyjne w wysokości 12px od tej poziomej linii i 20px na prawo od lewej prowadnicy.
wybierz narzędzie Zaokrąglony prostokąt (U) i narysuj pole o rozmiarze 72px na 35px. Przenieś tę warstwę pod łącza tekstowe i nadaj jej nazwę „najedź kursorem”.
wyprostuj dolne zaokrąglone rogi za pomocą narzędzia Convert Point. Przesuń boki nierównych krawędzi poniżej z marginesem 8px, aby krawędzie były równe innym wewnętrznym krawędziom na dole.
kliknij dwukrotnie warstwę „najedź kursorem”, aby otworzyć okno dialogowe Styl warstwy i dodać kolory gradientu (Lewy przystanek koloru: #e5ad27, Prawy przystanek koloru: #b27625). Wybierz narzędzie typu poziomego (T), zaznacz tekst „Home” i zmień kolor na #ffffff (biały). 
Tworzenie sekcji „zadzwoń do nas”
14 następnie utworzymy sekcję „zadzwoń do nas” w prawym górnym rogu naszego projektu (dokładnie po przeciwnej stronie logo).
Pobierz ikonę telefonu i umieść ją w pobliżu prawego przewodnika. Nazwij tę warstwę „ikoną telefonu”. Wybierz narzędzie Typ poziomy (T).
dodaj numer telefonu po lewej stronie ikony telefonu za pomocą czcionki Arial, o rozmiarze ustawionym na 20PT i kolorze #292929.
dodaj trochę pokrewnego tekstu pod numerem telefonu za pomocą czcionki Arial, ustawionej na pogrubienie, o rozmiarze 11pt i kolorze #595959. 
Tworzenie nagłówka
15 teraz przejdziemy do utworzenia sekcji nagłówka. Utwórz nową grupę i nadaj jej nazwę „nagłówek”.
16 wybierz narzędzie Prostokąt (U) i utwórz kształt prostokąta o rozmiarze 1200px na 440px.
Umieść ten prostokąt w odległości 1px poniżej paska nawigacji i nazwij tę warstwę „nagłówek bg”. Kliknij dwukrotnie warstwę „header BG”, wybierz Styl warstwy Nakładki gradientu i miej te dwa kolory w edytorze gradientu(Lewy przystanek koloru: #2e2226, Prawy przystanek koloru: #7a7556).
szczegóły położenia prostokąta i kolorów znajdują się na poniższym obrazku. 
17 utwórz kolejny prostokąt z narzędzia Rectangle (U) O rozmiarze 960px na 360px.
Umieść ten prostokąt w odległości 40px od góry warstwy „header bg” i 0px od lewej prowadnicy. Nazwij tę warstwę „kontener nagłówka”. Podgląd poniżej, co zrobiliśmy do tej pory z projektem.
Tworzenie sekcji „polecany projekt”
18 następnie utworzymy sekcję polecany projekt. Utwórz nową grupę wewnątrz grupy nagłówków i nadaj jej nazwę „fp”. Wybierz narzędzie Prostokąt (U) i utwórz prostokąt o rozmiarze 630px na 340px w odległości 10px od góry i po lewej stronie kontenera nagłówka.
Nadaj tej warstwie kolor # 000000 i nazwij ją „kontener fp”. 
19 Otwórz obraz w programie Photoshop, aby umieścić go jako polecany projekt. Wybierz > wszystko (Ctrl/Cmd + A), a następnie Edytuj > Kopiuj (Ctrl/Cmd + C).
wróć do naszego projektu strony internetowej.
Utwórz nową warstwę nad warstwą „kontener fp” i przejdź do edycji > Wklej (Ctrl / Cmd + V), aby wkleić obraz polecanego projektu. Zmień nazwę tej warstwy na”FP image”. Kliknij prawym przyciskiem myszy warstwę „obraz fp” i wybierz utwórz maskę przycinania.
teraz obraz jest widoczny tylko wewnątrz prostokąta („kontener fp”).
Dostosuj tak, aby wyróżniony obraz projektu był podobny do pokazanego poniżej. 
20 przejdź do edycji > Przekształć > Skaluj (Ctrl/Cmd + T). Na pasku opcji kliknij w polu obrót i wpisz -4 i naciśnij enter dwa razy, aby dostosować kąt.
pozostań na tej samej warstwie („obraz fp”) i wybierz jasność jako tryb mieszania tej warstwy. 
21 następnie utworzymy pasek tytułu i opisu dla polecanego obrazu projektu. Wybierz narzędzie Prostokąt (U) i utwórz kształt prostokąta o rozmiarze 630px na 90px za pomocą koloru #161718.
Zmień krycie tej warstwy na 90% i nazwij ją „title bg”. Umieść ten prostokąt, jak pokazano na poniższym obrazku. 
22 utwórz kolejny prostokąt o rozmiarze 630px na 1px za pomocą koloru #9c9c9c i nazwij go „title horizontal line”.
Umieść ten prostokąt na górnej krawędzi zawartości warstwy” title bg”.
23 Dodaj tytuł i opis wewnątrz prostokąta utworzonego w kroku 21, używając następujących ustawień tytułu i opisu.
dla tytułu:
- czcionka: Arial, kolor: #ffffff, rozmiar: 25PT i opcja metody antyaliasingu: Sharp
do opisu:
- czcionka: Arial, kolor: #a4a4a4, rozmiar: 12PT i opcja metody antyaliasingu: Brak
Tworzenie sekcji „szybki cytat”
24 utwórz kolejną grupę wewnątrz grupy nagłówka i nadaj jej nazwę „szybki cytat”. Wybierz narzędzie Prostokąt (U) i utwórz prostokąt o wymiarach 300px na 340px. Umieść ten prostokąt w odległości 10px po prawej stronie sekcji polecany projekt i nazwij go „kontener qq”.
25 skopiujemy Styl warstwy z innej warstwy, którą stworzyliśmy w poprzednim kroku.
wejdź do grupy „nawigacja”, kliknij prawym przyciskiem myszy warstwę „najedź kursorem”, wybierz Kopiuj Styl warstwy, wróć do warstwy „kontener qq”, kliknij prawym przyciskiem myszy i wybierz Wklej Styl warstwy. Mamy teraz ten sam styl warstwy warstwy” hover „dla naszego ” QQ container”. 
26 wybierz narzędzie Typ poziomy (T).
napisz „Quick Quote” wewnątrz „QQ container”w odległości 20px od górnej i lewej krawędzi pudełka zawierającego. Ustaw rodzinę czcionek na Trebuchet MS (lub preferowaną czcionkę bezpieczną dla sieci) z kolorem białym (#ffffff) i opcją metody wygładzania na Sharp. Użyjemy narzędzia Zaokrąglony prostokąt (U), aby utworzyć trzy pola formularza.
wybierz narzędzie Zaokrąglony prostokąt (U) i ustaw promień na 3px. Następnie utwórz dwa zaokrąglone prostokąty o rozmiarze 260px na 35px, używając koloru białego (#ffffff). Następnie nazwij warstwy kształtów odpowiednio „field1 ” i” field2″.
Utwórz trzeci Zaokrąglony prostokąt o rozmiarze 260px na 75px używając białego koloru (#ffffff) i nazwij go „field3”. Wybierz narzędzie Typ poziomy (T) i utwórz etykiety dla każdego pola formularza. 
27 wybierz narzędzie Zaokrąglony prostokąt (U) i utwórz pole o wymiarach 80px na 35px i nazwij je „prześlij btn”.
28 kliknij dwukrotnie warstwę, aby otworzyć okno dialogowe style warstw i zaznacz pole wyboru Nakładka gradientu od lewej strony.
kliknij edytor gradientu i zmień kolory gradientu, jak pokazano poniżej. 
29 wybierz narzędzie typu poziomego (T) i wpisz „Prześlij”, używając czcionki Arial, pogrubienia stylu i rozmiaru 13pt. Wybierz obie warstwy w panelu Warstwy („prześlij btn „i”prześlij tekst”).
30 wybierz Przenieś narzędzie (V) z panelu Narzędzia i kliknij Wyrównaj pionowe środki i wyrównaj poziome środki z paska opcji.
(Alternatywnie możesz uzyskać ten sam wynik, przechodząc do warstwy > Wyrównaj > Centra pionowe i warstwy > Wyrównaj > Centra poziome). 
tworzenie głównego obszaru zawartości
31 Utwórz nową grupę i nazwij ją „zawartością”. Wybierz narzędzie Prostokąt (U).
Utwórz prostokąt o wymiarach 300px na 175px i nazwij go „c01”. Umieść tę warstwę 30px poniżej nagłówka i 0px od lewej prowadnicy. Kliknij dwukrotnie warstwę i użyj ustawień z poniższego obrazu.
32 teraz dodamy zawartość do tego pudełka. Wybierz narzędzie typu poziomego (T) i dodaj tekst „o SmashingDzine”. Dokonaj wyboru słowa „About” za pomocą narzędzia Horizontal Type Tool (T), a następnie zmień jego kolor na #b47825.
następnie dokonaj wyboru słowa” Smashing”, a następnie zmień kolor na #2f2f2f. dodaj mały opis i tekst linku pod tytułem. Następujące opcje zostały użyte dla tytułu, opisu i tekstu linku.
(możesz dostosować te opcje w razie potrzeby). 
dla tytułu:
- Font: Trebuchet MS, style: Normal, size: 24pt, anti-aliasing method: Sharp
do opisu:
- czcionka: Arial, styl: normalny, rozmiar: 12pt, metoda antyaliasingu: Brak, Kolor: #767676
dla tekstu linku:
- Font: Arial, style: Bold, size: 13pt, anti-aliasing method: brak, color: #252525, Underline
33 dodamy teraz kwadratowe pole obok opisu. Wybierz narzędzie Prostokąt (U) i kolor #FFFFFF, przytrzymaj klawisz Shift, aby zachować proporcje i utwórz kwadrat o rozmiarze 88px na 88px. Przesuń ten kwadrat w odległości 10px od lewej strony prostokąta („c01”).
Nazwij tę warstwę „obramowaniem”. Kliknij dwukrotnie warstwę, aby otworzyć okno dialogowe Styl warstwy i dodaj Styl warstwy obrysu z następującymi ustawieniami: 
34 Utwórz kolejne pudełko o rozmiarze 82px na 82px i umieść je na środku warstwy „border”. Nazwij tą warstwę ” box ” i zmień kolor tego kwadratu na #d5d5d5.
Wybierz wszystkie warstwy w tej grupie (Grupa „zawartość”), przejdź do warstwy > Nowa > grupa z warstw (Ctrl/Cmd + G) i zmień nazwę nowej grupy”informacje”. 
Uwaga: Wewnętrzne szare kwadratowe pudełko jest uchwytem na miejsce na obraz i można go zastąpić dowolnym wybranym obrazem.
35 Powiel grupę” o grupie ” (kliknij prawym przyciskiem myszy grupę i wybierz duplikat grupy) i nadaj jej nazwę „usługi”. Kliknij prawym przyciskiem myszy grupę ” usługi „i ponownie wybierz duplikat grupy i nazwij ją”portfolio”.
mamy teraz trzy grupy („o nas”, „usługi” i „portfolio”). Przenieś ostatnią grupę („portfolio”) do prawego przewodnika, jak pokazano poniżej. 
36 Zaznacz wszystkie trzy grupy w panelu Warstwy, a następnie przejdź do warstwy > Rozmieść > poziome Centra, aby równomiernie je rozłożyć.
Kliknij tutaj, aby zobaczyć pełny rozmiar obrazu poniższego zdjęcia. 
37 Zmień tytuły dla grupy” usługi „(w środku) i grupy „portfolio” (po prawej), jak pokazano poniżej. (Możesz zmienić te tytuły zgodnie z wymaganiami.) 
Tworzenie stopki
38 Utwórz nową grupę i nadaj jej nazwę „stopka”.
wybierz narzędzie Prostokąt (U) i utwórz prostokąt o rozmiarze 1200px na 100px na dole naszego układu projektu. Nazwij tę warstwę „stopka bg”. Użyj tego samego stylu Nakładki gradientu, co warstwa” header bg”, klikając prawym przyciskiem myszy warstwę” header BG ” i wybierając Kopiuj Styl warstwy.
wróć do grupy stopki, kliknij prawym przyciskiem myszy warstwę „stopka bg” i wybierz Wklej Styl warstwy. 
39wybierz narzędzie Typ poziomy (T) i dodaj tekst prawa autorskiego i tekst łącza stopki po lewej stronie za pomocą czcionki Arial, rozmiar 12PT i szary kolor (#dddddd). 
40 dodamy sekcję subskrypcji e-mail po prawej stronie.
Utwórz nową grupę wewnątrz grupy „stopka” i nadaj jej nazwę „Subskrybuj”. Wybierz narzędzie Zaokrąglony prostokąt (U) i utwórz prostokąt o wymiarach 85 pikseli na 35 pikseli. Nazwij tę warstwę „subscribe btn”.
41 Powtórz krok 26, aby dodać pola formularza i etykiety.
42 wybierz narzędzie Typ poziomy (T) i wpisz „Subskrybuj” używając czcionki Arial, styl ustawiony na pogrubienie i rozmiar na 13pt.
Wybierz obie warstwy („Subskrybuj btn „i” subskrybuj tekst”).
43 Powtórz krok 28, aby utworzyć przycisk Subskrybuj.
44 wybierz narzędzie Zaokrąglony prostokąt (U) i ustaw promień na 3px. Utwórz Zaokrąglony prostokąt o rozmiarze 210px na 35px przy użyciu białego koloru (#ffffff) i nazwij tę warstwę kształtu jako „pole e-mail”. Dodaj wiersz tekstu powyżej „pola e-mail”.
wynik końcowy
OK, to wszystko i gotowe. Oto ostateczny wynik.
kliknij na obrazek poniżej, aby zobaczyć pełny układ rozmiaru. Dzięki za śledzenie wraz z moim tutorialu. Mam nadzieję, że wszyscy cieszyli się i nauczyli się czegoś nowego z tego samouczka.
proszę zostawić poniżej swoje komentarze i podzielić się swoimi przemyśleniami i opiniami, chciałbym je usłyszeć. Możesz również udostępnić ten samouczek swoim znajomym, jeśli uważasz, że może to być dla nich pomocne!
Pobierz plik źródłowy
możesz pobrać plik Photoshop (PSD) tego samouczka z poniższego linku jako archiwum ZIP.
- clean-professional-weblayout (ZIP, 2.4 MB)
podsumowanie
jeśli zdecydujesz się użyć tego projektu, upewnij się, że zoptymalizujesz obrazy, aby skrócić czas ładowania. Ta decyzja powinna być świetna dla małych witryn, takich jak jeden na polu golfowym, ponieważ jest prosty, łatwy w użyciu i przyjazny dla użytkownika.
powiązane treści
- Jak stworzyć czysty projekt bloga za pomocą Photoshopa
- kodowanie czystej sieci 2.0 Style Web Design z Photoshopa
- Stwórz elegancki i minimalistyczny układ strony w Photoshopie
o autorze
Waheed Akhtar jest niezależnym projektantem stron internetowych z Dubaju, ZEA. Jest założycielem i redaktorem Boost Inspiration, gdzie prezentuje różne kreatywne zasoby sztuki cyfrowej, projektowania graficznego, ilustracji, fotografii i typografii. Możesz się z nim skontaktować poprzez Twitter lub Facebook.