チュートリアル

[Photoshop]超便利!アセット機能を使ったブログ用画像書き出し方法

自分で画像を記事内の制作したいブロガーのみなさんこんにちは
突然ですが、フォトショップをお使いのみなさま、画像を制作の際アセット機能を使っていますでしょうか?

このアセット機能はCC以降のフォトショップについており、psdファイルを保存することで、画像も一緒に保存できる機能です。

効果的に使えば非常に時短になりますのでおすすめしています。

この記事ではアセット機能の詳細と方法、アセット用のpsd配布を行います。

アセット機能について

アセット機能をオンにすると、psdを保存するときに保存ファイルが自動生成されます。

この自動生成の時にそのpsd内で画像を分割していれば、複数のファイルを同時に生成できるのです。

今までは一画像につき一回の「別名で保存」もしくは「web用書き出し」を行い、書き出していましたが、このアセット機能を使いこなせればその工程がカットできちゃうのです。

詳しい工程はadobeに書いてありますが、ブログ用に書き出すとなると何がいいのかをかいつまんで説明いたしますね。

画像ごとにアートボードを設定する

ブログに使用する画像は配置場所によってサイズが違いますよね。
ですのでサイズを各々変更したアートボードを用意し、それぞれにアセット名を含めたファイル名を指定します。

この時、アートボードに直接アセット名を指定してもいいのですが、どうもそうすると画像のサイズが合わなかったりするバグ?的なものが発生するので、一つ下にファイルを作り、そのフォルダにアセット名を設定しています。

このやりかただとファイルに入ってるレイヤーのみがアセットとして吐き出されるので注意してください。

画像の内側で細かくアセットを分割する

画像の内側で細かくアセットを分割することも可能で、それにはマスクを使用します。

ただ選択範囲でマスクをかけてもいいのですが、それよりはシェイプでベクトルマスクをかけて、後ほどより調整が楽な方法をおすすめします。

ベクトルマスクの掛け方

切り出したい形にシェイプを生成。このときウィンドウ左上にあるシェイプのウィンドウをパスに変更します。


マスクをかけたいファイルを選択します。
マスクをクリック。
そうすることでレイヤーにベクトルマスクがかかります。

このように書き出したいファイルにマスクをかける事で、そのファイルをマスクのサイズで書き出すことができます。

ベクトルマスクは、マスクサムネイルを選択後パス選択ツール(ショートカット:A)で変更可能です。

透過画像を書き出したい時の設定方法あれこれ

アートボードでデフォルトのアセット設定にしていると、背景が白になってpngとしてアセット設定していても透過してくれません。
そんな時は属性ウィンドウにあるアートボード背景色のプルダウンを透明にします。

そうすればデフォルトの設定が変更され、pngで書き出しをした際に透明にすることが可能です。

ちなみに透過画像を書き出す時は.pngを使用します。

仕様上、jpgは透過ができませんので拡張子は.pngを設定します。

ただ、jpgよりも基本ファイルサイズが重くなってしまうので大きいサイズでかつ、透過の必要ない画像の場合はjpgを設定しておきましょう。
写真等はjpgが望ましいですね。

画質を名前でコントロールする

jpgで書き出す場合は、ファイル名のあとに1~10の数値を入れる事で画質をコントロールすることが可能です。
10に設定すると最高画質で書き出されますが、そこまで画質の必要ない画像素材が欲しい場合は6~7あたりを設定しておけば高画質でファイルサイズの軽いものを書き出すことができます。

書き出し用ファイルの配布

みなさまのブログのキャッチ画像や記事中挿入画像サイズに合わせてアートボード、ファイル名をカスタマイズして自由にお使いくださいませ。

サイズはStinger記事内画像のデフォルトサイズに合わせております。

こちらもしくは下の画像クリックでダウンロード可能です。

ダウンロード