Expression Design: Warum ist mein Bild verschwommen?

Ich versuche, ein Websymbol mit Expression Design zu erstellen.

Es ist 45 x 45 Pixel groß, und ich habe den PPI auf 96 eingestellt und mit Antialias & Transparenz nach .PNG exportiert.

Es sieht nicht scharf aus, wenn ich es auf meiner Seite ansehe, und es sieht ziemlich verschwommen aus, wenn ich es auf meinem Handy ansehe.

Ich habe die Pixelvorschau aktiviert, und wenn ich hineinzoome, kann ich sehen, dass auf geraden Linien eine Reihe von Pixeln zwischen den beiden schattiert ist (anstelle von Pixeln, die entweder ein- oder ausgeschaltet sind), was die Ursache des Problems zu sein scheint

Folgende Optionen habe ich aktiviert:

  • An Pixeln ausrichten
  • An Punkten ausrichten
  • An Hilfslinien ausrichten

Hier ist das exportierte Symbol:

Geben Sie hier die Bildbeschreibung ein

Es ist ziemlich einfach, aber wenn Sie sich die Ränder des Pfund-Symbols ansehen, sind sie verschwommen; umso mehr auf einem mobilen Gerät.

Gibt es noch etwas, das ich tun sollte, um ein scharf aussehendes Symbol zu erhalten?

Abgerundete Ecken ergeben niemals ein pixelgenaues Rendering.
@Dominic Für Retina sollten Sie die Pixelabmessungen verdoppeln, nicht die ppi. Zum Beispiel hat 500 x 400 Pixel bei 72 ppi die gleiche Größe wie 500 x 400 Pixel bei 150 ppi. Für Retina benötigen Sie 1000 x 800 Pixel, da es eine Subpixel-Anzeige hat. PPI wird immer vom tatsächlichen Bildschirm gesteuert. Stellen Sie sich ein HD 42 Zoll im Vergleich zu einem HD 23 Zoll vor - gleiche Pixel, andere reale Größe oder "Pixel pro Zoll". Wenn Sie ganz in die Nähe kommen und die tatsächlichen Anzeigepixel auf dem Bildschirm zählen, erhalten Sie den tatsächlichen PPI-Wert, der offensichtlich je nach Gerät unterschiedlich ist.
@Dominic Ich zeige es in der formatierten Größe an, dh 45px x 45px. Außerdem sieht es oben vielleicht gut aus, aber ich möchte, dass es gestochen scharf aussieht, nicht nur gut :)
@John das ist interessant. Wollen Sie damit sagen, dass ich, um es auf einer Netzhaut scharf anzuzeigen, seine tatsächliche Größe verdoppeln und es dann anzeigen sollte, indem ich es um die Hälfte verkleinere?
Übrigens - ich denke, worüber dieser Typ in diesem Video spricht, ist im Grunde mein Problem ... damit es scharf aussieht, muss ich einige der Anti-Aliasing- Methoden manuell anpassenandcraft.com/videos/pixel-hinting- Vektoren-in-Photoshop
@DavidMasters Das ist richtig. Beachten Sie jedoch, dass die Pixeldichte je nach Gerät unterschiedlich ist. Hier ist eine gute Referenz mit einer Liste einiger Gerätedichten in Bezug auf das Auslösen der Dichtemedienabfrage. Für eine maximale Anzeige sollten Sie theoretisch Ihre Bildgröße mit der Dichtezahl multiplizieren.

Antworten (2)

Rendern Sie Ihre Seite mit genau 45 x 45? Wenn nicht, berechnet der Browser die Pixel neu und dies verursacht die Unschärfe.

Ich habe Expression noch nie selbst verwendet, aber im Allgemeinen tritt beim Verkleinern von Bildern in allen Programmen eine Unschärfe auf, da das Programm die Pixel neu berechnen muss. Wenn Sie die Größe eines Bildes ändern müssen, sollten Sie dies immer um die Hälfte, wenn nicht um ein Viertel tun. Das erleichtert dem Programm die Neuberechnung und liefert schärfere Ergebnisse.

Außerdem ist der PPI-Wert für den Bildschirm nicht wichtig, da er immer die genaue Anzahl von Pixeln pro Bildgröße rendert, unabhängig von der Pixel-pro-Zoll-Dichte (PPI), auf die Sie ihn eingestellt haben.

Ich habe diese Antwort akzeptiert, aber für Ihren Kommentar zur Verdoppelung der Größe. Ich habe es mit ** @media only screen und (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) ** getestet und es funktioniert super.
Leider ignorieren Mobilgeräte häufig Einstellungen und skalieren Bilder neu. Sie tun dies aus verschiedenen Gründen, sodass Ihr Logo wahrscheinlich mit einem schnellen Algorithmus auf dem Gerät gestreckt oder gestaucht wird (anstelle eines qualitätsorientierten Algorithmus). Beachten Sie, dass Elemente mit dem Präfix -webkit nicht allgemein unterstützt werden.

Eine gute Möglichkeit, um sicherzustellen, dass Ihre Symbole auf allen Geräten gut aussehen und zumindest für mich gut funktioniert hat, ist die Verwendung von SVG und Symbolschriften. Sie können icomoon verwenden, um Ihre eigene Symbolschrift zu erstellen und Ihre eigenen SVG-Symbole zu importieren, und sie dann in Ihrem CSS mit @font-face aufrufen. Es gibt unzählige Tutorials dazu im Web und es ist relativ einfach. Hier sind einige Orte, an denen Sie nachsehen können:

http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/

Smashing hat auch einen guten Artikel darüber, warum unsere Symbole oder Bilder aufgrund ihrer Pixel auf anderen Geräten möglicherweise nicht scharf aussehen: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

Expression Design: Warum ist mein Bild verschwommen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v