第5章 网页图像编辑.docVIP

第5章 网页图像编辑 5.1 “网页图像编辑”栏目设计 5.2图像编辑工具与图像编辑基础 5.3 Fireworks基本操作 5.4矢量图形编辑 5.5位图图像编辑 5.6 “作品欣赏”页面制作 5.7 “网页图像编辑”栏目首页制作 实训：图像编辑与个人网站制作 实训任务5-1：图片大小编辑 实训任务5-2：渐变填充背景图片制作 实训任务5-3：背景图片tp4j-2-1.jpg的制作 实训任务5-4：网站首页背景图片制作 实训任务5-5：位图蒙版Banner背景图片制作 实训任务5-6：逐帧Gif动画制作 实训任务5-7： “作品欣赏”网页制作 实训任务5-8：个人Logo制作 实训任务5-9：栏目首页Banner制作 实训任务5-10：网站首页导航按钮制作 实训任务5-11：“个人网站”栏目首页制作 5.1 “网页图像编辑”栏目设计 /wzzz /flash/web 5.2图像编辑工具与图像编辑基础 5.2.1 图像编辑工具 1. Photoshop 2. Fireworks 5.2.2 网页中常用的图像格式 1.GIF格式 2.JPEG 格式 3.PNG 格式 5.2.3 矢量和位图图形 1．矢量图形 2．位图图形 3．编辑矢量图形和位图图形 5.3 Fireworks基本操作5.4矢量图形编辑 5.4.2 矢量工具 1．直线工具 2．几何图形工具 3．矢量路径工具 5.4.3 矢量图形编辑 1．使用“选择”工具 2．修改路径工具 3．“刀子”工具 4. 路径运算 5.4.4 文本工具 5.4.5矢量图形填充效果 5.4.6 矢量图形滤镜效果 5.5位图图像编辑 5.5.1 位图工具 1．“位图”工具箱 2．位图绘图工具 3．“橡皮擦”工具 4．位图区域选择工具 5．位图修饰工具 5.5.2 位图滤镜效果 1. 调整颜色滤镜 2．模糊滤镜 5.5.3 图像蒙板效果 1．矢量蒙板 2．位图蒙板 3．使用位图蒙版制作网站标题 5.6 “作品欣赏”prac5-1.html页面制作 本页面中包括7个作品: 标题栏Gif逐帧动画：Prac5-1.gif 矢量图形编辑：Prac5-2.jpg 位图图像编辑：Prac5-3.jpg 位图蒙版：Prac5-4.jpg 透明度变化Gif选择动画：Prac5-5.gif 位置变化Gif选择动画：Prac5-6.gif 分散到帧Gif动画：Prac5-7.gif 5.6.1 矢量图形编辑图片Prac5-2.jpg制作 1．“花”字图形制作 （1）新建文档，画布大小320*240px。（2）书写“花”字，大小60px，隶书,“转换为路径”。 （3）使用“更改区域形状”工具对“花”字图形进行拖拽，修改图形形状。 （4）“图案”填充，使用images\tp4-4.jpg。 （5）调整填充位置，保存文档：prac5-2.png。 2．花球图形制作 （1）新建图层，绘制一个100*100px的正圆（2）“图案”填充，使用images\tp4-3.jpg。调整填充位置（3）再绘制一个100*100px的正圆，“渐变”|“放射状”黑白填充，调整填充效果。（4）将两个正圆对齐，“混合模式”选择“强光”， “不透明度”选择80%。 （5）绘制黑色填充椭圆，“边缘”：“羽化”，“羽化总量”：10，“不透明度”：80%。 （6）保存文档。 3．贴图笔筒图形制作 （1）打开贴图图片images\tp5-1.jpg。 （2）新建图层，绘制矩形（无笔触色，填充实心黑色）80*130px,绘制（无笔触色，填充实心黑色）绘制两个80*30px椭圆形（3）将3个图形组合成圆柱体。调整圆柱体与贴图图片的相对位置。 （4）制作矢量蒙版图像。 （5）绘制无笔触色、黑白渐变填充、80*30px的椭圆置于圆柱顶部。 再绘制一个无笔触色、黑白渐变填充、60*15px的椭圆放置在前一个椭圆上面，使其中心重叠。调整填充方向与前一个椭圆的填充方向相反，形成立体管形效果。 （7）“符合画布”，将图形组合在一起，完成贴图笔筒制作。 （8）复制贴图笔筒图形。选择Prac5-2.png文档，粘贴图形，调整图形位置。（9）导出图片Prac5-2.jpg。 5.6.2位图图像编辑图片Prac5-3.jpg制作 （1）打开图片images\tp5-3.jpg，修改图像大小为320*240px。 （2）使用“橡皮图章”工具将人物图像复制到指定位置。 （3）导出图片Prac5-3.jpg。 5.6.3位图蒙版图片Prac5-4.jpg制作 （1）打开图片images\tp5-4.jpg，修改图像大小为320*240px。 （2）新建图层，绘制320*240px、填充颜