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 116007 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, 13: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, 15: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, 18: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, 20: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, 21: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, 10: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, 11: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 : 27.05.2008, 23: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, 15: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, 09: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, 21: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, 09: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, 10:49:33 »

Extra tutorial, przyda mi się. A oto moja praca:
Zapisane
K-ja
Gość
« Odpowiedz #12 : 03.09.2008, 17: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 18968 razy.)
Zapisane
Kubis
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 9
Galeria Użytkownika

Kubis


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

No a to moje dzieło:
IMAGESHACK ;d
Zapisane
Strony: [1] 2 3 4  Wszystkie
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPWWWWątek: Ładny button na stronę WWW
Skocz do: