ベスパリブ

プログラミングを主とした日記・備忘録です。ベスパ持ってないです。

Chromeストアの画像アセット(アイコン)の作り方(とりあえず登録できればいい人向け)

Chromeストア用のショップアイコンと、スクリーンショットやプロモーション タイルの作り方について書いていきます。

ショップアイコンの作り方

Chrome拡張を作成してChromeストアに登録する際、ショップアイコンを必ず登録しないといけません(2020/10/31現在)。

ショップアイコン用の画像は、128x128px(実際は96x96で、上下左右の16pxは透過)が必要です。

この仕様に満たない画像をアップロードしようとした場合(透過になっていない場合)、アップロード中の処理は無限に終わりません

透過アイコンの作り方なんて知らないし適当でいいんだよな私みたいな人向けに、ショップアイコンの作り方を以下に記載します。Windows10標準搭載の3Dペイントを使うのでWindows10向けです。

まずは96x96の画像(画像A)を作成する。

画像は適当にパワポで作って、ペイントでサイズ変更して作りました。

f:id:takeg:20201031172648p:plain
96x96

画像AをWindows10標準アプリ「ペイント3D」で開く

画像を右クリックして「画像を3Dペイントで開く」で開きます。

f:id:takeg:20201031172947p:plain
3Dペイントで開く

上の「キャンバス」タブをクリックする

f:id:takeg:20201031173046p:plain
キャンバスをクリック

すると画面右側にキャンバスの設定が表示されます。

次の手順でキャンバスの設定をする

  1. 「透明なキャンバス」をオンにする
  2. 「キャンバスでの画像のサイズ変更」をチェックなしにする
    • 「縦横比を固定する」はどっちでもいいです。
    • これをする前に次の幅と高さを変更すると画像のサイズも変更してしまうので注意。
  3. 幅と高さを128x128にする

これで実画像のサイズは96x96のままで、背景画像が128x128になります。

f:id:takeg:20201031173724p:plain
最終的なキャンバスの設定はこんなかんじ

f:id:takeg:20201031174537p:plain
画像の回りに白い枠が出てきたら成功

左上の「メニュー」から「名前を付けて保存」で「画像」でpng保存する

これで128x128px(実際は96x96で、上下左右の16pxは透過)のショップアイコンが作成できました。

スクリーンショットやプロモーション タイルの作り方

Chromeストアのスクリーンショットやプロモーションタイルの作り方を記載していきます。

スクリーンショットやプロモーション タイルは適当にJPEGで作ればそのままでOKなんですが、JPEGは保存のたびに劣化するのでPNGで保存したいです。PNGのときだけ少し注意が必要です。

例えば「プロモーション タイル(小)」の仕様は次のようになっています。(2020/10/31現在) * 440×280 キャンバス * JPEG または 24 ビット PNG(アルファなし)

JPEGのときは何もしなくていいっぽいんですが、問題はPNGのときで、24ビットPNG(アルファなし)という制限がついています。

おそらく適当にPNG保存したら深度32ビットの画像になっていると思います。画像の深度を調べるには、画像ファイルを右クリックして「プロパティ」>「詳細」タブで確認できます。

f:id:takeg:20201031183732p:plain
深さ32ビットのPNG画像

Chromeストアに登録しようとして以下のような「エラー:不明なエラーが発生しました。」とか出たら、この深度の違いによって登録できない可能性があります。

f:id:takeg:20201031183838p:plain
登録しようとしたらエラーが出る。具体的なエラーメッセージは出してくれない

なので24ビットPNGに無理やり修正します。

画像をペイントで開いて、「名前を付けて保存」でファイルの種類を「24ビットマップ(.bmp;dib)」で保存します。その後、保存したファイルの拡張子をPNGに変更したらOKです。

以上です。