Maj
14
2013

Stwórz kuszący header – czyli o dobrym nagłówku na bloga

W dzisiejszych czasach stworzenie bloga w darmowym systemie blogowania trwa kilka sekund. Niestety, w internecie spotykamy tysiące identycznie wyglądających blogów, które mimo tego, że są wartościowe, nie przyciągają czytelników pod względem wizualnym. Jaka jest najprostsza metoda uatrakcyjnienia bloga, nadania mu własnego, alternatywnego do podstawowych szablonów wyglądu? Pierwszym elementem, który rzuca się w oczy po wejściu na bloga, jest jego nagłówek. Nawet jeśli pozostały wygląd bloga będzie standardowy, to ciekawy oraz spersonalizowany nagłówek pozwoli nam na wyróżnienie się.

Dobry nagłówek podstawą profesjonalnego bloga

Darmowe systemy do blogowania mają o wiele mniejsze możliwości w zakresie kształtowania poszczególnych elementów strony w html/css, niż zwykłe strony internetowe. Przez wzgląd na to, w naszym nagłówku umieścimy nazwę strony wystylowaną jedynie jako obrazek – bez używania css.

1e

Za takim uproszczeniem przemawia jeden fakt – prostota rozwiązania. Darmowe systemy do blogowania powstają po to by móc od razu pisać na dobrze wyglądającym blogu, nie zaś zastanawiać się nad selektorami dziedziczenia css.

Jak zmienić nagłówek?

Obraz nagłówka wymienisz bez problemu w każdym systemie do blogowania. W najpopularniejszym Bloggerze zrobisz to w miejscu Układ, następnie kliknij obok nagłówka na Edytuj. Aby nagłówek się dobrze prezentował, użyj opcji tak jak pokazano na obrazku – miejsce docelowe obrazu to „umieść opis za obrazem”. Podobnie robi się to w Wordpressie oraz innych systemach.

Zaczynamy pracę w programie graficznym

Przed rozpoczęciem tworzenia nagłówka, zastanów się, jaka szerokość najbardziej odpowiada do twojego bloga. Standardem w sieci jest 960 lub więcej pikseli szerokości, oraz od 150 do 300 pikseli wysokości.

Dobry header cechują świetne zdjęcie, nazwa i krótki opis bloga, przejrzysty układ. Po pierwszym rzucie oka na nagłówek bloga, powinieneś wiedzieć o czym on jest.

W tutorialu stworzymy header na podstawie zdjęcia, dostępnego za darmo na stronie sxc.hu.

Tło nagłówka

W Photoshopie tworzymy plik o wielkości 940 na 200 pikseli. Może być także wyższy, jeśli lubisz duże nagłówki. Gdy już masz pierwszą warstwę, przeciągnij na nią plik przedstawiający bokeh.

1

Setki darmowych zdjęć tego typu znajdziesz w sieci na licencji umożliwiającej darmowe wykorzystanie przez osoby prywatne jak i firmy typu agencja reklamowa Kraków. (Taki obrazek można także stworzyć od podstaw w Photoshopie, ale to materiał na osobny tutorial. Wykonanie podobnego zdjęcia jest możliwe z użyciem jasnego obiektywu). Dopasuj rozmiary zdjęcia tak, by prezentował się dobrze, przeciągając za rogi i boki ekranu. Aby obraz nie zmieniał proporcji, kliknij w ikonkę kłódki wymiarów, następnie użyj scrolla by powiększyć równomiernie cały obrazek.

Jeśli jeszcze nie zatwierdziłeś zmian, to dobrze. Przekręć obrazek, tak by prezentował się jak najbardziej korzystnie. Zrobisz to, łapiąc za jeden z rogów.

 2

Gdy będziesz pewny, że tło wygląda należycie, zatwierdź zmiany, klikając w „ptaszka” na górze menu. Bez tego nie będziesz mógł wiele zdziałać z innymi opcjami. Następnie kliknij w warstwę z tłem prawym klawiszem myszy. Wybierz tam rasteryzację warstwy.

3

Tworzymy nową warstwę – ctr+shift+n, następnie rysujemy na niej dowolnym kolorem prostokąt z zaokrąglonymi rogami – radius to 35, co da dosyć mocno zaokrąglone krawędzie. Bez zastanowienia przekręć go o dowolnie wybrany kąt i dosuń do lewego rogu. Umieścimy na nim tytuł bloga. Na takim tle, napisy będą lepiej widoczne.

4

Napisy

Wybieramy ciekawą czcionkę – ja użyłem Code Bold – którą można ściągnąć za darmo. Kolor ustawiłem na biel, wielkość liter na 33 pt. Litery są blisko siebie, dzięki ujemnej wartości trackingu. Co piszemy w nagłówku? Przede wszystkim nazwę bloga, dużymi, rzucającymi się w oczy literami. Mniejszymi literami można napisać, o czym jest nasz blog, w dalszej części rozwiążę to w inny, autorski sposób.

5 (2)

Czcionka wymagała powiększenia. Dobry napis to napis wyrównany. Kliknij na warstwę, wybierz ctrl+t i przenieś napis w lewy, dolny róg.

6

Teraz z wciśniętym shiftem kliknij dwa razy na strzałkę w prawo i dwa razy na strzałkę w górę. Przeniesiesz napis o 20 pikseli w tych kierunkach. Do napisu warto dodać efekty tekstowe – ich wykorzystanie pokazuję na zdjęciach.

7

Chmura tagów

Aby podpowiedzieć internaucie, o czym mówi twój blog, warto użyć chmury tagów. Pokażę alternatywną metodę na jej zbudowanie.

Tworzymy nową warstwę. Na niej rysujemy za pomocą elipsy kilka – kilkanaście kółek. Jeśli będziesz trzymać shift podczas ich rysowania, będą idealnie okrągłe. Spójrz, czy używasz odpowiednich ustawień.

8

9

Niewielu użytkowników Photoshopa wie, że można pisać po ścieżkach. Tekst układa się wtedy w jej kształt. Wybieramy mniejszą, prostą czcionkę. W moim przypadku jest to arial bold 20 px, zagęszczony do wartości -40 (tracking w oknie charakter). Gdy wybierzesz czcionkę, przejdź na warstwę z kółkami, które narysowałeś wcześniej. Kliknij w krawędź jednego z nich – kursor zamieni się w falisty znak pisania.

1a

Dzięki temu możesz stworzyć napisy, które swoim wyglądem przypominają właśnie bokeh, bąble lub bańki mydlane. Po kolei napisz coś na każdym z kółek. Zauważ, że jeśli dwa z nich łączyły się, napis przeskoczył w odpowiednie miejsce. W Photoshopie każdy napis tworzy się na osobnej warstwie. Możesz je potem dowolnie przesuwać, powiększać oraz zmieniać kształt (niektóre z tych opcji są dostępne po rasteryzacji tekstu, co zaraz uczynimy).

1b

Jeśli straciłeś z oczu wszystkie kółka i widzisz jedynie napisy, kliknij w warstwę na której je rysowałeś. Następnie zrasteryzuj wszystkie warstwy tekstowe, które się stworzyły. Zaznacz pierwszą z nich i trzymają shift kliknij w ostatnią – zaznaczysz wszystkie z nich. Następnie skrótem ctrl+g zgrupuj je w jeden pojemnik. Na koniec dodaj do tekstu efekt outer glow. Wszystkie ustawienia tak jak poniżej.

1c

Po ukończeniu prac zapisz obraz jako plik jpg w średniej kompresji – po to, by ładował się bez opóźnień z twojego bloga. Mam nadzieje, że tutorial pomoże wielu osobom w opanowaniu podstawowych funkcji Photoshopa. Efekt nagłówka w największej mierze zależy od jakości zdjęcia. O wiele lepiej opłaca się kupić za dolara zdjęcie na stocku ze zdjęciami, niż straszyć czytelników brzydką, darmową fotografią. Jak pokazaliśmy, również zdjęcia darmowe, mogą być bardzo ciekawe. Przy odrobinie wysiłku, można stworzyć tło za pomocą pędzli Photoshopa, albo użyć tekstury rozmazanej za pomocą Gaussian Blur.


Podobne wpisy

O autorze: Kamil Naja

Przygodę z obrazem zaczął od fotografii. Photoshopa poznaje od 2006 roku i program ten wciąż zaskakuje go możliwościami. Zajmuje się także copywritingiem oraz tworzeniem stron internetowych. Prowadzi własną firmę.

2 komentarze + Dodaj komentarz

  • Nagłówek ma być prosty i oryginalny. W przypadku blogów/stron niekomercyjnych naprawdę można fajnie się pobawić, równocześnie tworząc. Ja wracam do Photoshopa po x latach i mi sie przyda 🙂

    BTW: Trafiłem przypadkowo i poradniki wyglądają spoko, mam nadzieję, że będzie czas trochę poczytać i nadgonić 🙂

  • Warto poświęcić chwilę czasu w Photoshopie, aby zrobić ciekawy – i przede wszystkim unikalny – nagłówek. Powtarzające się templatki i headery (niektóre praktycznie na co drugim blogu) to wg mnie zmora dzisiejszej blogosfery.

Zostaw komentarz

Musisz być zalogowany aby dodać komentarz.

Polecane

Kategorie