画面に書き出しワークフローは、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

画面に書き出しダイアログ(「アセット」タブ)

アセットの書き出し(画面に書き出しワークフロー)

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

  1. 次のいずれかの操作を行います。

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

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

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

    「アートボード」タブ:

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

    「アセット」タブ:

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

    注意:

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

    画面に書き出しダイアログ(「アートボード」タブ)

  3. 開いているタブに応じて、ファイルとして書き出す対象を選択します。チェックマークは、アートボードまたはアセットが選択されているかどうかを示します。

    アートボード」タブ:

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

    「アセット」タブ:

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

    注意:

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

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

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

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

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

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

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

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

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

アセットの収集

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

アセットを収集するには、アセットの書き出しパネル(ウィンドウ/アセットの書き出し)にアートワークを追加する必要があります。方法は次のとおりです。

  • アセットの書き出しパネルにアートワークをドラッグする
  • アセットを右クリックし、「収集(書き出し用)」をクリックします。
  • アートワークを選択し、アセットの書き出しパネルで  をクリックする
  • アートワークを選択し、ファイル/選択範囲を書き出しをクリックする

注意:

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

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

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

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

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

    注意:

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

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

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

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

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

    注意:

    生成された出力を作成するフォルダーなどの情報を追加したり、ファイルのプレフィックスなどの詳細を追加する場合は、画面に書き出しダイアログを使用します。 をクリックすると、画面に書き出しダイアログが開きます。アセットの書き出しパネルで設定したオプションは、画面に書き出しダイアログですべて保持されます。

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

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

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

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

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

法律上の注意   |   プライバシーポリシー