Formát GIF
Pokud si autoři stránek chtějí něco vydělat, nezbývá jim, než na své stránky zařazovat reklamu, která je tvořena nejčastěji "pohyblivými" obrázky. Tyto obrázky mohou být prostě obrázky ve formátu GIF (přípona souboru), v této lekci zkusíme GIF vytvořit (samozřejmě mohou být i reklamy jiného typu).
V šesté lekci jsme mluvili o nejběžnějších typech obrázkových souborů (bitmapových) - jpg, gif, bmp, pgn; kvůli velikosti souboru jsme také konvertovali soubor typu bmp na typ jpg. Mezi vlastnostmi formátů jpg a gif jsou tyto zásadní rozdíly:
- obrázek jpg může obsahovat velké množství barev - je-li uváděna barevná hloubka 24b (bitů), potom to znamená, že v obrázku může být 2 na 24, tj. více než 16 milionů barev, proto se používá například pro fotografie
- obrázek gif může obsahovat maximálně 256 barev, proto je méně kvalitní, zato může být "pohyblivý" a také u něj lze použít průhlednou barvu
Animovaný gif se vytváří ze skupiny obrázků (nejlépe stejně velkých), nastavením jejich pořadí a pauzy mezi jejich zobrazením. Takový gif bývá většinou jako soubor dost velký, proto jimi raději spíše šetřete. Výsledná velikost celého gifu je sice většinou menší než součet velikostí jednotlivých obrázků, přesto vás může nepříjemně překvapit. Například reklamní obrázek vpravo má velikost více než 300kB, což je stejná velikost jakou má několikanásobně větší a mnohonásobně kvalitnější fotografie. Takových obrázků nemůže být na stránce více, protože by její načítání trvalo dlouho a odrazovalo návštěvníky.
Tvorba GIFu
Pro tvorbu gifů existuje řada nejrůznějších programů i volně šiřitelných (zdarma, freeware). Některé z nich umožňují vkládat i efekty (to jsou ale další sady obrázků) nebo optimalizovat vytvořené gify, zjišťovat rychlost jejich načítání při různých rychlostech připojení atd. My použijeme sice jednoduchý (což je možná pro některé z vás právě dobře :-) ), ale pro účely této lekce postačující program, navíc české výroby a ještě k tomu legálně zakoupený :-) - Zoner GIF Animator z balíku programů Zoner Callisto 4.
Po spuštění programu si nejprve zkuste otevřít nějaký gif. Všimněte si, že se tento gif skládá z řady obrázků - rámců (jednoduše vytvořených v Malování), u nichž je nastavena doba trvání.
Nabídka Nástroje - Přehrávání (nebo ikonka kamery) vám ukáže, jak gif vypadá, náhled zrušíte například klávesou ESC.
Vytvořit gif je poměrně snadné (musíte mít ale připravenou sadu stejně velkých obrázků, ze kterých se bude skládat). Nejprve využijte nabídku Soubor - Nový nebo Soubor - Nový podle parametrů, kde si můžete vybrat předem velikost gifu (v průběhu práce ji ale můžete měnit). Do nového souboru je potřeba vždy do rámců vložit obrázek v nabídce Úpravy - Vložit z (nebo na pravém tlačítku). Na záložce Animace nastavte nabídku Opakování (konkrétní počet nebo do nekonečna) a na záložce Rámec nastavte každému rámci dobu trvání.
Chcete-li například mít průhledné pozadí gifu (aby nebyl kolem obrázku jednobarevný obdélníček), potom u každého rámce můžete nastavit Průhlednost a vybrat barvu, která má být průhledná.
Pokud máte připravené všechny obrázky, můžete je vložit také všechny najednou.
Úkoly:
Úkol (5 bodů):
Vytvořte jednoduchý gif, například reklamu svého webu :-) nebo jiný malý obrázek ozdobený drobnou animací (viz ukázka) či úplně jiný dle vlastní fantazie.
Na váš index.html přidejte buď přímo obrázek nebo odkaz na něj.
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_21_10B_tvorba www21 |
| Autor: | Pavel Petr |