Strona 1 Szablon witryny magazyn INTERNET Włodzimierz Gajda Przygotowywana w tym odcinku witryna wykorzystuje: prowadnice, gradienty, zaznaczenia, ścieŝki, warstwy i maski, wklejanie elementów do obrazu oraz zaokrąglone prostokąty. Do dokładnego ułoŝenia ikon opcji menu uŝyłem kwadratów i prostokątów. Metoda ta gwarantuje, Ŝe kaŝda z ikon zajmie dokładnie tyle samo miejsca (bez względu na rozmiar) oraz to, Ŝe ikony będą równoodległe, co ma znaczenie podczas przygotowywania kodu HTML witryny. 1 grudnia 2006 r. Spis treści 1. Etap 1: tło 2. Etap 2: napisy 3. Etap 3: pozioma linia 4. Etap 4: ikony 5. Etap 5: wskaźnik wybranej opcji 6. Etap 6: obłe prostokąty z prawego górnego naroŝnika 7. Etap 7: podpisy opcji 8. Etap 8: wskaźnik przewijania rekordów 9. Etap 9: obrys
Strona 2 Rysunek 1. Obrazy, od ktăłrych rozpoczynamy Rysunek 2. Obraz wynikowy z odznaczonymi opcjami
Strona 3 Rysunek 3. Obraz wynikowy z zaznaczonymi opcjami 1. Etap 1: tło
Strona 4 Rysunek 4. Utwórz nowy obraz o wymiarach 800 600. Obraz ten wypełnij gradientem liniowym przechodzącym od koloru ciemniejszego na górze do koloru jaśniejszego na dole. Wypełnienie powinno być dokładnie pionowe. Ułatwisz sobie pracę wykorzystując prowadnicę pionową. Rysunek 5. Dodaj dwie prowadnice poziome w miejscach o współrzędnych 20 i 580 oraz dwie prowadnice pionowe w miejscach o współrzędnych 20 i 780. Dodane cztery prowadnice powinny w obrazie wyznaczyć prostokąt o wymiarach 560 760 oraz 20 pikselowe obramowanie.
Strona 5 Rysunek 6. Zaznacz prostokąt wyznaczony przez prowadnice.
Strona 6 Rysunek 7. Zaokrągl naroŝniki zaznaczenia. Wykonaj opcję Zaznaczenie Zaokrąglenie o parametrze 10.
Strona 7 Rysunek 8. Otrzymany prostokąt o zaokrąglonych naroŝnikach skopiuj z tła, wklej na nową warstwę i wypełnij jednolitym zielonym kolorem. Na zakończenie zmniejsz krycie warstwy z zaokrąglonym prostokątem. 2. Etap 2: napisy
Strona 8 Rysunek 9. Dodaj do obrazu napisy magazyn INTERNET. 3. Etap 3: pozioma linia
Strona 9 Rysunek 10. Zaznacz cienki długi prostokąt poniŝej napisu INTERNET. Prostokąt ten powinien swoimi pionowymi bokami dotykać prostokąta o zaokrąglonych naroŝnikach. Zaznaczony prostokąt skopiuj z tła, wklej na nową warstwę i wypełnij jednolitym kolorem o odcieniu zielonym.
Strona 10 Rysunek 11. Dodaj maskę dla warstwy z długim prostokątem. Maskę tą wypełnij dwuliniowym gradientem czarno-białym. Gradient ten powinien być ułoŝony pionowo (wykorzystaj prowadnicę!). W środkowej części prostokąta gradient maski powinien być czarny i rozjaśniać się w kierunku poziomych boków długiego prostokąta.
Strona 11 Rysunek 12. Po włączeniu działania maski i zmniejszeniu krycia warstwy długiego prostokąta otrzymasz delikatną linię.
Strona 12 Rysunek 13. Zadaniem długiego prostokąta jest oddzielenie nagłówka od treści strony. 4. Etap 4: ikony
Strona 13 Rysunek 14. Wklej do obrazu siedem małych ikon. Ikony umieść na osobnych warstwach. Rysunek 15. W celu wyrównania ikon dodamy do obrazu serię czarnych kwadratów i czerwonych prostokątów. Dodaj czarny kwadrat leŝący na osobnej warstwie i obejmujący pierwszą z ikon: zaznacz kwadrat obejmujący ikonę (podczas zaznaczania prostokąta przytrzymaj klawisz Shift, wówczas zaznaczenie będzie przyjmowało kształt kwadratu), zaznaczenie skopiuj z tła i wklej na nową warstwę, wklejony kwadrat wypełnij kolorem czarnym.
Strona 14 Rysunek 16. W podobny sposób dodaj do obrazu czerwony prostokąt. Pamiętaj, Ŝe prostokąt ten musi być umieszczony na osobnej warstwie. Jego szerokość wyznaczy odstęp pomiędzy ikonami. Rysunek 17. Powiel czarny kwadrat i czerwony prostokąt. Powielone figury rozłóŝ równo obok siebie. Wykorzystaj narzędzie do przesuwania warstw (skrót m) oraz strzałki na klawiaturze.
Strona 15 Rysunek 18. Wklejone ikony umieść nad czarnymi kwadratami. Rysunek 19. Wyłącz widoczność czerwonych prostokątów i czarnych kwadratów. 5. Etap 5: wskaźnik wybranej opcji
Strona 16 Rysunek 20. Zaznacz prostokąt o szerokości identycznej jak pierwszy z czarnych kwadratów. Prostokąt ten powinien leŝeć ponad czarnym kwadratem i swoim obszarem sięgać powyŝej brzegu zaokrąglonego prostokąta. Rysunek 21. Zaokrągl zaznaczenie. Wykonaj operację Zaznaczenie Zaokrąglenie z parametrem 50.
Strona 17 Rysunek 22. Wklej do obrazu zieloną strzałkę. Umieść ją na nowej warstwie i przesuń na środek małego prostokąta o zaokrąglonych naroŝnikach. Rysunek 23. Powiel strzałkę i mały zielony prostokąt. Duplikaty przesuń nad kolejne ikony menu głównego. 6. Etap 6: obłe prostokąty z prawego górnego naroŝnika
Strona 18 Rysunek 24. Zaznacz dość duŝy prostokąt. Rysunek 25.
Strona 19 Zaokrągl naroŝniki prostokąta (Zaznaczenie Zaokrąglenie) o 50%. Rysunek 26. Otrzymany prostokąt skopiuj z tła i wypełnij jednolitym kolorem zielonym. Kolor wypełnienia powinien być identyczny, jak kolor górnej części obrazu (tła wypełnionego gradientem w pierwszym etapie). Do pobrania z obrazu koloru wykorzystaj pipetę o skrócie o (Pobieranie koloru z obrazu).
Strona 20 Rysunek 27. Wykonany prostokąt przesuń w prawy górny róg obrazu. 7. Etap 7: podpisy opcji Rysunek 28. Dodaj do obrazu napis strona główna. Napis ten umieść w obszarze wyznaczonym przez prostokąt wykonany w poprzednim etapie.
Strona 21 Rysunek 29. Dodaj kolejno napisy autorzy, artykuły, roczniki, numery, rubryki oraz podrubryki. Napisy te umieść na osobnych warstwach. 8. Etap 8: wskaźnik przewijania rekordów Rysunek 30. Wklej do obrazu pięć ikon przedstawiających strzałki. Wklejane elementy umieść na osobnych warstwach, po czym rozmieść w prawym górnym naroŝniku obrazu nieco powyŝej poziomej linii.
Strona 22 Rysunek 31. Powiel obły prostokąt. Duplikat przesuń do dołu. Rysunek 32.
Strona 23 Powiększ widok obrazu i zaznacz prostokąt przylegający do brzegu duŝego obłego prostokąta oraz do poziomej linii. Do dokładnego wykonania zaznaczenia wykorzystaj prowadnice. Rysunek 33. Zaznaczenie skopiuj z małego obłego prostokąta i wklej na nową warstwę.
Strona 24 Rysunek 34. Wklejony element wypełnij jednolitym kolorem pobranym z tła. Rysunek 35. Powiel cztery ikony ze strzałkami. Warstwy z duplikatami przekształć w obrazy czarno-białe (Warstwa Kolory Desaturacja).
Strona 25 Rysunek 36. Zmniejsz krycie czterech czarno-białych strzałek do 20. 9. Etap 9: obrys
Strona 26 Rysunek 37. Przekształć duŝy zaokrąglony prostokąt w zaznaczenie (Warstwa Przezroczystość Kanał alfa na zaznaczenie).
Strona 27 Rysunek 38. Zaznaczenie przekształć na ścieŝkę (Zaznaczenie Przekształć na ścieżkę).
Strona 28 Rysunek 39. Obrysuj ścieŝkę na nowej przezroczystej warstwie dwupikselową linią koloru zielonego.
Strona 29 Rysunek 40. Zaznacz duŝy prostokąt obejmujący swoim obszarem górną część obrysu aŝ do poziomej linii (włącznie z poziomą linią).
Strona 30 Rysunek 41. Usuń górną część obrysu: warstwą bieŝącą uczyń obrys, naciśnij skrót Ctrl+K (Edycja Wyczyść). lp. Przykład 1. Ikony menu głównego 2. Ikony następny/poprzedni 3. Szablon witryny w formacie XCF 4. Szablon witryny w formacie PNG
Strona 31 Tabela 1. Przykłady do pobrania