我的Photoshop图像中的文本看起来“模糊”

9

我在Photoshop CS5中创建一个网站标题，但是当我看到它时，文字看起来非常模糊，我也不知道为什么。

我使用网络预设。您如何推荐最清晰，最好的结果？

这是当前的模型：

adobe-photoshop website-design cs5

— 杰夫
source

您是否尝试放大光栅图像？通常会导致模糊。在一个侧面说明，光栅矢量对比，例如参见：graphicdesign.stackexchange.com/questions/260/...

— 杰瑞Keinänen

@koiyu-我最担心的图层是“文字”图层，而我没有将它们栅格化

— Jeff

（哦，我在看“ xSky”周围的曲线）。默认情况下，Photoshop对文本应用了一些抗锯齿功能，该设置可能不适合您当前的需求。有例子中graphicdesign.stackexchange.com/questions/1177/...（尽管这并不直接回答你的问题）

— 杰瑞Keinänen

谢谢你的这篇文章，正是我需要用模糊的文字来帮助我，真棒的清晰帮助:)

14

默认情况下，Photoshop会对文本图层应用一些抗锯齿功能。亚历克斯在另一个问题上提供了很好的比较：

抗锯齿选项在工具栏和Character窗口中可用：

抗锯齿选项

注意：如果您打算在最终产品中将文本层用作常规（HTML）文本，则浏览器很可能会以与Photoshop不同的方式呈现文本。您可以在提到的“在Photoshop中使用字体（反）锯齿”问题中找到有关此问题的更多信息。

— 贾里·基纳嫩
source

所以我想它正在做的“抗锯齿”？我还能如何获得粗体文字？:)

— Jeff

您可以使用字体的粗体版本（如果有），可以从字体系列旁边的下拉菜单中选择。或者你可以使用Photoshop的仿粗体，这是按启用牛逼按钮（旁边牛逼按钮）。或者，您可以添加一个图层效果（例如笔触），以使文本看起来更大胆。

— JariKeinänen2011年

2

另外，我可能会补充，这是“文字图片”不是一个好主意的原因之一。客户端可以以最理想的方式呈现真实文本。

— mattdm 2011年

4

确保标记的height和width属性（或CSS）img与图片的实际大小匹配。否则，它将被Web浏览器重新缩放，并且许多Web浏览器都以丑陋的方式执行此操作。即使是效果相对较好的产品，也可能会使图像有些模糊。

如果要确保它看起来正确，请保持像素1：1。

— 马特
source

问题是，在Photoshop本身中，它看起来很模糊。我如何做“像素1：1”？

— 杰夫

@Jeff“保持像素1：1”等效于以100％缩放查看图像。

— JariKeinänen2011年

@koiyu-好的，我已经知道了。:)

— Jeff

1

我不会将文本显示为图像，因为这会导致可访问性和搜索引擎问题。

但是，如果您确实希望将文本显示为图像，由于jpeg压缩，png或gif图像会比jpg图像提供更好的结果。即使您不压缩图像，也可能会使用Opera mobile或Internet“加速器”之类的浏览器。

— 耶罗恩
source

始终使用PNG，很久以前就不使用JPEG了：P

— Jeff

1

我会将文本制作为透明的PNG文件，以获得更好的分辨率。另一种选择是将sIFR用于样式和SEO。sIFR基本上将字体嵌入为Flash，但是100％搜索引擎友好。参见3d-photomontage.com上的一些示例。

— 谭咏麟
source

1

我要指出的是，您的设计中绝对不需要使用图像文本。避免对正文使用非Web字体。-我知道它们在设计上看起来很棒，但是HTML带来的麻烦多于其价值-

如果不想使文本模糊，只需从PS中的抗锯齿选项中选择“无”。HTML版本始终会根据操作系统或浏览器来呈现不同的文本，因此您实际上无能为力。

也请看一看，它应该可以帮助您更多地解决HTML而不是PS中的文本呈现问题

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

我在设计时总是选择了“ Crisp”抗锯齿选项，并且意识到HTML中的文本看起来还是会有所不同的事实！

— 萨巴斯·哈斯
source