[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にアクセスして、背景は適当なものを使って前景としてこのアイコンを設定して、マスク効果、アニメーションを確認して見ます。
 

 

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

アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう、時間の制約がないところが一番の魅力です。

以下の3つはAndroidが学習できるオンラインスクールです。


TECH ACADEMY
Androidアプリコース



侍エンジニア塾
侍エンジニア塾 無料体験レッスン



CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp





正直ネットや本では限界があります。直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。

尚、スクールがダメだと言う人がいますが、やる気があれば問題ありません。与えられるのを待っていてはいけないですね
欲しいものは取りに行くのです。


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

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




Google Pixel 3 XLグローバル版
SIMフリー 並行輸入品
6.3インチの大画面
背景をぼかすポートレートモード撮影

Anker PowerCore II Slim 10000
Power IQ 2.0搭載
iPhone & Android対応

シェアする

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

フォローする