资源预览内容
第1页 / 共53页
第2页 / 共53页
第3页 / 共53页
第4页 / 共53页
第5页 / 共53页
第6页 / 共53页
第7页 / 共53页
第8页 / 共53页
第9页 / 共53页
第10页 / 共53页
亲,该文档总共53页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
第7章 网页图形处理工具FireworkslAdobe Fireworks是一款专为网页图形设计的图形编辑软件,它大大简化了网页图形设计的工作难度,无论是专业设计家还是业余爱好者,使用Fireworks可以轻松地完成图片制作、大图优化、切片等工作,是创建与优化Web图像和快速构建网站与Web界面原型的理想工具。本章节具体内容包括:7.1 Fireworks的操作界面的操作界面7.2 公司网站公司网站Logo和按钮设计和按钮设计7.3 公司网站的图片处理公司网站的图片处理7.4 公司公司“周年大酬宾周年大酬宾”整图网页设计整图网页设计7.1 Fireworks基本操作l任务导入对Fireworks这样一个网页图形处理软件,如何使用它制作网页中的Logo、按钮以及处理其他图片呢?小赵感觉有点无从下手。老张告诉他不要着急,“工欲善其事,必先利其器”,首先就是熟悉个软件的基本操作。l学习目标: 1)了解Fireworks工作界面的布局。 2)能熟练建立、保存Fireworks文件。 7.1.1 启动Fireworks l在Windows桌面上,双击Fireworks的快捷方式图标,即可启动Fireworks。启动后的界面如图所示。 Fireworks启动后的界面 7.1.2 Fireworks工作界面 l启动Fireworks后,系统将弹出Fireworks工作窗口,并自动建立一个名为“未命名-1”的空文档,如图7-4所示。其操作界面由标题栏、菜单栏、工具栏、文档窗口、面板组、属性栏等部分组成。 Fireworks工作界面 7.1.3 保存Fireworks文档 l完成Fireworks编辑后,同其他软件一样,单击“文件”菜单“保存”或“另存为”项。l如果选择“保存”,只能存为Fireworks可编辑的PNG格式。l如果选择“另存为”,则可以保存为其他支持的格式,如常见的GIF格式、JEPG格式等。7.1 思考与练习 l1. 建立一个Fireworks新文档有哪几种方法?l2. 打开Fireworks,进行下面的操作:1.文件建立:进入Fireworks,建立一个新文档(500300)。2.使用工具栏的文本工具写下你的班级和姓名,字体格式为加粗、黑体、25号字,颜色为红色。3.用你的姓名命名保存该文档(如:张三.png),要求保存为Fireworks专用格式的png,并另存为普通PNG格式,然后比较这两个文件的大小。4.试着保存为其他类型的图片格式,如常用的GIF格式、JEPG格式、BMP格式等,并观察它们的图片质量和大小。7.2 网站Logo、按钮和静态Banner设计 l 任务导入:如果在网站中只有文字做链接的话太单调了,小赵想为网站设计一个Logo及一些漂亮的按钮图标。本任务将学习在Fireworks中制作Logo、按钮、静态Banner的制作方法。l 学习目标: 1)掌握Fireworks工具栏中常用工具的操作。 2)学会制作简单的网站Logo。 3)学会制作网站按钮。 4)学会制作网站静态Banner。7.2.1 制作网站Logo(一)l以叶行科技公司为例,学习制作网站Logo的方法。制作效果如图所示。网站Logo制作效果 7.2.1 制作网站Logo(二)l 新建文档 新建一个Fireworks文档(PNG),设置为(宽度186,高度63,分辨率72,画布颜色为白色),如图所示。新建文档 7.2.1 制作网站Logo(三)l 导入外部素材l点击“文件”菜单“导入”,在“导入”对话框中,浏览找到你所需要的素材文件,如图所示,单击“打开”按钮,将所有素材导入到编辑区域内。并调整到合适的位置。素材导入 “导入”对话框 7.2.1 制作网站Logo(四)l输入文本使用工具栏中的文本工具,在工作区输入公司名称和网址:“叶行软件公司”、“WWW.YEXING.COM.CN”,调整到合适的位置,如图7-14所示。 输入文本 7.2.1 制作网站Logo(五)l调整属性1)选中“叶行科技公司”文本,在文本属性面板中,对输入的文本进行美化处理,包括字体、颜色、投影等效果。2)同样地,选中“WWW.YEXING.COM.CN”文本,在文本属性面板中,对输入的文本进行美化处理。3)双击文本,按住鼠标左键不放分别选择不同的文本并设置为不同的颜色。其中,“叶行”颜色为“#FF6600”,“科技公司”颜色为“#41A622”,英文“YEXING”颜色为“#CC0000”,其余英文为黑色。4)添加Photoshop动态效果,可以让文本更具动感。单击文本属性栏中滤镜旁边的加号 ,在弹出菜单中选择“Photoshop动态效果”,在弹出的“Photoshop动态效果”对话框中选中“阴影”效果,并设置右边“阴影效果”属性值。 7.2.1 制作网站Logo(六)l完成保存 至此,Logo制作完成,点击保存为可编辑的Fireworks png格式,以备下次修改使用。当然也可以另存为其他格式的图片,直接应用到网站中。7.2.2 制作网站按钮(一) l以叶行科技公司网站为例,学习制作网站按钮的方法。制作效果如图所示。l新建文档新建一个Fireworks文档(PNG),宽为180,高为226,分辨率为72,画布颜色为白色,如图所示 。网站按钮效果 “新建文档”对话框 7.2.2 制作网站按钮(二)l设计制作按钮背景 1)单击工具栏中的“矩形工具 ”,在弹出的列表菜单选择“圆角矩形工具”。2)此时在工具区会出现一个十字型图标“ ”,按住鼠标左键不放,在工具区拖动画出一个圆角矩形,选中它并调整它的大小、坐标以及颜色。3)在属性面板中,对圆角矩形进行设置。4)选中圆角矩形,按住键盘上的Ctrl+C键,然后再按Ctrl+V键,完成复制粘贴过程。紧接着用键盘上的上下左右键调整新圆角矩形的坐标位置(X:15,Y:81)。5)同样地,再复制两个圆角矩形出来,调整好它们到合适的位置。6)按住键盘上的Shift键不放,依次选中4个圆角矩形,并设置它们的属性。7.2.2 制作网站按钮(三)l导入素材 1)点击工作区空白区域,取消选择。2)把“素材文件夹”下“按钮素材”下的4个颜色小球导入到工具区中,并调整到合适的位置。3)再导入素材“白色小箭头”,并依次放置到每个小球上。4)最后导入其他的两个素材,放置好位置。如图所示。导入素材并调整到合适的位置 7.2.2 制作网站按钮(四)l设置文本 1)分别输入文本“历史客户”“订单查询”“在线支付”“合作伙伴”,调整到合适的位置。2)用Shift键把它们同时选中,设置它们的共同属性,属性栏设置如图所示。3)再分别设置它们各自的颜色,首字为黑色,剩下三个字为白色,效果如图所示。4)加入Photoshop动态阴影效果。按住键盘Shift键依次选中四个文本,同时赋予它们阴影效果,最终完成按钮组的制作。 调整文本颜色 7.2.2 制作网站按钮(五)l完成保存 至此,Logo制作完成,点击保存为可编辑的Fireworks png格式,以备下次修改使用。也可以另存为其他格式的图片,直接应用到网站中。7.2.3 设计网站静态Banner (一)l下面以制作“叶行”网站为例,学习制作网站静态Banner的方法,将完成的效果如图所示。网站静态Banner制作效果 7.2.3 设计网站静态Banner (二)l新建文档并设置背景1)新建一个Fireworks文档(PNG),宽792,高188.分辨率72,画布颜色白色 2)制作Banner背景画一个790185的圆角矩形(颜色为#15B0E8),调整边角,置于画布的中央,坐标为(X:3,Y:2),将“Banner素材”下的“透明流光”文件导入到画布,坐标为(X:0,Y:46)。7.2.3 设计网站静态Banner (三)l设置文本 1)输入文本“我最行”,并设置其颜色同透明流光的颜色一致(#73D0F1,也可使用取色器)。 单击“缩放”工具 右下角的小三角形,在弹出菜单中选择“倾斜工具”,调整文本的倾斜度,使之与透明流光平行。2)输入文本“选择 叶行 ,因为我们更专业”。设置“叶行”字体为叶根友特色简体(黑色、25号字),其他为黑体(白色、20号字),字符间距为3,并设置Photoshop动态效果。 调整文本倾斜度 7.2.3 设计网站静态Banner (四)l导入素材,制作完成 导入Banner素材文件夹下的其他外部素材文件“卡通箭头”、“英文说明文字”、“绿色标志”到画布中,并且调整到适当位置,如图7-36所示,最后Banner制作完成。导入其他外部素材 7.2.4 Fireworks与Dreamweaver结合制作动态导航效果 1)在Fireworks中做出一个按钮(自由设计),是鼠标未经过前的状态,并且导出为“01.JPEG”图片。2)修改这个按钮,设计鼠标经过后的状态,并导出为“02.JPEG”。3)使用这两幅图片素材,在Dreamweaver中制作鼠标变换图像,浏览效果。鼠标经过前后的按钮效果 7.2 知识拓展 l运用PNG图像素材 通过实例,我们可能注意到了在导入的素材中都是PNG格式的,这是因为PNG格式的图像背景是透明的,这样就加强了它的可运用性,不需要再进行“抠图”等处理,所以用Fireworks设计时,可以从网上下载大量的PNG图像用作设计时使用。在网上发现喜欢的PNG图像,右键单击,在快捷菜单中点击“图像另存为”就可以下载下来。l运用Fireworks样式 在Fireworks中,提供了大量的样式,只需轻轻一点,便可得到漂亮的效果。这些样式对图形和文本都有效,用来制作按钮更是方便漂亮得多,而且使用某种样式后,还可以对此种样式进行编辑和修改,同时还可以自己设定喜欢的样式,下一次需要该效果时,直接引用就行了。7.2 思考与练习 1. 建立Fireworks新文档有哪几种方法?2. 使用教材提供的相关素材,用Fireworks设计一个网站logo,效果如图所示。logo效果图 7.3 网站图片处理 l任务导入 在网站上经常会使用很多图片,小赵发现目前手头上的这些图片文件都很大,没有经过优化处理,小赵想将这些图片在显示质量不下降的情况下进行优化。本任务将学习Fireworks强大的图片处理功能。l学习目标 1)了解图片的多种格式。 2)掌握图片的美化处理方法。 3)学会图片的优化输出。7.3.1 常见图片格式 (1)BMP Windows系统下的标准位图格式,未经过压缩,这种图像文件比较大。平时我们用画图程序画出的图形的格式就是这一种。(2)GIF 分为静态GIF和动画GIF两种,“体型”娇小,网上很多小动画都是GIF格式。GIF其实是将多幅图像保存为一个图像文件,从而形成动画。(3)JPEG(JPG) 是应用最广的图片格式之一,这种图片是经过压缩而来的,文件较小,便于在网络上传输,网页上大部分图片就是这种格式。(4)PSD 图像处理软件Photoshop的专用图像格式,图像文件较大。文件扩展名是.psd,可以支持图层、通道、蒙板和不同色彩模式的各种图像特征,是一种非压缩的原始文件格式。PSD文件有时容量会很大,但由于可以保留所有原始信息,在图像处理中对于尚未制作完成的图像,选用PSD格式保存是最佳的选择。(5)PNG 与JPG格式类似,网页中很多图片都是这种格式,支持图像透明。原名称为“可移植性网络图像”,是网上接受的最新图像文件格式。7.3.2 美化图片(一) l用Fireworks处理网页图片主要包括:图片裁剪处理、图片缩小放大处理、图片滤镜效果添加(亮度、对比度、模糊、锐化、内外阴影、内外发光等),等同于用Photoshop处理图片的过程,在这里不再一一做出实例讲解。 下面学习使用Fireworks蒙版制作图片窗格效果,如图所示。图片窗格效果 7.3.2 美化图片(二)1)单击“文件”菜单“图像处理素材”“人物”素材,并设置画布颜色为白色。2)使用圆角矩形工具在工作区画出正圆角矩形(长:60px,宽:60px,笔触:#ccccccc,填充色:#ffffff),并放置好位置(X轴
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号