doors doors

Photoshop|画像アセット

Photoshop|画像アセット

Photoshop|画像アセットで一括管理

Illustratorにもアセットの書き出し機能があり、WEB制作では非常に便利です。
Photoshop(以下PS)にも画像アセットという機能があります。PSでWEBデザインをされる方だとスライスよりも活用されている機能かも知れません。

画像アセット
フォルダ構成
私はOGPファイル(バナーなど)の作成に使用しています。便利なのは、一度、「画像アセット」を行う(画像アセットにチェックが入っている状態)と「(PSのファイル名)-assets」というフォルダを自動で生成してくれます。
今回の元ファイルは「ogp.psd」ですが、このファイルを別の場所へ複製しても、新たにその場所へ「(PSのファイル名)-assets」フォルダを生成します。
ファイル構成
「ogp-assets」フォルダには、それぞれ数字の書かれたファイルがあります。JPEGファイル3点、PNGファイル1点。この数字は画像サイズを表しています。
このファイルは「ogp.psd」で作成されたデータです。

ogp.psdデータの中

アートボードで区分された大きさの違う4つのオブジェクトがあります。レイヤーを見るとアートボード名に画像サイズ(アートボードサイズ)と拡張子が書かれています。
この拡張子が重要な役割を担っています。
先ほどの ogp-assets フォルダ内にあるファイル名とまったく同じことに気づいたでしょうか。

今回はアートボードで4つに区分していますが、一つのアートボードにレイヤーで区分されたオブジェクトがある状態でも同じです。それぞれのレイヤーをどういったファイル名で、画像形式は何で出力するかをアートボード名やレイヤー名にします。

簡単な手順を見てみましょう。
画像を開き、保存します。この状態では、psdファイルがあるだけです。
PSに戻り、レイヤー名を変更します。ファイルを閉じていれば、再度、開いてください。
レイヤー名+拡張子が入力できたら、メニューから「画像アセット」を選びます。
フォルダ構成
psdファイルを保存した場所を確認してください。psdファイル名-assets フォルダができていることが確認できます。
画像アセットを選ぶと自動でフォルダを生成してくれます。
ファイル構成
その assets フォルダ内には、先ほど、レイヤーに付けた名+拡張子のファイルが生成されています。このファイルはJPEGファイルとして出力されたデータです。

psd ファイルと assets フォルダの関係性が形成されたら、この2つのファイル、フォルダは密接に関係し、例えば、psd ファイルを開き、先ほどのレイヤーの画像を変更するだけで、即座に assets フォルダ内のファイルが更新されます。

さらに詳しくは・・・

関連記事

Adobe AfterEffects

AfterEffects|スプラッシュスクリーン

AfterEffects|これはもしかして・・・ Photoshopでは有名なスプラッシュスクリーンの隠し絵柄バージョン。After Effectsにも存在して...

Illustrator|画像効果

Illustrator|画像に可逆的効果を与える WEBデザインや印刷物デザインを行う場合にIllustrator(以下、AI)を使いますが、画像に効果を加える...

WEBデザイン|PhotoshopかIllustratorか、はたまたXDかという議論

2大巨頭のPhotoshopとIllustrator、そこへ参入する新生XD この課題はアプリケーションの習熟度やコーディングを受け持つエンジニアの視点から検討...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。東京・名古屋近郊の打合せもご相談ください。

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...