Systém Gimp Tvorba jednoduchých animací a grafiky pro web

Transkript

1 ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ V PRAZE FAKULTA STAVEBNÍ OBOR GEODÉZIE A KARTOGRAFIE KATEDRA MAPOVÁNÍ A KARTOGRAFIE Systém Gimp Tvorba jednoduchých animací a grafiky pro web semestrální práce Zdeňka Bílá Gabriel Györi V Praze dne Kartografická polygrafie a reprografie

2 Úvod Program GIMP je program šířený pod GPL licencí. GIMP je přednostně vyvíjen pro systém Linux, avšak existují i verze pro OS Windows a MAC OS. GIMP slouží implicitně na úpravu fotografií, avšak je možné ho použít i pro tvorbu grafiky a animací do webových stránek. Právě grafikou se zabývá semestrální práce. Program disponuje širokou škálou nástrojů jako jsou např. štětec, pero, tužka, rozprašovač, guma. Dokáže pracovat s kanály, vrstvami a cestami. GIMP podporuje většinu rastrových formátů jako jsou např. GIF, JPG, PNG, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, BMP a mnoho dalších. Jak už bylo řečeno, program je volně stáhnutelný a dostupný na webových stránkách. 1 Pracovní prostředí 1. Levý panel V tomto panelu se nachází základní nástroje na editaci obrázků. Popis každého tlačítka je možné získat nájezdem myší na příslušnou ikonu. V dolní části panelu je možné měnit nastavení nástroje. 2. Střední panel okna nástrojů Panel slouží na otvírání obrázků, s kterým je možno okamžitě pracovat. Další nově otevřený obrázek bude spuštěný v novém okně. 3. Pravý panel Tento panel slouží k práci s vrstvami, kanály, cestami apod. Panel je možné podle potřeby nastavit, přidat či odebrat. Obr. 1: Pracovní prostředí 1

3 2 Popis nástrojů V programu GIMP, tak jako v jiných grafických programech, najdeme tyto standardní nástroje, které využijeme pro tvorbu animací: 1. Nástroj pro výběr ve tvaru obdélníka 2. Nástroj pro výběr ve tvaru elipsy 3. Nástroj pro výběr spojitých oblastí 4. Nástroj pro změnu polohy, přesun 5. Nástroj rotace 6. Nástroj perspektiva 7. Nástroj naklonění 8. Nástroj škálování pro změnu měřítka 9. Nástroj plechovka pro vybarvení označených oblastí 10. Nástroj text pro vložení textu do obrázku 11. Nástroj pro překlopení (zrcadlení) 3 Práce s barvami Nastavení barvy se provádí pomocí nástroje Barva prostředí a pozadí. Tento nástroj umožňuje vybrat příslušnou barvu několika způsoby: 1. Výběr barvy v režimu RGB - kliknutím na příslušnou barvu v barevném čtverci anebo nastavením pomocného posuvníku jednotlivých barevných složek FGB, HSO (jas, sytost, odstín). 2. Nastavení barvy v režimu CMYK 3. Výběr pomocí barevného trojúhelníku GIMP umožňuje uložení nastavených barev. Po vybrání příslušné barvy je možné obarvit vybrané objekty. Tyto objekty můžeme vybrat pomocí panelu nástrojů na výběr spojitých oblastí, výběr oblastí ve tvaru obdélníka, případně výběr ve tvaru elipsy. Na vlastní obarvení použijeme nástroj na vybarvení označených oblastí. V tomto nástroji si můžeme zvolit zda chceme příslušný objekt obarvit barvou popředí, barvou pozadí nebo určitou texturou. Na vyplnění všech označených ploch je vhodné zaškrtnout možnost Vyplnit celý výběr. V nástroji vybarvení označených oblastí je možné zvolit i tzv. krytí, což znamená transparentnost barvy výplně. 2

4 Obr. 2: Změna a volba barvy 4 Práce s vrstvami Při tvorbě animací je tato kapitola velmi důležitá. Vrstvy si můžeme představit jako přehledné fólie naskládané na sebe. Každá vrstva může být libovolně upravená, překreslovaná a přemisťovaná nezávisle na dalších vrstvách. Obsah vrstvy se tedy chová jako samostatný obrázek. Čím víc je vrstev v dokumentu, tím větší má daný soubor velikost. V případě rozpracovaných vrstev je vhodné ukládat soubor do formátu *.xcf, protože takto uložený obrázek si zachová jednotlivé vrstvy a je možné je znovu zpracovat. 4.1 Okno vrstvy Okno pro práci s vrstvami se vytvoří záložkou Windows Dockable dialogs Vrstvy. Na záložce Vrstvy se zobrazují miniatury jednotlivých vrstev, jejich jména a indikační oko, které informuje o tom, zda-li je barva zapnutá anebo vypnutá. Do jaké míry bude vrstva viditelná určuje její pořadí v okně vrstvy. Pořadí lze měnit posunem vrstvy výš anebo níž v okně vrstvy. 4.2 Aktivní vrstva Aktivní vrstva je vrstva, která je zvýrazněna jinou barvou. Jakékoliv úpravy, které budou vykonané, budou aplikované na aktuální vrstvu. Aktivace vrstvy se vykoná kliknutím levého tlačítka myši na její název anebo ikonu s náhledem v okně vrstev. Aktivní může být jen jedna vrstva. 4.3 Vytvoření nové vrstvy Novou vrstvu vytvoříme kliknutím pravým tlačítkem myši na volnou plochu v dialogovém okně vrstvy a zvolíme možnost Nová vrstva. Tak se vyvolá dialogové okno, v kterém lze pojmenovat právě vytvářenou vrstvu, zvolit její velikost a typ výplně. Nová vrstva se vloží nad momentálně aktivní vrstvu a sama se stane aktivní. 3

5 4.4 Duplikace vrstvy Kliknutím na ikonu s dvěma listy papíru je možné vykonat duplikaci vrstvy. Tak se vytvoří kopie označené vrstvy, která bude mít stejný název s příponou v české verzi kopie. Tuto funkci je vhodné využít v situaci, kdy se požaduje vykonat úpravy na vrstvě a zároveň zachovat její původní podobu. 4.5 Mazání vrstvy Pokud chceme vrstvu smazat musíme ji aktivovat a kliknutím pravým tlačítkem myši vybrat položku Odstranit vrstvu. 5 Tvorba grafických efektů K oživení webové stránky je možné v programu GIMP vytvořit texty s efekty. Takto vytvořené texty je nutné do webových stránek ukládat jako obrázky. Nejčastěji s příponou GIF, PNG nebo JPG. Z těchto textů je taktéž možné vytvářet různé animace. Všechny níž uvedené texty jsou vytvořené pomocí různých filtrů. Pro inspiraci bude v textu popis tvorby prvního obrázku (ostatní jsou vytvořené různou záměnou filtrů). V nově vytvořeném dokumentu si vytvoříme vrstvu s černým pozadím. V následujícím kroku vložíme do nové průhledné vrstvy textové pole s požadovaným textem. Je vhodné, aby byl text stejné barvy jako pozadí první vrstvy. Vybereme vrstvu s vloženým textem a pravým tlačítkem myši vybereme z nabídky Alfa do výběru. Následně zaktivujeme vrstvu s černým pozadím a nastavíme barvu popředí na bílou. V nástroji štětec nastavíme neostrou stopu cca 11 px. Obkreslení textu vykonáme v menu Upravit Vykreslit výběr, kde jako způsob vykreslení vybereme z nabídky štětec. Obrázek otočíme o 90 stupňů pomocí funkce Rotace a na otočený obrázek aplikujeme filtr vítr (Filtry Zkreslení vítr) a podle vlastního uvážení funkci nastavíme. Obrázek zrotujeme do původní polohy. Dále vytvoříme novou vrstvu, do které vygenerujeme šum pomocí filtru pevný šum (Filtry Generovaní Oblaka Pevný šum). Je nutné nastavit vlastnost turbulentní. Ostatní nastavení jsou závislá na vlastní tvořivosti. Zaktivujeme vrstvu s pozadím a aplikujeme na ni filtr Ohnout (Filtry Mapa Ohnout). V posledním kroku plameny obarvíme. Můžeme použít širokou paletu barevných přechodů. Vlastní obarvení vykonáme pomocí funkce Barvy Mapa Mapa přechodu. K zefektivnění textu můžeme použít širokou nabídku filtrů, které program GIMP obsahuje (Rozmazání pohybem, Gaussovo rozostření, Efekt supernovy, Láva, Reliéf... ). Obr. 3: Ukázka efektů na textu a pozadí 4

6 6 Postup tvorby jednoduchých animací Tvorba animací v programu GIMP je velmi jednoduchá. Na začátku je důležité vytvořit si vrstvy s příslušnými změnami, které se projeví v animaci. K názvu každé vrstvy přiřadíme čas, za který se vrstva změní na vrstvu následující. Tento čas je udávaný v milisekundách (viz červená elipsa na obrázku (Obr.: 4)). Animace vždy začíná na vrstvě, která je na nejvyšším místě v pořadí. Čím víc je vrstev a menší čas, tak je animace plynulejší, ale velikost výsledného souboru se tím zvýší. Pokud máme takto vytvořené vrstvy je nutné soubor uložit. Obr. 4: Nastavení času přechodu animací V položce Soubor Uložit jako vybereme položku *.gif. Po potvrzení tlačítkem uložit se objeví dialogové okno, které nastavíme podle obrázku a potvrdíme tlačítkem export. Po označení této možnosti se vrstvy zobrazují postupně, přičemž následující vrstva se zobrazí na vrstvu předcházející. Na konci animace se všechny vrstvy sloučí. Po zvolení této možnosti každá následující vrstva přepíše vrstvu předcházející. Na konci animace zůstane zobrazená jen poslední vrstva. 5

7 Obr. 5: Export animace Obr. 6: Export animace do gif 7 Tipy a triky pro tvorbu animací a kreslení 7.1 Kreslení geometrických tvarů Kreslení geometrických prvků (kruh, elipsa, obdélník, čtverec) se nejlépe provádí pomocí tzv. nástrojů výběrů. Které se pak vybarvují (nejsnadněji plechovkou nebo gradientem). Kruh získáme kreslením nástroje Výběr eliptických oblastí a přidržením klávesy Shift. Podobně čtverec, pomocí nástroje Výběr obdélníku. Chceme-li nakreslit přímku, použijeme nástroj Štětec, přičemž nejprve potvrdíme začátek linie levým tlačítkem myši a konec linie ukončíme přidržením klávesy Shift + levé tlačítko myši. 7.2 Časování snímků Pro změnu délky zobrazení snímku v animaci se vloží do názvu vrstvy číslo s příponou ms, toto číslo pak uzavřete kulatými závorkami. 6

8 Za takovýchto podmínek zůstane první snímek animace viditelný 10 milisekund. Aplikované změny si lze okamžitě prohlédnou přes Filtry Animace Přehrávání. 7.3 Zmenšení velikosti animace bez ztráty kvality Pokud se zvolí větší rozlišení obrazu pro animaci (pixely) nebo se pokryje větší plocha snímku barvičkami či dojde k použití velkého množství snímků k utvoření obrazu, může se stát, že animace nepříjemně nabude na objemu. V tomto případě je vhodné použít nabídku Filtry Animace Optimalizovat (pro GIF). Tento šikovný fígl, ve většině případů, stáhnete velikost finálního GIFu až o 50 % i více, oproti stávající neoptimalizované verzi. Díky mnoha faktorům, tato metoda ale není stoprocentní. Záleží na rozložení a množství barev jednotlivých snímků, směru a pohybu animovaných prvků obrazu atp. 7.4 Barevnost obrázku a její vliv na výstup Pro menší výstupní velikost animace, lze mj. také vycházet z nabídky Obrázek Režim Indexovaná. V této nabídce řekneme programu, kolik barev má v jednotlivých rámcích (snímcích) zobrazit. Maximální počet barev zobrazených v jednom rámci je 256, z tohoto nastavení vychází i náš GIMP (pokud neurčíme jinak). Obecně platí: čím menší číslo, tím menší výsledná velikost obrázku. 7

9 Závěr GIMP je freewarový bitmapový grafický editor obrázků na úrovni profesionálního komerčního programu Photoshop. Původně byl vyvíjen pro Linux, ale existují i verze pro Windows (včetně české lokalizace). Software nabízí celou řadu nástrojů a funkcí pro zpracování obrázků a animací či vytváření vlastních. Pracuje se všemi grafickými formáty. Nevýhodou jsou prvotní problémy s vytvořením obrázku/ů, dle našich představ. Kreslení a úprava obrázků je otázkou zvyku. Nehledě na práci s vrstvami. I nakreslení jednoduchého geometrického prvku může být zpočátku problém. Po překonání těchto problémů lze získat kvalitní grafické výstupy ve škále všech barev pomocí RGB, CMYK i barevného trojúhelníku. Důraz u barev je kladen i na jejich sytost a jas. Kombinací filtrů, kterých GIMP nabízí opravdu mnoho, je možné vytvořit mnoho různých efektů. Tyto obrázky či animace je snadné upravit a vyexportovat, pro publikování na webu tak, aby neztrácely na kvalitě, ale na velikosti. Literatura [1] Kysilka, P.: Linuxsoft.cz [online] [cit ], Dostupné z WWW: < [2] The GIMP Team: GIMP [online] [cit ], Dostupné z WWW: < [3] Stickfish, s. r. o.: ABC Linuxu [online] [cit ], Dostupné z WWW: < [4] MICHAL, Šafus. Gimp.cz [online]. c [cit ]. Dostupné z WWW: < 8