Photoshopの便利機能、
アセットで書き出しについて解説！

ホームページのデザイン制作にも使われるデザインツール、Photoshop。

そのPhotoshopには便利な機能、アセットでの書き出しを可能にする「画像アセット生成」があります。（Illustratorにもあります。）

ホームページをコーディングする際に、一般的にはPhotoshopのレイヤーをJPGかPNGの形式に変換します。
その時に簡単に書き出しをできる機能が「画像アセット生成」です。

この記事ではアセットで書き出しついて解説します。
ぜひ最後までお読みください。

アセットで書きだしとは？

そもそもここでの「書き出し」というのは、画像形式を変換して保存することです。
「画像アセット生成」というのはレイヤーの名前を拡張子付きの名前にすることで、画像を自動書き出しする機能です。

画像アセット生成機能を使わなくても、1枚ずつ書き出したり、切り取って書き出すこともできます。
ただし、効率的ではありません。
画像アセット生成機能を使えばコーディングの効率を上げられます。

アセットで書き出す際の便利なポイント6つ

アセットで書き出しが便利なのは次のような特徴があるからです。

スライスが不要

「スライス」とは簡単に言うと、書き出す範囲を選ぶことです。
スライスしてからの画像の書き出しは非常に手間がかかりました。

書き出す画像が重なっていても楽々

画像が重なっていても、1つ1つ選択できるので重なりを配慮する必要がありません。
デザインする際の自由度も上がります。

簡単に文字だけを書き出し

以前は画像に文字が重なっている場合、画像を非表示にしてからスライスを行って、書き出しをしていました。
しかしアセットで書き出す場合は、それを行わなくても文字だけを簡単に書き出せるようになりました。

変更を自動で保存

もしも書き出した後に変更が必要な場合はPhotoshopで変更をすれば、JPGやPNG形式の方にも自動で変更が保存されて便利です。（JPGやPNGのファイル位置に注意が必要です。）

複数書き出し

簡単な操作一回で、複数の画像を書き出しすることができます。
また1つのレイヤーから複数書き出すことも可能です。

サイズや画質を指定

名前を付けるだけで簡単にサイズや画質を指定できます。

img.jpgのサイズを2倍にするときは、200% img.jpgとします。
画質を75%にするときは、75% img.jpgとします。

Adobe公式のプラグインでより簡単に指定することもできます。

アセットで書き出し可能な拡張子

書き出し可能な拡張子は次の通りです。

• JPG
• GIF
• PNG
• SVG

アセットで書き出し、手順

アセットで書き出しがどれほど便利なのか手順で説明します。

1. 画像に拡張子付きの名前を付ける（img.jpgなど）
2. 「ファイル」→「生成」→「アセット画像」

このようにたったの2手順で画像の書き出しが完了してしまいます。
とても簡単ですね。

まとめ：アセットで書き出すととても便利！

ここではアセットでの書き出しについて解説しました。
ホームページ制作の、デザインからコーディングをするときに非常に便利な機能です。

「画像アセット生成」機能を使えば、複雑なデザインも簡単にコーディングできます。
デザイナーやコーダーの人はぜひ使ってみてはいかがでしょうか。

ノキボウ株式会社ではお好きなデザインでのホームページ制作が可能です。
ホームページ制作や取り扱いについてお気軽にご相談ください。

群馬県高崎市のホームページ制作会社　ノキボウWEB