Tytuł: Okienko na potrzeby WWW Wiadomość wysłana przez: Pilej on 21.07.2009, 11:24:43 (http://www.gimpuj.info/gallery/4453_19_08_09_6_11_30.png) Opracowanie: PIL3J Poziom trudności: średni (http://www.gimpuj.info/gallery/4453_02_09_09_8_03_24.png) Przedstawiam Wam tutorial, który poprowadzi Was przez proces tworzenia tego oto okienka przydatnego do wyświetlania informacji na stronie WWW. :) Postaram się wytłumaczyć, jak korzystać z gradientów, uzyskać efekty wypukłości i poprawnie tworzyć światło. Na początku poradnik będzie bardzo monotonny, więc się nie przejmujcie. ;) Jeśli będą jakiekolwiek problemy z warstwami, to na samym końcu zamieściłem zrzut ekranu. Będą tam wszystkie warstwy, więc jak którejś nie będziesz miał(a), to zapewne dotyczy ona następnych punktów. Ważna jest kolejność. Tutorial napisany w wersji GIMP 2.6.6. W innych wersjach nazwy narzędzi i pojęć mogą się różnić. [lp] Zaczynamy [lp] 1. Tworzymy nowy obraz o wymiarach 800x600px i wypełniamy tło ciemnoszarym kolorem, u mnie #2c2c2c. Następnie ustawiamy prowadnice w jednostkach pikselowych: - pionowe na 232 i 568 - poziome na 182 i 371 [lp] 2. Tworzymy nową przezroczystą warstwę, o nazwie jasny_szary. Na niej, przy użyciu zaznaczenia prostokątnego<zaznaczenie-prostokatne>, zaznaczamy prostokąt o wierzchołkach w punktach przecięcia prowadnic. Następnie: Zaznaczenie -> Zaokrąglenie o wartości 6 i wypełniamy <wypelnienie> kolorem #b5b5b5. Na razie nie anulujemy zaznaczenia. Możemy już wyłączyć prowadnice (Widok -> Wyświetl prowadnice). (http://www.gimpuj.info/gallery/4453_21_07_09_10_22_29.png) [lp] 3.Tworzymy nową przezroczystą warstwę o nazwie ciemny_szary. Wybieramy Zaznaczenie -> Zmniejsz o 1px i wypełniamy kolorem #666666. Tworzymy nową warstwę o nazwie ciemny_kolor, zmniejszamy zaznaczenie o 1px i wypełniamy kolorem #2e3514. [lp] 4.Teraz czas na odrobinę wyjaśnienia. Usuwamy zaznaczenie (Zaznaczenie -> Nic), żeby to lepiej widzieć. Spójrzmy na poniższy obrazek lub na swoją pracę. Zwykłe 1-pikselowe paski z oddali wyglądają jak jeden wypukły pasek, o to nam chodziło. Jest on wypukły, ponieważ na górze jest jaśniejszy kolor. (http://www.gimpuj.info/gallery/4453_21_07_09_11_12_26.png) [lp] 5. Jeden wypukły pasek to trochę mało, żeby utworzyć ciekawy efekt, zatem idziemy dalej. Klikamy PPM na okienku obecnej warstwy i wybieramy Kanał alfa na zaznaczenie. Tworzymy nową warstwę o nazwie jaskrawy_kolor, zmniejszamy zaznaczenie o 1px, zmieniamy wartość zaokrąglenia na 5 i wypełniamy jaskrawym odcieniem koloru, którego użyliśmy wcześniej, u mnie jest to #bae317. Znowu zmniejszamy zaznaczenie o 1px i usuwamy zawartość ([Delete]), nie anulujemy zaznaczenia. (http://www.gimpuj.info/gallery/4453_21_07_09_6_57_25.png) [lp] 6. Teraz musimy utworzyć podobny wypukły pasek co na początku, z tym że paski teraz będą położone odwrotnie. Tworzymy nową warstwę o nazwie ciemny_szary_2, zmniejszamy zaznaczenie o 1px i wypełniamy kolorem #666666. Następnie znowu nowa warstwa o nazwie jasny_szary_2, zmniejszamy o 1px, ale teraz zmniejszamy również wartość zaokrąglenia na 4, po czym wypełniamy kolorem #b5b5b5. (http://www.gimpuj.info/gallery/4453_21_07_09_6_59_29.png) [lp] 7. Teraz tworzymy nową warstwę o nazwie Czarne_tło, zmniejszamy zaznaczenie o 1px i wypełniamy kolorem czarnym. Tutaj ważne jest, by ten kolor był całkowicie czarny. Anulujemy zaznaczenie (Zaznaczenie -> Nic). (http://www.gimpuj.info/gallery/4453_21_07_09_11_56_12.png) [lp] 8. Pora dodać trochę życia. Wracamy do warstwy jaskrawy_kolor, klikamy PPM i na Dodaj maskę warstwy, wybieramy Biała (bez przezroczystości). Teraz bierzemy pędzel <pedzel> Circle Fuzzy (19) o skali 10 i kolorze czarnym, i klikamy (nie mażemy!), w niektórych obszarach jaskrawego paska (proponuję też w narożnikach). Można też trochę zmniejszyć skalę pędzla i parę razy kliknąć. Staramy się uzyskać taki efekt jak na obrazku poniżej. (http://www.gimpuj.info/gallery/4453_21_07_09_7_41_17.png) [lp] 9. Mamy już w miarę ładnie wyglądające okienko, więc przejdźmy teraz do detali. Przechodzimy do warstwy jaskrawy_kolor, wybieramy Kanał alfa na zaznaczenie, tworzymy nową warstwę o nazwie światła i klikamy gdzieniegdzie (tylko w miejscach, gdzie są już błyski, żeby je lekko wzmocnić) białym pędzlem Circle Fuzzy (19) o skali 5. Tryb warstwy światła ustawiamy na Pokrywanie. Do tego przydałoby się wzmocnić cienie. Kanał alfa na zaznaczenie na warstwie ciemny_kolor, tworzymy nową warstwę o nazwie cienie i klikamy (również w miejscach błysków) takim samym pędzlem jak ostatnio, tyle że czarnym. Tryb na Pokrywanie, krycie można trochę zmniejszyć. Wprawdzie niewiele nam to pomogło, ale na tym właśnie polegają detale. (http://www.gimpuj.info/gallery/4453_21_07_09_8_17_38.png) [lp] 10. Teraz zajmijmy się okienkiem. Kanał alfa na zaznaczenie na warstwie czarne_tło. Tworzymy nową warstwę o nazwie gradient, zmniejszamy zaznaczenie o 2px. Jako kolor pierwszoplanowy ustawiamy biały. W opcjach narzędzia gradient <gradient> wybieramy gradient: kolor pierwszoplanowy na przezroczystość i przeciągamy tak jak widać na poniższym obrazku: (http://www.gimpuj.info/gallery/4453_21_07_09_7_45_57.png) [lp] 11. Wciąż pracując na zaznaczeniu, gaussujemy (Filtry -> Rozmycie -> Rozmycie Gaussa...) o wartości 70px. Następnie zmniejszamy krycie warstwy na 20%. [lp] 12. Kanał alfa na zaznaczenie na warstwie jasny_szary, potem na samej górze tworzymy warstwę o nazwie okno_światła. Wybieramy największy pędzel Circle Fuzzy o największej skali i robimy światło, tak jak widać poniżej. Ja sobie jeszcze pomogłem rozmyciem Gaussa o wartości 20px. (http://www.gimpuj.info/gallery/4453_21_07_09_8_28_51.png) Zmieniamy tryb warstwy okno_światła na Pokrywanie. Następnie duplikujemy <duplikowanie-warstwy>, krycie duplikatu zmniejszamy do 50% i wymazujemy tak, by wzmocnione było tylko źródło światła. [lp] 13. Teraz musimy zrobić wypukłość pod tekst. W tym celu na samej górze tworzymy warstwę o nazwie wypukłość i śmiało malujemy największym pędzlem Circle Fuzzy, po czym gaussujemy o wartości 20px, jak widać poniżej. (http://www.gimpuj.info/gallery/4453_21_07_09_8_38_48.png) Śmiało, bo teraz tryb zmieniamy na Pokrywanie. [lp] 14. Teraz dodamy jeszcze trochę tej zieleni, bo za mało życia jest. Kanał alfa na zaznaczenie na warstwie czarne_tło, tworzymy na samej górze nową warstwę o nazwie kolor i mażemy pędzlem w kolorze, w jakim zrobiliśmy jaskrawy pasek, czyli #bae317, jak widać poniżej. Tryb warstwy na Kolor, krycie 50%. Rezygnujemy z zaznaczenia. (http://www.gimpuj.info/gallery/4453_21_07_09_8_50_31.png) [lp] 15. Teraz zabieramy się za treść. Tutaj każdy ma pole do popisu. Ja napiszę, jak wykonałem obrazek widoczny na samym dole. Piszemy sobie jakąś prostą czcionką (u mnie Loma Bold) w kolorze #b6cf53 słowo "OSTRZEŻENIE". Następnie duplikujemy warstwę z tekstem, duplikat przesuwamy pod spód. Następnie przeciągamy czarny kolor z narzędziówki na duplikat warstwy z tekstem. Teraz przesuwamy <przesuwanie> warstwę o 1px do góry i 1px w prawo. Można to łatwo zrobić klikając raz na strzałkę do góry i w bok. Teraz kanał alfa na zaznaczenie na warstwie OSTRZEŻENIE, następnie tworzymy nową warstwę o nazwie gradienty. Wybieramy gradient kolor pierwszoplanowy na przezroczystość i tworzymy biały gradient u góry i czarny u dołu, jak widać poniżej. (http://www.gimpuj.info/gallery/4453_19_08_09_5_27_47.png) Tryb warstwy ustawiamy na Pokrywanie. [lp] 16. Piszemy tekst czcionką Tahoma, rozmiar 11px z odznaczonym wygładzaniem i zaznaczonym wyśrodkowaniem w kolorze #b6cf53. [lp] 17. Teraz pora na przycisk. Zaczynamy od stworzenia nowej warstwy o nazwie przycisk. Następnie przy pomocy zaznaczenia prostokątnego zaznaczamy pod tekstem obszar jak widać na poniższym obrazku. Wybieramy gradient dwuliniowy, kolor pierwszoplanowy na przezroczystość i robimy biały gradient, co również widać poniżej. (http://www.gimpuj.info/gallery/4453_19_08_09_5_37_56.png) Krycie warstwy gradienty ustawiamy na 8%. Teraz, w ten sam sposób co OSTRZEŻENIE, piszemy tekst "OK" lub "AKCEPTUJ". Można dodać pod spodem cień. Kanał alfa na zaznaczenie na warstwie jasny_szary, tworzymy nad Tłem nową warstwę o nazwie cień i wypełniamy kolorem czarnym. Następnie rozmycie Gaussa o promieniu 30px. Krycie warstwy cień ustawiamy na 25%. Tym sposobem dotarliśmy do końca, oto rezultat: (http://www.gimpuj.info/gallery/4453_02_09_09_8_03_24.png) Okno warstw: (http://www.gimpuj.info/gallery/4453_02_09_09_8_10_07.png) [lp] Koniec Mam nadzieję, że wszystko wytłumaczyłem jasno, a przynajmniej się starałem :) W takich pracach najważniejsze jest eksperymentowanie i bardzo do tego zachęcam. Człowiek się uczy na własnych doświadczeniach, a tutoriale mają tylko naprowadzać ;) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Aniwa on 02.09.2009, 23:39:53 No proszę, jestem tutaj pierwsza :)
Świetny tutek :) Dzięks! (http://www.gimpuj.info/gallery/20961_03_09_09_10_28_10.PNG) (http://www.gimpuj.info/) Tak się tylko zastanawiam, że chyba niepotrzebnie na początek dawać takie duże wymiary płótna skoro efekt końcowy i tak jest ograniczony do okienka. Wiem, że to dla prowadnic, ale te prościej byłoby utworzyć przy mniejszym płótnie. :) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Pilej on 03.09.2009, 16:44:50 Powinno się patrzeć na pracę na dużym jednolitym tle, tak po prostu łatwiej się pracuje. Na płótnie wielkości tego, co dałaś pracę ciężko jest pracować, bo krawędzie obrazu przeszkadzają :) Takie przynajmniej są moje odczucia :)
Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Aniwa on 03.09.2009, 17:09:05 Ok, rozumiem. Po prostu dla mnie, czyli osoby która robiła tą pracę na podstawie Twojego tutka, jest to niepotrzebny dodatek, ponieważ robiąc z tutka i tak zawsze minimalizuję okno gima i okno przeglądarki tak by zmieściły się na ekranie monitora. W ten sposób szybciej mi się pracuje.
Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: INSEKT on 03.09.2009, 18:02:04 Poza tym w tej wolnej przestrzeni płótna wokół okienka pierwotnie był wielki, słaby cień, stąd tyle miejsca.
Zostaję! Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Aniwa on 03.09.2009, 19:13:33 To błędem nie jest, więc spoko.
W 2012 ma być koniec Edit: Nesq ma rację, koniec świata... :) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: matthew* on 03.09.2009, 21:28:41 Bardzo przejrzyście napisany poradnik. ;)
Pobawiłem się troszkę, lecz co nieco zmieniłem. Dałem mniej jaskrawy kolor, bardziej hmmm. spokojniejszy ;D Efekt mojej pracy, (http://i30.tinypic.com/spuq1c.png) (http://www.gimpuj.info/) Dodałem podcieniowanie, kilka innych "dodatków", upiększających czcionkę. Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Ania2213 on 04.09.2009, 20:50:19 Widzę PIL3J kolejny tut... Oto mój efekt końcowy:
(http://www.gimpuj.info/gallery/20471_04_09_09_7_48_56.png) Mam nadzieje że mam dobrze :P Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Qba_ on 12.09.2009, 22:52:58 PIL3J, muszę przyznać, że się spisałeś. Tutorial jest świetny, wielu osobom się zapewne przyda.
Mój efekt: http://www.gimpuj.info/gallery/21370_02_09_09_5_51_22.png Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: SyKaMa on 26.09.2009, 16:40:38 :)
Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: paczuj on 27.09.2009, 14:34:57 Klikamy PPM na okienku obecnej warstwy i wybieramy Kanał alfa na zaznaczenie.
Gdzie jest ta alfa >:( ? I gdzie sa te warstwy.. mozna jakos to pokazac? Ja mam tylko jedno menu po lewej w tym gimpie. Post ponizej juz mi odpowiedzial o warstwy. Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Sebastian on 27.09.2009, 14:38:34 Klikamy PPM na okienku obecnej warstwy i wybieramy Kanał alfa na zaznaczenie. Gdzie jest ta alfa >:( ? Klikasz prawym klawiszem myszy na warstwę i z menu kontekstowego wybierasz "Kanał alfa na zaznaczenie". Jeśli nie widzisz menu warstw przywołujesz je za pomocą CTRL+L BTW: Z jakiś kosmicznych powodów nie widać (przynajmniej u mnie) żadnych obrazków. Hmm... jak wejdę w kod strony i wydłubie np. obrazek z punktu 7... http://www.gimpuj.info/gallery/4453_21_07_09_11_56_12.png ...to go widzę. Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Aniwa on 27.09.2009, 16:09:16 [ BTW: Z jakiś kosmicznych powodów nie widać (przynajmniej u mnie) żadnych obrazków. Hmm... jak wejdę w kod strony i wydłubie np. obrazek z punktu 7... http://www.gimpuj.info/gallery/4453_21_07_09_11_56_12.png ...to go widzę. U mnie są wszystkie obrazki, więc nie wiem o co chodzi. Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Sebastian on 27.09.2009, 18:46:16 Trzeba wyłączyć AdBlock. Jezu reklamy!
Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Qba_ on 27.09.2009, 19:17:34 Też mam AdBlocka i wszystkie obrazki są...
Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Sebastian on 27.09.2009, 19:23:59 Ale ja mam polskie subskrypcje, to pewnie one powodują problem.
BTW: Z reklamami tego forum nie da się przeglądać :/ (przed forum wyskakuje mi reklama o wysokości co najmniej 200px). Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: paulok on 29.09.2009, 17:02:34 też spróbowałem :)
i wyszło tak jak na poniżej załączonym obrazku: (http://www.gimpuj.info/gallery/thumb_24830_29_09_09_4_00_05.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=49558) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: american idiot on 17.10.2009, 18:49:08 (http://www.fototube.pl/pictures/baner24.png)
Takie cuś xP Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: tete8 on 27.10.2009, 16:25:50 Chyba nie jest tak źle :)
(http://www.gimpuj.info/gallery/31912_27_10_09_3_20_45.png) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Terrqge on 20.12.2009, 18:15:44 Fajny tut :).
(http://www.gimpuj.info/gallery/29444_20_12_09_5_10_09.png) (http://www.gimpuj.info/) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: kamillo113 on 23.12.2009, 16:26:15 a oto moja praca
(http://fotoo.pl/zdjecia/files/2009-12/7ae95c74.png) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Harnasik on 14.01.2010, 17:26:21 Pilej, mam tylko jedno pytanko; w pkt. 15. jak dałem ostatni krok wymieniony po obrazku "ostrzeżenie" to czcionka tekstu wyszła mi czarna, bez zmiany trybu wyszło gites.
Wszystko fajnie, a jednak mnie nurtuje czemu tak się dzieje, no i ta poświata od góry przy użyciu pędzla mało ciekawa - aerografem mi wyszło lepiej, też nie wiem czemu. Obrazki wrzucę w następnej edycji mojej odpowiedzi, bo mam jakiś problem z dodaniem Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Angius on 07.05.2010, 13:15:49 Dla mnie wyszło takie cuś, myślę, że nawet nieźle :D
(http://www.fotoload.pl/123aa33/e685d382ee3ae00d89e44af50b8ff68b15674.png) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Don Muha on 15.05.2010, 19:25:29 Witam, mógłbyś uploadnać tą czcionkę ...loma bold..?
Pzdr, Don Muha. Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Mishell on 01.07.2010, 12:26:38 outcome:
(http://www.gimpuj.info/gallery/19062_01_07_10_11_25_11.png) (http://www.gimpuj.info/) Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Box on 30.12.2010, 17:36:22 (http://www.gimpuj.info/gallery/6553_30_12_10_4_34_12_0.png) (http://www.gimpuj.info/)
;) fajne fajne :> Przydatne :D Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: kon on 03.02.2011, 13:13:23 Nasz swiat...
Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Player52612 on 07.08.2011, 13:15:16 moja praca użyłem dodatkowo rozmazania http://www.gimpuj.info/index.php?action=gallery;sa=view;id=81685
Tytuł: Odp: Okienko na potrzeby WWW Wiadomość wysłana przez: Muri on 29.10.2017, 12:07:45 A mi wyszło coś takiego:
|