MacFeeling Blog

マックな感じ …

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

公開 : | 4件のコメント

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

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件のコメント

  1. furu より:

    初めまして。
    たまたまこちらのサイトを拝見しまして、
    質問させて下さい。
    現在wordpressの方で有料の簡単なHPを持っているのですが
    そのデザインを変えたいなと思い調べていたらaffinity designerを知りました。
    これを使えば、今のサイトの中身のデザインは変えられますか?
    パソコンの知識0です。
    よろしくお願いします。

    • cotton より:

      furuさん

      アプリのアイコンの作成くらいしか使っていないので、宝の持ち腐れ状態です。 😉
      なので、残念ながらあまりお役に立てそうにもありません。 :cry_wp:

      WordPress限定であるならば、テーマを別なものに替えるのが簡単で良いのではないでしょうか?

      一応、チュートリアルのページへのリンクです。
      VimeoAffinity Designer

      よろしくお願いいたします。

コメントを残す

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




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