Polskie Forum Użytkowników GIMP-a

---

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



[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.



[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.



[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.



[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).



[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.



[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.



[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:



[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.



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.



Ś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.



[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.



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.



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:



Okno warstw:



[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ć ;)

---

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.
 :)

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

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.

Poza tym w tej wolnej przestrzeni płótna wokół okienka pierwotnie był wielki, słaby cień, stąd tyle miejsca.

Zostaję!

To błędem nie jest, więc spoko.



W 2012 ma być koniec roku, więc długo się tym nie nacieszę... Ale fajnie że zostajesz! :D

Edit: Nesq ma rację, koniec świata... :)

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ę.

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

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

 :)

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.

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ę.

U mnie są wszystkie obrazki, więc nie wiem o co chodzi.

Trzeba wyłączyć AdBlock. Jezu reklamy!

Też mam AdBlocka i wszystkie obrazki są...

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

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)

(http://www.fototube.pl/pictures/baner24.png)

Takie cuś xP

Chyba nie jest tak źle :)

(http://www.gimpuj.info/gallery/31912_27_10_09_3_20_45.png)

Fajny tut :).

(http://www.gimpuj.info/gallery/29444_20_12_09_5_10_09.png) (http://www.gimpuj.info/)

a oto moja praca

(http://fotoo.pl/zdjecia/files/2009-12/7ae95c74.png)

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

Dla mnie wyszło takie cuś, myślę, że nawet nieźle  :D
(http://www.fotoload.pl/123aa33/e685d382ee3ae00d89e44af50b8ff68b15674.png)

Witam, mógłbyś uploadnać tą czcionkę ...loma bold..?
Pzdr, Don Muha.

outcome:
(http://www.gimpuj.info/gallery/19062_01_07_10_11_25_11.png) (http://www.gimpuj.info/)

(http://www.gimpuj.info/gallery/6553_30_12_10_4_34_12_0.png) (http://www.gimpuj.info/)

;) fajne fajne :> Przydatne :D

Nasz swiat...

moja praca użyłem dodatkowo rozmazania http://www.gimpuj.info/index.php?action=gallery;sa=view;id=81685

A mi wyszło coś takiego: