Exportieren Sie iOS-Symbolgrößen in Affinity Designer

Obwohl Affinity Designer über den äußerst nützlichen Export von @ 1x, @ 2x und @ 3x verfügt, frage ich mich, ob es eine Möglichkeit gibt, in den verschiedenen Größen zu exportieren, die für ein iOS-Symbol erforderlich sind.

Ich habe hier ein übersichtliches Raster mit den benötigten Größen gefunden , das ich im Listenformat reproduzieren werde:

• 1024 x 1024
• 180x180
• 152 x 152
• 120 x 120
• 87 x 87
• 80x80
• 76 x 76
• 58 x 58
• 57 x 57
• 40x40
• 29x29

Das sind 11 verschiedene Symbolgrößen!

Ich fand die gesamte Exportpersona mit Slice-Konfigurationskonzept hervorragend, zumal Sie Slices auf einzelne Ebenen anwenden können (z. B. für die normale und die gedrückte Version einer Schaltfläche). Gibt es eine Möglichkeit, dasselbe Tool möglicherweise für bestimmte Exportgrößen zu verwenden?

Da sich die Anforderungen von Zeit zu Zeit ändern, ist es immer eine gute Idee, sich an die Richtlinien von Apple zu halten. Auf meiner von mir entwickelten Website befindet sich eine Affinity Designer-Vorlage , die die 18 Größen exportiert, die derzeit für universelle Anwendungen erforderlich sind.

Es sieht aus wie eine riesige, komplexe Liste, aber es gibt wirklich nur 5 Größen, die Sie erstellen müssen:

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

Die ersten vier Größen (in Punkten aufgeführt) benötigen 1 × -, 2 × - und 3 × -Versionen (wenn Sie zukunftssicher sind und das iPhone 6 Plus abdecken).

Einige der Größen, die im Internet und auf der Apple-Website aufgeführt sind, gelten für iOS 6 und niedriger (57 × 57 usw.). Sie werden nicht benötigt, wenn Sie auf iOS 7 und höher abzielen.

Hier ist die von mir erstellte Photoshop-Vorlage:

Ich habe Slices eingerichtet, um jedes Symbol zu exportieren, und eine Aktion zum Ändern der Größe und zum erneuten Exportieren. Am Ende habe ich also:

• 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

Es werden noch nicht alle diese Größen benötigt, aber wahrscheinlich in der Zukunft. Das Beginnen mit 4 Basisgrößen erleichtert das Erstellen der Symbole erheblich.

Ich verwende Slices in Photoshop, um die verschiedenen Regionen zu exportieren, die für jedes Symbol benötigt werden. Bitte beachten Sie, dass die von Ihnen bereitgestellten Symbole keine transparenten Bereiche haben sollten - die Farbe sollte sich bis in die Ecken erstrecken. iOS maskiert das Symbol, sodass Sie sich darüber keine Sorgen machen müssen.

Sie könnten dasselbe mit der Slice-Funktion von Affinity tun?

Update: Ich habe einige Open Source App-Symbolvorlagen für Affinity Designer, Sketch, Photoshop und Illustrator erstellt . Sie könnten eine Überlegung wert sein.

Sie können dies in Affinity Designer tun. Slices können ihre Ausgabe mithilfe von Suffixen skalieren. Hier werden iOS-Symbole mit dem Suffix 'w' exportiert:

Ich habe gerade einen guten Weg gefunden, dies in Affinity Designer zu tun. Es ist jedoch nicht vollständig automatisiert. Ich werde erklären, wie Sie die drei derzeit für das iPhone benötigten Symbolgrößen (29pt, 40pt, 60pt) mit jeweils 2x und 3x Auflösung erhalten:

1. Erstellen Sie ein neues Dokument, setzen Sie die Einheit auf "Punkte", die Seitengröße auf 29 x 29 und aktivieren Sie im Dialogfeld "Zeichenfläche erstellen"
2. Fügen Sie Ihre Grafik in die Zeichenfläche ein und positionieren Sie sie
3. Benennen Sie die Zeichenfläche im Ebenenbedienfeld in "29pt" um (optional).
4. Klicken Sie mit der rechten Maustaste auf die Zeichenfläche und wählen Sie "Duplizieren".
5. Ziehen Sie die neue Zeichenfläche (damit Sie beide nebeneinander sehen können) und benennen Sie sie dann in "40pt" um (dieser Schritt ist ebenfalls optional).
6. Ändern Sie die Größe der neuen Ebene mithilfe des Transformationsbedienfelds auf 40 x 40pt. Ihre Grafik wird automatisch vergrößert
7. Wiederholen Sie die Schritte 4 bis 6, um auch eine 60-Punkte-Zeichenfläche zu erstellen (plus 76 Punkte und 83,5 Punkte für das iPad, falls erforderlich).
8. Gehen Sie zur Persona exportieren, wechseln Sie zum Bedienfeld „Slices“ und wählen Sie die Auflösung 2x und 3x (plus 1x für iPad).
9. Wählen Sie alle Zeichenflächenebenen in der Liste aus ("29pt", "40pt" usw.) und klicken Sie unten im Bedienfeld auf "Ausgewählte exportieren".

Affinity erstellt alle Symbolgrößen in jeder ausgewählten Auflösung, sodass Sie möglicherweise mehr Symbole erhalten, als Sie tatsächlich benötigen. Sie heißen jedoch ordentlich "29pt@2x.png" usw., sodass es wirklich einfach ist, sie in Ihrem Xcode-Asset-Katalog zuzuweisen.

Eine Einschränkung: Wenn Sie zur Export-Persona wechseln, erstellt Affinity automatisch ein Export-Slice für jede Zeichenfläche (das ist der blaue Rahmen mit der Größenbeschriftung). Ich fand heraus, dass die Größe dieser Scheiben manchmal um einige Pixel abweicht. Scheint wie ein Fehler in AD. Sie können es jedoch leicht beheben, indem Sie die Ecken der Scheiben ziehen.

Marc Edwards hatte eine großartige Antwort in Bezug auf die Größe der zu erstellenden Symbole, die Verwendung von Slices und gute Links zu Photoshop-Ressourcen. Ich bin jedoch immer noch auf der Suche nach einer Lösung für den Export in mehreren Größen in Affinity Designer .

Schließlich wurde mir klar, dass dies mit dem Werkzeug Bild platzieren möglich sein würde. Erstellen Sie Ihr Symbol in einer Datei und dann in einer anderen "Vorlagendatei". Mit dem Werkzeug "Bild platzieren" können Sie mehrere Ebenen erstellen, die Ihre Symboldatei einlesen. Jede dieser Ebenen kann in ein benanntes Slice umgewandelt werden.

Der Nachteil hierbei ist, dass jede Ebene erstellt und auf Ihre Symboldatei gerichtet werden muss, sodass dies mühsam erscheint. Sobald es vorhanden war, können Sie nach Änderungen an Ihrer Basisdatei problemlos alles erneut exportieren.