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

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

ところが簡単に作成できるツール Image AssetがAndroid Studioにあります。これはありがたい!
 
image asset 06 - [Android] アイコンを簡単作成できる Image Asset

Android Studio 3.1.3
Android 8.1.0

 



Adaptive Icons

 
そもそもAndroid 8.0 以上に対応しないといけなくなったので、Adaptive Iconsを避けるわけにはいかなくなってしかたないので…
こちらにGoogleの説明がありますので、Adaptive iconsこれらを睨みながら確認していきましょう。

 

 

Adaptive Icons の構成

NB Icon Layers 3D 03 ext - [Android] アイコンを簡単作成できる Image Asset
 
Adaptive iconは2枚のforeground、background画像とその上をおおうマスクで構成されています。
https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
 
image asset 04 - [Android] アイコンを簡単作成できる Image Asset
 

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

 
例えばこのようなアイコンを用意して見ます。これをforegroundに使いますので背景は透明にします。
 
cat - [Android] アイコンを簡単作成できる Image Asset
 
Adaptive Icons というサイトでどのようになるかシミュレーションできます。
 
image asset 12 - [Android] アイコンを簡単作成できる Image Asset
 
Adaptive Iconsにアクセスして、背景は適当なものを使って前景としてこのアイコンを設定して、マスク効果、アニメーションを確認して見ます。
 

 

320x480 0107ddd2cbf3fe9b2650df47e5e47ebd d740e - [Android] アイコンを簡単作成できる Image Asset

Image Asset Studio

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

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

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

drawableにアイコンで使う画像をv24として入れます。

image asset 05b - [Android] アイコンを簡単作成できる Image Asset
このアイコン画像を設定します。Image Assetの「Source Asset」からImageを選択して画像が存在するPathを設定します。そうすると画像を取り込んでアイコンのそれぞれの作成例ができます。
 
image asset 06 - [Android] アイコンを簡単作成できる Image Asset
 
次はbackgroundです。これは同じように画像を作ってもいいのですが、カラーコードで設定してしまうという安直な方法もありです。
「Background Layer」を選び「Asset Type」をColorにしてカラーコードをクリックするとSelect Colorのダイアログが現れますので背景色を決めます。
 
image asset 07 - [Android] アイコンを簡単作成できる Image Asset
 
この他にTrimやResizeがありますので遊んでみてはどうでしょう
 
先に進めるために「Next」をクリックすると「Confirm Icon Path」が表示されます。デフォルトでドロイド君のアイコンが設定されていましたが、同じ名前にしたので上書きされるぞという警告がでています。気にせずここでは「Finish」
 
image asset 08 - [Android] アイコンを簡単作成できる Image Asset
 
これで一気にアイコンが作成されました!
 
image asset 09 - [Android] アイコンを簡単作成できる Image Asset

 

実機上のアイコン

 
これで実行してみるとアイコンが確かに出来上がっています。
 
image asset 10 - [Android] アイコンを簡単作成できる Image Asset
 
image asset 11 - [Android] アイコンを簡単作成できる Image Asset
 
 
References:
Image Asset Studio を使用したアプリアイコン作成
Adaptive icons | Android Developers
Designing adaptive icons
Adaptive Icons

 
References:
Image Asset Studio を使用したアプリアイコン作成
Adaptive icons | Android Developers
Designing adaptive icons
Adaptive Icons

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加

ページのトップへ戻る




 

シェアする

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

フォローする