网络广告制作ppt课件

.,1,第五章网络广告制作,.,2,5.1.1利用Photoshop制作广告图片AdobePhotoshop是公认的较好的通用平面美术设计软件之一。它的功能完善，性能稳定，使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。（1）启动Photoshop。,5.1网络广告平面画面的制作,.,3,（2）新建一个空白画布。（3）选取小提琴图片。（4）配套琴弓、乐谱等附件。（5）合成图片。（6）将小提琴表面图案抠出。（7）在小提琴表面制作乐谱效果。（8）制作动感效果。（9）制作描边效果。,.,4,小提琴的“抠图”操作,.,5,合成图片,.,6,选取图像中的小提琴部分,.,7,调整效果,.,8,“描边效果”对话框设置图描边效果,.,9,（10）制作旋转扭曲效果。（11）建立新图层。（12）调整图形大小。（13）制作曝光过度效果。（14）合并图层。（15）制作光照效果。（16）添加文字。,.,10,旋转扭曲效果,.,11,图像调整,.,12,曝光过度效果,.,13,“光照效果”对话框设置,.,14,光照效果,.,15,添加文字,.,16,5.1.2利用FrontPage制作横幅广告FrontPage是微软推出的一个全新的“所见即所得”的网页编辑，也是目前流行的网站制作和管理工具。利用FrontPage可以轻松地编辑网页，绘制图片。FrontPage的网站创建和管理工具给用户从未有过的全面控制权。,.,17,1横幅广告中图片的过渡方式横幅广告实际上是将一些图片组合在一起，并且使用某种过渡方式在不同的图片之间过渡，主要的过渡方式有以下几种。（1）水平遮挡过渡当前图片上水平方向出现条纹，并且过渡到下一图片。（2）垂直遮挡过渡当前图片上垂直方向出现条纹，并且过渡到下一图片。,.,18,（3）分解过渡将当前的图片上进行分解，并且过渡到下一图片。（4）盒状发射过渡下一幅图片按照盒状的发射方式，替换当前的图片。2利用FrontPage2000制作横幅广告利用FrontPage2000制作一个横幅广告，可以按照以下步骤进行。（1）单击“插入”菜单，从下拉菜单中选择“组件”选项，接着会弹出一个菜单。,.,19,（2）从弹出时的菜单中选择“横幅广告管理器”选项，然后单击该选项，接着会出现“横幅广告管理器”窗口。（3）在该窗口中输入横幅广告的“宽度”、“高度”和“图片显示”时间。（4）在“过渡效果”下拉菜单中选择过渡方式。（5）添加横幅广告使用的图片。（6）单击“确定”按钮，完成图片插入。,.,20,3横幅广告中水平遮挡过渡的例子（1）选择一幅图片。（2）选择水平遮挡过渡状态。（3）过渡到下一幅图片。对于生成符合网页需求的GIF图形，特别需要注意以下几点。（1）将图像模式设为RGB模式，否则无法直接导出GIF格式文件。,.,21,第一幅图片,.,22,水平遮挡过渡状态的图片,.,23,（2）避免使用色彩层次过于丰富的特效。（3）尽量将不同的图像主体放置在不同的Layer中，以利于将来的修改。（4）如果使用了白色或透明背景，记得在图像周围加上一个深色边框，否则广告将无法在绝大多数的白色背景网页上突出显示。（5）在进行单个颜色选择时，最好使用Windows调色板，从预设颜色中选取安全色这样可以保证大多数用户浏览时的色彩感觉一致。,.,24,（6）为了防止图形和文字的锯齿，请务必选中相应对象的Anti-aliased选项，使得图形和文字与背景平滑结合。以上所说的是关于制作普通GIF格式Banner广告，目前越来越受到重视的RichMediaBanner的制作可就要复杂得多了。,.,25,过渡后的图片,.,26,4具有DHTML动态效果的广告图片（1）打开FrontPage页面，在“插入”选项中选择“图片”。（2）插入图片后，在“查看”的“工具栏”中选择“DHTML效果”。（3）在“DHTML”工具栏中心选择“鼠标悬停”、“交换图片”然后选择一张图片。（4）在预览页面中，鼠标未触及图片时显示以下页面。,.,27,选择插入图片,.,28,选择DHTML效果,.,29,鼠标未悬停时的图片,.,30,（5）当鼠标悬停于图片时，图片转换为另一幅。对于生成符合网页需求的GIF图形，特别需要注意以下几点：（1）将图像模式设为RGB模式，否则无法直接导出GIF格式文件。（2）避免使用色彩层次过于丰富的特效。（3）尽量将不同的图像主体放置在不同的Layer中，以利于将来的修改。,.,31,（4）如果使用了白色或透明背景，记得在图像周围加上一个深色边框，否则广告将无法在绝大多数的白色背景网页上突出显示。（5）在进行单个颜色选择时，最好使用Windows调色板，从预设颜色中选取安全色，这样可以保证大多数用户浏览时的色彩感觉一致。（6）为了防止图形和文字的锯齿，请务必选中相应对象的Anti-aliased选项，使得图形和文字与背景平滑结合。,.,32,鼠标悬停时的图片,.,33,5.2.1利用Fireworks制作动画广告Fireworks是一个强大的网页图形设计工具，使用它可以创建和编辑位图、矢量图形，还可以非常轻松地做出各种网页设计中常见的效果。,5.2网络广告动画画面的制作,.,34,1基本操作用Fireworks制作动画一共有三种方法，由简到难地排列起来分别是：合并图像形成动画、使用符号（Symbol）生成动画效果和手工绘制。合并图像形成动画，顾名思义就是将一系列图片按序排列生成不同的帧而形成动画，不过这种排列完全是程序自动执行的，免去了大量的手工操作。,.,35,2广告制作步骤（1）新建一个文件，宽468像素，高60像素，分辨率72像素/英寸，画布颜色为白色。（2）单击工具箱中的画矩形工具，在画布上画一个矩形刚好撑满画布，在工具栏中颜色处将笔触改为黑色（000000），填充色改为红色（FF0000）。,.,36,绘制矩形,.,37,（3）点取帧（Frame）面板中的帧1（Frame1），单击右上角的选项按钮，在弹出的菜单中选择“添加帧（AddFrames）”。（4）随后出现“添加帧（AddFrames）”窗口，将其中的“数量（Number）”设为2，在“插入新帧（Insertnewframes）”复选框中选中“当前帧之后（Affertcurrentframe）”。,.,38,“添加帧”选项帧选项,.,39,（5）单击“确定”钮后，则在帧面板中增加了帧2和帧3。（6）用鼠标单击帧1（Frame1），用选择工具选中矩形，点击面板右上角的选项按钮，在弹出的菜单中选择“复制到帧（CopytoFrames）”。（7）随后出现的窗口中选中“所有帧（Allframes）”。,.,40,复制到帧选项,.,41,（8）单击“确定”钮后，则在帧2和帧3中都出现了一样的矩形。（9）单击帧2，用选择工具选中矩形，点击下方属性面板的填充类别的下拉菜单键，选择填充选项，选择渐变模式为“椭圆形（Ellipse）”，单击“编辑”，选择“蓝、红、黄”，并调整位置，如图所示。,.,42,帧2的渐变效果,.,43,（10）单击帧3，用同样方法将填充模式设为“波浪（Waves）”，并将填充渐变色设为“深蓝”，如图所示。（11）单击帧1，按Ctrl+O打开第一幅图像。（12）按Ctrl+A将对象选取，然后按Ctrl+C进行复制。按Ctrl+W关闭该图像文件。,.,44,帧3的渐变效果,.,45,第一幅图像,.,46,（13）按Ctrl+V将图像粘贴进帧1中，在属性面板调整图片的宽和高分别为50和60，放在矩形左侧。（14）点击帧2，按Ctrl+O打开第二幅图像。（15）按Ctrl+C将其复制到帧2，同样在属性面板调整图片的宽和高分别为50和60。,.,47,将第一幅图像粘贴在帧1矩形的左侧,.,48,第二幅图像,.,49,将第二幅图像粘贴在帧2矩形的右侧,.,50,（16）点击帧3，同样用上述方法在里面加第三幅图像。（17）分别在帧1、帧2和帧3中使用矢量面板中的文本工具加入相应的文字。（18）单击VCR控制条中的播放按钮预览，发现速度太快了。（19）单击帧1，点取面板右上角的选项按钮，在弹出的菜单中选择“属性（Properties）”，在出现的文本框中将数值改为70。,.,51,第三幅图像,.,52,将第三幅图像粘贴在帧3矩形的中间,.,53,在帧1、帧2、帧3中加入相应的文字,.,54,帧延时选项,.,55,（20）对帧2和帧3都执行上一步操作。最后预览一下速度是不是变慢了。（21）选择“文件导出向导（FileExportPreview）”，选择导出格式为“GIF动画”，将“动画（Animation）”中的循环按钮选中，并将它旁边的循环方式选为“永久（Forever）”。（22）一切设定好后，按右边预览窗里的播放按钮检查最后效果，如没什么需要改动的，按“导出（Export）”将文件保存。,.,56,导出向导,.,57,5.2.2利用Flash8制作滚动广告图片1Flash的特点Flash是一种交互式矢量多媒体技术，它的前身是FutureSplash，属于网上早期流行的矢量动画插件。2制作滚动广告图片（1）新建文档。首先新建一个flash文档，导入5张图片。,.,58,新建一个flash文档,.,59,（2）新建图形元件。接下来新建一个图形元件，把图片依次摆成如图5-52所示的样子。在摆放的时候可以通过属性控制对话框图片的大小。（3）排列图片。将图片排成如图5-54所示的样子。排列图片时可以使用对齐面板对话框。（4）图片复制。复制所有图片，粘贴成如图所示的样子。,.,60,新建图形元件,.,61,属性控制对话框,.,62,排列图片,.,63,对齐面板对话框,.,64,图片复制,.,65,（5）创建按钮。创建按钮是在指针经过处插入关键帧。（6）创建矩形。使用白色填充，将大小设置成和图片大小一样（见图5-58），并使用调色板调整透明度（见图5-59）。（7）创建动画片段（movieclip，mc）。把图形1拖进mc1，然后把按钮依次放在图形上，注意位置，这里可以用属性面板控制。,.,66,创建按钮,.,67,创建矩形调色板,.,68,mc1,.,69,（8）添加as代码。根据图5-61，在每一个按钮上添加as代码，其中的mc是以后要命名的实例名。（9）创建实名图片mc2。把mc1拖进方框，在100帧处插入关键帧，然后将图形向左拖，使得左端开头的位置变为右端结尾位置重合。这里可以用属性窗口控制对话框。,.,70,as代码,.,71,mc2,.,72,属性窗口控制对话框,.,73,（10）制作补帧动画。做动作的补帧动画，如图所示。（11）整个滚动广告图片。回到主场景，把mc2放进去，（命名为mc），完成整个滚动广告图片。,.,74,补帧对话框,.,75,滚动广告图片,.,76,5.2.3利用Dreamweaver4.0制作会移动的广告条Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。,.,77,1基本操作（1）制作会移动的广告条，要用到MacromediaDreamweaver中的Layer（层）和Timeline（时间轴）功能，还要准备两张大小基本相同的广告图片。（2）用Dreamweaver打开任意一个网页，空白页也可。在菜单中选择“插入（Insert）”“层（Layer）”，即看到网页中多了一个空白Layer1。,5.3网络广告动画画面的制作,.,78,再将光标点到空白Layer1内，选择“插入（Insert）”“图像（Image）”，插入广告条的第一个图片，调整层大小，使层尽可能与图片大小相近，并设置图片链接。然后把层移到动画的起始位置。（3）在菜单栏选择“修改（Modify）”“时间轴（Timeline）”“添加对象到时间轴（AddobjecttoTimeline）”。,.,79,单击后，弹出对话框，提示只有图像和层才能添加到时间轴。对话框确定后，我们选中Layer（单击层标记或层边界）或用层面板选择一层。当一个层被选中时，层边界会显示出调整大小手柄，按住鼠标左键不放，拖进时间轴动画栏的第一频道，即面板上垂直标尺（标有1，2，3等数字）中的“1”那行，时间轴里面马上增加了一个默认的15帧动画，如图所示。,.,80,增加默认动画,.,81,（4）单击动画栏最后关键帧标记，再选中页面中的层Layer1，将它拖到动画的结束点，或者在“层的属性面板”改变层的“左（L）”属性大小来确定结束帧层的位置。要想让页面打开时候它就开始运动，就在“时间轴（TimeLine）”面板上的“自动播放（Autoplay）”前打钩。按住时间轴上中部的“”箭头不放，就可以直接预览直线动画了，或者单击F12键预览。,.,82,自动播放的设置,.,83,2改变时间栏的属性产生移动变化（1）在动画移动距离不变的情况下，改变动画移动速度。（2）产生曲线的运动。在“时间轴面板动画栏”上添加一个关键帧。在添加的关键帧处移动层。直接通过拖动层，生成路径，产生动画。,.,84,产生曲线的运动,.,85,产生动画,.,86,3添加鼠标触发属性，产生广告图片的交替变化鼠标触发的各种属性，能产生各种变化。这里我们要用到的是onMouseout和onMouseover两个属性。打开菜单“窗口（Windows）”选择“行为（Behaviors）”弹出“行为”窗口选中层中的广告图片点击“行为”窗口中的“+”在弹出的菜单里面选择“对调图像（SwapImage）”。,.,87,对调图像浏览广告图片所在路径,.,88,在“对调图像”对话框里面浏览选择广告图片所在路径在“对调图像”对话框里系统默认中有个“onMouseout（复原图像）”前是打钩的直接单击“确定”按钮。“行为”状态窗中多了我们前面说到的onMouseout和onMouseover两个鼠标触发事件。按F12预览，移动鼠标到图片上，观看是不是图片变化了。再移开鼠标，又恢复到原来的图片。这样简单的图片交替行为就完成了。,.,89,图片交替,.,90,4最后思考的细节关于路径长度。假设动画是从上至下的，网页高度超过一屏，如果路径没有足够长，那么网页被快速浏览到下一屏的时候就看不到上面的层动画。最好应该将路径画到网页底部，然后设置时间轴动画栏，使层能够慢慢沿着下来的路径往上动。,.,91,5.4.1富媒体网络广告简介富媒体（Rich-Media）网络广告又称扩展创造性（ExtensiveCreative）网络广告，一般指使用浏览器插件或其他脚本语言、Java语言等编写的具有复杂视觉效果和交互功能的旗帜广告。这些效果的使用是否有效，一方面取决于站点的服务器端设置，另一方面取决于访问者的浏览器是否能顺利查看。,5.4富媒体广告的制作,.,92,5.4.2富媒体网络广告创作工具富媒体创作系统介于富媒体操作系统与应用软件之间，是支持应用开发人员进行富媒体应用软件创作的工具，故又称为富媒体创作工具。它能够用来集成各种媒体，并可设计阅读信息内容方式的软件。借助这种工具，应用人员可以不用编程也能做出很优秀的富媒体软件产品，极大地方便了用户。,.,93,与之对应，富媒体创作工具必须担当起可视化编程的责任，它必须具有概念清晰、界面简洁、操作简单、功能伸缩性强等特点。目前，对优秀的富媒体创作工具的判断标准是，应该具备以下8种基本的能力并能够不断进行增强。（1）编辑能力及环境。（2）媒体数据输入能力。,.,94,（3）交互能力。（4）功能扩充能力。（5）调试能力。（6）动态数据交换能力。（7）数据库功能。（8）网络组件及模板套用能力。从系统工具的功能角度划分，富媒体创作工具大致可以分为4类：媒体创作软件工具、富媒体节目写作工具、媒体播放工具以及其他各类媒体处理工具。,.,95,1媒体创作软件工具：用于建立媒体模型、产生媒体数据应用较广泛的有三维图形视觉空间的设计和创作软件，如Macromedia公司的Extreme3D，它能提供包括建模、动画、渲染以及后期制作等诸多功能，直至专业级视频制作。另外，Autodesk公司的2DAnimation和3DStudio（包括3DMAX）等也是很受欢迎的媒体创作工具。,.,96,而用于MIDI文件（数字化音乐接口标准）处理的音序器软件非常多，比较有名的有MusicTime，RecordingSession，MasterTrackPro和Studioforwindows等。至于波形声音工具，在MDK（多媒体开放平台）中的WaveEdit，WaveStudio等就相当不错。,.,97,2富媒体节目写作工具：提供不同的编辑、写作方式第一种是基于脚本语言的写作工具，典型的如Toolbook，它能帮助创作者控制各种媒体数据的播放，其中OpenScript语言允许对Windows的MCI（媒体控制接口）进行调用，控制各类媒体设备的播放或录制。,.,98,第二类是基于流程图的写作工具，典型的如Authorware和IconAuther，它们使用流程图来安排节目；每个流程图由许多图标组成，这些图标扮演脚本命令的角色，并与一个对话框对应，在对话框输入相应内容即可。第三类写作工具是基于时序的，典型的如Action，它们通过将元素和对检验时间轴线的安排来达到使富媒体内容演示的同步控制。,.,99,3媒体播放工具：可以在电脑上播出，有的甚至能在消费类电子产品中播出这一类软件非常多，其中VideoforWindows就可以对视频序列（包括伴音）进行一系列处理，实现软件播放功能。而英特尔公司推出的Indeo在技术上更进了一步，在纯软件视频播放上，还提供了功能先进的制作工具。,.,100,4其他各类媒体处理工具除了三大类媒体开发工具外，还有其他几类软件，如多媒体数据库管理系统、Video-CD制作节目工具、基于多媒体板卡（如MPEG卡）的工具软件、多媒体出版系统工具软件、多媒体CAI制作工具、各式MDK（多媒体开放平台）等。它们在各领域中都受到普遍欢迎。,.,101,5