Der Text in meinem Photoshop-Bild sieht "verschwommen" aus.

9

Ich erstelle einen Website-Header in Photoshop CS5, aber wenn ich ihn mir anschaue, sieht der Text sehr verschwommen aus und ich habe keine Ahnung warum.

Ich benutze das Web-Preset. Was empfehlen Sie für die schärfsten und besten Ergebnisse?

Hier ist das aktuelle Modell:

Header

adobe-photoshop website-design cs5 Jeff
quelle
Haben Sie versucht, ein Rasterbild zu vergrößern? Das führt normalerweise zu Unschärfe. Nebenbei
Jari Keinänen
@ Koiyu - Die Ebenen, um die ich mich am meisten Sorgen mache, sind die Textebenen, und ich habe diese nicht gerastert
Jeff
(Oh, ich habe mir die Kurve um "xSky" angesehen.) Photoshop wendet standardmäßig Anti-Aliasing auf den Text an, und die Einstellung entspricht möglicherweise nicht Ihren aktuellen Anforderungen. Es gibt Beispiele in Grafikdesign.stackexchange.com/questions/1177/… (obwohl dies Ihre Frage nicht direkt beantwortet)
Jari Keinänen
Vielen Dank für diesen Beitrag, genau das, was ich brauchte, um mir mit meinem verschwommenen Text zu helfen, tolle klare Hilfe :)

Antworten:

14

Standardmäßig wendet Photoshop ein gewisses Anti-Aliasing auf die Textebenen an. Alex hat in einer anderen Frage einen schönen Vergleich geliefert :

Vergleich

Die Anti-Aliasing-Optionen sind in der Symbolleiste und im CharacterFenster verfügbar :

Anti-Aliasing-Optionen

Hinweis: Wenn Sie planen, die Textebenen als regulären (HTML) Text im Endprodukt zu verwenden, wird der Text von den Browsern höchstwahrscheinlich anders gerendert als in Photoshop. Weitere Informationen hierzu finden Sie in der gleichen Frage "Schriftart (Anti) Aliasing in Photoshop") .

Jari Keinänen
quelle
Also denke ich, es ist das Anti-Aliasing, das es tut? Wie kann ich sonst fett gedruckten Text erzielen? :)
Jeff
Sie können eine fettere Version der Schriftart verwenden (falls verfügbar), die aus der Dropdown-Liste neben der Schriftfamilie ausgewählt werden kann. ODER Sie können den fetten Fettdruck von Photoshop verwenden, der durch Drücken der T- Taste (neben der T- Taste) aktiviert wird. ODER Sie können einen Ebeneneffekt hinzufügen, z. B. einen Strich, um den Text fett erscheinen zu lassen.
Jari Keinänen
2
Ich könnte auch hinzufügen, dass dies ein Grund dafür ist, dass Bilder von Text keine gute Idee sind. Echter Text kann vom Client auf die wünschenswerteste Weise gerendert werden.
Mattdm
4

Stellen Sie sicher, dass die Attribute heightund width(oder CSS) für Ihr imgTag mit der tatsächlichen Größe des Bildes übereinstimmen. Andernfalls wird es vom Webbrowser neu skaliert, und viele Webbrowser tun dies auf hässliche Weise. Sogar diejenigen, die es relativ gut machen, können das Bild etwas verschwommen machen.

Wenn Sie sicherstellen möchten, dass es richtig aussieht, behalten Sie die Pixel 1: 1 bei.

mattdm
quelle
Die Sache ist, in Photoshop selbst sieht es blury aus. Wie mache ich die "Pixel 1: 1"?
Jeff
@Jeff "Pixel 1: 1 halten" entspricht dem Betrachten des Bildes mit 100% Zoom.
Jari Keinänen
@koiyu - Okay, das habe ich aber schon. :)
Jeff
1

Ich würde Text nicht als Bild anzeigen, da dies zu Zugänglichkeits- und Suchmaschinenproblemen führt.

Wenn Sie jedoch einen Text als Bild anzeigen möchten, liefern PNG- oder GIF-Bilder aufgrund der JPEG-Komprimierung bessere Ergebnisse als JPG-Bilder. Selbst wenn Sie Ihr Bild nicht komprimieren, kann ein Browser wie Opera Mobile oder ein Internet-Beschleuniger verwendet werden.

Jeroen
quelle
Verwenden Sie immer PNG, weg von JPEG vor langer Zeit: P
Jeff
1

Ich würde den Text als transparente PNG-Datei für eine bessere Auflösung machen. Eine andere Alternative ist die Verwendung von sIFR sowohl für den Stil als auch für die Suchmaschinenoptimierung . sIFR bettet die Schriftart grundsätzlich als Flash ein, ist jedoch zu 100% suchmaschinenfreundlich. Siehe einige Beispiele unter zB 3d-photomontage.com .

Tony Tan
quelle
1

Ich möchte darauf hinweisen, dass es absolut nicht erforderlich ist, Bildtext in Ihrem Design zu verwenden. Vermeiden Sie die Verwendung von Nicht-Web-Schriftarten für die Textkopie. -Ich weiß, dass sie auf dem Design großartig aussehen, aber Sie bekommen mehr Probleme mit HTML als es wert ist -

Wählen Sie einfach "Keine" aus den Anti-Aliasing-Optionen in PS, wenn Sie nicht möchten, dass Ihr Text unscharf wird. Die HTML-Version rendert Text je nach Betriebssystem oder Browser immer unterschiedlich, sodass Sie nicht wirklich viel tun können.

Schauen Sie sich das auch an, es sollte Ihnen mehr helfen, Probleme beim Rendern von Text in Ihrem HTML als in PS zu lösen

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

Ich entwerfe immer mit der Option "Crisp", die als Antia-Alias ​​ausgewählt wurde, und bin mir der Tatsache bewusst, dass Text in HTML sowieso anders aussehen wird!

Sahbas hat
quelle