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

Strony: 1 2 3 4 [Wszystkie]
DrukujPobierz PDF
Autor Wątek: Ładny button na stronę WWW  (Przeczytany 107668 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
Lenoxxi
Użytkownik

Reputacja: 5 Offline Offline

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


Chojrak ;)


Zobacz profil
« : 24.02.2008, 14:41:16 »

Ładny button na stronę WWW
Tutorial

Opracowanie: Lenoxxi
Poziom trudności: łatwy





Natknąłem się na tutorial do PSa, postanowiłem go przepisać na GIMPie i mam nadzieję, że uda wam się go zrobić. Mrugnięcie

Tutorial napisany w wersji GIMPa 2.4.4 W innych wersjach nazwy narzędzi i pojęć mogą się różnić.



Lime Point Zaczynamy

Lime Point 1. Otwieramy Nowy dokument o wymiarach100x100px.



Lime Point 2. Warto pracować na przybliżeniu 400% (Widok -> Powiększenie).

Lime Point 3. Rysujemy prowadnice (Obraz -> Prowadnice -> Nowa prowadnica):
- dwie pionowe:
  • 13px
  • 88px
- dwie poziome:
  • 13px
  • 88px

Lime Point 4. Otwieramy nową, przeźroczystą warstwę [Ctrl+Shift+N], nazwijmy ją body.

Lime Point 5. Rysujemy koło za pomocą narzędzia Zaznaczenie eliptyczne Zaznaczenie eliptyczne [E] wewnątrz prowadnic.

Lime Point 6. Teraz czas na kolorowanie kółeczka - kolor pierwszoplanowy: #68ac00, kolor drugoplanowy: #036800.

Lime Point 7. Przejeżdżamy gradientem Gradient [L] od prawej górnej strony do lewej dolnej.



A oto efekt:



Lime Point 8. Duplikujemy Duplikowanie warstwy [Shift+Ctrl+D] warstwę body, duplikat niech nazywa się obramowanie. Włóżmy ją pomiędzy warstwy body a tło.

Lime Point 9. Powiększamy zaznaczenie (Zaznaczenie -> Powiększ...) o 2px. Usuwamy [Delete] zawartość zaznaczenia.

Lime Point 10. Wylewamy kubkiem (Wypełnienie kubełkiem Wypełnienie kubełkiem [Shift+B]) o kolorze białym.

Lime Point 11. Duplikujemy [Shift+Ctrl+D] warstwę obramowanie, duplikat nazywamy cień. Włóżmy pod warstwę obramowanie i pokolorujmy warstwę cień na czarno.

Lime Point 12. Zaznacz wszystko [Ctrl+A].

Lime Point 13. I "gaussujemy" (Filtry -> Rozmycie -> Rozmycie Gaussa...) o wartości 5px. Efekt:



Lime Point 14. Tworzymy nową warstwę [Ctrl+Shift+N], nazwijmy ją odbicie. Niech znajduje się na samej górze.

Lime Point 15. Tworzymy Zaznaczenie eliptyczne Zaznaczenie eliptyczne [E] wewnątrz prowadnic.



Lime Point 16. Zmniejszamy zaznaczenie o 2px (Zaznaczenie -> Zmniejsz...).

Lime Point 17. Zaznaczeniem eliptycznym [E] (z przytrzymaniem klawisza Ctrl rysujemy elipsę w ten sposób:



Lime Point 18. Wybieramy kolor pierwszoplanowy: #a8da77.

Lime Point 19. Wybieramy gradient Kolor pierwszoplanowy na przezroczystość.



I efekt:



Lime Point20. Tworzymy nową warstwę [Ctrl+Shift+N].

Lime Point21. Rysujemy strzałkę (ja sobie wyciąłem strzałkę, bo nie widziałem prostszego sposobu, jak chcecie możecie sobie z mojego rysunku wyciąć tą strzałkę).
No i dobrnęliśmy do końca, oto gotowy efekt:



Lime Point Koniec



Możecie oczywiście się pobawić z kolorystyką i elementem w wewnątrz buttonu.
Tutaj np. wersja koloru czerwonego:




Nikt nie broni także zmieniania kształtu:




Do zobaczenia w drugim tutorialu!


« Ostatnia zmiana: 07.06.2009, 16:19:52 wysłane przez INSEKT » Zapisane

Stop pokemonom!!
Incognito44
Użytkownik

Reputacja: 2 Offline Offline

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


leniwiec alfa


Zobacz profil WWW
« Odpowiedz #1 : 08.04.2008, 19:10:14 »

Nawet fajnie wygląda ten button. Mi wyszedł taki :

Edit:
Ups, zapomniałem tło usunąć...
Zapisane

Maziaje ₪  TapetyPixelki =D

<bardzo mądry cytat>
Grigo
Nowicjusz

Reputacja: 2 Offline Offline

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



Zobacz profil
« Odpowiedz #2 : 09.04.2008, 21:32:23 »

Ciekawy i prosty efekt.
Może mi się kiedyś przyda do layouta Uśmiech
Moja pracka:
Zapisane
Sebastian
√ ι ק

Reputacja: 36 Offline Offline

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



Zobacz profil
« Odpowiedz #3 : 17.04.2008, 22:15:31 »

Zapisane
Bialy Orzel
Użytkownik

Reputacja: 2 Offline Offline

Wiadomości: 20
Galeria Użytkownika

Bialy Orzel


Zobacz profil
« Odpowiedz #4 : 04.05.2008, 11:22:02 »

Cytuj
Lime Point 19. Wybieramy gradient Kolor pierwszoplanowy na przezroczystość.

Gdzie to się ustawia?
Zapisane
Incognito44
Użytkownik

Reputacja: 2 Offline Offline

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


leniwiec alfa


Zobacz profil WWW
« Odpowiedz #5 : 04.05.2008, 12:34:49 »

Wybierasz z narzędzi Gradient Gradient, naciskasz na obrazek obok napisu Gradient i z listy wybierasz "Kolor pierwszoplanowy na przezroczystość" jak na screenie :
Zapisane

Maziaje ₪  TapetyPixelki =D

<bardzo mądry cytat>
Amadeus_
Nowicjusz

Reputacja: 2 Offline Offline

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



Zobacz profil
« Odpowiedz #6 : 28.05.2008, 00:57:52 »


Napis mi trochę nie wyszedł. Dobry tut, pozdrawiam.
Zapisane

no peace no love no fun`
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 #7 : 29.05.2008, 16:45:34 »

Oto moja pracka. Bardzo fajny i przydatny tutek.
Zapisane


Lindse
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 10
Galeria Użytkownika

Lindse


Zobacz profil
« Odpowiedz #8 : 14.07.2008, 10:44:41 »

Fajny efekt.Mrugnięcie
Ja zrobiłam coś takiego:



Zapisane
LERUE
Nowicjusz

Reputacja: 2 Offline Offline

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



Zobacz profil
« Odpowiedz #9 : 16.07.2008, 22:57:11 »

a ja nie rozumiem punktu 6 i nie znalazłam nigdzie na forum odpowiedzi. czy byłbyś tak miły i wytłumaczył mi co dokładnie należy zrobić?
pozdrawiam
Zapisane
ignacy130
Użytkownik

Reputacja: 1 Offline Offline

GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 240
Galeria Użytkownika


Już znalazłem...


Zobacz profil
« Odpowiedz #10 : 17.07.2008, 10:24:32 »

ustawiasz kolor pierwszy na taki kod jaki jest tam podany, czyli w oknie wyboru koloru, w linijce Zapis HTML-owy wklejasz ten kod podany w tutorialu, a jako kolor drugoplanowy ten drugi. gradient chyba umiesz obsłużyć.

moja praca:

Zapisane

Desmond
Gość
« Odpowiedz #11 : 01.09.2008, 11:49:33 »

Extra tutorial, przyda mi się. A oto moja praca:
Zapisane
K-ja
Gość
« Odpowiedz #12 : 03.09.2008, 18:08:23 »

Heh a ja zrobiłam takie Uśmiech
tło dlatego kolorowe bo dałam przezroczyste xD


* button.jpg (6.57 KB, 100x100 - wyświetlony 18379 razy.)
Zapisane
Kubis
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 9
Galeria Użytkownika

Kubis


Zobacz profil
« Odpowiedz #13 : 09.11.2008, 19:57:51 »

No a to moje dzieło:
IMAGESHACK ;d
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 #14 : 19.11.2008, 16:01:34 »

Łatwy ale fajny tut  Mrugnięcie
Moja praca:
Zapisane
Francuz
Nowicjusz

Reputacja: 0 Offline Offline

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



Zobacz profil
« Odpowiedz #15 : 20.11.2008, 09:19:14 »

A to moje Mrugnięcie

Zapisane
Creesh
Nowicjusz

Reputacja: 0 Offline Offline

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



Zobacz profil
« Odpowiedz #16 : 18.01.2009, 19:30:39 »

Takie cos Chichot


@@jak zrobic zeby reszta była przeźroczysta? Napiszcie na pw plz.


* button1.jpg (2.33 KB, 100x100 - wyświetlony 1273 razy.)
Zapisane



KomputeromaniaK
Nowicjusz

Reputacja: 0 Offline Offline

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

KomputeromaniaK


Zobacz profil
« Odpowiedz #17 : 05.02.2009, 16:02:02 »

Moje w załączniku


* remont.png (84.54 KB, 450x400 - wyświetlony 545 razy.)

* remont_bez_bialego.png (97.94 KB, 450x400 - wyświetlony 546 razy.)

* Button222.png (7.48 KB, 180x58 - wyświetlony 666 razy.)
« Ostatnia zmiana: 05.02.2009, 16:49:04 wysłane przez KomputeromaniaK » Zapisane
Prunto
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 1
Galeria Użytkownika

Prunto


Zobacz profil
« Odpowiedz #18 : 13.02.2009, 16:04:34 »

niby mi wyszło ale szkoda że nie pokazałeś jak zrobiłeś kolejny krok jeszcze przed dodaniem strzałki. Bo piszesz "i efekt:" a potem masz na górze jeszcze bardziej jasne!
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 #19 : 17.02.2009, 16:05:27 »

Fajnie wyszło dzięki za tuta Uśmiech


Takie cos Chichot


@@jak zrobic zeby reszta była przeźroczysta? Napiszcie na pw plz.

moja odpowiedź zapisz w .png a nie .jpg Uśmiech
Zapisane
Morowis
Nowicjusz

Reputacja: 2 Offline Offline

Wiadomości: 6
Galeria Użytkownika

Morowis


Zobacz profil
« Odpowiedz #20 : 21.02.2009, 12:00:33 »

Świetny tutorial bardzo mi pomógł, lecz mam pytanie. Otóż chciałbym ten mój znak osadzić na drążku (tak jak normalnie jest) tylko nie wiem jak zrobić taki drążek. Czy znacie jakiś dobry tutorial, lub samemu umielibyście?

Z góry dziękuje za pomoc
Pozdrawiam
Morowis

Zapisane
Qba_
Emeryt

Reputacja: 20 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: qba_@jid.pl
Licencja: Copyright
Wiadomości: 2 627
Galeria Użytkownika


jogurt rlz!


Zobacz profil WWW
« Odpowiedz #21 : 21.02.2009, 12:34:53 »

Mój efekt:


@Morowis: Jak chcesz zrobić drążek to utwórz nową warstwę zaznacz prostokąt i wypełnij gradientem od koloru np. #d4d4d4 do #8c8c8c i umieść tą warstwę tuż nad warstwą tło i prawdopodobnie efekt będzie zbliżony do drążka. Nie próbowałem więc nie wiem jak wyjdzie, ale mam nadzieję, że pomogłem.
Zapisane

Morowis
Nowicjusz

Reputacja: 2 Offline Offline

Wiadomości: 6
Galeria Użytkownika

Morowis


Zobacz profil
« Odpowiedz #22 : 21.02.2009, 12:58:32 »

Qba_ nie za bardzo mi o taki efekt chodziło. Bardziej, żeby zaokrąglić, uwypuklić lub dobrze zaznaczyć. Ale i tak dzięki Uśmiech.
Oto mój efekt



* kolko.png (8.47 KB, 100x100 - wyświetlony 1413 razy.)
Zapisane
Naataaliaa
Nowicjusz

Reputacja: 2 Offline Offline

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



Zobacz profil
« Odpowiedz #23 : 26.02.2009, 19:55:03 »

Fajne. Ja trochę pokombinowałam i wyszło takie coś!!!

Naszło mnie na postaci z Mario!!!
Zapisane
Davidsonxx
Użytkownik

Reputacja: 0 Offline Offline

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


Komputeromaniak


Zobacz profil
« Odpowiedz #24 : 16.03.2009, 15:24:01 »

To moje:

Zapisane

Język JESTEM FANEM GIMPA Język
michalos13
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 2
Galeria Użytkownika

michalos13


Zobacz profil
« Odpowiedz #25 : 29.03.2009, 20:53:49 »


A to moje. Pozwoliłem sobie troche zmodyfikowac kolorki.

Przy okazji witam! to mój 1 post na tym forum Mrugnięcie
Zapisane
Ikar
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 3
Galeria Użytkownika

Ikar


Zobacz profil
« Odpowiedz #26 : 30.03.2009, 14:18:17 »

A oto moja praca. Wydaje mi się że całkiem nieźle wyszło.


* lol2.png (9.35 KB, 100x100 - wyświetlony 1229 razy.)
« Ostatnia zmiana: 30.03.2009, 14:38:55 wysłane przez Ikar » Zapisane
Papis
Nowicjusz

Reputacja: 0 Offline Offline

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



Zobacz profil
« Odpowiedz #27 : 01.04.2009, 18:26:23 »

Sebastian,Qba jakiej  jakiej czcionki uzywasz??
Zapisane
Sachimi
Użytkownik

Reputacja: 1 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 20
Galeria Użytkownika



Zobacz profil
« Odpowiedz #28 : 15.05.2009, 17:43:48 »

A o to i moja praca :

Zapisane

mcgryka9
Nowicjusz

Reputacja: 0 Offline Offline

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



Zobacz profil
« Odpowiedz #29 : 06.09.2009, 15:57:43 »

O to moja praca Uśmiech
Wydaje mi sie, ze nie wyszlo zle ;]



Pozdrawiam!
Zapisane
Roark
Użytkownik

Reputacja: 0 Offline Offline

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


Roark był kiedyś damiant1998!


Zobacz profil WWW
« Odpowiedz #30 : 12.09.2009, 09:54:04 »

A oto moje dzieło:
Zapisane


Gimmper
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 3
Galeria Użytkownika

Gimmper


Zobacz profil
« Odpowiedz #31 : 15.10.2009, 10:37:00 »

Pierwszy raz bawie się w Gimpie i wydaje się że ten Button jest łatwy a jednak
zrobiłem nie tak jak chciałem.
O to efekt :


P.S jak usunąć tło ?
Zapisane
Qba_
Emeryt

Reputacja: 20 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: qba_@jid.pl
Licencja: Copyright
Wiadomości: 2 627
Galeria Użytkownika


jogurt rlz!


Zobacz profil WWW
« Odpowiedz #32 : 15.10.2009, 16:52:21 »

Usuń warstwę Tło i zapisz obraz w formacie PNG.
Zapisane

rysieku
Użytkownik

Reputacja: 0 Offline Offline

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



Zobacz profil
« Odpowiedz #33 : 01.11.2009, 13:20:29 »

A to już moje 3dzieło! świetny tutek!



v2,specjalnie dla swojej strony robiłem:


« Ostatnia zmiana: 22.11.2009, 12:00:11 wysłane przez rysieku » Zapisane

patrysiek2
Użytkownik

Reputacja: -1 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 16
Galeria Użytkownika

patrysiek2


Zobacz profil WWW
« Odpowiedz #34 : 27.01.2010, 11:44:05 »

oto moja praca dopiero zaczynam pracę z gimpem

Zapisane

Domino500
Nowicjusz

Reputacja: -2 Offline Offline

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



Zobacz profil
« Odpowiedz #35 : 19.02.2010, 16:12:33 »

oto moje dzieło:


* Domino500.jpg (7 KB, 100x100 - wyświetlony 1409 razy.)
Zapisane
WóDz TęGa PaŁa
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 4
Galeria Użytkownika

WóDz TęGa PaŁa


Zobacz profil
« Odpowiedz #36 : 11.03.2010, 20:22:10 »

super tutek ;]

Zapisane
Marcin61
Nowicjusz

Reputacja: 0 Offline Offline

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


GIMP ^^


Zobacz profil
« Odpowiedz #37 : 14.05.2010, 17:44:25 »

witam!

Jak ktoś chce przezroczyste tło to starczy (na naszej nie przezroczystej pracy)
Zmienić warstwę tło na przezroczystą i już

Oto Moja Praca(z przezroczystym tłem) + projekt


Projekt
http://www.wrzucaj.com/388227

Pozdrawiam
Zapisane

Yomoto122
Użytkownik

Reputacja: 0 Offline Offline

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


Aye!


Zobacz profil
« Odpowiedz #38 : 15.07.2010, 20:43:48 »

Odkopię temat.A oto moja praca:

Tutek świetny.A jeszcze co do pracy, to myślę że dobrze wyszło.
Zapisane

Polecam grę League of Legends !

Zarejestrować się można z tego linku:
http://signup.leagueoflegends.com/?ref=4e15bd313ec34866311847

Polecam!
Tropical
Użytkownik

Reputacja: 0 Offline Offline

Wiadomości: 16
Galeria Użytkownika

Tropical


Zobacz profil
« Odpowiedz #39 : 10.09.2010, 21:59:38 »

A o to moje dzieło- mało kombinuje z gimp'em. Uśmiech


I jeszcze jedno Uśmiech


Wydaje mi się że drugie wyszło ładniej, pozdrawiam!
« Ostatnia zmiana: 10.09.2010, 22:12:06 wysłane przez Tropical » Zapisane
4tk
Nowicjusz

Reputacja: 0 Offline Offline

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



Zobacz profil
« Odpowiedz #40 : 14.10.2010, 15:07:29 »

Moje wypociny:

(Zwaliłem stopę na dole.)
Przyczyniłeś się do mojego zdobycia sprawności Język
Zapisane
Wieckos
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 11
Galeria Użytkownika

Wieckos


Zobacz profil
« Odpowiedz #41 : 23.10.2010, 11:51:41 »

Fajny button, moj efekt koncowy:


* logowieckos.jpg (6.43 KB, 100x100 - wyświetlony 1245 razy.)
« Ostatnia zmiana: 16.02.2011, 23:29:26 wysłane przez Terrqge » Zapisane



Avenix
Nowicjusz

Reputacja: 0 Offline Offline

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



Zobacz profil WWW
« Odpowiedz #42 : 16.02.2011, 18:18:06 »

Bardzo ciekawy efekt - podoba mi się. A moja pracka to:
Mi się podoba Uśmiech
Zapisane
pulkownik
Nowicjusz

Reputacja: 0 Offline Offline

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

pulkownik


Zobacz profil
« Odpowiedz #43 : 27.05.2011, 11:44:18 »

Zapisane

Nie dyskutuj z idiotą - najpierw sprowadzi Cię do swojego poziomu a później pokona doświadczeniem.
SupremeForte
Nowicjusz

Reputacja: 0 Offline Offline

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


Teh Sonic Fan


Zobacz profil
« Odpowiedz #44 : 18.06.2013, 11:55:01 »

A ja zaszalałem i zrobiłem coś takiego Uśmiech


Fajny tutek, bardzo przydatny!
Zapisane

Gimpuję bo to lubię Chichot
Strony: 1 2 3 4 [Wszystkie]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPWWWWątek: Ładny button na stronę WWW
Skocz do: