Wie exportiert man gestochen scharfe Android-Icons in Photoshop/Illustrator?

Sowohl Photoshop (Ebenenformen) als auch Illustrator (Vektoren) sind schlecht darin, gestochen scharfe Android-Assets zu erstellen, wenn ich speichere. Kann jemand helfen, wie man knusprige Gegenstände in mehreren Größen herstellt, ohne es von Hand zu tun? Hier sind die Methoden, die ich ausprobiert habe:

  1. Verwenden Sie XXXHDPI in Illustrator Save for Webbis zu allen anderen kleinen Größen. (viele unscharfe Pixel)
  2. Verwenden von XXXHDPI in Photoshop, Ändern der Größe von Bildern mit Stapeleffekt (noch weniger verschwommen)
  3. Verwenden von XXXHDPI in Photoshop, manuelles Speichern für das Web mit ausgewähltem bikubischem Schärfen (beste Methode, funktioniert aber nicht in einem Stapeleffekt).

Antworten (2)

Jede Methode, die Bitmap-basierte Skalierung verwendet, wird im Allgemeinen für vektorformbasierte Designs schrecklich aussehen, insbesondere für kleine Glyphen. Die gute Nachricht ist, dass Android heutzutage wirklich nur 2×, 3× und 4× Assets benötigt (vielleicht 1,5×, wenn Sie auf ältere Geräte abzielen möchten. iOS ist ähnlich und erfordert 1× (iPad Mini und ältere Geräte), 2× und 3× (iPhone 6 Plus).

  • 1× = Android mdpi = iOS nicht-Retina
  • 1,5× = Android-HDPI
  • 2× = Android xhdpi = iOS Retina
  • 3× = Android xxhdpi = iOS Retina HD (nur iPhone 6 Plus)
  • 4× = Android-xxxhdpi

Sie werden feststellen, dass iOS und Android heutzutage in Bezug auf die Asset-Skalierung ähnlich komplex sind.

Ich würde empfehlen, Photoshop und entweder die neue Generator-Funktion oder Slices zu verwenden. Generator kann Assets in verschiedenen Maßstäben speichern und skaliert mithilfe von Vektorskalierung statt Bitmap-Skalierung.

Wenn Sie mit der 1×-Größe arbeiten, ist die Skalierung um exakte ganzzahlige Vielfache perfekt. Das bedeutet, dass Ihre 2×-, 3×- und 4×-Kunstwerke großartig aussehen werden.

Generator-Einführung:

Hier ist mein Arbeitsablauf, einschließlich vieler Informationen zur Verwendung von Slices-Blättern und zum Exportieren für Android und iOS.

Eine weitere Option, wenn die Assets einfach genug sind, besteht darin, die neuen Vektor-Drawables von Android zu verwenden:

Wenn Sie Vektor-Drawables verwenden, müssen Sie SVGs erstellen, daher ist Illustrator möglicherweise die beste Wahl (bitte beachten Sie, dass der Generator von Photoshop auch SVG-Assets erstellen kann).

Ich habe auch einen Vortrag bei Adobe MAX gehalten, der das Thema behandelte:

Und schließlich, wenn Sie wirklich 1,5-fache Assets benötigen, würde ich empfehlen, diese von Hand zu optimieren – wenn Sie einen Großteil der Arbeit im 1-fachen Maßstab erledigen, werden die 1,5-fachen Assets aufgrund des Maßstabs mit verschwommenen Rändern enden Faktoren beteiligt. Dagegen kannst du nicht viel machen.

Dieser Beitrag kann mit Antworten wie „Du arbeitest bei 1×?!“ beantwortet werden. Bist du verrückt?". Ich mache die meiste Arbeit bei 1×, ja. Es ist jedoch sehr einfach, zwischen den Maßstäben zu wechseln, wenn Sie Details sehen möchten, oder gegebenenfalls einfach um halbe Pixel zu verschieben.

Lassen Sie mich zunächst sagen, dass diese Methode nur eine Problemumgehung ist – die dunkle Seite von Android ist leider die Vielzahl von Bildschirmgrößen und -dichten, mit denen wir Designer und Entwickler arbeiten müssen, und die einzige Möglichkeit, pixelgenaue Assets in Photoshop zu erstellen, ist es manuell tun.

Die folgende Lösung funktioniert meines Wissens nur in Photoshop:

Wenn ich das richtig verstehe, haben Sie erwähnt, dass die beste Methode das bikubische Schärfen ist, aber Sie möchten es in der Batch-Funktion verwenden. Nun, was Sie tun können, ist, eine Aktion zu erstellen, die die Größe Ihres Bildes ändert, und die bikubische Schärfemethode auszuwählen - auf diese Weise wird es in der Aktion gespeichert, und Sie können mehrere Bilder damit stapelweise verarbeiten und hoffentlich den gewünschten Effekt erzielen.

Wenn Sie weitere Informationen zu Aktionen und Stapelverarbeitung wünschen, probieren Sie dieses Tutorial aus (ich schwöre, es ist keine schamlose Eigenwerbung, dies ist die einzige, zu der ich den Link kenne).

(Oder, wenn Sie einfache Formen und Symbole möchten, versuchen Sie, sie in eine Schriftart wie Font Awesome umzuwandeln – hier ist eines von vielen Tutorials, wie es geht (wiederum das einzige, das ich kenne). Auf diese Weise müssen Sie es nicht tun Ändern Sie die Größe für alle Dichten, und sie werden immer ziemlich scharf sein, egal auf welchem ​​​​Gerät Sie sie anzeigen).