コーディングメソドロジー

第90回 スライス不要の画像切り出し方法

Photoshop で画像を書き出しする際、従来のやり方では、画像をスライスし「Web 用に保存」から書き出しを行っていたと思いますが、Photoshop CCになり、書き出し機能の種類が増えました。レイヤーから直接画像が書き出せるようになったり、自動で一括で簡単に書き出しができるようになったので、大幅に作業時間を短縮することができます。今回は、便利な機能「画像アセットの生成」を使った書き出し方法についてご紹介したいと思います。

手順①:画像の書き出し設定をする

画面① - 下のような4つの画像の書き出しを例に手順を説明します。
書き出すファイルの詳細設定は、レイヤーパネルでおこないます。(画面①- 右)
書き出したい画像のレイヤーまたはレイヤフォルダ名を以下のルールで書き換えます。今回はそれぞれの画像セットがレイヤフォルダにまとまっているので、レイヤフォルダ名を書き換えます。
基本的には、レイヤ/ レイヤフォルダ名がそのまま書き出し後のファイル名となります。

png形式

デフォルトはpng-32形式。「.png8」や「.png24」のように指定することで書き出し設定を変更することができます。

jpg形式

デフォルトは画質80%。「.jpg1」~「.jpg10」のように、10段階で画質設定をすることができます。

gif形式

デフォルトは透過gif。それ以外の設定はできません。

【画面 ① 】レイヤパネル

【画面 ① 】レイヤパネル

手順②:自動書き出し設定をする

「ファイル」>「生成」>「画像アセット」を選択し画像アセット機能をオンにすると、psdファイルと同じ階層に「psdのファイル名-assets」という名前のフォルダが自動生成され、その中に画像が書き出されます。(画面②)
以後、このpsd ファイルを保存するたびに、自動で画像が書き出されますので、画像編集のたびに書き出しするという作業を省略することができます。

他にも細かい設定ができますので、詳細はPhotoshopヘルプをご参照ください。
(https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html)

この機能をうまく活用するには、レイヤフォルダの構成のしかたがポイントになります。書き出しの効率化を図るためにも、パーツの整理という意味でも、レイヤフォルダの構成についてルールを考えてみるのはよいかもしれません。

【画面 ② 】書き出された画像

【画面 ② 】書き出された画像

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム