Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

アプリアイコン作るの面倒そう…と思ってたら、ImageAssetがお手軽で凄かった!!

 どうも!LSSです!!

 

 最近、ようやくアプリ公開の準備に入りました。

んで、公開するとなると、アプリアイコンを作らないとなー、となるわけですが、Androidの場合、
「画面サイズに合わせて数種類のサイズの画像を用意しないといけない」

 らしくて、「大きめに画像作ってから縮小して保存、を繰り返すか。ちょっと面倒だけど…」と思いつつ調べてみると、さらにAndroid8.0からアイコンの仕様が変わって…。

https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive.html?hl=ja

↑公式のガイドはこんな感じ。

 うん、分からんwww

 

が、他にも色々調べてみたところ、AndroidStudioにImageAssetというツールがあって、試しに触ってみたところ「おおお!!」ってなりましたw(ボキャブラリーが^^;;;)

  今回はそんな感じの記事になります!

  

  

ImageAssetを立ち上げるよ! f:id:little_strange:20191125213547p:plain

  画面左、「app」を右クリック、「New」にカーソルを合わせると、さらに右に出てくるリストの中に「Image Asset」があるので、それをクリック!!

 

 

f:id:little_strange:20191125213953p:plain

 すると、こんな画面が出てきます。
 ここから何通りかのやり方でアイコンを「まとめて」作れてしまいます!!

 

試しに「テキスト」で作れる手抜きアイコンを作ってみます!

まずはForegroundLayerから!

f:id:little_strange:20191125214503p:plain

  まず「Foreground Layer」を選択(ImageAssetを立ち上げた時はデフォルトでこれが選択された状態になっていますが)、
次に「Asset Type」のうち、「Text」をクリックして選択します。
 すると右に並んでいたドロイド君のシルエットが消えて、「Aa」という文字だらけになります。

 次に、「Asset Type」の下、「Aa」って入ってる枠と、その右の「AR BERKLEY」って入ってる枠を触ります。
「Aa」はアイコンに入れたい文字に打ち換えて、
「AR BERKLEY」は横の▼を押すとフォント名が色々でてくるので適当に選択します!

 

 さらに、その下の「000000」をクリックして、文字色を変更する事ができます。

 

 その下のTrim…はとばして、その次の「Resize」っていうシークバーを触ると、文字サイズを調整できます!
 画面右にたくさん並んでるサンプルの内側の〇に収まるようにするのが良さそうですね。

 

次にBackgroundLayer!

f:id:little_strange:20191125215502p:plain

 以上の項目を触ってみたのが↑これです。

 文字だけとはいえ、オリジナルアイコンらしくなってきました^^

 

 

f:id:little_strange:20191125220004p:plain

  次に上のほうの「Backgroud Layer」をクリックして、AssetType「Color」をクリックします。
…すると、その下に色付きの四角形が出てくるので、そこをクリックして色を選びます!

 

f:id:little_strange:20191125220400p:plain

 こんな色にしてみました!

 

最後にLegacyで形状選択!

f:id:little_strange:20191125221148p:plain

  最後に、「Legacy」をクリックします。

Shape「Square」となっているところを▼を押して何通りかの形状を選ぶ事ができ、それに応じて右のサンプル中「Legacy icon」の形が変化します!

 

ええと…間違ってるかも知れないのですが、つまり、

Android8.0からの「アダプティブアイコン」は、ユーザー側でアイコンの形状を選択する自由が与えられたため、開発者側は用意された形状のどれが選択されても、うまく収まるようにアイコンを作る必要が出てきた。

Android8.0未満の時は、開発者が四角いアイコンを作れば四角く、丸いアイコンを作れば丸くなるだけで、ユーザーに選択権はなかった。

ImageAssetのForegroundLayerとBackgroundLayerはアダプティブアイコンの為の選択で、Legacyは8.0未満の人がアプリをインストールした場合のアイコンの形状を選択するもの、っていう事なのかな、と理解しました。

 

 

次に進みます!

「Legacy」の画面で選択し終えたら、右下の「NEXT」をクリックして次に進みます!
 次の画面は↓こんな感じ。

f:id:little_strange:20191125222521p:plain

 左に並んでる、赤い文字の項目が「変更されるもの」です。

 各解像度のアイコンが一気に作られる事が確認できますね。

…そんで、右下の「Finish」をクリック!

 すると、ImageAssetが終了します。

 

 

インストールしてみる!!

 いつものように、エミュレータにビルドしてみます。

 インストールが終わるとアプリが起動しますが、それを即終了させて、アプリ一覧を開いてみます!

f:id:little_strange:20191125223120p:plain

 今まで大量のドロイド君が並んでいた中に、一際めだつアイコンが!!

 

 

 

正直…

 

 

 

 もっと早く試しておけば良かった!!!w

ドロイド君 量産しすぎw

 

 

で、次に「画像を使って公開できる程度のアイコンを作る!」んですが、
それは次回に持ち越したいと思います!

 

 

つづく