Ai->CanvasはIllustratorのaiファイルをCanvasタグを使い、HTMLファイルとして出力する。

Ai->CanvasはIllustrator用/Windows、Mac OSX向けのフリーウェア。Webデザインやロゴのデザインなど、様々な場面で活躍しているAdobe Illustrator。高機能なツールだけに、様々な作業をその上で行っている人が多い。

Screen-shot 393.png

出力されたHTMLファイル

 

デザインしたものはPNGやFlash、TIFFなどで出力できるが、再利用性は今ひとつだ。もっと他のツールと組み合わせてインタラクティブに楽しめるようにするのがAi->Canvasだ。

Ai->CanvasはIllustrator用のプラグインで、エクスポート機能に「Canvas(HTML)」という項目を追加する。これを選ぶとIllustratorで描いたデザインがHTMLとなって出力される。Canvas上に線やテキストを描画して出力する。

Screen-shot 391.png

エクスポート

 

画像を埋め込んでいる場合は、画像として保存され、JavaScriptで読み込むようになっている。Ai->Canvasはアニメーションもサポートしている。出力形式はもちろんHTML5だ。これにより、スマートフォンにも対応し、より機能性の高いWebアプリケーションと組み合わせて使うことができる。

 

MIX On line:Ai to Canvas Plug-In

 http://visitmix.com/labs/ai2canvas/index.html