学習コストをかけずにアイコンを作りたい...!
あまりデザインに詳しくない開発者がアプリ開発するとき、けっこうハードルが高いのがアイコン作成だと思います。
「人は見た目が９割」というようにアプリの顔であるアイコンで手を抜いたら、せっかく時間をかけて作ったアプリの価値まで落としてしまうかもしれません。
「でも ”Illustlator” のようなプロ向けツールにお金を払うほどでもないし、そもそも使い方わかんないし…」
心配いりません。凝りに凝ったアイコンでなければお金と学習コストをかけずに作成することができます。
必要なのは以下の３つです。
Keynote
純正のプレゼンソフトですね。アイコン作成にも意外と使えます。Windowsならパワポでもいけるかも。
もちろんAppStoreで手に入れてください。
Seashore
フリーの画像編集ソフトです。開発は終了しているようですが、今でもダウンロードは可能です。
詳しい使い方は私もあまり知りません。
こちらで手に入れてください。
アイコン生成サービス
一つの画像からアプリ開発に必要なサイズのアイコンを生成してくれる便利なWebサービス、探せばいろいろあると思います。
私はこちらを使っています →MakeAppIcon
それではアイコンを作っていきましょう
①keynoteでアイコンを作る
keynoteファイルを新規作成し、スライドのサイズを縦横 1024pt の正方形にしましょう。
この正方形いっぱいにアイコンを作成していきます。
ご存知の通りアイコンは最終的に隅が丸みを帯びた形となります。
これを見越して 縦横1024pt、角の半径180ptの四角を重ねておきましょう。
※ 角の半径はアイコンの仕様によって変わる可能性があるので最新情報をチェックしてください。
※別に丸みを帯びた画像を作らなくてもアイコン生成サービスによっては自動で成形をしてくれるかもしれません。
作ったスライド上でお好きなアイコンを作ってください。
Keynoteは単純な図形しか基本使えませんが、いろいろ組み合わせれば意外と作れます。
複雑な曲線を持った図形でも「ペンで描画」を使えばそんなに難しくありません。
例えば下地になるアイコン画像を置いて、それに沿うように曲線を作ったり。
私は以下のような画像を作りました。(タイマー → 砂時計をイメージしたつもり ^^;)
②seashoreで画像に変換する
Keynoteスライド上に作ったアイコン = 図形の集まりを画像に変換していきましょう。
⌘ + A でスライド上の図形を全選択し、グループ化します。グループ化したら図形をコピーしといてください。
ダウンロードしたSeashoreを起動しましょう。熱帯魚のアイコンが爽やかですね。
まず設定ダイアログが現れます。画像のように設定して”Create”を押してください。
起動した画面に先ほどKeynoteでコピーした図形を貼り付けましょう。普通に⌘ + Vでok。
ぴったりアイコン画像が重なるはずです。
アイコンをPNG形式で書き出します。
ツールバー → File → Save As… を選んでください。
画像の保存形式はデフォルトで ”GIMP image” となっていますが “Portable Network Graphics image” に変更します。
好きな場所に保存しましょう。完成までもう一息です。
③アイコンを生成する
上のほうで紹介したアイコン生成サービスなんかを利用してPNG画像をアイコンに変更します。
MakeAppIconでは必要なアイコン一式がメールで送られるようになっています。
便利ですね。
以上で完成です！簡単でしたね！