Tytuł: Aero w GIMP-ie Wiadomość wysłana przez: CorteZ on 22.02.2008, 00:41:27 (http://www.gimpuj.info/gallery/6969_19_03_08_7_04_45.png) (http://www.gimpuj.info/) Opracowanie: CorteZ Poziom trudności: średni Oryginał: Aero w Photoshopie (http://osbeta.org/aero_w_photoshopie_sposob_num/art.13.pliki.htm) (http://www.gimpuj.info/gallery/6969_21_02_08_11_37_01.png) (http://www.gimpuj.info/) Nudząc się zajrzałem kilka dni temu na forum. W dziale "Prośby o tutoriale" znalazłem ciekawy temat (http://www.gimpuj.info/prosby-o-tutoriale/aero-z-photoshopa-na-gimpa-t2115.0.html) założony przez Kapitana_hak1995. Dzięki pomocy Johny'ego, udało mi się stworzyć "efekt aero". Efekt taki doskonale znany jest już od bardzo dawna użytkownikom MacOS X oraz Linuksa. Pierwszym systemem jaki wprowadził taki efekt był MacOS X firmy Apple. W zakresie Linuksa Composite pojawiło sie w 2004 roku i pozwalało na podobne efekty okienek. Potem pojawiły się: XGL (2006) i AIGLX, gdzie działa to już stabilnie i bardzo przyjemnie. Odsłona w Windowsie z podobnymi efektami ukazała się dopiero w Windowsie Vista. Podziękowania dla: Johny (http://www.gimpuj.info/profiles/johny-u847.html) Calii (http://www.gimpuj.info/profiles/calii-u2047.html) Tutorial napisany w wersji GIMP 2.4. W innych wersjach nazwy narzędzi i pojęć mogą się różnić. [lp] Zaczynamy [lp] 1. Otwieramy obrazek (http://www.gimpuj.info/index.php?action=dlattach;topic=13167.0;attach=4678;image) w GIMP-ie [Ctrl+O]. (http://www.gimpuj.info/gallery/6969_18_02_08_11_05_52.jpg) (http://www.gimpuj.info/) [lp] 2. Tworzymy nową warstwę [Ctrl+Shift+N], nazywamy ją Inner Glow i ustawiamy ją nad warstwą Tło (w menu warstw [Ctrl+L]). (http://www.gimpuj.info/gallery/6969_18_02_08_11_44_19.jpg) (http://www.gimpuj.info/) [lp] 3. Tworzymy zaznaczenie prostokątne [R] <zaznaczenie-prostokatne> o wielkości naszego przyszłego okna. (http://www.gimpuj.info/gallery/6969_18_02_08_11_47_07.jpg) (http://www.gimpuj.info/) [lp] 4. Wybieramy Zaznaczenie -> Zaokrąglenie. Promień ustawiamy na 5%. (http://www.gimpuj.info/gallery/6969_18_02_08_11_51_03.jpg) (http://www.gimpuj.info/) [lp] 5. Wypełniamy zaznaczenie kolorem czarnym (Wypełnienie kubełkiem [Shift+B] <wypelnienie>) i wybieramy Filtry -> Rozmycie -> Rozmycie Gaussa.... Wartość w obu polach ustawiamy na 500 px. (http://www.gimpuj.info/gallery/6969_18_02_08_11_54_57.jpg) (http://www.gimpuj.info/) [lp] 6. Zmieniamy krycie warstwy Inner Glow na 40. (http://www.gimpuj.info/gallery/6969_18_02_08_11_57_06.jpg) (http://www.gimpuj.info/) [lp] 7. Wybieramy Filtry -> Światło i Cień -> Rzucanie Cienia. Ustawiamy poniższe wartości: (http://www.gimpuj.info/gallery/6969_18_02_08_12_23_10.jpg) (http://www.gimpuj.info/) [lp] 8. Tworzymy nową warstwę [Ctrl+Shift+N] i nazywamy ją Stroke. Umieszczamy ją nad resztą warstw. (http://www.gimpuj.info/gallery/6969_18_02_08_12_30_33.jpg) (http://www.gimpuj.info/) [lp] 9. Wypełniamy warstwę Stroke za pomocą narzędzia Kubełek [Shift+B] kolorem białym (FFFFFF). Zmniejszamy zaznaczenie (Zaznaczenie -> Zmniejsz...) o 1 px i wciskamy [Delete]. Powiększamy zaznaczenie (Zaznaczenie -> Powiększ...) o 1 px. (http://www.gimpuj.info/gallery/6969_18_02_08_11_57_06.jpg) (http://www.gimpuj.info/) [lp] 10. Duplikujemy <duplikowanie-warstwy> warstwę Stroke. Na najwyższej warstwie (kopia: Stroke) wybieramy Połącz w dół. Następnie tryb warstwy Stroke zmieniamy na Pokrywanie. Zauważ, że na poniższym screenie nie ma zaznaczenia. Ty jednak nie kasuj go. Ja jedynie je wyłączyłem, by pokazać efekt. (http://www.gimpuj.info/gallery/6969_18_02_08_12_51_42.jpg) (http://www.gimpuj.info/) [lp] 11. Przejdź na warstwę Tło. (http://www.gimpuj.info/gallery/6969_18_02_08_12_55_54.jpg) (http://www.gimpuj.info/) [lp] 12. Wybierz Filtry -> Rozmycie -> Rozmycie Gaussa... i obie wartości ustaw na 35. (http://www.gimpuj.info/gallery/6969_18_02_08_1_00_34.jpg) (http://www.gimpuj.info/) [lp] 13. Stwórz nową warstwę [Ctrl+Shift+N] i nazwij ją Obramowanie. Umieść ją nad wszystkimi innymi warstwami. (http://www.gimpuj.info/gallery/6969_18_02_08_2_25_08.jpg) (http://www.gimpuj.info/) [lp] 14. Zmniejsz zaznaczenie o 8 px. Na górnej krawędzi zmniejsz zaznaczenie o 30 px. Pomoże wam ten szkic: (http://www.gimpuj.info/gallery/6969_18_02_08_2_34_20.png) (http://www.gimpuj.info/) [lp] 15. Wypełnij zaznaczenie [Shift+B] kolorem czarnym. Zmniejsz zaznaczenie o 1 px i wyczyść zaznaczenie klawiszem [Delete]. Powiększ zaznaczenie o 1 px. Zauważ, że na powyższym screenie nie ma zaznaczenia. Ty jednak nie kasuj go. Ja jedynie je wyłączyłem, by pokazać wam efekt. (http://www.gimpuj.info/gallery/6969_18_02_08_2_38_39.jpg) (http://www.gimpuj.info/) [lp] 16. Przybliż obraz do 100%. [lp] 17. Otwórz swoją przeglądarkę internetową. W naszym przypadku będzie to Mozilla Firefox. [lp] 18. Zminimalizuj swoje okno i ustaw jego wielkość tak, by całkowicie zasłaniało nasze "wirtualne okienko w GIMPie". (http://www.gimpuj.info/gallery/6969_18_02_08_2_46_28.jpg) (http://www.gimpuj.info/) [lp] 19. Wciśnij klawisz [Print Screen]. [lp] 20. Wklej nasz zrzut ekranu [Ctrl+V]. Z jego warstwy (Wklejona warstwa) stwórz warstwę o nazwie Screen. (http://www.gimpuj.info/gallery/6969_20_02_08_1_31_35.jpg) (http://www.gimpuj.info/) [lp] 21. Przesuń warstwę Obramowanie na samą górę. (http://www.gimpuj.info/gallery/6969_20_02_08_1_34_16.jpg) (http://www.gimpuj.info/) [lp] 22. Przesuń naszego screena tak, by zawartość przeglądarki była w obramowaniu. Wybierz Warstwa -> Dopasuj wymiary warstwy do obrazu. (http://www.gimpuj.info/gallery/6969_20_02_08_1_42_33.jpg) (http://www.gimpuj.info/) [lp] 23. Wybierz jako aktywną warstwę Obramowanie. [lp] 24. Za pomocą narzędzia Zaznaczanie rozmyte <rozdzka> {U} zaznacz obszar w środku obramowania. (http://www.gimpuj.info/gallery/6969_20_02_08_1_46_51.jpg) (http://www.gimpuj.info/) [lp] 25. Odwróć zaznaczenie. W tym celu wybierz Zaznaczenie -> Odwróć lub wciśnij [Ctrl+I]. [lp] 26. Przełącz aktywną warstwę na Screen. Wyczyść zaznaczenie (Edycja -> Wyczyść lub [Delete]). (http://www.gimpuj.info/gallery/6969_20_02_08_1_53_17.jpg) (http://www.gimpuj.info/) Jeśli z jakichś powodów nie jesteś w stanie wykonać czynności z warstwą screen, wklej: ten obrazek (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=9377) [lp] 27. Tworzymy nową warstwę i nazywamy ją Przyciski. Umieszczamy ją na samej górze. (http://www.gimpuj.info/gallery/6969_21_02_08_10_26_01.jpg) (http://www.gimpuj.info/) [lp] 28. Wklejamy [Ctrl+V] poniższy render i zakotwiczamy go [Ctrl+H]. (http://www.gimpuj.info/gallery/6969_21_02_08_10_27_48.png) (http://www.gimpuj.info/) [lp] 29. Umieszczamy przyciski za pomocą narzędzia Przesunięcie [M] <przesuwanie> w ten sposób: (http://www.gimpuj.info/gallery/6969_21_02_08_10_31_05.jpg) (http://www.gimpuj.info/) [lp] 30. Przybliżamy sobie obraz do 400 %. (http://www.gimpuj.info/gallery/6969_21_02_08_10_34_18.jpg) (http://www.gimpuj.info/) [lp] 31. Zaznaczamy "ramkę" przycisków. (http://www.gimpuj.info/gallery/6969_21_02_08_10_37_59.jpg) (http://www.gimpuj.info/) [lp] 32. Wycinamy ją i wklejamy. Przesuwamy (Przesunięcie [M]) nowo wklejoną ramkę w miejsce poprzedniej. Nie zakotwiczamy. (http://www.gimpuj.info/gallery/6969_21_02_08_10_40_38.jpg) (http://www.gimpuj.info/) [lp] 33. Wchodzimy w menu warstw [Ctrl+L]. Widzimy tam warstwę Oderwane Zaznaczenie (Wklejona Warstwa). Zmieniamy jej nazwę na Przyciski2. (http://www.gimpuj.info/gallery/6969_21_02_08_10_48_43.gif) (http://www.gimpuj.info/) [lp] 34. Zmieniamy tryb warstwy Przyciski2 na Pokrywanie. (http://www.gimpuj.info/gallery/6969_21_02_08_10_51_56.jpg) (http://www.gimpuj.info/) [lp] 35. Oddalamy obraz do 100% (u nas na screenach 67%). [lp] 36. Narzędziem tekstowym [T] <tekst> piszemy tekst, który wcześniej wyświetlał nam się w okienku. W naszym przypadku będzie to: Cytuj Polskie Forum Użytkowników GIMPa - Indeks - G... .Ustawienia tekstu to: (http://www.gimpuj.info/gallery/6969_21_02_08_11_01_19.jpg) (http://www.gimpuj.info/) (http://www.gimpuj.info/gallery/6969_21_02_08_11_03_04.jpg) (http://www.gimpuj.info/) [lp] 37. Duplikujemy [Ctrl+D] warstwę z napisem. Na dolnej warstwie zmieniamy kolor czcionki na biel (FFFFFF). (http://www.gimpuj.info/gallery/6969_21_02_08_11_05_37.jpg) (http://www.gimpuj.info/) [lp] 38. Na dolnej warstwie wybieramy Warstwa -> Dopasuj wymiary warstwy do obrazu. Następnie wybieramy Filtry -> Rozmycie -> Rozmycie Gaussa... o wartości 10. (http://www.gimpuj.info/gallery/6969_21_02_08_11_09_35.jpg) (http://www.gimpuj.info/) [lp] 39. Teraz musimy wkleić [Ctrl+V] Logo Firefoksa (http://lateralthinking.files.wordpress.com/2006/11/firefox_logo.jpg). [lp] 40. Po wklejeniu logo, zmień nazwę jego warstwy na Firefox. [lp] 41. Przesuń logo tam gdzie zazwyczaj one są (lewy górny róg wirtualnego okienka). (http://www.gimpuj.info/gallery/6969_21_02_08_11_16_10.jpg) (http://www.gimpuj.info/) [lp] 42. Wybierz Warstwa -> Skaluj warstwę i ustaw 20 px. (http://www.gimpuj.info/gallery/6969_21_02_08_11_19_30.jpg) (http://www.gimpuj.info/) [lp] 43. Utwórz nową warstwę [Ctrl+Shift+N] i nazwij ją Paski. Umieść ją pomiędzy warstwą Screen a warstwą Stroke. (http://www.gimpuj.info/gallery/6969_21_02_08_11_23_02.jpg) (http://www.gimpuj.info/) [lp] 44. Za pomocą narzędzia Ścieżki <sciezki> {B} utwórz "paski". (http://www.gimpuj.info/gallery/6969_21_02_08_11_26_48.jpg) (http://www.gimpuj.info/) [lp] 45. Z menu ścieżek wybieramy Selection from Path. Wypełniamy zaznaczenie kolorem białym. Wybieramy Zaznaczenie -> Nic [Ctrl+Shift+A]. (http://www.gimpuj.info/gallery/6969_21_02_08_11_30_07.jpg) (http://www.gimpuj.info/) [lp] 46. Zmieniamy aktywną warstwę na Inner Glow. Wybieramy narzędzie Zaznaczanie rozmyte i klikamy w lewym górnym rogu. Przełączamy aktywną warstwę na Paski i wciskamy [Delete]. Wybieramy Zaznaczenie -> Nic [Ctrl+Shift+A]. (http://www.gimpuj.info/gallery/6969_21_02_08_11_34_18.jpg) (http://www.gimpuj.info/) [lp] 47. Zmieniamy tryb warstwy na Pokrywanie, a krycie na 30%. (http://www.gimpuj.info/gallery/6969_21_02_08_11_37_01.png) (http://www.gimpuj.info/) [lp] Koniec Miłego GIMPowania. :) Tytuł: Odp: Aero w GIMPie Wiadomość wysłana przez: j1rka on 05.03.2008, 17:28:57 Fajny tutek!
moje prace: (http://i246.photobucket.com/albums/gg82/j1rka/aeromini2.png?t=1204730700) 1:1 http://i246.photobucket.com/albums/gg82/j1rka/Aerovgimpu2.png?t=1204730780 Tytuł: Odp: Aero w GIMPie Wiadomość wysłana przez: Tarzan on 05.04.2008, 09:43:41 mi tak wyszło jak w załączniku.
tutek jest super. Tytuł: Odp: Aero w GIMPie Wiadomość wysłana przez: qxz654 on 08.04.2008, 19:28:09 moja pracka
http://www.gimpuj.info/gallery/8467_08_04_08_7_24_23.jpg miałem małe problemy ze wstawieniem loga firefoxa i czcionką i nic nie wymyślłem EDit http://www.gimpuj.info/index.php?action=gallery;sa=view;id=13501 EDIT:http://www.gimpuj.info/index.php?action=gallery;sa=view;id=13649 Tytuł: Odp: Aero w GIMPie Wiadomość wysłana przez: Gawron on 11.06.2008, 23:16:38 a mi takie cos wyszlo:
(http://i30.tinypic.com/141mueu.jpg) A TUTEK Z******Y... :d POZDRO Tytuł: Odp: Aero w GIMPie Wiadomość wysłana przez: Severius on 18.06.2008, 13:36:39 Ładny poradnik :)
Ale mi coś nie wyszło xD (http://www.gimpuj.info/replacement.png) Tytuł: Odp: Aero w GIMPie Wiadomość wysłana przez: Logane on 05.08.2008, 23:28:27 Oto mój wyrób visto podobny z dodatkiem xp-ka ;-)
(http://images33.fotosik.pl/344/9791bf9c7c83be7f.jpg) Tytuł: Odp: Aero w GIMPie Wiadomość wysłana przez: sztyvny on 09.08.2008, 20:15:34 Super:) Mimo że jestem początkujący to podołałem;) oto efekt:
(http://img295.imageshack.us/img295/9689/aeropi3.png) (pożyczyłem obrazka bo nie chciało mi się szukać innego) I mam taki mały problem: po skopiowaniu loga mf miałem tło białe... (wyczyściłem gumką) Jak zrobić żeby tak się nie robiło? (a i to samo było z przyciskami) Tytuł: Odp: Aero w GIMPie Wiadomość wysłana przez: Arrow on 14.08.2008, 21:34:28 Mój efekt:
(http://www.gimpuj.info/gallery/13048_14_08_08_9_32_49.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=21269) Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: elita on 18.11.2008, 20:00:54 yy na poczatku nie wiedziaam po to wog9ole ten efekt....teraz zdaje mi sie rozumiec ze po to zeby obraz "udawal" viste....
no ja mam viste wiec.. Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: CorteZ on 18.11.2008, 21:33:50 no ja mam viste wiec.. o Kurde! Miszczu ucz nas, jak być takimi fajnymi ludźmi jak ty, miszczu! Masz Viste? Ooo! A oryginał, czy pirata? A to podobno szajz, to po co kupowałeś? btw. Ja też mam Viste... Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Nose4s on 18.11.2008, 22:58:13 @up raz, elita to kobieta geniuszu, dwa nie offtopuj co prawda vista to szajs jest(a dokładnie można go nazwać wersją beta najnowszego windowsa[na razie znanego jako 7 ;)]) vista jest jak ME przed wyjściem XP :P ale dobra nie offtopujmy już...
@topic efekt tuta bardzo ładny ,nie wiem czy się za to zabrać bo na razie nie potrzebuję znać takiego efektu(ale i tak pewnie bym go już był w stanie osiągnąć bez pomocy tuta) Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Maly94 on 19.11.2008, 19:45:36 Tutek świetny moja praca w załączniku ^^
@3up może dał taki efekt bo nie każdy ma viste a przy tym tutku można zrobić inne fajne obramowania które visty nie przypominają Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Pitus on 30.11.2008, 17:43:47 Mi wyszło tak chciałem dać coś okrągłego ale nie wyszło ;/
http://images34.fotosik.pl/410/ad223e49cb1bbefe.jpg <lol> Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: EmotiCon on 14.12.2008, 16:53:58 a to jest moje:
Połączenie Visty, Leoparda, Iphona i czcionki dodanej odemnie;P :P Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: wprostnielegalna on 02.01.2009, 17:18:16 a ja efekt zastosowałam na prezentacji którą robiłam do klubu na epulsie. :)
http://zapodaj.net/3151164.jpg.html Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: ptama on 02.01.2009, 23:58:37 (http://www.gimpuj.info/gallery/19752_02_01_09_10_54_41.png)
Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Agent_X50 on 30.03.2009, 17:39:51 Moja pracka :D
(http://www.gimpuj.info/gallery/23523_30_03_09_5_39_03.bmp) (http://www.gimpuj.info/) Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: wymiaatcz01 on 30.06.2009, 22:07:18 Super tutek. Poziom łatwości wg powinien być łatwy.
Mój efekt: (http://www.gimpuj.info/gallery/27768_30_06_09_9_05_39.png) Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Hinaya on 27.09.2009, 09:58:36 heja jak zmniejszyć górną krawędź o 30 px? (punkt 14)
Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: kingdida on 28.12.2009, 13:12:03 heja jak zmniejszyć górną krawędź o 30 px? (punkt 14) Też mam ten problem. Może ktoś to wyjaśnić? Bardzo bym prosił.Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Typhon on 22.01.2010, 19:09:43 heja jak zmniejszyć górną krawędź o 30 px? (punkt 14) Też mam ten problem. Może ktoś to wyjaśnić? Bardzo bym prosił.Jeżeli masz zaznaczony obiekt, klikasz prawym, wybierasz ZAZNACZENIE -> Zmniejsz -> o 30 px. Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: pchla112 on 04.02.2010, 03:28:53 hehe fajny tutek ja ma coś takiego
(http://img519.imageshack.us/img519/4716/animetin.gif) Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: KubekX111 on 04.02.2010, 14:33:09 heja jak zmniejszyć górną krawędź o 30 px? (punkt 14) Też mam ten problem. Może ktoś to wyjaśnić? Bardzo bym prosił.Jeżeli masz zaznaczony obiekt, klikasz prawym, wybierasz ZAZNACZENIE -> Zmniejsz -> o 30 px. ale wtedy wszystko się zmniejszy a nie tylko górna krawędź Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: thedariuus on 06.03.2010, 13:14:38 Mi tez fajnie wyszlo
http://www.gimpuj.info/replacement.png Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Typhon on 20.03.2010, 12:56:48 heja jak zmniejszyć górną krawędź o 30 px? (punkt 14) Też mam ten problem. Może ktoś to wyjaśnić? Bardzo bym prosił.Jeżeli masz zaznaczony obiekt, klikasz prawym, wybierasz ZAZNACZENIE -> Zmniejsz -> o 30 px. ale wtedy wszystko się zmniejszy a nie tylko górna krawędź Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: KubekX111 on 20.03.2010, 22:33:40 fajny tut, fajny efekt. Moja praca:
http://ifotos.pl/img/Mozilla-F_nrnhxh.jpg Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Scot on 31.08.2010, 18:41:32 Cytuj 14. Zmniejsz zaznaczenie o 8 px. Na górnej krawędzi zmniejsz zaznaczenie o 30 px. Pomoże wam ten szkic: Ktoś jeszcze powiedział żeby zrobić nowe 30 pixeli mniejsze.. Ale jak normalnie zmniejszyć?Ja chce normalnie robić bo być moż jak będę robił inne prace to nie będzie tak można.. Z góry dzięki Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Scot on 31.08.2010, 18:44:42 A już chyba wiem jak zrobić ręcznie.Trzeba chwycić za górną krawędź i zmniejszać ręcznie patrząc na ten miernik pixeli po lewej :p
Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: wjatek on 19.12.2010, 15:08:44 Troszkę podobne do tuta ale pomysł mój :P
[lp] załącznik :D Tytuł: Odp: Aero w GIMP-ie Wiadomość wysłana przez: Tomcio2232 on 15.12.2011, 20:45:57 Fajne!!
Oto moje ;] (http://iv.pl/images/38631920870645423633_thumb.jpg) (http://iv.pl/viewer.php?file=38631920870645423633.jpg) To miniatura. Kliknijcie. Dodałem tuningi w postaci ikon i paska zadań. |