Polskie Forum Użytkowników GIMP-a

Tutoriale => Tutoriale do poprawy => Wątek zaczęty przez: CaTTiusha on 25.10.2006, 21:08:44



Tytuł: Kula w tle - interface
Wiadomość wysłana przez: CaTTiusha on 25.10.2006, 21:08:44
Przypomniał mi się pewien bardzo prosty sposób robienia kuli w photoshopie. Ten tutorial pokaże jak zrobić to samo w gimpie. Nie mam żadnego linku do tego starego tutoriala, nie mniej jednak podkreślam, że to nie ja wpadłam na ten pomysł. W tym tutorialu w paru krokach zrobimy kulę zagnieżdzoną w tle. Wszystkie skróty klawiszowe podane są w nawiasach  ;) Ten tutorial także znajdziecie tutaj (http://warp10.frih.net/grafika-kulawtle.html) Jest naprawdę bardzo łatwy, zapraszam do zrobienia samemu.

Zrobiłam screencastową wersję tego tutoriala. Zapraszam do oglądania na Youtube (http://www.youtube.com/watch?v=xctbjea1kMM)  Konwersja mpeg4 na swf z youtube nie poraża jakością, więc dla tych co chcą zobaczyć coś więcej zapraszam do ściągnięcia oryginalnego pliku:
http://rapidshare.com/files/5901584/gimp.avi (http://rapidshare.com/files/5901584/gimp.avi)
http://depositfiles.com/files/417101 (http://depositfiles.com/files/417101)

1. Zaczynamy pracę od stworzenia nowego obrazu (ctrl + N) o rozmiarze 400x400 px.

(http://warp10.frih.net/img/tutoriale/01.jpg)

2. Zmieniamy kolor tła - wybieramy narzędzie wypełnienie kolorem lub deseniem (shift + B), ustawiamy sobie dowolny kolor (za wyjątkiem czarnego i białego) i klikamy na warstwę tła.

(http://warp10.frih.net/img/tutoriale/02.jpg)

3. Tworzymy nową warstwę o nazwie “kula”, w oknie warstw. Wybieramy narzędzie zaznaczanie obszarów eliptycznych (klawisz E) i z wciśniętym klawiszem SHIFT rysujemy idealne koło.

(http://warp10.frih.net/img/tutoriale/03.jpg)

4. Za pomocą narzędzia wypełnienie kolorem lub deseniem (shift + B) wypełniamy zaznaczenie kolorem 616161 w notacji HTML-owej jak na rysunku poniżej.


(http://warp10.frih.net/img/tutoriale/04.jpg)

Nasz rysunek powinien wyglądać tak:

(http://warp10.frih.net/img/tutoriale/05.jpg)

5. Następnie w oknie warstw duplikujemy warstwę “kula” dwa razy i zmieniamy ich nazwy na “cien bialy” i “cien czarny”. Po czym przesuwamy warstwę “kula” na wierzchołek, czyli trzymamy wciśnięty klawiszy SHIFT i klikamy na guzik podniesienie warstwy w oknie warstw. Nasze okno warstw powinno wyglądać tak:

(http://warp10.frih.net/img/tutoriale/06.jpg)

6. Teraz za pomocą gadientu z tego płaskiego kółka zrobimy kulę. W tym celu zaznaczamy warstwę “kula” na której będziemy pracować i wybieramy narzędzie wypełnianie gradientem koloru. Kolor pierwszoplanowy ustawiamy biały a tło czarne (klawisz D, a później X) jak na rys. A, a gradient: kolor pierwszoplanowy na kolor tła i ustawiamy parametry jak na rys. B poniżej.

rys.A
(http://warp10.frih.net/img/tutoriale/07a.jpg)

rys.B
(http://warp10.frih.net/img/tutoriale/07.jpg)

Ciągniemy gradientem jak na rysunku od góry do dołu po przekątnej (pamiętając, żeby mieć zaznaczoną warstwę “kula”)

(http://warp10.frih.net/img/tutoriale/08.jpg)

7. Jeżeli w efekcie powstało nam coś takiego:

(http://warp10.frih.net/img/tutoriale/09.jpg)

to przestępujemy do rozmywania cieni. Zaznaczamy warstwę “cien bialy” i nadajemy jej biały kolor, a warstwie “cien czarny” czarny. Usuwamy zaznaczenie (Ctrl + Shift +A). W oknie warstw zaznaczamy warstwę “cień czarny” i wciskamy Filtry > Rozmycie > Rozmycie Gaussa... i ustawiamy takie parametry

(http://warp10.frih.net/img/tutoriale/10.jpg)

To samo powtarzamy z białą warstwą.

8. Można pobawić się rozmyciem Gaussa i zwiększyć promień rozmycia, co spowoduje, że kula będzie głębiej osadzona,ale nie należy przesadzać. Aby efekt był bardziej wyrazisty przemieszczamy delikatnie warstwy cieni:

Używając narzędzia Przesuwanie warstw i zaznaczeń (klawisz M), zaznaczamy warstwę “cien czarny” w oknie warstw. Klikamy na okno robocze i przesuwamy warstwę kursorami na klawiaturze lekko w lewo, a “cien bialy” do dołu i ewentualnie w prawo.

Gratulacje! Oto koniec tutoriala. W efekcie otrzymaliśmy coś takiego:

(http://warp10.frih.net/img/tutoriale/11.jpg)

Taką kulę można zastosować w każdym elemencie designu strony, jesteśmy ograniczeni jedynie wyobraźnią. Najczęściej widzimy je w nawigacji.

Przykład 1
(http://warp10.frih.net/img/tutoriale/green_guziki.jpg)

Przykład 2
(http://warp10.frih.net/img/tutoriale/back_guzik.jpg)

Proponuję także pobawić się kolorami.
Warstwa > Kolory
Filtry > Kolory > Koloryzacja
Filtry > Kolory > Filtry
ect.[


                                                                           Miłej zabawy!(http://warp10.frih.net/img/tutoriale/gimp.png)


Tytuł: Odp: Kula w tle - interface (łatwy)
Wiadomość wysłana przez: @Cakper on 09.12.2006, 20:53:26
Pozwoliłem sobie wrzucić tutorial na forumowy serwer:
http://download.gimpuj.info/kula_element_naw_Cattiusha.avi


Tytuł: Odp: Kula w tle - interface (łatwy)
Wiadomość wysłana przez: Cawz on 17.07.2007, 20:29:33
Bardzo fajny efekt... Fajny tut.
I mój efekt, to chyba najgorsze :)

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

Trochę mi nie wyszło, ale uczymy się na błędach :)


Tytuł: Odp: Kula w tle - interface (łatwy)
Wiadomość wysłana przez: AroGancjA Records on 17.07.2007, 21:21:23
Wiesz co mógłbyś tu poprawić? usunąć warstwę tło (tą niebieską) i było by git :P
Mi wyszło coś takiego :P ściągnąłem trochę :P

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


Tytuł: Odp: Kula w tle - interface (łatwy)
Wiadomość wysłana przez: Gajnek on 03.01.2008, 15:31:22
To Jest Moja Szósta Praca W Gimpie:

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

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


Tytuł: Odp: Kula w tle - interface (łatwy)
Wiadomość wysłana przez: edziuK on 20.01.2008, 16:33:14
fajne na pewno się przyda

(http://www.gimpuj.info/gallery/6760_20_01_08_3_31_59.png)


Tytuł: Odp: Kula w tle - interface (łatwy)
Wiadomość wysłana przez: Zenfur on 03.03.2008, 22:55:59
Ciekawy efekt i łatwy do uzyskania :D brawa dla autora, oto moje prace:
(http://www.gimpuj.info/gallery/thumb_8100_03_03_08_9_40_07.png)
(http://www.gimpuj.info/gallery/thumb_8100_03_03_08_8_28_35.png)
Widzę, że nikt jeszcze tego nie napisał, wiec ja spróbuje - oto jak umieścić w przycisku jakiś wzorek:
w punkcie 3. należy albo narysować to kółko za pomocą prowadnic dla późniejszych potrzeb, albo po prostu zapamiętać jakie wymiary ma kółko i skąd zaczeliśmy rysować. Z zachowaniem praw: TU (http://prawo-autorskie.edu.pl/programy-komputerowe.html)
Do końca wszystko jak jest w tutorialu (z tym że, proponuję dać jakis 2 x "krótszy" gradientdla lepszego efektu (tą kreskę jak chcemy wygradientować)), a potem klikamy na warstwę główną (kuli), a potem Kolory -> Zmiana koloru w alfę -> i tam ustawiamy kolor biały.
 Zrobi nam się piekne cieniowanie. Należy zrobić teraz nową warstwę, umieścić ją pomiędzy cieniem, a kulą i wstawić tam nasz wzorek (ja zrobiłem wzorek na szybko z pedzlem z liśćmi) i ustawić poprzednie zaznaczenie.
Potem Zaznaczenie -> Odwróć no i wciskamy Delete, by pozbyć się nieporządanego kawałka wzorka. Oczywiście można z tym kombinować. To tyle, mam nadzieję, że sie przydałem i nie przeszkodziłem dla niektórych tak oczywistymi rzeczami :D proszę się nie gniewać, jestem nowy i cieszę się z każdego efektu uzyskanego samodzielnie! (lub przeróbce albo zmodyfikowaniu)


Tytuł: Odp: Kula w tle - interface (łatwy)
Wiadomość wysłana przez: Lindse on 14.07.2008, 10:11:41
Fajny, łatwy tut.
Mój efekt:
(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Kula w tle - interface (łatwy)
Wiadomość wysłana przez: Yanke$ on 25.11.2008, 19:54:06
Fajne wygląda taka kula. Jak będę robił jakiś lay to zastosuję ten efekt ^^. A tut dokładnie wytłumaczony, czyli + dla autora.
Moja kula.
(http://www.gimpuj.info/gallery/17706_25_11_08_6_51_07.png)


Tytuł: Odp: Kula w tle - interface
Wiadomość wysłana przez: krzysiekslo on 22.06.2009, 12:18:20
Mi wyszło to:


Tytuł: Odp: Kula w tle - interface
Wiadomość wysłana przez: osquark on 15.08.2009, 23:37:12
moja kula

(http://www.gimpuj.info/replacement.png) (http://img207.imageshack.us/i/10926043.jpg/)

i zastosowanie w przycisku

(http://www.gimpuj.info/replacement.png) (http://img23.imageshack.us/i/image3bty.jpg/)  i wcisniety   (http://www.gimpuj.info/replacement.png) (http://img33.imageshack.us/i/image4ott.jpg/)


Tytuł: Odp: Kula w tle - interface
Wiadomość wysłana przez: Roark on 17.10.2009, 11:59:17
A oto moja kulka 8-)
(http://www.gimpuj.info/replacement.png)


Tytuł: Odp: Kula w tle - interface
Wiadomość wysłana przez: JacobDonut on 02.09.2010, 15:09:57
Moja praca:
(http://i51.tinypic.com/nzk7xx.png)


Tytuł: Odp: Kula w tle - interface
Wiadomość wysłana przez: The Legend on 12.09.2010, 18:42:17
Sreeny wygasły


Tytuł: Odp: Kula w tle - interface
Wiadomość wysłana przez: Ryychuu on 22.12.2011, 22:52:06
Ten tutek jest tak prosty, że udało mi się go zrobić bez screenów :D, niemniej dzięki ci CaTTiusha za tego tutka

(http://iv.pl/images/15456330898466163264.png) (http://iv.pl/)