Tworzenie grafiki na potrzeby WWW

Transkrypt

1 Tworzenie grafiki na potrzeby WWW Kluczem do opanowania GIMPa jest biegłe posługiwanie się selekcjami, ścieżkami oraz warstwami. Każde z tych narzędzi znajduje swoje zastosowanie podczas tworzenia witryn internetowych i jest konieczne przy bardziej złożonych projektach. Przekształcenie selekcji w warstwę możemy wykonać na dwa sposoby: stosując operację kopiuj/wklej lub wykorzystując technikę ciągnij-upuść. W obydwu przypadkach mamy do czynienia z tzw. pływającym zaznaczeniem. Pływające zaznaczenie możemy zakotwiczyć (tj. umieścić) na aktywnej warstwie lub przekształcić w nową warstwę. Przejdźmy do przekształcenia warstwy w selekcję. Przekształcenie warstwy w selekcje ma na celu zaznaczenie całej nieprzezroczystej zawartości warstwy. Służy do tego opcja Warstwy -> Zaznaczenie z kanału alfa. Drugim rodzajem przekształceń jest konwersja zaznaczenia w ścieżkę i na odwrót. Przekształcenie warstwy w ścieżkę przebiega następująco: zaznaczamy całą warstwę (Warstwy -> Zaznaczenie z kanału alfa), a następnie przekształcamy zaznaczenie w ścieżkę. Otrzymana ścieżka będzie miała identyczny kształt jak aktywna warstwa. Jak praktycznie wykorzystać opisane przekształcenia? Na przykład do tworzenia ścieżek o kształcie okręgu lub kwadratu. Ponieważ bardzo łatwo otrzymać selekcję okrągłą lub kwadratową, zatem najprostsza metoda otrzymania ścieżki o takim kształcie polega na uzyskaniu zaznaczenia i przekształceniu go w ścieżkę. Przejdźmy do drugiej ważnej sprawy, jaką jest zapamiętywanie selekcji. Wprawdzie kształt selekcji moglibyśmy zapamiętać w ścieżce, nie jest to jednak wygodne, ponieważ powoduje utracenie części informacji dotyczących zaznaczenia. Zaznaczenia charakteryzują się dwoma cechami: kształtem oraz gładkością. Zapamiętanie selekcji w postaci ścieżki powoduje utratę informacji o gładkości. Do zapamiętywania selekcji należy wykorzystać kanały. Dodatkową zaletą jest możliwość łatwego łączenia zapamiętanych ścieżek. Klawisze Ctrl oraz Shift pomogą uzyskać sumę, różnicę lub część wspólną kilku zapamiętanych zaznaczeń. Zapamiętanie bieżącej selekcji wykonamy klikając opcję Zaznaczenie -> Zapisz do kanału.

2 Nagłówek strony WWW Wykonanie przedstawionych nagłówków wymaga umiejętności operowania warstwami, dodawania efektu cienia oraz tworzenia ozdobnych napisów skryptami Script-Fu -> Loga. Ćwiczenie 1 Wykonaj nagłówek strony www "Fotogaleria" przedstawiony na rysunku 1. Przedstawiony nagłówek składa się z czterech elementów: napisu oraz trzech małych fotografii. Każdy z tych elementów umieszczamy na osobnej warstwie. Łącznie obraz posiada więc pięć warstw: białe tło, napis tytułowy oraz trzy warstwy ze zdjęciami. Wybrana czcionka dla napisu tytułowego to Tachoma o kolorze niebieskim. Następnie przystępujemy do wklejenia trzech miniaturowych fotografii. Zauważmy, że każda z fotografii posiada niewielką niebieską krawędź. Kolejno dla każdej fotografii wykonujemy następująca procedurę: otwieramy obraz, skalujemy, dodajemy jednopikselową krawędź. Do skalowania warstw służą narzędzia przekształceń: obracanie, skalowanie, ścinanie, perspektywa.

3 Ćwiczenie 2 Wykonaj nagłówek serwisu poświęconego klockom Lego. Nagłówek ten jest nieco bardziej skomplikowany od nagłówka fotogalerii. Posiada on łącznie 10 warstw: dwie warstwy na napisy "Lego" oraz "technic", dwie warstwy na rysunki helikoptera i samochodu. Każdy z tych elementów posiada cień umieszczony na osobnej warstwie, co daje łącznie osiem warstw. Dodatkowo rysunek posiada białe tło oraz warstwę zawierającą wypełnienie szarym gradientem. Po utworzeniu nowego rysunku dodajemy do niego nową pustą warstwę o rozmiarze równym rozmiarowi rysunku. Warstwę tą wypełniamy szarym gradientem liniowym. Następnie dodajemy do obrazu napisy, czcionka to Comic Sans MS. Po wklejeniu napisów przystępujemy do wycięcia samolotu oraz helikoptera. Do wycięcia elementów wykorzystujemy ścieżki. Gdy ścieżka jest gotowa, przekształcamy ją w zaznaczenie, po czym wykonujemy operację kopiuj/wklej. Po wklejeniu helikoptera skalujemy go do odpowiednich rozmiarów. Podobnie postępujemy z samochodem. Teraz pozostało już tylko dodanie cienia czterech elementów: helikoptera, samochodu oraz dwóch napisów. Ustalamy aktywną warstwę z napisem "Lego", a następnie wykonujemy zaznaczenie z kanału alfa, po czym uruchamiamy filtr Rzucanie cienia. W identyczny sposób dodajemy cień pozostałym trzem elementom.

4 Ćwiczenie 3 Przygotuj stronę tytułową firmy "BEST" przedstawioną na rysunku 3. Przedstawiona strona składa się z niebiesko-białego tła, nazwy opcji, czarnych kropek umieszczonych przy opcjach oraz napisu prezentującego nazwę firmy. Pracę rozpoczynamy od przygotowania tła. Na nowym, pustym rysunku umieszczamy prowadnice wyznaczające środek koła stanowiącego tło. Następnie zaznaczamy duże koło, po czym wykorzystując operację łączenia zaznaczeń dodajemy do koła prostokąt. Teraz zaznaczony obszar powinien odpowiadać białemu fragmentowi tła strony. W celu wypełnienia niebieskiego obszaru farbą odwracamy zaznaczenie, po czym dodajemy nową, przezroczystą warstwę i wypełniamy zaznaczenie na nowej warstwie niebieską farbą. Powinniśmy otrzymać niebieski łuk stanowiący tło. Teraz przystępujemy do dodania opcji "Informacje", "Usługi", "Serwis", "Sklep". Opcje dodajemy za pomocą narzędzia tekstowego. W dokładnym pozycjonowaniu napisów pomogą nam prowadnice. Kolejny element strony to czarne kropki znajdujące się z lewej strony opcji. Kropki te wykonujemy za pomocą zaznaczenia eliptycznego. Klawisze Ctrl oraz Shift modyfikują działanie narzędzia do zaznaczania eliptycznych obszarów w taki sposób, że zaznaczane jest

5 koło o zadanym środku. Wszystkie kropki umieszczamy na jednej warstwie. Po dodaniu do rysunku nowej warstwy ustawiamy prowadnice, następnie zaznaczamy koło i wypełniamy je farbą. Ostatni element strony to nazwa firmy "BEST". Logo firmy tworzymy wykorzystując narzędzie tekstowe. Po dodaniu na osobnej warstwie napisu "BEST" tworzymy zaznaczenie z kanału alfa obejmujące cały napis. Zaznaczenie powiększamy, a następnie wypełniamy niebieską farbą (na nowej warstwie). Tak powstaje niebieskie tło nazwy firmy. Ćwiczenie 4 Przygotuj szkielet strony studia fotograficznego przedstawiony na rysunku 4. Strona "Studio fotograficzne" zawiera: tło składające się z kratek ilustracji, łuk z lewej strony, cień łuku oraz ozdobny napis. Pierwszym etapem pracy będzie przygotowanie kratki szesnastu miniaturowych Ilustracji. Następnie do strony dodajemy łuk. Tworzymy nową warstwę, pomniejszamy kilkukrotnie widok (klawisz -), i zaznaczamy koło o środku leżącym na lewo od rysunku i o dużym promieniu. Tak uzyskane zaznaczenie odwracamy, i wypełniamy białą farbą. Jeżli

6 zmniejszymy nieprzepuszczalność warstwy do około 80%, oraz wyłączymy widoczność innych warstw, wówczas powinniśmy otrzymać obraz Kolejnym etapem pracy jest dodanie cienia rzucanego przez łuk. Ponownie zaznaczamy łuk wykonując operację zaznaczenie z kanału alfa (dla warstwy z łukiem), po czym odwracamy zaznaczenie. Teraz wykonujemy filtr rzucający cień. Ostatnim elementem jaki dodajemy do rysunku jest napis "Fotogaleria". Cwiczenie 5 Przygotuj stronę firmy Maszyny prpzedstawioną na rysunku 5.

7 Strona składa się z nagłówka oraz menu. Nagłówek strony zawiera dwa długie prostokąty rzucające cień na których umieszczono miniaturowe fotografie oraz napisy. Menu strony zawiera kilka prostokątów rzucających cień i napisy. Główną trudnością w wykonaniu strony stanowią prostokąty. Prostokąty tworzymy za pomocą selekcji prostokątnej z wykorzystaniem prowadnic. Pracę rozpoczynamy od dokładnego ustawienia prowadnic, po czym kolejno zaznaczamy prostokąty. Prostokąty wypełniamy gradientem liniowym, a następnie dodajemy do rysunku cień. Kolejnym krokiem jest dodanie do rysunku miniaturowych fotografii koparki oraz lokomotywy. Otwieramy plik przedstawiający koparkę, zaznaczamy całość (Ctrl+A), kopiujemy (Ctrl+C), wklejamy do tworzonej strony firmy "Maszyny" (Ctrl+V) i umieszczamy na osobnej warstwie (Ctrl+L, Ctrl+N). Tak umieszczoną warstwę skalujemy. Po przeskalowaniu zdjęcia koparki do żądanych rozmiarów zmieniamy kolorystykę warstwy stosując najpierw opcję Obraz -> Kolory -> Desaturacja, a następnie Balans kolorów. Pamiętajmy, e zarówno desaturacja jak i balans kolorów odnoszą się do bieżącej warstwy. Po dodaniu miniaturki z lokomotywą pozostało nam jedynie umieszczenie napisów i efektu cienia, jaki rzucają napisy. Stosujemy narzędzie tekstowe oraz filtr Rzucanie cienia.

8 Cwiczenie 6 Przygotuj stronę tytułową serwisu poświęconego językowi Logo, przedstawioną na rysunku 6. Rys. 6

9 Strona składa się z kilku napisów, ramki tworzącej menu i posiada niebieskie tło. Po utworzeniu nowego obrazu, zaznaczamy całą warstwę tło (Ctrl+A) i wypełniamy ją kolorem niebieskim (Skrót Ctrl+.). Ramkę wykonujemy z wykorzystaniem ścieżek. Ustalamy prowadnice tak jak na rysunku 6 c, po czym dodajemy do rysunku ścieżkę widoczną na rysunku 6 b. Gdy ścieżka jest gotowa, przekształcamy ją w zaznaczenie, a następnie wypełniamy kolorem ciemnoniebieskim. Po wypełnieniu kolorem obrysowujemy ścieżkę naciskając przycisk Rysuj ścieżkę z zaznaczenia znajdujący się w dolnej części okna dialogowego ścieżek. Ponownie przekształcamy ścieżkę w zaznaczenie i dodajemy efekt cienia. Pozostało nam jeszcze dodanie napisów opcji. Skorzystanie z narzędzia tekstowego i dodanie efektu cienia do napisów kończy ćwiczenie. Cwiczenie 7 Przygotuj witrynę sklepu Animal przedstawioną na rysunku 7.

10 Rys. 7 Cwiczenie 8 Przygotuj grafikę na witrynę internetową pokazaną na rysunku 8.

11 Rys. 8