mikan_daisuki’s blog

IT系サラリーマンの日記。前職ではスマホゲームを、現在はアプリを作ってます。



非デザイナー向けの、フラットデザインなアプリアイコン(flat icon)の作り方

結構簡単に作れたので、手順をシェアします。

手順

1. シンプルなフリー素材を探してダウンロードする

ferret-plus.com

今時、フリーで商用で使える素材がたくさんあります。 モノクロのシンプルな画像は、フリーで提供されていることが多いです。

だいたい512px * 512px 以上のものを用意するとよいです。

2. Flat Icon Generatorを使ってアイコン画像を作る

flat-icon.surge.sh

flat iconをさくっと作ってくれるwebサービスです。

f:id:mikan_daisuki:20160605092628p:plain

  • ベースとなる画像
  • 背景の色
  • 影の度合い

などのパラメータを調整するだけでアイコンができちゃいます。

3. ios-icon-generatorを使って必要なサイズにresizeする

iosアプリはたくさんの種類のapp iconが必要です。

github.com

こちらを使ってサクっと作りましょう。 README.mdのとおりやれば作れるはずです。

f:id:mikan_daisuki:20160605092819p:plain

4. Xcodeを開いてAssets.xcassetsに各画像をドラッグ&ドロップ

f:id:mikan_daisuki:20160605092349p:plain

ここにドラッグ&ドロップしていきます。 各サイズはファイルを見ればわかると思います。

さいごに

意外と簡単でびっくりですよね。 デザイナーじゃない方が気軽に作るのによいと思います。 ぜひご利用ください。