网页banner

网页元素设计之——网页banner
什么是BANNER 什么是BANNER
BANNER （网幅图象广告）：以GIF，JPG等格式建立 网幅图象广告）： GIF，JPG等格式建立 ）：以 的图象文件，定位在网页中，大多用来表现网络广告内容， 的图象文件，定位在网页中，大多用来表现网络广告内容， 同时还可使用Java等语言使其产生交互性 等语言使其产生交互性， 同时还可使用Java等语言使其产生交互性，用Shockwave 等插件工具增强表现力。 等插件工具增强表现力。 在网络营销术语中，BANNER是一种网络广告形式。 在网络营销术语中，BANNER是一种网络广告形式。 是一种网络广告形式 BANNER广告一般是放置在网页上的不同位置 BANNER广告一般是放置在网页上的不同位置，在用户浏览 广告一般是放置在网页上的不同位置， 网页信息的同时，吸引用户对于广告信息的关注， 网页信息的同时，吸引用户对于广告信息的关注，从而获得 网络营销的效果。 网络营销的效果。 BANNER广告有多种表现规格和形式 BANNER广告有多种表现规格和形式，其中最常用的是 广告有多种表现规格和形式， 486×60像素的标准标志广告 486×60像素的标准标志广告，由于这种规格曾处于支配地 像素的标准标志广告， 在早期有关网络广告的文章中，如没有特别指名， 位，在早期有关网络广告的文章中，如没有特别指名，通常 都是指标准标志广告。这种标志广告有多种不同的称呼， 都是指标准标志广告。这种标志广告有多种不同的称呼，如 横幅广告、全幅广告、条幅广告、旗帜广告等。 横幅广告、全幅广告、条幅广告、旗帜广告等。通常采用图 动画、FLASH等方式来制作 等方式来制作BANNER广告 广告。 片、动画、FLASH等方式来制作BANNER广告。
1.新建文档并制作背景 1.新建文档并制作背景

Photoshop 网页设计实例——设计工作室网页Banner 制作根据网站的主题来设计网页Banner，本案例是一个设计工作室网站，如图1-58所示。

依据题目名称设定整体风格，画面比较柔和。

Banner的背景以一种纸张的纹理而出现，在背景上绘制有一片灰色的墨迹水印效果，彩色图案与黑白色图案结合，蕴含一种诗意味道。

图1-58 设计工作室Banner操作步骤：（1）新建一个【宽度】和【高度】分为1000和250像素，10%灰色背景文档。

执行【滤镜】|【纹理】|【纹理化】命令，打开【纹理化】对话框，设置【纹理】为“画布”，设置参数，如图1-59所示。

图1-59 添加纹理效果（2）新建“图层1”，填充蓝色（#ABD5CF），单击【图层】面板下的【添加图层蒙版】按钮，对图层添加蒙版。

在蒙版处于工作状态下，使用黑色【画笔工具】，设置【硬度】为0%，在画布中央进行涂抹，如图1-60所示。

（3）打开“墨迹”图片素材，使用【魔棒工具】，设置【容差】为30像素，在画布白色出点击建立选区。

按Ctrl+Shift+I快捷键，反选选区。

新建“图层1”，将选区填充土黄色（#D1b57A），取消选区，如图1-61所示。

图1-61 绘制图形（4）使用【移动工具】，将图像放置到Banner文档中，命名图层为“墨迹”图层。

按Ctrl+T快捷键，对图像进行缩小变换，并按Enter键结束变换，如图1-62所示。

图1-62 放置图像（5）按住Ctrl键，单击该图层缩览图，载入选区。

执行【选择】|【修改】|【扩展】命令，设置【扩展量】为5像素，如图1-63所示。

图1-63 建立选区（6）新建图层“墨迹1”，填充土黄色（#D1b57A），设置【不透明度】为30%。

如同（2）步骤操作，对“墨迹”添加蒙版后在图像边缘进行涂抹，如图1-64所示。

图1-64 绘制墨迹水印效果（7）打开“水墨画”图片素材，执行【图像】|【模式】|【灰度】命令。

将图像由彩色转换为黑白。

如何辨别一个Banner的好坏？（附案例）平时经常会有人问我“什么样才算是好的Banner ？”、“我这个Banner 有什么问题呢？”之类的问题，还有时候大家会分享一些作品但是我觉得并不是特别好，所以就觉得要不写一篇“如何判断一个Banner 的好坏”之类的文章吧，因为我们常说设计师要多看，但是多看的前提是要学会辨别一个东西的好坏，要多看好的而非不好的东西哈，要不然怎么提高审美提高眼界呢？那么进入正题之前，我们先用非常通俗描述讲几个简单的概念：一、Banner 是什么呢？Banner 英文翻译过来其实是指横幅或者旗帜，随着网络的兴起，后来专门用Banner 一词来代指任何投放于线上（PC端、移动端）的各种尺寸和形状的广告图，有静态和动态之分，总之现在你在网页上所看到的各种形状尺寸的图片基本都属于Banner ，而且基本都是可点击的。

二、Banner 的作用是什么？宣传，展示，广而告之，或者是能给企业、产品或者人带来相应的转化率。

三、Banner 由哪些部分组成呢？主要由文案、商品图或模特、背景四项中的至少一项组成。

最常见的一种Banner 就是四项都包含了，我们来看下图举例：那么了解完上面的基础知识，我们该如何判断一个banner 的好坏呢？就像一个设计师，可以分为未入门–初级–中级–高级–资深–指导，那么banner 我将它分为不合格、合格和优秀，接下来我们分别看下：一、不合格banner 的几宗罪：罪状一：抠图不干净（其他罪状且不说）有的人很懒，不管遇到啥图都直接魔棒一点就完事了，那么钢笔和通道这些工具要留着发霉么？罪状二：滥用各种特技喜欢用各种大大的描边脏脏的阴影还有各种光效结合为一体的杀马特效果闪瞎我们的眼，然而我们需要学会正确使用特技，并且懂得克制和矜持，才能体现出自己的身价，要不很容易看起来low。

罪状三：信息阅读障碍（不恰当的字体变形干扰阅读，“季中”两个字太过缠绵和纠结，大庭广众之这般暧昧真的好嘛？且不说黑色描边，以及脏脏的配色了）排版杂乱干扰阅读，横就是横，竖就是竖，这样横竖穿插的跳跃感排版真的爽么？反正大脑和眼睛表示：不同意~用色过多干扰阅读（哎哟我又出镜了，耶~），红橙黄绿蓝靛紫全被用上了，仿佛一个没有颜值的人，五官身材比例也不协调，但是偏偏穿衣服还非常高调~所以你们想象一下这会导致什么结果呢，搞的人家根本就不知道往哪看。

网页设计标准尺寸1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。

3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象.页面标准按800*600分辨率制作，实际尺寸为778*434px页面长度原则上不超过3屏，宽度不超过1屏每个标准页面为A4幅面大小，即8.5X11英寸全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px另外120*90，120*60也是小图标的标准尺寸每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K标准网页广告尺寸规格一、120*120，这种广告规格适用于产品或新闻照片展示。

二、120*60，这种广告规格主要用于做LOGO使用。

三、120*90，主要应用于产品演示或大型LOGO。

四、125*125，这种规格适于表现照片效果的图像广告。

五、234*60，这种规格适用于框架或左右形式主页的广告链接。

六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。

七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。

八、88*31，主要用于网页链接，或网站小型LOGO。

广告形式像素大小最大尺寸备注BUTTON 120*60(必须用gif) 7K215*50(必须用gif) 7K通栏760*100 25K 静态图片或减少运动效果430*50 15K超级通栏760*100 to 760*200 共40K 静态图片或减少运动效果巨幅广告336*280 35K585*120竖边广告130*300 25K全屏广告800*600 40K 必须为静态图片，FLASH格式图文混排各频道不同15K弹出窗口400*300(尽量用gif) 40KBANNER 468*60(尽量用gif) 18K悬停按钮80*80(必须用gif) 7K流媒体300*200（可做不规则形状但尺寸不能超过300*200）30K 播放时间小于5秒60帧(1秒/12帧)网页中的广告尺寸1.首页右上，尺寸120*602.首页顶部通栏，尺寸468*603.首页顶部通栏，尺寸760*604.首页中部通栏，尺寸580*605.内页顶部通栏，尺寸468*606.内页顶部通栏，尺寸760*607.内页左上，尺寸150*60或300*300 8.下载地址页面，尺寸560*60或468*609.内页底部通栏，尺寸760*60 10.左漂浮，尺寸80*80或100*10011.右漂浮，尺寸80*80或100*100以上几种说法可能有点小的出入，大家可以探讨一下。