第5章网页图像编辑

第5章网页图像编辑目录：5.1“网页图像编辑”栏目设计5.2图像编辑工具与图像编辑基础5.3Fireworks基本操作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“网页图像编辑”栏目设计://图像编辑工具与图像编辑基础5.2.1图像编辑工具1.Photoshop2.Fireworks5.2.2网页中常用的图像格式1.GIF格式2.JPEG格式3.PNG格式5.2.3矢量和位图图形1．矢量图形2．位图图形3．编辑矢量图形和位图图形5.3Fireworks基本操作5.3.1Fireworks的工作窗口1．菜单栏2．工具箱3．画布4．预览视图5．“属性”面板6．面板组7．播放按钮8．画布尺寸9．缩放比例10．快速导出：5.3.2Fireworks文档操作1．新建文档2．文档属性面板3．保存文档4．打开和导入文档5．预览图像5.3.3图像的优化与导出1．图像优化2．导出图像5.3.4图像大小编辑1．修改图像大小2．图像预览5.3.5图层操作5.4矢量图形编辑5.4.1颜色工具箱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.gif5.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、填充颜色为#BD9CFF的矩形覆盖住图片。添加“蒙版”。（3）使用“黑色”刷子在蒙版中部涂抹，擦出人物图像；调整“不透明度”为33%，涂抹蒙版其余部分，擦出半透明效果。（4）导出图片Prac5-4.jpg。5.6.4Gif动画1．帧面板2．GIF动画的优化与导出3．Gif动画种类（1）逐帧动画（2）选择动画（3）分散到帧动画（4）带背景的动画5.6.5标题栏Gif逐帧动画Prac5-1.gif制作（1）新建文档，画布大小990*80px，画布颜色设置为#BD9CFF。（2）书写文字“欢迎欣赏丫丫作品”，隶书，60px，#006699颜色。绘制眼睛图形。（3）复制当前帧。（4）选择第2帧，将文字修改为“期待您的批评指导”，白色。调整眼珠的位置。（5）选中所有帧，调整帧延时为100/100s，预览动画效果。（5）设置“导出文件格式”为“Gif动画”，导出动画：Prac5-1.gif。5.6.6透明度变化Gif选择动画Prac5-5.gif制作（1）打开图片images\tp5-5.jpg，修改图像大小为320*240px。（2）设置“选择动画”，不透明度从100%变化到30%（3）选中最后一帧，添加第31帧。（4）选中第31帧，打开图片images\tp5-5.jpg，修改图像大小为320*240px；（5）设置“选择动画”，不透明度从30%变化到100%。（6）预览动画效果，调整帧延时。（7）导出动画：Prac5-5.gif。5.6.7位置变化Gif选择动画Prac5-6.gif制作（1）打开图片images\tp5-6.jpg，使用“裁剪”工具裁剪下飞机图形（3）擦除背景，制作飞机图形并调整出一个仰角。复制飞机图形。（4）打开图片images\tp5-6.jpg，修改图像大小为320*240px。“共享此层”。（5）新建图层，粘贴飞机图片。（6）设置“选择动画”，缩放到：50；不透明度从100%变化到30%（7）调整动画路径，预览动画效果，调整帧延时。（8）导出动画Prac5-6.gif。5.6.8分散到帧Gif动画Prac5-7.gif制作（1）打开图片images\tp5-7.jpg，修改图像大小为320*240px。（2）调整图片亮度使其呈现出夜景效果。“共享此层”。（3）新建图层，绘制白色“月亮”，添加“发光”滤镜效果。（4）复制、粘贴，移动“月亮”，形成排列到山头的轨迹。（5）选中所有的“月亮”图形，“分散到帧”，调整帧延时。（6）新建一帧，导入图片tp5-7.jpg，调整图片亮度更暗。（7）设置“循环方式”为“无循环”。（8）在“优化”面板中设置“导出文件格式”为“Gif动画”，导出动画Prac5-7.gif。5.6.9“作品欣赏”网页Prac5-1.html制作（1）在Dreamweaver中新建html文档，另存为Prac5-1.html。（2）插入一个3行1列表格，表格宽度为990px，border=0，居中对齐。（3）在第1行插入页面标题gif动画images\Prac5-1.gif。（4）在第2行插入一个2行3列表格，表格宽度为990px，border=2，cellpadding=2，cellspacing=2，bordercolor=#BD9CFF。（5）在相应单元格内插入对应作品文件。（6）在最下面一行中插入“返回”超链接(居中对齐)，链接到prac5.html。5.7“网页图像编辑”栏目首页制作5.7.1Logo制作1.新建文档，画布大小200*200px。绘制200*200px白色矩形，“放射状”填充，颜色#A66650和白色，纹理“木纹”，纹理总量80%。2.新建图层，书写字母“Y”，字体ArialBlack，大小80px。“转换为路径”。填充类别“线性”，颜色#003300和#00FF00，调整填充方向。添加“阴影和光晕”,“纯色投影”，距离8px，颜色#003300。3．新建图层，绘制100*100px正圆，水平切除“Y”图形下面的弧线。4.输入文字“Chinasunxiaoya”，字体ArialBlack，大小20px，颜色#006699。“附加到路径”，调整“文本偏移”。为文字添加“内侧阴影”滤镜效果。5.新建图层，绘制笔尖大小3px，颜色#33ffff（无填充色）的90*90px正圆，添加“内侧阴影”滤镜效果6.绘制笔尖大小3px，颜色#009999（无填充色）的140*140px正圆，添加“内侧阴影”滤镜效果。7.导出文件：logo.jpg。8.打开logo.jpg。绘制145*145px的正圆矢量蒙版元件将logo图形盖住。制作矢量蒙版图形。9.“符合画布”。“透明效果类型”选择“索引色透明”，导出文件：logo.gif。5.7.2Banner制作1.矢量蒙版效果图像制作（1）打开图片images\tp5-4.jpg，图片大小200*150px。使用110*110px圆形制作蒙版效果图像。（2）新建图层，绘制颜色为#ADFFB4、120*120px的圆形；再绘制一个108*108px圆形，使两个圆形同心。“打孔”得到一个圆环。绘制矩形遮住圆环的右上方的1/4，“打孔”。（3）将圆环和蒙版效果图形“组合”，保存临时文件。（4）使用图片images\tp5-8.jpg制作另一个蒙版效果图像。图像大小200*150px，使用92*92px圆形制作蒙版效果图像。圆环颜色使用#ADCFFF，大小为102*102px，内圆大小为90*90px；圆环的缺口选择左上方大约1/5。（5）使用图片images\tp5-3.jpg制作另一个蒙版效果图像。图像大小150*100px，使用70*70px圆形制作蒙版效果图像。圆环颜色使用#E4FFAD，大小为80*80px，内圆78*78px；圆环的缺口选择上方大约1/5。2.制作花朵（1）打开图片images\tp5-9.jpg。（2）使用“魔术棒”工具建立选区。使用Shift键附加没有选中的部分。（3）复制选取的花朵，新建文档，粘贴花朵图形。保存临时文件。3.Banner制作（1）新建文档，画布大小960*170px。绘制960*170px矩形，渐变线性填充，填充色白色为和#BF9FFF，适当调整填充方向。（2）使用钢笔工具绘制装饰条，使用渐变填充工具为装饰条填充颜色为#ADFFB4、#E9FFBC和白色的线性渐变色。（3）导入logo.gif，调整大小放置在适当的位置；导入保存的矢量蒙版效果图形放置在适当的位置。（4）导入花朵图片，调整大小放置在适当位置；复制、粘贴，移动花朵到适当的位置，调整大小，使用“滤镜”调整花朵颜色。（5）新建图层，输入文字“丫丫主页”，60px，“华文新魏”。“转换为路径”，“取消组合”，摆放到合适的位置。（6）将文字缩放到希望的大小，调整文字位置。（7）设置线性渐变颜色为#8A3C3C、白色和#8A3C3C，依次为文字填充渐变效果。（8）导出文件：bnner.jpg。5.7.3Fireworks按钮1．Fireworks按钮制作2．F