综合实训3素材的处理.pptVIP

* 网页设计与制作 综合实训3学校网页的制作 素材处理 学习目标 知识目标 了解网页中各种素材的基本处理方法。 能力目标 具备正确使用Fireworks、Photoshop等图形按需处理加工图片的基本能力。使用SWFText制作文字动画的能力。 素质目标 培养学生创新能力和独立思考能力，并使其具有分析问题、解决问题的能力 使用photoshop按需加工处理素材。 要求记忆的内容 要求理解的内容 图片 处理 将图片的背景设置为透明是为自适应网页背景色。 要求熟练应用的内容 1、网站LOGO的制作。 2、使用photoshop制作导航链接图片 3、使用photoshop制作公告通知及学校动态图片 案例及任务 1、网站LOGO的制作。 2、使用photoshop制作导航链接图片 3、使用photoshop制作公告通知及学校动态图片 案例及任务 操作步骤： 1、启动photoshop，新建一个图像文件，宽为770px，高度为170px，背景颜色为白色，并保存为logo.psd。如图所示。 1 制作LOGO 案例及任务 2、在photoshop中打开素材文件夹中的haijing.jpg文件，将其复制到logo.psd文件中。 如图所示。 案例及任务 3、选择文字工具，输入文本“海南省工业学校”，设置字体为“博洋行书7000”，大小为48。 案例及任务 4、双击文字图层，设置图层样式，分别设置投影、颜色叠加和描边。属性设置如图所示。 案例及任务 5、采用同样的方法及参数，添加英文文字。如图所示。 案例及任务 6、制作logo图标，在工作路径通道，绘制如下图所示“工”字变形图形。如图所示。 案例及任务 7、将路径转成选区，新建图层2，填充蓝色，然后取消选区。如图所示。 案例及任务 9、对图层2设置图层样式，添加投影，效果如下图。 案例及任务 10、设置前景色如左图，新建图层3，将图层3置于图层2下面，添加圆形选区，填充颜色，设置图层样式如右图，参数默认。效果如下图。 案例及任务 11、在工字周围添加如下图所示的文字，设置图层样式如左图，参数默认。完成效果如右图。 案例及任务 12、调整文字、图形的位置，最终效果如左上图，将图像另存为JPG格式备用。 案例及任务 操作步骤： 1、启动photoshop，新建图像文件，参数设置如下图所示。 2 制作导航图片 案例及任务 2、设置前景色为R：247，G：247，B：247，使用圆角矩形工具绘制圆角矩形，添加“投影”图层样式，参数如图所示。 案例及任务 3、设置前景色为R：0，G：153，B：255，输入文字“栏目导航”，字体为“方正综艺简体”，大小为：30。最终效果如下图，另存为“栏目导航.png”备用 案例及任务 4、制作“学校概况”导航效果，打开“栏目导航.psd”,另存为“学校概况.psd”，修改文字内容为“学校概况”，字体为24，文字颜色为白色，设置图层样式，投影颜色为R：0，G：57，B：99，颜色叠加颜色为白色，其他参数如左图，最终效果如右图。 案例及任务 5、打开“fangkuai.gif”，将图像复制到“学校概况.psd”图像的文字左侧。 打开“youjiantou.gif”，将图像复制到“学校概况.psd”图像的文字右侧。 最终效果如下图。 案例及任务 6、打开“学校概况.psd”，另存为“学科建设.psd”，修改文字为“学科建设”，另存为“学科建设.png”备用。 用同样的方法制作“人才培养”、“师资队伍”、“学生工作”，“党群工作”图形备用，效果如下图 案例及任务 操作步骤： 1、启动photoshop，新建图像文件，参数设置如下图所示。 3 制作公告通知图片 案例及任务 2、在图像下方添加长方形，填充渐变颜色，渐变色由R：51，G：153，B：255过渡到白色。 打开e_biaozhi.gif，将图片复制到“公告通知.psd”中，放置在左边 添加文字“公告通行”，字体“方正综艺简体”，字体大小：18点，颜色R：51，G：153，B：255 ，效果如下图。 将图片另存为“公告通知.png”备用。 案例及任务 3、用同样的方法制作“学校动态”图片，新建图片参数如上图，将“biaozhi2.png”复制到该图像中，最终效果如下图，另存为“学校动态.png”备用。 课后练习 自行收集材料，利用所学方法，制作相应图片、文字效果等。 * * * * *