Illustrator Artboard-Abmessungen für mobiles UI-Design?

Meine Empfehlung: Erstellen Sie ein Illustrator-Dokument mit dem Profil "Web", um sicherzustellen, dass "Neue Objekte am Pixelraster ausrichten" aktiviert ist. Auf diese Weise sind neue Formen, die Sie auf einer Zeichenfläche platzieren, pixelgenau und sehen beim Export mit 72 dpi sauber aus. Stellen Sie außerdem sicher, dass Sie sich beim Entwerfen im Pixelvorschaumodus befinden, damit Sie Formen an den Pixeln ausrichten können.

Bearbeiten: Ja, Sie können mehr als eine Zeichenfläche mit unterschiedlichen Abmessungen erstellen. Verwenden Sie einfach das Zeichenflächen-Werkzeug und ziehen Sie neue Zeichenflächen in das Illustrator-Dokument.

Erstellen Sie dann jede Zeichenfläche in der Größe, in der Sie arbeiten möchten: entweder @2x oder nicht. Hier ist meine Goto-Liste in px:

1. iPhone 6: 750 x 1334
2. iPhone 6 plus: 1242 x 2208
3. iPhone 5s/5c/5: 640 x 1136
4. iPad: 1536 x 2048
5. HTC One: 1080 x 1920 [dies ist das Gerät, das ich habe, aber sein Pixelverhältnis entspricht dem der beliebtesten Android-Telefone, nämlich den Samsung Galaxys usw.]

Wie Sie sehen können, arbeite ich lieber mit voller @2x (oder mehr) Auflösung, weil ich beim Exportieren von Grafiken weniger Arbeit erledigen muss. Im Allgemeinen besteht die beste Möglichkeit, die Bildschirmgröße zu messen, darin, einfach eine Bildschirmaufnahme von dem Gerät zu machen, für das Sie entwerfen, und sich die Pixelgröße für dieses Bild anzusehen.

Nun zu dem Teil, der Sie am meisten interessiert. Wie Sie bereits wissen, ist das Arbeiten mit Vektorgrafiken großartig. Unendliche entschlossene Unterstützung und (fast) unendliche Skalierbarkeit. Wenn Sie bereit sind, die Zeichenflächen zu exportieren, gehen Sie wie folgt vor:

1. Wählen Sie die Zeichenfläche aus, mit der Sie arbeiten
2. Datei > Für das Web speichern
3. Wählen Sie im sich öffnenden Dialog die Einstellung PNG-24. Schalten Sie die Transparenz nach Belieben ein/aus
4. Schauen Sie, wo Bildgröße steht. Hier können Sie die Zeichenfläche ohne Qualitätsverlust in beliebiger Größe exportieren. Sie können für Ihre Geräte mit niedriger Auflösung eine Größe von 50 % festlegen. Oder 100 % Größe für die oben erwähnten @2x-Gerätegrößen.
5. Stellen Sie beim Ändern einer Größe sicher, dass alle Werte in der Bildgröße aktualisiert werden. Möglicherweise müssen Sie vorher etwas in die Breiten-/Höhenfelder klicken. Andernfalls wird Ihr Export in Originalgröße ausgegeben.
6. Endlich haben Sie eine Datei in der richtigen Größe, mit minimalem Aufwand und in Dateigröße komprimiert, damit Sie sie überall verwenden können, wo Sie wollen. Mein Favorit von hier ist, die Dateien auf ein tatsächliches Telefon/Tablet zu importieren und sie dann durchzublättern, um ein Gefühl dafür zu bekommen, wie die Benutzeroberfläche auf einem tatsächlichen Gerät aussehen könnte.

Fragen?

Es gibt eine Fülle von Skripten zum Speichern von Grafiken aus Illustrator für Mobilgeräte. Es ist viel schneller als die Verwendung von "Für Web speichern". Hier ist einer, aber es gibt Dutzende. Außerdem können Sie sie selbst schreiben oder bearbeiten. https://uncorkedstudios.com/blog/export-to-ios-photoshop-script