第6章 网页中的文字设计.doc

第6章 网页中的文字设计文字是信息的主要载体方式，是网站构成的基础。很多人忽略了文字排版的重要性，实际上占用页面面积最多的就是文字信息。文字信息阅读的舒适程度直接关系到浏览者的心理感受，字体的选择、字号的大小、行与行的距离、段落与段落的安排，都需要谨慎考虑。6.1 文字在网页中的应用进行字体设计时，尽量不要使字体变形，被变形的字体通常是不美观的。排版时要注意：大标题，小内文；粗标题，细内文；色彩与背景有一定差异，保持可见性、易读性。字体大小要始终，保持页面整洁，阅读舒适。全文排版最忌讳不分段，应该有层次。除了大段的文字信息之外，网页中还会出现各种情况的文字信息，如网站标题、导航信息和印在图片里的文字等。同一页面内采用的字体宜在3种以内，以不同的字体区隔标题和标题，但内文与标题可同字体亦可不同。当字体少时，整个文案显得和谐，尤其在一个站点内，字体运用更应讲求整体感。理性类网站，宜采用较冷静理智的方正型字体，如黑体、圆体。感性类网站，不妨用较具变化感的字体。字体与字型均不可太多，但变化要合理，才能明显标示重点并区隔内容，适当表达出信息内容。字体与字型种类太多，会使页面显得杂乱，访问者内心抗拒。另外字体本身的特殊风格也会影响作品的整体效果，文字越大，字体选择就要更加谨慎。6.2常见的文字特效设计6.2.1 彩色玻璃字Photoshop有丰富的图层样式，选择各种不同的图层样式能够轻松快捷地绘制出很多特效。这一节我们来选择几种Photoshop的图层样式绘制彩色玻璃字。大家不妨先想想要做出如图6-2-1所示的效果大致需要用到哪些图层样式呢？图6-2- 1 彩色玻璃字效果图1. 打开Photoshop，按【Ctrl+N】，新建一个宽“580px”，高“120px”的文件，将它命名为“彩色玻璃字”。2. 选择【横排文字工具】，【字符】面板设置如图6-2-2所示。图6-2- 2 【字符】面板设置3. 输入文字“PHOTOSHOP”并居中，如图6-2-3所示。图6-2- 3 输入文字4. 执行【图层】|【图层样式】|【投影】命令，选项设置如图6-2-4所示，然后执行【图层】|【图层样式】|【内发光】命令，选项设置如图6-2-5所示，得到如图6-2-6所示效果。图6-2- 4 【投影】参数设置图6-2- 5 【内发光】参数设置图6-2- 6 添加【投影】和【内发光】后效果5. 再执行【图层】|【图层样式】|【斜面和浮雕】以及【等高线】命令，选项设置如图6-2-7和6-2-8所示，得到如图6-2-9所示效果。图6-2- 7 【斜面和浮雕】参数设置图6-2- 8 【等高线】参数设置图6-2- 9 添加【斜面和浮雕】和【等高线】后效果6. 现在的效果有点偏安，所以执行【图层】|【图层样式】|【颜色叠加】命令，选项设置如图6-2-10所示，最终效果如图6-2-11所示。图6-2- 10 【颜色叠加】参数设置图6-2- 11 最终完成效果图漂亮的果冻色有没有让你的心情顿时变得愉悦呢？你也可以多换几种颜色试试哟！6.2.2 立体条纹字在圣诞节期间，我们经常可以看到有光滑条纹的立体拐杖和糖果等图案出现，这种特效用Photoshop的滤镜就可以轻松完成。图6-2- 12立体条纹字效果图1. 打开Photoshop，按【Ctrl+N】，新建一个宽“100px”，高“100px”的文件，将它命名为“条纹图案”。2. 新建【图层1】，选择【画笔工具】，设置如图6-2-13所示的画笔。图6-2- 13 【画笔】设置3. 设置前景色为“R255，G0，B0”，按住【Shift】的同时绘制如图6-2-14所示的图形。图6-2- 14 在【图层1】上绘制条纹4. 执行【滤镜】|【扭曲】|【挤压】命令，参数设置如图6-2-15所示。图6-2- 15 【挤压】参数设置5. 执行【编辑】|【定义图案】命令，将制作好的图形定义为图案。6. 按【Ctrl+N】，新建一个宽“580px”，高“120px”的文件，将它命名为“立体条纹字”。7. 新建【图层1】，填充深色。8. 选择【横排文字工具】，输入文字“PHOTOSHOP”并居中，如图6-2-16所示。图6-2- 16 输入文字9. 执行【图层】|【图层样式】|【图案叠加】命令，选项设置如图6-2-17所示，得到效果如图6-2-18所示。图6-2- 17 【图案叠加】参数设置图6-2- 18 执行【图案叠加】后效果10. 执行【图层】|【图层样式】|【斜面和浮雕】命令，选项设置如图6-2-19所示，得到效果如图6-2-20所示。图6-2- 19 【斜面和浮雕】参数设置图6-2- 20 执行【斜面和浮雕】后效果11. 执行【图层】|【图层样式】|【投影】命令，如图6-2-21所示设置参数，得到效果如图6-2-22所示。图6-2- 21 【投影】参数设置图6-2- 22 执行【投影】后效果12. 将背景色设置成白色，执行【图像】|【旋转画布】|【任意角度】，在【角度】一栏中输入“45”，得到效果如图6-2-23所示的斜条纹。图6-2- 23 旋转画布后的效果13. 删除【图层1】，合并所有图层，再次执行【图像】|【旋转画布】|【任意角度】命令，这次在【角度】一栏中输入“-45”，最后执行【图像】|【画布大小】，把【宽度】和【高度】改成最初的文件大小，设置如图6-2-24所示，最终的效果如图6-2-25所示。图6-2- 24 设置【画布大小】图6-2- 25 最终完成效果图看到这幅图，是否让你想到了浪漫的圣诞节了呢？读者也可以根据自己的心情和爱好改变颜色，或者做一些形状各异的糖果饼干，相信你也会从制作这种特效的过程中体会到甜甜的感觉。6.2.3 不锈钢字不锈钢也算是金属的一种吧，我们在上一章中教过怎样做金属按钮，大家还记得吗？这里要做的不锈钢字同样是通过丰富的图层样式实现的，我们一起来试一试吧。图6-2- 26 不锈钢字效果图1. 按【Ctrl+N】，新建一个宽“580px”，高“120px”的文件，将它命名为“不锈钢字”。2. 选择【横排文字工具】，回到图像窗口，单击左键输入文字“PHOTOSHOP”并居中，如图6-2-27所示。图6-2- 27 输入文字3. 执行【图层】|【图层样式】|【投影】命令，选项设置如图6-2-28所示，然后执行【图层】|【图层样式】|【外发光】命令，选项设置如图6-2-29所示，得到如图6-2-30所示效果。图6-2- 28 【投影】参数设置图6-2- 29 【外发光】参数设置图6-2- 30 添加【投影】和【外发光】后效果4.执行【图层】|【图层样式】|【斜面和浮雕】以及【等高线】命令，选项设置如图6-2-31和6-2-32所示，再执行【图层】|【图层样式】|【光泽】命令，按照图6-2-33所示设置参数，得到如图6-2-34所示效果。图6-2- 31 【斜面和浮雕】参数设置图6-2- 32 【等高线】参数设置图6-2- 33 【光泽】参数设置图6-2- 34 添加【斜面和浮雕】、【等高线】以及【光泽】后的效果5. 最后执行【图层】|【图层样式】|【颜色叠加】以及【外发光】命令，选项设置如图6-2-35和3-2-36所示，得到如图6-2-30所示效果。图6-2- 35 【颜色叠加】参数设置图6-2- 36 【描边】参数设置图6-2- 37 最终完成效果图怎么样，这个银灰色的不锈钢字做得还算酷吧，如果再运用滤镜加上点拉丝的效果就更棒了，读者可以自己尝试一下哦。6.2.4 凝胶字小时候有没有不小心把胶水滴在地上呢？今天我们用Photoshop模拟出这样的凝胶字效果，在制作时主要应用了Photoshop的图层样式以及亮度和对比度调整。通过练习可以进一步熟悉图层样式的一些基本设置以及其它操作技巧。图6-2- 38 凝胶字效果图1. 按【Ctrl+N】，新建一个宽“580px”，高“120px”的文件，将它命名为“凝胶字”。2. 选择【横排文字工具】，回到图像窗口，单击左键输入文字后将其居中。3. 在【图层】面板中按住【Ctrl】键的同时单击文本图层，载入文本选区，为了使字看上去像水滴一样胖胖的，选择菜单命令【选择】|【修改】|【扩展】，在【扩展选区】对话框中设置【扩展量】为“3”像素，按Enter确定，如图6-2-39所示。图6-2- 39 扩展选区4. 新建【图层1】，用蓝色填充选区，并删除文本图层。5. 执行【图层】|【图层样式】|【混合选项】，将【填充不透明度】改为“50”%，如图6-2-40所示。图6-2- 40 【混合选项】参数设置6. 在【图层样式】面板上设置【投影】参数如图6-2-41所示。图6-2- 41 【投影】参数设置7. 如图6-2-42所示设置【内阴影】参数，得到如图6-2-43所示的效果。图6-2- 42 【内阴影】参数设置图6-2- 43 设置【投影】和【内阴影】后效果8. 如图6-2-44所示设置【斜面和浮雕】参数，得到如图6-2-45所示的效果。图6-2- 44 【斜面和浮雕】参数设置图6-2- 45 添加【斜面和浮雕】后的效果9. 在【图层】面板中将【图层1】的混合模式改为“滤色”，如图6-2-46所示，混合模式改变后效果如图6-2-47所示。图6-2- 46 改混合模式图6-2- 47 混合模式改变后的效果10. 为了更好地看出水滴的效果，新建【图层2】，把一张好看的图片复制过来，再用鼠标把它拖动到【图层1】的下层，如图6-2-48所示。图6-2- 48 在【图层1】下放一张图片11. 回到【图层1】，选择菜单命令【图像】|【调整】|【亮度/对比度】”，按如图6-2-49所示设置亮度和对比度的数值，使字的浅蓝色淡下去，得到最终效果如图6-2-50所示。图6-2- 49 【亮度/对比度】参数设置图6-2- 50 最终完成效果图还可以使用画笔工具直接在【图层1】上绘制，即可得到水滴。用这种方法得到的水滴效果，还可以直接应用到其它地方，方法是拷贝【图层1】的图层样式。不过，根据用途的不同，可能需要对图层样式再稍加调整。6.2.5 像素立体字像素字体的英文名字叫做Pixel Fonts，因为它在作图的时候，非常精细，而且很清晰，所以深受广大美工、网站设计师的喜爱。在这一节的最后一例中我会教大家用最简单的方法做一款像素字。正常字体为了显示光滑，都在边缘进行了一个像素的柔化，但像素字体如果还进行柔化的话会更加模糊。制作像素立体的关键就在于此。图6-2- 51 像素立体字效果图1. 按【Ctrl+N】，新建一个宽“300px”，高“150px”的文件，将它命名为“立体像素字”。2. 选择【横排文字工具】，【字符】面板设置如图6-2-52所示，其中最重要的是右下角的【设置消除锯齿的方法】设置为“无”。图6-2- 52 【字符】面板设置3. 回到图像窗口，单击鼠标进行文本输入，如图6-2-53所示的就是像素字了。读者也可以试一下除了“无”的另外几种选项并和图6-2-53做比较。图6-2- 53 输入像素字4. 为了增加立体的效果，当然要执行【图层】|【图层样式】|【投影】了，参数设置如图6-2-54所示，就得到如图6-2-55所示的效果了。图6-2- 54 【投影】参数设置图6-2- 55 添加【投影】后的效果5. 现在的效果看上去不是很好，再加了投影以后字反而变模糊了，所以把字换成了白色，如图6-2-56的最终效果是不是好很多呢？图6-2- 56 最终完成效果图另外，读者也可以尝试一下用【描边】来替换【投影】，又是不同的效果不同的风格，只要你善于尝试，就有不断的惊喜等着你哦！图6-2