Poradnik Młodego Grafika - "Twój pierwszy Banner"

Witam na pierwszej części swojej serii poradników graficznych...
   Jako, że wykonywanie grafiki jest uważane za jeden z tych skuteczniejszych sposobów zarabiania na Howrse, a także skutecznym zabijaczem czasu, postanowiłam stworzyć dla was tę właśnie serię. Oczywiście na początku zaczynamy od podstaw i najprostszych rzeczy, bo w końcu "Nie od razu Rzym zbudowano", prawda?

   W pierwszej części poradników graficznych, jak domyślić się można z tytułu posta, zaprezentuję Wam sposób wykonania bannera - najprostszego w świecie, choć, jak dla mnie, idealny na początek.
Wpierw jednak radzę pobrać program GIMP ponieważ bez niego się nie obejdziemy.
Więc... zaczynajmy!

Część Graficzna

1. Nim zaczniemy cokolwiek robić, powinniśmy odnaleźć w internecie obrazek pasujący do strony, którą promujemy - w moim przypadku będzie to koń, jako, że tworzę banner promujący Howrse.pl(Wiem, oryginalne). - a następnie zapisać go na swoim komputerze(kopiujemy link, przechodzimy na bezpośredni adres i po prostu przenosimy kursorem na pulpit. Najprostszy sposób)
   Jeśli szukanie obrazków sprawia wam problem, polecam serwis Deviantart. Jest to skupisko świetnych artystów, którzy tworzą wszelakiego rodzaju prace... od zdjęć przez grafikę wektorową, aż po tradycyjne rysunki  szkice. Jest tylko jedno ale - hasła wyszukiwania muszą być wpisywane w języku angielskim. 
  Mój obrazek prezentuje się tak:

Piękna photomanipulacja, nieprawdaż?

2. Gdy nasz obrazek jest już przeniesiony w odpowiednie miejsce, należałoby rozpocząć pracę nad nic - a robimy to klikając Prawym Przyciskiem Myszy na obrazek i wybierając w otworzonej w ten sposób liście Edytuj za pomocą > GIMP i czekamy, aż program uruchomi się wraz z "wgranym" do niego plikiem.

Kliknij, aby powiększyć screen'a^

3. Wygląda na to, że tło jakby już mamy... ale jakoś mi się zdaje, że rozmiary jakoś nie te, do jakich jesteśmy przyzwyczajeni, prawda? Najpierw polecam zmienić skalę wyświetlania obrazka na 100%(jeśli GIMP z automatu go zmniejszył tak, jak u mnie)

Moim zdaniem łatwiej jest wtedy określić, czy wymiary banneru odpowiadają.

   A skoro widzimy obrazek już takim, jakim jest w rzeczywistości, musimy wyciąć z tego to, co chcemy - a więc do roboty. W przyborniku wyszukajcie opcji zaznaczenie prostokątne, czyli małego prostokąta z kreskowaną ramką. Powinien być pierwszy na liście(lewy górny róg). Klikacie na niego, i gotowe - jest wybrany. Następnie na obrazku zaznaczamy nim pole, które chcemy, aby znalazło się na naszym bannerze. U mnie jest to głowa konia i skrawek lasu za nim.

5. Teraz wystarczy wyciąć. Jak? Trzeba wejść w Obraz > Kadruj według zaznaczenia. Nasz obrazek w końcu będzie takich rozmiarów, jakich oczekujemy aby był.

 6. Tło jest już właściwie gotowe, ale wciąż mi w nim czegoś brakuje - ramki. Bowiem banner zawsze wygląda estetyczniej, gdy ma ramkę okalającą jego całego. Aby ją dodać, musimy wejść w Filtry > Dekoracja > Dodaj krawędź. Wyświetli nam się okno edycji ramki, gdzie:
Szerokość krawędzi X to szerokość krawędzi po bokach obrazka, Szerokość krawędzi Y wyznacza grubość krawędzi dolnej i górnej, a Przyrost wartości koloru to jakby rozmycie go po krawędzi - czy chcemy, aby kolor przechodził z jaśniejszego na ciemny i na odwrót. Polecam zostawić tę wartość na 0 lub 1.

Gdy wszystkie parametry są już takie, jakie sobie wymarzyliśmy - pozostaje wcisnąć OK. Zauważcie, że w zakładce "warstwy" pojawiła się nowa warstwa nazwana "Warstwa krawędzi".(na screenie nie jest ona widoczna ponieważ został zrobiony przed zapisaniem ustawień krawędzi).

7. Teraz pora na napis. Aby go wstawić, należy w przyborniku wybrać wielką literę A. Powinna się ona znajdować jako pierwsza od lewej strony w piątej kolumnie od góry, domyślnie przybornik w GIMPie ma bowiem pięć opcji w rzędzie - ja mam ustawione na sześć.
   Gdy mamy ją zaznaczoną, klikamy w dowolnym miejscu na terenie obrazka i zaczynamy pisać to, co chcemy, aby znalazło się na naszym bannerze. Jeśli chcemy, aby nasze litery były w innych kolorach, rozmiarze bądź miały inną czcionkę - po rozpoczęciu pisania nad okienkiem z tekstem automatycznie pojawia się menu edycji tekstu. Aby zedytować poszczególne litery/słowa/zdania, wystarczy je zaznaczyć i z opcji wybrać to, co nam odpowiada.

Ja mam beżowy napis Blackadder ITC w rozmiarze 55 ;)

8. Czyż nie sądzicie, że niektóre z tych literek są trochę słabo widoczne? Przydałby się cień... a robi się go bardzo szybko i prosto. Wchodzimy w Filtry > Śwaitło i cień > Rzucanie cienia. Otworzy nam się okno opcji cienia, gdzie: Przesunięcie X oznacza przesunięcie cienia w prawo, Przesunięcie Y w dół, a Rozmycie cienia wyznacza to, jak bardzo cień będzie "wychodzić" poza element, od którego powstał(w naszym przypadku - napis). Polecam zostawić X i Y na pozycji 0, a manewrować jedynie Rozmyciem. Krycie wyznacza poziom przezroczystości cienia(100 = całkowite, 0 = niewidoczny).

Pozostaje wcisnąć OK.

9. Ostatnim etapem tworzenia grafiki bannera jest zapisanie go w komputerze. W tym celu wchodzimy w Plik > Wyeksportuj jako... a gdy wyświetli się nam okno opcji zapisywania, w okienko z nzawą pliku wpisujemy to, co chcemy.. byleby nie usuwać formatu obrazka - .png lub .jpg(u mnie jest to .png).

Jeśli idzie o miejsce zapisu obrazka - polecam wybrać pulpit. Będzie go później najłatwiej znaleźć. ;)
   Teraz klikamy wyeksportuj i gotowe.

Gotowy banner^

Część HTML

Ale, ale! Każdy banner jest tworzony po to, aby reklamował i przenosił na stronę przez siebie polecaną - a aby to osiągnąć, na prezentację musimy wkleić kod HTML. Nim to zrobimy trzeba jednak zrobić jedną rzecz, a mianowicie przesłać grafikę na dowolny serwis hostingu obrazków, taki jak TinyPic.

Teraz, kiedy mamy link do obrazka, możemy napisać kod do banneru. Jest on banalnie prosty. Tekst pogrubiony można, a nawet trzeba, zedytować według instrukcji w owym tekście opisanych. Pod żadnym pozorem nie usuwajcie "!

<a href="Link strony , do której ma przenosić banner"><img src="Tutaj podaj Link do obrazka" /></a>

Mam nadzieję, że poradnik się spodoba i... co jeszcze ważniejsze, pomoże.

Wasza Ave, czyli The Lol Studios