网页设计基础教程与上机指导应用Photoshop CS设计网页素材.pptx

教学提示和教学目标教学提示：本章主要介绍如何使用Photoshop设计网页图像素材实例，如制作精美文字、按钮和一些特殊效果等，最后一节还介绍了一个比较复杂的综合性例子。通过本章的学习，用户可对利用Photoshop提供的各种工具来创建自己需要的效果有一定程度的了解，能够体会出各种工具配合使用时可以产生许多奇妙的效果。教学目标：掌握如何使用切片工具切割图像掌握设计网页按钮掌握网页Banner的设计掌握网页Logo的设计第1页/共9页16.1 创建网页图像文字在Photoshop中，用户可以对文字进行更多的控制，如可以实现在输入文本时自动换行，可以将文本转换为路径使用等。16.1.1 创建文字16.1.2 设置文本属性第2页/共9页16.1.1 创建文字在Photoshop中文字分为两种，分别是【横排文字】和【直排文字】。创建文字的具体操作步骤如下。(1)选择【文件】|【打开】命令，弹出【打开】对话框。(2)在对话框中选择图像，单击【打开】按钮，打开图像文件。(3)使用工具箱中的【横排文字】工具，在文档中单击，输入文字，如图16.3所示。(4)使用工具箱中的【直排文字】工具，在文档中单击，输入文字，如图16.4所示。第3页/共9页16.1.2 设置文本属性在图像上输入文字，对文字的字体或者颜色不满意的时候，可以在选项栏中或【字符】调板中修改文本属性，如图16.5所示。1.设置字体2.设置字体的大小3.文字消除锯齿4.设置文字的颜色第4页/共9页16.2 文 字 变 形文字编辑工具可以对文字进行各种变形，在文字选项栏中单击按钮，弹出【变形文字】对话框，如图16.11所示。如图16.12和图16.13所示分别是对文字添加扇形效果和鱼形效果。第5页/共9页16.3 使用切片工具切割图像当网页较大时，可以使用工具箱中的【切片】工具将图像裁切成很多块，每一块图像都可以按照不同的设置进行优化压缩，并且每一块都可以链接到不同的URL地址，存储后就是HTML文件，但在网页中还是一副完整的图像，这样网页的显示速度就快多了。第6页/共9页16.4 设计网页按钮在浏览网页的时候经常看到各种各样的网页按钮，有些按钮制作得非常引人入胜。第7页/共9页16.5 设计网页Banner网页Banner也叫网页广告，重在传达一定的形象与信息。网站广告设计跟传统设计有着很多的相通性，但由于网络本身的限制以及浏览习惯的不同，还带有许多不同的特点。如网站广告一般要求简单醒目，在少量的方寸之地，除了表达出一定的形象与信息外，还得兼顾美观与协调。第8页/共9页感谢您的观看！第9页/共9页