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/) |