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.
Następnie otwieramy plik który będzie kolejną warstwą w Gimpie.
Wybierz z menu Plik/Otwórz jako warstwy
Przesuwamy obraz aby w bannerze było wybrać najbardziej efektowną część obrazu.
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.
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.
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:
Na stronie katalog Betterware korzystam z szablonu Elegant Themes.
Bardzo dobry i wartościowy wpis. Przypomniałeś mi, że w Gimpie można robić prosto i łatwo banery. Używam Gimpa do obróbki zdjęć, a o banerach zupełnie zapomniałam. Dziękuję. Dobra robota.
Co prawda mój banner jest bez wodotrysków – jest nieruchomym obrazkiem. Ale poprzedni, który wykonałem w technologii Flash nie zawsze wyświetlał się dla mnie. A często wśród znajomych, którzy testowali stronę też nie był widoczny. Ponoć flash tak ma.
Dziękuję za odwiedziny i komentarz – pozdrawiam
korzystam z gimpa, nawet kilka banerów nim zrobiłem, z flasha trzeba zrezygnować bo nie wszędzie się otwiera i dla wyszukiwarek zwykły gif z opisem jest lepszy
Zgadzam się z Tobą Irku. Swego czasu miałem taką fazę na wodotryski 🙂 I efektem był animowany banner, który widziałem tylko ja 🙂
również korzystam z gimpa, i rzeczywiście można nim cuda zrobić, a przede wszystkim szybko 🙂 dzięki za kolejną instrukcję 🙂
Mi w szybkości pracy przeszkadza nieco interfejs. Nie jest on tak wygodny jak w Photoshopie. Ale jest darmowy. Mimo wszystko chwała twórcom Gimpa za gigantyczną pracę jaką wykonali!
Ze względu na fakt, iż jestem stosunkowo młodym gimpiarzem, to taki poradnik jest dla mnie cenna informacja. Z przyjemnością będę wyczekiwał większej dawki wiedzy jaka mogę od Ciebie dostać. Dziękuje i pozdrawiam.
Cieszę się że poradnik okazał się dla Ciebie cenny. Wybacz moje sporadyczne wpisy. Już pani w zerówce zauważyła, że jestem niesystematyczny 🙁
No właśnie, ja ostatnio rzeźbię strony na webwave i dzięki gimpowi parę fajnych projektów wpadło. Nie to że jestem jakimś mistrzem;) Ale IMO dzięki takim wpisom będzie lepiej z każdym kolejnym projektem.
Dzięki Kafal. Ja też nie jestem mistrzem Gimp-a. Sporo trudu kosztowało mnie wykonanie tego prostego bannerka. Może pochwalisz się swoimi projektami?
Ja grafiki również projektuję w GIMP-ie. Jest to tak na prawdę jedyny darmowy program, który posiada dużo rozbudowanych opcji. Umiem się już po nim skutecznie poruszać i znam opcję, które mi całkowicie wystarczają w tworzeniu właśnie bannerów czy nawet logotypów.
Marek Twoja witryna naprawdę robi wrażenie. Skoro te wszystkie rzeczy na stronie zrobiłeś w Gimpie to jestem pod wrażeniem. Ja wciąż się uczę z doskoku. I wciąż mam nadzieję że Gimp będzie miał bardziej ergonomiczne menu. Podobne do Photoshopa….
Wygląda bardzo dobrze, a pracy nie ma przy tym zbyt dużo. Gratuluje umiejętności!
Dokładnie tak jest. Wszystko jest proste ale po czasie. Za pierwszym razem wykonanie takiego prostego bannera zajęło mi prawie dwie godziny. Potem już było tylko lepiej 🙂
GIMP jest prosty, a przede wszystkim darmowy, co jest jego dużą zaletą:) Nie podoba mi się to, że nie mogę wyrazic swojego zdania jednym krótkim zdaniem, nie kązdy jest spamerem, a to co się dzieje na niektórych stronach jest żałosne, trzeba pisać wielkie elaboraty, żeby łaskawy Pan właściciel bloga zgodził się to opublikować, obstawiam, że TEN komentarz nie będzie opublikowany.
Właśnie dokształcam się na studiach podyplomowych. Niestety na politechnice zamiast Gimpa króluje Adobe Photoshop. Może to dlatego, że wykładają web developerzy z renomowanej agencji.
Krzychu trzy zdania to nie elaborat. Dziękuję za komentarz. Widzisz jak chcesz to potrafisz napisać porządny komentarz:)Pozdrawiam z uśmiechem.
prawdę powiedziawszy średni wyszedł, ja użyłbym przezroczystego tła i z całą pewnością innego kroju czcionki. Gimp to fajne narzędzie, ale tu w tym poradniku jakoś mało widać jego funkcjonalność
Masz rację. Wcale nie uznaję się za eksperta. Miałem swego czasu chęć zrobić w prosty sposób banner. I zrobiłem go najmniejszym nakładem pracy! Jesteś dobrym obserwatorem. Pozdrawiam
to może teraz pora dać ludziom jakiś poradnik, dzięki któremu zrobią coś lepszego? 🙂 skoro jest popyt to chyba warto? btw muszę zgodzić się z krzysztofem, konieczność napisania więcej niż jedna linijka jest nieco frustrujące
Pomysł na poradnik zupełnie możliwy. Zwłaszcza, że zacząłem podyplomowe studia front-end-development. Niby nic ciekawego, ale wykładają ludzie z czołowej agencji interaktywne w naszym kraju… Obiecuję przemyśleć minimalną ilość słów. Chociaż sam przyznasz że choć frustruje to działa 😀
Zajmuję się trochę fotografią i obramiam zdjęcia na GIMP-ie, jestem zadowolona, po 1-sze darmowy program, po 2-gie łatwy w obsłudze.
A po trzecie zajmuje mało miejsca i po czwarte nie wymaga wiele od systemu. Śmiga nawet tam gdzie Photoshop nawet pobrać się nie chce – bo Windows XP w nowych wersjach jest przez Adobe nie obsługiwany 🙁
Bardzo fajny i prosty w obsłudze program do bawienia się grafiką i modyfikacją zdjęć.
Chce się zająć obróbką zdjęć, grafiką komputerową i zaczynam od GIMPa ale jak na razie wszystko jest dla mnie magią 😉 ale to początki, mam nadzieję że z czasem ogarnę.
Gimp wcale nie jest taki prosty, jak mogłoby się wydawać. Większości grafików służy tylko do tego, żeby się przyuczyć, zanim przesiądą się na bardziej profesjonalny program.
Wartościowy poradnik i wpis. Musze się zgodzić z moim przedmówcą- GIMP wcale nie należy do łatwych programów. Niedawno przeniosłem się na GIMP-a z Paint.net i pomimo, że oba programy są dość do siebie podobne, to po GIMP-ie poruszam się jak słoń po składzie porcelany. Muszę się przyznać, że gdyby nie poradniki i filmiki na YT, to nie potrafiłbym należycie wykorzystać funkcji GIMP-a
Dzięki za ten wpis, chciałem ogarnąć na szybko coś podobnego, a jakoś mi nie szło. pomogłeś 🙂
bardzo pomocny artykuł, dziękuje Panie Tomku za napisanie go. Pozdrawiam 😀