signs.pl - Portal polskiej reklamy wizualnej




GIMP w praktyce (kliknięcie przeniesie cię o poziom wyżej)
Cięcie i mapowanie obrazka na potrzeby www

 

Strona o GIMPie nie jest poradnikiem HTMLa, ale jednak GIMP jako narzędzie do grafiki jest wykorzystywany przez wielu grafików i webmasterów na potrzeby sieciowe. Zresztą nadaje się do tego wyśmienicie.

Jednymi z najistotniejszych elementów każdej strony są hiperłącza do innych stron czy też serwisów. W tym tutorialu interesuje nas jak stworzyć mapę odnośników na pojedynczej grafice.
Są dwa sposoby:
- użyć html'owego taga MAP i określić współrzędne naszych linków na grafice, a następnie przypisać im adres www,
- pokroić taką grafikę na kawałki i dopiero do nich przypisać łącza.

Najpierw zajmiemy się metodą nieingerującą w nasz obrazek.

1a. Otwieramy GIMPa i ładujemy do niego grafikę (już zoptymalizowaną i umieszczoną w naszym serwisie www), która ma być zmapowana. Na potrzeby tego tutoriala przygotowałem gimpowe menu:

2a. Z menu obrazka (przypominam, że dostęp do tego menu mamy klikając prawym klawiszem myszki na obrazku) wybieramy Filters/Web/Image Map..., powinien otworzyć się edytor ImageMap (nie będę wyjasniał wszystkich opcji, bo nie jest to potrzebne, także domyślne preferencje są tak dobrane, że nie trzeba ich zmieniać):

3a. Używając narzędzi po lewej stronie okienka edytora rysujemy obszary, które mają być aktywne:

Gdy chcemy zakończyć rysowanie danego obszaru, klikamy dwukrotnie myszką, wtedy wyskoczy okienko dialogowe, w którym możemy wpisać adres strony, do której ma prowadzić łącze, komentarz do łącza. W zakładce Rectangle możemy poprawić numerycznie wymiary aktywnego obszaru, a w zakładce JavaScript wpisać kod JavaScriptu:

Obszar aktywny może być prostokątem, elipsą a także mieć nieregularne kształty. W każdej chwili możemy przenieść i przeskalować dany obszar wybierając narzędzie strzałki:

4a. Wszystkie adresy i inne dane przypisane do aktywnego obszaru są widoczne po prawej stronie okienka edycyjnego (sekcja Selection). W każdej chwili możemy kliknąć dwukrotnie taki wpis i dokonać poprawek:

5a. Na koniec, przed zamknięciem edytora ImageMap, zapisujemy naszą mapę odnośników do pliku tekstowego, dzięki temu możemy później otworzyć obrazek, wczytać z pliku mapę odnośników i dokonać ewentualnych poprawek czy zmian. Poniżej pokazałem jak wygląda taki plik:

6a. Otwieramy edytor HTML'a i kopiujemy odpowiednie fragmenty kodu z wygenerowanego pliku. Poniżej efekt tego działania:

GIMP - strona główna Odwiedź Wilbera Gimpowanie na śniadanie Zasady zdrowego gimpowania GIMP dla każdego

 

Drugą metodą tworzenia odnośników na naszym obrazku, jest pocięcie go na fragmenty i poskładanie ich na stronie w tabelce a następnie przypisaniu im odpowiednich URLi. Cięcia obrazków możemy użyć także np. do utrudnienia kopiowania naszych obrazków ze stron www.

1b. Otwieramy nasz obrazek i za pomocą prowadnic ustalamy linie cięcia obrazka (prowadnice otrzymujemy poprzez "wyciąganie" linijki, po prostu klikamy na linijce i naciskamy lewy przycisk myszki a następnie przeciągamy kursor w pożądane miejsce).

W naszym przypadku najpierw pokroję obrazek w poziomie, mając już ustawione prowadnice wybieram z menu obrazka opcję Image/Transforms/Guillotine (obrazek/transformacja/gilotyna):

Otrzymam w efekcie tego działania cztery nowe obrazki:

2b. Obrazek górny, który ma mieć dwa odnośniki dzielę w ten sam sposób co poprzedni, tylko teraz używam pionowej prowadnicy:

3b. W edytorze HTML'a tworzę tabelkę o szerokości pierwotnego obrazka (ważne żeby następujące parametry tabeli miały wartość "0": BORDER, CELLSPACING, CELLPADDING):

GIMP - strona główna Odwiedź Wilbera
Gimpowanie na śniadanie
Zasady zdrowego gimpowania
GIMP dla każdego

Niektórzy twierdzą, że cięcie obrazka przyspiesza załadowanie go na komputer oglądającego, ale ja nie zauważyłem jakiejś znaczącej różnicy w czasach ściągania obu rodzajów obrazków.
Wybór, której metody użyć pozostawiam Wam.

 


Zapraszam do kociego serwisu!


Podstawy GIMPowania | Index pojęć

Strona główna


Copyright © 2001 by Maciej Jezierski.
All rights reserved.
Wszystkie prawa zastrzeżone.

Portal signs.pl  Zasady korzystania  Ochrona prywatności  Reklama  Pomoc  Zarejestruj się!

Ważna informacja od redakcji signs.pl:
Drodzy miłośnicy Gimpa i serwisu Macieja Jezierskiego. W związku z tym, że autor zaprzestał rozwijania gimpowego serwisu informujemy, że niektóre informacje w nim zawarte (zwłaszcza odnośniki do serwisów zewnętrznych, adresy e-mail) mogą być nieaktualne.
Ze względu na popularność serwisu, który doczekał się wielu legalnych i nielegalnych kopii, zdecydowaliśmy pozostawić go na serwerze w oryginalnej formie, pochodzącej z 2005 r. Prosimy nie korzystać z adresów e-mail umieszczonych na stronach serwisu. Ani autor ani my nie odpowiadamy na przesyłane w ten sposób listy. Wstrzymane jest także przyjmowanie prac i komentarzy do gimpowej galerii.