Zenn
📷

Photoshopの画像アセット機能を使って解像度違いのアプリアイコン画像を一発で出す方法と、レイヤー複製スクリプト

2020/12/14に公開
JavaScript
Photoshop
#
cocoa
tech

背景

最近、Mac向けデスクトップアプリのアイコンを設定する機会がありました。
アプリのアイコンと言うものは画像を一個設定して終わり、と言うわけではなく、デスクトップに置く用や通知領域に表示する用など、色々な解像度のものを設定する必要があります。
今回はMac向けのデスクトップアプリでしたが、設定が必要な画像は16px, 32px(retina), 32px, 64px(retina), 128px, 256px(retina), 512px, 1024px(retina)の10種類。
それぞの解像度にリサイズして出力しないといけません。9回とか10回もリサイズと保存のコマンドをポチポチやるのも面倒ですし、もし再度変更が必要になったら修正したものをまたコピーしなおさないといけない。こういうのはエンジニアらしく自動化しちゃいましょう。

16x16だとか32x32とかのアイコンの場合、アンチエイリアシングに頼って拡大縮小するよりもドット絵の要領でポチポチと手で書いた方が良い結果が得られる場合が多いと思いますので、クオリティを追求する場合は手でやってください。今回のは手抜きメソッドです。

TL;DR

  • Photoshopの「画像アセット」機能を使うと保存時に複数レイヤーを複数ファイルに出力してくれる。
  • １枚のレイヤーを複数レイヤーにコピーしてリネームする必要があるので、そこのスクリプトを作った。

画像アセット機能

タイトルの通り、今回はPhotohsopでアイコン画像を作ることにしました。
Photoshopには、画像アセット機能というものがあり、これを使うと.psdファイルの保存時にレイヤーを画像に書き出してくれます。
これを使って、単純にリサイズした画像をアイコン用に書き出そうと思います。

画像ファイルのフォーマットや解像度を設定するには、画像アセットとして書き出したいレイヤーに適切な名前を付けてやる必要があります。例えば32 x 32 logo.pngというレイヤー名にすることで、32px四方のpng画像という指定ができます。

そもそも複製とリネームがめんどくさい

今回のケースだとオリジナルのレイヤーを元に9回は複製とリネームをやらなければいけません。そこでめんどくさいリネームを自動化するために単純な.jsxスクリプトを書きました。

30行程度の短いスクリプトなので、ファイルをダウンロードするなりエディタにコピペするなり適当にローカルに持って行ってください。

スクリプト

// Photoshopの画像アセット生成用に、Mac OSXアプリ用のアイコンをレイヤーに自動複製してくれるスクリプト v1.0
// author trpla226 2020/12/7
// Adobe Photoshop 2021で動作確認

(function () {
// 初期化・参照キャッシュ
var document = app.activeDocument
var layer = document.activeLayer

// 設定
var ext = ".png"
var baseResolutions = [16, 32, 128, 256, 512]
var multipliers = [1,2,3]

var baseName = layer.name

alert("現在選択中のレイヤー「" + layer.name + "」を複製して画像アセット用のレイヤーを作成します。");

for(resolutionIndex in baseResolutions) {
    for(multiplierIndex in multipliers) {
        duplicateLayer(baseName, layer, baseResolutions[resolutionIndex], multipliers[multiplierIndex])
    }
}

// 関数定義
function duplicateLayer(baseName, layer, baseResolution, multiplier) {
    var newLayer = layer.duplicate(layer, ElementPlacement.PLACEAFTER);
    var res = baseResolution * multiplier
    var m = multiplier === 1 ? "" : "@"+multiplier
    newLayer.name = res + " x " + res + " " + baseName + baseResolution + m + "x" + ext 
    return newLayer
}

})()

使い方

以下リポジトリのREADMEに説明を書いたので、参照してください。

https://github.com/trpla226/layercopier

Discussion