スクリーン用に書き出す為のワークフローは、1 回の操作で様々なサイズやファイル形式のアセットを生成できる新しい方法です。このクイック書き出し機能を使用すれば、画像素材(アイコン、ロゴ、画像、モックアップなど)の生成をより簡単にすばやくおこなえるようになります。この機能は、Webやモバイルのワークフローで特に効果的です。

例えば、モバイルアプリケーションの開発のシナリオでは、ユーザーエクスペリエンスデザイナーがアイコンやロゴを頻繁に再生成することがあります。この場合、アセットの書き出しパネルにそのアイコンやロゴを追加すれば、ボタンをワンクリックするだけで様々なファイル形式やサイズに書き出すことができます。 

便利な機能:

  • 1 回の簡単な操作で複数の形式やサイズに書き出すことができます。 
  • 標準またはカスタムのサイズ(スケール)に書き出すことができます(1x、2x、3x、0.5x、1.5x など)。
  • PNG ファイルを生成するアルゴリズムが次のように改善されました。
    • PNG ファイルの生成時間が短縮されました。 
    • 透明度の高い PNG-8 ファイルを生成できるようになりました。

利用可能な形式:

  • PNG(PNG-8、PNG-24)
  • JPEG(JPEG 100%、JPEG 85%、JPEG 50%、JPEG 25%)
  • SVG
  • PDF
Export-for-screens-dialog
スクリーン用に書き出しダイアログ(「アセット」タブ)

アセットの書き出し(スクリーン用に書き出す為のワークフロー)

アートボード全体または個々のアートワークの書き出し

  1. 次のいずれかの操作をおこないます。

    • ショートカットキー:Alt + Ctrl + E(Windows)/Command + Opt + E(Mac)を押します。
    • ファイル/書き出し/スクリーン用に書き出しをクリックします。
    • アートワークを選択し、ファイル/選択範囲を書き出しをクリックします。
    • 対象のアートワークを右クリックし、「収集(書き出し用)」をクリックします。

    スクリーン用に書き出しダイアログで、アートワークの書き出し時に使用する設定を編集します。

  2. 書き出す範囲を選択します。2 つのタブを使用できます。

    「アートボード」タブ:

    書き出し可能なアートボードから選択します。アートボードをクリックして、選択または選択解除します。Shift キーを押しながらクリックして、複数のアートボードを選択することもできます。

    「アセット」タブ:

    アセットの書き出しパネルに収集したアセットから選択します。後述の「アセットの書き出しパネル」のセクションを参照してください。

    注意:

    サムネールアイコンまたはリストアイコンをクリックすると、アイテムの表示方法が切り替わります。

    Export-for-screens-dialog_artboards-tab
    スクリーン用に書き出しダイアログ(「アートボード」タブ)
  3. 開いているタブに応じて、ファイルとして書き出す対象を選択します。チェックマークは、アートボードまたはアセットが選択されているかどうかを示します。

    アートボード」タブ:

    • すべて:すべてのアートボードを選択します。各アートボードは、個別に書き出されます。
    • 範囲:ドキュメントで使用可能なアートボードから、書き出すアートボードを個別に選択します。例えば、「1, 2, 4-6」と指定すると、1、2、4、5、6 のアートボードが選択されます。
    • ドキュメント全体:ドキュメント全体を 1 つのアートワークとして書き出します。

    「アセット」タブ:

    • すべてのアセット:「アセット」タブに収集されたすべてのアセットを書き出す場合は、このオプションを選択します。

    注意:

    新規に開始するには、「選択を解除」をクリックして、収集したアセットの選択を解除します。特定のアートワークを選択するには、サムネールをクリックします。

  4. 書き出すファイルの設定を指定します。

    • 拡大・縮小:出力ファイルのスケール比率を指定します。
    • 場所:ファイルの書き出し先フォルダーの場所を指定します。
    • 書き出し後に場所を開く:書き出したアセットの保存先フォルダーを、ファイルブラウザー(エクスプローラーまたは Finder)で開くには、このオプションを選択します。
    • サフィックス:サフィックスを指定して出力ファイルに固有の名前を付けます。
    • 形式:.png、.svg、.jpg、または .pdf ファイルの出力が必要な場合に指定します。
    • プレフィックス:生成されるファイル名の先頭に付く文字列を指定します。
    • スケールを追加ボタン:出力スケールや書き出し形式を追加する場合は、「スケールを追加」をクリックします。
    • 削除ボタン:出力形式を削除するには、X アイコンをクリックします。
    • プリセット
      • iOS:iOS プロジェクトに通常必要なプリセットファイルの出力形式を追加する場合にクリックします。
      • Android:Android フォームファクタープロジェクトに通常必要なプリセットファイルの出力形式を追加する場合にクリックします。
  5. オプション)書き出すファイル形式の出力設定は、設定アイコン()をクリックして指定します。

  6. 「アートボードを書き出し」または「アセットを書き出し」ボタンをクリックします。

アセットの書き出しパネル

収集と書き出しを瞬時に実行

アセットの書き出しパネルでは、アートワークから収集したアセットが表示されます。これらのアセットは主に、頻繁に書き出すアートです。

例えば、モバイルアプリケーションの開発のシナリオでは、ユーザーエクスペリエンスデザイナーがアイコンやロゴを頻繁に再生成することがあります。アセットの書き出しパネルにそのアイコンやロゴを追加すれば、ボタンをワンクリックするだけで様々なファイル形式やサイズに簡単に書き出すことができます。 

AssetExport_panel
アセットの書き出しパネル

書き出し用のアートワークの収集

複数のアセットまたは単一のアセットとして書き出すためにアセットの書き出しパネルでオブジェクトを収集できます。

複数のアセットとして書き出すアートワークの収集

Web

複数のアセットとして書き出すオブジェクト/レイヤーを収集するには、アセットの書き出しパネル(ウィンドウアセットの書き出し)に追加します。次のいずれかの操作をおこないます。

  • アセットの書き出しパネルにアートワークをドラッグします。
  • アセットを右クリックし、収集(書き出し用)複数のアセットとしてを選択します。または、アートワークを選択し、アセットの書き出しパネルで選択範囲から複数のアセットを生成アイコン()をクリックします。
  • レイヤーパネルでハイライト表示されているレイヤーをアセットとして追加するには、レイヤーパネルの下部にある書き出し用に追加アイコンをクリックします。

注意:

アセットの書き出しパネルにアートワークをドラッグするたびに、アセットが「収集」されます。この操作では、アートボードや CC ライブラリのオブジェクトの複製が作成されるわけではありません。ドキュメント内のアートワークを更新すると、アセットの書き出しパネル内の対応するアセットが自動的に更新されます。

単一のアセットとして書き出すアートワークの収集

Web

次のいずれかの操作をおこないます。

  • AltOption キーを押しながら、アートワークをアセットの書き出しパネルにドラッグします。
  • アセットを右クリックし、収集(書き出し用)単一のアセットとしてを選択します。または、アートワークを選択し、AltOption キーを押しながら、アセットの書き出しパネルで選択範囲から単一のアセットを生成アイコン()をクリックします。

アセットの書き出し(アセットの書き出しパネルワークフロー)

アセットの書き出しパネルを使用したアセットの書き出し

  1. ウィンドウアセットの書き出しをクリックして、アセットの書き出しパネルを開きます。

  2. アセットの書き出しパネルに収集したアセットが表示されます。境界線は、アセットが書き出し対象として選択されているかどうかを示します。

    注意:

    境界線が付いているアセットのみが書き出されます。サムネールをクリックして、選択と選択解除を切り替えます。

  3. 書き出し設定の三角形  をクリックして、書き出すファイルの形式/サイズを表示または追加します。

    • 拡大・縮小:出力ファイルのスケール比率を指定します。
    • サフィックス:サフィックスを指定して出力ファイルに固有の名前を付けます。
    • ファイル形式:.png、.svg、.jpg、または .pdf ファイルの出力が必要な場合に指定します。
    • スケールを追加ボタン:出力スケールや書き出し形式を追加する場合にクリックします。
    • 削除ボタン:出力形式を削除するには、X アイコンをクリックします。
    • プリセット
      • iOS:iOS プロジェクトに通常必要なプリセットファイルの出力形式を追加する場合にクリックします。
      • Android:Android フォームファクタープロジェクトに通常必要なプリセットファイルの出力形式を追加する場合にクリックします。
  4. オプション)書き出すファイルの出力形式の設定は、フライアウトメニューの「形式の設定」で指定します。

  5. オプション)書き出すファイルを、書き出した直後に表示するには、フライアウトメニューの「書き出し後に場所を開く」をクリックします。

  6. 「書き出し」をクリックして、ファイルを生成します。

    アセットを書き出す際に、Illustrator では、選択した拡大・縮小オプションに基づいて書き出し場所にサブフォルダーがデフォルトで作成されます。例えば、アセットの書き出しパネルでファイルを PNG として書き出すために複数のスケール形式(例えば、1x、2x、3x)を選択した場合、Illustrator では、書き出されるファイル用に 1x、2x、3x という名前のサブフォルダーが作成されます。拡大・縮小オプションがサポートされていない形式の場合、Illustrator では、書き出しに対して選択したファイル形式に基づいてサブフォルダーに名前が付けられます。例えば、SVG や PDF などです。 

    サブフォルダーを作成せずにファイルをフォルダーに書き出すには、アセットの書き出しパネルまたはスクリーン用に書き出しダイアログボックスで「サブフォルダーを作成」オプションの選択を解除します。

    注意:

    書き出すアセットのフォルダーの場所を変更するか、ファイルのプレフィックスなどの詳細を指定するには、スクリーン用に書き出しダイアログボックスを使用します。Click をクリックして、スクリーン用に書き出しダイアログボックスを開きます。アセットの書き出しパネルで設定したオプションは、スクリーン用に書き出しダイアログですべて保持されます。

書き出すアセットの出力設定

書き出すアセットの形式別オプション

形式設定ダイアログでは、書き出し先のファイル形式別出力設定ができます。

  • スクリーン用に書き出しダイアログの設定アイコンをクリックして、形式設定ダイアログを起動します。
  • アセットの書き出しパネルのフライアウトメニューをクリックして、「形式の設定」を選択します。
形式の設定ダイアログで、形式別の設定をおこないます。
形式の設定ダイアログで、形式別の設定をおこないます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー