Polskie Forum Użytkowników GIMP-a

---

Tutorial przedstawia sposób wykonania prostego lecz ciekawie prezentującego się menu na stronę WWW.
Tutorial napisany w wersji GIMPa 2.4. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.

---

[lp] Zaczynamy

[lp] 1. Tworzymy nowy Dokument o wielkości np. 648 x 115px.

[lp] 2. Tworzymy nową warstwę o nazwie ramka. 

[lp] 3. Tworzymy zaznaczenie prostokątne <zaznaczenie-prostokatne> (R). Mniej więcej tak:




[lp] 4. Klikamy Zaznaczenie > Zaokąglenie Promień ustawiamy na 30%. Klikamy OK.


[lp] 5. Zaznaczenie wypełniamy na biało <wypelnienie> (Shift + B).

[lp] 6. Tworzymy nową warstwę. Nazywamy ją srodek.

[lp] 7. Klikamy Zaznaczenie > Zmniejsz. Ustawiamy 3px. Klikamy OK.

[lp] 8. Zmieniamy kolor pierwszoplanowy na #F0B259 a kolor tła na #F87811.


[lp] 9. Wybieramy narzędzie Gradient <gradient> (L). Przeciągamy od góry do dołu zaznaczenia. Klikamy Zaznaczenie > Nic. Powinno wyglądać tak:


[lp] 10. W okienku Warstwy zaznaczamy warstwę o nazwie ramka. W oknie z naszą pracą klikamy Filtry > Światło i cień > Rzucanie cienia. Ustawiamy parametry następująco:


Klikamy OK.


[lp] 11. Narzędziem Tekst <tekst> (T) z następującymi parametrami: Czcionka > Verdana, Rozmiar > 25 px, Kolor > biały  tworzymy napis Home.


[lp] 12. Tworzymy nową warstwę.

[lp] 13. Zaznaczamy narzędziem Zaznaczenie prostokątne <zaznaczenie-prostokatne> (R) linię szerokości 2 pixeli. Mniej więcej tak:


[lp] 14. Zmieniamy kolor pierwszoplanowy na biały i wypełniamy zaznaszenie Kubełkiem <wypelnienie> (Shift+B). Krycie warstwy z linią zmniejszamy na 17%.


[lp] 15. Tworzymy kolejne opcje menu.

[lp] 16. Duplikujemy warstwę z liniami oddzielającymi tyle razy ile potrzebujemy - w okienku warstw zaznaczamy warstwę do duplikacji i klikamy przycisk <duplikowanie-warstwy> na dole okienka. Przesuwamy <przesuwanie> zduplikowaną linię w to miejsce, gdzie ma się znajdować na obrazku. Czynności 15 i 16 należy powtórzyć, aby uzyskać podobny efekt końcowy:


[lp] Koniec

---

Jeśli coś jest dla Was niezrozumiałe to piszcie, natychmiast wytłumaczę.

---

---

[lp] 1. Otwieramy efekt naszej dotychczasowej pracy za pomocą GIMPa.

[lp] 2. Ustawiamy prowadnice tam gdzie menu ma być podzielone. Wykonujemy to w ten sposób:



[lp] 3. Na linie dzielące opcje menu, prowadnice wysuwamy w ten sposób:



[lp] 4. Dzielimy menu aby wyglądało mniejwięcej tak:



[lp] 5. Zaznaczamy zaznaczeniem prostokątnym (R) pierwszą część. Prawa krawędź zaznaczenia musi się pokrywać z pierwszą prowadnicą.



[lp] 6. Klikamy Obraz > Kadruj według zaznaczenia i zapisujemy wykadrowaną część pod nazwą bok1.png. Przywracamy poprzedni stan (Ctrl+Z).

[lp] 7. Zaznaczamy pierwszą opcję menu, w podobny sposób jak poprzednią. Lewy i prawy bok zaznaczenia muszą się pokrywać z prowadnicami. Znów klikamy Obraz > Kadruj według zaznaczenia i zapisujemy pod nazwą określającą treść przycisku - w tym przypadku home.png. Przywracamy poprzedni stan (Ctrl+Z).



[lp] 8. Powtarzamy czynność 7 aż wykadrujemy wszystkie części menu.

[lp] 9. Ostatnią część zapisujemy podobnie jak część w punkcie 6, pod nazwą bok2.png.



[lp] 10. Powinniśmy otrzymać takie obrazy:



[lp] 11. Zaczynamy pisanie kodu HTML.
Podstawowy znacznik służący do wstawienia obrazka wygląda tak:

Jeśli nasz obrazek znajduje się w tym samym miejscu co plik strony (domyślnie index.html), polecenie będzie wyglądało na przykład tak:
Więcej na ten temat tutaj: http://www.kurshtml.boo.pl/html/wstawienie_obrazka,zielony.html (http://www.kurshtml.boo.pl/html/wstawienie_obrazka,zielony.html)

[lp] 12. Aby obrazek był jednocześnie linkiem do innej strony należy wstawić go w ten sposób:
Border (czyli ramkę) ustawiamy na wartości 0, aby w Internet Explorerze nie wyświetliła się ramka wokół obrazka będącego linkiem.

[lp] 13. Kodowanie menu rozpoczynamy od utworzenia nowego dokumentu html jakimś programem do tego służącym lub otwierając notatnik zapisujemy plik jako np. index.html w folderze gdzie znajdują się nasze obrazki. Możemy też otworzyć inny, istniejący już plik.

[lp] 14. Najpierw wstawiamy obrazki boczne o nazwach bok1.png oraz bok2.png, które nie będą odnośnikami do innych podstron. W naszym dokumencie wpisujemy następujące polecenia:

[lp] 15. Między dwa obrazki wstawiamy kod obrazka o nazwie home.png, który będzie prowadził do strony głownej - index.html. Między kodami poszczególnych obrazków nie może być odstępów ponieważ muszą się one stykać krawędziami.

[lp] 16. Wstawiamy kolejny obrazek, który będzi linkiem do nieistniejącej jeszcze strony about.html. Do naszego kodu wstawiamy:Cały kod powinien wyglądać w ten sposób:

[lp] 17. Czynności powtarzamy z odpowiednimi nazwami plików i obrazków.
Oto ukończony kod:

[lp] 18. Zapisujemy plik.

[lp] 19. Nasz plik index.html można zapisać jeszcze kilka razy, pod takimi nazwami, jakie podaliśmy w kodzie (about.html, about.html, services.html itd.)

[lp] 20. Otwieramy plik index.html przez przeglądarkę internetową i możemy się cieszyć gotowym menu.

Oto przykład działania: http://www.furion.yoyo.pl/do_tutoriali/ (http://www.furion.yoyo.pl/do_tutoriali/)
[lp] Koniec

---

Miniaturka:
 (http://www.furion.yoyo.pl/do_tutoriali/ikonka1.png)

Nie znam się na www, ale wg. mnie całkiem ładne i przejrzyście napisane.

Tutorial jest dość prosty do wykonania...ale jako, że jestem bardzo, bardzo początkująca, to pewne problemy sprawiło mi zduplikowanie paska dzielącego... W związku z czym jest odrobinę krzywo..  :P

Według mnie krzywe, nieciekawe i mało innowacyjne.

jeżeli to było do mnie to po pierwsze wyraźnie napisałam, że jestem bardzo początkująca, po drugie zdaję sobie sprawę z tego, że jest krzywe, o czym z resztą również napisałam, że miałam z tym problem.

To było raczej do autora tutoriala. Jego efekt końcowy też jest krzywy. ^^

Czy ja wiem? Dla mnie nic specjalnego, chociaż efekt nawet fajny. Ale osoba, która wykonała kilka tutoriali z działu Tworzenie stron WWW chyba sama do tego dojdzie.

Jest to w miarę dokładne tłumaczenie, więc pretensje kierujcie do autora oryginału, a nie do mnie. :(

EDIT: Co mam rozumieć przez sformułowanie "krzywy efekt końcowy".
Zmodyfikowałem trochę treść ostatniego podpunktu. Teraz może będzie łatwiej wykonać.  :)

hm, trochę niepotrzebnie moim zdaniem tłumaczone - wystarczy zrobić tutorial na menu w stylu Visty i już się podobne efekty umie osiągać

a co do tłumaczeń to w rzeczonym serwisie można znaleźć kilka o wiele ciekawszych tutoriali, które można by przetłumaczyć (w sumie na to też trzeba mieć zgodę autora więc proszę się o nią pytać)

Czy jeśli dopiszę swoją część tutoriala "Jak zrobić w pełni działające menu",gdzie opiszę jak zrobić takie menu w html'u, to będzie się on bardziej nadawał do zamieszczenia? <aniolek>
Wiem że jestem trochę nachalny, ale to mój pierwszy tutorial więc chciałbym aby był zamieszczony w dziale tutoriale. ^^

Myślę, że dobry opis, jak to pociąć i zakodować w pliku HTML byłby dobrym rozwinięciem.

Najlepiej przenieś go do działu Test i tam ukończ.

Zmodyfikowałem tutoriala. Mam nadzieję że teraz będzie się Wam podobał.  :D

Część z HTML jest zrobiona byle jak. Teraz nie używa się HTML tylko XHTML. Wszystkie atrybuty odpowiedzialne za wygląd (border) powinny iść do CSS.
Po drugie nie tak robi się menu. Spróbuj zmniejszyć okno i zobaczysz co się dzieje. Menu powinno być w bloku, który nazywa się DIV.

Co do tutorialu to nie wydaje mi się, żeby był potrzebny. Tak jak stwierdził Cakper, mamy już menu w stylu Visty.

Dobrze! >:( Napiszę w takim razie jak zrobić w xHTML'u i CSSie. :(

furion, miło mi że się starasz, ale wytłumacz mi po co na siłę coś pisać, co już de facto po primo w sieci juz jest doskonale opisane, secundo nie dotyczy tego forum

jeśli chcesz mieć swój wkład w tutoriale przetłumacz coś porządnego i ciekawego co się ludziom przyda, a i Ty z tego będziesz o wiele bardziej zadowolony :)

No dobra, ulegam. ^^ Ale niewiem jakie w takim razie tutoriale tłumaczyć bo na forum już jest ich bardzo dużo.

dwa about.html?

Moja praca: simjude96.ugu.pl.

P.S. Prosze o wejscie na strony. Jesli to reklama to prosze moderatora o uciecie tego watku.

A ja wykorzystałem ten efekt na tej stronie: http://www.c-m-p.com.pl (http://www.c-m-p.com.pl)

Efekt jest bardzo fajny.

Ja tam uważam, że tutorial powinien być lekko lepiej dopracowany i by było super. Powinny się tu znajdować tutoriale, które będą miały zastosowanie różnego rodzaju, a nie tylko "jak coś zrobić w GIMPIE", tylko jak sprawić, aby to co zrobimy w GIMPie mogło być wykorzystane do innych rzeczy!

Jest wiele tutoriali opisujących jak grafikę z photoshopa przerobić na potrzeby stron www (nawet takie menu, jak przygotować w kodzie xHTML) - dlaczego mamy być gorsi? Im więcej PROSTYCH rzeczy - tym lepiej, bo więcej osób się zainteresuje GIMPem.

Wiola spójrz na daty.

No dobra, ale to chyba nie znaczy, że tutorial nie może być poprawiony?

Ale autor napisał już że sobie odpuszcza.

No, ale może ktoś inny będzie miał ochotę na napisanie podobnego tutoriala?

Ale już nawet moderatorzy napisali żeby autor zostawił ten tut w spokoju i przetłumaczył coś co byłoby bardziej pożyteczne.

dzięki żeście mnie nauczyli zaokrąglone rogi nauczyli robić :P



// Ty podobno pracujesz w GIMP-ie od 3 lat i wszystko umiesz...

Przepraszam że tak odkopuje ten temat ale poco w tym tutorialu odchodzić od GIMPa i kodować to osobno w HTML. Ktoś już pisałem że powinno by to w div'ie i ma racje ale można było by w gimpie zrobić takie menu połączyć warstwy i zrobić mapę graficzną w HTML'u. Wystarczy wejść w Filtry -> Sieć WWW -> Image Map... stworzyć linki dostępnymi tam narzędziami i zapisać mapę. Później otworzyć to skopiować do pliku .html i obrazek zapisać w adresie podanym w tym pliku mapy (można zmienić ale jak to zrobić jest chyba jasne) Wiem że to stare ale na pewno szybsze.


PS. mapy obsługuje IE 1.0, FF 1.0, Opera 2.1

Może dlatego, że jeśli chodzi o działanie na stronach internetowych to bardzo ważne jest wykorzystanie transferu i wiele bardziej opłaca się pociąć grafikę, niż zrobić z całego obrazka mapę? :)