[Android] アイコンを簡単作成できる Image Asset

アプリ完成だと思っても、最後の仕上げでたくさんのアイコンをつくらないといけないのは面倒ですよね〜。更に、Adaptive icons というのを Oreoから作らないといけません。

ところが簡単に作成できるツール Image AssetがAndroid Studioにあります。これはありがたい!

Android Studio
2021.2.1




Adaptive Icons

 

昨今、アプリのリリースには新しいAPIを対応しないといけなり、Adaptive Iconsを避けるわけにはいかなくなりました。

google play 00 100x100 - [Android] アイコンを簡単作成できる Image Asset
Android アプリを公開するには、aab ファイルを作成して Developer Console にアップロードします。まず公開用の...

こちらにGoogleの説明がありますので、Adaptive iconsこれらを睨みながら確認していきましょう。

更に、Google Play アイコンのデザイン仕様の変更があります。

 

 

Adaptive Icons の構成

1x1.trans - [Android] アイコンを簡単作成できる Image Asset

 

Adaptive iconは2枚のforeground、background画像とその上をおおうマスクで構成されています。


 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset


 
  • 2枚の画像サイズは108dp x108dp
  • foregroundの画像は直径66dpの範囲外はアニメーションで隠れる可能性がある
  • マスクはランチャー次第で正円形から四角まで色々ある

 

例えばこのようなアイコンを用意して見ます。これをforegroundに使いますので背景は透明にします。
 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset

 

Image Asset Studio

 

アイコンをforegroundとbackgroundの2枚作るのはいいのですが、その他のサイズの異なるアイコンも同時に作成しないといけません。そこでAndroid StudioにはImage Assetという便利ツールがあります。

Fileかappなどを選択したところから「New」「Image Asset」からアイコンを作成するツールが起動します。
 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset

1x1.trans - [Android] アイコンを簡単作成できる Image Asset


 

このアイコン画像を設定します。Image Assetの「Source Asset」からImageを選択して画像が存在するPathを設定します。そうすると画像を取り込んでアイコンのそれぞれの作成例ができます。
 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset

「Foreground Layer」「Source Asset」「Path」からdrawable-v24のパスに入ります。
ここで「Drag and drop a file into the space …」とあるのですが、うまくいかないときはpngなどの画像ファイルをそのままここで選択したほうがいいかもしれません。

1x1.trans - [Android] アイコンを簡単作成できる Image Asset

 
次はbackgroundです。これは同じように画像を作ってもいいのですが、カラーコードで設定してしまうという安直な方法もありです。
「Background Layer」を選び「Asset Type」をColorにしてカラーコードをクリックするとSelect Colorのダイアログが現れますので背景色を決めます。
 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset


 
この他にTrimやResizeがありますので遊んでみてはどうでしょう
 
先に進めるために「Next」をクリックすると「Confirm Icon Path」が表示されます。デフォルトでドロイド君のアイコンが設定されていましたが、同じ名前にしたので上書きされるぞという警告がでています。気にせずここでは「Finish」
 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset
 
これで一気にアイコンが作成されました!
 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset
 

実機上のアイコン

 

これで実行してみるとアイコンが確かに出来上がっています。
 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset


 
1x1.trans - [Android] アイコンを簡単作成できる Image Asset
 

Google Play アイコンのデザイン仕様

 

Google Play Consoleでアプリをリリースしていると、このようなワーニングが表示されています。

1x1.trans - [Android] アイコンを簡単作成できる Image Asset

アプリアイコンの変更か!と一瞬思いましたが、これはあくまでGoogle Playでアプリが紹介されているページのアイコンの事です。

実際に良い例、悪い例が表示されていますので確認しておきましょう
Google Play アイコンのデザイン仕様
 
 
References:
Image Asset Studio を使用したアプリアイコン作成
Adaptive icons | Android Developers
Designing adaptive icons

シェアする

  • このエントリーをはてなブックマークに追加

フォローする