处理文字时让背景和字体更加鲜明_ps新手教程

as595626169 发表于 2015-4-25 13:20:24

处理文字时让背景和字体更加鲜明

现在不少网站都喜欢用高清大图来装饰网站，而如何让网页中的文字在漂亮的背景中脱颖而出，让读者第一时间识别到文字，对于网页设计师来说可是相当关键。今天，这期的国外PS精品翻译教程就跟大家分享5种简单有效的方法提升网页文字的显著度。非常简单实用，适合小白们学习。1.增加对比如下面的图片所示，由于背景与文字的颜色相差较小，导致图片中的文字比较难看清楚。图片的背景中，特别是菜单区域的细节较多。“Buffalo Wings”的文字几乎淹没在图片复杂的背景中。下一步我们要做的就是加强文字与背景的色彩对比。
http://pic.16xx8.com/allimg/150422/1309335445-0.jpg
图01首先在Photoshop的图层面板中新建图层，并重新命名为“颜色叠加”。选择颜色选择工具(快捷键I)，如下图所示，捡取左边大叔的蓝色衬衣的颜色，然后按Shift+F5填充在新建图层中。
http://pic.16xx8.com/allimg/150422/13093363L-1.jpg
图02接着，调整蓝色填充图层的不透明度为50%，并且拉这个蓝色图层到文字图层的下方。
http://pic.16xx8.com/allimg/150422/1309334391-2.jpg
图03如下图所示，面画的对比度已经有了改善。“Buffalo Wings”等文字在画面中已经显得更加显眼和明显了，这样就能看清楚文字啦。
http://pic.16xx8.com/allimg/150422/1309336463-3.jpg
图04提示：教程详细步骤在二楼！想下载该教程的可以到这里下载:点击进入下载页教程编号:137292 作者：么么茶出处：太平洋电脑网

as595626169 发表于 2015-4-25 13:20:24

2.添加阴影如下面的例子所示。由于文字位于桥梁的阴影部分，文字同时又设置为黑色，这样文字显得非常不显眼，容易让人看不清楚。下面第一步就是设置文字的颜色与特效，改善视觉效果。
http://pic.16xx8.com/allimg/150422/13093321I-4.jpg
图05当文字设置为白色之后，文字就会非常明显地与背景区别开来，有利于第一眼识别文字。
http://pic.16xx8.com/allimg/150422/130933O43-5.jpg
图06接着就是为文字添加图层样式和阴影效果啦。设置阴影的不透明度为52%、扩展为16%、大小为100像素、角度为-144°。设置完成后，文字的右下方就增加了相应的阴影效果。
http://pic.16xx8.com/allimg/150422/1309331X8-6.jpg
图07通过简单地增加阴影效果，就能让文字完全在背景中凸显出来。
http://pic.16xx8.com/allimg/150422/1309335092-7.jpg
图08

as595626169 发表于 2015-4-25 13:20:24

3.添加横线下面介绍的是其中一种最简单的方式来凸显文字内容。通过在文字上下方添加两条白色横线，可以将背景和文字很好地隔离开来。原图如下所示。
http://pic.16xx8.com/allimg/150422/1309335448-8.jpg
图09那么在增加两条横线之后，文字内容马上变得很明显。同时，横线和文字的间距适当可以营造良好的设计效果。
http://pic.16xx8.com/allimg/150422/130933Cc-9.jpg
图104.添加局部半透明背景在某些条件下，局部增加半透明的背景来增强文字效果，也是不错的方法。如下图所示，白色文字与背景建筑部分颜色比较相似，文字内容变得不是很明显。
http://pic.16xx8.com/allimg/150422/13093345Q-10.jpg
图11为了增加文字的识别度，选择矩形工具，添加图形。形状由设计需要确定，设置图像填充为黑色，然后设置描边为白色、3像素。设置如下图所示。
http://pic.16xx8.com/allimg/150422/1309333J1-11.jpg
图12将图形图层移动到文字图层下方，然后设置图层不透明度为57%。
http://pic.16xx8.com/allimg/150422/130933L22-12.jpg
图13下图是最终效果，文字是不是已经被突显出来了呢。
http://pic.16xx8.com/allimg/150422/1309335049-13.jpg
图14

as595626169 发表于 2015-4-25 13:20:24