Linien sind verpixelt und von geringer Qualität, wenn sie mit Adobe Illlustrator in .PNG in niedriger Auflösung exportiert werden

Ich versuche, mit Adobe Illustrator 16x16-Symbole im Linienstil zu erstellen, und wenn ich in .PNG exportiere, sind die Linien von extrem niedriger Qualität und verpixelt. Hier sind Beispiele:

Posteingang-Symbol

Dashboard-Symbol

Suche

So sieht es in Illustrator aus:

Screenshot von Adobe Illustrator

Ich versuche herauszufinden, was ich falsch mache. Gibt es etwas, das ich wissen muss? Danke!

Antworten (3)

Ich denke, Sie müssen diese Symbole mit einem Pixelraster entwerfen. Sie müssen das Raster (und die Einheiten) und die Dokumenteinstellungen festlegen. Versuchen Sie, diesem -alten- Artikel zu folgen: http://petshopboxstudio.com/blog/articles/how-to-prepare-illustrator-for-pixel-perfection/

Das habe ich getan, Snap to Pixel ist aktiviert. Dokumenteinstellung ist auf Pixeleinheit.
Versuchen Sie vor dem Export, in VIEW > PIXEL PREVIEW zu gehen, und Sie sollten in der Lage sein, die Vorschau des Pixelexports zu sehen und dann die Formen und Linien vor dem Export zu "korrigieren".
Vielen Dank für den Vorschlag, aber ich bin mir nicht sicher, was ich mit der Pixelvorschau machen soll und wie ich die Ausgabe verbessern kann.
Mmmm, ich habe versucht, zwei 16x16-PNG-Dateien zu exportieren. Das ! Die erste hat eine innere Linie von 1.721 Pixel , die ! Zweite haben 1px innere Linie . Hast du versucht die Spur auf "inner" und 1px zu setzen?
@dmxt Das Bild in Ihrer Frage zeigt, dass der Vorschaumodus nicht aktiviert ist. Wenn Sie die Datei noch haben, können Sie sie auf mindestens 600 % vergrößern und dann einen Screenshot teilen. An diesem Punkt sehen Sie Pixel anstelle der täuschend glatten Kurven. An diesem Punkt sehen Sie die Auswirkungen, wenn Sie alles auswählen und im Transformationswerkzeug "An Pixelraster ausrichten" aktivieren, und Sie können die Linienstärke usw. anpassen.

Ernsthaft :) Wenn es 16x16 ist, benutze einfach das Stiftwerkzeug und zeichne es in Photoshop! Bei dieser Größe entwerfen Sie Pixel.

Selbst Pixel-Snap und Resizing werden dir dabei nicht helfen! Wenn Sie das Logo so klein brauchen, müssen Sie das Design ändern und es sowieso von Hand zeichnen, das sollte nicht so lange dauern :)

Ich bin nicht einverstanden. Es ist sehr schwierig, gutes Anti-Aliasing manuell zu simulieren (dh Linienwinkel durch Schattieren der Farben zu verfälschen/verwischen). Wenn Sie bei aktivierter Pixelvorschau hineinzoomen, können Sie sehen, was generiert wird, und Linienpositionen und -stärken entsprechend anpassen, sodass Illustrator den schwierigen Teil übernimmt.
das ist natürlich generell ein super tipp, aber nicht bei dieser größe! Dies ist eine Größe, bei der Sie Pixel selbst zählen müssen. Sogar das V in seinem Design konnte nicht zentriert werden, weil Sie 8 Pixel zu Ihrer Linken und 8 Pixel zu Ihrer Rechten haben. Wenn Sie meinem Urteil nicht vertrauen, gehen Sie und versuchen Sie es selbst. Ich stimme dir zu 100% zu, obwohl manuelles Antialiasing keinen Spaß macht;)

Eine alternative Technik besteht darin, einfach zu zeichnen, dann in eine anständig hochauflösende Datei zu exportieren, die ein Vielfaches der gewünschten Pixelauflösung (288 oder 576 ppi) ist, und dann die Pixeldatei in PhotoShop mit Bicubic Sharper (Best for Die Ermäßigung).

Dies ist nicht ideal (es ist besser, jedes Mal direkt vom Vektor zu gehen), aber die Verwendung eines Vielfachen der gewünschten Auflösung ist definitiv hilfreich, wenn Sie diesen Ansatz verwenden.