Affinity Designer でアプリケーションのアイコンを作る
Electron なんかの登場で、ネイティヴアプリ開発の敷居が下がりました。
のはいいんですが、それを配布しようと思った時に必要になるのがアイコンです。
今回はそんな、デフォルトのElectronのアイコンのまま配布するのはさすがにちょっと……という人がとりあえず何かしらでっち上げてみるというやつです。
1. 参考元を探す
まずやることはソフトを立ち上げることではありません。すっとマウスカーソルを動かして、PCに入っているいろいろなアプリケーションのアイコンを眺めましょう。
デザインとか全然勉強してない人間が一から何かしらgenerateするのは至難の技なので、既存のアイコンをパクり……もといリスペクトしましょう。
ちなみに今回の例はWebブラウザのSafariのアイコンを参考にしています。
基本的にはいくつかのアイコンを参考にして、単一のアイコンに寄せすぎないというのがいいかと思われます。
2. 画像を作る
Affinity Designerを立ち上げて、新しいファイルを作ります。ドキュメントの設定は次のようにしましょう。
- ページ幅: 1024px
- ページ高さ: 1024px
- DPI: 72
このサイズはMacのRetina Display向けのサイズになります。DPIは正直何でもいいですが、あまり大きくするとファイルサイズも大きくなります。
また、最初に[表示]→[グリッドを表示]でグリッドを表示しておきましょう。
グリッドは初期設定のままでもいいのですが、ちょっと細かすぎるかなと私は思うので、[表示]→[グリッドおよび軸マネージャー...]からこんな感じにしています。この辺はお好みで。
それから、ウインドウ上部のU字磁石をクリックして、スナップをオンにしておきましょう。
では、作っていきましょう。
ここではアイコンを作るのに使えそうないくつかのTipsを紹介します。
楕円を中心点から描画する
アイコンは丸いものが多いです。
丸を配置するときは中央から配置すると思いますが、基本的にAffinity Designerの楕円ツールはクリックしたところを始点にして円を描きます。
中心点から描くには、楕円ツールで円を描き始めて、そのまま離さずに⌘ボタンを押しましょう。
さらにshiftボタンも押すことで真円を描くことができます。
グリッドを表示、スナップをオンにした状態で中心から真円を描くことで、中心に対して点対称に円を描くことができます。
いくつかの要素に対してグラデーションをかける
こんな感じの背景+飾り線みたいな要素に一括でグラデーションをかけたい場合。
私はその領域と同じ大きさの白い要素を作って、合成モードをを乗算とした上で、その要素にグラデーションをかけています。
gifにするとこんな感じ。
3. 完成
完成したものがこちらになります。
とりあえずシンプルな感じで。
Affinity Designerには吹き出しツールとかもあるので、チャットアプリのアイコンとか瞬殺で作れそうですね。
このアイコンを作った理由(というかまあアプリケーションを作ったんですが)はもうちょっと完成度が上がったら公開する予定です。