W dzisiejszym tutorialu postaram się przedstawić kilka moich technik, których używam do tworzenia ładnych, pastelowych stron www. Mam nadzieję, że osoby czytające ten artykuł mają jakiekolwiek obeznanie w opcjach GIMP-a i wiedzą co to są warstwy, maski itp. Tak więc do dzieła! Rozpocznijmy od stworzenia nowego pliku o wymiarach 1200x1500 z białym tłem.
Zawsze można użyć innych wymiarów. Ja zazwyczaj wszystko robię "na oko" i dopiero podczas cięcia grafiki na potrzeby kodu html odmierzam równe wymiary. Przy szerokości 1200px mamy pewność, że każdy z elementów znajdzie wystarczająco dużo dla siebie miejsca. Zawsze podczas projektowania nigdy do końca nie wiem co chcę osiągnąć – bardzo często po prostu eksperymentuje dopóki nie uzyskam ciekawego efektu. Niezbędna jest jednak świadomość barw i tego w jakim klimacie chcemy dany szablon wykonać. Wybrałem 4 podstawowe kolory, z których będę wydobywał barwy ciemniejsze i jaśniejsze.
Tak więc strona będzie biało – bordowa z niebieskimi nagłówkami i pomarańczowymi detalami.
Rozpocznijmy od
zaznaczenia prostokątnego(klawisz R) na nowo utworzonej warstwie w górnej części dokumentu. Wybierz dwa kolory: jako pierwszoplanowy nasz bordo
#92002e, jako drugoplanowy jego ciemniejszy odcień. Użyj
gradientu(klawisz L) na zaznaczeniu aby uzyskać efekt płynnego przejścia z jaśniejszego koloru u góry do ciemniejszego u dołu.
Teraz użyj
narzędzia tekstu(klawisz T) i wpisz tytuł swojej strony. Dodaj kilka kółek, które będą budować nasze logo. Dodaj nową warstwę. Wybierz
zaznaczenie eliptyczne(klawisz E) i trzymając klawisz
Shift zaznacz okrąg. Wybierz
narzędzie wypełniania(Shift + B) i wypełnij okrąg białym kolorem. Powtórz czynność jeszcze dwukrotnie na tej samej warstwie. dopierając inne rozmiary kółek.
<br/>
Teraz zaznacz duży okrąg tak aby nachodził na każde z małych kółeczek a następnie wytnij jego zawartość
(Ctrl + X).
Dodaj napisy które użyją jako menu główne.
Teraz stworzymy efekt świetlistej łuny, płynnego przejścia – nie wiem jak to nazwać. Najpierw zduplikuj warstwę zawierającą bordowe tło.
Zaznacz dolną warstwę i wybierz
Filtry -> Rozmycie -> Rozmycie Gaussa. Ustaw promienie na
5px i kliknij ok.
Powinna powstać ładnie wyglądająca łuna na przejściu pomiędzy kolorem bordowym a białym. Powtórz czynność dla warstwy zawierającej logo. Modne są ostatnio zakładki, tak więc stwórzmy jedną aby pokazać pewną ciekawą technikę. Dodaj nową warstwę.
Zaznacz(klawisz R) obszar wokół napisu „Strona główna” a następnie wybierz
Zaznaczenie -> Zaokrąglenie i ustaw promień na około
25px(tutaj trzeba czasami lekko eksperymentować).
Teraz wybierz narzędzie gradient ustawiając kolor pierwszoplanowy na biały. Jako rodzaj gradientu zaznacz
„Kolor pierwszoplanowy na przezroczystość”.
Wypełnij zaznaczenie gradientem tak aby biały kolor był w jego górnej części.
Teraz ustaw krycie warstwy na około
25%.
Również ten element możemy skopiować i dodać rozmycie Gaussa. Oczywiście będziemy musieli wyczyścić dolną warstwę i pozostawić jedynie obramowanie ponieważ górna warstwa ma ustawioną przezroczystość i efekt nie byłby za ciekawy(powstałaby przezroczystość 50%). Spróbujmy dodać jakieś dodatkowe pole po prawej stronie. Dodaj nową warstwę i wybierz zaznaczenie prostokątne. Zaznacz fragment i zaokrąglij krawędzie. Uzupełnij zaznaczenie w górnej części za pomocą
zaznaczenia prostokątnego(klawisz R) trzymając przy tym klawisz
Shift. Wypełnij Powstały kształt białym kolorem.
Skopiuj warstwę i dodaj rozmycie Gaussa. Dodaj jakieś napisy i elementy dekoracyjne obok linków(kropki, prostokąty, strzałki).
Stwórz nową warstwę i narysuj na niej menu boczne.
Dodaj przykładowy artykuł.
Czas na Stopkę. Dodaj nową warstwę. Zaznacz duży obszar w dolnej części strony i zamaluj go gradientem od jasnego bordo do jego ciemnego odcienia. Następnie nieodznaczając zaznaczenia dodaj nową warstwę, wybierz narzędzie
„Wypełnianie kolorem” i jako Typ wybierz deseń
„Warning!” (lub inny stworzony przez siebie). Następnie odznacz wszystko. Postaraj się zaznaczyć wszystkie żółte linie, a gdy to zrobisz usuń je.
Gdy pozostanie ci warstwa tylko z czarnymi liniami zmniejsz lekko jej krycie i dodaj do niej maskę
„czarna(pełna przezroczystość)”.
Teraz wybierz gradient biało czarny i zamaluj maskę tak aby linie zanikały w dolnej części strony. Pozostaje nam już tylko dodać trochę napisów i stopka jest gotowa.
Dla lepszego efektu możesz standardowo skopiować warstwę stopki i dodać efekt Gaussa co spowoduje dodanie ładnej poświaty(i zwiększy nasycenie koloru jeśli tak jak ja zmieniłeś wsześniej krycie stopki).
Teraz wystarczy dodać kilka grafik i dodatkowych napisów. Świetnie do tego celu nadają się ikonki
Tulliana 2.0(licencja LGPL) dostępne na
kde-look.org. Mój końcowy wygląd strony dostępny
tutaj.
Już niebawem postaram się uruchomić mój system darmowych blogów a co za tym idzie będę potrzebował kilku layoutów. Tak więc, już niebawem kolejny poradnik! Więcej informacji wkrotce na
http://srodek.info