Banner广告设计

第一篇：Banner广告设计

Banner广告设计

教学设计：

让自己创作的Flash能动起来，是Flash教学中学生感觉十分神奇的部分，首先让学生通过观察、比较Internet上优秀的Banner广告，思考、讨论、总结出Banner中有哪些主要元素（鲜艳的色块、运动的文字、图片等），接着教师讲解最基本的运动渐变动画的制作方法，并引导学生通过对运动渐变的属性面板的探索，试着制作出透明度、颜色、旋转、速度等变化效果，最后结合本班级的特色为班级主页设计制作一个Banner广告，即体现了软件的实用性和趣味性，也提高了学生的学习积极性和创新能力的培养。

教学目的：

知识与能力：1．通过教学使学生初步掌握Flash动画中运动渐变的制作方法；

2．进一步提高学生制作中色彩搭配、构图等技巧运用能力。结

合符号、图层、时间轴等已掌握的技能为班级主页（个人主页）

设计制作Banner。

过程与方法：1．通过观察与思考使学生学习并归纳Internet上优秀的Banne

r设计的主要元素，引导学生在对比中探讨不同Banner合理运

用的方法；

2．通过布置主题任务，给学生提供设计创新的空间，从而使学

生能够独立制作并完成任务，培养学生的实践、创新能力。

3．通过交流与分享，以及教师的及时鼓励使学生体会成功的喜

悦和合作的价值。

情感、态度与价值观：鼓励学生在学习的过程中养成多观察、多思考、多

模仿、多尝试、多创新的学习习惯和方法。

教学重点：

掌握Flash动画中运动渐变的制作要领，学会设计制作Banner的基本方法。教学难点：

提高学生制作中色彩搭配、构图等技巧运用能力。能创作出有个人特色的Banner。

教学过程：

一、什么是Banner

Banner，一般翻译为旗帜广告、横幅广告等。是一个表现商家广告内容的图片，是互联网广告中最基本的广告形式。

一、Banner广告的作用：

1．放置在广告商的网站页面上，展现商家的产品，起到自我介绍的作用。如： 东方航空，MSN

2．放置在其他网站页面上，向网页浏览者推介自己的产品或一些活动，引起网页浏览者的兴趣，也是这些网站用来盈利的途径。

如：搜狐

3．发布一些重要信息。

富有独特创意的横幅广告形式是在互联网上建立并推广客户品牌形象的有效途径。

二、Banner广告的特点：

推广信息简单明了 创造出一种点击的紧迫感 明确表达对用户的利益 具有趣味性

三、Banner广告的形式：

横幅广告，尺寸一般是480*60像素，或233*30像素，也可以根据内容和网页上可用空间的多少，增加或减少尺寸。

一般是使用GIF格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像。除普通GIF格式外，目前流行使用动感更强，交互性更高的Flash形式。这样更具有吸引力。

四、Flash Banner的组成元素和各元素的呈现形式

学生活动1：观察教师准备的几个网上下载的Flash Banner，讨论组成的元素

及其呈现的形式。

逐帧动画、符号的使用、运动渐变动画（大小、位置、颜色、透明

度、旋转、速度等的变化）、层和影片实例的运用。

五、讲解运动渐变动画的制作方法

教师：介绍制作运动渐变动画的一般方法。（强调只有对符号才能设置运动渐变）学生活动2：教师简单提一下运动渐变的属性面板的组成，由学生探索如何产生

透明度、颜色、旋转、速度等变化效果。

六、以2人一小组创作

学生活动3：为班级主页（或个人主页）设计并制作 FlashBanner

七、展示、交流、评价

学生活动4：作品展示、交流

八、小结 Banner 制作的注意点

1．文字：不要太多，尽量用粗壮的字体。

2．色彩：合理使用色彩的对比关系。

3．图形：要简洁，不需太繁、杂。

Banner在设计上还应该要做到制作美观、方便点击、与网页协调和整体构成合理。

表-1 注目程度高的配色：

顺序１ ２ ３ ４ ５ ６ ７ ８ ９ 10

底色黑 黄 黑 紫 紫 蓝 绿 白 黄 黄

图形色 黄 黑 白 黄 白 白 白 黑 绿 蓝

表-2 注目程度低的配色：

顺序１ ２ ３ ４ ５ ６ ７ ８ ９ 10

底色黄 白 红 红 黑 紫 灰 红 绿 黑

图形色 白 黄 绿 蓝 紫 黑 黑 紫 红 蓝

第二篇：经典教程：Photoshop制作网页banner广告设计

导言：

在这篇Photoshop教程中，我将教给你如何制作一个专业的banner广告。教程浅显易懂，你一定可以做得到的。

下面教程开始

我们这篇教程的效果如下。（图01）

图01

好了，让我们开始吧，在Photoshop中，新建一个文档，尺寸是500×300px，白色背景。（图02）

图02

选择圆角矩形工具，圆角半径设为5px，在你的画布中画出一个圆角矩形，填充绿色#6d9e1e。（图03）

图03

双击图层面板中的该图层缩略图，弹出图层属性面板，设置渐变叠加。参数如下图。（图04）

图04

现在的效果应该是如下图的样子。（图05）

图05 好了，这一步就完成了。然后我们开始创建banner的“头部”。按住Ctrl用鼠标左键单击图层缩略图，载入图层选区；点击矩形选区工具，消减掉下面一部分选区（按住Alt进行拖拽即可）。剩余的部分填充白色，如下图。（图06）

图06

点击Ctrl＋D去掉选区。改变这个图层的图层渲染模式为叠加，透明度设置为20%。（图07）

图07

好了，进入下一步吧。我希望在我们的头部中，有一个小的图形。在网上我找到了一个小的钟表的图标，打开图片，把它拷贝到我们的文件中，按住Ctrl＋T把图形变小一些。（图08）

图08 用锐化工具稍微让图形清晰一些。（图09）

图09

接下来，我们用文字工具写下了头部的标题。（图10）

图10

在这里，我用的字体是Myraid Pro，白色。但是实际上你可以选择你喜欢的字体。打开图层属性面板，设置投影，参数如下图。（图11）

图11 效果如下。（图12）

图12

好了，头部的部分我们就已经完成了。我希望给我们的banner添加更多的设计元素。选择用户自定义形状，选择一个Photoshop里面自带的一个形状，如下图。（图13）

图13

在我们的banner上面添加两个白色的形状。（图14）

图14 合并两个形状到一个图层中。好了，我们把banner外面的形状要删除。如何做到这点呢？按住Ctrl左键点击形状的那个图层缩略图，载入选区。然后按Ctrl＋Shif＋I将选区反选，按一下Delete就可以删除我们不需要的部分了。（图15）

图15

点击Ctrl＋D取消选区。设置形状图层的渲染模式为柔光，透明度为20%。（图16）

图16

现在，我们需要一个干净的头部，我们要把头部这一部分的图形形状删除掉。利用矩形选区工具可以进行这个操作。如下图。（图17）

图17 添加更多的文字。（图18）

图18

好了，剩下最后一部分了。但是之前我想要在下面放一个按钮。利用圆角矩形工具，圆角半径为2px，拖拽一个颜色为绿色#69990d的圆角矩形，如下图。（图19）

图19

好了，在按钮上面添加一些文字。（图20）

图20

Ok，我们的教程就完成了。效果看上去很不错。（图21）

图21

第三篇：banner心得

1，banner广告在网页中的第一感觉：对于网站广告条的目的就是吸引用户注意，然后吸引用户点击。所以一个优秀的广告条首先要做到的就是必须能 够吸引用户浏览。而用户浏览网页的时间一般也就十几秒中，因此广告条必须在第一时间内吸引到用户的眼球。在设计广告条时，我们必须要考虑用户的浏览习惯，也就是只瞄一眼情况下，是否能引起用户足够的重视。所以第一感觉对于广告条设计是最重要的一点。

2，广告条文本内容：对于广告条的文本文字内容来说，必须保持文字简短，重点突出。能在第一时间将最重要的信息高速用户才是设计目的。

3，banner广告条中的图片内容统一性：如果你是一家销售电子产品的网站，那么你的广告条中就因该以电子产品为主，曾经看到一些产品广告条使用的图片全部都是一些人物，而真正的产品缺只是以文字形式表达，这样的广告条设计师很失败的。

4，在广告条中放入你的网址与标志：如果你的广告目的是以品牌推广为主，那么i标志与网站地址将是广告设计的重点，同样即便不是以品牌为主的banner，也有必要加入一些标志与网址信息，或是一些宣传口号。5，banner设计中最好放上“点击这里”等字样：你可以在广告条的某个角落，或动态广告条的最后一帧上加上“点击”这类字样，这是一种常用的设计经验。6，广告条的尺寸：这个无需多数，对于banner来说大小一半不要超过50K，即便是一些FLASH广告也尽量减少下载时间，因为如果你的尺寸较 大，当用户访问这个页面时，可能网页内容全部显示完了，你的广告条还没加载完成，而用户可能就在此时离开这个页面，那样看上去你的广告被浏览了，其实没有 任何效果

7，广告条的长度：这一点是针对GIF与FLASH广告条而言，长度最好控制在3秒以内

8，广告条的颜色：颜色是人们的第一视觉体验，曾经看过很多网站广告通过刺眼的黄色来吸引用户眼球，这个我给的意见是，颜色需要醒目，但并能让用户 产生反感，因为最终目的是希望用户能点击，所以色彩的应用很有讲究，要让用户眼前一亮，但不能产生反感。这里有个技巧，就是使用统一的大色块配色，同是颜 色尽量选择一些一般网站中很少用的色彩，比如深绿色，绿色，深红色，黑色等。

9，尽量不要用FLASH来设计广告条

10，用蓝色来强调点击：在广告条中点击的按钮文字可以用带有下划线的蓝色文本来显示，因为用户浏览网页时视觉是在整个网页上扫视，此类蓝色点击文字是最能吸引用户的方法之一

第四篇：制作banner广告和电子书

1、制作banner广告使用在线bannner广告制作工具、banner maker pro或SWFText，创建banner广告。图片规格为468*60像素或392*72像素或234*60像素或120*240像素。（1）打开软件，设置大小（2）可以修颜色（3）可以插入图片（4）插入图片后可以对图片作相应的修改（5）可以的制作的图片上插入文本文字。（6）保存文件

2、制作电子书 制作工具制作电子书，并在适当的地方插入企业的logo，图片，文字说明等广告标语。自由选择发布途径。

1、添加文件单击左方的黄色文件夹，在右方的黄色文件夹按钮中选取一个目录，这就是我们刚才准备的文件夹了。选好后下方出现了该目录中的所有可编译文件，哪一个文件需要加密的话，点击文件名前方的选择框，在最下方有多种加密方法可供选择。[所有加密]：加密所有的文件。[文本加密]：加密HTML，TXT文件。[无]：不加密任何文件。

2、编辑目录文件选择好了后，点击左方“目录”，右方出现三个竖状的框，最左一个是硬盘上现存的文件目录，中间的是将会在电子书中出现的目录，请注意两个是不同概念的，我们可以在电子书的目录设定中任意改名，而丝毫不会影响硬盘文件的命名。也可以通过拖拽左边的文件树到右边的目录中。

3、制作闪屏我们也可以选取一幅图片作为闪屏，让读者对电子书留下深刻的印象，可以让读者打开电子书时能看到制作的一副关于图书的图片--闪屏，可以使用一副BMP格式的图片作为该闪屏。

4、关于对话框“关于对话框”可以使用html语的网页进行显示，但要注意的是不要将此网页放在刚才需要做成电子书的网页当中，不然软件会重复编译此文件

5、工具栏(1)接下来设定工具栏1的数据，我们可以清楚地看到这里可以改变电子书面板上的按钮数目。可给每一个按钮改成自己喜欢的名字，比如将“后退”改为“回去！”，还可以设置按钮的标题的是否可视以及工具栏的可视。点击图标可以为它们指定一个新的bmp图,但只限24*24象素。

6、工具栏（2）工具栏2是设定另一些高级特性的，比如电子书的logo文件，让它链接到任意一个站点上，设为默认后，以后所有制作的电子书都会出现这个logo了。我们还可以设定工具栏的背景，同样的需要一些背景图片才行选项

7、设置“选项”标题：设置电子书的标题，也就是书名。

主页：工具栏上的主页按钮链接的页面。

默认：电子书启动时显示的页面。图标：电子书的图标。也就是EXE文件的图标 显示：设置电子书的显示大小

8、设置“界面”软件内置了15款不同风格的skin让我们替换到电子书上，从msn到apple都有，一定可以满足你的需要安全选项

9、编译

最后在界面上选择一下输入路径，点击编译就电子书就做出来了

第五篇：浅谈网站BANNER图片设计

浅谈网站BANNER图片设计

BANNER图片是网站的重要因素，大多数网站一开打就能见到绚丽的BANNER图片。很多网站建设公司都不会让设计师花费大量时间设计BANNER图片，那么怎样才能呢个在短时间内设计出一个精彩的BANNER图呢？下面，是圣品小编在日常工作中针对BANNER设计整理编辑出的一些方法，希望能对大家有所帮助。

1、点击才是王道

一般我们做的banner都是为了宣传、推广某个产品或新功能等，它本身就是引导用户点击参与的入口，我们目的就是要吸引用户点击。所以我们可以用不同形式和手法来表现，但相同处，通情达意，突出主题，富有乐趣，那它们则能让浏览者产生兴趣。

2、主题明确。

在着手设计之前，设计师应该先与需求方沟通，并从中获取需求方想要表达的主题和需要重点突出的点。然后在针对性地对广告对象进行诉求，形象鲜明的展示所要表达的内容。不要放一些没用的东西，除非你想赶走你的用户。

3、与整个页面相协调。

当我们确定表达的主题之后，要在banner实际放置的环境中展开后续的设计工作。色彩搭配要明亮干净，要与整个页面相协调。不能为了使banner更加吸引用户的眼球而大面积的使用一些浓重的颜色(特殊需求除外)。

4、顺应用户的浏览习惯。

我们知道大多数的用户在浏览网页的时候都是从上到下，从左到右的浏览。为了使banner更容易被用户浏览,我们应该顺应用户这样的浏览习惯，糟糕的设计会让用户无所适从，焦点到处都是。

作者用红色的幕布和小号烘托出热闹的氛围，一面精致的铜锣第一时间吸引了浏览者的眼球，让人看了就想拿起旁边的小锤去敲打的冲动

我们换个方式来想，设计一个banner，如做一道菜，首先我们应该先确定想做什么菜，然后在把这道菜所需要的主辅材料放到锅这个环境里面炒，在这 个过程中我们会根据客人喜欢的口味加入调料，装盘后我们为了搞好这道菜的卖相，在盘子里面放入一些装饰，达到在第一时间内从视觉上强奸人们的眼球，吸引他 们来品尝。

本文主要从主题、实际运用环境、用户浏览习惯和做banner的目的这几个方面表达了我的见解，当然，除了上面所说的方法，其实还有很多我们可以借鉴的形式与思路，这里就不一一列举了，希望对大家有所帮助。