Polskie Forum Użytkowników GIMP-a

---

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

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

---

[lp] Zaczynamy

[lp] 1. Otwieramy Nowy dokument o wymiarach100x100px.



[lp] 2. Warto pracować na przybliżeniu 400% (Widok -> Powiększenie).

[lp] 3. Rysujemy prowadnice (Obraz -> Prowadnice -> Nowa prowadnica):
- dwie pionowe:

• 13px
• 88px

- dwie poziome:

• 13px
• 88px

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

[lp] 5. Rysujemy koło za pomocą narzędzia Zaznaczenie eliptyczne <zaznaczenie-eliptyczne> [E] wewnątrz prowadnic.

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

[lp] 7. Przejeżdżamy gradientem <gradient> [L] od prawej górnej strony do lewej dolnej.



A oto efekt:



[lp] 8. Duplikujemy <duplikowanie-warstwy> [Shift+Ctrl+D] warstwę body, duplikat niech nazywa się obramowanie. Włóżmy ją pomiędzy warstwy body a tło.

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

[lp] 10. Wylewamy kubkiem (Wypełnienie kubełkiem <wypelnienie> [Shift+B]) o kolorze białym.

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

[lp] 12. Zaznacz wszystko [Ctrl+A].

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



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

[lp] 15. Tworzymy Zaznaczenie eliptyczne <zaznaczenie-eliptyczne> [E] wewnątrz prowadnic.



[lp] 16. Zmniejszamy zaznaczenie o 2px (Zaznaczenie -> Zmniejsz...).

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



[lp] 18. Wybieramy kolor pierwszoplanowy: #a8da77.

[lp] 19. Wybieramy gradient Kolor pierwszoplanowy na przezroczystość.



I efekt:



[lp]20. Tworzymy nową warstwę [Ctrl+Shift+N].

[lp]21. 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:



[lp] Koniec

---

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

(http://www.gimpuj.info/gallery/thumb_6996_21_03_08_1_47_05.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=11779)


Nikt nie broni także zmieniania kształtu:

(http://www.gimpuj.info/gallery/thumb_6996_21_03_08_1_45_32.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=11778)


Do zobaczenia w drugim tutorialu!

---

Nawet fajnie wygląda ten button. Mi wyszedł taki :
(http://img160.imageshack.us/img160/5982/strzakaom0.png)
Edit:
Ups, zapomniałem tło usunąć...

Ciekawy i prosty efekt.
Może mi się kiedyś przyda do layouta :)
Moja pracka:
(http://img216.imageshack.us/img216/9969/zakaztw8.png)

(http://www.gimpuj.info/gallery/1197_17_04_08_10_19_23.png)

Gdzie to się ustawia?

Wybierasz z narzędzi Gradient <gradient>, naciskasz na obrazek obok napisu Gradient i z listy wybierasz "Kolor pierwszoplanowy na przezroczystość" jak na screenie :
(http://img181.imageshack.us/img181/803/beztytuukd2.jpg)

(http://www.gimpuj.info/replacement.png)
Napis mi trochę nie wyszedł. Dobry tut, pozdrawiam.

Oto moja pracka. Bardzo fajny i przydatny tutek.
(http://www.gimpuj.info/gallery/12129_29_05_08_4_43_37.png)

Fajny efekt.;)
Ja zrobiłam coś takiego:
(http://www.gimpuj.info/replacement.png)
(http://www.gimpuj.info/replacement.png)

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

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:
(http://www.gimpuj.info/gallery/11341_17_07_08_10_32_56.png)

Extra tutorial, przyda mi się. A oto moja praca:
(http://www.fotoo.pl/hosting-zdjec/img/f19c4bc84cc63a100a95166781b7bebe/znaczek.jpg)

Heh a ja zrobiłam takie :)
tło dlatego kolorowe bo dałam przezroczyste xD

No a to moje dzieło:
IMAGESHACK ;d (http://img220.imageshack.us/my.php?image=85584879xt8.jpg)

Łatwy ale fajny tut  ;)
Moja praca:
(http://images27.fotosik.pl/295/15ba8b0849a96fee.png)

A to moje ;)

(http://www.otofotki.pl/img4/obrazki/iopg797261277d.png)

Takie cos :D


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

Moje w załączniku

(http://file:///C:/Documents%20and%20Settings/Marek18/Pulpit/Button%20fajny.jpg) 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!

Fajnie wyszło dzięki za tuta :)
(http://www.gimpuj.info/replacement.png)


moja odpowiedź zapisz w .png a nie .jpg :)

Ś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

Mój efekt:
(http://www.gimpuj.info/replacement.png)

@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.

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

Fajne. Ja trochę pokombinowałam i wyszło takie coś!!!
(http://www.gimpuj.info/replacement.png)
Naszło mnie na postaci z Mario!!!

To moje:

(http://www.gimpuj.info/gallery/23784_16_03_09_2_23_17.png) (http://www.gimpuj.info/)

(http://www.gimpuj.info/gallery/24586_29_03_09_8_52_02_1.png)
A to moje. Pozwoliłem sobie troche zmodyfikowac kolorki.

Przy okazji witam! to mój 1 post na tym forum ;)

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

Sebastian,Qba jakiej  jakiej czcionki uzywasz??

A o to i moja praca :

(http://www.gimpuj.info/replacement.png)

O to moja praca :)
Wydaje mi sie, ze nie wyszlo zle ;]

(http://www.gimpuj.info/gallery/18813_06_09_09_2_55_29.png)

Pozdrawiam!

A oto moje dzieło:
(http://www.gimpuj.info/replacement.png)

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 :
(http://i33.tinypic.com/e1epzo.png)

P.S jak usunąć tło ?

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

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

(http://www.gimpuj.info/replacement.png)

v2,specjalnie dla swojej strony robiłem:
(http://www.gimpuj.info/replacement.png)

(http://www.gimpuj.info/replacement.png)

oto moja praca dopiero zaczynam pracę z gimpem
(http://iv.pl/images/rpgtljow3ps3p13bk2cw.png)

oto moje dzieło:

super tutek ;]

(http://gfx.efotek.pl/images/4gxv5bxifdnul3ip2iu.png)

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
(http://www.gimpuj.info/replacement.png)

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

Pozdrawiam

Odkopię temat.A oto moja praca:
(http://www.gimpuj.info/replacement.png)
Tutek świetny.A jeszcze co do pracy, to myślę że dobrze wyszło.

A o to moje dzieło- mało kombinuje z gimp'em. :)
(http://fooh.pl/pokaz/833e47a58fad2b8d0988c054935300e6_eeeeeeeeeee13123.png)

I jeszcze jedno :)
(http://fooh.pl/pokaz/17ed5df6e4531f7b0a20fa72d41b5e0e_eeeeeeeasdasda.png)

Wydaje mi się że drugie wyszło ładniej, pozdrawiam!

Moje wypociny:
(http://www.gimpuj.info/replacement.png)
(Zwaliłem stopę na dole.)
Przyczyniłeś się do mojego zdobycia sprawności :P

Fajny button, moj efekt koncowy:

Bardzo ciekawy efekt - podoba mi się. A moja pracka to:
(http://www.gimpuj.info/replacement.png) Mi się podoba :)

(http://www.gimpuj.info/replacement.png) (http://imageshack.us/photo/my-images/825/oc2.png/)

A ja zaszalałem i zrobiłem coś takiego :)
(http://imageshack.us/scaled/thumb/526/8o49.png)

Fajny tutek, bardzo przydatny!