PhotoShopのアセットでレスポンシブ画像作成が楽になる

PhotoShop大好き!どうも太田アベル(@LandscapeSketch)です。

レスポンシブデザインで、解像度ごとに等倍、1.5倍、2倍など拡大画像を用意するのはなかなか手間です。ですが、最近PhotoShopに搭載された「アセット」をうまく使えば保存時に自動的に、自在に生成することが可能です。

スポンサーリンク

アセットの使い方

テスト画像を用意しました。100x100pxの小さな画像です。
これを等倍と2倍の解像度で自動出力するように設定します。

screenshot_0110

 

まずは出力したいレイヤーをグループ化します。
レイヤー名が出力ファイル名になるので、とりあえず「test.png」としておきます。

screenshot_0111

screenshot_0112

 

「テスト画像」というテキストレイヤーと、ベタ塗りレイヤーをグループ化しました。
screenshot_0113

 

次にアセットでどのように出力するか?をグループレイヤの名称部分に入れていきます。これは単なる名前ではなく、コマンド名に近い扱いです。説明ではわかりづらいですから実際にやってみましょう。
screenshot_0114

 

グループレイヤの名称を次のようにします。

test.png,200% test@2x.png

ちょうどコマンドラインの指示のようですね。この文字列が理解されて、画像を適宜出力してくれます。

PhotoShopアセット

上の指示を細かく説明しますと、

  • text.png・・・そのままの状態の画像を「test.png」として出力
  • 「,」・・・コンマで複数の状態を指定できます
  • 200%・・・200%の大きさでこの後に続くファイルを出力
  • test@2x.png・・・200%の大きさの画像を「test@2x.png」として出力

このような構造になっています。もちろん3つ、4つの状態も付け加えられます。

アセットを有効に

つぎにファイルメニューから、「生成」>「画像アセット」にを有効にします。これを有効にしないと普通の動作になってしまいます。

screenshot_0116

出力

この文字が与えられたレイヤはファイルを保存すると自動で「ファイル名-assets」というフォルダに出力されます。先ほどのtest.psdを保存してみます。

screenshot_0118

テスト-assetsを開くと、
screenshot_0119

このように2つの画像が出来上がりました。@2xの方はもちろん2倍の大きさになっていて、そのままレスポンシブ画像として使えます。RetinaJSなどと組み合わせると良さそうですね。

screenshot_0120

 

Adobe Creative Cloud