Dziś postanowiłem się z Wami podzielić jak zrobiłem prosty banner na blog katalog Betterware.

Do wykonania bannera potrzebny nam będzie darmowy program do obróbki grafiki Gimp. Jeżeli masz starszy komputer warto skorzystać z wcześniejszych wersji programu. Nie są one dużo słabsze. Natomiast mają tą zaletę, że program uruchomisz szybciej. Dodatkowo zajmie Ci mniej miejsca na dysku. Wcześniejsze wersje programu Gimp pobierzesz ze strony PCWorld. Polecam Ci wersję 2,6 z archiwum PCWorld.

Rozmiar miejsca w którym pojawi się banner zmierzyłem świetną wtyczką do przeglądarki Firefox – Measure on it.

Przejdźmy więc do dzieła !

Z menu Gimp wybieramy Plik/Nowy i ustalamy potrzebny wymiar.

Banner krok 2

Następnie otwieramy plik który będzie kolejną warstwą w Gimpie.

Wybierz z menu Plik/Otwórz jako warstwy

 

Banner krok 5

 

Przesuwamy obraz aby w bannerze było wybrać najbardziej efektowną część obrazu.

 

Banner krok 7

 

Następnie łączymy warstwy wybierając z menu Obraz/Spłaszcz obraz.

Pozostaje dodać nam tekst zachęcający do kliknięcia w banner. Z menu wybierz Narzędzia/Tekst. Następnie zaznacz obszar w którym ma pojawić się tekst.

 

Banner krok 8

 

Zapisujemy obraz wybierając z menu Plik/Zapisz jako. Wybieramy nazwę najlepiej bez polskich liter i zapisujemy z rozszerzeniem JPG, który zapewnia dobrą jakość przy małym rozmiarze pliku.

Teraz pozostało nam tylko dodanie obrazu do biblioteki mediów WordPress. Postanowiłem dodać banner bezpośrednio w nagłówku witryny bezpośrednio nad menu. Dlatego w pliku header, który jest odpowiedzialny za wyświetlanie tej części witryny dodaję krótki kod html.

Banner krok 9

W kokpicie bloga wybieram Wygląd/Edytor i wstawiam kod HTML, który wyświetli banner. <a href=”adres strony po kliknięciu w banner„><img src=”ścieżka do obrazka” alt=”tekst alternatywny” />

Efekt mojej pracy wygląda tak:

Banner Katalog Betterware

 

Na stronie katalog Betterware korzystam z szablonu Elegant Themes.

 

Elegant themes