Edited at

ノンデザイナー開発者向け 学習コストをかけずにiOSアプリ用アイコンを作る方法(Mac)

More than 3 years have passed since last update.


学習コストをかけずにアイコンを作りたい...!

あまりデザインに詳しくない開発者がアプリ開発するとき、けっこうハードルが高いのがアイコン作成だと思います。

「人は見た目が9割」というようにアプリの顔であるアイコンで手を抜いたら、せっかく時間をかけて作ったアプリの価値まで落としてしまうかもしれません。

「でも ”Illustlator” のようなプロ向けツールにお金を払うほどでもないし、そもそも使い方わかんないし…」

心配いりません。凝りに凝ったアイコンでなければお金と学習コストをかけずに作成することができます。

必要なのは以下の3つです。


Keynote

 純正のプレゼンソフトですね。アイコン作成にも意外と使えます。Windowsならパワポでもいけるかも。

 もちろんAppStoreで手に入れてください。


Seashore

 フリーの画像編集ソフトです。開発は終了しているようですが、今でもダウンロードは可能です。

 詳しい使い方は私もあまり知りません。

 こちらで手に入れてください。


アイコン生成サービス

 一つの画像からアプリ開発に必要なサイズのアイコンを生成してくれる便利なWebサービス、探せばいろいろあると思います。

 私はこちらを使っています →MakeAppIcon


それではアイコンを作っていきましょう


①keynoteでアイコンを作る

keynoteファイルを新規作成し、スライドのサイズを縦横 1024pt の正方形にしましょう。

この正方形いっぱいにアイコンを作成していきます。

ご存知の通りアイコンは最終的に隅が丸みを帯びた形となります。

これを見越して 縦横1024pt、角の半径180ptの四角を重ねておきましょう。

スクリーンショット 2015-05-10 15.06.29.png

※ 角の半径はアイコンの仕様によって変わる可能性があるので最新情報をチェックしてください。

※別に丸みを帯びた画像を作らなくてもアイコン生成サービスによっては自動で成形をしてくれるかもしれません。

作ったスライド上でお好きなアイコンを作ってください。

Keynoteは単純な図形しか基本使えませんが、いろいろ組み合わせれば意外と作れます。

複雑な曲線を持った図形でも「ペンで描画」を使えばそんなに難しくありません。

例えば下地になるアイコン画像を置いて、それに沿うように曲線を作ったり。

私は以下のような画像を作りました。(タイマー → 砂時計をイメージしたつもり ^^;)

スクリーンショット 2015-05-10 15.16.05.png


②seashoreで画像に変換する

Keynoteスライド上に作ったアイコン = 図形の集まりを画像に変換していきましょう。

⌘ + A でスライド上の図形を全選択し、グループ化します。グループ化したら図形をコピーしといてください。

ダウンロードしたSeashoreを起動しましょう。熱帯魚のアイコンが爽やかですね。

スクリーンショット 2015-05-10 15.14.26.png

まず設定ダイアログが現れます。画像のように設定して”Create”を押してください。

スクリーンショット 2015-05-10 15.15.04.png

起動した画面に先ほどKeynoteでコピーした図形を貼り付けましょう。普通に⌘ + Vでok。

ぴったりアイコン画像が重なるはずです。

スクリーンショット 2015-05-10 15.56.34.png

アイコンをPNG形式で書き出します。

ツールバー → File → Save As… を選んでください。

画像の保存形式はデフォルトで ”GIMP image” となっていますが “Portable Network Graphics image” に変更します。

好きな場所に保存しましょう。完成までもう一息です。


③アイコンを生成する

 上のほうで紹介したアイコン生成サービスなんかを利用してPNG画像をアイコンに変更します。

 MakeAppIconでは必要なアイコン一式がメールで送られるようになっています。

 便利ですね。

スクリーンショット 2015-05-10 15.33.55.png

 以上で完成です!簡単でしたね!