Photoshop: So speichern Sie gestochen scharfe und flüssige PNG-Dateien für das App-Design

Ich speichere Symbole als PNG-Dateien, die in einer App verwendet werden sollen. Aber beim Zoomen oder Verkleinern sehen die Bilder verpixelt aus. Wie speichert man Bilder im PNG-Format, damit sie scharf und flüssig bleiben?

Können Sie bitte weitere Details hinzufügen? Was ist die Bildgröße? Wie stark verkleinerst du das Bild? Zeigen Sie auch ein Beispiel, wenn Sie können.

Antworten (2)

Zusätzlich zu Lucians großartiger Antwort:

Verschiedene Plattformen haben unterschiedliche native Formate, die sie für das Design der Benutzeroberfläche in Apps verwenden können. PNGs sind das gebräuchlichste UI-Asset-Format, und ja, es sind Bitmaps (zoomen Sie hinein und Sie sehen Pixel). Wie Lucian sagt, ist das in Ordnung, solange sie in der richtigen Größe angezeigt werden.

iOS, Android und andere mobile Plattformen erfordern Bilder mit den verwendeten Pixeldichten. Das bedeutet, dass jedes Element, für das Sie ein Bild benötigen, tatsächlich eine Reihe von Bildern in unterschiedlichen Maßstäben erfordert.

iOS

iOS kann PNGs und PDFs nativ für UI-Bilder verwenden. Bitte beachten Sie, dass PDFs nur von Xcode in PNGs konvertiert werden (sie werden nicht zur Laufzeit gerendert). Wenn Sie Vektorobjekte unter iOS verwenden möchten, ist es eine gute Option, Core Graphics-Pfadcode mit PaintCode oder ähnlichem zu erstellen.

https://www.paintcodeapp.com

SVGs können auf iOS verwendet werden, aber nicht nativ (eine Bibliothek eines Drittanbieters ist erforderlich, um sie zu analysieren und zu rendern).

Android

Android kann PNGs und WebP für Bitmap-Bilder und Android Vector Drawables für Vektorbilder verwenden. Vector Drawables sind SVGs sehr ähnlich (eine Teilmenge von SVG, in einem anderen Container). Vector Drawables sind großartig, wenn Sie sie verwenden können.

https://developer.android.com/training/material/drawables.html

Das Versenden von Bitmap-Assets in Ihrer App ist völlig in Ordnung und tatsächlich die am häufigsten verwendete Methode.

In der Theorie

  • PNG ist ein Rasterformat (kein Vektor), was bedeutet, dass Pixel letztendlich immer sichtbar sind, abhängig von Ihrer Zoomstufe. PNG-Dateien sind nur in ihrer beabsichtigten Größe scharf und flüssig, nicht wenn sie vergrößert sind. Sie können ein größeres PNG über den Größenänderungsprozentsatz in „Für Web speichern“ speichern und es dann in Ihrem Code skalieren, aber es gibt immer eine Grenze bei Rasterformaten.
  • Das Speichern als SVG (Vektorformat) ist eine Alternative für eine vollständig glatte, nicht verpixelte Qualität.

In der Praxis

  • Es hängt davon ab, wofür Sie die Bilder verwenden möchten. Wenn Sie die Verwendung für eine App planen, recherchieren Sie dies, indem Sie "app design svg vs png" googeln.
Ich erstelle Icons für eine App mit Materialdesign-Richtlinien. Ich habe ein Logo in der Größe 1080*1920 entworfen. Ist es zwingend erforderlich, Bilder immer im SVG-Format zu speichern?
Du meinst wie eine mobile App, nehme ich an? Android, iPhone? Warum gibst du diese Dinge nicht beim Posten an? :) Ich mache keine Apps, also kenne ich die genauen technischen Anforderungen nicht. Sie müssen prüfen, ob Ihre App mit SVG arbeiten kann. Wenn dies der Fall ist, ist SVG definitiv flüssiger als PNG.
Danke Lucian. Es tut mir leid, aber ab dem nächsten Mal werde ich dafür sorgen, alle notwendigen Details vollständig anzugeben, und entschuldige mich für Ihre Unannehmlichkeiten.
Kein Problem. Wenn Sie der Meinung sind, dass diese Antwort in irgendeiner Weise geholfen hat, klicken Sie auf den Aufwärtspfeil und/oder das Häkchen neben meiner obigen Antwort. Danke
Photoshop: So speichern Sie gestochen scharfe und flüssige PNG-Dateien für das App-Design
AntwortenHierDatenschutz-Bestimmungen1y, 0v