Adobe XD｜Androidアプリアイコンテンプレート配布と作り方+Adaptiveicon

 

こんにちは、Rhimeです。
みなさん、Adobe XD、使ってますか。

 

今回は、デザインカテゴリの投稿です。

タイトル以上のことはなにもありません。

Androidのアプリアイコンを作成しようとしたんですが、なんだかPSD形式だったり、Windowユーザーにとっては憎きSketch形式だったり¹、イラレがあったかと思えば私のバージョンがCCじゃなくてCSなのが悪いのか構造がよう分からん感じになってたりで混沌としていたり、そもそもCSではAndroid用に解像度違いで書き出しが不可なためAdobeXDでやろうと思ったのですがXD自体が黎明期なせいなのかXD用のアプリアイコンのテンプレートが探せど探せどどこにも見つからんので、自分で作ってやりました、やってやりましたよ、と、そういう具合であります。

 

※追記：Adaptive icon用のAdobeXD用テンプレートファイルをGithubで公開している人を見つけました。
記事末尾に加えておきます。

 

 

---

 

Android｜アプリアイコン

 

 

 

 

 

 

ここからダウンロードしてください。
様子は、上記画像のような感じです。

 

参考は、https://material.io/　←ここのどっかにあったアプリアイコン用のproduct-icon-stickersheetとかいうイラレのヤツを参考に作りました。
数値とかラウンドの感じとか、図形の変形の数値とかグリッドの線を数えて合わせましたが、いかんせん適当なので、間違ってたらすみません。

グリッドが4pxでラウンドが3ブロックだったから、ラウンドは12pxだと思う。
なにを言ってるかわからねーと思うが、たぶん合ってます。

 

 

サンプルもテンプレートの下のほうに、ボードとして置いてみました。
もし難民としてここの記事にたどり着いたあなたが私のようなアプリ関連デザインニュービーの方だった場合、ごそごそしてみてもいいのよ。

 

アプリアイコンの作り方｜テンプレートの使い方

 

 

 

使い方などあってないようなもんですが、一応。

左：ガイドです。

真ん中：四角です。

右：丸です。

 

 

 

いいようにしてください。
ガイドは、公式でみたらやたら線が引かれてたのでそのままデザインを反映させましたが、邪魔くさいので四角の枠でデザインしてもいいと思います。
なんかきっちり色々書かれててやたらと高尚な何かのような感じがありますが、ようするに右の二つぐらいを用意すればいいんですよ。
縦長とか横長は知りませんよ。

 

 

ラウンドのほうの作り方。
下にデザインを置きます。
上にラウンドの枠を置きます。

メニュー出して、”シェイプでマスク”が便利です。

 

 

あっという間に、かわいいラウンドアイコンができました。
これでいいのか？

分からんですが、こんな感じでたぶん合ってると思う。

 

 

書き出し時は、本体じゃなくてアートボードを選択して書き出そう。
私の勘だと、余白も含めて規定のデザインなので、ギリギリで書き出すとトリミングされる、気がする。たぶん。分かんない。おそらくそう。

 

 

あとはCtrl+Eでぶわっと書き出す。

 

書き出し時は枠とかは消す。

背景も透過にしとくといいと思う。
アートボードを選択して、右側のアピアランスから塗りをオフ。

 

書き出し時のAndroidアイコンサイズ。ここ↓を参照せよ。

 

 

⚠注意

ワシの作ったやつ（テンプレート）は、基準がxxxhdpiになっとるから、書き出し時は、「設定サイズ」を400％に合わせるんじゃ。
これで書き出されるアイコンが上で貼ったリファレンス通りになるぞ。

そうしないと768px×768pxとかの、鬼でかアイコンが書き出されるぞ。

 

 

---

 

これで儀式は終了し、無事書類が完成した。
こうしてみると、今をときめくITの世界とはいえ、お役所書類みたいで、うぐーXDってなりますね　0(:3　)～ =͟͟͞͞(’､3)_ヽ)＿

 

 

Android｜Adaptive icon

 

 

 

Githubで見つけました。
（なるほど、ファイルストレージじゃなくてGithubで公開するという手法もあるのか。）

 

アダプティブアイコンは、こういうやつ。

 

• マスターアイコンは5つのアダプテーションの変更を反映する編集シンボルです。
• マスターシンボルのエリアグループは、セーフエリアとビューポートを示す66dpと72dpの円です。ロゴやシンボルなどの主要なデザインは、マスクが適用されたときにクリップされないことを保証するために66dp円内に配置する必要があります。
  https://github.com/faizmalkani/adaptive-icon-template-xd

 

だそうです。

 

作り方は、こちら↑のQiitaの記事が分かりやすいです。

 

 

AdaptiveIconの作り方

 

 

 

基本。

108dp x 108dpで前面、背面の画像を作成する。
中心から直径66dpにアイコンのコアな部分を表示する。
https://qiita.com/takahirom/items/696fb5ecaa230fa8f755

 

つまり、上の画像みたいな感じに、バックグラウンド（背面）イメージと、フォアグラウンド（前面）イメージを用意して重ねる感じが基本となるみたいです。
もっと進んだものだと、マスク用画像を用意して型抜きみたいな感じにできるみたいですが、あたしゃ知りません。

 

 

 

 

影を付けたいならバックグラウンドじゃなくて、フォアグラウンドのほうに付けましょう。
動かしたときに影がずれちゃいます、たぶん。

あとフォアグラウンドは、上の画像のように、テンプレートを開いたら別途108px×108pxのアートボードを作成して、イメージを置いたあとアートボードを選択して、アートボードごと書き出しましょう。
これもまた、つまるところ余白を含めた規定値であって、ぴったり書き出すとトリミングされてしまいます。

でアダプティブアイコンのアイコンサイズは、

 

Both layers must be sized at 108 x 108 dp.

Adaptive icons support SVG (VectorDrawable). So you can just provide two SVG of dimensions 108 x 108 dp for foreground and background layers.

If you want to use PNG images, you have to calculate the dimensions for other densities.

So for xxxhdpi: 108 * 4 => 432 x 432 pixels.

https://stackoverflow.com/questions/45639952/the-correct-icon-size-for-android-adaptive-icons

 

だそうなので、xxxhdpiのときに432 x 432 pxになってればいいようです。

 

 

 

そんで、作ってみたのがこちら。（動画↑）

 

ここのサイトにPNGをぶち込むと、こんな感じにテストできるようです。

 

 

 

終わりに

 

 

 

 

 

 

 

1. 憎きSketchは、Macしか対応していない。