Photoshop 中的字体(反)锯齿

平面设计 adobe-photoshop 字体 文本 抗锯齿
2021-12-27 12:18:03

我正在使用 Photoshop 设计网站,每当我将 Photoshop 设计与实时浏览器预览进行比较时,字体的呈现方式似乎有所不同。

宋体

基本上我在photoshop中选择的任何抗锯齿方法,文字总是给人以粗体字的印象。所以我总是被迫关闭抗锯齿(对于普通的 12px/14px 文本)。

有没有一种方法可以在 Photoshop 中实现与 Windows 使用 cleartype 相同的字体渲染?

如果没有,是否有任何字体在关闭抗锯齿时看起来比 Arial 更好?

4个回答

ClearType 文本如此清晰有两个原因。

  1. 它使用亚像素渲染我不认为 Photoshop 支持。
  2. 它使用积极的暗示将线条融入像素网格

您可以在记事本中输入您的文本,使用一些方便的工具对其进行截图,然后使用混合模式 Multiply 将其粘贴到 Photoshop 中(因为它是白色背景上的黑色文本)。但这不方便。编辑:除了黑色之外,几乎不可能使用任何前景色。

这家伙描述了一种手动子像素渲染的方法,在我看来,它确实提高了字体清晰度,使其更接近 ClearType。但它仍然使用 Photoshop 的提示,所以它不如 ClearType 清晰。

你真的需要在 Photoshop 中进行 ClearType 风格的渲染吗?如果您导出任何包含文本的图形以用于您的网页设计,它们不应包含亚像素渲染,因为它不适合某些显示器(CRT、旋转手机)。如果您不导出文本而只是查看它,那么 Photoshop 的渲染似乎还可以。

Photoshop 不是网页设计程序。要获得在浏览器中与图形(jpg、gif 等)中看起来相同的文本,您必须在两个程序中使用相同的字体。并非所有浏览器都使用某些字体。

根据文本的大小,一个好的中型字体可以是 Tahoma、Helvetica、Trebuchet 或 Georgia。查看此网站以获得一些好主意: http ://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

较大的字体是抗锯齿开始变得重要的地方。

如果您试图让文本与页面上的文本合并,我建议使用 CSS 定位来实现您的目标。CSS 允许您将网页中的文本置于图像之上,并使用相对和绝对定位来完全按照您的需要呈现页面。这是一个示例和教程: http ://css-tricks.com/text-blocks-over-image/

不幸的是,Photoshop 不支持任何类型的亚像素渲染。除了Dreamweaver之外,任何其他 Adob​​e 软件也没有。(嗯,这不完全是 Dreamweaver 的技术,因为它只是呈现 HTML,然后将文本传递给要呈现的操作系统。)

建议的工作流程可能是您在 Photoshop 中创建和分割您的设计,然后在 Dreamweaver 中打开它。如果设计需要进一步修正,您可以在 Photoshop 中同时打开文件,在 Dreamweaver 中进行更改、保存和刷新视图。在 Dreamweaver 中添加最终的真实副本。你也可以用 Fireworks 代替 Photoshop;甚至在 Fireworks 中开始线框图 → 在 Photoshop 中继续 → 通过 Dreamweaver 发布。(很清楚为什么 Creative Suite 版本通常是捆绑购买的,不是吗?)

如果设计在 Dreamweaver 的预览中与在浏览器中看起来不同,那是另一回事,不幸的是(我说的不仅仅是排版,而是整体呈现)。越早从 Photoshop 升级为现场演示(无论是否通过 Dreamweaver)越好。我真希望 Photoshop亚像素渲染能力(但同时希望它不会在 CS6 中引入,或者至少希望到那时我会变得富有)!

附带说明:ClearType 受 10 项左右的专利保护,因此不可能出现完全相同的渲染。另外值得注意的是,OS X 默认使用不同的渲染(Quartz),Linux 发行版中的图形界面也是如此。

使用 HTML 和 CSS 进行设计。如果您必须将其重新放入 PhotoShop 模型中,请将其从浏览器中截屏,然后将其重新放入您的 PhotoShop 文档中。

一般来说,在 PhotoShop 中设置类型很痛苦。