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](http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2818777&pid=881901298)
