Bild verschwommen beim Export

Ich habe ein SVG-Bild, das ich ausgeschnitten und in PS eingefügt habe. Wenn ich das Bild zur Verwendung auf meiner Website exportiere, wird es verschwommen, egal wie ich es exportiere. Ich weiß, dass es Beiträge gibt, die sich damit befasst haben, und ich habe alles versucht, von der Änderung der Qualität von Bilinearbis zu Bicubicallen Variationen dazwischen. Ich habe versucht PNG 8 - 128 Dithered, PNG 24und so weiter. Ich habe versucht, für das Web (Legacy) zu exportieren und zu speichern, und nichts scheint das Symbol so aussehen zu lassen, wie das Bild, das es ist, wenn es sich in Illustrator befindet. Ich habe sogar versucht, aus Illustrator zu exportieren, und ich erhalte das gleiche Ergebnis. Hier ist, wovon ich spreche:

Gute Dusche

Exportiert für das Web – verschwommen

Antworten (4)

Versuchen Sie dies, importieren Sie das Bild / SVG so groß wie möglich in Photoshop. dh 1000px x 1000px und wenn Sie es exportieren, stellen Sie sicher, dass Ihre DPI bei etwa 300px und der Pixelgröße liegt, die Sie benötigen.

Wenn ich mir Ihr Bild ansehe, werde ich hier auf die Beine gehen und sagen, dass es sich um ein Problem mit der Pixeldichte handelt, da Sie ein Rasterformat verwenden.

Die folgende Methode verwendet eine Adobe Illustrator-Datei, die als Smart-Objekt in Photoshop platziert wird.

  • Speichern Sie zuerst Ihre SVG-Datei als AI-Datei direkt aus Illustrator.
  • Klicken Sie auf die AI-Datei und ziehen Sie sie auf eine leere Photoshop-Seite, um ein Smart-Objekt zu erstellen.
  • Stellen Sie Ihre Zoomstufe in Photoshop auf 100 % ein.

Screenshot Smart Object platzieren und 100 % zoomen

  • Drücken Sie STRG+T (Transformieren). Klicken und ziehen Sie die Eckengriffe des Objekts, um es auf die gewünschte Größe zu skalieren, und halten Sie beim Ziehen die Umschalttaste gedrückt, um die Proportionen einzuschränken.
  • Verwenden Sie nach der Größenänderung das Zuschneidewerkzeug.

Tool zum Zuschneiden von Screenshots

  • Wenn Sie möchten, können Sie beim Zuschneiden eine Größe in Pixeln in den Optionen des Zuschneidewerkzeugs festlegen, bevor Sie das Werkzeug verwenden, um es auf eine bestimmte Größe zu bringen

Optionsleiste des Zuschneidewerkzeugs

  • Speichern Sie Ihr Bild mit Datei > Exportieren > Exportieren als [oder Für Web speichern (Legacy)]

Hier sind die Ergebnisse, egal welche Größe Sie machen, die Pixel werden nicht verschwommen sein:

Testergebnis des Exports Testergebnis von Export2

Heutzutage können Sie SVG für das Web verwenden. Es ist schöner, kleiner, funktioniert auf jeder Größe und ist retinafest. Bitte vergiss png 😉.

Leider akzeptieren die meisten Wordpress-Sites kein SVG für Bilder.
Das Hochladen von SVG ist in WordPress aus guten Gründen nicht erlaubt: Es kann verwendet werden, um Skripte Ihrer Benutzer einzufügen. Dies trifft möglicherweise nicht auf Sie zu. Stellen Sie sicher, dass Sie FTP-Zugriff auf diesen Server erhalten, laden Sie Ihre SVG-Bilder hoch und referenzieren Sie sie im Code.
@Blaine es ist ziemlich einfach, WordPress dazu zu bringen, SVG-Dateien zu akzeptieren (siehe hier zum Beispiel)

Entsprechen die Abmessungen des Bildes in PS oder AI genau den Abmessungen, die Sie für das endgültige Bild im Web haben möchten? Das zu ändern könnte helfen.

Außerdem sind Sie nicht genau darüber informiert, wie Sie dies im Web verwenden. Ich hatte das gleiche Problem mit einem Bild, das ich in eine HTML-E-Mail-Signatur einfügen wollte. Anscheinend führen einige E-Mail-Programme (MS Outlook, ich sehe Sie hier) einen Größenänderungsbefehl für Bilder aus, selbst wenn sie die richtige Größe haben, und das Ergebnis ist ein verschwommenes Bild, wie Sie es zeigen. Leider konnte ich dieses spezielle Problem nie lösen – am Ende haben wir Bilder vollständig aus unseren E-Mail-Signaturen entfernt.

Ich habe versucht, genau die gleiche Bildgröße zu verwenden. Ich verwende dies in einer Wordpress-Website. Nichts scheint zu funktionieren
Sie haben fast die Grenze meines Webgrafik-Wissens erreicht, also wird das wahrscheinlich keinen Unterschied machen, aber ich werde es trotzdem rauswerfen. Sie sagten, Sie hätten das Bild ausgeschnitten und in Photoshop eingefügt. Haben Sie versucht, mit dem Trace-Befehl von Illustrator eine Vektorversion des Bildes zu erstellen und diese dann zu exportieren? Vielleicht könnte etwas über das Einfügen eines Rasterbildes in Photoshop die Dinge durcheinander bringen. Und das Bild ist so einfach, dass Image Trace ziemlich gute Arbeit damit leisten sollte.
Werde das versuchen, aber ich habe versucht, das Bild aus Illustrator selbst zu exportieren, und das Bild wird verschwommen. Es ist sehr seltsam, und ich weiß nicht, was es verursacht. Es ist sehr frustrierend.
Bild verschwommen beim Export
AntwortenHierDatenschutz-Bestimmungen1y, 0v