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óz
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 znalez
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 wskaz
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 , 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 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óz
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 ,
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ć 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 znalez
ć odpowiedz
i zaktualizować ten poradnik.
Jeśli jednak znalazłeś/aś odpowiedz
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: [e-mail]
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.
Siatkę masz już zrobioną. Nie wiem jednak jak połączyć ją z bannerem.
Strona domowa autora: http://ireneusz-kolodziejczyk.pl/
Fanpage: http://www.facebook.com/irask2
Więcej darmowych poradników: http://mini-poradniki.manifo.com/