そこそこカッコいいアプリアイコンを作るのにはPowerPointとFont Awesomeを。


今回は、アプリなどで使えるそこそこかっこいいアプリアイコンを作る手順をまとめてみました。
Windowsを使って説明していきます。（Macでも手順はそう変わらないはず）

-------------------------

##今回使うもの

 - microsoft PowerPoint
 - Font Awesome

>Font Awesome:[Font Awesome](https://fortawesome.github.io/Font-Awesome/)

##それぞれの用途は？
PowerPointでは以下の用途

 - アイコンを構成するオブジェクトの調整
 - 影の追加
 - pngでの保存


Font Awesomeの用途

 - オブジェクトの組み合わせでは作るのが難しいロゴやアイコンを表示
 - フォントなので、テキストとしてサイズ変更が容易

といった感じです。

##Font Awesomeを使う下準備

![FontAwesome](https://qiita-image-store.s3.amazonaws.com/0/76329/bf201fe6-7115-4347-1fd6-e1334560615e.png)


Font AwesomeからフォントファイルをDownload
>Font Awesome:[Font Awesome](https://fortawesome.github.io/Font-Awesome/)


----------


![Download](https://qiita-image-store.s3.amazonaws.com/0/76329/ffd14791-cfb3-53c7-cb63-d2039b687608.png)


落ちてきたZipを展開し、ttfファイルを開きます。


----------


![インストール](https://qiita-image-store.s3.amazonaws.com/0/76329/2af5e6e4-2a8d-77dc-427f-3d295ea8775d.png)


"インストール"をクリック。これで完了。

##実際にPowerPointで作ってみる

###土台を作る

早速作っていきましょう。まずPowerPointを開きます。


----------


![パワポ初期画面](https://qiita-image-store.s3.amazonaws.com/0/76329/d6bba654-3d72-c932-4c6a-582956c14e9e.png)

タイトル枠やサブタイトルの枠は邪魔なのでDelete!!!


----------


![パワポ](https://qiita-image-store.s3.amazonaws.com/0/76329/866e7445-0789-e543-5380-9b53d225b24c.png)


この真っ白いキャンパスに、オブジェクトを積んでいき、アイコンを作ります。


----------


![画像を置く](https://qiita-image-store.s3.amazonaws.com/0/76329/6583b92f-fced-46aa-8bff-9747933657d6.png)



円や真四角などがありますが、今回は角の丸い四角を選びます。


----------


![置いた画像](https://qiita-image-store.s3.amazonaws.com/0/76329/0d61a78e-943d-2324-e93e-776fa3f5fc9b.png)

作業のしやすい、適度な大きさで置きます。
最後に大きさの違うものをいくつか作成するので、この段階では大きさを気にする必要はありません！


----------


###Awesome Fontと組み合わせる
![Cheatsheet](https://qiita-image-store.s3.amazonaws.com/0/76329/9b2638b1-c082-a4fc-31c3-1dd6d654e798.png)

Awesome FontのCheatsheetを開きます。
>[Font Awesome Cheatsheet](https://fortawesome.github.io/Font-Awesome/cheatsheet/)

----------


![コピー](https://qiita-image-store.s3.amazonaws.com/0/76329/c972fd8d-135c-f775-04c0-4623d49eede2.png)

使いたいアイコンのアイコンの部分をコピーします。
※Cheatsheet以外は基本的にアイコン部のコピーができないので注意


----------


![ペースト](https://qiita-image-store.s3.amazonaws.com/0/76329/f2400286-5471-9084-3ec2-b007bca61dcf.png)


"元の形式を保持"で張り付けるとアイコンが表示されます。


----------



![アイコンを大きく](https://qiita-image-store.s3.amazonaws.com/0/76329/8058819b-81eb-3048-f2ef-63bbb26566d1.png)

テキストと同様に、選択した状態でポイント数を大きくすると文字が大きくなります。


----------


![色の変更](https://qiita-image-store.s3.amazonaws.com/0/76329/d6f78b46-46ce-4ea4-a04a-6f031a5a12f4.png)

こちらもテキストと同様に、色の変更もできます。フォントのおかげで調整が楽です。
これでひとまずはアイコンとしての機能は果たせることでしょう。

###もうちょっとカッコよくしてみる

マテリアルデザインが提唱されて早2年弱、今時フラットなアイコンでは味気ありません。
もうちょっとマテリアルが重なった感を出すために、立体的にしましょう。


----------


![フォントに影を追加](https://qiita-image-store.s3.amazonaws.com/0/76329/2ebfeaae-0d92-56d4-93e4-9d4a6cbaa3ab.png)

フォントに影をつけよう！


----------


![土台に影を追加](https://qiita-image-store.s3.amazonaws.com/0/76329/a6341c7d-128c-dc45-c755-5184ae83e82d.png)

土台のほうも影を。個人的には下向きに影がつくのが好き。


----------


![ひとまず完成](https://qiita-image-store.s3.amazonaws.com/0/76329/a41a6d94-e72a-b425-7be5-d4f2493d760e.png)

これで、浮き上がった感じに。
今回はほかのオブジェクトを重ねていないので、グループ化していませんが、重ねている場合はグループ化しておくとよいと思います。

###大きさを変える

スマホの画面解像度は多彩なので、いろいろなサイズのアイコンがほしいですよね？？
ということで、大きさの違うバージョンをいくつか作成しましょう。


----------


![コピー](https://qiita-image-store.s3.amazonaws.com/0/76329/3e006f1b-3dbe-67dd-6c09-c1fb99cee830.png)

出来上がったオブジェクトをコピーします。


----------


![メタファイル画像として貼り付け](https://qiita-image-store.s3.amazonaws.com/0/76329/edf06a9f-656e-2e08-952a-b12e1bac791b.png)

Windowsメタでも拡張メタでもよいので、とにかくメタファイルで貼り付けます。

メタファイルで張り付けると拡大縮小時の画質劣化を抑えることができるので、おすすめしています。
また、サイズ変更時にCtrlキーを押しながらやると、比率を維持したまま拡大縮小できます。


----------


![保存](https://qiita-image-store.s3.amazonaws.com/0/76329/4a883a13-f4fc-7536-a1b0-926296cba3d6.png)

保存に関しては各オブジェクトを右クリックして出てくる、"図として保存"を押すとアイコンとしていい感じに保存できます。
余白が気になる場合はトリミングして調整するとよいかと思います。
Androidアプリ利用する場合はpngファイルで保存するのが無難でしょうか。

##最後に
パワポでも結構かっこいいアイコンが作れることが分かります。
フリーのピクトグラムやその他素材を組み合わせることで、かなりいい感じのものが作れるのではないでしょうか。