Przy tworzeniu strony bardzo ważny jest etap renderowania projektu strony, która następnie będzie składana i publikowana w sieci. W tym artykule dowiesz się, jak za pomocą Adobe Photoshop narysować właściwy układ strony internetowej, na podstawie którego można później tworzyć bardziej złożone układy.
Czy to jest to konieczne
Program Adobe Photoshop
Instrukcje
Krok 1
Utwórz nowy plik w Photoshopie (Ctrl + N) o wymiarach 1040x1400, gdzie 1400 to wysokość. Włącz wyświetlanie linijek (Ctrl + R) i ustaw piksele jako jednostki miary w ustawieniach linijki.
Krok 2
Zacznij rozciągać prowadnice tak, aby pasowały do granic pól układu. Rozciągnij krawędzie boczne tak, aby na krawędziach pozostało 40 pikseli. Górna i dolna granica powinny również pozostawiać po 40 pikseli z każdej strony do granic tła.
Krok 3
Następnie wybierz prowadnicę, która znajduje się 200 pikseli w dół od górnej części tła dla górnego nagłówka.
Krok 4
Aby utworzyć paski boczne po lewej i prawej stronie układu, ustaw prowadnice 240 pikseli od krawędzi tła po lewej stronie i 800 pikseli po prawej stronie.
Krok 5
5px do wewnątrz od lewego i prawego paska bocznego i narysuj jeszcze dwie pionowe prowadnice. Następnie przeciągnij dwie dodatkowe linie pomocnicze 245 pikseli w lewo i 795 pikseli w prawo.
Krok 6
Teraz zmierz od granicy nagłówka 30px i narysuj poziomą prowadnicę dla poziomego menu.
Krok 7
Wybierz wąski obszar poziomego menu, który właśnie zaznaczyłeś prostokątnym zaznaczeniem za pomocą klawisza M. Wybierz narzędzie do wypełniania i wypełnij obszar neutralnym jasnoszarym kolorem.
Krok 8
Wybierz narzędzie do wypełniania i wypełnij obszar neutralnym jasnoszarym kolorem. Kliknij menu „Wybierz-Modyfikuj-Skompresuj”, określ opcję 1-pikselową i kliknij „OK”. Wypełnij obszar jaśniejszym odcieniem szarości - otrzymasz ramkę menu.
Krok 9
Utwórz nową warstwę i wybierz odpowiedni obraz dla ikony lub logo witryny, a następnie otwórz go.
Krok 10
Wstaw obraz na nowej warstwie w nagłówku, umieszczając go na lewej krawędzi. Po prawej stronie obrazu napisz tytuł tekstowy witryny dowolną czcionką.
Krok 11
Zaprojektuj bloki swojej witryny w tym samym schemacie kolorów, co nowo utworzony nagłówek. Wybierz obszar lewego paska bocznego i wykonaj na nim te same dwukolorowe operacje wypełniania, co w przypadku bloku menu.
Krok 12
Zrób to samo z środkowym blokiem treści. Skopiuj lewą warstwę paska bocznego i umieść ją jako prawy pasek boczny.
Krok 13
Dodaj tekst do swojego układu - wybierz neutralną czcionkę i wypełnij tytuły menu, przykłady wiadomości, zdjęcia, tagi i linki.
Krok 14
Zakończ układ, tworząc "stopkę" lub stopkę - zapisz tam swoje prawa autorskie i kontakty.
