MacFeeling Blog

マックな感じ …

Affinity DesignerのTemplateを使って透過アイコン作成

公開 : | 4件のコメント

この記事は最終更新日から 約2年が経過しているので情報が古い可能性があります。

Bjango、iOSからOS X, tvOS, Windows Phoneに至るまで、ほぼ全てのアイコンを網羅したテンプレート「App Icon Templates」をBSDライセンスで公開。のページで知ったBjango App Icon Templates。
早速、Design Resources from Bjangoのページから「Bjango App Icon Templates」をダウンロード。

解凍したら、「Affinity Designe」フォルダ内の、「App Icon - Apple OS X.afdesign」をダブルクリックして、Affinity Designerを起動
affinity_designer00

「ファイル」メニューから別名で保存をして、それを使って編集を行なっていきます。

アイコンの背景を透過して書き出すには、「ファイル」メニューから「ドキュメント設定」を選択して、「カラー」タブの「透明な背景」にチェックを入れて「OK」をクリック

通常は、レイヤーパネルのLabelsのチェックを外して、Icon Artworkのそれぞれのサイズを削除して、新たなアイコンを作成していくと思いますが、今回は、アイコン作成が完了したと仮定して、そのままオリジナルのものを使っての説明です。

レイヤーパネルでIcon Artworkを残して、Labels、Icon Areas、Backgroundのチェックを外します。
affinity_designer01

左上の「ペルソナをエクスポート」アイコンをクリック
affinity_designer02

こんな感じになります。
affinity_designer03

あとは、スライスパネルで書き出したいアイコンを選択したら、書き出しオプションのプリセットでPNG-24を選択。

次に、スライスパネルで書き出したいアイコンにチェックを入れて(例では64,128,256)

「スライスの書き出し」ボタンをクリック、保存場所を指定すればファイルが作成されます。
affinity_designer05

Affinity Designer App (¥6,000)

4件のコメント

コメントを残す

必須欄は * がついています




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)