SESEBLO

Unity, Clip Studio, etc.

Affinity Designer でアプリケーションのアイコンを作る

Electron なんかの登場で、ネイティヴアプリ開発の敷居が下がりました。
のはいいんですが、それを配布しようと思った時に必要になるのがアイコンです。
今回はそんな、デフォルトのElectronのアイコンのまま配布するのはさすがにちょっと……という人がとりあえず何かしらでっち上げてみるというやつです。

1. 参考元を探す

まずやることはソフトを立ち上げることではありません。すっとマウスカーソルを動かして、PCに入っているいろいろなアプリケーションのアイコンを眺めましょう。
デザインとか全然勉強してない人間が一から何かしらgenerateするのは至難の技なので、既存のアイコンをパクり……もといリスペクトしましょう。
ちなみに今回の例はWebブラウザSafariのアイコンを参考にしています。
基本的にはいくつかのアイコンを参考にして、単一のアイコンに寄せすぎないというのがいいかと思われます。

2. 画像を作る

Affinity Designerを立ち上げて、新しいファイルを作ります。ドキュメントの設定は次のようにしましょう。

  • ページ幅: 1024px
  • ページ高さ: 1024px
  • DPI: 72

このサイズはMacRetina Display向けのサイズになります。DPIは正直何でもいいですが、あまり大きくするとファイルサイズも大きくなります。
また、最初に[表示]→[グリッドを表示]でグリッドを表示しておきましょう。
グリッドは初期設定のままでもいいのですが、ちょっと細かすぎるかなと私は思うので、[表示]→[グリッドおよび軸マネージャー...]からこんな感じにしています。この辺はお好みで。

f:id:umeru:20160209160517p:plain

それから、ウインドウ上部のU字磁石をクリックして、スナップをオンにしておきましょう。

では、作っていきましょう。
ここではアイコンを作るのに使えそうないくつかのTipsを紹介します。

楕円を中心点から描画する

アイコンは丸いものが多いです。
丸を配置するときは中央から配置すると思いますが、基本的にAffinity Designerの楕円ツールはクリックしたところを始点にして円を描きます。
中心点から描くには、楕円ツールで円を描き始めて、そのまま離さずに⌘ボタンを押しましょう。
さらにshiftボタンも押すことで真円を描くことができます。
グリッドを表示、スナップをオンにした状態で中心から真円を描くことで、中心に対して点対称に円を描くことができます。
f:id:umeru:20160209161418g:plain

いくつかの要素に対してグラデーションをかける

f:id:umeru:20160210142945p:plain こんな感じの背景+飾り線みたいな要素に一括でグラデーションをかけたい場合。
私はその領域と同じ大きさの白い要素を作って、合成モードをを乗算とした上で、その要素にグラデーションをかけています。
gifにするとこんな感じ。
f:id:umeru:20160210144658g:plain

3. 完成

完成したものがこちらになります。
f:id:umeru:20160210145204p:plain

とりあえずシンプルな感じで。
Affinity Designerには吹き出しツールとかもあるので、チャットアプリのアイコンとか瞬殺で作れそうですね。

このアイコンを作った理由(というかまあアプリケーションを作ったんですが)はもうちょっと完成度が上がったら公開する予定です。