2018.06.06

ウェブ用画像作成が簡単!Photshop CCの画像アセット機能

こんにちは、雪乃です!今回はPhotoshop CCから使える機能で、とっても便利な画像アセットについて紹介します。 画像アセットを利用すれば、Photoshopで作成したサイトのデザイン(カンプ)から必要なウェブ用のパーツ画像を簡単に書き出せます。 今さらと思う方もいるかもしれませんが、お付き合いくださいw
Photoshop CC2018 を使用しています。

書き出したいレイヤー名に拡張子をつける

  1. メニューバーの「ファイル」→「生成」→「画像アセット」をチェックします。
  2. 画像として書き出したいレイヤー名やレイヤーグループ名(複数のレイヤーで構成された画像)を「ファイル名」+「ピリオド+拡張子(.jpg/.pngなど)」に変更します。
    下記画像ではお問い合わせボタン以外は単一画像のためレイヤー名を、お問い合わせボタンは複数のレイヤーで構成されているため、レイヤーグループ名を変更しています。

Photshop

Photoshopデータを保存する。

  1. Photoshopデータを保存します。
  2. 保存するとPhotoshopデータと同じフォルダー内に、「ファイル名」+「-assets」のフォルダーが作成され、下記画像のように保存されます。また、Photoshopデータを変更すると、アセットのファイルも更新されます。

データ保存イメージ

他にもレイヤー名の付け方で、画質やサイズなど、いろいろな画像を書き出すことができます。
画像アセットの機能を使うと、パーツの作成があっという間ですね~この機能を使って時短!時短!
青森県・岩手県・秋田県・八戸市・青森市・弘前市・三沢市・十和田市・八戸近郊のホームページ制作、ストリートビューのご依頼はお値段以上をお約束!ホームページのお申し込みは北の国ウェブ工房へ!