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]
DrukujPobierz PDF
Autor Wątek: Tutorial, Ikona budzika  (Przeczytany 7208 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
Sebastian
√ ι ק

Reputacja: 36 Offline Offline

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



Zobacz profil
« : 04.05.2008, 16:28:39 »

IKONA BUDZIKA
Tutorial

Oryginał: Oryginalny tutorial
Opracowanie: brak danych
Poziom trudności: średni





Witam, pokaże wam w tym tutorialu jak wykonać taki budzik. Prezentuje się on dość sympatycznie i nadaje się choćby do zastosowania na stronach www. Wykonanie go nie jest jakoś specjalnie trudne, wymaga od nas jednak odrobinę zmysłu estetycznego. Warto napomnieć tez że bardzo łatwo robić nowe wersje kolorystyczne. Wymagana jest znajomość ścieżek.

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



Lime Point Zaczynamy

Lime Point 1. Jeśli chodzi o wymiary obrazu to pracowałem na obszarze 100 pikseli szerokości i 150 wysokości. Zrób nową warstwę o nazwie "obręcz", zaczynamy od narysowania koła (narzędziem zaznaczenia eliptycznego Zaznaczenie eliptyczne) o wymiarach 90 na 90 px. Wypełniamy je bielą  Wypełnienie kubełkiem.


Tak wyglądają prowadnice:


Lime Point 2. Po stworzeniu warstwy "cień wewn. obręczy" Kliknij w oknie warstw [Ctrl+L] prawym przyciskiem myszy i wybierz "Kanał alfa na zaznaczenie". Następnie je odwróć [Ctrl+i] i wypełnij czernią Wypełnienie kubełkiem.   


Lime Point 3. Teraz czas na rozmycie, zlikwiduj zaznaczenie [Ctrl+Shift+A], potem wybieramy Filtry>Rozmywanie>Rozmycie.   



Lime Point 4. Ponownie weź kanał alfa z warstwy "obręcz" i znów je odwróć [Ctrl+i]. Przjdź do warstwy "cień wewn. obręczy" i wciśnij [Delete]. Spowoduje to usunięcie czerni poza kołem. Zmniejsz krycie tej warstwy ("cień wewn. obręczy") do 40%. Tę operacje nazywam "Dodawaniem cienia wewnętrznego". Będziemy stosować ją jeszcze kilka razy.


Lime Point 5. Zduplikuj warstwę "obręcz" i wybierz Kolory>Inwersja. Nadaj jej teraz czarną maskę warstwy (PPM i "dodaj maskę warstwy"), wybierz teraz narzędzie gradient Gradient i pociągnij nim na masce od dołu do góry koła. Po zmniejszeniu krycia powinieneś uzyskać coś takiego:


Lime Point 6. Stwórz warstwę o nazwie "tarcza". narysuj na niej koło Zaznaczenie eliptyczne mniejsze od obręczy o 11px . Warto pomóc sobie prowadnicami. Wypełnij je tym kolorem #87a400. Możesz wybrać inny (patrz, koniec tutoriala).


Lime Point 7. Mając to samo zaznaczenie co przed chwilą zrób nową warstwę, a następnie wybierz gradient Gradient z trybem liniowym. Pociągnij by uzyskać coś takiego jak na rysunku i rozmyj go jeszcze przez Filtry>Rozmycie>Rozmywanie.


Lime Point 8. Przenieś tę warstwę pod "tarczę", uzyskujemy tym samym taki efekt:


Lime Point 9. Zrobimy cień wewnętrzny dla warstwy "tarcza", pobieramy więc zaznaczenie przez "kanał alfa na zaznaczanie". Potem je odwracamy i wypełniamy czernią. Pamiętajmy by usunąć zaznaczenie [Ctrl+Shift+A] i teraz rozmywamy, Filtry>Rozmycie>Rozmycie Gaussa.


Lime Point 10. Usuwamy czerń dokoła tak jak to robiliśmy w punkcie 4. Dodajemy maskę warstwy i narzędziem gradient  Gradient z trybem liniowym (i kolorami czarny oraz biały) przeciągamy od jednego do drugiego boku by uzyskać taki efekt:


Lime Point 11. Dodaj nową warstwę którą nazwiemy "światło tarczy". Gradientem sferycznym ustawionym na biel i pozbawionym drugiego koloru (4 na liście wyboru gradientów). Od środka tarczy do okolic jego krawędzi (nawet nie do samej tylko trochę przed krawędzią) ciągniemy gradient.   


Lime Point 12. duplikujemy 2 razy tę warstwę i ustawiamy ich krycie na miękkie-światło krycie jednej z nich zmniejszamy do 50%.


Lime Point 13. Teraz wykonaj duplikat warstwy z cieniem wewnętrznym tarczy i usuń jego maskę warstwy by uzyskać coś takiego:
 

Lime Point 14. Stwórz nową warstwę o nazwie "owal", powinna znajdować się na samej górze. Potem narysuj taki oto owal zaznaczaniem eliptycznym:


Lime Point 15. Dodaj do niego maskę i gradientem liniowym postaraj się uzyskać taki efekt. Przeźroczystość powinna być mniejsza na górze a większa na dole, jednak nie zalecam by dolna krawędź była całkowicie niewidoczna. Według mnie powinna być ledwo widoczna ale widoczna. Zobacz obrazek:


Lime Point 16. Jeszcze raz duplikujemy warstwę z cieniem. 


Lime Point 17. Te elementy wykonamy na oddzielnym warstwach ("p1" i "p2") zaznaczeniem prostokątnym (zaokrąglenie na 5). Dopasuj oba prostokąty jak widzisz to poniżej narzędziem obracania Narzędzie do obracania oraz przesuwania Przesuwanie. Ich kolor powinien być taki jaki wybrałeś w punkcie 6.   


Lime Point 18. Od razu dobrze jest zrobić nóżki. Wykonane także na 2 warstwach ("n1" i "n2"). Wykonać należy je ścieżkami Ścieżki, wystarczą do tego dwie linie które musimy tylko odpowiednio powyginać. Naprawdę nie jest to jakość specjalnie trudne, ten rysunek ci pomoże (oczywiście kolor taki jaki ma tarcza).   


Lime Point 19. Dla każdego prostokąta zrobimy cienie. Pobieramy zaznaczenie z pierwszego i wypełniamy czarnym gradientem przechodzącym w przeźroczystość (pamiętamy, 4 na liście wyboru gradientów). Sposób w jaki należy to wykonać przedstawia rysunek.


Lime Point 20. Zmniejszamy krycie dla obu warstw z cieniem do 20%.


Lime Point 21. Robimy kolejne dwie nowe warstwy. Musimy znowu też pobrać zaznaczenie z tej samej warstwy co wcześniej (punkt 19). Krycie obu ustaw od razu na miękkie-światło.  Następnie narzędziem gradient z trybem dwuliniowym staramy się uzyskać coś takiego jak widać poniżej. Jak widać należy zacząć gdzieś w okolicach 1/3 prostokąta.



Lime Point 22. Ten punkt będzie podobny do poprzedniego. Ustaw tryb gradientu na liniowy a gdy uzyskasz już efekt jaki chciałeś zmniejsz zaznaczenie o 1px (Zaznaczenie>Zmniejsz). Zrób tak jak widzisz na zrzucie, jasne obszary nie powinny się pokrywać z wcześniejszymi. Po wszystkim zmień krycie na miękkie światło. 



Lime Point 23. Zrobimy wewnętrzny cień dla prostokątów ale trochę inny. Kiedy pobierzemy zaznaczenie musimy zmniejszyć je o 1px, dopiero potem odwracamy i wykonujemy całą operacje. Stosujemy zwyczajne rozmycie (Filtry>Rozmycie>Rozmywanie). Kiedy wycinamy czerń należy pamiętać by znowu zmniejszyć zaznaczenie. Cień nie może zakrywać tego co robiliśmy wcześniej (w punkcie nr. 22).kiedy już mamy cień pędzlem typu "Circle Fuzzy" usuwamy cień by uzyskać to co widać na 2 obrazku. Można powiedzieć że należy usunąć cień gdzieś do połowy. Trzeba dodać też lekki cień dla warstw z prostokątami, Filtry>Światło i cień>Rzucanie cienia. Przesunięcia ustaw na 0 a poziom rozmycia na 3.   
   


Lime Point 24. Zajmijmy się nóżkami. Wystarczy zrobić 2 nowe warstwy, pobrać zaznaczenie z nóżki i pociągnąć gradientem Gradient, o tak:


Lime Point 24. Zduplikuj te warstwy po czym krycie każdej zduplikowanej zmniejsz do 40%. Krycie wszystkich zmień na miękkie światło.


Lime Point 25. Dodaj cień wewnętrzny (zastosuj zwykłe "Rozmywanie") a jego krycie ustaw na 70%.


Lime Point 26. Wracamy do tarczy, duplikujemy "tarcze" i pobieramy zaznaczenie. Następnie narzędziem przesuwania z ustawioną opcją "Przesunięcie" na zaznaczenie przesuwamy je w prawo i lewo. następnie wciskamy [Delete]. Usuwamy zaznaczenie i leciutko rozmywamy
rozmyciem Gaussa na 3.   



Lime Point 27. Na nowej warstwie, narzędziem tworzenia ścieżek Ścieżki robimy strzałki, a to centralne koło zaznaczeniem owalnym.


Lime Point 28. Teraz trzeba dodać dwa cienie. Wybieramy Filtry>Światło i cień>Rzucanie cienia po kolei stosując takie ustawienia:

  • Przesunięcie X: 0
  • Przesunięcie Y: 0
  • Promień rozmycia: 3
  • Krycie: 100
  • Dopuszczalne powiększenie: odznaczone

  • Przesunięcie X: 1
  • Przesunięcie Y: 1
  • Promień rozmycia: 3
  • Krycie: 60
  • Dopuszczalne powiększenie: odznaczone



Lime Point 29. Dodaj 3 kropki po każdej stronie. Dodaj do nich też cień.

  • Przesunięcie X: 0
  • Przesunięcie Y: 0
  • Promień rozmycia: 3
  • Krycie: 100
  • Dopuszczalne powiększenie: odznaczone


Lime Point 29. Narysuj teraz zrób owal Zaznaczenie eliptyczne pod zegarkiem i rozmyj go "rozmyciem gaussa" na 10. Potem zmniejsz jego krycie do 25%.



Lime Point 30. Możemy dodać jeszcze odblask, wystarczy wcisnąć [Ctrl+D] i połączyć widoczne warstwy (tło i cień muszą być niewidoczne). Potem chyba wiadomo co trzeba zrobić, wkleić odwrócić no i dodać maskę z gradientem. Warto narysować też ścieżkami odbijające się światło (wystarczą dwie linie).



Lime Point Koniec


#a07543
#d54600
#6b6b6b
#0072ff

« Ostatnia zmiana: 10.05.2008, 11:33:15 wysłane przez Sebastian » Zapisane
Grolak
√ ι ק

Reputacja: 20 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
JID: grolak@jabber.org
Licencja: CC-NC-BY-SA
Wiadomości: 1 126
Galeria Użytkownika


Kreator mody


Zobacz profil
« Odpowiedz #1 : 04.05.2008, 17:09:21 »

Fajna ikona, tylko w efekcie tym co podałeś nie podoba mi się że błysk nachodzi na tą kropkę a jest biały. A tak to fajne.
Zapisane

afk
BartisKing
Gość
« Odpowiedz #2 : 04.05.2008, 17:34:46 »

Łoooo!!! Ale wypas! Pisz jak najszybciej!
Zapisane
INSEKT
Emeryt

Reputacja: 27 Offline Offline

Płeć: Mężczyzna
GIMP: 2.8
JID: INSEKT@jabster.pl
Licencja: Copyright
Wiadomości: 2 723
Galeria Użytkownika


Ja tu tylko sprzątam


Zobacz profil WWW
« Odpowiedz #3 : 04.05.2008, 19:05:42 »

Wynik fajny, jak dla mnie może powstać taki tutorial.
Ale z tytułem "clock tutorial gimp 2.4" go nie przepuszczę Język
Zapisane

Nie odpowiadam na wiadomości "(Bez tematu)".
Kilka rad, czyli how-to "jak nie wkurzyć Insekta": 1, 2, 3

Twój tutorial po to tyle czasu gnije w "Gotowych", żebyś nie musiał go więcej poprawiać, gdy zostanie przeniesiony do indeksu! Każda Twoja edycja sprawi, że tutorial zniknie i nie będzie widoczny, dopóki ja go nie przywrócę.
Sebastian
√ ι ק

Reputacja: 36 Offline Offline

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



Zobacz profil
« Odpowiedz #4 : 04.05.2008, 19:17:21 »

Ale z tytułem "clock tutorial gimp 2.4" go nie przepuszczę Język

Tytuł będzie brzmiał: "Ikona budzika". Tak "dla jaj" jest ten obecny. 

Cytuj
ylko w efekcie tym co podałeś nie podoba mi się że błysk nachodzi na tą kropkę a jest biały

W orginalnym obrazku tak było i zastanawiałem się czy to ruszać. Chyba jednak nieco obrócę w prawo.
Zapisane
Terrqge
Emeryt

Reputacja: 17 Offline Offline

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



Zobacz profil
« Odpowiedz #5 : 08.11.2009, 19:02:57 »

Przepraszam że odkopuję, ale czy ten temat będzie kiedyś w gotowych tutorialach?


Ok, Wykombinowałem takie coś, wiem że zwaliłem górę, ale mi się nie chce poprawiać, tutorial mam masę błędów, ciekawe czy kiedykolwiek ukaże się w indeksie, a to 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 #6 : 08.11.2009, 21:31:57 »

Cytuj
Przepraszam że odkopuję, ale czy ten temat będzie kiedyś w gotowych tutorialach?
Sorry, ale na 99% nie.
Tak przy okazji to z perspektywy czasu nie podoba mi się ten budzik, tak samo jak chyba wszystkie moje tutoriale. 
Zapisane
Terrqge
Emeryt

Reputacja: 17 Offline Offline

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



Zobacz profil
« Odpowiedz #7 : 08.11.2009, 21:37:02 »

Nie przesadzaj, niektóre tutki są na prawdę dobre... Uśmiech.
Zapisane

Strony: [1]
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aHyde zoneHyde parkTestWątek: Tutorial, Ikona budzika
Skocz do: