网页制作网页美工.ppt

《网页制作网页美工.ppt》由会员分享，可在线阅读，更多相关《网页制作网页美工.ppt（79页珍藏版）》请在三一办公上搜索。

1、网页制作,网页美工,2,本章内容,Adobe套件简介Photoshop处理图片批处理图片大小、颜色、对比度/亮度处理Fireworks网页图片处理批处理热点、切片按钮、导航Flash动画制作补间动画按钮综合示例,3,Flash is Dying/Dead,4,第一节 Adobe套件简介,传说中的网页制作三剑客是什么？Adobe CS、CC指什么？与网页制作有关的Adobe软件都有哪些？,5,1.网页制作三剑客,Macromedia 公司，后被Adobe收购DreamweaverFlashFireworks,6,2.Adobe CS与CC介绍,CS：Creative Suite，最高版本CS6C

2、C：Creative CloudAdobe CS系列被Adobe CC取代Adobe公司宣布不再销售盒装版的CS，工作的重点放在Creative Cloud云服务（CC）上CC不会再有CS5、CS6这样的版本区别，而是统一的CC用户将通过Creative Cloud来获取版本的更新，而不是购买新的安装包除了提供新的更新模式，Creative Cloud还将为用户提供更多的云端服务，包括存储和在线助手等参见备注,7,3.与网页制作有关的Adobe软件,Photoshop：切图、美工Flash：动画、交互Fireworks：网页图像图形处理，网页按钮、导航栏组件制作Dreamweaver：网站建设

3、、网页编辑其他软件：Acrobat（PDF编辑）Adobe Reader（PDF阅读）Contribute（网页设计管理工具）ColdFusion（构建企业Intenet应用程序）Air（Adobe Integrated Runtime利用现有的web开发技能（Flash,Flex,HTML,JavaScript,Ajax）优势，建立和配置跨平台的桌面RIA（Internet Applications）应用。）,8,9,10,11,12,13,14,15,16,17,第二节 Photoshop处理图片,图片格式图片调整：大小、裁剪、DPI等图片调整：亮度、对比度等图片批处理网页切图,18,图片

4、格式,JPEG有损压缩，适合保存像素色彩丰富的图片如照片等不适合用来储存有清晰边缘的图片，重复储存丢失细节GIF无损压缩格式（Lossless Compression），色彩在 256 色以内时使用 非常适合用来表现图标、UI接口、线条插画、文字等部分的输出。支持透明背景、动画格式，100 的浏览器支持PNG无损压缩格式，因为 GIF 所使用的无损压缩格式专利问题而诞生分为 PNG-8 以及 PNG-24。不支持动画，PNG-24 支持Alpha 透明效果缺点：文件大小增加、IE6不支持透明PNGPSDPhotoshop文档格式，不能被浏览器直接识别,19,JPEG,20,Gif,21,png

5、,22,2.图像调整,图像-图像大小图像-裁剪,23,3.图像调整（对比度亮度等）,图像-调整调整面板,24,4.图片批处理,文件-自动-批处理,25,4.图片批处理,文件-脚本-图像处理器,26,5.网页切图,首先：在photoshop中打开一个要进行切图的图片,27,5.网页切图,用鼠标点击左侧工具栏的【切片工具】，使用【切片工具】在右侧要进行切图的图片中进行划分,28,5.网页切图,点击菜单栏中【文件】【存储为Web所用格式.】,29,5.网页切图,弹出一个存储为Web所用格式的界面，在界面中选择所存储的格式。,30,5.网页切图,点击“存储”按钮。会弹出一个【将优化结果存储为】的对话框

6、。选择存储路径，并点击【切片】后面的三角按钮，从下拉框列表中选择【所有切片】选项。,31,5.网页切图,32,第三节 Fireworks网页图片处理,Fireworks简介文本批处理Gif制作切片、热点,1.Fireworks简介,默认文档格式为pngFireworks 是一个用于创建、编辑和优化 Web 图形的多功能程序。创建和编辑位图和矢量图像设计 Web 效果（如变换图像和弹出菜单）修剪和优化图形以减小其文件大小可以将其导出或另存为 JPEG 文件、GIF 文件或其它格式的文件，与包含 HTML 表格和 JavaScript 代码的 HTML 文件一起用于 Web,34,使用Firewo

7、rks,2.文本,文本工具文本属性插入特殊字符：窗口-其它-特殊字符笔触、填充、滤镜以及样式,36,将文本附加到路径,如果希望文本不受矩形文本块的限制，可以绘制路径并将文本附加到该路径。文本将顺着路径的形状排列并且保持可编辑性。若要在路径上放置文本：按住 Shift 键并选中文本块和路径。选择“文本”“附加到路径”。若要将文本从所选路径分离出来：选择“文本”“从路径分离”。修改方向：“文本”“方向”,3.图片批处理,网页制作中常用文件-批处理,4.GIF动画,创建元件修改/动画/选择动画当选择一个动画元件时，它有一个唯一的边框并附加了一个指示元件移动方向的运动路径。运动路径上的绿点表示起始点，

8、而红点表示结束点。路径上的蓝点代表状态。例如，一个有五个状态的元件的路径上会有一个绿点、三个蓝点和一个红点。对象在路径上的位置表示当前状态。因此，如果对象出现在第三个点上，则第 3 状态就是当前状态。通过改变路径的角度可以改变运动的方向。,39,40,4.GIF动画,Fireworks 中使用动画元件制作动画：创建一个动画元件，既可以从头开始创建动画元件，也可以将现有的对象转换为动画元件。使用“属性”检查器或“动画”对话框输入动画元件的设置。可以设置移动的角度和方向、缩放、不透明度（淡入或淡出）以及旋转的角度和方向。使用“状态”面板中的“状态延时”控件设置动画动作的速度。将文档优化为 GIF

9、动画文件。将文档作为 GIF 动画文件或者 SWF 文件导出，或者保存为 Fireworks PNG 文件并导入Flash 中进一步编辑。,41,5.热点与切片,热点在一整幅图像的某一个部分设置超链接等该部分就是（图像上的）热点切片将一幅图像（或“网页”）分割成多个独立部分每个独立部分输出成一个独立图像文件每个部分可以设置超链接等,42,5.热点与切片,附加行为的操作方法、效果相同。但所能添加的行为不完全相同热点交换图像行为、状态栏信息、弹出菜单切片简单变换图像行为、交换图像行为、状态栏信息、导航栏、弹出菜单如何选择？当图像不允许分割时，使用热点图像分割后有利于下载,43,（1）创建热点,44

10、,（2）创建切片,切片将 Fireworks 文档分割成多个较小的部分并将每部分导出为单独的文件。导出时，Fireworks 还创建一个HTML 文件，以便在浏览器中重新组合图形。切片将一个文档分割成多个部分，它们都以单独文件的形式导出。将图像切片至少有三个主要优点：优化交互性更新网页的某些部分,45,6.Fireworks其他功能,羽化像素选区创建按钮元件创建导航栏创建菜单导出图像编辑Dreamweaver占位符,（1）羽化像素选区,羽化可使像素选区的边缘变得模糊，有助于所选区域与周围的像素混合。在选择像素选区时羽化像素选区的边缘：1.“工具”面板中选择位图选择工具。2.“属性”检查器的“边

11、缘”弹出菜单中选择“羽化”3.拖动滑块来设置沿像素选区边缘进行模糊的像素数目4.进行选择从菜单栏中羽化像素选区的边缘：1.选择“选择”“羽化”。2.在“羽化所选”对话框中输入一个值以设置羽化半径，然后单击“确定”。半径值决定选区边框每一侧羽化的像素数目。(复制粘贴可见效果),47,（2）创建按钮元件,按钮最多有四种不同的状态。每种状态表示该按钮在响应各种鼠标事件时的外观：“弹起”状态是按钮的默认外观或静止时的外观。“滑过”状态是当指针滑过按钮时该按钮的外观。此状态提醒用户单击鼠标时很可能会引发一个动作。“按下”状态表示单击后的按钮。按钮的凹下图像通常用于表示按钮已按下。此按钮状态通常在多按钮导

12、航栏上表示当前网页。“按下时滑过”状态是在用户将指针滑过处于“按下”状态的按钮时按钮的外观。此按钮状态通常表明指针正位于多按钮导航栏中当前网页的按钮上方。利用按钮编辑器，可以创建所有这些不同的按钮状态以及用来触发按钮动作的区域。,48,按钮修饰,内斜角，外斜角,元件的9切片缩放,使用 Fireworks 中引入的 9 切片缩放功能，可以按比例缩放矢量元件和位图元件而不会扭曲其几何形状。,50,（3）创建导航栏,创建一个按钮元件 从文档库面板中，将元件实例拖到工作区 执行下列操作之一以便制作一个按钮实例：选择按钮实例，然后选择编辑克隆 按住 Alt 键并拖动该按钮实例 按住 Shift 键并拖动

13、可使其对齐 重复步骤 3 和 4，创建其它按钮实例 选择每个实例，然后使用“属性”检查器为其指定唯一的文本、URL 和其它属性,51,（4）创建弹出菜单,修改-弹出菜单-添加弹出菜单,52,（5）图像导出,导出预览单击“文件”-“图像预览”“选项”与优化面板相似“文件”确定文件大小、缩放、导出范围等“动画”设置每状态延时、播放次数、启动导出向导等导出向导单击“文件”“导出向导”“导出向导”对话框“目标导出文件大小”复选框，选中后可在下方的框中，设定导出文件的大小。向导会选择合理的优化方案，使导出的文件大小尽可能接近这个数值提示：若不熟悉优化和导出，可使用该向导,53,图像导出,导出的文件的保存

14、类型“导出”对话框，主要选项：保存类型、切片、HTML等选项不同，保存类型不同优化面板上“导出文件格式”选项决定保存类型导出区域选定使用工具栏“选择”区的“导出区域”工具选定导出文件应保存在将来需插入的网站中HTML文件含用于重新装配所需JavaScript及表，以及导出图像的链接信息Spacer.gif文件（11像素GIF文件）用于重新装配切片时，修复出现的间距问题,54,（6）DW图像占位符在FW中的编辑,55,第四节 Flash动画制作,Flash界面补间动画综合示例,56,1.Flash界面,属性面板,Flash文档,.fla 文件扩展名的文件：它包含开发、设计和测试交互式内容所需的所

15、有信息。Flash 文档并不是在 Flash Player 显示的影片。.swf文件扩展名的文件：其中只包含显示影片所需的信息。,58,辅助快捷键,Ctrl+Z 撤销Ctrl+B 分离Ctrl+G 组合Shift键 多选,59,2.补间动画,形状补间动作补间引导线动画遮罩动画,60,2.补间动画,形状补间,61,2.补间动画,动作补间,62,2.补间动画,引导线动画,63,2.补间动画,遮罩动画,64,3.综合示例,2023/10/18,65,附录：综合MV动画的完成过程,动画逐帧动画补间动画补间形状补间动画补间动画和传统补间引导线动画遮罩动画动作脚本动画（按钮元件）,2023/10/18,6

16、6,附录：综合MV动画的完成过程,作品计划素材准备图片、声音、文字、元件、动画等动画制作完善和改进发布作品,2023/10/18,67,1.作品计划,制作一个综合使用了各知识点的Flash动画特色包括：音乐和歌词导入的其他对象文字、图形变形等各种动画按钮,2023/10/18,68,2.素材准备,音乐：I Believe I can Fly文字：网络检索歌词动画：乔丹扣篮，文字动画形状：IT图标元件：篮球按钮元件,2023/10/18,69,3.动画制作,添加音乐层添加歌词层添加其他层，插入其他素材或元件素材的变形和颜色调整制作新的元件利用素材或元件制作各种动画插入按钮,2023/10/18,

17、70,3.制作：背景和导入素材,设置背景导入素材保存发布设置,2023/10/18,71,3.制作：添加音乐和歌词,添加音乐层编辑、截取片断添加歌词层网络搜索，复制粘贴与音乐同步：数据流,2023/10/18,72,3.制作：添加音乐和歌词,2023/10/18,73,3.制作：插入素材,添加swf文件添加其他元件,2023/10/18,74,3.制作：IT文字变形动画,要点：形状补间动画 保持分离(Ctrl+B),2023/10/18,75,3.制作：篮球动画补间,要点：组合Ctrl+G 引导线动画 改变宽高,2023/10/18,76,3.制作：篮球按钮,要点：制作篮球动画旋转,滤镜制作按钮 关键帧 超链接,2023/10/18,77,4.完善与改进,延长动画帧数，制作完整的音乐动画考虑制作歌词动画润色与增强动画效果优化动画大小和性能,2023/10/18,78,5.发布作品,文件-发布发布设置,2023/10/18,79,技巧总结,动画的基础是技术，但创意和美工也至关重要歌词同步应选数据流方式层、元件的灵活使用在补间形状中可以使用形状提示元件复用：善用元件可事半功倍发布的网页代码可以修改,