Polskie Forum Użytkowników GIMP-a

Prosty i przyjemny tutorial jak zrobić guzik na stronę i zastosować go w praktyce z effektem rollover.
Guziczek ma lekki charakter z MAC OS'a. Link do tego tutoriala w formie Video znajdziesz poniżej, więc możesz pominąć tekst poniżej, jeżeli nie chcesz oglądać filmu zapraszam do czytania :)

(http://images20.fotosik.pl/73/ecbec6b54c0819ce.png)

1. Zarys guziczka:
Pracę zaczynamy od stworzenie nowego obrazu i nowej warstwy.Łapaniemy się za narzędzie zaznaczenie prostokątne i zaznaczamy obszar wielkości naszego guziczka. Zaokrąglamy rogi zaznaczenia poprzez opcję w menu

Zaznaczenie > Zaokrąglenie..

wartość ustawiamy na 50 px

2. Ustawianie koloru:
Ustawiamy kolor pierwszoplanowy

#373ea3

a drugoplanowy

#94ddf6

(lub inne kolorki wg Twoich gustów) w ustawianiach gradnientu dajemy tryb liniowy a gradient Kolor pierwszoplanowy na drugoplanowy. Gradient zaczynamy lekko powyżej górnego bo do dolnego boku

3.Cieniowanie:
Dajemy kanał alfa na zaznaczenie naszej warstwy z guziczkiem i łapiemy za zaznaczenie prostokątne z trybem odejmowania. Usuwamy dolną cześć zaznaczenia mniej więcej na wysokości połowy guzika. Tworzymy nową warstwę i wypełniamy zaznaczenie gradientem Kolor biały na przezroczystość. Usuwamy zaznaczenie, łączymy warstwy robimy lekki cień i guzik jest gotowy.

4. Drugi guzik:
Żeby uzyskać efekt rollover (czyli guzik po najechaniu na niego kursorem zmienia np. kolor) musimy stworzyć nowy guzik. W celu korzystamy z 1 guzika i możemy przeprowadzić na nim szereg opercji, żeby odróżnić go od pierwszego np. zwiększyć jasność o wartość 50 w

Warstwa > Kolory > Jasność i Kontrast

lub też kontrast np. o 60. Możemy się także pobawić balansem kolorów w

Warstwa > Kolory > Balans Kolorów

.

(http://images20.fotosik.pl/73/454798e7d08ee0d3.png)

5. Wykorzystanie html'ki
Zapisz swoje guziczki o nazwach button.png i button2.png ściągnij gotową html'kę poniżej. Otwórz html'kę w przeglądarce i podziwiaj swoje guziczki :)

Jeżeli wolisz oglądać ten tutorial w formie filmiku znajdziesz go:
Na moim blogu: GIMP guzik (http://cattiusha.jogger.pl/2007/02/18/screencast-gimp-guzik-i-zastosowanie-go-na-stronie-www)
Gotowa html'ka: Rollover HTML (http://cattiusha.jogger.pl/files/rollover2.zip)
Oryginalny plik video o wysokiej jakość: Rapidshare GIMP guzik (http://rapidshare.com/files/17042284/mix.avi)

tut cudo :P
(http://www.gimpuj.info/replacement.png)

(http://www.gimpuj.info/replacement.png) (http://imageshack.us)
To brylant  :D. Użyje na stronie internetowej (grze mmog). Tylko muszę się nuczyć używać kanału alpha... bo mi nie wychodzi jak widać.

MojA Pracka :P:
(http://images33.fotosik.pl/159/ff669d387ce95a12.png)

fajne :)

Dość dobry tut jednakże myślałem że efekt rollover będzie trochę inaczej zrobiony niz kodem html+css. Oceniam tutka 8/10. Oto mój efekt pracy:

(http://www.gimpuj.info/gallery/12129_27_05_08_8_38_32.gif)

Na podstawie tutka, własna wersja:

JEŚLI KTOŚ CHCE TUTKA DO MOJEJ WERSJI - PROSZĘ PISAĆ!!!

Bardzo fajne :) Mój efekt:
(http://www.gimpuj.info/replacement.png)
Nie wyszło zbyt, ale mi się podoba :).

moja praca
(http://images47.fotosik.pl/3/955c5dd3e7d05367.png) (http://www.fotosik.pl)

A to moja praca.
(http://www.gimpuj.info/gallery/17706_23_11_08_12_54_57.png)
Przyjemny tutek.  :)

fajne tylko jak zrobić żeby w podpisie jak ktoś kliknie na ten guzik otworzy się galeria ?
(http://www.gimpuj.info/replacement.png)

to już kwesta html, to że zrobiłeś to w gimpie to połowa problemu druga to zakodować np za pomocą html...

Moja praca:

(http://www.otofotki.pl/img7/obrazki/xv5643_dbanimesmoderator.png)


Użyj takiego kodu - [ url=ADRES TWOJEJ GALERII ][ img ]ADRES OBRAZKA[ /img ][ /url ] (Oczywiście oprócz tych spacji :P)

Fajny tutorial :)
Bardzo przydatny.

Użyj takiego kodu - [ url=ADRES TWOJEJ GALERII ][ img ]ADRES OBRAZKA[ /img ][ /url ] (Oczywiście oprócz tych spacji :P)
[/quote]

Dzięki Ci za ten kod xD A ja się głowiłam jak zamieścić button na stronie :)

Jeśli chcesz go umieścić na stronie w html to kod będzie odrobinę inny...
Odsyłam do Kursu HTML (http://www.kurshtml.boo.pl/).

(http://i28.tinypic.com/nvv284.jpg) (http://www.photoblog.pl/dollie)

ja zrobiłam coś takiego :)

Takie coś mi się udało zrobić :) Tylko nie zrobiłem cienia

Mój guzik: (http://www.gimpuj.info/replacement.png)

taki se  :/

(http://imageflock.com/img/1251453371.jpg) (http://imageflock.com/img/1251453819.jpg)

A może mi ktoś powiedzieć jak zrobić aby guziki zmieniały się po najechaniu myszką  ^^? Najlepiej HTML :P

(http://www.fotoload.pl/123aa30/ecf675b07785a433a24ba3a11f8d72cb10782.png)

(http://www.fotoload.pl/123aa39/7e327731d240b1d5d7f31f398bb41c483003.png)

Witam dopiero zaczynam z grafiką o to co mi wyszło :)

<img src="zdjęcie1" border="0" onmouseover="this.src = 'zdjęcie2'" onmouseout="this.src = 'zdjęcie1'" />

(http://C:\Documents and Settings\TXP\Pulpit\Wszystko\Obrazki\button.png) (http://n-orbi.blogspot.com/) odwiedź (powiedzcie jak z tym kursorem jak najade to mi sie zmienia jak to zrobic?

wklejasz coś takiego

(http://www.gimpuj.info/replacement.png) (http://img180.imageshack.us/i/42151226.png/)

Uploaded with ImageShack.us (http://imageshack.us)

(http://www.gimpuj.info/replacement.png)


I jak ? :D

3.Cieniowanie:
Dajemy kanał alfa na zaznaczenie naszej warstwy z guziczkiem i łapiemy za zaznaczenie prostokątne z trybem odejmowania. Usuwamy dolną cześć zaznaczenia mniej więcej na wysokości połowy guzika. Tworzymy nową warstwę i wypełniamy zaznaczenie gradientem Kolor biały na przezroczystość. Usuwamy zaznaczenie, łączymy warstwy robimy lekki cień i guzik jest gotowy.




OK początek zrobiłam, ale nie rozumiem tego : "Tworzymy nową warstwę i wypełniamy zaznaczenie gradientem Kolor biały na przezroczystość. Usuwamy zaznaczenie, łączymy warstwy robimy lekki cień i guzik jest gotowy." Jak to zrobić ?

po prostu wypełniasz gradientem- biały na przezroczystość. Usuwasz zaznaczenie ... i robisz lekki cień dowolną techniką np. kanał alfa na zaznaczenie nowa warstwa (pod tamtą) wypełniasz czarnym, usuwasz zaznaczenie i Filtry->rozmycie->rozmycie Gaussa... ok 10 px zależy od wielkości

Oto mój efekt:) Myślę, że nie wyszło najgorzej... Mogłem tylko czcionkę zmienić. Wie ktoś gdzie mogę pobrać nowe czcionki do gimpa?
(http://foto-host.pl/images/870Guzik_1.png) (http://foto-host.pl/view.php?filename=870Guzik_1.png)

Mój efekt :
(http://i42.tinypic.com/1zfsh2r.png)
Fajny tutek

Jak na początek to nieźle.

(http://desmond.imageshack.us/Himg96/scaled.php?server=96&filename=beznazwype.png&res=landing)

Moje:

A o to efekt mojej pracy:)(http://iv.pl/images/56677197921889279605.gif)

Hej, Autorko, mam prośbę - możesz mi napisać, która konkretnie część kodu odpowiada za to, że przycisk się zmienia po najechaniu kursorem?

Autorka tego tuta od 4 lat nie logowała się na forum, więc raczej Ci nie odpowie :P
http://forum.pcformat.pl/Zmiana-obraka-buttona-po-najechaniu-myszka-t - tu masz wytłumaczone.