アフィニティデザイナーでのiOSアイコンサイズのエクスポート


10

アフィニティデザイナーには@ 1x、@ 2x、@ 3xという非常に便利なエクスポート機能がありますが、iOSアイコンに必要なさまざまなサイズでエクスポートする方法があるかどうか疑問に思いますか?

ここに必要なサイズの簡潔なグリッドが見つかりました。これをリスト形式で再現します。

  • 1024x1024
  • 180x180
  • 152x152
  • 120x120
  • 87x87
  • 80x80
  • 76x76
  • 58x58
  • 57x57
  • 40x40
  • 29x29

それは11種類のアイコンサイズです!

特にスライスを個々のレイヤーに適用できるため(たとえば、ボタンの通常のバージョンと押されたバージョンの場合)、スライス構成コンセプトのエクスポートペルソナ全体が優れていることがわかりました。これと同じツールを使用して、特定のサイズのエクスポートを行う方法はありますか?

回答:


8

要件は随時変更されるため、常にAppleのガイドラインを参照することをお勧めします。私が開発したWebサイトには、現在ユニバーサルアプリケーションに必要な18のサイズをエクスポートするAffinity Designerテンプレートがあります。

iOSアプリアイコンテンプレートのプレビュー



この非常に素晴らしく使いやすいテンプレート、素晴らしい仕事をありがとう!
Sky

驚くばかり!ありがとう!あなたはAndroid用のものも持っていますか?
ユニフォニック2018年

4

巨大で複雑なリストのように見えますが、実際に作成する必要があるサイズは5つだけです。

  • 29pt
  • 49pt
  • 60pt
  • 76pt
  • 1024px

最初の4つのサイズ(ポイントで表示)には、1倍、2倍、3倍のバージョンが必要です(将来を見据え、iPhone 6 Plusをカバーする場合)。

ネットやAppleのサイトに記載されているサイズの一部は、iOS 6以下(57×57など)のものです。iOS 7以上を対象としている場合は必要ありません。

これが私が作成したPhotoshopテンプレートです。

iOSアイコンテンプレート

各アイコンをエクスポートするように設定されたスライスと、サイズを変更して再エクスポートするアクションがあるので、次のようになります。

  • icon-29.png
  • icon-29@2x.png
  • icon-29@3x.png
  • icon-40.png
  • icon-40@2x.png
  • icon-40@3x.png
  • icon-60.png
  • icon-60@2x.png
  • icon-60@3x.png
  • icon-76.png
  • icon-76@2x.png
  • icon-76@3x.png

これらのサイズすべてがまだ必要なわけではありませんが、将来的には必要になる可能性があります。4つの基本サイズから始めると、アイコンの作成がはるかに簡単になります。

Photoshopのスライスを使用して、各アイコンに必要なさまざまな領域をエクスポートしています。提供するアイコンには透明な領域があってはならないことに注意してください。色は隅まで伸びていなければなりません。iOSはアイコンをマスクするので、心配する必要はありません。

アフィニティのスライス機能を使用して、同じことを行うことができますか?


更新:アフィニティデザイナー、スケッチ、Photoshop、Illustrator用のオープンソースアプリアイコンテンプレートをいくつか作成しました。それらは検討に値するかもしれません。


うわー、素晴らしい情報、ありがとう!アフィニティでそれをどうやってやるかはわかりませんが。アフィニティでそのようなテンプレートを作成する方法を知っていますか?
Matt Mc

Photoshopでスライスを使用して、必要な領域をカットおよびエクスポートしています。アフィニティには同じ名前の同様の機能があると思います。(私はいくつかの詳細情報を提供するために私の答えを編集しました。)
Marc Edwards

ええ、そうです、それは素晴らしいスライス機能を持っています。画像を自動的にコピーしてサイズ変更するフォトショップテンプレートに何かありますか?のように、76ptイメージを作成すると、残りは自動的に作成されますか?または、各バージョンを作成してから、スライスを使用してエクスポートする必要がありますか?
Matt Mc

はい、サイズ変更のためにいくつかのアクションとスクリプトを使用します。私の完全なワークフローはここに文書化されています:bjango.com/articles/appdesignworkflow 私がスクリーンショットを投稿したテンプレートは、こちらから入手できます:bjango.com/articles/actions
Marc Edwards

3

あなたはアフィニティデザイナーでそれを行うことができ、スライスはサフィックスを使用してそれらの出力をスケーリングすることができます、これは「w」サフィックスを使用したiOSアイコンのエクスポートです:

ここに画像の説明を入力してください


2

アフィニティデザイナーでこれを行う良い方法を見つけました。ただし、完全に自動化されていません。iPhoneに現在必要な3つのアイコンサイズ(29pt、40pt、60pt)を取得する方法を説明します。それぞれ2xおよび3xの解像度です。

  1. 新しいドキュメントを作成し、単位を「ポイント」、ページサイズを29x29に設定し、ダイアログで「アートボードの作成」をチェックします
  2. アートボードにアートワークを貼り付けて配置する
  3. レイヤーパネルでアートボードの名前を「29pt」に変更します(オプション)。
  4. アートボードを右クリックして、[複製]を選択します
  5. 新しいアートボードをドラッグして(横に並べて表示できるように)、名前を「40pt」に変更します(ここでも、この手順はオプションです)。
  6. 変形パネルを使用して新しいレイヤーのサイズを40x40ptに変更します-アートワークは自動的に拡大されます
  7. 手順4〜6を繰り返して60ptアートボードも作成します(必要に応じて、iPadの場合はさらに76ptおよび83.5pt)。
  8. エクスポートペルソナに移動し、スライスパネルに切り替えて、2xおよび3x解像度を選択します(iPadの場合はさらに1x)
  9. リスト内のすべてのアートボードレイヤー(「29pt」、「40pt」など)を選択し、パネルの下部にある[選択したアイテムをエクスポート]をクリックします。

アフィニティでは、選択したすべての解像度ですべてのアイコンサイズが作成されるため、実際に必要な数よりも多くのアイコンが表示される可能性があります。しかし、それらは「29pt@2x.png」などのようにきちんと名前が付けられているので、Xcodeアセットカタログでそれらを割り当てるのは本当に簡単です。

注意点:エクスポートペルソナに移動すると、アフィニティは各アートボード(サイズラベルが付いた青いフレーム)のエクスポートスライスを自動的に作成します。私は時々これらのスライスのサイズが数ピクセルずれていることを発見しました。ADのバグのようです。スライスの角をドラッグすることで簡単に修正できます。


1

マークエドワーズは、作成する必要があるアイコンのサイズ、そのためのスライスの使用、およびこれを行うためのPhotoshopリソースへの適切なリンクに関して、すばらしい答えを出しました。ただし、特にAffinity Designerで複数のサイズでエクスポートする方法の解決策をまだ探しています。

結局、これは画像の配置ツールを使用して可能であることに気付きました。アイコンを1つのファイルで作成し、次に別の「テンプレート」ファイルで作成すると、画像配置ツールを使用して、アイコンファイルを取り込む複数のレイヤーを作成できます。これらの各レイヤーは、名前付きスライスに変えることができます。

ここでの不利な点は、各レイヤーを作成してアイコンファイルを指す必要があるため、面倒な作業のようです。しかし、それが整ったら、ベースファイルを編集した後、簡単にすべてを再エクスポートできます。


1
まだテストは行っていませんが、この方法ではビットマップスケーリングされたアセットが大きなサイズにならないことに注意してください。その場合、ベクトル/レイヤー効果としてのスケーリングよりも品質が低下します。アフィニティデザイナーでスライスを使用できないのですか?時間があれば、テストするように設定します。
マークエドワーズ

1
@MarcEdwards確かに、結果がベクトルまたはビットマップとしてスケーリングされているかどうかを確認するための調査は行っていません。Affinity Designerのスライスは、エクスポートする特定の領域を定義します。彼らは私が言うことができるものから彼らの出力をスケーリングすることはできません。検査したい場合は、Place Imageメソッドのテストを行いました:pixelapse.com/s/RGCQYVQR7DHTYC6KC
Matt Mc
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.