Polskie Forum Użytkowników GIMP-a

---

Witam.
Tym razem chciałbym przedstawić sposoby tworzenia najprostszych (ale jakże efektywnych), jak również tych bardziej zaawansowanych detali podczas projektowania szaty graficznej na stronę internetową. Całość postaram się opisać bardzo dokładnie, aby i nowicjusze poradzili sobie śpiewająco. W miarę postępu będziemy tworzyć coraz to trudniejsze efekty, z czym mogą być większe problemy, ale w końcu praktyka czyni mistrza.

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

---

[lp] Zaczynamy

[lp] Podstawy

[lp] 1. Linia oddzielająca z efektem 3D

Łatwy i przyjemny efekt używany często w celu oddzielenia kolumn czy innych elementów strony. Wykonanie go zajmuje kilka sekund, a wynik jest bardzo ładny.

[lp] Zaczynamy od wybrania elementu, na którym będzie się znajdować nasza linia. U mnie będzie to po prostu szare tło (rys. 1). Pierwszym krokiem będzie stworzenie na nowej warstwie [Shift+Ctrl+N] białej linii o szerokości 1px (rys. 2). Najlepiej tutaj pracować na powiększeniu 800% (lub nawet większym) i zrobić ją za pomocą zwykłego zaznaczenia prostokątnego <zaznaczenie-prostokatne> [R]. Następnie duplikujemy <duplikowanie-warstwy> [Shift+Ctrl+D] warstwę z naszą białą linią, opcjonalnie zmieniamy jej nazwę na Czarna linia, potem używamy inwersji (Kolory -> Inwersja) (nasza linia zmieni kolor na czarny), chwytamy warstwę z czarną linią (Przesuwanie <przesuwanie> [M]) i przesuwamy ją o 1px w górę lub w dół. Opcjonalnie można jeszcze przesunąć o 1px w prawo lub lewo (ja przesunąłem w prawo) (rys. 3). Tryby krycia naszych linii zmieniamy na Pokrywanie (rys 4). Opcjonalnie eksperymentujemy jeszcze z poziomem krycia (u mnie jest akurat całe 100%), a także z trybami warstw Połączenie ziarna i Zwykły (w tym przypadku ustawiamy niskie krycie, np. 20%). Choć na szarym tle różnicy nie widać, ma to znaczenie przy tłach kolorowych.



Duże znaczenie wpływające na użycie trybów i poziomów krycia ma tło, na którym znajduje się nasza linia, np. jasne tło wymaga innych ustawień niż ciemne, podobnie jednolite i różnokolorowe itd. Można także dodawać gradienty nad lub pod linią, wymazywać jej końce miękkim pędzlem o dużym powiększeniu, stosować poziome rozmycia Gaussa itp.

Przykłady zastosowania takich oto linii:



[lp] 2. Gradient + estetyczna linia

Efekt ostatnio dość popularny i umieszczany w szablonach gdzie się tylko da, a składa się zalednie z dwóch prostych elementów.

[lp] Zaczynamy od stworzenia elementu, na którym będziemy pracować. By gradient wyglądał dobrze, element nie powinien być zbyt "gruby". U mnie jest to niebieska belka o grubości 50px (rys. 1). Na nowej warstwie tworzymy biały gradient typu Kolor pierwszoplanowy na przezroczystość. Przeciągamy nim od góry do dołu elementu (rys. 2). By gradient był idealnie poziomy, a nie przechylony, pomagamy sobie siatką lub pionową prowadnicą (opcje Przyciągaj do siatki, Przyciągaj do prowadnic oczywiście włączone) lub przytrzymujemy [Ctrl]. Tryb krycia gradientu zmieniamy na Pokrywanie. Następnie tworzymy na nowej warstwie białą linię o grubości 1px rozciągniętą na całą szerokość elementu. Linia powinna być umiejscowiona 1px pod górną krawędzią elementu (rys. 3, powiększenie). Jej krycie również zmieniamy na Pokrywanie. Poziomy krycia zarówno gradientu jak linii w tym przypadku to 100%.

W tym miejscu również można próbować różnych wariacji. Po przesunięciu warstwy z gradientem o 1px w dół uzyskałem inny efekt naświetlenia wierzchu niebieski belki (rys 4), natomiast po zmianie trybu krycia gradientu i białej linii na Zwykły oraz poziomu krycia w przypadku gradientu na 50%, a linii na 100%, uzyskałem inną kolorystykę cieniowania (rys. 5).



Można dalej eksperymentować z innymi trybami krycia, innymi kolorami (np. zmiana koloru linii na czarny) i przesuwaniem elementów o drobne wartości, aby uzyskać inne, ciekawe efekty.

Oto przykłady wykorzystania tej techniki:



[lp] 3. Cień pod tekstem

Chyba nie ma ostatnio częściej spotykanego efektu w szablonach www niż cień pod tekstem nadający efekt trójwymiarowości. Choć wielbiciele innowacji próbują go wyplenić, nie zapowiada się, by kiedykolwiek stał się niemodny i przestarzały.

[lp] Stworzenie efektu trójwymiarowości dzięki cieniowi polega zaledwie na stworzeniu swojego tekstu (rys. 1), duplikowaniu go, zmianie koloru na czarny (szary, biały, inny kolor - w zależności od koloru tekstu, koloru tła, efektu jaki chcemy uzyskać itd.) i przesunięciu o 1px w dół i 1px w prawo (rys. 2). Cała reszta zależy od naszej wyobraźni. Można np. przesunąć warstwę z cieniem jeszcze o 1px w dół i zmienić jej tryb krycia na Pokrywanie (rys. 3), nie przesuwając ani nie zmieniając trybu krycia jedynie rozmyć Gaussem o wartości 1px (rys. 4) lub 3px (rys. 5) jeśli ktoś preferuje efekt tekstu bardziej oddalonego od podłoża. Wariacji jest bardzo dużo.



Zaletą takiego tekstu jest fakt, że świetnie wygląda nawet przy bardzo małych rozmiarach tekstu (rys. 6).

Niektóre przykłady tekstu z gradientem prosto z sieci:



[lp] 4. Tekst z uwypuklającym gradientem

Kto by pomyślał, że jedno przeciągnięcie gradientem plus jedno rozmycie może dać tak prosty, a zarazem efektywny efekt. Ale jakiś geniusz na to wpadł, dzięki czemu możemy teraz to oglądać w wielu projektach.

[lp] Zaczynamy od napisania swojego tekstu jakąś grubą czcionką (przy "chudych" rozmycia i gradient będą słabo widoczne) (rys. 1). Pobieramy Kanał alfa na zaznaczenie z warstwy tekstowej, standardowo tworzymy nową warstwę i przeciągamy gradientem (oczywiście Kolor pierwszoplanowy na przezroczystość - najczęściej używany gradient) o czarnym kolorze od dołu do góry napisu (rys. 2). Następnie rozmywamy naszą warstwę z gradientem rozmyciem Gaussa o wartości 5px i zmieniamy poziom krycia tej oto warstwy na 50% (rys. 3). Efekt gotowy. Nie ma nawet potrzeby usuwania rozmycia wychodzącego poza granice czcionki - utworzyło nam ono ładny, delikatny cień pod tekstem.



Oczywiście można jeszcze kombinować z naszym tekstem, np. dodając biały gradient (oczywiście każdy nowy element na nowej warstwie) przeciągnięty od góry do połowy tekstu, nierozmyty, z trybem krycia Pokrywanie i poziomem krycia czarnego gradientu zwiększonym do 75% (rys. 4) lub bardziej skomplikowany biały gradient: z dwuliniowym kształtem i zaznaczoną opcją Odwróć, przeciągnięty od środka tekstu do góry lub dołu. Dodatkowo zmieniłem tryb krycia na Połączenie ziarna.

Wariacji jest niezliczona ilość, a to tylko niektóre z nich:



[lp] 5. Srebrny tekst

Mało jest efektownych, a zarazem tak banalnie prostych detali jak srebrny tekst. Do wykonania go potrzebujemy zaledwie jednego narzędzia! (opcjonalnie kilku, jeśli chcemy urozmaicić nasz efekt)

[lp] Rozpoczynamy oczywiście od wystukania jakiegoś słowa. Czcionka koloru białego (rys. 1). Tutaj postępujemy podobnie jak w poprzednim punkcie: pobieramy kanał alfa, tworzymy nową warstwę i wypełniamy zaznaczenie gradientem koloru czarnego, tym razem kształtu dwuliniowego. Przeciągamy gradient zaczynając od połowy tekstu (a nawet ciut niżej) i ciągniemy go do górnej krawędzi (pociągnięcie gradientu wyznacza czerwona strzałka). Poziom krycia warstwy z gradientem zmieniamy do 70% (rys. 2) (to tylko opcja, można próbować innych wartości: 50%, 80%, itd.; oby nie była to zbyt mała wartość, bo efekt srebra będzie daleki). Przy małych czcionkach właściwie można już to tak pozostawić, ale przy większych można dodać jeszcze urozmaiceń (czytaj: upiększyć). W tym celu po prostu rozmywamy warstwę z gradientem Gaussem o wartości 2px. Za jednym zamachem dostaliśmy ładne białe obramowanie i delikatny cień wokół tekstu (rys. 3).



Rozmycia i gradienty można edytować uzyskując jeszcze ciekawsze efekty. Np. tworząc dwa gradienty: jeden większy niżej oraz drugi, bardzo mały, pod górną krawędzią tekstu (oczywiście gradient dwuliniowy) (rys. 4), a następnie rozmywając Gaussem o wartości 3px możemy uzyskać ciekawszy efekt imitujący dwukrotną wypukłość (rys. 5).

Tak to się prezentuje w praktyce:



[lp] 6. Prosty deseń

Deseń - mały, powtarzalny element grafiki, którego używamy bardzo często nie zastanawiając się nawet skąd go mamy i kto jest jego wykonawcą. A czemu by nie robić ich samemu? Dokładnie takie, jakich potrzebujemy?

[lp] W zasadzie wykonanie ciekawego i przydatnego desenia na stronę zajmuje kilka minut. Wystarczy otworzyć nowy obraz o bardzo małych wymiarach i narzędziem ołówek <olowek> [N]
 z wybranym pędzlem circle 1px namalować dokładnie to, czego potrzebujemy. Można wypełnić całość różnymi odcieniami danego koloru (rys. 1), wypełniać jedynie część płótna pozostawiając niektóre miejsca przezroczyste (rys. 2) lub zrobić całość półprzezroczystą (rys. 3), by współgrało z tłem w zależności od jego kolorystyki. Plik desenia działa jak .PNG - dobrze obsługuje przezroczystość.



Po wykonaniu grafiki zapisujemy nasz deseń w formacie .PAT w odpowiednim folderze GIMP-a. Po odświeżeniu listy patternów powinien się pojawić nasz nowy deseń.

Zastosowanie takich deseni:



[lp] 7. Prosty przycisk z połyskiem

Łatwy sposób na to, by zwykły odnośnik stał się ładnym elementem strony www i jednocześnie zwracał na siebie większą uwagę.

[lp] Zaczynamy od napisania swojego tekstu (np. "Czytaj dalej") jakąś czcionką. Ja użyję czcionki Aller Italic o rozmiarze 13px (rys. 1). Następnie tworzymy Zaznaczenie prostokątne o wysokości 26px i szerokości 90px, i dopasowujemy do tekstu tak, by był na środku (rys. 2). Pomocne może okazać się wyśrodkowanie tekstu. Z menu Zaznaczenie wybieramy opcję Zaokrąglenie, ustawiamy suwak na 70% i tworzymy nową warstwę pod warstwą tekstową, którą wypełniamy kolorem #e05c1d. Duplikujemy warstwę tekstową, z menu Kolory używamy opcji Inwersja, przesuwamy <przesuwanie> warstwę o 1px w prawo i w dół i zmieniamy krycie warstwy na 30% (rys. 3). Pobieramy Kanał alfa na zaznaczenie z poprzednio stworzonej warstwy i z menu Zaznaczenie, opcją Zmniejsz zmniejszamy zaznaczenie o 1px. Potem tworzymy gradient kolor pierwszoplanowy na przeźroczystość kolorem białym tak jak jest pokazane na rys. 4. Ponownie zmniejszamy zaznaczenie o 1px i usuwamy zawartość klawiszem [Delete] lub z menu Edycja opcją Wyczyść. Tryb warstwy z gradientem ustawiamy na Pokrywanie, a następnie duplikujemy ją. Na skopiowanej warstwie zmieniamy krycie na 40% i przesuwamy ją o 1px w dół. W podobny sposób, ale bez zmniejszania zaznaczenia przed stworzeniem gradientu, na nowej warstwie tworzymy dolny cień buttona i ustawiamy krycie warstwy z nim na 60% (rys. 5). Następnie tworzymy nową warstwę nad warstwą stworzoną w punkcie 3 i tworzymy na niej od góry do dołu gradient kolor pierwszoplanowy na kolor tła (RGB) w kolorach białym i czarnym i ustawiamy tryb warstwy na Pokrywanie, a krycie na 30% (rys. 6).



Warto też spróbować zrobić to po swojemu - pobawić się z cieniami lub zastosować inny tryb na warstwie tekstowej. Możliwości jest bardzo wiele. To, której spróbujesz, zależy wyłącznie od Ciebie.

Przykłady użycia takich przycisków:



[lp] Zaawansowane projektowanie

[lp] 1. Półprzezroczyste menu na zdjęciu

Efekt szkiełka leżącego na zdjęciu nie jest zbyt często spotykanym rozwiązaniem, ponieważ trudno stworzyć takie menu wyglądające naprawdę estetycznie. Zazwyczaj trzeba sporo pokombinować z ilością warstw, ich kolorystyką oraz trybami krycia, ponieważ każde tło, czyli zdjęcie na jakim pracujemy, inaczej będzie się komponować z naszym szklanym menu.

[lp] Zaczynamy oczywiście od dobrania zdjęcia, które znajdzie się w topie naszej strony, a na nim nasze menu. W moje ręce wpadła tekstura pożółkłych liści (rys. 1). Zaczynamy od stworzenia zaznaczenia prostokątnego o wymiarach planowanego menu. Ważnym jest, byśmy tego zaznaczenia nie zrobili "na ślepo" - podczas pracy będziemy go używać kilkakrotnie, zatem warto zadbać o to, by później można było dokładnie je odtworzyć. W tym celu najlepiej posłużyć się czterema prowadnicami wyznaczającymi granice zaznaczenia lub po prostu siatką. Ja opcjonalnie włączyłem jeszcze wygładzanie rogów o promieniu 5px. Po stworzeniu zaznaczenia na warstwie z naszym zdjęciem rozmywamy zawartość Gaussem - zaznaczenie musi być aktywne, by rozmyty został tylko zaznaczony obszar, a nie całe zdjęcie (rys. 2). Oczywiście można skopiować zaznaczenie na nową warstwę, jeśli nie chcemy paskudzić zdjęcia, bo np. mamy zamiar je jeszcze wykorzystać w tym projekcie w postaci nienaruszonej. Promień rozmycia zależy od Waszego gustu. Im większy, tym szkiełko będzie zdawało się grubsze/bardziej matowe/brudne.
Najważniejsza część za nami. Teraz pozostaje już kwestia stworzenia detali, by uwydatnić efekt rozmycia. Ja dodałem delikatny cień wokół (rys. 3), obszar rozmycia wypełniłem (na nowej warstwie) kolorem białym, zmniejszyłem krycie do 20% i zmieniłem tryb krycia na Połączenie ziarna (rys. 4) oraz dodałem delikatne jednopikselowe białe obramowanie zanikające do dołu z kryciem 50% i trybem Pokrywanie (rys. 5). Więcej bajerów w to nie wciskałem, po prostu dodałem tekst, cienie i podświetlenie przycisku (rys. 6).



To, jakich efektów użyjemy podczas projektowania takiego menu zależy od naszych upodobań, a przede wszystkim od wyglądu zdjęcia oraz ogólnego klimatu i stylu panującego na stronie. Np. zamiast rozjaśniać całość białą warstwą można pójść w drugą stronę i całość przyciemnić lub użyć koloru przeważającego na stronie. Można dodawać uwypuklające gradienty, typowe dla szklanych obiektów połyski, odbicia, cienie itp. itd.
Oczywiście technikę można stosować nie tylko do menu, ale także do innych elementów strony. Kwestia inwencji twórczej.

Kilka podobnych zastosowań:



[lp] 2. Własne ikony nawigacyjne

Często ten mały szczegół pobieramy z sieci dla dopełnienia naszego dizajnu. Ale czemu nie stworzyć takich ikon samemu? Oto przykład takiej ikony.

[lp] Najpierw nauczymy się, jak zrobić fajny pędzel, który nie jest tak poszarpany jak circle fuzzy, nawet przy dużych rozmiarach.
W oknie pędzli klikamy na nowy pędzel i ustawiamy opcje tak jak poniżej:

• Promień - 29
• Ostrza - 2
• Twardość - 0.43
• Proporcje - 1.0
• Kąt - 0.0
• Odstęp - 20.0

Wpisujemy jakąś nazwę naszego pędzla, zapisujemy i wyłączamy okienko.

Zaczynamy od zaznaczenia okrągłego obszaru przy pomocy zaznaczenia eliptycznego. Przytrzymujemy [Shift], by zrobić zaznaczenie symetryczne. Tworzymy nową warstwę o nazwie przycisk i wypełniamy zaznaczenie jakimś kolorem kontrastującym z tłem. Następnie przy pomocy ścieżek tworzymy jakiś kształt (u mnie jest to strzałka), po czym w okienku ścieżek klikamy opcję Ścieżka na zaznaczenie i wciskamy [Delete] (rys. 1). Następnie pobieramy Kanał alfa na zaznaczenie z warstwy przycisk, pod tą warstwą tworzymy nową warstwę o nazwie cień i wypełniamy zaznaczenie kolorem czarnym. Rezygnujemy z zaznaczenia. Następnie rozmywamy Gaussem o wartości 2px, krycie warstwy zmniejszamy do 30% (rys. 2). Znowu kanał alfa na zaznaczenie na warstwie przycisk, nad nią tworzymy nową warstwę, na której stawiamy kropkę naszym nowym rozmytym pędzlem w lewym górnym rogu, ale blisko środka okręgu. Tryb warstwy ustawiamy na pokrywanie (rys. 3). Znowu kanał alfa na zaznaczenie na warstwie przycisk i na nowej warstwie wypełniamy zaznaczenie kolorem czarnym. Następnie zmniejszamy zaznaczenie o 1px i usuwamy zawartość. Tryb krycia warstwy to Połączenie ziarna, a krycie 30% (rys. 4). Na koniec na nowej warstwie wypełniamy zaznaczenie kolorem białym, zmniejszamy zaznaczenie o 1px i usuwamy zawartość. Tryb krycia: Pokrywanie (rys. 5).



Przykłady wykorzystania takich ikonek:



[lp] 3. Efekt wklęsłego tekstu

Tekst imitujący wklęsłość, wygrawerowanie litery w podłożu. Element również bardzo popularny w ostatnim czasie.

[lp] Wideotutorial:



W taki sposób można wykorzystać efekt wklęsłego tekstu:



[lp] Koniec

---

super tut! dzięki!

Super tutorial na pewno skorzystam :) !

linia:
(http://fotozrzut.pl/zdjecia/02a4cfab00.png)

(http://fotozrzut.pl/zdjecia/3eaa951a45.png)

To kółeczko jakieś postrzępione Ci wyszło, chyba musisz poprawić. Powinno wyglądać tak:

(http://i.minus.com/iYynrpUNChAPP.png)

Strzałkę też masz trochę postrzępioną na grocie.

to wszystko z zaznaczenia robiłem jak zrobić to lepiej, mi nigdy niewyjdzie fajnie?

Ja też zrobiłam to kółko z zaznaczenia. Widocznie musiałeś je wypełnić kolorem dwukrotnie, dlatego jest postrzępione. Jeśli wypełniasz zaznaczenie kolorem więcej niż raz i nakładasz jeden kolor na drugi, to właśnie tak się dzieje. Natomiast grot strzałki wymaga już użycia ścieżek.

strzalke można z painta wziąść i zdjąć zaznaczenie, to dużo mi brakuje...

Z Painta będzie postrzępiona. Po co w ogóle używać Painta, przecież taka strzałka to nic trudnego. Chciałeś już całe strony robić, a tu się okazuje, że nawet głupiej strzałki nie potrafisz. Ćwicz, powtarzaj, aż się nauczysz.

szkoda że tu nie ma tak, że ktoś prowadzi dyskusje i pokazuje od zera kro po kroku jak zrobić takie kółko strzałkę i itp...

No bez przesady, kółko to tylko wypełnienie zaznaczenia, co tam jest do pokazywania krok po kroku? A na strzałkę jest przecież tutorial: http://www.gimpuj.info/index.php/topic,13355.0.html (http://www.gimpuj.info/index.php/topic,13355.0.html). Można też sobie włączyć pomocniczą siatkę i narysować strzałkę za pomocą ścieżek.

szczerze mowiąc na gimpiarza sie nienadaje...