Erstellen Sie Vektorsymbole und exportieren Sie sie später als PNG ohne Antialiasing

Ich habe eine Vektordatei (svg) erstellt und wollte sie nun als 66px x 66px, 44px x 44pxund PNG-Datei exportieren 22px x 22px. Es sollte als UIBarButtonItemin der Navigationsleiste verwendet werden. Daher benutze ich Inkscape. Hier ist ein Beispiel:

Symbol mit Anti-Aliasing

Ich habe auf Inkscape 0.91 aktualisiert, um die Anti-Aliasing-Option zu deaktivieren, aber es hat nicht geholfen. Ich habe ein Online-Konverter-Tool ausprobiert, versucht, einfach zu verkleinern, als EPS / PDF exportiert und in GIMP importiert, aber jedes Mal bekomme ich keine scharfen Linien. Antialiasing ist immer dabei. Ich habe über die Verwendung von Tools wie ImageMagick, Ghostwriter gelesen und die Befehlszeilenversion verwendet, aber hier muss ich den Prozess zum Erstellen meiner Symbole in Frage stellen. Es sollte einfach sein und keine Programmierarbeit.

Was ist also der beste Weg, um Vektorbilder zu erstellen und sie als PNG-Bilder ohne Antialiasing zu exportieren?

Können Sie einen Beispielexport posten, der Sie nicht zufriedenstellt?
@Wrzlprmft: Ich habe meine Frage bearbeitet und ein Beispiel bereitgestellt.
Wenn Sie Illustrator verwenden, würde ich Ihnen sagen, dass Sie am Pixelraster ausrichten sollten, wodurch alles pixelgenau und ohne verschwommene Kanten wird. Aber Sie verwenden Inkscape. Um ehrlich zu sein, würde ich für etwas so Einfaches einfach Photoshop verwenden. In dieser Situation sind keine Vektorgrafiken erforderlich.
Haben Sie versucht, das Bild in Inkscape auf die gewünschte Größe (z. B. 22 x 22 Pixel) zu skalieren und es im Verhältnis 1: 1 zu exportieren?
@EddieA.: Ja, ich denke, das wäre eine Option, aber ich habe hier kein PS. Die Verwendung von Vektorgrafiken hat den Vorteil, dass sie auf jede Größe angepasst werden können, wenn sich die Größe später ändert.
@PaoloGibellini: Nein, aber ich werde es das nächste Mal versuchen und euch die Ergebnisse mitteilen.

Antworten (1)

Dieses Problem hat nichts mit der Softwareauswahl oder den darin enthaltenen Einstellungen zu tun, sondern mit grundlegender Mathematik.

Wenn Ihre Ausgabe quadratische Rasterdateien in Vielfachen von 22 sein soll, sollten die Quelldatei (Vektordatei) und die Hauptelemente einfach durch 22 teilbar sein.

Da die horizontalen Linienelemente in Ihrem Design halb so hoch sind wie ihre jeweiligen Punkte und zentriert ausgerichtet sind, erstellen Sie ein Szenario, in dem die kleinstmögliche Höhe 2 Pixel pro Linie beträgt. Das macht Ihre Punkte 4 Pixel und erzeugt eine minimale Dateihöhe von 4 Pixel x 7 (3 Punkte plus oberer und unterer Abstand), was 28 Pixel ergibt.

Ich schlage vor, Sie erstellen ein 22x22-Raster, legen Ihr Design so an, dass keine Linien die Rasterlinien überlappen, und skalieren es dann für die anderen Größen. Es ist komplizierter zu erklären, warum es nicht so funktioniert, wie Sie es getan haben, als einfach wieder mit einem Ausgaberaster der gewünschten Größe zu beginnen - Sie "klicken", wo Sie einen Fehler gemacht haben, und warum Ihre Datei Ihnen nie was geben wird Sie wollen.

Jetzt habe ich versucht, was Sie gesagt haben ( www26.zippyshare.com/v/pGm89LGJ/file.html ). Zuerst dachte ich, es würde funktionieren. Ich habe eine kleine Anpassung vorgenommen und bekomme jetzt nur geglättete Bilder.
@testing Gute Arbeit mit dem SVG! Ich habe eine 22x22-Version exportiert und sie war wunderbar scharf. Stellen Sie sicher, dass Sie im Exportdialog „Seite“ oder „Zeichnung“ ausgewählt haben, um sicherzustellen, dass der gesamte 22x22-Bereich exportiert wird, und dass die Export-Bitmap-Größe ebenfalls 22x22 ist. Sie werden feststellen, dass die Auflösung dann 90 dpi beträgt.
OK. Der einzige Unterschied war also die 90-dpi-Exporteinstellung? Jetzt funktioniert es. Vielen Dank!
Nicht wirklich. Inkscape möchte immer mit 90 dpi exportieren, aber es ist nicht wirklich die Auflösung, die Ihr Antialiasing verursacht hat. Wenn Sie die Ausgabeauflösung auf etwas anderes als 90 dpi ändern, ändern sich die Abmessungen Ihrer exportierten Bitmap. Wenn Sie die dpi auf 72 einstellen, ist die resultierende Bitmap 18x18. Wenn Sie ein 18x18-Raster in Ihrer SVG-Datei visualisieren, sehen Sie, wo und warum Sie eine geglättete Ausgabe erhalten. Verdoppeln Sie die Ausgabeabmessungen auf 44 x 44 und Sie werden sehen, dass sich Ihre dpi auf 180 verdoppelt.
Erstellen Sie Vektorsymbole und exportieren Sie sie später als PNG ohne Antialiasing
AntwortenHierDatenschutz-Bestimmungen1y, 0v