Tytuł: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: CaTTiusha on 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 :) (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 #373ea3a 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 Kontrastlub 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) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: kubix122 on 25.07.2007, 08:35:52 tut cudo :P
(http://www.gimpuj.info/replacement.png) Tytuł: Świetne Wiadomość wysłana przez: Misiur on 28.01.2008, 21:55:07 (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ć. Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: orlosek on 27.02.2008, 13:29:27 MojA Pracka :P:
(http://images33.fotosik.pl/159/ff669d387ce95a12.png) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: vailet on 27.03.2008, 17:14:38 fajne :)
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Drobbek on 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:
(http://www.gimpuj.info/gallery/12129_27_05_08_8_38_32.gif) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Wiola on 27.06.2008, 23:59:59 Na podstawie tutka, własna wersja:
(http://www.gimpuj.info/replacement.png) JEŚLI KTOŚ CHCE TUTKA DO MOJEJ WERSJI - PROSZĘ PISAĆ!!! Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Kereyly on 30.07.2008, 22:09:44 Bardzo fajne :) Mój efekt:
(http://www.gimpuj.info/replacement.png) Nie wyszło zbyt, ale mi się podoba :). Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Garazel on 22.08.2008, 17:16:06 moja praca
(http://images47.fotosik.pl/3/955c5dd3e7d05367.png) (http://www.fotosik.pl) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Yanke$ on 23.11.2008, 12:55:33 A to moja praca.
(http://www.gimpuj.info/gallery/17706_23_11_08_12_54_57.png) Przyjemny tutek. :) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: herr107 on 19.02.2009, 20:48:30 fajne tylko jak zrobić żeby w podpisie jak ktoś kliknie na ten guzik otworzy się galeria ?
(http://www.gimpuj.info/replacement.png) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Nose4s on 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...
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Pikni3 on 21.04.2009, 18:19:20 Moja praca:
(http://www.otofotki.pl/img7/obrazki/xv5643_dbanimesmoderator.png) fajne tylko jak zrobić żeby w podpisie jak ktoś kliknie na ten guzik otworzy się galeria ? (http://www.gimpuj.info/replacement.png) Użyj takiego kodu - [ url=ADRES TWOJEJ GALERII ][ img ]ADRES OBRAZKA[ /img ][ /url ] (Oczywiście oprócz tych spacji :P) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: wymiaatcz01 on 13.07.2009, 12:47:20 Fajny tutorial :)
Bardzo przydatny. Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Turquoise-Dollie on 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 :P) [/quote] Dzięki Ci za ten kod xD A ja się głowiłam jak zamieścić button na stronie :) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Sooly on 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 (http://www.kurshtml.boo.pl/). Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Turquoise-Dollie on 25.07.2009, 15:15:58 (http://i28.tinypic.com/nvv284.jpg) (http://www.photoblog.pl/dollie)
ja zrobiłam coś takiego :) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Cobra on 27.07.2009, 09:31:25 Takie coś mi się udało zrobić :) Tylko nie zrobiłem cienia
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Galcoral on 15.08.2009, 18:24:43 Mój guzik: (http://www.gimpuj.info/replacement.png)
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: avi998 on 28.08.2009, 11:04:21 taki se :/
(http://imageflock.com/img/1251453371.jpg) (http://imageflock.com/img/1251453819.jpg) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Kuszluk on 11.09.2009, 16:27:24 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) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: xxpichuxx on 12.12.2009, 18:07:53 Witam dopiero zaczynam z grafiką o to co mi wyszło :)
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Kart on 05.03.2010, 15:09:08 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) <img src="zdjęcie1" border="0" onmouseover="this.src = 'zdjęcie2'" onmouseout="this.src = 'zdjęcie1'" /> Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: norbi28 on 09.04.2010, 21:04:39 (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?
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: fenix505 on 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'" /> Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Shimizu on 08.06.2010, 20:12:14 (http://www.gimpuj.info/replacement.png) (http://img180.imageshack.us/i/42151226.png/)
Uploaded with ImageShack.us (http://imageshack.us) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Old Oxy on 25.06.2010, 17:27:40 (http://www.gimpuj.info/replacement.png)
I jak ? :D Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: kamyk9898 on 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ć ? Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: fenix505 on 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
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: Valantir on 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?
(http://foto-host.pl/images/870Guzik_1.png) (http://foto-host.pl/view.php?filename=870Guzik_1.png) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: evanna on 28.11.2011, 22:12:00 Mój efekt :
(http://i42.tinypic.com/1zfsh2r.png) Fajny tutek Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: changes92 on 02.07.2012, 18:42:19 Jak na początek to nieźle.
(http://desmond.imageshack.us/Himg96/scaled.php?server=96&filename=beznazwype.png&res=landing) Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: mi70f on 08.11.2012, 18:05:01 Moje:
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: L0l on 28.12.2012, 23:31:44 A o to efekt mojej pracy:)(http://iv.pl/images/56677197921889279605.gif)
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: seekerek on 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?
Tytuł: Odp: Screencast - Prosty guzik i zastosowanie go na stronie www Wiadomość wysłana przez: be@ on 08.10.2013, 11:02:31 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. |