网页设计师必读！巧用PS突出网页文字内容

而今，好多网站热衷于运用高清大图去装饰站点，那么，怎样才能够使网页里的文字在美观的背景当中崭露头角，进而让读者于第一时间辨别出文字，这对于网页设计师而言的确是相当关键的。今日，这期国外PS精品翻译教程便会跟大家分享5种简单有效的办法来提升网页文字的显著度。极其简单实用，适宜小白们去学习。

1.增加对比

如下方图片呈现来表明，鉴于背景跟文字的颜色存在较小的差异，致使图片里的文字处于比较难以看清的情形。在图片所谓的背景当中呢，可以特别指出的是菜单区域的细节是较多的。“Wings”这样的文字差不多是淹没于图片复杂的背景之内了。接下来我们要去做的事情便是强化文字和背景的色彩对比 。

图01

首先，在现存的图层面板之内，去创建一个新的图层，接着将其重新命名为“颜色叠加”，选取颜色选择工具（快捷键为I），就如同下面所呈现的图示状况那般，去拾取左边大叔蓝色衬衣这样的颜色，随后按照Shift+F5的操作方式，在刚才新建的图层当中进行填充。

图02

紧接着，将处于蓝色填充状态的图层的不透明度调整而成百分之五十，而且把这个呈现蓝色的图层拖动至文字图层的下方 。

图03

如下方图示，画面内画的对比度此时已然有着改进，“Wings”这类文字放到画面之中现已变得更为明显显著，如此一来便可看清文字了。

图04

2.添加阴影

举例如下所呈现的情况，鉴于文字处于桥梁的阴影区域之中，并且文字被设置成了黑色，如此一来文字显得极为不显眼，极易使人看不清楚，接下来的首要步骤便是对文字的颜色以及特效予以设置，从而改善视觉方面的效果。

图05

当文字被设置成白色以后，文字便会极其显著地同背景区分开来，这对第一眼辨认文字是有利的。

图06

紧接着要做的便是给文字增添图层样式以及阴影效果图了哟 设置阴影此时 的不透明度是 52%啦 扩展的数值为 16%哈 大小是 100 像素呢 角度为 -144°哦 当设置全部告成之后 在文字的右下方便增添了与之对应的阴影效果哟 。

图07

通过简单地增加阴影效果，就能让文字完全在背景中凸显出来。

图08

3.添加横线

跟着要介绍的是当中一种最为简单的办法去凸显文字内容，借助于在文字的上方以及下方添加上两条白色的横线，便能够极其不错地把背景跟文字隔离开来，原图呈现如下所示 。

图09

继而，于增添两条横线之后，文字内容即刻呈现显著态势。与此同时，横线与文字的间距适度，能够营造优良的设计成效。

图10

一些状况下，局部增添半透明样式的背景用于强化文字呈现效果，算得上是不错的方式。像下图呈现的那样，白色的文字跟背景建筑的部分色彩颇为相近，文字涉及的内容变得并不是特别显著。

图11

以便提升文字的辨识度，选用矩形工具，去增添图形。形状依据设计所需来明确，将图像填充设定成黑色，接着把描边设置成白色、3像素。设置呈现出如下图示的样子。

图12

把图形图层进行移动，使其处于文字图层的下方位置，之后去设置该图层，将其不透明度调整为57%。

图13

下图是最终效果，文字是不是已经被突显出来了呢。

图14

让背景稍微有点模糊变化，这样能够突出显示文字，这就跟拍摄时背景呈现虚化效果是一样的。从下面的图里能够看到，文字又一次融合到背景当中了。

图15

让背景虚化，首要之举便是把背景转变为智能对象，籍此背景的图像质量才不会因模糊化成因而降低 ，于图层面板里面 ，对着图像右键点击 ，选取“转换为智能对象” 。

图16

接着对智能对象予以编辑，于主菜单栏范围之内，作出“滤镜>模糊>高斯模糊”的选择，操作情况宛如如下图所显示的那样，。

图17

设置模糊半径为3.8像素。

图18

这样就能将文字从背景中显现出来，成为画面的焦点。

图19

小结

这期的 PS 翻译教程，到当下这个位置就宣告结束了。尽管此 PS 教程在篇幅程度上显得较为短小简约，然而对于数量众多的网页设计师来讲，具备着很强的实用性。期望大家能够从这一 PS 教程之中掌握到文字方面的设计技巧，并且能够顺利地将其运用到具体的 PS 设计过程中。