GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 1 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Włodzimierz Gajda Po szczegółowym omówieniu selekcji, ście\ek oraz warstw nadszedł czas na połączenie wszystkich elementów. Dzisiejszy zestaw ćwiczeń zaprezentuje podstawowe techniki projektowania szaty graficznej witryny WWW. 1 kwietnia 2004 r. Spis treści 1. Selekcje, ście\ki oraz warstwy 2. Nagłówek strony WWW 2.1 Ćwiczenie 1 2.2 Ćwiczenie 2 3. Projekt szaty graficznej witryny WWW 3.1 Ćwiczenie 3 3.2 Ćwiczenie 4 3.3 Ćwiczenie 5 3.4 Ćwiczenie 6 3.5 Ćwiczenie 7 3.6 Ćwiczenie 8 3.7 Ćwiczenie 9 3.8 Ćwiczenie 10 3.9 Ćwiczenie 11 3.10 Ćwiczenie 12 http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 2 4. Podsumowanie 1. Selekcje, ście\ki oraz warstwy 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. Zanim przejdziemy do wykonywania ćwiczeń, zatrzymajmy się przy operacjach łączących ście\ki, warstwy i selekcje. Rozpocznijmy od przekształcania selekcji w warstwę i na odwrót. 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ę. Tworzenie pływającej selekcji często wprawia początkujących u\ytkowników GIMPa w zakłopotanie. Pamiętajmy, \e operacja cofnij usunie wszelkie zmiany w rysunku przywracając poprzedni jego stan. Zwróćmy równie\ uwagę, \e operacja kopiuj/wklej umo\liwia skopiowanie zawartości aktywnej warstwy lub warstw widocznych. Po wklejeniu, w obrazie pojawia się pływająca selekcja o kształcie i zawartości odpowiadającej bie\ącemu zaznaczeniu. Przejdzmy 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. Do tego słu\ą przyciski Tworzy zaznaczenie ze ście\ki oraz Tworzy ście\kę z zaznaczenia dostępne w oknie dialogowym ście\ek. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 3 Aącząc przekształcenia zaznaczenia w warstwy oraz ście\ek w zaznaczenia mo\emy oczywiście uzyskać przekształcenie ście\ki w warstwę i na odwrót. W celu przekształcenia ście\ki w warstwę wystarczy ście\kę przekształcić w zaznaczenie, a następnie wykonać operacje kopiuj/wklej. W ten sposób otrzymamy warstwę o kształcie odpowiadającym kształcie ście\ki. Przekształcenie odwrotne, 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ę. Tyle, jeśli chodzi o przekształcenia. Przejdzmy 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. Ostatnią wa\ną rzeczą, na jaką chciałbym zwrócić uwagę we wstępie jest fakt, \e wszystkie operacje edytorskie dotyczą aktualnej selekcji oraz warstwy. Jeśli na przykład malujemy pędzlem, wówczas ślady pędzla zostają umieszczone na warstwie aktywnej nawet, jeśli jest ona niewidoczna. Ponadto pędzel nie wyjedzie poza brzeg aktywnej warstwy ani bie\ącej selekcji. Narzędzia edycyjne (np. pędzel, ołówek, wypełnianie farbą) malują po aktywnej warstwie. Dzieje się tak nawet wówczas, gdy jest ona niewidoczna. Zasięg narzędzia jest ograniczony przez rozmiar aktywnej warstwy oraz selekcji. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 4 Ście\ki mo\emy przekształcać w selekcje, zaś selekcje - w ście\ki. Ponadto mo\liwe jest dokonanie konwersji zaznaczenia w kształt warstwy oraz nieprzezroczystej zawartości warstwy w zaznaczenie. Selekcje charakteryzuje kształt oraz miękkość krawędzi. Do zapisywania selekcji słu\ą kanały. Kilka selekcji zapisanych w kanałach łatwo połączyć wykonując sumę, ró\nicę bądz część wspólną za pomocą klawiszy Ctrl oraz Shift. 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. 2.1 Ć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. Aącznie obraz posiada więc pięć warstw: białe tło, napis tytułowy oraz trzy warstwy ze zdjęciami. Napis "FOTOGALERIA" wykonujemy przy u\yciu skryptu Dodatki | Script-Fu | Loga | Proste I. Wybrana czcionka to Tachoma o kolorze niebieskim. Po wykonaniu napisu, wyłączamy widoczność warstwy tło, spłaszczamy obraz i kopiujemy do przygotowywanego nagłówka. Następnie przystępujemy do wklejenia trzech miniaturowych fotografii. Zauwa\my, \e ka\da z fotografii posiada niewielką niebieską krawędz. Krawędz dodamy do obrazu korzystając ze skryptu Script-Fu | Dekoracje | Dodaj krawędz. Kolejno dla ka\dej fotografii wykonujemy następująca procedurę: otwieramy obraz, skalujemy do rozmiarów 200x150 pikseli, dodajemy jednopikselową krawędz, spłaszczamy obraz (krawędz znajduje się na http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 5 osobnej warstwie), kopiujemy i wklejamy do przygotowywanego nagłówka. Po wklejeniu skalujemy wklejoną warstwę zmniejszając nieco jej rozmiary w taki sposób, by ka\da z wklejonych miniatur miała inny rozmiar. Do skalowania warstw słu\y narzędzie przekształceń: Obracanie, skalowanie, ścinanie, perspektywa. Domyślnie aktywną opcją jest obracanie. Działanie narzędzia zmienimy podwójnie klikając w jego przycisk w oknie głównym GIMPa. Rysunek 1. Baner serwisu "Fotogaleria" 2.2 Ć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. Wykorzystany skrypt to ponownie Dodatki | Script-Fu | Loga | Proste I, zaś czcionka to Comic Sans MS. Po wklejeniu napisów przystępujemy do wycięcia samolotu oraz helikoptera z instrukcji Lego. 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. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 6 Teraz pozostało ju\ tylko dodanie cienia czterech elementów: samolotu, samochodu oraz dwóch napisów. Ustalamy aktywną warstwą warstwę z napisem "Lego", a następnie wykonujemy zaznaczenie z kanału alfa, po czym uruchamiamy skrypt Script-Fu | Cień | Rzucany cień. W identyczny sposób dodajemy cień pozostałym trzem elementom. Rysunek 2. Nagłówek witryny "Lego Technic" 3. Projekt szaty graficznej witryny WWW 3.1 Ć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. Rysunek 3.b przedstawia dwa zmniejszone zaznaczenia, które tworzą białe tło. 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. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 7 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 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. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 8 http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 9 Rysunek 3. Strona firmy "BEST" 3.2 Ćwiczenie 4 Przygotuj szkielet strony studia fotograficznego przedstawiony na rysunku 4. Strona "Studio fotograficzne" zawiera: tło składające się z kratki ilustracji, łuk z lewej strony, cień łuku oraz ozdobny napis. Pierwszym etapem naszej pracy będzie przygotowanie kratki szesnastu miniaturowych ilustracji. Ćwiczenie to zostało szczegółowo opisane w poprzednim odcinku. 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 zmniejszymy nieprzepuszczalność warstwy do około 80%, oraz wyłączymy widoczność innych warstw (Shift-klik w wybraną warstwę), wówczas powinniśmy otrzymać obraz przedstawiony na rysunku 4.b. 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 skrypt rzucający cień. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 10 Ostatnim elementem, jaki dodajemy do rysunku jest napis "Fotogaleria" tworzony jednym ze skryptów Dodatki | Script-Fu | Loga. Rysunek 4. Serwis studia fotograficznego 3.3 Ćwiczenie 5 http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 11 Przygotuj stronę firmy "Maszyny" przedstawioną na rysunku 5. 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ść 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 tak jak to pokazano na rysunku 5.b. 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 wykorzystując opcję Narzędzia | Przekształcenia | Przekształć (w zale\ności od ustawień programu mo\e być konieczna zmiana bie\ącego przekształcenia Narzędzia | Okna dialogowe | Opcje narzędzia). Po przeskalowaniu zdjęcia koparki do \ądanych rozmiarów zmieniamy kolorystykę warstwy stosując najpierw opcję Obraz | Kolory | Desaturacja, a następnie okno dialogowe Obraz | Kolory | 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 skrypt Rzucany cień. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 12 Rysunek 5. Strona spółki "Maszyny S. C." 3.4 Ćwiczenie 6 Przygotuj stronę tytułową serwisu poświęconego językowi "Logo" przedstawioną na rysunku 6. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 13 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 to przedstawiono 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 Rysuje ście\kę 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. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 14 http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 15 Rysunek 6. Zbiór zadań z języka Logo 3.5 Ćwiczenie 7 Przygotuj stronę tytułową serwisu poświęconego językowi "Logo" przedstawioną na rysunku 7. Ćwiczenie to wykonujemy niemal identycznie jak ćwiczenie poprzednie. Rozpoczynamy od tła. Strona posiada tło zawierające dwuliniowy gradient przechodzący od koloru \ółtego poprzez biały z powrotem do \ółtego. Po wyświetleniu okna dialogowego modyfikującego właściwości gradientu ustalamy Gradient: dwuliniowy. Gdy tło jest gotowe dodajemy do rysunku ście\kę. Kształt ście\ki został przedstawiony na rysunku 7.b. Gotową ście\kę przekształcamy w zaznaczenie i wypełniamy kolorem \ółtym, po czym dodajemy efekt cienia. Na zakończenie, wykorzystując narzędzie tekstowe dodajemy nazwy opcji. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 16 Rysunek 7. Druga wersja zbioru zadań "Logo" 3.6 Ćwiczenie 8 Przygotuj stronę poświęcona programowi "NotH" widoczną na rysunku 8. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 17 Ćwiczenie numer 8 zawiera następujące elementy: czarny poziomy pas, cienką, czarną kreskę pionową z poziomymi odnogami, dwukolorowy napis "NotH" oraz napis gajdaw. Ćwiczenie rozpoczynamy od umiejscowienia prowadnic tam, gdzie ma się znalezć czarny poziomy pas i cienkie czarne kreski. Umiejscowienie prowadnic ilustruje rysunek 8.c. Następnie rysujemy czarny pas. Wykorzystujemy do tego zaznaczenie prostokątne oraz wypełnianie farbą. W celu dodania delikatnego cienia, jaki rzuca czarny pas, wykonujemy skrypt Rzucany cień. Teraz przechodzimy do cienkich kresek. Rysujemy je wykorzystując ście\ki. Dodajemy do rysunku sześć ście\ek, będących liniami prostymi tak, by po wykonaniu operacji Rysuj ście\kę otrzymać kreski przedstawione na rysunku 8.b. Po narysowaniu cienkich czarnych kresek na osobnej warstwie wykonujemy operację Zaznaczenie z kanału alfa, po czym wykonujemy skrypt tworzący cień zaznaczenia. W ten sposób kreski zostaną wzbogacone o cień. Ostatni etap pracy to dwukolorowy napis "NotH". Napis ten tworzymy następująco. Dodajemy czarny napis "NotH" na osobnej warstwie. Zaznaczamy cały napis stosując opcję Zaznaczenie z kanału alfa. Wykorzystując prowadnice, zaznaczenie prostokątne oraz klawisz Ctrl usuwamy górną połowę zaznaczenia. Dodajemy nową warstwę, po czym wypełniamy na niej selekcję (pokrywająca w tym momencie dolną część napisu "NotH") kolorem białym. Powinnyśmy otrzymać napis dwukolorowy. Cień napisu "NotH" dodajmy zaznaczając cały napis (ponownie selekcja z kanału alfa dla warstwy z czarnym napisem "NotH") i uruchamiając skrypt Rzucany cień Ćwiczenie kończymy dodając napis "gajdaw" w lewej części strony. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 18 http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 19 Rysunek 8. Strona programu "NotH" 3.7 Ćwiczenie 9 Przygotuj witrynę sklepu "Animal" widoczną na rysunku 9. Ćwiczenie to prezentuje wykorzystanie wspomnianej we wstępie metody zapisywania zaznaczeń w kanałach. Głównym elementem strony jest \ółto-czerwone tło. Ponadto strona składa się z napisów tytułowych "Animal" oraz "sklep zoologiczny" . Napisy te są nieco obrócone. W dolnej części strony zostały umieszczone napisy "gady", "ptaki", itd. Tło strony wykonamy wykorzystując kanały. Wykonujemy zaznaczenie widoczne na rysunku 9.b. Zaznaczenie to jest du\ym okręgiem, którego środek le\y daleko poza prawą krawędzią obrazu. Wykonane zaznaczenie odwracamy (Zaznaczenie | Odwróć), a następnie na nowej warstwie wypełniamy kolorem czerwonym. Powinniśmy otrzymać obraz widoczny na rysunku 9.b. Bie\ące zaznaczenie zapisujemy wykonując operację Zaznaczenie | Zapisz do kanału. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 20 Przechodzimy do łuku widocznego na rysunku 9.c. Wykonujemy zaznaczenie eliptyczne o kształcie koła, którego środek le\y daleko poni\ej dolnej krawędzi obrazu. Następnie zaznaczenie odwracamy i zapisujemy do kanału (Zaznaczenie | Zapisz do kanału). Teraz dodajemy nową warstwę i wypełniamy ją kolorem czerwonym. Górny \ółty naro\nik namalujemy wykonując część wspólna dwóch zapamiętanych zaznaczeń. Przechodzimy do okna kanałów: Warstwy | Warstwy, kanały i ście\ki, zakładka Kanały (skrót: Ctrl+L). Wybieramy jedną z zapamiętanych selekcji i naciskamy przycisk Tworzy zaznaczenie z kanału dostępny w dolnej części okna dialogowego. Powinniśmy otrzymać pierwszą selekcję. Następnie przechodzimy na drugą selekcję i przytrzymując klawisze Ctrl oraz Shift (w stosunku do selekcji klawisze te tworzą część wspólną) ponownie naciskamy guzik Tworzy zaznaczenie z kanału. Otrzymane zaznaczenie powinno odpowiadać górnemu, lewemu naro\nikowi. Dodajemy nową warstwę i wypełniamy zaznaczenie kolorem \ółtym. Dolny \ółty fragment strony to odwrócona suma dwóch pierwszych zaznaczeń przedstawionych na rysunkach 9.b oraz 9.c. Zatem usuwamy zaznaczenie (Ctrl+Shift+A) i przechodzimy do okna kanałów (Ctrl+L). Uzyskujemy zaznaczenie z pierwszego z zapamiętanych kanałów, po czym przechodzimy do drugiego kanału i przytrzymując klawisz Shift, który powoduje sumowanie zaznaczeń, naciskamy przycisk Tworzy zaznaczenie z kanału. Po odwróceniu, otrzymane zaznaczenie powinno pokrywać dolny \ółty fragment strony. Dodajmy nową warstwę i wypełniamy zaznaczenie kolorem \ółtym. Powinniśmy otrzymać cztery warstwy, które przedstawiają tło widoczne na rysunku 9.d. Obrócone napisy "Animal" oraz "sklep zoologiczny" wykonujemy stosując narzędzie tekstowe i umieszczając napisy na osobnych warstwach. Do obracania warstwy słu\y narzędzie Obracanie, skalowanie, ścinanie, perspektywa. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 21 http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 22 Rysunek 9. Witryna sklepu "Animal" 3.8 Ćwiczenie 10 Przygotuj stronę WWW poświęconą literaturze przedstawioną na rysunku 10. Strona ta składa się z następujących elementów: tło przedstawiające obrócony tekst opowiadania "Zew krwi", http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 23 brązowe tło rozjaśnione w miejscach przeznaczonych na opcje i blednące ku dołowi, brązowe kreski oddzielające nagłówek strony, lewe oraz prawe menu, napisy. Wykonanie ćwiczenia rozpoczynamy od tła strony. Otwieramy plik tekstowy z opowiadaniem "Zew krwi" dowolnym edytorem (np. programem notatnik). Zwiększamy okno edytora na cały ekran, a następnie kopiujemy wygląd okna do schowka naciskając klawisze Alt-PrintScreen. Zawartość okna została skopiowana do schowka. Teraz w programie GIMP wykonujemy operację wklejania ze schowka: Edycja | Wklej ze schowka. Poniewa\ wklejony obraz zawiera oprócz tekstu powieści równie\ ramkę okna i menu główne, zatem zaznaczamy fragment obrazu zawierający wyłącznie tekst utworu, kopiujemy i wklejamy do przygotowywanej witryny. Wklejony obraz umieszczamy na osobnej warstwie. Następnie warstwę nieco obracamy i zmniejszamy jej nieprzepuszczalność. W ten sposób otrzymaliśmy tło witryny zawierające tekst opowiadania. Przystępujemy do dodania brązowej poświaty znikającej ku dołowi. Wykorzystując odpowiednio rozmieszczone prowadnice tworzymy zaznaczenie przedstawione na rysunku 10.b. Zaznaczenie to składa się z trzech prostokątów. Po otrzymaniu zaznaczenia będącego sumą trzech prostokątów wygładzamy zaznaczenie (Zaznaczenie | Wygładz), po czym je odwracamy. Teraz zaznaczony obszar wypełniamy gradientem zmieniającym się od brązowego do białego. Następnie wykorzystując prowadnice i ście\ki dodajemy do rysunku brązowe kreski. Ćwiczenie kończymy umieszczając napisy "Literatura", "Autorzy", "Utwory", "Proza" oraz "Poezja" wykonane skryptami z menu Loga. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 24 Rysunek 10. Serwis poświęcony literaturze 3.9 Ćwiczenie 11 Przygotuj witrynę "TIK-TAK" przedstawioną na rysunku 11. Witryna "TIK-TAK" składa się dwóch zielonych łuków, napisu "TIK-TAK" oraz czterech fotografii. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 25 Najtrudniejszym elementem są dwa zielone łuki. Auk dolny wykonamy zaznaczając koło o du\ym promieniu i o środku le\ącym du\o poni\ej dolnej krawędzi obrazu. Współrzędna X środka zaznaczenia wypada w połowie szerokości obrazu. Po otrzymaniu zaznaczenia wypełniamy je na osobnej warstwie kolorem zielonym. Górny łuk otrzymamy kopiując łuk dolny i odpowiednio przekształcając. Zduplikujmy warstwę zawierającą dolny łuk, a następnie odbijmy ją pionowo (Narzędzia | Przekształcenia | Odbij; nale\y przytrzymać klawisz Ctrl). Jeśli teraz przesuniemy otrzymaną warstwę do góry i umieścimy na środku strony wówczas otrzymamy obraz przedstawiony na rysunku 11.b i składający się z trzech warstw: białego tła, dolnego łuku i górnego łuku. Stosując narzędzie tekstowe dodajemy do rysunku napis "TIK-TAK". Ostatni etap pracy stanowi dodanie czterech kwadratowych fotografii. Dla ka\dej fotografii z osobna wykonujemy następującą procedurę: otwieramy zdjęcie, skalujemy obraz (Obraz | Skaluj obraz) tak, by interesujący nas fragment fotografii mieścił się w kwadracie 150x150 pikseli, wykorzystując narzędzie Kadrowanie i zmiana rozmiaru zmieniamy rozmiar obrazu na 148x148 pikseli, dodajemy jednopikselową ramkę do obrazu (Script-Fu | Dekoracje | Dodaj krawędz); dodanie ramki jednopiselowej zwiększy rozmiar obrazu do wymiarów 150x150px, spłaszczamy obraz, usuwamy kolory: Obraz | Kolory | Desaturacja, zmieniamy balans kolorów Obraz | Kolory | Balans kolorów, kopiujemy obraz i wklejamy do przygotowywanej strony. Po wklejeniu czterech jednobarwnych obrazów o rozmiarach 150x150 pikseli pozostało jedynie dodanie prowadnic i odpowiednie rozmieszczenie wklejonych zdjęć. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 26 Rysunek 11. Witryna "TIK-TAK" 3.10 Ćwiczenie 12 Przygotuj witrynę "Nadleśnictwo" przedstawioną na rysunku 12. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 27 Witryna nadleśnictwo składa się z tła, napisu "Nadleśnictwo" i kwadratów znajdujących się z lewej strony, z trzech pionowych fotografii drzew, napisów "Zasoby", "Ludzie", "Lasy" znajdujących się na tle wypełnionym gradientem oraz białego kwadratu przeznaczonego na treść strony. Tło strony stanowi zdjęcie o bladozielonych kolorach. Na warstwie tło umieszczamy fotografię, następnie dodajemy warstwę, którą wypełniamy kolorem zielonym. Warstwa zielona przysłania warstwę ze zdjęciem. Zmniejszając nieprzezroczystość warstwy zielonej osiągniemy efekt widoczny na tle strony "Nadleśnictwo". Teraz wklejamy trzy wycięte fotografie drzew o wymiarach 100x300 pikseli. Za pomocą narzędzia tekstowego pod fotografiami umieszczamy napisy. Tło ka\dego z napisów stanowi prostokąt wypełniony gradientem. Zaznaczamy prostokąt o odpowiednim kształcie, dodajemy nową przezroczystą warstwę i wypełniamy ją gradientem. Tak otrzymane tło przesuwamy pod warstwę z napisem. Ostatni element witryny to biały kwadrat o rozmytym brzegu. Zaznaczamy selekcję kwadratową, rozmywamy jej brzeg, po czym na nowej warstwie wlewamy w nią kolor biały. Rysunek 12. Strona "Nadleśnictwo" http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36 GIMP: tworzenie grafiki na potrzeby WWW (część 5) Strona 28 4. Podsumowanie Dzisiejsza seria ćwiczeń łączy operacje na warstwach, selekcjach i ście\kach. Płynne wykonywanie zadań takich jak kopiowanie i wklejanie fragmentów, precyzyjne pozycjonowanie warstw, selekcji i ście\ek za pomocą prowadnic, skalowanie rysunków do \ądanych rozmiarów w taki sposób, by wymagany fragment ilustracji był w całości umieszczony na przeskalowanym obrazie stanowi abecadło pracy projektanta strony WWW. http://www.gajdaw.pl/gimp/kurs-witryny-www/print.html 2008-02-27 19:44:36