Was passiert mit diesem Symbol?

Ich habe ein Symbol für eine Webseite mit Linien von 2 Pixel und Abmessungen von 42 x 42 (Pixel) erstellt, aber wenn ich es in eine Webseite einfüge, sind die Linien verschwommen, siehe BildGeben Sie hier die Bildbeschreibung ein

Als nächstes ist das Symbol, das ich mit den richtigen Linien entwickleGeben Sie hier die Bildbeschreibung ein

Wie kann ich die Linien so gestalten, dass sie nicht verschwommen sind?

Wie @Naty erwähnt hat, ist das rote Muster in Ihrem obigen Beispiel 42 x 42 und hat scharfe Linien. Das Weiß-auf-Schwarz-Beispielbild ist jedoch nur 35 x 35 groß. Wenn Ihr Bild im Browser nicht in seiner ursprünglichen Größe angezeigt wird, werden Sie sehr wahrscheinlich als Ergebnis etwas verwischen. Sie müssen Ihr Symbol so gestalten, dass es pixelgenau in der Größe ist, in der es angezeigt werden soll.

Antworten (2)

Ihr Problem ist, dass Sie kein pixe perfectSymbol entwerfen und es nicht in der genauen Größe hochladen.
Die einfache Lösung besteht darin, einfach ein SVG hochzuladen, und dafür gibt es zwei Möglichkeiten:

  1. Hochladen und .svg-Symbol
  2. Konvertieren des Symbols in eine Schriftart, was im Grunde dasselbe ist wie das Hochladen einer SVG-Datei auf die Website. (Sie laden tatsächlich ein SVG in die Symbolschriftarten hoch)

Der einzige wirkliche Grund, vom Hochladen einer SVG-Datei zu Symbolschriften überzugehen, ist, wenn Sie eine Reihe von Symbolen haben, die immer wieder in verschiedenen Teilen der Website hochgeladen werden

Danke für die Hilfe, jetzt werde ich sehen, wie ich ein pixelgenaues Symbol mache
@OsmanyRodríguez das könnte helfen: photoshoptutorials.ws/photoshop-tutorials/layouts/…
danke für die Hilfe, ich konnte schon alle Icons fixen

Versuchen Sie, Ihr Symbol in eine Schriftart umzuwandeln, die das Problem der Unschärfe beheben sollte.

Überprüfen Sie diesen Link:

http://www.webdesignerdepot.com/2013/04/how-to-turn-your-icons-in-a-web-font/

Dann können Sie die Größe mit CSS ändern.

Hoffe, es funktioniert.

Vielen Dank für Ihre Antwort, das werde ich auch tun, aber das Problem ist, dass ich das Bild in ein bereits erstelltes Thema einbette, also ist es leider ein PNG, was ich verwenden muss :( Vielleicht können Sie eine Lösung für das verschwommen finden Linien auf dem PNG?Vielen Dank für Ihre Zeit.
Schriftarten werden ebenfalls geglättet, sodass das Problem dadurch nicht unbedingt behoben wird.