jakToZrobic_w_GIMP

Przepisy czyli jak TO zrobić w GIMP-ie Do korzystania z hiperłącz w dokumencie niezbędne są pliki umieszczone w tym samym katalogu: gimp0.pdf; poznaj−wilbera.pdf; 001−1617.htm; 001−16.gif; 001−17.gif Copyright c© 2001 by Maciej Jezierski. All rights reserved. Wszystkie prawa zastrzeżone. Spis treści 1 Jak tworzyć gify animowane i statyczne, a także jak uzyskać przezroczystość? 1 2 Jak stworzyć efektowny napis, oraz jak pisać po okręgu? 6 3 Skanowanie i kolorowanie rysunków 8 4 Cięcie i mapowanie obrazka na potrzeby www 13 5 Kolorowanie czarnobiałych zdjęć 17 6 Mapowanie wypukłości czyli wyciskanie z obiektów trzeciego wymiaru 19 7 Wtapianie (zmiękczanie) krawędzi dowolnych obiektów 24 8 Formaty plików — krótko o tym jak zapisywać grafikę 30 8.1 Format gimpowy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 8.2 Formaty do zastosowań sieciowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 8.3 Inne formaty plików . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 9 Jak wypełnić tekst obrazem? 34 1 JAK TWORZYĆ GIFY ANIMOWANE I STATYCZNE, A TAKŻE JAK UZYSKAĆ PRZEZROCZYSTOŚĆ? 1 Jak tworzyć gify animowane i statyczne, a także jak uzyskać prze- zroczystość? Uwaga: Przed przystąpieniem do nauki bardzo ważna informacja. Z powodów licencyjnych, GIMP (przynajmniej pod Windowsem) nie jest wyposa- żony w obsługę GIF-ów ani TIFF-ów z kompresją LZW. Firma UNISYS w 1999 roku zwietrzyła interes i jako że patent na kompresję LZW należy do nich, wprowadziła opłaty dla producentów oprogramowania wykorzy- stujących ten algorytm. Sprawa jest dokładnie opisana (po angielsku) na stronie: „Burn All GIFs” http://burnallgifs.org/, a tu jest adres do strony z opisem licencji na GIF-y: http://www.unisys.com/unisys/lzw/ Nie wiem, czy w Polsce obowiązuje to ograniczenie licencyjne, ale podejrzewam, że tak. Pod adresem: http://www.iki.fi/tml/gimp/win32/lzw-plugins-20001226.zip dostępne są trzy plug-iny (gif.exe, gifload.exe, tiff.exe). Trzeba je prze- kopiować do folderu zawierającego inne pluginy GIMP-a (dotyczy wersji dla Win- dows). Standardowo jest to folder GIMP\plug-ins. Należy także usunąć stamtąd plik tiff−nolzw.exe. Po ponownym uruchomieniu programu będziemy mie- li możliwość odczytywania i zapisywania GIFów (w tym również animowanych) i TIFF-ów (kompresowanych metodą LZW, bo te bez kokompresji są czytane nawet bez nowego pluginu). Najlepiej od razu ściągnąć też łatkę do samego programu (plik gimp.exe) ze strony: http://www.signs.pl/download.php?dcategory=Uaktualnienia&sortby= i skopiować go do katalogu gimp\bin (nadpisać już istniejacy plik), to zapobiegnie wywalaniu się GIMP-a przy zamykaniu niezapisanych obrazków. GIF-y można zapisywać na 100% ale nie wybierajcie z listy rozszerzenia (jest wyszarzone) tylko piszcie nazwę pliku i odpowiednie rozszerzenie — nazwa.gif a program sam zapisze plik w odpowiednim formacie. 1 1 JAK TWORZYĆ GIFY ANIMOWANE I STATYCZNE, A TAKŻE JAK UZYSKAĆ PRZEZROCZYSTOŚĆ? Po tym wstępie możemy zabrać się do roboty. Stworzymy prosty animowany banner. Pamiętajcie by pracę zapisać w formacie GIMP-a xcf i jako RGB (konwersję na GIF-a wykonujemy na samym końcu), dzięki temu oryginał bedzie zawsze miał najwyższą jakość. 1. Stwórzmy nowy obrazek o rozmiarach bannera 468x60 pikseli 2. Kolejne klatki animacji są po prostu kolejnymi warstwami obrazka, warstwa Background jest pierw- szą klatką naszego bannera. Zrobię 5 klatek: Background — pierwsza klatka: Frame_02 — druga klatka: Frame_03 — trzecia klatka: Frame_04 — czwarta klatka: Frame_05 — piąta klatka: 3. Mamy już wszystkie klatki ale jeszcze została najważniejsza rzecz jaką jest określenie czasu trwania wyświetlania poszczególnych klatek, oraz jak mają się pojawiać (czy zawartość klatki ma być dodawana do poprzedniej, czy ma ją zastępować). Czas wyrażamy w milisekundach (ms). 100 ms to 0,1 sekundy czyli 1000 ms to 1 sekunda. Sposób pojawiania się klatek określa wpis replace i combine. Replace — zastępowanie poprzedniej klatki bieżącą. Combine — dołącza bieżącą klatke do poprzedniej. Zawsze określajcie czas i sposób zastępowania klatek, a unikniecie przykrych niespodzianek! Wszystkie te parametry wpisujemy w nawiasach za nazwą warstwy tak jak poniżej. W naszym przykładzie 4 pierwsze klatki będa wy- świetlane 1 sekundę a ostatnia 2 sekundy, pierwsze 4 klatki będą do siebie dodawane a piąta klatka bę- dzie je wszystkie zastępować, pierwsza klatka nawet gdy nie zdefiniujemy tego, zawsze zastępuje ostatnią. Czyli powinniśmy tak nazywać nasze warstwy (bez spacji) jak poniżej: Background(1000ms)(replace) Frame_02(1000ms)(combine) Frame_03(1000ms)(combine) Frame_04(1000ms)(combine) Frame_05(2000ms)(replace) 2 1 JAK TWORZYĆ GIFY ANIMOWANE I STATYCZNE, A TAKŻE JAK UZYSKAĆ PRZEZROCZYSTOŚĆ? 4. Możemy obejrzeć sobie naszą animację przed jej zapisaniem wybierając filtr Animation Playback (Filters/Animation /Animation Playback) i ewentualnie skorygować czasy dla poszczególnych klatek: 5. Gdy jesteśmy zadowoleni zmieniamy pa- letę kolorów na indeksowaną (ALT+I), ja użyłem 256 kolorów bez ditheringu (No Color Dithering): 6. Możemy teraz zoptymalizować naszą animację filtrem Animation Optimize (Filters/Animation/Animation Optimize), usuniemy w ten sposób powtarzające się piksele. A oto efekt optymalizacji, możemy zauważyć, że klatka pierwsza i ostatnia pozostały bez zmian, a z klatek 2,3 i 4 zostały usunięte powtarzające się piksele (ponieważ zawartość tych klatek dodajemy do pierwszej — combine), dzięki czemu nasza animacja zajmie mniej miejsca: Background — pierwsza klatka: Frame_02 — druga klatka: Frame_3 — trzecia klatka: Frame_04 — czwarta klatka: Frame_05 — piąta klatka: 3 1 JAK TWORZYĆ GIFY ANIMOWANE I STATYCZNE, A TAKŻE JAK UZYSKAĆ PRZEZROCZYSTOŚĆ? 7. Teraz zapisujemy naszego gifa. Nazywa- my go jakoś i jak wspominałem na po- czątku nie szukajmy na liście rozszerzeń formatu gif tylko napiszmy nazwę, kropkę i rozszerzenie gif, klikamy OK i wyskoczy nam okienko dające możliwość albo złą- czenia wszystkich warstw (to nas nie in- teresuje), lub zapisania obrazka jako ani- macji — Save as Animation (wybieramy właśnie tę opcję): Klikamy Export i wyskakuje kolejne okienko Save as GIF możemy dodać progresyw- ne pojawianie się obrazka (Interlace), komentarz (GIF Comment), czy ani- macja ma trwać wieczność (Loop forever), i jak mają zachowywać się niezdefinio- wane klatki (jak długo mają trwać i jak się pojawiać) dlatego zalecam, by przed zapisywaniem gifów definio- wać w nazwie warstwy, czas i sposób pojawiania się klatek: 8. A oto efekt końcowy, tu są dwa bannery: górny — zoptymalizowany około 20KB (może miałby mniej gdybym zmniejszył paletę kolorów). dolny — nieoptymalizowany nie różni się wizualnie właściwie niczym ale waży około 37KB (ma nadmiar pikseli). A tu jest plik źródłowy xcf tego bannera. 9. Jak poprawnie tworzyć przezroczystość GIF-a? Przedstawię to na przykładzie napisu GIMP, który ma kolor czarny i chcemy by dobrze wyglądał na tle o kolorze FFCC00 (RGB 255,204,0). Pewnie większość z Was utworzyłaby przezroczysty plik, napisała GIMP, zmieniła paletę kolorów na in- deksowaną (ALT+I) i zapisała to jako GIF. Prawda? 4 1 JAK TWORZYĆ GIFY ANIMOWANE I STATYCZNE, A TAKŻE JAK UZYSKAĆ PRZEZROCZYSTOŚĆ? I wyjdzie nam napis postrzępiony, jednym słowem ohyda (patrz obok): A należy zrobić tak: Tworzymy napis na warstwie powyżej warstwy Background, warstwę Background kasujemy z pa- lety warstw i na takim tle, na jakim ma być umiesz- czony nasz GIF, różdżką (lub select/By Color) za- znaczamy tło (wartość Threshold=15): i kasujemy zaznaczone tło (CTRL+K), otrzymamy czarny napis z krawędziami na których zostały też piksele w kolorze pośrednim między czarnym a tłem (na powiększeniu po prawej widać to lepiej): A na dole zestawienie, po lewej ten ohydny postrzępiony GIF a po prawej robiony tym drugim sposobem (piękny i gładki): Spis treści 5 2 JAK STWORZYĆ EFEKTOWNY NAPIS, ORAZ JAK PISAĆ PO OKRĘGU? 2 Jak stworzyć efektowny napis, oraz jak pisać po okręgu? Efektowne napisy w GIMP-ie może tworzyć dosłownie każdy, leń czy totalne beztaleńcie w dziedzinie grafiki. Nie nadużywajcie ich, bo choć są fajne to stosowane w nadmiarze mogą przynieść odmienny skutek od zamierzonego. Wszystko to jest możliwe dzięki mini programikom tzw. Script-Fu, żeby się do nich dostać klikamy menu Xtns (Rozszerzenia) na palecie głównej GIMP-a i wybieramy Script-Fu/Logos (nie wybierajcie Logosów z menu obrazka, bo nie będą dobrze działały). Efektem działania skryptów z sekcji Logos będą nowe pliki z odpowiednimi napisami umieszczonymi na warstwach, dzięki czemu możemy skopiować taki napis i wkleić go do dowolnego obrazka. Wszystkich efektów jest 30, więc mamy z czego wybierać. Moja rada: Używajcie fontów dużych rozmiarów i raczej „grubych”, da to lepsze rezultaty. Po wybraniu jakiegokolwiek ze skryptów, wyskoczy okienko z opcjami jakimi można manipulować, które są różne dla poszczególnych efektów. Obok jest pokazane okienko dla skryptu Bovination, który tworzy napis łaciaty jak krowa. W polu Text wpisujemy nasz napis, Font size decyduje o rozmia- rze, Font o kroju napisu, Spot density o zagęszczeniu łat w pionie i poziomie, Background Color decyduje o kolorze tła: Oto efekt działania skryptu Bovination: A to skrypt Cristal (można w opcjach określić teksturę, przezroczystość itp.): Skrypt Cool Metal: Skrypt 3D Outline: 6 2 JAK STWORZYĆ EFEKTOWNY NAPIS, ORAZ JAK PISAĆ PO OKRĘGU? Nie będę tu przedstawiał efektu działania wszystkich skryptów, bo nie ma to więk- szego sensu, poeksperymentujcie sami. Pisanie po okręgu Skrypt Text Circle z sekcji Logos służy do umieszczania tekstu na okręgu. Okienko dialogowe wygląda tak: W polu Text wpisujemy tekst, jaki ma zostać umieszczony na okręgu, Radius określa promień okręgu w pikselach, Start Angle ustawia punkt początkowy napisu (jeśli kąt wynosi zero to początek napisu jest na godzinie 12, jeśli −90 to na godzinie dziewiątej itd.), Fill Angle określa czy napis ma być rozstrzelony na całym obwodzie okręgu (360 stopni), czy też ma się zmieścić na mniejszym wycinku obwodu. Font Size — rozmiar fontu, Antialias — wygładzanie liter, Font wybieramy krój pisma, czasem może się zdarzyć (pod Windows), że jeśli font ma wiele stron kodowych, to GIMP nie wykona pomyślnie zadania póki nie wybierzemy strony kodowej iso88591: Poniżej przykłady tego samego napisu (font Arial, rozmiar 20, promień koła 80) z różnymi parametrami Start Angle i Fill Angle (linia żółto-czarna pokazuje granicę warstwy z napisem). Start Angle = 0 Fill Angle = 360 Start Angle = −90 Fill Angle = 360 Start Angle = −127 Fill Angle = 260 Spis treści 7 3 SKANOWANIE I KOLOROWANIE RYSUNKÓW 3 Skanowanie i kolorowanie rysunków Czasem lepiej (i wygodniej) jest stworzyć rysunek na kartce papieru a dopiero potem wskanować go i pokolorować. Jak skanować? Jeśli rysunek ma być użyty jako grafika sieciowa lub drukowany na atramentówce czy laserze, to najlepiej wskanujmy go w rozdzielczości 200 DPI (zaraz powiem dlaczego). Jeżeli zaś rysunek ma być w przyszłości drukowany np. offsetem to lepiej od razu wskanować go w roz- dzielczości 300 DPI. Wyższe rozdzielczości skanowania nie mają sensu w naszym przypadku, chyba że jesteśmy masochistami i lubimy czekać aż komputer przetworzy masę nikomu niepotrzebnych nadmiarowych pikseli. Dlaczego skanować rysunek przeznaczony do internetu w rozdzielczości 200 DPI? Dzięki takiej rozdzielczości mamy pole manewru i możemy pomniejszać obrazek do pożądanego rozmia- ru. Zmniejszając rysunek zmiękczamy również krawędzie co sprawia, że linie stają się łagodniejsze i nie widać postrzępionych krawędzi. Rysunek w rozdzielczości 200 DPI posiada wystarczającą ilość pikseli by ładnie go wydrukować na plujce czy laserze (dla laserowej drukarki wystarczy nawet 150 DPI). Nie należy mylić rozdzielczości drukarki z rozdzielczością rysunku. Jeśli drukarka ma 1200 DPI nie oznacza to wcale, że nasza grafika ma być wskanowana w takiej rozdzielczości, co byłoby zresztą szaleństwem. W tym tutorialu zajmiemy się skanowaniem i kolorowaniem rysunku, narysowanego wcześniej na białej kartce papieru. 1. Skanujemy nasz rysunek. Ja skanowałem go w rozdzielczości 150 DPI (bo i tak po obróbce zamierzam go zmniejszyć, skanu- jemy w trybie Grayscale (odcienie szaro- ści). Po wskanowaniu nie otrzymamy idealnie białego tła: 2. Żebyśmy mogli kolorować rysunek, należy najpierw wstępnie go obrobić. Usuniemy to szare tło zamieniając je na białe. Można zrobić to na kilka sposobów. Ja zastosowałem komendę Brightness-Contrast (jasność-kontrast) z menu Image/Color/Brightmess-Contrast. Nie ru- szamy suwaka jasnosci (Brightness), używamy tylko kontrastu (Contrast). Ja użyłem akurat trzy razy pod rząd tej komendy z następującymi parametrami kontrastu: 50, 30 i na koniec jeszcze raz 30 (oczywiście w waszym przypadku mogą to być inne wartości). 8 3 SKANOWANIE I KOLOROWANIE RYSUNKÓW Pozostałe śmieci (niepotrzebne piksele) usuwamy gumką . Gdy już jesteśmy zadowoleni z efektu zamieniamy obrazek z Grayscale na RGB (menu obrazka Image/Mode/RGB lub ALTR+): Obrazek należy zapisać w formacie GIMP-a czyli nazwa.xcf, dzięki czemu nie zgubimy warstw. 3. Następnie powielamy warstwę Background na której jest nasz rysunek (nie wiesz jak ope- rować warstwami to zerknij tutaj) i mając ją zaznaczoną usuwamy z niej rysunek komendą Edit/Clear lub CTRL+K. Dlatego to tak robimy, bo chcemy by postacie, które są na rysunku, gdy je pokolorujemy, dały się bezproblemowo przenieść np. do innego pliku lub gdy chcemy dowolnie manipulowac tłem. 4. Przechodzimy na warstwę z obrazkiem i za pomocą czarodziejskiej różdżki zaznaczamy fragmenty rysunku (wartość threshold różdżki ustawmy na około 40, by nie było jasnej obwódki z piskeli wokół rysunku), które mają być przezroczyste (przez nie będzie widać tło), gdy zaznaczymy taki fragment to kasujemy go CTRL+K. Dla ułatwienia, na palecie warstw klikamy na oku obok warstwy Background co spo- woduje, że tło chwilowo zniknie, a my zo- baczymy szachownicę w miejscach, gdzie wykasowaliśmy piksele z warstwy z ob- razkiem, która informuje nas co będzie przezroczyste: 5. Gdy już mamy przygotowany rysunek i pokasowaliśmy na nim niechciane pikse- le, robimy kopię warstwy na której on się znajduje. Na palecie warstw powin- na być taka sytuacja (oczywiście możecie dowolnie nazywać wasze warstwy, ja po- zostawiłem domyślne): 9 3 SKANOWANIE I KOLOROWANIE RYSUNKÓW 6. Warstwie najwyższej (w moim przypad- ku Background copy#2), nadajemy tryb krycia Multiply (Burn) — mnożenie, spowoduje to, że białe piksele staną się przezroczyste a czarne pozostaną widocz- ne (pośrednie piksele będą półprzezroczy- ste). Za chwilę wyjaśnię dlaczego tak ro- bimy: 7. Warstwie obrazka leżącej bezpośred- nio nad tłem nadajemy właściwość ochrony obszaru przezroczystego (Keep Transparency), ponieważ tę warstwę bę- dziemy kolorować i nie chcemy przypad- kowo zalać bądź maznąć kolorem przezro- czystych obszarów: 8. Teraz kolorujemy pierwszą warstwę z rysunkiem (tę nad pustym tłem) dowolnymi narzędziami — kubełkiem (ustawmy wartość threshold na 70), pędzlem itp. Możemy śmiało mazać kolorami, bo dzięki temu, że zabezpie- czyliśmy obszary przezroczyste, są one nie do zamalowania. Także nie musimy się martwić, jeśli maźniemy po jakiejś linii, bo dzięki górnej warstwie z obrazkiem, której nadaliśmy tryb krycia Multiply (mnożenia), nawet jak zamalujemy jakąś li- nię, to choć nie będzie jej na warstwie z kolorem, pozostanie widoczna dzięki tej wyższej warstwie: 9. Pokolorowaliśmy już warstwę do tego przeznaczoną: 10 3 SKANOWANIE I KOLOROWANIE RYSUNKÓW 10. Moglibyśmy na tym skończyć nasz tuto- rial, ale żeby nadać trochę plastyczności rysunkowi domalujemy trochę cieni posta- ciom. W tym celu utworzymy nową war- stwę o nazwie Cień pomiędzy warstwą ko- lorową rysunku i tą z trybem Multiply, od razu nadajmy jej przezroczystość na poziomie 12 (jeśli chcemy mocniejszy cień to możemy dać wyższą wartość): 11. Cały czas będąc na warstwie Cień używamy różdżki z włączoną opcją Sample Merged (dzięki temu nie musimy przełączać się między warstwą z cieniem i kolorową by zaznaczyć interesujące nas obszary) zaznaczamy fragmenty rysunku (wartość threshold różdżki zostawiamy na około 40), cień malujemy ko- lorem czarnym, ale dzięki temu, że nadaliśmy war- stwie przezroczystość równą 12, kolor czarny nie przysłoni nam rysunku: 12. I mamy gotowy rysunek. Zapiszmy go tak jak jest z tyloma warstwami a następnie zapiszmy pod nową nazwą do dalszej obróbki (dzięki czemu zawsze możemy powrócić do oryginału i coś pozmieniać). Teraz bedę chciał umieścić ten kolorowy rysunek w innym obrazku. Najpierw muszę złączyć ze sobą kolorową warstwę, cień i warstwę najwyższą rysunku tę „multiplayową”. Zróbmy to w dwóch krokach, najpierw zaznaczamy warstwę z cieniem i robimy „merge down” czyli naci- skamy SHIFT+CTRL+M (lub używamy menu warstw i wybieramy tę komedę), połączyliśmy warstwę kolorową z warstwą cienia, teraz to samo robimy z najwyższą warstwą, zaznaczamy ją i wciskamy SHIFT+CTRL+M. Powinniśmy uzyskać sytuację na palecie z warstwami jak obok: 11 3 SKANOWANIE I KOLOROWANIE RYSUNKÓW 13. Mój rysunek ma około 1000 pikseli sze- rokości, to jest zdecydowanie za dużo, więc go przeskaluję do 300 pikseli na sze- rokość. Używam komendy Image/Scale Image (obrazek/skaluj obrazek). Obok efekt jaki uzyskałem (przedstawiony rysu- nek jest w skali 0.8:1): 14. Naszemu kosmicie trochę się nudzi, więc przeniesiemy go do innej bajki, metodą kopiuj i wklej (nie masz zielonego pojęcia o kopiowaniu i wklejaniu, to kliknij tu by się dowiedzieć więcej). No proszę, wkleiłem naszego kosmitę na plażę i mały skurczybyk już podrywa jakąś laskę :-) (przedstawiony rysunek jest w skali 0.8:1): Wszystkie rysunki do strony o GIMP-ie powstały właśnie w ten sposób, także wszystkie ilustracje jakie znajdziecie na mojej kociej stronie są robione tą metodą. Spis treści 12 4 CIĘCIE I MAPOWANIE OBRAZKA NA POTRZEBY WWW 4 Cięcie i mapowanie obrazka na potrzeby www Strona o GIMP-ie nie jest poradnikiem HTMLa, ale jednak GIMP jako narzędzie do grafiki jest wy- korzystywany przez wielu grafików i webmasterów na potrzeby sieciowe. Zresztą nadaje się do tego wyśmienicie. Jednymi z najistotniejszych elementów każdej strony są hiperłącza do innych stron czy też serwisów. W tym tutorialu interesuje nas jak stworzyć mapę odnośników na pojedynczej grafice. Są dwa sposoby: - użyć html’owego taga MAP i określić współrzędne naszych linków na grafice, a następnie przypisać im adres www, - pokroić taką grafikę na kawałki i dopiero do nich przypisać łącza. 1. Najpierw zajmiemy się metodą nieingerującą w nasz obrazek. (a) Otwieramy GIMP-a i ładujemy do niego grafikę (już zoptymalizowaną i umieszczo- ną w naszym serwisie www), która ma być zmapowana. Na potrzeby tego tutoria- la przygotowałem gimpowe menu: (b) Z menu obrazka (przypominam, że dostęp do tego menu mamy klikając prawym klawiszem myszki na obrazku) wybieramy Filters/Web/Image Map..., powinien otworzyć się edytor ImageMap (nie będę wyjasniał wszystkich opcji, bo nie jest to potrzebne, także domyślne preferencje są tak dobrane, że nie trzeba ich zmieniać): 13 4 CIĘCIE I MAPOWANIE OBRAZKA NA POTRZEBY WWW (c) Używając narzędzi po lewej stronie okien- ka edytora rysujemy obszary, które mają być aktywne: Gdy chcemy zakończyć rysowanie dane- go obszaru, klikamy dwukrotnie mysz- ką, wtedy wyskoczy okienko dialogowe, w którym możemy wpisać adres strony, do której ma prowadzić łącze, komentarz do łącza. W zakładce Rectangle możemy poprawić numerycznie wymiary aktywne- go obszaru, a w zakładce JavaScript wpisać kod JavaScriptu: Obszar aktywny może być prostokątem, elipsą a także mieć nieregularne kształty. W każdej chwili możemy przenieść i prze- skalować dany obszar wybierając narzę- dzie strzałki: (d) Wszystkie adresy i inne dane przypisa- ne do aktywnego obszar