Osvědčené postupy pro vytváření webových grafik

Aplikace Illustrator poskytuje řadu nástrojů k vytváření rozvržení pro webové stránky nebo k vytváření a optimalizaci webové grafiky. Používáte například bezpečné webové barvy, upravujete vyvážení kvality obrazu pomocí velikosti souboru a pro svou grafiku vybíráte nejlepší formát souboru. Webové grafiky mohou využívat řezy a obrazové mapy a lze použít i různé možnosti optimalizace, díky kterým se vaše soubory správně zobrazí na webu.

Když navrhujete grafiky pro web, musíte zvážit jiné otázky, než když navrhujete grafiky pro tisk. 

Chcete-li informovaně rozhodovat o webových grafikách, zapamatujte si následující tři pravidla:

Používejte bezpečné webové barvy.

Barva je často klíčovou stránkou kresby. Ale barvy, které vidíte na své kreslicí ploše, nemusí být nutně stejné jako barvy, které se objeví v prohlížeči webu na počítači někoho jiného. Můžete zabránit rozkladu barev (to je metoda simulace nedostupných barev) a dalším problémům s barvami, když při vytváření webových grafik dodržíte dvě preventivní zásady. Za prvé vždy pracujte v barevném režimu RGB. Za druhé používejte bezpečné webové barvy.

Nastavte vyvážení kvality obrazu a velikosti souboru.

Vytváření grafických souborů s malou velikostí je klíčové při distribuci obrazů na webu. Menší soubory mohou webové servery ukládat a přenášet efektivněji a prohlížeče mohou načítat obrazy rychleji. Velikost souboru a odhadovaný čas stahování webové grafiky si můžete zobrazit v dialogovém okně Uložit pro web a zařízení.

Zvolte nejlepší formát souboru pro svou grafiku.

Různé typy grafik vyžadují uložení v různých formátech souboru, aby se zobrazovaly co nejlépe a jejich velikost byla vhodná pro web. Další informace o specifických formátech viz Volby optimalizace webových grafik.

O režimu náhledu obrazových bodů

Do aplikace Illustrator byla přidána vlastnost zarovnání podle obrazových bodů, aby weboví designéři mohli vytvářet správné pixelové návrhy. Je-li pro objekt umožněna vlastnost zarovnání podle obrazových bodů, všechny vodorovné a svislé segmenty v objektu se zarovnají k mřížce obrazových bodů, a taky tak získají čistý vzhled. Každá transformace, pokud je tato vlastnost pro objekt nastavena, je znovu zarovnána k mřížce obrazových bodů podle nových souřadnic. Tuto vlastnost lze umožnit volbou možnosti Zarovnat k mřížce obrazových bodů v panelu Transformovat. Aplikace Illustrator také zahrnuje možnost Zarovnat nové objekty k mřížce obrazových bodů na úrovni dokumentu, která je k dispozici ve výchozím nastavení pro webové dokumenty. Pokud je tato vlastnost k dispozici, každé nové nakreslené objekty mají vlastnost zarovnání k mřížce obrazových bodů ve výchozím nastavení.

Další informace viz část Kreslení cest zarovnaných podle obrazových bodů v pracovních postupech určených pro web.

Když uložíte kresbu do bitmapového formátu, například JPEG, GIF nebo PNG, Illustrator rastruje kresbu s rozlišením 72 obrazových bodů na palec (ppi). Pomocí příkazu Zobrazení > Náhled obrazových bodů můžete zobrazit, jak budou objekty vypadat po rastrování. To je užitečné, zejména když chcete nastavit přesné umístění, velikost a vyhlazení objektů v  grafice .

Abyste porozuměli způsobu, jakým Illustrator rozděluje objekty na obrazové body, otevřete soubor obsahující vektorové objekty, zvolte Zobrazení > Náhled obrazových bodů, a zvětšete kresbu tak, abyste viděli jednotlivé obrazové body. Umístění obrazových bodů určuje mřížka obrazových bodů, která dělí kreslicí plochu na dílky po 1 bodu (1/72 palce). Pokud zvýšíte zvětšení na 600 %, můžete zobrazit mřížku obrazových bodů. Pokud objekt přemístíte, přidáte nebo transformujete, přitáhne se na mřížku obrazových bodů. Výsledkem je, že podél „zarovnaných“ okrajů objektu (obvykle levý a horní okraj) zmizí jakékoliv vyhlazení. Nyní odznačte příkaz Zobrazení > Přitahovat na obrazové body a přemístěte objekt. Tentokrát budete moci umístit objekt mezi linky mřížky. Všimněte si, jak to ovlivní vyhlazení objektu. Jak vidíte,  velmi  malé změny mohou ovlivnit způsob, jakým je objekt rastrovaný.

Tipy pro vytváření obrazů aplikace Illustrator pro mobilní zařízení

Chcete-li optimalizovat grafický obsah pro mobilní zařízení, ukládejte kresby vytvořené v aplikaci Illustrator v libovolném formátu SVG, včetně SVG-t, který je speciálně navržen pro mobilní zařízení.

Abyste zajistili, že se obrazy vytvořené v aplikaci Illustrator zobrazí na mobilních zařízeních správně, postupujte podle následujících tipů:

• K vytvoření obsahu použijte standard SVG. Použití SVG k publikování vektorových grafik na mobilních zařízeních umožňuje dosáhnout malé velikosti souborů, nezávislosti zobrazení, vynikající kontroly barev, možnosti změny velikosti a upravitelnosti textu (v rámci zdrojového kódu). Protože je formát SVG založený na XML, můžete do obrazů také doplnit interaktivitu, jako je zvýraznění, tipy nástrojů, speciální efekty, zvuk a animace.

• Pracujte již od začátku v rámci konečných rozměrů cílového mobilního zařízení. Přestože SVG lze zvětšovat nebo zmenšovat, práce se správnou velikostí zajistí, aby výsledné grafiky měly optimalizovanou kvalitu a velikost pro cílové zařízení.

• Nastavte barevný režim aplikace Illustrator na RGB. SVG se bude zobrazovat na zařízeních s rastrovými RGB displeji, například na monitoru.

• Chcete-li zmenšit velikost souboru, zkuste zmenšit počet objektů (včetně skupin) nebo je zjednodušte (méně bodů). Použití menšího počtu bodů výrazně zmenší objem textových informací, které jsou potřebné k popisu kresby v souboru SVG. Chcete-li zmenšit počet bodů, vyberte Objekt > Cesta > Zjednodušit, vyzkoušejte různé kombinace a najděte vyvážení mezi kvalitou a počtem bodů.

• Pokud to je možné, používejte symboly. Symboly definují vektory, které popisují objekt pouze jednou, ne vícekrát. To je užitečné v případě, že kresba obsahuje objekty, jako jsou pozadí tlačítek, které se používají opakovaně.

• Při animování grafiky omezte počet použitých objektů a pokuste se objekty používat opakovaně, kdykoliv to je možné, abyste zmenšili velikost souboru. Aplikujte animace na skupiny objektů, ne na jednotlivé objekty, abyste předešli opakování kódu.

• Zvažte použití SVGZ, což je verze SVG komprimovaná algoritmem gzip. Komprese dokáže velmi výrazně zmenšit velikost souboru, v závislosti na jeho obsahu. Text může být obvykle silně komprimovaný, ale binárně kódovaný obsah, například vložené rastry (soubory JPEG, PNG nebo GIF), nelze významně komprimovat. Soubory SVGZ lze dekomprimovat v libovolné aplikaci, která rozbaluje soubory komprimované algoritmem gzip. Chcete-li úspěšně používat soubory SGVZ, zkontrolujte, zda cílové zařízení dokáže dekomprimovat soubory gzip.