第6章 网页中的文字设计

《第6章 网页中的文字设计》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章网页中的文字设计文字是信息的主要载体方式，是网站构成的基础。很多人忽略了文字排版的重要性，实际上占用页面面积最多的就是文字信息。文字信息阅读的舒适程度直接关系到浏览者的心理感受，字体的选择、字号的大小、行与行的距离、段落与段落的安排，都需要谨慎考虑。6.1文字在网页中的应用进行字体设计时，尽量不要使字体变形，被变形的字体通常是不美观的。排版时要注意：大标题，小内文；粗标题，细内文；色彩与背景有一定差异，保持可见性、易读性。字体大小要始终，保持页面整洁，阅读舒适。全文排版最忌讳不分段，应该有层次。除了大段的文字信息之外，网页中还会出现各种情况的文字信息，如网站标

2、题、导航信息和印在图片里的文字等。同一页面内采用的字体宜在3种以内，以不同的字体区隔标题和标题，但内文与标题可同字体亦可不同。当字体少时，整个文案显得和谐，尤其在一个站点内，字体运用更应讲求整体感。理性类网站，宜采用较冷静理智的方正型字体，如黑体、圆体。感性类网站，不妨用较具变化感的字体。字体与字型均不可太多，但变化要合理，才能明显标示重点并区隔内容，适当表达出信息内容。字体与字型种类太多，会使页面显得杂乱，访问者内心抗拒。另外字体本身的特殊风格也会影响作品的整体效果，文字越大，字体选择就要更加谨慎。6.2常见的文字特效设计6.2.1彩色玻璃字Photoshop有丰

3、富的图层样式，选择各种不同的图层样式能够轻松快捷地绘制出很多特效。这一节我们来选择几种Photoshop的图层样式绘制彩色玻璃字。大家不妨先想想要做出如图6-2-1所示的效果大致需要用到哪些图层样式呢？图6-2-1彩色玻璃字效果图1.打开Photoshop，按【Ctrl+N】，新建一个宽“580px”，高“120px”的文件，将它命名为“彩色玻璃字”。-146-2.选择【横排文字工具】，【字符】面板设置如图6-2-2所示。图6-2-2【字符】面板设置3.输入文字“PHOTOSHOP”并居中，如图6-2-3所示。图6-2-3输入文字4.执行【图层】

4、【图层样式】

5、【投

6、影】命令，选项设置如图6-2-4所示，然后执行【图层】

7、【图层样式】

8、【内发光】命令，选项设置如图6-2-5所示，得到如图6-2-6所示效果。-146-图6-2-4【投影】参数设置图6-2-5【内发光】参数设置-146-图6-2-6添加【投影】和【内发光】后效果5.再执行【图层】

9、【图层样式】

10、【斜面和浮雕】以及【等高线】命令，选项设置如图6-2-7和6-2-8所示，得到如图6-2-9所示效果。图6-2-7【斜面和浮雕】参数设置-146-图6-2-8【等高线】参数设置图6-2-9添加【斜面和浮雕】和【等高线】后效果6.现在的效果有点偏安，所以执行【图层】

11、【图层样式

12、】

13、【颜色叠加】命令，选项设置如图6-2-10所示，最终效果如图6-2-11所示。-146-图6-2-10【颜色叠加】参数设置图6-2-11最终完成效果图漂亮的果冻色有没有让你的心情顿时变得愉悦呢？你也可以多换几种颜色试试哟！6.2.2立体条纹字在圣诞节期间，我们经常可以看到有光滑条纹的立体拐杖和糖果等图案出现，这种特效用Photoshop的滤镜就可以轻松完成。图6-2-12立体条纹字效果图-146-1.打开Photoshop，按【Ctrl+N】，新建一个宽“100px”，高“100px”的文件，将它命名为“条纹图案”。2.新建【图层1】，选择【画笔工具】，设置如图

14、6-2-13所示的画笔。图6-2-13【画笔】设置3.设置前景色为“R255，G0，B0”，按住【Shift】的同时绘制如图6-2-14所示的图形。图6-2-14在【图层1】上绘制条纹4.执行【滤镜】

15、【扭曲】

16、【挤压】命令，参数设置如图6-2-15所示。-146-图6-2-15【挤压】参数设置5.执行【编辑】

17、【定义图案】命令，将制作好的图形定义为图案。6.按【Ctrl+N】，新建一个宽“580px”，高“120px”的文件，将它命名为“立体条纹字”。7.新建【图层1】，填充深色。8.选择【横排文字工具】，输入文字“PHOTOSHOP”并居中，如图6-2-16所示

18、。图6-2-16输入文字9.执行【图层】

19、【>图层样式】

20、【图案叠加】命令，选项设置如图6-2-17所示，得到效果如图6-2-18所示。-146-图6-2-17【图案叠加】参数设置图6-2-18执行【图案叠加】后效果10.执行【图层】

21、【图层样式】

22、【斜面和浮雕】命令，选项设置如图6-2-19所示，得到效果如图6-2-20所示。-146-图6-2-19【斜面和浮雕】参数设置图6-2-20执行【斜面和浮雕】后效果11.执行【图层】

23、【图层样式】

24、【投影】命令，如图6-2-21所示设置参数，得到效果如图6-2-22所示。-146-图6-2-21【投影】参数设置图6-