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

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

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

アセットの使い方

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

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

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

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

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

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

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

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

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

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

アセットを有効に

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

出力

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

テスト-assetsを開くと、

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

Adobe Creative Cloud