Jak stworzyć prosty banner

TWORZENIA

BANNERA

Strona domowa autora:

http://ireneusz-kolodziejczyk.pl/

Fanpage:

http://www.facebook.com/irask2

Więcej darmowych poradników:

http://mini-poradniki.manifo.com/

UWAGA!!!

Przykładowy banner stworzony za pierwszym razem i według poniższych wskazówek,

znajdziesz pod tym adresem:

http://chomikuj.pl/irask2/Pokazowe

(otwórz za pomocą

przeglądarki)

Gdy nie skończycie pracy za pierwszym razem, zapisujcie plik w formacie GIMP'a -

.xcf, dzięki czemu nie stracicie jakości oryginału. Konwersją na gifa, zajmiemy się później.

Nie załamuj się gdy stworzony przez Ciebie banner po otwarciu nie będzie chciał

działać. Ważne, że będzie działał na stronie www.

Jeśli chcesz obejrzeć stworzony przez siebie banner poza środowiskiem programu,

wystarczy kliknąć prawym przyciskiem myszy na bannerze i wybrać którąś z
zainstalowanych przez Ciebie przeglądarek internetowych. Wtedy będzie działać.

KROK 1:

Kompletacja programów.

Do stworzenia bannera wystarczy nam tylko jeden program, na którym oprzemy

wszystkie swoje operacje. Potrzebne programy, to:

- GIMP 2.8.0;

- Paint;

Gdy posiadasz powyższy program, zainstaluj i odpal go.

KROK 2:

Tworzenie banneru.

Stworzenie bannera nie jest wielkim problemem jeśli wie się co klikać i w jakiej

kolejności, a przede wszystkim, jeśli mamy na to pomysł.

W tym poradniku pokaże jak stworzyłem swój pierwszy banner (do obejrzenia pod

wskazanym na samym początku linkiem) i opiszę według takich parametrów jakie używałem
do tworzenia pliku.

Po odpaleniu programu, klikamy: "Plik" -> "Nowy" i w oknie, które nam się pojawiło,

wpisujemy parametry naszego bannera (w tym przypadku, szerokość: 468, a wysokość: 60) i
zatwierdzamy.

Pojawią się nam 3 okna (lewe do edycji -kolor, napis, itd.; środkowe - tu widzimy

efekty naszej pracy; prawe - do przełączania warstw i edycji ich).

Zabieramy się teraz do edycji pierwszej warstwy.

Możemy stworzyć kolor tła w samym programie, jednak w tym wypadku nie ma się

co spodziewać wielkiego szału. Jednak jeśli ktoś chce, to: na Przyborniku (lewe okno), tuż
pod ikonami akcji widzimy dwie płytki. Jedna ma kolor czarny, druga biały - klikamy w tą
ikonę. Wyskoczy nam okno, w którym edytujemy kolor, który potem naniesiemy w ekranie
projektu na pierwszą warstwę naszego bannera za pomocą puszki z farbą, znajdującą się na
przyborniku.

Drugim sposobem (mamy więcej odcieni i kolorów na jednej warstwie bannera) jest

kliknięcie w ikonę gradientu na przyborniku (znajduje się obok ikony puszki z farbą). Na
pasku, który pojawił się poniżej klikamy w ikonę mającą kolor gradientu (szary) i tu
wybieramy interesujące nas kolory. Następnie przesuwamy kursor na obszar roboczy i
klikamy myszką w niego (ale nie puszczamy) i przeciągamy w górę, dół, albo w któryś z
boków - zauważ, że wtedy wybrany przez nas gradient ma trochę inne położenie; możesz
poeksperymentować, albo podłożyć darmowe tło, zrobione przez kogoś innego. Dzięki temu,
nasz banner będzie zdecydowanie ładniejszy.

I WARSTWA:

Aby podłożyć tło, które znaleźliśmy w internecie, wystarczy ściągnięty interesujący

nas obrazek przeciągnąć na okno robocze, w obszar roboczy.

W zależności od wymiarów obrazka może zdarzyć się tak, że nie będzie on zajmował

całego paska symbolizującego nasz banner. Wtedy edytujemy tło Paintem. Wystarczy że
obrazek rozciągniesz w bok, po czym trochę zmniejszysz jego wysokość i zapisać obrazek po
czym znów przeciągnąć go do programu. Pamiętaj tylko aby dopasować to białe pole do
rozmiarów obrazka, aby nie mieć bannera z białym tłem.

Po dodaniu tła, pojawi się zapewne przerywana obramówka w jakiejś odległości od

bannera - jest to wskaźnik pokazujący rzeczywiste rozmiary naszego obrazka, które nie
będzie wyświetlane w gotowym już produkcie, dlatego ważne jest by dobrze zedytować
obrazek.

Teraz nanosimy interesujące nas napisy na tło.

Z przybornika wybieramy ikonę "A" i klikamy na interesującym nas obszarze w polu

roboczym. W oknie które się pojawi możemy wybrać rozmiar czcionki, czcionkę (nie ma
rozwijanego paska, więc wypada znać jakąś czcionkę, można sprawdzić w wordzie, po czym
wpisać początek jej nazwy w okienku i pojawią się propozycje z których wybieramy
interesującą nas pozycje), kolor, pogrubienie, kursywę i wszystko to co można zrobić z
tekstem w podstawowym zakresie, w Wordzie.

Gdy mamy już napis, szukamy w internecie potrzebnego nam zdjęcia (jeśli wymaga

tego banner <w tym wypadku wymaga>, jeśli nie, pomijamy ten akapit) i zmniejszamy go w

Paincie tak, aby zmieścił się w całości w bannerze. Po zapisaniu zedytowanego obrazka
przenosimy go na obszar roboczy i z przybornika klikamy ikonę "niebieskiego krzyża"
(powiedzmy :p) i przesuwamy obrazek w interesujące nas miejsce.

Może się tak zdarzyć, że obrazka nie będzie widać, dlatego należy pamiętać o

właściwym ułożeniu tych warstw. W zakładce "Warstwy" (okno z prawej strony) układ
warstw powinien być taki, że na samym dole jest "tło", wyżej mamy nasz "napis" i na samej
górze "obrazek". Aby zachować właściwą kolejność, wystarczy kliknąć na warstwę i
przeciągnąć ją we właściwe miejsce.

Teraz gdy mamy już wszystkie warstwy gotowe (które złożą się w ostateczności na

jedną warstwę) musimy zdecydować czy te elementy mają być widoczne od razu jako jeden
obrazek, czy mają pojawiać się na zasadzie: najpierw tło, potem napis i na końcu obrazek.

Jeżeli wybierzemy pierwszą wersję, wystarczy, że połączymy ze sobą warstwy w

zakładce "Warstwy". Wystarczy kliknąć prawym przyciskiem myszy na warstwie i w pasku,
który się rozwinął, kliknąć na opcję "Połącz w dół" (7 opcja od góry). Pozostaje nam jeszcze
ustalić długość wyświetlania się tej warstwy. Klikamy więc prawym przyciskiem myszy na
warstwie i wybieramy opcję "Modyfikuj atrybuty warstwy". Pojawi się okno w którym
wpisujemy zaraz za tytułem (po spacji) jak długo ma się wyświetlać ta warstwa, według
takiego schematu: (1000ms)

1000ms - to 1 sekunda, więc nie powinno być dla Ciebie problemem ustawienie czy

warstwa ma się wyświetlać sekunde, dwie czy pół.

I to wszystko. Pierwszą warstwę mamy gotową.

Jeśli jednak preferujesz drugą opcję (tak, jak w tym wypadku), duplikujemy tło, po

przez kliknięcie na nie w zakładce "Warstwy" prawym przyciskiem myszy i wybraniu opcji
"Duplikuj warstwę" (5 opcja od góry).

Teraz łączymy napis z tłem po przez kliknięcie na warstwę z napisem prawym

przyciskiem myszy i wybraniu opcji "Połącz w dół".

Pozostało nam już tylko określenie długości trwania animacji danej warstwy.

Wystarczy postąpić analogicznie z każdą warstwą jak w opisanym powyżej przypadku.

Teraz, kiedy mamy już pierwszą warstwę gotową, możemy ją podejrzeć z okna

programu, klikając na pasku zadań, w obszarze roboczym opcje: "Filtry" -> "Animacja" ->
"Odtwarzanie" -> "Odtwarzaj".

Teraz masz wgląd w to, jak będzie wyglądać Twój banner/animacja.

II WARSTWA:

Tworząc kolejne warstwy banneru według pierwszej metody, gdzie napis, obrazek i tło

pojawiają się od razu jako jedna całość, nie będę się rozwodził jak to robić, gdyż czytając to
co napisałem do drugiego sposobu, da Ci klarowną wizję jak postępować dalej.

My zajmiemy się tworzeniem kolejnych warstw do drugiego sposobu.

Duplikujemy teraz tło (już chyba nie muszę pisać jak?) i na zakładce "Warstwy"

klikamy w ikonki "oczy", aby jedyną widoczną warstwą, było zduplikowane tło, które jak na
razie jest puste.

Po raz kolejny powtarzamy czynności jakie wykonywaliśmy podczas tworzenia

pierwszej warstwy (nanosimy napis, obrazek i ustalamy czas wyświetlania warstwy <w
naszym przypadku, każda warstwa wyświetla się tyle samo czasu>). Tekst wstawiamy po
środku bannera, gdyż z prawej i lewej strony będą obrazki i łączymy go z tłem.

Wstawiamy teraz obrazki po brzegach banneru i przenosimy w zakładce "Warstwy",

wszystkie nowe warstwy na górę kolumny. Najpierw przenosimy tło z napisem, potem
obrazki.

Ustawiamy teraz czas wyświetlania warstwy. Przy tle nie musimy nic zmieniać, gdyż

skopiowały się także jego ustawienia (chyba, że chcemy by trwał przez inną ilość czasu niż
oryginał, wtedy edytujemy czas). Zabieramy się za obrazki (jeśli chcesz, by oba wyświetlały
się równocześnie, wystarczy połączyć je ze sobą i wpisać czas trwania). Najpierw edytujemy
drugi od góry, wpisując tym razem (400ms), aby trwał krócej (potrzebne dla efektu przejścia).
Na samym końcu edytujemy pierwszy obrazek, wpisując (1000ms).

Drugą warstwę mamy zrobioną.

III, IV i KOLEJNA WARSTWA:

W tej warstwie nie ma wiele do omawiania, gdyż w niej zdecydowałem się na jedną

rzec, której nie zrobiłem w poprzedniej warstwie. Mianowicie, zdecydowałem się na dodanie
na jednej warstwie napisu, który podzieliłem na dwa człony: "Warszawa 2048" i "-cyberpunk,
nowej generacji". Najpierw pojawia się jeden pierwszy człon napisu a po chwili drugi i
włącza się kolejna warstwa.

Jak to zrobiłem?

Duplikujemy nasze tło (dwa razy) i przenosimy je na samą górę warstw, po czym na

pierwszą nanosimy napis "Warszawa 2048" i łączymy z poniższą warstwą (tłem).

To samo robimy z drugim członem napisu "- cyberpunk, nowej generacji".

Podam jeszcze jeden sposób osiągnięcie powyższego efektu, gdyż kiedy ponownie

próbowałem zastosować ten zabieg kilka warstw później, coś nie współgrało ze sobą. Dlatego
też zduplikowałem tylko raz tło i przeniosłem je na samą górę, po czym połączyłem z tłem
pierwszy człon napisu, gdy drugi został bez tła. I teraz wszystko było OK.

Kolejne warstwy robimy analogicznie do tego co napisałem powyżej. Tak więc, kiedy

nasz banner będzie ukończony, pozostaje nam przejść do kolejnych kroków.

KROK 3:

Optymalizacja.

Optymalizacja, to banalnie prosty krok, lecz niezwykle istotny. Dzięki temu zabiegowi

nasz banner skurczy się o połowę, nie tracąc przy tym jakość widzialnej gołym okiem.

Jeśli myślimy o wstawieniu bannera na własną stronę, warto przejść przez ten zabieg

(trwa to dosłownie chwilę).

Gdy nasz plik jest ukończony i czeka na eksport do formatu .gif, musimy postępować

według tych wskazówek: "Filtry" - "Animacja" -> "Optymalizuj (dla formatu .gif) ->
czekamy dosłownie chwilę i już możemy zapisać naszego gifa.

KROK 4:

Eksportowanie do formatu .gif.

W tym momencie, pozostało nam już tylko zapisanie naszego projektu, jako gotowy

już banner.

W tym celu klikamy w opcje: "Plik" -> "Wyeksportuj" -> W polu na nazwę naszego

pliku wpisujemy co nam się tylko podoba, z tym wyjątkiem, że musi kończyć się takim
dopiskiem: .gif i klikamy przycisk "Wyeksportuj" -> pojawi nam się zapewne taki napis "

Zapisywany obraz w formacie GIF zawiera warstwy, które wykraczają poza granice obrazu."
- nie przejmuj się tym, tylko kliknij "Kadruj" (komunikat ten, jest wynikiem naszego
nieodpowiedniego dopasowania obrazków do wymiarów banneru - po co miałem to robić,
skoro program zrobi to za mnie? :)) -> w tym oknie zaznaczamy opcje: "Jako animacja" ->
"Wyeksportuj".

Otwieramy teraz folder zawierający nasz banner i otwieramy go poprzez naszą

przeglądarkę www. Efekty widać od razu.

KROK 5:

Tworzenie hiperłącza.

Wyjaśnijmy sobie od razu, że podany przeze mnie sposób nie wymaga posiadania

programu Gimp, a tylko samego bannera

(AD.1).

<- kliknij, aby przejść do odnośnika

Tak więc możesz zrobić banner u kolegi, a u siebie wstawić go na stronę www i

podlinkować. Z Twojej strony wymagane jest abyś znał podstawy html, albo... przeczytał ten
poradnik :)

Jeśli jednak banner powstał w celach umieszczenia go na jakimś serwisie patronackim

(tak jak w tym wypadku), całym tym procesem powinna zając się dana strona, tym samym
załatwiając sprawę za Ciebie.

Warto jednak wiedzieć jak to wygląda, by w razie czego (gdy np. serwis każe Ci

podlinkować banner) w ripoście przesłać serwisowi wytyczne jak ma to zrobić sam :)

W końcu, ktoś kto prowadzi stronę www, powinien mieć jakieś podstawy html

opanowane. A podlinkowanie bannera, niewątpliwie do owych podstaw należy.

Ale do rzeczy...

Przede wszystkim, zapamiętaj ten kod (zapisz go sobie gdzieś, albo coś):

Dzięki niemu będziesz w stanie zrobić cokolwiek ze swoim bannerem. Wystarczy, że

skopiujesz ten kod na swoją stronę (jeśli korzystasz z programów do tworzenia stron typu
WYSIWYG (tworzenie stron z gotowych elementów <np. Web Builder czy Serif Web Plus>,
wystarczy wkleić ten kod w sekcji HTML) i podmienisz następujące frazy:

adres - tu wstaw adres strony, gdzie ma przenosić banner.

ścieżka dostępu do obrazka - podaj adres, gdzie znajduje się banner.

tekst alternatywny - kiedy z różnych powodów, Twój banner się nie wyświetli, coś

musi zostać wyświetlone w zamian. Dlatego wpisz coś tu. Może być i

adres Twej strony.

Teoretycznie można podlinkować banner, który będzie u Ciebie na dysku. Służą do

tego odpowiednie frazy wpisywane zamiast "ścieżka dostępu do obrazka", jednak w praktyce
(w moim przypadku) nie chciały one działać.

Dlatego też, wstaw swój banner na jakąś stronę www (najlepiej na tą:

http://imageshack.us/ - musisz się zarejestrować <jest to darmowa opcja> i dodać swój banner
na serwer strony, po czym otworzyć go pełnej okazałości i skopiować jego adres w "ścieżkę
dostępu do obrazka", po czym zapisujemy wszystko i już banner śmiga jak się należy :)

KROK 6:

Koniec.

Jeśli w tym poradniku brakuje jakiejś szczegółowej informacji, na jakiś temat odezwij

się do mnie, a spróbuje znaleźć odpowiedź i zaktualizować ten poradnik.

Jeśli jednak znalazłeś/aś odpowiedź na nurtujące Cię pytanie, także się odezwij i

prześlij w mejlu swój sposób na problem, który spędzał Ci sen z powiek.

Zaktualizuje poradnik i wstawię jego poprawioną wersję na chomikuj.pl -> wszakże ja

też jestem amatorem, który ma prawo popełniać błędy :)

Mój mejl: irask2@wp.pl

ADNOTACJE:

Ad.1

<-kliknij by wrócić

Sam program Gimp umożliwia stworzenie siatki na gifie, który teoretycznie powinien

służyć jako hiperłącze, jednak w praktyce nie potrafię wcielić tego w życie.

O ile jeszcze umiem stworzyć siatkę przenoszącą (przykładowo) na naszą stronę

www, o tyle nie umiem połączyć ją z bannerem.

Podam teraz ten sposób. Być może uda się Tobie połączyć te dwa fakty.

Klikamy "Filtry" -> "Strony WWW" -> "Mapa obrazu..." -> powiększamy okno na

całą stronę -> klikamy na lewym pasku w niebieską ikonkę zwącą się "Określ obszar
prostokątny" -> Klikamy w rogu naszego bannera i przeciągamy siatkę do przeciwległego
rogu (wiadomo, cały obszar musi być zaznaczony) -> Znów klikamy i pojawia nam się okno -
> wklejamy adres naszej strony w polu "Adres URL" i zapisujemy zmiany -> zapisujemy
teraz plik na dysku i tyle.