Wie exportiere ich kleine Symbole in Illustrator nach PNG? [Duplikat]

Ich weiß, diese Frage wurde schon oft gestellt, aber ich kann immer noch keine Lösung finden.

Ich entwerfe Symbole neu, die in einer Webanwendung verwendet werden sollen. Die früheren Symbole wurden auf einem PNG-Sprites-Blatt platziert und die Symbole waren 16x16px groß.

In Illustrator habe ich die Symbole mit der Größe 16 x 16 Pixel neu gestaltet, aber wenn ich sie exportiere, sind sie verschwommen.

Auf meiner PNG-Datei sind sie nach dem Export schon verschwommen.

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Ich weiß nicht, was ich tun soll. Ich habe das Exportmenü für Geräte ausprobiert, alles ... Ich habe sogar versucht, einen Screenshot meiner Illustrator-Zeichenfläche mit 100% zu erstellen, aber dann verlieren Sie die Transparenz.

Ist der Export als SVG eine Option?
Sie scheinen die Symbole vergrößert zu haben. Sie können Rasterbilder nicht vergrößern, da sie sonst unscharf werden.

Antworten (3)

Wenn Sie in ein kleines Pixelformat exportieren, werden sie verschwommen, wenn Sie sie vergrößern. Das ist völlig normal – und keine gute Idee.

Wenn Sie schärfere Linien wünschen, müssen sie sich auf dem Pixelraster befinden. Andernfalls werden die Linien geglättet (= verschwommen). Nicht orthogonale oder runde Linien verlaufen immer über das Pixelgitter, sodass sie nicht so scharf sein können wie vertikale oder horizontale Linien.

Ein Vektorformat wie SVG macht nur einen Unterschied, wenn Ihr Bildschirm hochauflösend ist (wie Retina oder ähnliches). Ich würde empfehlen, die Icons mit Blick auf das Pixelraster größer zu gestalten. Am besten wären Vielfache von 16px (32, 64, 128). Downscaling ist immer einfacher als Upscaling.

Ich würde hier allem außer dem SVG-Kommentar zustimmen. Der Export als SVG (sofern möglich) kann langfristig Vorteile in Bezug auf unvorhergesehene Überarbeitungen bieten. Ich hatte Situationen, in denen wir Symbole auf größere Anzeigegrößen umstellen mussten und – da wir bereits SVGs verwendeten – einfach eine CSS-Bearbeitung vorgenommen haben, anstatt unsere gesamte Symbol-Asset-Bibliothek generieren und ersetzen zu müssen. Es gibt auch andere Vorteile, aber ich denke, einige Leute übersehen diesen.
@biscuitstack Nun, die Frage betraf ein PNG-Spritesheet und wie man die Anzeige optimiert. SVG ist hier also etwas Off-Topic. Das Pixelraster/Antialiasing ist auch ein Problem für SVG, daher müssen für beide Aufräumarbeiten durchgeführt werden ...
Verstanden. Ich habe es angesprochen, als Sie SVG mit der Aussage eingeführt haben, dass es nur einen Unterschied machen wird, wenn Ihr Bildschirm hochauflösend ist, und war vorsichtig, dass zukünftige Google-Suchanfragen hier eintreffen und SVG in dieser Situation als nur für Bildschirme mit hoher DPI relevant abgetan haben. Es ging mehr um die Klarstellung für andere in der Zukunft, aber ich war ein wenig schräg, also entschuldigen Sie.

Ihr erstes Bild der Sprites ist also nicht verschwommen.

Wenn Sie eine unscharfe Ausgabe sehen, liegt dies daran, dass Sie die Bildschirmskalierung (Retina usw.) verwenden und die Bildschirmskalierung die Rasterbilder durch Strecken oder Resampling vergrößert. Ihre Exportkunst ist in Ordnung.

Die eigentliche Frage lautet also: "Wie gehe ich mit der Kunst um, nachdem sie erstellt wurde, um ein schlechtes Ergebnis zu vermeiden?" Die Antwort lautet im Allgemeinen "Vektoren exportieren", aber wenn Sie keine Vektoren verwenden können, müssen Sie mehrere Pixelgrößen exportieren und die Zielsoftware so einstellen, dass sie die am nächsten optimale Größe auswählt.

oder versuchen Sie, der Datei eine hohe Auflösung zu geben, nachdem Sie sie in den Illustrator exportiert haben. Übrigens, welche Version von Illustrator verwenden Sie? Denn in Adobe Illustrator CC können sie automatisch die PNG-Datei exportieren und Sie können entscheiden, welche Auflösung des Bildes Sie verwenden möchten

Die Auflösung spielt in diesem Fall keine Rolle, da OP 16x16px angegeben hat
Wie exportiere ich kleine Symbole in Illustrator nach PNG? [Duplikat]
AntwortenHierDatenschutz-Bestimmungen1y, 0v