私が本当に楽しんでいないIllustratorを使っているという側面があれば、ラインアートをモバイルやWeb用のsvgイメージに変換しています。 [エクスポート]> [名前を付けてエクスポート]メニューを使用して、残酷な正直さを目指して、[Web用に保存]機能 - [エクスポート]> [Web用に保存]
図面を.svg形式に変換すると、このワークフローを初めて使う人にとっては、いくつかの.svg形式があり、そのうちの1つだけが正しいフォーマット。 このワークフローに慣れてしまえば、それは大したことではありませんでしたが、学習曲線は急峻でした。
これは、2016年6月にIllustrator CC 2015に導入された新しいExport For Screens機能 - Export> Export for Screens - とAsset Exportパネルで変更されました。この「How To」では、特徴。 始めましょう。
04の01
Adobe Illustrator CC 2015で画面の書き出しにアクセスする方法
Illustrator 88以降のIllustratorユーザーであったので、IllustratorをWebやモバイルのインターフェイスやプロジェクトのための深刻な設計ツールと見なすことに躊躇していると思います。
アートボードがCS4バージョン2008で導入されたとき、私はそれがアプリケーションの興味深い追加だと思っていました。 今では廃止されたIllustratorのWeb For Save Web機能を初めて見たときに、面白いと感じましたが、Adobe Fireworksの同じ機能がIllustratorよりもWebグラフィックスとより整列しています。
モバイル向けの最初の設計アプローチとモバイルプロジェクトのSVGイメージへの依存度の高まりに伴い、Illustratorは私のSVGツールとなり、UIデザインワークフローの重要な停止となりました。
それでも、モバイル向けに資産をエクスポートする必要がある場合、Sketch 3とPhotoshop CC 2015が私の選択肢です。 Illustratorは2016年6月に、本当に気の利いたExport for Screensメニューを使用してリストに入った。
上記の例では、iPhone向けの2つの画面があり、それらは「ホーム」と「場所」という別々のアートボードにあります。 それらを出力するために、File> Export> Export for Screensを選択しました。 [画面のエクスポート]ダイアログボックスが開きます。
04の02
[画面のエクスポート]ダイアログボックスを使用する方法
ダイアログボックスが表示されたら、選択する各アートボードをクリックします。 その後、チェックマークが付けられます。 アートボードの名前をダブルクリックして選択して変更することもできます。 これは、あなたのアートボードの名前が "Artboard 1"と "Artboard 2"になっているかどうかを知るには良いことです。これは率直に言えば何も教えてくれません。
選択領域には3つの選択肢があります：
- すべて：この選択肢は、ドキュメント内の各アートボードを別々のファイルとしてエクスポートします。
- 範囲：エクスポートするアートボードの範囲を入力します。 これは、数ダースのアートボードを持つプロジェクトに特に便利です。
- フルドキュメント：これを選択すると、すべてのアートボードが単一のドキュメントにまとめられます。
[エクスポート先]エリアでは、出力先フォルダを選択できます。 デフォルトのフォルダは、Illustratorドキュメントの現在の場所になります。
フォーマットは「マジックが起こる場所」です。 iOSには3つのアイコンがあります。 Androidとギア。 最初の2つは自明です。 [ギア]アイコンをクリックすると[フォーマット設定]が開き、リスト内の各ファイル形式の最適化方法を制御できます。 これらの設定は「フォーマット固有」であり、一度変更を加えたら、「設定を保存」ボタンをクリックすると、変更内容が出力されるフォーマットに適用されます。
iOSまたはAndroidを選択すると、そのプラットフォームで利用可能なすべての解像度を含むようにリストが変更されます。 iOSのリストにはRetinaディスプレイの倍率が表示され、Androidの選択には、実質的にすべてのAndroid搭載デバイスに対応する.75xから4xの範囲のスケールが適用されます。
削除することを示すフォーマットがある場合は、「x」をクリックします。 追加するものがある場合は、[+スケールを追加]ボタンをクリックします。
終了したら、[アートボードの書き出し]ボタンをクリックすると、処理が完了したらプログレスバーが表示されます。
04の03
Adobe Illustrator CC 2015からの画面ファイルの書き出しを使用する。
画面のエクスポートの結果をチェックアウトすると、Illustratorで各画面のフラットバージョンが出力されていることがわかります。 表面上、Illustratorがすべてのビットとピースをイメージとしてエクスポートすることを期待していた場合は、特に弱いようです。
これを一歩踏み出して考えてみると、 Adobe Experience Design 、Principleformac、 Atomic.io 、 UXPinやその他のプロトタイプアプリケーションなどのプロトタイプアプリケーションでこの出力を使用できるため、実際に必要なものです
この例では、Adobe Experience Design（XD）を使用して簡単なクリックスルーを作成しています。 このプロセスの最初のステップは、Illustratorインターフェイスの寸法に一致するiPhone 6サイズを選択することでした
インターフェイスが開いたら、アートボードツールを選択し、ペーストボードを1回クリックして別のアートボードを追加しました。 次に「ホーム」と「場所」という名前を付け、それぞれのアートボードを選択し、Illustratorからアートボードにpngイメージをインポートしました。
クリックスルーの「ホットスポット」を作成するには、ホーム画面の[探索]ボタンの上に矩形を描き、[プロパティ]パネルでそれらのプロパティの選択を解除して、塗りつぶしと枠線の値をnoneに設定しました。 プレイスページの[戻る]ボタンでも同じことをしました。
インタラクティブ機能を追加するには、プロトタイプモードを選択してから、「ホットスポット」をクリックしました。 次に、「ワイヤ」という矢印をドラッグしてプレイスページに移動し、プレイスでトランジションターゲットを、プッシュレフトにモーションを、緩和するためにイージングを、そして0.6秒に遷移する時間を設定しました。
この手順は、[場所]ページのホットスポットで繰り返しました。 唯一の違いは、遷移がプッシュライトに設定されていたことです。 再生ボタンをクリックすると、私はプロトタイプをテストしました。
04/04
Adobe Illustrator CC 2015で[エクスポート資産]パネルを使用する方法
Save for Screensメニューに加えて、アドビはUIデザインワークフローで大きな問題点を取り除いた新しいパネルAsset Exportを追加しました。
痛みのポイントはアイコンだった。 Illustratorは素晴らしいベクター描画アプリケーションですが、出力するには、40個または50個のページが必要なページに10個のアイコンを表示し、それぞれがSVGイメージとして保存されている必要があります。 これは必然的にSVGパネルへの連続した旅行のおかげで通常よりも多くの時間を必要としました。 この痛みポイントは、今や過去のものです。
この新しいパネルはWindow> Asset Exportにあります。 パネルが開いたら、SVGまたは他の形式に変換するアセットを選択し、パネルにドラッグします。 マウスを離すと、アセットのサムネイルがパネルに追加されます。 資産に名前を付けます。 終了するまで、オブジェクトをパネルにドラッグし続けます。
各項目を選択するエクスポート設定領域で、またはShiftキーを押しながら各項目をクリックして、すべてを選択します。 あなたのフォーマットを選択してください - この例ではSVGを選択し、エクスポートボタンをクリックします。 選択した項目は、Illustratorファイルと同じ場所にSVGファイルとして出力されます。
この全体的なプロセスがもっとうまくいけば、Asset Exportパネルを使う必要はありません。 パネルの下部にあるSave for Screensボタンをクリックすると、ダイアログボックスが開きます。
逆に、[画面の保存]パネルの[資産]タブをクリックして、[資産のエクスポート]パネルにアクセスすることができます。 たとえば、アートボード上にカスタムアイコンがある場合、[画面の保存]ダイアログボックスで[資産の書き出し]パネルを開き、その項目を[資産書き出し]パネルにドラッグすることができます。