Adaptive Iconの制作：Adobe XDを使って

# はじめに

Flutterでのアプリ開発を学習ついでに、プログラム以外の素材なども無料でつくることを前提に取り組んでみました。

これからの主流な方法として

- VectorAssetで取り込む前のAdobe XDで行ったShape、パスの調整

を忘れないように（多分忘れる）ため細かめに書いてます。

## Adaptive Icon について

https://adapticon.tooo.io/

<img width="1145" alt="スクリーンショット 2019-04-07 17.57.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/aca24031-1125-04fe-98de-db32f6d74a58.png">

必要なことがまとまっているのと、アニメーションもふくめて動作確認ができるサイトです。

### 個人的に気になったもの

https://adapticon.tooo.io/#/bg=https://i.imgur.com/8UQ5VYI.png/fg=https://i.imgur.com/1dPKg12.png

<img width="332" alt="スクリーンショット 2019-04-07 18.06.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/4648b61b-e600-8ee7-73b5-4475885317d6.png">

https://adapticon.tooo.io/#/bg=https://i.imgur.com/8iK5B40.png/fg=https://i.imgur.com/5nbdXcS.png

<img width="279" alt="スクリーンショット 2019-04-07 18.08.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/600f5767-55ff-705d-9c0d-5f93a3fb2164.png">

## 今回使ったツール

使うデザインツールは

- Adobe XD

https://www.adobe.com/jp/products/xd.html
<img width="1218" alt="スクリーンショット 2019-04-07 11.45.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/9c5bfc05-4984-ae46-c8cf-4bc985531d6d.png">


表示の確認には

- Android Studio

https://developer.android.com/studio/install?hl=ja
<img width="847" alt="スクリーンショット 2019-04-07 13.06.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/312f93f0-0d6b-1d15-ed4e-432f344202f2.png">

を用いました。

# 素材をつくる

Adaptive Iconでは、いくつかのパターンで
アイコンが表示できるセーフエリアの目安となるKeylineを意識する必要があります。

## 規定について

keyline shape は端末や
https://material.io/design/iconography/#grid-keyline-shapes


https://medium.com/google-design/designing-adaptive-icons-515af294c783
から
Adobe Illustrator templateをダウンロードしました。

<img width="1030" alt="スクリーンショット 2019-04-07 13.37.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/607eb37d-1f87-d4e6-888f-56d2587bc2eb.png">

Sketch用のtemplateも同サイトで配布されていました。

## Adobe XD

ダウンロードしたaiファイルをimportします。

<img width="275" alt="スクリーンショット 2019-04-07 13.43.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/120a8a17-232e-2cf9-6391-025677617c62.png">


<img width="964" alt="スクリーンショット 2019-04-07 13.42.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/c7a11c31-9e57-3e97-08a1-1ddeaea3c689.png">

### shapeでつくったものはパスにする

Shapeを選択した状態で `オブジェクト > パス > パスに変換 `でパスにします

<img width="513" alt="スクリーンショット 2019-04-07 18.13.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/30dc9d12-c41f-b0df-7885-debf7acb6bf1.png">


### 塗りのパスだけで構成する

円の線の表現は線の色を表示させる円を大きめにして線の色を、内側の円を白で指定してます。

<img width="673" alt="スクリーンショット 2019-04-07 17.00.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/3d1dc9a3-dd0a-9a6d-e641-25a9f5486587.png">

- 作成時のサイズ
<img width="280" alt="スクリーンショット 2019-04-07 16.58.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/cc47aed0-ac80-6018-8a6b-6a7f75165ab0.png">

### 拡大・縮小

Shiftを押しながら縦横比保持が、グループ内にふくまれるパーツ全部が対象となります。
Shiftを押さない場合は縦横比は保持されず、変更した方向に拡大縮小される動作をしました。

- 拡大

<img width="311" alt="スクリーンショット 2019-04-07 17.01.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/7ee9f6e2-6238-7354-473d-785ccc2a38d9.png">

- 縮小

<img width="314" alt="スクリーンショット 2019-04-07 16.59.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/c05cb85a-3431-e597-04d9-de811af48d86.png">


### 失敗したこと

境界線をつけてしまうと、線幅が固定されて表示されました。

<img width="309" alt="スクリーンショット 2019-04-07 16.55.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/f0283672-079a-ccd3-3e22-118a881bd590.png">

- 縮小

境界線の線幅は拡大前と同じなので、太くなって見える。

<img width="267" alt="スクリーンショット 2019-04-07 16.56.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/6f8095b3-1f04-885a-6ab8-68e3cce0daca.png">

### 重なっているパスは結合できる

- パスを合体、型抜きなどの操作を実施
- さらにパスに変換

<img width="806" alt="スクリーンショット 2019-04-07 18.21.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/5c24e5a8-48f3-4500-2841-c3bce883cb35.png">

<img width="510" alt="スクリーンショット 2019-04-07 18.22.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/f55cd44b-acc8-bec5-d542-3153082abac2.png">

<img width="741" alt="スクリーンショット 2019-04-07 18.22.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/06e93599-0fc7-69df-827e-6c5150a165f6.png">

<img width="514" alt="スクリーンショット 2019-04-07 18.23.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/cc024269-62ec-d56c-fb76-8f533ea859ab.png">

<img width="741" alt="スクリーンショット 2019-04-07 18.24.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/75d039a6-45c5-bf6a-5bbd-1651e5e0689e.png">

<img width="743" alt="スクリーンショット 2019-04-07 18.24.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/6af5a249-33e2-6dc0-bfad-06b33cec7a1d.png">

- 縦横比が維持されない変形の表示もありといえばあり？

この状態にしてからShiftを押して変形すれば、比率を維持して拡大縮小は可能です。

<img width="516" alt="スクリーンショット 2019-04-07 18.39.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/7a3481fe-8fb3-7e6a-6249-cbc0f96d6a01.png">

### SVGに書き出し

書き出し対象は`adaptive-icon`で、サイズ108pxのレイヤーです。

<img width="843" alt="スクリーンショット 2019-04-07 20.01.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/fa9316ce-42ae-9274-e987-cd979bdc16bb.png">

<img width="479" alt="スクリーンショット 2019-04-07 20.04.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/b954a8b4-896f-60a4-c4a1-66e81a2f4045.png">

<img width="712" alt="スクリーンショット 2019-04-07 20.06.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/4841832a-219a-8476-eb82-aa18b5e70d52.png">

# Android Studio

## Vector Assetとして追加

この時点でまだadaptiveなIconにはなっていません。
VectorデータとしてSVGからProjectで使えるように変換する作業です。

作成したProjectで使用するには

resフォルダを選択した状態で

<img width="478" alt="スクリーンショット 2019-04-07 20.52.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/88e25a36-8b40-8ce8-1b21-bf36e421cbb2.png">

右クリックで

<img width="563" alt="スクリーンショット 2019-04-07 20.52.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/64c31f25-1875-77c6-1920-9f6142699a35.png">

もしくは

<img width="551" alt="スクリーンショット 2019-04-07 20.53.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/5e1d7aab-e4cb-34d1-855f-c83a8b69a12f.png">

いずれかから
`Local file(SVG,PSD)`を選択

<img width="398" alt="スクリーンショット 2019-04-07 20.56.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/36f9bae2-fcc7-7a1b-2ad7-524adc8b4d53.png">

## Image Assetとして追加

Vector Assetと同様な選択で
`API26`から使えるadaptive Iconと、API25以下で使用できるレガシー（古い仕様）なアイコンを同時に作成できます。

<img width="1019" alt="スクリーンショット 2019-04-07 21.05.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/bfb484d7-0f86-ba58-0ce9-28f1b75775a8.png">

## シミュレーター

背景を透過させて表示させるように調整しました。

<img width="459" alt="スクリーンショット 2019-04-07 21.26.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/12362/6fc68f93-5496-3441-c345-675be2d852a8.png">

# さいごに

adaptive icons サイトでこれかっこいい、というものを作るにはもっと表現手法や、XDの扱い方についても知らなければいけないことが作ってみると認識されてきます。私の場合は、未解決なのが、アイコンの口周りの曲線の扱いが、パスの調整が下手。

無料でAdobe XDが使えるまではSketchかXDか、有料アプリでの比較でした。Sketchもお試し期間がすぎた後もバージョンアップがあればまた使えるようになります。
いいデザインをもっとみたい。