Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPWWWWątek: Screencast - Prosty guzik i zastosowanie go na stronie www
Strony: 1 2 3 [Wszystkie]
DrukujPobierz PDF
Autor Wątek: Screencast - Prosty guzik i zastosowanie go na stronie www  (Przeczytany 98921 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
CaTTiusha
Użytkownik

Reputacja: 12 Offline Offline

Płeć: Kobieta
GIMP: 1.*
JID: cattiusha@ubuntu.pl
Licencja: Copyright
Wiadomości: 90
Galeria Użytkownika


Looking for...


Zobacz profil WWW
« : 19.02.2007, 21:45:39 »

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 Uśmiech



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
.



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 Uśmiech

Jeżeli wolisz oglądać ten tutorial w formie filmiku znajdziesz go:
Na moim blogu: GIMP guzik
Gotowa html'ka: Rollover HTML
Oryginalny plik video o wysokiej jakość: Rapidshare GIMP guzik
« Ostatnia zmiana: 19.02.2007, 22:04:15 wysłane przez CaTTiusha » Zapisane

Moje Videotutoriale:
Screencast - PodstawyJak zrobić kulę?       Jak zrobić prosty guzik?
Moje Tutoriale:Obiekt Niemożliwy Jest Możliwy w GIMP'ie   |   Kula Zagnieżdzona w Tle  |
Mój GIMP Blog, gdzie znajdziecie Video Tutoriale do GIMP'a i nie tylko.n
kubix122
Użytkownik

Reputacja: 28 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 327
Galeria Użytkownika


hollow


Zobacz profil
« Odpowiedz #1 : 25.07.2007, 08:35:52 »

tut cudo Język
Zapisane


Misiur
Nowicjusz

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
Licencja: Copyright
Wiadomości: 6
Galeria Użytkownika

Misiur

Webmaster


Zobacz profil
« Odpowiedz #2 : 28.01.2008, 21:55:07 »


To brylant  Chichot. Użyje na stronie internetowej (grze mmog). Tylko muszę się nuczyć używać kanału alpha... bo mi nie wychodzi jak widać.
Zapisane

Sorki, przeszedłem na photoshopa Chichot
orlosek
Nowicjusz

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 4
Galeria Użytkownika


Grafik


Zobacz profil WWW
« Odpowiedz #3 : 27.02.2008, 13:29:27 »

MojA Pracka Język:
Zapisane

Już niedługo Język
vailet
Nowicjusz

Reputacja: 2 Offline Offline

GIMP: 2.4
Licencja: CC-BY-SA
Wiadomości: 5
Galeria Użytkownika



Zobacz profil
« Odpowiedz #4 : 27.03.2008, 17:14:38 »

fajne Uśmiech


* buttoncsscien.png (11.55 KB, 300x100 - wyświetlony 2660 razy.)
Zapisane
Drobbek
Użytkownik

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 26
Galeria Użytkownika


Taki sobie Metallowiec...


Zobacz profil
« Odpowiedz #5 : 27.05.2008, 19:41:54 »

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:

Zapisane


Wiola
Użytkownik

Reputacja: 2 Offline Offline

Płeć: Kobieta
GIMP: 2.4
Licencja: Copyright
Wiadomości: 25
Galeria Użytkownika



Zobacz profil
« Odpowiedz #6 : 27.06.2008, 23:59:59 »

Na podstawie tutka, własna wersja:

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

Każda chwila istnieje po to, aby wszystko odmienić.
Kereyly
Gość
« Odpowiedz #7 : 30.07.2008, 22:09:44 »

Bardzo fajne Uśmiech Mój efekt:

Nie wyszło zbyt, ale mi się podoba Uśmiech.
Zapisane
Garazel
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
Licencja: Copyright
Wiadomości: 11
Galeria Użytkownika



Zobacz profil
« Odpowiedz #8 : 22.08.2008, 17:16:06 »

moja praca
Zapisane

Yanke$
Użytkownik

Reputacja: 0 Offline Offline

GIMP: 2.6 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 17
Galeria Użytkownika

Yanke$


Zobacz profil
« Odpowiedz #9 : 23.11.2008, 12:55:33 »

A to moja praca.

Przyjemny tutek.  Uśmiech
Zapisane
herr107
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 7
Galeria Użytkownika



Zobacz profil
« Odpowiedz #10 : 19.02.2009, 20:48:30 »

fajne tylko jak zrobić żeby w podpisie jak ktoś kliknie na ten guzik otworzy się galeria ?

Zapisane
Nose4s
√ ι ק

Reputacja: 6 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
JID: moses@jabster.pl
Licencja: Copyright
Wiadomości: 961
Galeria Użytkownika


Troll magister dyplomowany ;)


Zobacz profil
« Odpowiedz #11 : 19.02.2009, 21:26:19 »

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


Pikni3
Użytkownik

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 32
Galeria Użytkownika


Młody GIMP-owicz ;)


Zobacz profil WWW
« Odpowiedz #12 : 21.04.2009, 18:19:20 »

Moja praca:



fajne tylko jak zrobić żeby w podpisie jak ktoś kliknie na ten guzik otworzy się galeria ?



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

wymiaatcz01
Użytkownik

Reputacja: 1 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 218
Galeria Użytkownika



Zobacz profil
« Odpowiedz #13 : 13.07.2009, 12:47:20 »

Fajny tutorial Uśmiech
Bardzo przydatny.
Zapisane



Wróciłem Uśmiech
Turquoise-Dollie
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Kobieta
GIMP: 2.6
Licencja: Copyright
Wiadomości: 5
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #14 : 25.07.2009, 14:31:06 »



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

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

Sooly
Emeryt

Reputacja: 9 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 1 840
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #15 : 25.07.2009, 14:42:07 »

Jeśli chcesz go umieścić na stronie w html to kod będzie odrobinę inny...
Odsyłam do Kursu HTML.
Zapisane

Turquoise-Dollie
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Kobieta
GIMP: 2.6
Licencja: Copyright
Wiadomości: 5
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #16 : 25.07.2009, 15:15:58 »



ja zrobiłam coś takiego Uśmiech
Zapisane

Cobra
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 2
Galeria Użytkownika

Cobra


Zobacz profil
« Odpowiedz #17 : 27.07.2009, 09:31:25 »

Takie coś mi się udało zrobić Uśmiech Tylko nie zrobiłem cienia


* button2.png (34.65 KB, 400x300 - wyświetlony 606 razy.)
Zapisane
Galcoral
Gość
« Odpowiedz #18 : 15.08.2009, 18:24:43 »

Mój guzik:
Zapisane
avi998
Nowicjusz

Reputacja: 0 Offline Offline

GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 3
Galeria Użytkownika



Zobacz profil
« Odpowiedz #19 : 28.08.2009, 11:04:21 »

taki se  :/

Zapisane
Kuszluk
Gość
« Odpowiedz #20 : 11.09.2009, 16:27:24 »

A może mi ktoś powiedzieć jak zrobić aby guziki zmieniały się po najechaniu myszką  Uśmiech 2? Najlepiej HTML Język



Zapisane
xxpichuxx
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 1
Galeria Użytkownika

xxpichuxx


Zobacz profil
« Odpowiedz #21 : 12.12.2009, 18:07:53 »

Witam dopiero zaczynam z grafiką o to co mi wyszło Uśmiech


* xxpichuxx.png (13.02 KB, 222x93 - wyświetlony 547 razy.)
Zapisane
Kart
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 3
Galeria Użytkownika


Copyright © Kart 2009


Zobacz profil
« Odpowiedz #22 : 05.03.2010, 15:09:08 »

A może mi ktoś powiedzieć jak zrobić aby guziki zmieniały się po najechaniu myszką  Uśmiech 2? Najlepiej HTML Język





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

Copyright © Kart 2009
norbi28
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 2
Galeria Użytkownika

norbi28


Zobacz profil
« Odpowiedz #23 : 09.04.2010, 21:04:39 »

odwiedź (powiedzcie jak z tym kursorem jak najade to mi sie zmienia jak to zrobic?
Zapisane
fenix505
Pod nadzorem

Reputacja: -3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-BY
Wiadomości: 115
Galeria Użytkownika


It's me ;D


Zobacz profil
« Odpowiedz #24 : 29.05.2010, 14:58:51 »

wklejasz coś takiego
Kod:
<img src="zdjęcie1" border="0" onmouseover="this.src = 'zdjęcie2'" onmouseout="this.src = 'zdjęcie1'" />
Zapisane

Shimizu
Nowicjusz

Reputacja: 0 Offline Offline

GIMP: 1.*
Licencja: Copyright
Wiadomości: 7
Galeria Użytkownika

Shimizu


Zobacz profil
« Odpowiedz #25 : 08.06.2010, 20:12:14 »



Uploaded with ImageShack.us
Zapisane

Old Oxy
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 5
Galeria Użytkownika

Old Oxy


Zobacz profil
« Odpowiedz #26 : 25.06.2010, 17:27:40 »




I jak ? Chichot
Zapisane
kamyk9898
Użytkownik

Reputacja: 0 Offline Offline

GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 24
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #27 : 29.06.2010, 10:50:10 »

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ć ?
Zapisane
fenix505
Pod nadzorem

Reputacja: -3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-BY
Wiadomości: 115
Galeria Użytkownika


It's me ;D


Zobacz profil
« Odpowiedz #28 : 30.06.2010, 09:32:21 »

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
Zapisane

Valantir
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 8
Galeria Użytkownika

Valantir


Zobacz profil
« Odpowiedz #29 : 31.10.2010, 12:54:58 »

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?
Zapisane
evanna
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Kobieta
GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 8
Galeria Użytkownika

evanna

Życie to nie gra


Zobacz profil
« Odpowiedz #30 : 28.11.2011, 22:12:00 »

Mój efekt :

Fajny tutek
Zapisane

Idioci, idioci wszędzie
changes92
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.8
Licencja: Copyright
Wiadomości: 6
Galeria Użytkownika

changes92


Zobacz profil
« Odpowiedz #31 : 02.07.2012, 18:42:19 »

Jak na początek to nieźle.

Zapisane
mi70f
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Kobieta
GIMP: 2.8
Licencja: Copyright
Wiadomości: 4
Galeria Użytkownika



Zobacz profil
« Odpowiedz #32 : 08.11.2012, 18:05:01 »

Moje:


* Grafinetka-guzik.jpg (2.68 KB, 269x56 - wyświetlony 577 razy.)
Zapisane

L0l
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 1
Galeria Użytkownika

L0l


Zobacz profil
« Odpowiedz #33 : 28.12.2012, 23:31:44 »

A o to efekt mojej pracy:)
Zapisane
seekerek
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 2
Galeria Użytkownika

seekerek


Zobacz profil
« Odpowiedz #34 : 08.10.2013, 10:41:02 »

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

Reputacja: 49 Offline Offline

Płeć: Kobieta
GIMP: 2.8
Licencja: CC-BY
Wiadomości: 7 052
Galeria Użytkownika



Zobacz profil
« Odpowiedz #35 : 08.10.2013, 11:02:31 »

Autorka tego tuta od 4 lat nie logowała się na forum, więc raczej Ci nie odpowie Język
http://forum.pcformat.pl/Zmiana-obraka-buttona-po-najechaniu-myszka-t - tu masz wytłumaczone.
Zapisane
Strony: 1 2 3 [Wszystkie]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPWWWWątek: Screencast - Prosty guzik i zastosowanie go na stronie www
Skocz do: