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のみで提供される新機能です

Cookie Settings
General information
If enabled:
- We can improve your experience by tailoring the site and the content to things we think might be of interest
- We can better keep track of your preferences — like what language you prefer to use
- We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
- It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
- We won’t be able to remember you from session to session so the experience may not be tailored to your interests
- You’ll still have access to the content of the site but certain features that depend on cookies may not function
- You’ll still see ads, they just may not be as relevant to you
General information
If enabled:
- We can improve your experience by tailoring the site and the content to things we think might be of interest
- We can better keep track of your preferences — like what language you prefer to use
- We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
- It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
- We won’t be able to remember you from session to session so the experience may not be tailored to your interests
- We’ll still count your use of our site and services
- You’ll still have access to the content of the site but certain features that depend on cookies may not function
- You’ll still see ads, they just may not be as relevant to you
