CSSベースのwebグラフィックの作成

2014年版Illustrator CCは、Webデザイナー向け 新機能により、デザインのWeb変換を短時間で処理 モックアップの一貫性を維持できます デザインとCSSプロパティが自動的に分析されるので Illustratorで作成したデザインのスタイルを 直接HTMLエディターに送り、開発者に渡すこともできます 個別または全ページのモックアップのコードを書き出すには CSSプロパティパネルのコントロールを使用します 文字スタイルを定義して、CSSに変換できます Illustratorで文字スタイルを作成すると 従来からのWeb要素記述に従い Header 1、Header 2、Header 3、Bodyと定義され その文字スタイルに基づいてCSSが抽出されます CSSプロパティパネルを開き テキストフレームを選択すると、CSSコードがパネルに表示されます それをHTMLファイルに挿入し、Web用スタイルを設定します 私のHTMLファイルは、基本的なコンテンツと構造はできていますが テキストなどのコンテンツのスタイル情報はなく 最小限の体裁です CSSプロパティパネルでCSSスタイルを選択して それをHTMLファイルにコピーします テキストをご覧ください Illustratorで設定したスタイルに変わりました 背景色その他のデザイン属性を含めてCSSに書き出せます パターン、グラデーション、ストローク、ドロップシャドウなど 文字スタイルの設定と同じです 個別にスタイル設定することもできます または、CSSコードを外部CSSファイルに保存すれば 複数ページの外観をまとめて変更できます すべてのオブジェクトのCSSコードを書き出し CSSファイルに保存して、HTMLファイルで参照します ただし、複雑なアートワークは表現できません その場合は、IllustratorからSVGで出力します 主流のWebブラウザーは、ほとんどSVG対応です ズームやリサイズをしても、画質は劣化しません アートワークを選択して生成したSVGコードを HTMLファイルにペーストします デザインの詳細までそのままのWebモックアップを Web上で表示できます また、レスポンシブSVGを 保存することもできるので モバイルデバイスやリサイズしたブラウザーなど 表示環境に合わせて拡大縮小できます レスポンシブSVGを作成するには、アートワークをSVGで保存し 「レスポンシブ」をオンにします レスポンシブSVGで保存されたロゴが表示されています 以前は、Webブラウザーに連動しませんでしたが 新バージョンのレスポンシブSVGは連動します レスポンシブSVGを使うと、アートワークの外観とサイズが どのブラウザーや環境でも正しく表示されます 2014年版Illustrator CCの新機能の一部を紹介しました ベクトルデザインをWebで表示する各種設定 柔軟性、コントロールが追加されています Creative Cloudのみで提供される新機能です