Zaprojektuj czysty i elegancki układ bloga w Photoshop CS6

W tym samouczku pokażę Ci proces tworzenie prostego i czystego bloga projektowego używając najnowszego Photoshopa. Będziemy używać nowego Style znaków i Style akapitów aby pomóc nam usprawnić proces.

Aby wykonać ten samouczek, będziesz potrzebować następujących zasobów:

• Darmowa czcionka Sansation od Bernda Montaga.
• 26 Powtarzalny wzór piksela z PSDfreemium.
• Darmowe ikony mediów społecznościowych od Daniele Selvitelli.

• Próbny

Przygotowanie płótna

Krok 1

W tym projekcie będziemy używać 960 gs jako ramy. Pobierz szablon ze strony głównej i wewnątrz pliku zip, wyszukaj plik photoshop. Otwórz plik '12 Column Grid 'w Photoshopie.

Kliknij ikonę oka dla warstwy siatki 12 Col, aby ją ukryć; nie będziemy tego na razie potrzebować.

Krok 2

Bieżący rozmiar płótna jest za mały. Kliknij Obraz> Rozmiar płótna (lub Ctrl + Alt + C). Dodaj większy rozmiar i ustaw jego punkt kontrolny na środku.

Krok 3

Naciśnij Ctrl + R, aby odsłonić linijkę. Kliknij Widok> Nowy Przewodnik, aby stworzyć nowy przewodnik, który pomoże nam dokładnie zaprojektować. Wybierz Pionowy i na pozycji: 185 px aby utworzyć pionowy przewodnik 185 px z lewego górnego rogu płótna.

Krok 4

Narysuj kolejną prowadnicę pionową w pozycji 150 px, 1095 px i 1130 px.

Poniżej znajduje się nasz końcowy przewodnik w płótnie.

Przygotowanie motywu kolorowego

Krok 5

Do tego projektu użyjemy ładnej kombinacji kolorów z Colorlouver. Kliknij link Podgląd, aby otworzyć kombinację kolorów jako plik jpeg.

Zapisz kombinację kolorów i umieść ją w pliku Photoshop. Umieszczając obraz bezpośrednio wewnątrz płótna, możemy próbkować jego kolor szybciej i łatwiej.

Przygotowanie tła

Krok 6

Wybierz tło warstwa i kliknij ikonę blokady na górze panelu Warstwy, aby ją odblokować. Kliknij dwukrotnie miniaturę, aby zmienić jej kolor.

Kliknij drugi kolor, # 948371, aby go wybrać.

Krok 7

Narysuj prostokątny kształt na górze płótna. Będzie to drugie tło.

Krok 8

Zachowaj wybrany kształt. w Pasek opcji, otwarty Napełnić Kolor a następnie kliknij ikona koła kolorów. Po otwarciu okna dialogowego Próbnik kolorów kliknij pierwszy kolor, aby go zaznaczyć. Dla jego Uderzenie wybór koloru Żaden.

Krok 9

Utwórz nową warstwę, a następnie zaznacz górne płótno za pomocą prostokątnego narzędzia markizy. Aktywuj narzędzie gradientowe i wypełnij go promieniowy gradient od białego do czarnego. Upewnij się, że gradient jest wyśrodkowany na górze kanwy.

Zmień jego Mieszanka tryb do Ekran i zmniejsz jego Nieprzezroczystość do 37%.

Krok 10

Utwórz nową warstwę i nazwij ją „cień”.

Narysuj prostokątny wybór na dole drugiego tła, jak pokazano. Kliknij Edytuj: Wypełnij. Zestaw Posługiwać się do czarny. Kliknij dobrze aby wypełnić zaznaczenie kolorem czarnym.

Krok 11

Zmiękcz go za pomocą rozmycia Gaussa. Kliknij Filtr> Rozmycie> Rozmycie gaussowskie.

Krok 12

Przytrzymaj Alt, a następnie umieść kursor między cień i górne tło warstwa. Bez zwalniania klawisza Alt kliknij, aby przekonwertuj warstwę na Maskę przycinającą. Przekształcając go w Maskę przycinającą, cień przechodzi teraz w górne tło.

Krok 13

Zrzuć cień Nieprzezroczystość do 50% aby to było subtelne. Poniżej możesz zobaczyć wynik w 100% powiększeniu.

Krok 14

Zawsze dobrze jest umieścić te warstwy w jednej grupie. Aby to zrobić, wybierz wszystkie warstwy a następnie kliknij Ctrl + G.

nagłówek

Krok 15

Narysuj prostokąt na górnym płótnie, jak pokazano.

Krok 16

w Pasek opcji, zestaw Uderzenie kolor do # af9f8e.

Krok 17

Dla jego Napełnić kolor, wybierz gradient liniowy z # d0c4b9 do # a89c91.

Poniżej przedstawiono wynik w widoku 100%.

Nazwa witryny

Krok 18

Dodaj nazwę strony po lewej stronie projektu. Obserwuj rozmieszczenie, jak pokazano poniżej. Kliknij dwukrotnie tekst i dodaj Upuść cień. Aby uzyskać czcionkę, użyj Sansation.

Menu

Krok 19

Narysuj menu po drugiej stronie paska menu. Użyj czcionki Sansation 14 pt. Ponownie zauważ miejsca docelowe.

Krok 20

W aktywnym menu ustaw czcionkę na pogrubioną.

Krok 21

Aktywuj Narzędzie Wielokąt i nastaw boki do 3. Narysuj kształt trójkąta za pomocą Wypełnij: # 3d3123 i Skok: Brak. Dodaj Styl warstwy > Drop Shadow.

Krok 22

Podkreślmy aktywne menu, dodając pod nim linię. Aktywuj Narzędzie Linia i ustaw jego wagę 5 px. Wybierz # f76b6a za jego wypełnienie, bez udaru.

Umieść linię pod aktywnym menu i dodaj 1 px miejsca na dole paska menu.

Używanie stylów znaków

Krok 23

Zapiszmy ustawienie znaku jako styl znakowy. Ta funkcja jest uproszczoną wersją stylów znaków w programie InDesign. Aby go zapisać, aktywuj tekst, a następnie kliknij ikonę „Nowy styl znaków”.

Kliknij dwukrotnie nowy styl znaków i użyj następującego ustawienia.

Krok 24

Wybierz inne menu, a następnie kliknij Styl znaku, aby go zastosować. Jeśli znajdziesz znak plus obok stylu postaci, oznacza to, że postać ma inne ustawienie. Aby zastąpić ustawienia, kliknij ikonę okrągłej strzałki.

Krok 25

Powtórz poprzedni krok, aby utworzyć nowy styl znaków dla aktywnego menu.

Krok 26

Więc po co używać Stylów znaków? Style znaków pomagają nam scentralizować ustawienie postaci. Możemy po prostu edytować styl znaków, aby edytować każdy tekst przy użyciu tego stylu. Zobacz przykład poniżej. Jeśli edytujemy typ czcionki wewnątrz stylu znakowego Top Menu - Normalne do Corbel, wszystkie normalne menu są automatycznie zmieniane na Corbel.

Krok 27

Utwórz nową warstwę i umieść ją pod paskiem menu. Kliknij pasek menu, przytrzymując klawisz Ctrl, aby dokonać nowego wyboru na podstawie jego kształtu. Wypełnij go czarny.

Krok 28

Usuń zaznaczenie za pomocą Ctrl + D. Zmiękcz, dodając Rozmycie Gaussa, Filtr> Rozmycie> Rozmycie gaussowskie.

Suwak

Krok 29

Narysuj prostokątny kształt o szerokości 10 kolumn (patrz poniżej).

Dla jego Kolor wypełnienia Wybierz # dfd1c2. Dla jego Uderzenie Wybierz # c8baac z rozmiarem 10 pkt. Kliknij małą strzałkę rozwijaną obok podglądu linii i upewnij się Wyrównaj do środka jest zaznaczone.

Krok 30

Wklej zdjęcie na górze ramki. Przekształć go na Maska przycinająca naciskając Ctrl + Alt + G. Obraz zostanie automatycznie umieszczony w ramce suwaka. W razie potrzeby możesz przesuwać i zmieniać rozmiar obrazu bez wpływu na jego ramkę.

Krok 31

Narysuj inny prostokątny kształt za suwakiem w tym samym kolorze. Upewnij się, że przyciągnąłeś go do skrajnego przewodnika. Dodaj Styl warstwy> Nakładka wzoru za pomocą wzoru pikselowego z PSDfreemium. Stonuj jego Nieprzezroczystość uczynić swój subtelny.

Krok 32

Narysuj prostokątny kształt nad kształtem za pomocą Wypełnij: # b3aca5 i bez udaru. Naciśnij Ctrl + T, a następnie obróć go o 45 °. Konwertuj kształt warstwy na Maska przycinająca.

Krok 33

Zduplikuj kształt i zmień jego rozmiar. Zmień jego Napełnić do ciemniejszego koloru. Konwertuj kształt warstwy na Maska przycinająca.

Krok 34

Powtórz ten sam krok, aby narysować kolejną strzałkę po drugiej stronie.

Krok 35

Ctrl-kliknij ramkę slajdów, aby dokonać nowego wyboru. Utwórz nową warstwę i przekonwertuj ją na a Maska przycinająca. Wypełnij wybór za pomocą czarny.

Krok 36

Następnie odznacz (Ctrl + D) złagodzić to używa Rozmycie Gaussa.

W razie potrzeby możesz zmniejszyć krycie cienia.

Krok 37

Narysuj zaokrąglony prostokąt na rogu suwaka za pomocą Wypełnij # c8baac.

Krok 38

Narysuj okrąg wewnątrz kształtu. Ustaw jego Uderzenie do czarny z rozmiarem 1 pkt i usuń wypełnienie.

Krok 39

Wybierz okrąg ścieżka używa Wybór ścieżki narzędzie. Przeciągnij ścieżkę Shift + Alt, aby ją powielić.

Powtórz tę czynność, aby narysować więcej okręgów.

Krok 40

Wybierz jedną ze ścieżek okręgu. Naciśnij Ctrl + Shift + J, aby przyciąć go do nowej warstwy.

Krok 41

w Pasek opcji, usuń jego Uderzenie i zmień jego Napełnić do a promieniowy gradient od # e38989 do # bb5c5c. Dodaj Styl warstwy> Blask zewnętrzny i Upuść cień.

Krok 42

Narysuj eliptyczny wybór pod suwakiem. Utwórz nową warstwę i wypełnij ją czarny.

Krok 43

Odznacz (Ctrl + D). Zmiękcz używając Rozmycie Gaussa.

Dolne tło

Krok 44

Narysuj inny prostokątny kształt dla dolnego tła. Użyj tego samego Napełnić i Uderzenie kolor jako kształt suwaka.

Jak zawsze, bądź bardzo ostrożny w umieszczaniu. Chcemy, aby pokrywał każdy przewodnik na płótnie.

Dodaj Styl warstwy> Nakładka wzoru.

Poniżej przedstawiono wynik w 100% powiększeniu.

Krok 45

Wybierz górny obszar za pomocą narzędzia Zaznaczanie prostokątne.

Krok 46

Utwórz nową warstwę, umieść ją za kształtem. Wypełnij wybór za pomocą czarny. Naciśnij Ctrl + T, kliknij prawym przyciskiem myszy i wybierz Perspektywiczny.

Przeciągnij górne rogi na zewnątrz.

Kliknij ponownie prawym przyciskiem myszy i wybierz Skala. Przeciągnij górny uchwyt w dół.

Kliknij prawym przyciskiem myszy i wybierz Osnowa. Przeciągnij lewy i prawy segment do wewnątrz.

Zmiękcz używając Rozmycie Gaussa.

Stonuj Nieprzezroczystość do 20%.

Krok 47

Narysuj biały prostokąt w tle. Będzie to tło dla głównej zawartości witryny.

Dodaj spację 10 px do lewej, prawej i górnej strony tła. Odstępy powinny być łatwe, ponieważ przygotowaliśmy przewodnik we wczesnych etapach. Dodaj Styl warstwy> Blask zewnętrzny.

Krok 48

Dodaj nowy przewodnik, 25 px od górnej części kształtu.

Tytuł sekcji

Krok 49

Dodaj nowy styl znaku dla tytułu sekcji strony i jej opisu.

Dodaj tytuł sekcji i jej opis za pomocą narzędzia Tekst. Zastosuj style, które stworzyliśmy wcześniej. Upewnij się, że dodasz przestrzeń o rozmiarze 25 px od górnej części tła, korzystając z wcześniejszej pomocy przewodnika.

Krok 50

Narysuj linię 5 px pod opisem strony za pomocą Wypełnij: # 938270 i Skok: Brak.

Post na blogu

Krok 51

Utwórz inny styl znaków dla tytułu postu.

Krok 52

Dodaj tytuł postu i zastosuj poprzedni styl znaków.

Krok 53

Narysuj prostokątny kształt pod tytułem o szerokości 4 kolumn. Zestaw biały za to Napełnić i #bebebe za to Uderzenie. Dodaj Styl warstwy> Obrys.

Krok 54

Wklej obraz na kształt. Konwertuj go na Maskę przycinającą (Ctrl + Alt + G).

Krok 55

Narysuj zaokrąglony prostokąt za pomocą Wypełnij: # 8e8380 i Skok: Brak. Przekształć go na Maska przycinająca.

Krok 56

Utwórz nowe style znaków dla metadanych blogu.

Krok 57

Dodaj tekst metadanych na górze kształtu i zastosuj wcześniej wprowadzony styl postaci.

Krok 58

Aktywuj Rodzaj narzędzie i kliknij przeciągnij, aby utworzyć pole tekstowe. Ustaw jego szerokość na 4 kolumny. Kliknij Wpisz> Wklej Lorem Ipsum wypełnić go automatycznie wygenerowanym Lorem Ipsum z Photoshopa.

Krok 59

Utwórz nowy styl akapitowy dla zawartości postaci. Kliknij nową ikonę na panelu Style akapitowe.

Kliknij dwukrotnie styl akapitowy i użyj tego ustawienia.

Krok 60

Zastosuj ten styl do treści postu. Możesz także eksperymentować z ustawieniami wcięcia i odstępów.

W przypadku projektowania stron internetowych dezaktywuj dzielenie wyrazów.

Krok 61

Narysuj zaokrąglony prostokąt za pomocą Wypełnij: # 8e8380 i Skok: Brak. Dodaj Styl warstwy> Nakładka wzoru. Aby zachować spójność, użyj tego samego wzoru, co w suwaku.

Krok 62

Dodaj etykietę przycisku. Proponuję zapisać go jako styl postaci. W ten sposób możemy go łatwo wykorzystać do innych przycisków.

Krok 63

Poprzedni przycisk służy do normalnego stanu. Powielmy to i zmieńmy kolor na # f76b6a. Ustaw także typ etykiety na pogrubiony.

Krok 64

Umieść post w grupie, a następnie naciśnij Ctrl + J, aby go powielić. Przeciągnij z wciśniętym klawiszem Alt, aby powielić grupę.

Powtórz ten sam krok, aby utworzyć więcej postów. Pamiętaj, aby zmienić zdjęcie i tytuł każdego posta.

Krok 65

Duplikować Czytaj więcej przycisk i zmień jego etykietę na numer. Będziemy go używać do nawigacji po stronach. Pamiętaj, aby ustawić jeden z przycisków w celu zatrzymania kursora.

Krok 66: Stopka

Zacznijmy pracować nad stopką. Dodaj tytuł widżetu i jego opis.

Krok 67

Dodaj link i narysuj poniżej linię 1 px. Zestaw Wypełnienie: Brak i Skok: # 8e8380.

Krok 68

Kliknij Więcej opcji przycisk i wybierz linia przerywana.

Krok 69

Dodaj więcej linków do widżetu.

Krok 70

Powiel widżet.

Krok 71

Musimy również dodać warunek zawisu. Ustaw jeden z linków na pogrubienie.

Pod tym aktywnym linkiem dodaj linię 5 px. Ustaw kolor na # f76b6a. Dla spójności wygląd tego łącza jest podobny do aktywnego menu na pasku menu.

Krok 72

Dodaj kolejny prostokąt w dolnej części. Ustaw jego Napełnić do # 3d3123.

Informacje stopki

Krok 73

Dodaj informacje stopki za pomocą Rodzaj narzędzie. Daj spokój Upuść cień aby dodać kontrast do jego tła.

Sieć społeczna

Krok 74

Dodaj kilka ikon mediów społecznościowych od Daniele Selvitelli. Dodaj Styl warstwy> Blask zewnętrzny.

Krok 75

Stonuj normalną ikonę na 50%. W stanie zawisu po prostu zachowajmy jego Nieprzezroczystość w 100%.

Krok 76

Chwyć ikonę kursora wolnej ręki i umieść najmniejszy kursor nad linkiem aktywnym lub najechaniu.

Ostateczny wynik

To jest nasz ostateczny wynik. Widać, że najnowsza wersja Photoshopa ma kilka interesujących funkcji do projektowania układu strony internetowej. Style znaków i style akapitów to znaczące ulepszenie dla każdego projektanta stron internetowych.

• Próbny
• Pobierz źródło