Adobe Illustrator CS5 HTML5 Pack: moderní webdesign přímo v Illustratoru? - Grafika.cz - vše o počítačové grafice

17. září 2010, 00.00 | O něco lepší schopnosti tvorby webových stránek nově nabízí Adobe Illustrator CS5 prostřednictvím doplňku HTML5 Pack. Podobně jako v Adobe Dreamweaveru CS5 můžete nyní v Illustratoru CS5 například vytvářet ze zvolených objektů kreslící plochy pro webovou stránku, používat speciální přepínače u objektů a exportovat některé jejich základní vlastnosti uvnitř kaskádových stylů.

Nový přírůstek do rodiny vývojářských nástrojů přesněji řečeno doplňků pro aplikace aktuální sady Creative Suite 5 uvolnila společnost Adobe Systems na svém developerském webu Adobe Labs. Jedná se o rozšíření Adobe Illustrator CS5 HTML5 Pack, které doplňuje Illustratoru CS5 o základní podporu HTML5 a CSS3 a současně navýší exportní schopnosti Illustratoru (pro s HTML5 úzce svázaný) formátu SVG.

Nejedná se zatím o klasický zásuvný modul instalovaný přes Extension Manager, nýbrž o archiv s různými částmi Adobe Illustratoru CS5 s manuální instalací, kde soubory v archivu Adobe Illustrator CS5 HTML5 Pack jednoduše zkopírujete (přepíšete přitom i některé původní soubory) do příslušných lokací v archivu obsažených adresářů. Doplněk vyžaduje nový Illustratoru v aktuální verzi 15.0.1, takže před rozbalování archivu nezapomeňte provést spustit update (pokud se vám nespouští sám) Illustratoru či balíku CS5.

Canvas neboli kreslicí plochy

Současná verze doplňku Adobe Illustrator CS5 HTML5 Pack rozšiřuje Illustrator CS5 o možnost tvorby kreslicích ploch respektive pláten, která lze v HTML5 definovat značkou canvas. Každý běžný objekt grafického dokumentu Illustratoru tedy můžete v menu Objekt označit jako vrstvu kreslicí plochy (canvas element), uvnitř které pak lze v HTML5 kreslit javascriptem prakticky cokoliv.

Adobe Illustrator CS5 HTML5 Pack - objekty v ilustracích lze definovat jako kreslicí plochy (Canvas) pro HTML 5

Definování značek canvas pro HTML5 přímo v Illustratoru je zatím na úplném počátku schopností exportu vektorové grafiky pro jednotlivá kreslicí plátna, která tak mohou mít při použití vektorové SVG grafiky různá rozlišení a lze je tedy teoreticky možné zobrazit například i na mobilních zařízeních s různými velikosti a rozlišením displejů, to vše při zachování shodného obsahu i jeho formátování.

Značky canvas pro kreslicí plochy/plátna by mělo být v budoucnu možné dále použít třeba jako základ na tvorbu různých widgetů (obsahujících opět vektorovou grafiku) pro webové aplikace nezávislé (zatím opět víceméně teoreticky) na cílovém rozlišení obrazovky.

Adobe Illustrator CS5 HTML5 Pack - objekty kreslicích ploch (HTML 5 Canvas) se v paletě vrstev automaticky označí obecným grafickým symbolem HTML tagu

Adobe Illustrator CS5 HTML5 Pack - podrobné volby u stávajícího exportu vektorové SVG grafiky včetně specifikací vlastností kaskádových stylů

Vlastnosti objektů a kaskádové styly

Některé důležité vlastnosti každého objektu můžete v příslušné paletě Vzhled v rámci tzv. parametrizace SVG grafiky označit novým přepínačem Toggle Variability, který přidá objektu označení (X) a zpřístupní export kaskádových stylů s informacemi právě o použitých vlastnostech daného objektu. Grafiku pak můžete v Illustratoru CS5 uložit ve formátu SVG se zvolením vlastností chování kaskádových stylů.

Nezávisle na sobě můžete dále exportovat jednotlivá kreslicí plátna samotného Adobe Illustratoru (opět jako SVG grafiku) a vzorové kousky kaskádových stylů s určeným typem média pro jejich následné slepení a použití na webu či spíše uvnitř obsahu webových stránek.

Momentálně lze v rámci CSS z Illustratoru CS5 exportovat například vlastnosti výplní a průhlednosti objektů (Fill Color, Fill Opacity, Stroke Color, Stroke Opacity, Stroke Width a Object Opacity), další vlastnosti budou zřejmě zařazeny v budoucích verzích Adobe Illustrator CS5 HTML5 Pack i v závislosti na finálních specifikacích CSS3 a HTML5. Exportovat lze i CSS pro textové objekty respektive jejich styly.

Adobe Illustrator CS5 HTML5 Pack - export specifikovaných kaskádových stylů z kontextového menu palety Vzhled

Adobe Illustrator CS5 HTML5 Pack - nové dialogové okno s předvolbami pro export kaskádových stylů

Adobe Illustrator CS5 HTML5 Pack - export kaskádových stylů najdeme nově i v paletě textových stylů

Technologické demo

Jako ukázka technologií využívajících některé z možností HTML5 a CSS3 je Adobe Illustrator CS5 HTML5 Pack určitě zajímavý, musím však zdůraznit, že se jedná o první veřejnou testovací verzi doplňku. Odpovídá tomu proto celková funkčnost jednotlivých modulů zejména pro generování CSS atp., jejichž odladění a dokončení do opravdu použitelného stavu bude záviset hlavně na celkovém postupu vývoje HTML5 a CSS3.