Wie exportiere ich eine Grafik, um mehrere Android-Bildschirme in Illustrator zu unterstützen?

Ich entwerfe gerade eine Anwendung für Android und bin mir nicht sicher, wie ich vorgehen soll.

Ich möchte in der Lage sein, alles von einem Bildschirm mit mittlerer Dichte bis zu einem Bildschirm mit extra-extra hoher Dichte zu unterstützen. Google schlägt vor, für jeden Dichtebildschirm eine separate Ressource zu erstellen, indem Sie eine Ressourcenordnerstruktur wie unten verwenden:

res/layout/my_layout.xml              // layout for normal screen size ("default")
res/layout-large/my_layout.xml        // layout for large screen size
res/layout-xlarge/my_layout.xml       // layout for extra-large screen size
res/layout-xlarge-land/my_layout.xml  // layout for extra-large in landscape orientation

res/drawable-mdpi/graphic.png         // bitmap for medium-density
res/drawable-hdpi/graphic.png         // bitmap for high-density
res/drawable-xhdpi/graphic.png        // bitmap for extra-high-density
res/drawable-xxhdpi/graphic.png       // bitmap for extra-extra-high-density

res/mipmap-mdpi/my_icon.png           // launcher icon for medium-density
res/mipmap-hdpi/my_icon.png           // launcher icon for high-density
res/mipmap-xhdpi/my_icon.png          // launcher icon for extra-high-density
res/mipmap-xxhdpi/my_icon.png         // launcher icon for extra-extra-high-density
res/mipmap-xxxhdpi/my_icon.png        // launcher icon for extra-extra-extra-high-density

Hier sind Beschreibungen, die die Begriffe für jede Dichteressource definieren

Screen Size
small   Resources for small size screens.
normal  Resources for normal size screens. (This is the baseline size.)
large   Resources for large size screens.
xlarge  Resources for extra-large size screens.

Die Pixeldichte ist auch wie folgt quantifizierbar:

Density
ldpi    Resources for low-density (ldpi) screens (~120dpi).
mdpi    Resources for medium-density (mdpi) screens (~160dpi). (This is the baseline density.)
hdpi    Resources for high-density (hdpi) screens (~240dpi).
xhdpi   Resources for extra-high-density (xhdpi) screens (~320dpi).
xxhdpi  Resources for extra-extra-high-density (xxhdpi) screens (~480dpi).
xxxhdpi Resources for extra-extra-extra-high-density (xxxhdpi) uses (~640dpi). Use this for the launcher icon only, see note above.
nodpi   Resources for all densities. These are density-independent resources. The system does not scale resources tagged with this qualifier, regardless of the current screen's density.
tvdpi   Resources for screens somewhere between mdpi and hdpi; approximately 213dpi. This is not considered a "primary" density group. It is mostly intended for televisions and most apps shouldn't need it—providing mdpi and hdpi resources is sufficient for most apps and the system will scale them as appropriate. If you find it necessary to provide tvdpi resources, you should size them at a factor of 1.33*mdpi. For example, a 100px x 100px image for mdpi screens should be 133px x 133px for tvdpi.

 Orientation
land    Resources for screens in the landscape orientation (wide aspect ratio).
port    Resources for screens in the portrait orientation (tall aspect ratio).

Aspect ratio
long    Resources for screens that have a significantly taller or wider aspect ratio (when in portrait or landscape orientation, respectively) than the baseline screen configuration.
notlong Resources for use screens that have an aspect ratio that is similar to the baseline screen configuration.

Sie geben hier auch Details zum Verhältnis für den Export von Bildschirmgrößen an:

Um alternative Bitmap-Zeichnungen für unterschiedliche Dichten zu erstellen, sollten Sie das Skalierungsverhältnis von 3:4:6:8:12:16 zwischen den sechs verallgemeinerten Dichten befolgen. Wenn Sie beispielsweise ein Bitmap-Darstellungselement mit 48 x 48 Pixeln für Bildschirme mit mittlerer Dichte haben, sollten alle verschiedenen Größen wie folgt sein:

36x36 (0.75x) for low-density
48x48 (1.0x baseline) for medium-density
72x72 (1.5x) for high-density
96x96 (2.0x) for extra-high-density
144x144 (3.0x) for extra-extra-high-density
192x192 (4.0x) for extra-extra-extra-high-density (launcher icon only; see note above)

In meinem Fall erstelle ich also derzeit Grafiken, die entweder den gesamten Bildschirm oder ~ 1/2 Bildschirm einnehmen. Ich habe Vektorbilder in Illustrator mit einem Surface Pro 3 (Pixeldichte 216,33) erstellt. Ich glaube, dass PNG-24 das empfohlene Format ist; Bitte korrigiere mich wenn ich falsch liege. Wie sollte ich zum Support exportieren, um jeden Bildschirm zu unterstützen?

Antworten (2)

Jedes Asset, das Sie für die App benötigen, muss als Bitmap-Bild (PNG oder WebP) in den verschiedenen benötigten Dichten gespeichert werden. Gegebenenfalls können Sie auch Android Vector Drawables verwenden, bei denen es sich um ein SVG-ähnliches Dateiformat handelt (sie verwenden SVG pathData).

PNGs sind das einzige Format, das Sie direkt aus Illustrator exportieren können, und sie können auch alles darstellen (die Verwendung von Vector Drawables begrenzt das, was möglich ist).

Beginnen Sie mit 1× (mdpi)

Sie sollten alle Ihre Assets im Maßstab 1× oder mdpi von Android erstellen. Dies zielt auf einen Bildschirm von ~ 160 PPI ab und bedeutet, dass 1 Pixel 1 Android dp (dichteunabhängiges Pixel) entspricht.

Das Entwerfen mit 1× erleichtert den Export in die verschiedenen Größen. Das bedeutet auch, dass Sie die Maße in der Materialdesign-Dokumentation verwenden können, ohne Größen übersetzen zu müssen.

Beispielsweise ist eine Android-Floating-Action-Schaltfläche (FAB) 56 × 56 dp groß . Das bedeutet, dass Ihr Grafikbereich in Illustrator 56 × 56 Pixel groß sein sollte. Beim Entwerfen mit 1× ist 1 dp = 1 Pixel.

Export für Bildschirme

Sobald Ihr Bildmaterial eingerichtet ist, können Sie es mit File→ Export→ exportieren Export for Screens. Die einfachste Arbeitsweise ist wahrscheinlich die Verwendung einer Zeichenfläche für jedes Asset, das Sie exportieren möchten. Export for Screens kümmert sich um die Erstellung aller Größen, die Android benötigt.

Illustrator-Export für Bildschirme

Sie haben vielleicht andere Anforderungen, aber ab heute (März 2017) baue ich normalerweise für 1× (mdpi), 2× (xhdpi), 3× (xxhdpi) und 4× (xxxhdpi).

Eine Anmerkung zur Exportqualität

Ich fühle mich gezwungen, auch einige Vorbehalte beim Exportieren von Bitmaps aus Illustrator zu erwähnen – Form-Antialiasing ist nicht so hochwertig wie andere Tools, und Farbverläufe werden nicht gedithert. Dies ist kein Problem beim Exportieren von SVGs oder anderen Vektorformaten, aber es ist ein Problem, wenn Illustrator Bitmaps rendert und in ein Bitmap-Format wie PNG exportiert. Das bedeutet nicht, dass Sie Illustrator für diese Aufgabe nicht verwenden sollten, aber denken Sie daran, wenn Sie mit den Ergebnissen nicht zufrieden sind.

PNG 8 ist in Ordnung, es sei denn, Sie verwenden Text mit speziellen Attributen wie Schatten und dergleichen. Aber Sie haben Glück, wenn Sie AI CC 2017 verwenden, können Sie die Option [Export für Bildschirme] verwenden. 1

Ich glaube, Sie werden sehr zufrieden sein, wenn Sie sich das einmal angesehen haben. Ihre Aufgabe ist nicht länger ein gutes Stück eines 24-Stunden-Zeitraums.

Wie exportiere ich eine Grafik, um mehrere Android-Bildschirme in Illustrator zu unterstützen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v