Chromeストア用のショップアイコンと、スクリーンショットやプロモーション タイルの作り方について書いていきます。
ショップアイコンの作り方
Chrome拡張を作成してChromeストアに登録する際、ショップアイコンを必ず登録しないといけません(2020/10/31現在)。
ショップアイコン用の画像は、128x128px(実際は96x96で、上下左右の16pxは透過)が必要です。
この仕様に満たない画像をアップロードしようとした場合(透過になっていない場合)、アップロード中の処理は無限に終わりません。
透過アイコンの作り方なんて知らないし適当でいいんだよな私みたいな人向けに、ショップアイコンの作り方を以下に記載します。Windows10標準搭載の3Dペイントを使うのでWindows10向けです。
まずは96x96の画像(画像A)を作成する。
画像は適当にパワポで作って、ペイントでサイズ変更して作りました。
画像AをWindows10標準アプリ「ペイント3D」で開く
画像を右クリックして「画像を3Dペイントで開く」で開きます。
上の「キャンバス」タブをクリックする
すると画面右側にキャンバスの設定が表示されます。
次の手順でキャンバスの設定をする
- 「透明なキャンバス」をオンにする
- 「キャンバスでの画像のサイズ変更」をチェックなしにする
- 「縦横比を固定する」はどっちでもいいです。
- これをする前に次の幅と高さを変更すると画像のサイズも変更してしまうので注意。
- 幅と高さを128x128にする
これで実画像のサイズは96x96のままで、背景画像が128x128になります。
左上の「メニュー」から「名前を付けて保存」で「画像」でpng保存する
これで128x128px(実際は96x96で、上下左右の16pxは透過)のショップアイコンが作成できました。
スクリーンショットやプロモーション タイルの作り方
Chromeストアのスクリーンショットやプロモーションタイルの作り方を記載していきます。
スクリーンショットやプロモーション タイルは適当にJPEGで作ればそのままでOKなんですが、JPEGは保存のたびに劣化するのでPNGで保存したいです。PNGのときだけ少し注意が必要です。
例えば「プロモーション タイル(小)」の仕様は次のようになっています。(2020/10/31現在) * 440×280 キャンバス * JPEG または 24 ビット PNG(アルファなし)
JPEGのときは何もしなくていいっぽいんですが、問題はPNGのときで、24ビットPNG(アルファなし)という制限がついています。
おそらく適当にPNG保存したら深度32ビットの画像になっていると思います。画像の深度を調べるには、画像ファイルを右クリックして「プロパティ」>「詳細」タブで確認できます。
Chromeストアに登録しようとして以下のような「エラー:不明なエラーが発生しました。」とか出たら、この深度の違いによって登録できない可能性があります。
なので24ビットPNGに無理やり修正します。
画像をペイントで開いて、「名前を付けて保存」でファイルの種類を「24ビットマップ(.bmp;dib)」で保存します。その後、保存したファイルの拡張子をPNGに変更したらOKです。
以上です。