Jak stworzyć profesjonalny nagłówek strony w Photoshopie

Wprowadzenie

Program Photoshop CC 2014 to doskonałe narzędzie do tworzenia grafik internetowych, w tym banerów i nagłówków. Przy pierwszym projekcie warto zachować prostotę, aby nie przytłoczyć odbiorcy nadmiarem elementów. Jeśli Twoja firma ma określone kolory i czcionkę, śmiało wykorzystaj je w projekcie.

Krok 1 – Utworzenie nowego dokumentu

Uruchom Photoshop, naciśnij Ctrl+N lub wybierz Plik → Nowy. W oknie dialogowym podaj wymiary, np. 900 px szerokości i 150 px wysokości, a następnie kliknij OK.

Krok 2 – Tło

Jeśli chcesz użyć jednolitego koloru, kliknij ikonę koloru pierwszoplanowego w pasku narzędzi, wybierz barwę i narysuj prostokąt przy pomocy narzędzia Prostokąt, rozciągając go na cały obszar. W tym samouczku pokażemy, jak zamiast tego połączyć dwa gradienty.

Krok 3 – Dodanie pierwszego gradientu

Wybierz narzędzie Gradient. W pasku opcji kliknij Wypełnienie i wybierz preset Czarny‑biały. Kliknij powyżej obszaru nagłówka i przeciągnij kursor w dół, po czym zwolnij przycisk myszy – gradient zostanie zastosowany.

Krok 4 – Tekst

Wybierz narzędzie Tekst poziomy i przeciągnij, tworząc pole tekstowe. W pasku opcji ustaw czcionkę, rozmiar i kolor. Przesuń pole, aby było wyśrodkowane po lewej stronie nagłówka.

Krok 5 – Dodanie obrazu (np. logo)

W menu Plik → Otwórz wybierz plik graficzny, który ma się znaleźć w nagłówku (logo, zdjęcie produktu itp.). Po otwarciu obrazu wybierz Warstwa → Duplikuj, w polu Do dokumentu wskaż nazwę bieżącego pliku nagłówka (domyślnie „Untitled‑1”) i zatwierdź OK. Obraz pojawi się jako nowa warstwa.

Krok 6 – Skalowanie obrazu

Wybierz Edycja → Przekształcenie → Skala. Przytrzymaj klawisz Shift, aby zachować proporcje, i przeciągnij narożnik, dopasowując rozmiar do wąskiego nagłówka. Naciśnij Enter, a następnie przesuń obraz na prawą stronę.

Krok 7 – Dopasowanie koloru tła

Kliknij ikonę koloru pierwszoplanowego, a następnie kliknij dowolny punkt po prawej stronie nagłówka, aby pobrać z obrazu odpowiedni odcień. Potwierdź przyciskiem OK.

Krok 8 – Drugi gradient

Wybierz ponownie narzędzie Prostokąt, w pasku Wypełnienie wybierz ikonę Gradient. Przeciągnij kursor od lewej krawędzi obrazu do lewej krawędzi całego nagłówka – powstanie prostokąt z gradientem opartym na wybranym kolorze.

Krok 9 – Ustawienie warstwy gradientu

W panelu Warstwy znajdź warstwę Rectangle 1 i przesuń ją tak, aby była trzecią od góry (pod warstwą obrazu i tekstem). Zmniejsz krycie (Opacity) do około 50 %, co pozwoli gradientom płynnie się połączyć.

Krok 10 – Styl tekstu: Bevel & Emboss

W panelu Warstwy zaznacz warstwę z tekstem, wybierz Warstwa → Styl warstwy → Bevel & Emboss. Ustaw styl na Emboss i przesuń suwak Depth w lewo, około 225 % – uzyskasz delikatny efekt wypukłości.

Krok 11 – Dodatkowy styl: Satin

W oknie Styl warstwy wybierz Satin. Ustaw tryb mieszania na Multiply i zmniejsz krycie do ok. 15 %. Kliknij OK, aby zastosować.

Zapis i eksport

Zapisz gotowy nagłówek jako zoptymalizowany plik internetowy: Plik → Eksportuj → Zapisz dla sieci (Web). Wybierz format JPEG, jakość obrazu ustaw na 75‑80 % – uzyskasz mały rozmiar pliku przy zachowaniu jakości. Kliknij Zapisz, wybierz lokalizację i po zamknięciu Photoshopa dodaj plik do swojej strony internetowej.