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 106993 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 3919 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
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: