Illustrator: Unscharf aussehende Symbole beim Exportieren in PNG

Ich habe eine Vektordatei, die viele Objekte enthält. Einer davon ist unten angehängt. Die Oberseite ist original, kristallklar/pixelgenau. Aber ich möchte eine geringere Größe (Abmessungen nicht nach Dateigröße). Originalbilder sind 64 x 64 und alle PNGs sind ursprünglich pixelgenau.

Aber wenn ich kleinere Objekte exportiere, ist es immer verschwommen/unscharf/nicht scharf. Ich bekomme dieses Ergebnis mit allen Arten von Objekten und Dateien. Wie exportieren sie diese Vektoren mit kristallklarem Aussehen?

Probe:

Probe

Der erste stammt vom ursprünglichen Entwickler, der alle Vektoren als 64x64 exportiert hat. Das zweite ist meins und wurde als PNG aus derselben Vektordatei etwa 20x20/24x24 exportiert.

Ich habe 72 dpi @ 24 x 24 und 72 dpi @ 20 x 20 sogar 72 dpi @ 16 x 16 erstellt. Was auch immer ich tue, ich bekomme immer dieses unklare, unscharfe/verschwommene Bild.

Sie exportieren in kleine Pixelgrößen, was in Kombination mit Aliasing zu Unschärfe führt, nicht viel, was Sie dagegen tun können ... weshalb Sie im Allgemeinen kleine Symbole in ihrer beabsichtigten Größe entwerfen müssen (dh warum Sie sehen werden Icons mit verschiedenen 16x16 und 32x32 Versionen)
Siehe meine Antwort zum Exportieren von SVG nach PNG mit AI
Ich habe es jetzt. Ich werde versuchen, eine andere Version zu machen, um zu passen. Danke. Ich werde auch die SVG-Option evaluieren.

Antworten (2)

Eine Methode, die Sie verwenden könnten, besteht darin, Photoshop zu verwenden, um das 64 x 64-Pixel-Symbol neu zu skalieren. Wenn Sie beim Resampling die Methode "bikubisch schärfer" verwenden, sehen die Ergebnisse nur einen Hauch schärfer aus und es bleiben mehr Details erhalten, insbesondere bei dünnen Linien. Natürlich ist der Unterschied gering, aber es könnte ausreichen.

Beispiel für die Methode "bikubisch schärfer".

Ziemlich höflich und tolle Art, es zu tun. Danke. Ich werde es jetzt mit ein paar Icons versuchen.

Dinge, die Sie ausprobieren können

  • Verwenden Sie die 64x64-PNG-Version und verkleinern Sie sie in Ihrem CSS-Code
  • Wenn Sie kleinere PNGs erstellen, spielen Sie mit der Einstellung „Art/Type Optimized“ im Dialogfeld „Save for Web“.
  • Wechseln Sie zu SVG-Symbolen, die ein Vektorformat sind und besser angezeigt werden könnten
Ich frage mich, ob der Browser SVG unterstützt. Ich werde dem auf den Grund gehen. SVG ist vielleicht die Lösung oder ich werde eine andere Version erstellen, wie @Cai angegeben hat.
Ja, es ist eine dieser Optionen. Oder machen Sie die Vektorgröße genau so wie die beabsichtigte PNG-Größe. Sehen Sie, was am besten funktioniert. Wenn Sie der Meinung sind, dass dies Ihre Frage beantwortet, klicken Sie auf das Häkchensymbol und den Aufwärtspfeil neben meiner obigen Antwort. Danke!
Illustrator: Unscharf aussehende Symbole beim Exportieren in PNG
AntwortenHierDatenschutz-Bestimmungen1y, 1v