Exportieren Sie iOS-Symbolgrößen in Affinity Designer

10

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?

Matt Mc
quelle

Antworten:

8

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.

Vorschau der iOS App-Symbolvorlage

Steven Westmoreland
quelle
Vielen Dank für diese sehr schöne und einfach zu bedienende Vorlage, tolle Arbeit!
Himmel
Genial! Vielen Dank! Hast du auch eine für Android?
Uniphonic
4

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:

iOS-Symbolvorlage

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:

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.

Marc Edwards
quelle
Wow, tolle Informationen, danke! Obwohl ich nicht sicher bin, wie ich das in Affinity machen würde. Wissen Sie, wie Sie eine solche Vorlage in Affinity erstellen?
Matt Mc
Ich verwende Slices in Photoshop, um die benötigten Regionen auszuschneiden und zu exportieren. Ich glaube, Affinity hat ein ähnliches Merkmal mit dem gleichen Namen. (Ich habe meine Antwort bearbeitet, um weitere Informationen bereitzustellen.)
Marc Edwards
Hm, ja, es hat die Slice-Funktion, die großartig ist. Enthält Ihre Photoshop-Vorlage etwas, das das Bild automatisch kopiert und seine Größe ändert? Wie in erstellen Sie das 76pt-Image und der Rest wird automatisch erstellt? Oder müssen Sie jede Version erstellen und dann Slices zum Exportieren verwenden?
Matt Mc
Ja, ich verwende einige Aktionen und Skripte zum Ändern der Größe. Mein vollständiger Workflow ist hier dokumentiert: bjango.com/articles/appdesignworkflow Die Vorlage, von der ich einen Screenshot gepostet habe, ist hier verfügbar: bjango.com/articles/actions
Marc Edwards
3

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:

Geben Sie hier die Bildbeschreibung ein

Afanasii Kurakin
quelle
2

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 "[email protected]" 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.

Dorian Roy
quelle
1

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.

Matt Mc
quelle
1
Ich habe noch keine Tests durchgeführt, aber seien Sie vorsichtig, diese Methode führt nicht zu Bitmap-skalierten Assets der größeren Größe. Wenn dies der Fall ist, sind sie von schlechterer Qualität als die Skalierung als Vektoren / Ebeneneffekte. Sie können in Affinity Designer nicht einfach Slices verwenden? Wenn ich Zeit habe, richte ich es zum Testen ein.
Marc Edwards
1
@MarcEdwards Es ist wahr, ich habe nicht überprüft, ob die Ergebnisse als Vektor oder Bitmap skaliert sind. Slices in Affinity Designer definieren einen bestimmten Bereich für den Export. Sie können ihre Ausgabe nicht nach dem skalieren, was ich sagen kann. Ich habe einen Test der Place Image-Methode durchgeführt, wenn Sie Folgendes
Matt Mc