什么是Banner图？
banner是网络广告中最常见的广告形式。一般翻译为网幅广告、旗帜广告、横幅广告等，尺寸是468＊60像素，一般使用GIF格式的图像文件，可以是静态图形，也可用多帧图像拼接为动画图像。
一般用户可以使用Fireworks MX 来设计一张GIF动画Banner.
Banner制作
你一定见过网页中会动的广告Banner。变换的图片很能吸引浏览者的注意。它实际上是一个动态的GIF图形文件，也就是一个包含两张以上独立GIF图形文件或Frame(帧)的文件。每一帧均设定了画面播放时间与重播次数。可以在GIF制作软件中指定每一个轮回的动画播放时间与回放次数。
目前市场上制作GIF动画的软件相当多，友立公司的Ulead Gif Animator以其简单易用，功能强大而受到良好的评价，是一款值得推荐的Gif动画制作软件。下面我们用它来制作一个468X60像素大小的广告Banner。
1.在PhotoShop中制作四张468X60像素的图片，并将其导出为Gif格式。
2.运行Ulead Gif Animator，此时会出现一个“开始向导”面板，注意到“开始向导”面板上的Animation Wizard项，通过它可以决定置入哪些画面，每个画面播放多少时间等控制信息。
3.单击Animation Wizard项前的茶杯图标，在弹出的选择文件面板中单击“增加图像”按钮，在随后弹出的打开菜单中，选择要置入的图片，我们选择前面在PhotoShop中制作的四幅图片，选好之后单击下一步按钮。
4.在图像类型菜单中选择以文字为导向的图像Text-oriented，单击下一步按钮。注意：若是以文字为导向的图像，文字图像的颜色比较少，可以不进行递色处理，这样可减小文件的大小，但如果是较复杂的相片图像，则需进行递色处理以求得较好的影像品质。
5.在帧延续时间面板上设置每帧延续的时间和帧速率。注意：GIF89a的动画图像结合了多张的个别图像，它们都是独立的Frame（帧或影格）文件，每一影格均须设置画面的播放时间及重播次数。
6.在完成菜单中点击Finish按钮，完成动画的基本制作。单击编辑区中的Preview按钮，预览动画的效果。
7.打开File菜单，选择Optimization Wizard(或按下F11键)，启动最佳化向导。
8.在弹出菜单中选择Yes，使用预设的项目以控制调色板的颜色数目，然后单击下一步按钮。
9.在弹出的菜单中勾选No，然后在图片颜色数项中设置其值为32色。注意：视图像情况以决定颜色数目方框中的数值，若以文字为导向的图像，最好勾选“No”项目。
10.在弹出菜单中均选择Yes，移除多余的像素，移除注解区块，移除层标志，这样可以减小文件尺寸。
11.在最后弹出的菜单中列出了刚才的设定，单击Finish按钮完成优化。
12.随后弹出Gif Optimization菜单，显示了优化前后的文件尺寸大小对比，单击Save as按钮，如图6，将其保存。
注意：一般情况下，Banner的大小不要超过30KB，否则会增加网络负担，在本例中，这个Banner优化之后只有18.4 KB
什么是Banner图？相关推荐
- JQuery自定义插件详解之Banner图滚动插件
前 言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
- 原生JS和jQuery实现banner图滚动那些事
前 言 阿q 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码 首先,创建基本 ...
- 做一个常规的banner图——负边距的使用、banner图的拼法
在这之前,首先要了解如何设置块级元素在块级元素水平居中 方法: 设置子容器为定位元素 水平居中 left:50%:margin-left:-width/2: 垂直居中 top:50%:margin-t ...
- jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）
banner图的滚动效果动画 最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时, 会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定 ...
- 用element-ui的走马灯carousel轻松实现自适应全屏banner图 解决el-carousel默认高度300问题 组件代码
用element-ui的走马灯carousel轻松实现自适应全屏banner图 解决el-carousel默认高度300问题 组件代码 <template><el-carousel ...
- 无限滑动的banner图，中间显示大图两边显示一部分，无限滚动
banner图需求 中间图片要大 两边要显示一部分 无限滚动 首页代码 MainActivity package com.m.live.myapplication;import android.sup ...
- HTML实现banner图切换
首先呢,我们做出来的效果去下图,这里只是简单的写的文字,如果需要更好的话,可以自己添加或修改.(这里图片大小没有统一,有一丢丢影响效果) 接下来我们来看看详细的代码 HTML部分: 这里主要设置了三个 ...
- 如何使用JS实现banner图滚动
通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数, ...
- 如何设计手机端banner图【电商小白】
常见的电商以京东.淘宝.唯品会等等传统电商,以今日头条.腾讯广点通为平台的二类电商,甚是火爆,由于成本低.收益快,很多人作为创业的首选.拿二类电商来说,时不时就出现防水T恤,如果你也想蹭这波量,但是苦 ...
- 六个步骤，细说电商banner图设计之色彩的奥秘
我们常常会说到做设计需要知道三大构成(色彩构成/平面构成/立体构成),设计又可以分很多个类别,比如网页设计/UI设计/电商设计/室内设计/工业设计等等,那对于电商设计有没有专门的三大构成呢?至今好像没 ...
最新文章
- java中如何把时间封装成类,java-如何在不使用任何不推荐使用的类的情况下将日期从一种格式转换为另一种格式的日期对象？...
- 关于 线程模型中经常使用的 __sync_fetch_and_add 原子操作的性能
- 微信公众平台消息接口PHP版
- 桌面桌面虚拟化-Vmware 兼容性怎么查询
- Memcached Java客户端编程
- [NPUCTF2020]Mersenne twister
- 浅谈Java解决鸡兔同笼问题的思路
- java宠物店多态源代码
- OCA第1部分中的Java难题
- 微软删除最大的公开人脸识别数据集，只因员工离职？！
- 怎样实现MathType在Numbers中的运用
- LeetCode 647 回文子串
- Selenium Automated test 's Installation environment
- 关于proc的介绍，比较详细
- C#: switch语句的重构『网摘』
- CSS 选择所有子元素添加样式
- 数据结构：八种数据结构大全
- How、what...like的疑问代词_19
- [渝粤教育] 中原科技学院 管理学原理 参考 资料
- source insight4.0使用教程