Projektowanie detali w webdesignie
Tutorial
Opracowanie: INSEKT, PIL3J, WertyS
Poziom trudności: średni
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ć.
Zaczynamy Podstawy 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. 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 
[R]. Następnie
duplikujemy 
[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 
[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:
2. Gradient + estetyczna liniaEfekt ostatnio dość popularny i umieszczany w szablonach gdzie się tylko da, a składa się zalednie z dwóch prostych elementów. 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:
3. Cień pod tekstemChyba 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. 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:
4. Tekst z uwypuklającym gradientemKto 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. 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:
5. Srebrny tekstMał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) 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:
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? 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 
[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:
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ę. 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
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:
Zaawansowane projektowanie 1. Półprzezroczyste menu na zdjęciuEfekt 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. 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ń:
2. Własne ikony nawigacyjneCzę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. 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:
3. Efekt wklęsłego tekstuTekst imitujący wklęsłość, wygrawerowanie litery w podłożu. Element również bardzo popularny w ostatnim czasie. Wideotutorial:
W taki sposób można wykorzystać efekt wklęsłego tekstu:
Koniec
Tutoriale
