Junior Designer - Probleme mit iOS-Icon-Größen

Mir wurde die Aufgabe übertragen, iOS-Icons für eine App zu exportieren, die mein Büro entwickelt. Ich habe das noch nie gemacht und kämpfe mit dem Workflow und dem Erhalten pixelgenauer Symbole.

Ich arbeite in Illustrator und beziehe mich auf diesen Artikel auf der Entwickler-Website von Apple, und meine Hauptquelle der Frustration ist, dass ich meine Zeichenflächen und Symbole anscheinend nicht perfekt aufeinander abstimmen kann.

Es scheint, dass ich kein Problem habe, wenn ich mit Symbolabmessungen in geraden Zahlen arbeite, z. B. 40 x 40 px, aber ich bekomme zusätzliche Pixel, wenn ich Symbole mit ungeradzahligen Abmessungen exportiere, und ich kann meine Grafik nicht richtig an der Zeichenfläche ausrichten während es "pixelperfekt" bleibt. Beispielsweise soll das Symbol der iPad Pro-App 83,5 Pixel @ 2x groß sein. Bedeutet das, dass ich eine 83,5-Pixel-Zeichenfläche (2x) benötige oder kann ich eine 167-Pixel-Zeichenfläche (1x) verwenden? So oder so habe ich am Ende ein 168x168-Pixel-Icon, ein Pixel zu viel.

Übersehe ich etwas? Warum fragt Apple nach Symbolen in ungeraden Zahlenabmessungen, wenn dies mich daran hindert, pixelgenaue Symbole zu erzielen? Es ist offensichtlich etwas, was ich falsch mache, aber ich kann es nicht herausfinden.

Ich entschuldige mich, wenn dies eine lächerliche Frage ist. Dies ist meine erste Stelle in diesem Bereich und ich weiß, dass ich noch viel lernen muss.

Jede Hilfe wird sehr geschätzt!

Verwenden Sie die angegebenen Pixelabmessungen. Das Gerät passt die Größe auf die effektive Punktgröße/Auflösung an. dh erstellen Sie Ihr iPad Pro-Symbol mit 167px x 167px und exportieren Sie es mit 1x. Es wird dann auf dem Bildschirm als 83,5 pt x 83,5 pt @2x angezeigt.

Antworten (2)

Die Halbpixel-Abmessungen @2x oder @3x gelten für Displays mit hoher Dichte (Retina, Super Retina usw.), die von so ziemlich allen modernen Apple-Geräten verwendet werden. Dies bedeutet, dass die doppelte Anzahl von Pixeln benötigt wird, um die gleiche Menge an Platz auf dem Bildschirm einzunehmen.

ex. Stellen Sie es sich wie zwei Schachbretter vor. Sie sind beide gleich groß und nehmen den gleichen Platz auf dem Tisch ein, aber man hat doppelt so viele Felder auf dem Brett.

Im Falle des iPad Pro

  • @2x bedeutet, dass der Bildschirm dieses Geräts die doppelte Pixeldichte als der Standard hat (doppelt so viele Quadrate auf dem Schachbrett)
  • 83,5 Pixel ist die gerenderte Größe des Symbols, das auf dem Gerät angezeigt wird (die Größe des Schachbretts auf dem Tisch).
  • 167px ist die exportierte PNG-Größe aus Ihrer Designsoftware, die auf dem Gerät auf die Größe von 83,5px herunterskaliert wird (die Anzahl der Quadrate breit und hoch auf dem Schachbrett)

Ich hatte das gleiche Problem. Adobe Ilustrator generiert weiterhin Symbolbilder in nicht angemessener Größe. 21 statt 20, 30 statt 29, 168 statt 167.

Das einsatzbereite Skript löste das Problem: https://github.com/MPieter/iOS-images-export-script-illustrator

Der Link ist ein Skript/Add-On für Adobe Illustrator, das alle Symbole mit angemessener Benennung und Größe generiert. Außerdem wird eine automatische content.js-Datei hinzugefügt, sodass alle Dateien direkt zu image.assets hinzugefügt werden können.