概要
Photoshopの応用機能解説です。
この記事では「画像アセット」機能を紹介します。
こちらの機能は通常のPhotoshop機能と異なる点が多いです。
まずどんな機能か把握しましょう。
Photoshop 画像アセットの基本
PhotoshopのWebサイトデザインデータはコーディング担当が受け取り、実際に動く形にする「コーディング」をする必要があります。
コーディングではどのような形のデータが必要なのでしょうか。
Photoshopで作成されるのは次のような長い一枚の画像だと多います。
しかし実際にコーディングで必要なのは画像単体のデータです。
例で言えばTOPのビジュアル部分、Aboutの3枚の画像、そしてサイトロゴです。
このようなデータはデザイン前の画像を受け取ることもあります。
しかし、デザイン上で画像加工をしていたり、サイズも適切なサイズに加工されていることから、デザインデータから「抽出する」ことが一般的な作業工程となっています。
この「必要な画像をPhotoshopから取り出す」機能が「画像アセット」なのです。
プロフィールリンク課題から、こちらのPhotoshopのデータから書き出し設定をしてみましょう。
元データ
画像アセット機能の設定を有効にする
こちらPhotoshop CC2024の画面です。
メニューの位置がころころ変わる機能なので、もしかしたら最新画面だと異なっていることがあるかもしれません。
generatorを有効にします。
デザインデータ（psd）を開く
Photoshopデータの置き場所を変えておく
Photoshopデータをどこに置いておくかも重要です。
今回はわかりやすく「デスクトップ」に置いておきます。
レイヤー名を拡張子付きの画像ファイル名に変更する
レイヤー名を書き出したい画像の名前に変更します。
ここでは「icon.png」にします。
「.png」「.jpg」等が使えます。
ベクターデータのみ「.svg」が使えるかもしれません。
画像アセット機能を有効にする
ファイル > 生成 > 画像アセットをチェックが入った状態にします。
CC2025の場合は
自動処理＞ジェネレータープラグイン＞画像アセット
チェックが入っている間はずっと機能は動作しています。
デザインファイルの隣に「xxxxx-assets」というファイルができる
この機能を有効にした時点で自動でフォルダが作成されます。
そのフォルダの中にレイヤーにつけた名前のファイルができていれば成功です。
この機能の強みは「リアルタイム性」です。
チェックが入っている間は自動で動きますので、文字レイヤーを含むグループに設定を有効にしていた場合、その内容を書き換えれば即時に書きかわった画像が入手できます。
うまくいかない時は…
レイヤーの名称変更は「グループ」に対してもできます。
グループ内に調整レイヤーを含めれば画像加工後の状態の画像が入手できます。
グループでサイズがおかしくなってしまう場合はレイヤーをスマートオブジェクト化すると非表示部分が削除され、適切なサイズになる場合があります。
適宜グループ化とスマートオブジェクトを活用しましょう。
画像アセットのオプション
2倍、３倍の画像を書き出す
スマートフォンは解像度が高いため、そのままのサイズを書き出して利用しても綺麗に表示されないことがあります。
この場合は2倍や3倍の画像を書き出す設定をして、その画像を利用しましょう。
このように最初に200%とつけましょう。
100%と200%と300%の画像が同時に欲しい場合は次のようにします。
jpgの品質を指定する
このようにすると80%品質のjpgで出力されます。
