浅谈网站BANNER图片设计

浅谈网站BANNER图片设计（精选8篇）

篇1：浅谈网站BANNER图片设计

浅谈网站BANNER图片设计

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

1、点击才是王道

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

2、主题明确。

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

3、与整个页面相协调。

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

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

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

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

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

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

篇2：浅谈网站BANNER图片设计

1. 19楼很少出现对联广告，建议对联广告，如果出现，3秒钟后，自动缩小成竖条放置在屏幕左右两侧，同时可关闭，类似sina。

2. 旗帜广告和logo广告

这两个位置属于类似报纸头条，推广效果最好，不会让用户反感，且美化网站。

3. 注册区的广告

右边侧栏的banner广告和推荐位，这个位置的banner广告推荐效果非常好，可以引起用户注意，同时不引起用户反感，

这个在左右边栏各个栏目下都可以考虑增加。

4. 通栏广告一分为五

通栏一分为五，比五个通栏叠在一起，感受要好很多，对商家的推广效果是否比通栏差很多呢，我觉得在文案得当的基础上，不会差。

5. 贴内广告

贴内广告，每一个帖子内页的顶部，19楼有独特的推荐专栏，五个图片推荐位，五条文字推荐位，广告A，广告B因为在“回复”和“发表新帖”按钮 上方，靠近帖子标题，会非常吸引用户注意，甚至可能让用户抛弃主帖，转而点击进入推荐帖子。这五个广告位相对贴内五条硬广，给用户的感觉会更好，避免反感 和影响看帖。

6. 帖子首个回复前的文字推荐

篇3：浅谈网站BANNER图片设计

在设计网站时, 多数大公司习惯将许多个图标、 条目背景、 按钮图片等集成到一个png图片上, 在使用图标时, 再利用CSS定位所需的图标。 比如yahoo.com的网页就是把页面上的图标、 栏目背景、 图片按钮等图片有规则地合并到一张png图片中, 然后用CSS中的background或者background-po- sition获取图片中小图的坐标, 精确取到所需要的小图片。 本人在设计社区信息网站中也大量使用改方法。

这种方法在设计初期需要将小图放置到一个大的png图片中, 还要合理布局, 使用的时候又需要分解获取坐标。 这种用一个png图片来做页面图片来源的方法有何好处? 原因是计算机中处理文件数量比处理大小耗费的时间更多。 举例来说, 复制100个10kb的图片比复制1个1000kb的文件所耗费的时间要多很多, 而平时所做的网站的图片都是放在服务器上存取的, 如果能将若干图片整合到一张大图中, 服务器的资源将得到极大的节省, 同时网页的响应速度也会得到很大的提高, 也可以改善网站的用户体验。 这里使用的就是图片整合技术(CSS Sprites) 在服务器响应方面的优势。

2方法思路

在目标png图片事先放置好网页中所需要的各类大小图标、 图片。 在网页中使用div中的background来制定在目标png图片中的坐标, 同时限定宽度和高度, 取到所需要的图标或图片。 例如: <div style=" width:44px; height:11px; back- ground:url (/images/theme/met_img.png) -707px -235px no -re- peat;" ></div> 就是要得到目标png图片中坐标为( -707px - 235px), 宽度为44px, 高度为11px的图片放置到一个div中。 这里的单位为像素点。 如果想让图片再div中落到底下, 可以将y轴坐标往上改。 比如高度为30px的div中想将图标放到底下, 可以将y轴坐标往上提高30px改为-205px, 即(- 707px,-205px)。

3运行效果

如图1所示。

4实现步骤

(1) 选取网站中所需要的各类图片、 图标, 在Photo Shop中将所需要用到的小图片放置到一张大的png图片中(以下简称目标png图片)。 这就是所谓的图片整合技术(CSS Sprites) 的图片切割术。 处理和放置图片时需要注意以下几个方面的问题:

1) 选取的小图片在大的png图片中应该按照由上至下、 左至右的顺序来放置, 最好能记录每个图标的坐标, 因为在CSS中background和background-position一般是利用图片的左上角坐标加上长和宽来定位的。 做好前期的准备工作, 后期使用和维护的工作量就会小很多。

2) 目标png图片中的小图之间可以保持一定的间距, 但是也不可间距过大, 因为尺寸大了会导致目标png文件变得很大。

3) 目标png图片中各个小图排列时, 最好把颜色接近或颜色相同的放置在一起。 因为png图片中颜色数越多图片所占居的空间就越大。 通过把相近颜色的图片放在一起可以有效降低整个png图片中总颜色数, 从而使得目标png图片的文件尺寸也变得更小, 加快网页传输速度。

4) 目标png图片中尽量把小图片水平排列放置。 因为在大小相同的目标png图片中, 把小图片垂直排列的目标png图片, 比小图片水平排列放置的png图片的文件尺寸要大。

5) 目标png图片对等合并。 在做目标png图片时, 为了有效节省文件占居的空间, 需要适当地把对等相同的小图片合并。

6) 使用黄金切割位。 在目标png图片的最右边和最左边是整个图片中最灵活、 最方便定位的位置, 可以放置网页中各类文本前的项目图标, 因为它不受目标png图片中其他CSSSprites图片的影响, 同时也不需要预留任何宽度。

(2) 计算网页中所需要用到的小图标位置。 为了取到图标, 计算出它的左上角到图片最左边的距离为707px, 左上角到图片最上边的距离为235px, 这样就得到它的坐标为: (- 707 px, -235px)。

(3) 使用图片整合技术获取图标的完整代码:

3结语

篇4：浅谈网站BANNER图片设计

【主题词】图片网站 企业文化 多文件上传 SWFUpIoad PHP MySOL

【中图分类号】TP393.093 【文献标识码】A 【文章编号】1672-5158（2013）04-0143-01

1、前言

公司每年都会形成大量的图片资源，这包括各类作业装备、作业施工现场、各种会议及活动现场、员工风采等。这些图片资源记录了公司发展过程中的经典时刻和辉煌一面，有效地利用这些资源，将在很大程度上提升员工对公司企业文化的认知度，并激发他们的使命感。公司内部原有图片资源大都存在于公司档案系统中，并由专人专岗负责拍摄、上传和管理，其余部分是由各二级单位指定专人负责拍摄，并通过邮箱提交给此岗位员工。这种管理模式存在三个缺点：一是图片资料来源单薄，无法调动全公司万余名员工的共享积极性；二是图片分散，无法形成集中管理，使得大量高质量图片的散落和丢失；三是图片资料基本起不到宣传作用，造成资源浪费。

中海海洋石油总公司拥有面向集团开放的图片网站，但此网站的图片分类粒度较大，不能详细涵盖中海油服的业务种类和特色，同时，网站对用户的资质审核严格，员工需要具有一定的摄影经验，才能通过审核并获得图片上传权限。因此，亟需建立一套能够实现图片资源细粒度分类、面向公司内部开放注册的图片网站。

2、需求分析

通过对网站建设的需求调研，得到网站的基本栏目组成，见图1。

3、系统设计

3.1 功能架构

系统包括前台网站和管理后台两个部分。前台模块和后台管理模块采用统一的程序架构方式，实现对核心功能代码的复用，减少了开发的工作量，提高了网站的可扩展性。

网站主要模块组成如下：

·用户基本功能实现用户注册、用户登录和权限获取、以及通过邮箱的密码找回等功能。网站注册具有用户注册审核机制，所有注册用户经过身份审核后，即可登录网站；

·个人信息中心实现个人基本信息维护和密码修改、批量图片上传、个人上传图集的管理、个人收藏图片的查看和管理、提交图片下载申请和下载图片等功能；

·通用图片功能实现图片的播放控制。图片播放方式包括FLASH播放、点击播放、缩略图滚动播放三种，实现了图片的EXIF信息查看、图片点击率的IP控制、图片原图保护等功能；

·后台管理主要用于实现网站的配置和管理。主要包括系统参数设置、分类管理、图集/图片管理、FLASH管理、接口管理、下载管理、用户管理、数据库备份和恢复等，它是整个网站的核心。

3.2 网站部署架构

网站部署于公司内网之上，服务器部署在总部机房，所有员工（包括天津、湛江、新疆、上海等片区）都采用直接访问总部服务器的方式登录网站。网站采用B/S（浏览器/服务器）架构，确保公司网络内的所有员工借助浏览器即可访问网站。

4、技术实现

4.1 实现技术

网站开发采用了当前最为流行的网站开发组合“PHP+MySQL”，并采用了PHP的Smarty模板引擎，以实现前台表现和后台业务逻辑的分离，提高网站的可扩展性。网站页面的布局整体框架由DIV+CSS构成，这样整个界面风格都保存在一个CSS文件里，便于修改，然后各个页面由TABLE进行灵活的布局。同时，网站采用了基于FLASH的多文件上传组件SWFUpload来实现图片的批量上传功能。

4.2 程序架构

本网站在程序架构上借鉴了成熟的开源项目管理软件ZENTAO的架构方式，采用面向对象开发中的分层思想，将代码分为前台表现层、请求处理层、业务逻辑层和数据访问层。其中，前台表现层采用PHP中的Smartv框架，负责按照设计好的页面样式进行后端处理结果的输出；请求处理层负责接收用户访问请求，并将请求转移到相应的业务逻辑处理单元当中，并负责将处理结果输出到相应的前台表现层中；业务逻辑层是整个系统的核心，它根据传入的请求信息，将请求分解并实现其中的业务逻辑，并将最终结果返回到请求处理层；数据访问层主要为了实现统一的数据库访问接口，所有对数据库的访问全部集中到数据访问层。以本网站中的浏览图片功能为例，图3给出了访问请求在各层之间的流转方式。

5、建设意义

·沉淀公司发展历程，提升员工对企业文化的认同感；

·细化图片的分类，为进行企业宣传提供便利；

·减轻公司图片管理人员的工作压力，提升工作效率。

结束语

篇5：Banner设计研究

一、Banner定义

Banner可以作为网站页面的横幅广告,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题。Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。

Banner属于网络广告,它区别与传统媒体有很多优势,比如:覆盖面广;不受时间限制,广告持久;方式灵活,互动性强;制作简单,广告费用低;可以准确统计受众数量。

二、Banner构成要素

Banner设计的构成要素与海报设计非常相似,但是由于Banner规格尺寸大小不一,文件大小也有一定的限制,这就在设计上增加了许多障碍。比如:软文不能太多,应采用有吸引力的宣传用语,否则会没有重点;图片并非越多越好,突出重点是关键;颜色不宜过度夸张,努力营造愉悦、舒服的感观感受等等。如何在方寸间快速高效的设计Banner,主要应从主题、字体、构图和背景四个方面着手。

(一)主题

主题就是要知道为谁做设计,比如为了某个节日主题活动还是针对某一品牌的预售,是走高端大气上档次路线,还是走促销亲民热闹路线等等,促销、热闹、大牌、简约、可爱、稳重,时尚、文艺,这些关键词往往是一个或多个同时出现在一个banner广告里的,这些主题关系到Banner设计风格的选择。

主题一:大牌、时尚、稳重

背景大量留白,色彩单一,常用黑、白、灰无彩色作为主色,凸显主体,适用于数码电子产品,奢侈品牌等。

商品或模特比较大,常常截取商品部分细节做展示。

不需要太多文案描述,有时只摆放一个logo。

主题二:时尚、品质感、促销

注重排版,文字规整,比如左对齐、右对齐、居中对齐,不会做一些怪异的字体变形,着重突出一个文字信息,放大形成一个面,压住全局,适当留白。比较适用于与时尚相关的美妆护肤、男女鞋箱包、配饰、食品等。

色彩不会太多,最多不超过三种,如果产品本身五颜六色的那就另当别论。配色参照商品本身或邻近色来提取,只有某一个需要突出的文字信息(比如折扣信息),才会用对比反差比较大的颜色。

一般都会有主标题、副标题、利益点这几个文案信息,利益点一定要放大。

主题三:可爱、热闹、亲和力

商品很多,画面比较满,会用很多小色块,手绘图形做点缀。比较适合食品、可爱服饰、母婴用品等,给人可爱、可口、甜美、亲和力的感觉。

色彩丰富,配色柔和,偏暖,给人热情的感觉。

会有某一个特别突出的信息,但是整体画面又注重比例的和谐,整体画面感觉是友好热情的,不会有攻击性。

主题四:文艺、小清新、简约、素雅、安静

这种主题比较适合家居、布艺、棉麻、茶艺、文艺等。超级大面积留白,商品都小小的。跟前面讲的大牌是截然相反的。

色彩单一,以浅灰、淡蓝白、米白、棕色,饱和度和纯度低的绿色等色彩居多。

文案要么很少,要么很多,但都是打动人小情绪的一些文字,并且都很小的放在画面里。

(二)字体

Banner设计的文案一般都由产品提供,设计师也可以根据自己的经验去调整。设计师最好不要直接用字库里的字,涉及到版权问题,尤其在Banner设计里,很容易被告侵权。可以用一些免费字库,比如谷歌的思源字体,站酷高端黑等;也可以将字库里的字体进行简单设计,比如将直角变圆角,在拐角处加几何形状作装饰,连接笔画等;也可以完全进行字体的再设计。在设计字体之前,一定要用符合主题的字体,比如男性产品用正黑、女性用倩体、萌萌的卡通体和海报体、文艺的静蕾体、禅意的书法体等等。

另外,文本在对齐方式上可以选择左对齐、右对齐、或者居中对齐。在形式上可以把标题骨骼归纳为简单的几何形状,如正方形、长方形、菱形、梯形、圆形、三角形、扇形等。

(三)版式

1. 垂直水平构图:文字与图形可以左对齐、右对齐或者居中对齐。这种构图形式给人的感觉是平衡感、场景感。

2. 斜线构图:文字或者图形常居中排列,大多会有图形辅助,倾斜排版。给人的感觉是动感、节奏和促销感。

3. 三角构图:通常居中排版,以图形、线条辅助,文字排版大小分明。正三角形稳定,倒三角动感。

4. 辐射式构图:和斜线构图很像,常常居中排列,大多会有图像辅助以突出文本和产品。构图活泼,指向性强,聚焦,有空间感。

5. 框架式构图:文字被框,图形被框,或者图文都被框。这种构图形式空间感很强,立体,聚焦,有画中画的感觉。

(四)背景

1. 背景形式

我们在设计Banner的时候,一般背景会有以下几种形式——纯色、渐变、图案、图片背景、合成背景。

(1)纯色背景多应用于整洁、简单的Banner中。

(2)渐变背景多应用于高端、上档次的Banner中。

(3)图案背景多应用于活力、张扬、青春、宣传促销的Banner中。

(4)图片背景和合成背景,多应用于体现主体性的Banner中。

2. 背景颜色

一般情况下使用近似色、互补色、亮暗色三种配色方式。

(1)近似色会使整个画面和谐安定,在操作中我们可以用吸管吸取主体产品的颜色作为背景色,使得画面协调统一,然后再用互补色突出重要部分。

(2)补色通常指色换上180度对应的颜色,比如红绿、黄紫、蓝橙等。补色配色能更加突出主体的轮廓,使主体更加明确,对比更加强烈。我们可以用主体颜色互补色做背景,这样可突出主体的轮廓,使主体更加明确,对比更加强烈。

(3)亮暗色的反差使整个画面具有冲击。亮部在设计方法上一般可以下载光效滤镜或是使用光效素材,再通过图层的混合模式叠加、柔光、滤色等方式对素材进行处理。处理暗部时,我们经常用的方法是CAMER RAW滤镜。PS在CC版本之后可以自由使用CAMER RAW滤镜,可以广泛应用与图层中,方便了图层的处理。

三、小结

设计师想要快速高效的设计好Banner,应该主要从主题安排、字体设计、构图布局和颜色搭配和这四个方面着手,合理安排画面内容,做到主次对比鲜明,突出产品及其特征是关键,颜色也不宜过度夸张,营造愉悦、舒服的感观感受。

摘要：本文通过对Banner设计进行分析,提出Banner设计的四个构成要素---主题、字体、构图和颜色,并通过图文并茂的方式,详细的阐述怎样设计这四个构成要素,对如何设计好Banner提供了借鉴意义。

篇6：浅谈网站BANNER图片设计

关键词：Banner；视觉表现；趣味性

Banner最先起源于纸质媒体的大标题广告，也可作为游行活动中的旗帜。随着互联网时代的迅速发展，Banner由于其表现方式直接、简单被广泛应用于移动手机端和网页端界面设计中。

面对日益庞大的网站数量和逐渐兴起的移动互联网应用，人们对于Banner的审美需求也在不断提高。Banner作为广告信息传播的关键环节，使命不再只是单纯地表达信息，而是需要在快节奏的网络环境中迅速抓住用户眼球，提高用户点击率，达到双方共赢的效果。由此，要让Banner在短时间内表现出效果，其视觉表现形式就显得尤为重要。

1 Banner的介绍和分类

Banner是网络中最常见、最有效、最出效果的一种推广宣传方式。目前，国内软件主页都采用Banner来传达信息。Banner主要分为购物、宣传以及展示信息等几种类别，在B2C和C2C类型的网站中处在显眼的位置，占有较大尺寸。Banner与传统的广告招贴相比有以下几个特点：第一，像素受限。Banner應用于软件首页，需要满足不同手机不同尺寸的要求，所以设计师在设计Banner的时候往往受到尺寸像素的限制。第二，短暂性。Banner一般多用于促销广告，现今，Banner往往只在特定一天或者两天出现。第三，内容受限。每张Banner所要传达的内容不一样，这就要求设计师在设计的时候充分考虑到需求方要传达的信息，不能任由自己意愿发挥。

2 Banner设计中的视觉表现形式

2.1 风格表现

风格是指某一类事物之间的共性特征。通常情况下，Banner的风格多种多样。设计师在设计Banner的时候，受需求方的影响，往往不同诉求的广告需要不同类型的Banner来烘托不同的氛围。

2.1.1 时尚杂志风

此类型的Banner采用杂志常用的版面，力求通过杂志的风格，营造出高端大气的感觉。这类型的Banner都有共同的特点，大标题、模特。例如，Banner右边放模特，左边放文字。文字大小之间形成鲜明的对比，突出文案的中心内容，文字排版和杂志排版基本相同，整体画面呈现出高贵的感觉。通过氛围的烘托，使Banner整体感觉符合文案所要表达的内容。

2.1.2 复古风

复古风的重点是运用传统元素和复古图案使整个画面呈现出复古的氛围。在Banner设计中，传统元素的应用主要是中国汉字的应用和传统图案的应用。设计师在设计浓厚中国风色彩的Banner时，往往采用此类风格。例如，端午节粽子Banner的设计。端午节是中国传统节日，这就要求设计师在设计整张图的时候考虑到中国传统习俗。设计师把文案字体采用中国古代汉字，再加上叶子元素的应用，整个Banner有一种水墨画的感觉。

2.1.3 清新简约风

清新简约风的风格就是自然、清新，画面清爽和唯美。此风格在家装和家居中常见，色调上多采用绿色、白色等自然色调，给人清丽、透亮的感觉。

2.1.4 炫酷风

这种风格多用深色背景，再带有一些质感的元素和光影效果处理。在客户端大型促销类Banner，这种风格应用较多。由于需要在第一时间抓住用户眼球，这种风格能够很好地跳出并展现在用户面前。

2.2 图形及文字排版设计

所谓排版，即将文字、图片、图形等可视化信息元素在版面布局上调整位置、大小，使版面达到美观的视觉效果。一个Banner主要是由文字和图片构成，所以在整体结构上，排版就显得尤为重要。好的排版能够让人眼前一亮，抓住其要表达的中心思想；而不好的排版则让用户找不到重点，不能清晰地表达信息。

2.2.1 整体布局排版

在严酷的商业竞争下，用户并不会花太多时间在Banner的信息思考和抉择上。好的Banner设计必须要让用户在短时间内产生共鸣和兴趣，让用户在第一时间能迅速抓住中心思想。所以Banner的整体布局排版必须遵循一定的规律，符合主题要求，以免混淆用户的第一视觉。一张Banner就像一篇文章，有主次之分。设计师首先要了解所有信息的关系，找到核心内容，将一张Banner逐层分解，确定信息优先级，并完整地展现在用户面前。

整体布局排版可遵循以下六个原则：第一，对齐原则。Banner中相关内容要对齐，这样方便用户实现快速移动，让用户在浏览网页时，一眼看到重要的信息。第二，聚拢原则。研究表明，用户在观看画面时更容易被聚集的东西所吸引。设计师在设计的时候可以将内容划分为几个区域，将相关信息都集中在一个区域里。合理的布局排列和停顿节奏有利于用户抓住信息的重点。第三，留白原则。留白又称“余玉”，原是中国画中一个重要的艺术表现手法。正如宗白华所言：“留白处并非真空，乃灵气往来生命流动之处。”画面上适当的留白，使画面不阻塞、不凝滞，仿佛天地间之灵气自由往来其中，给人无限遐想。在Banner设计中亦是如此，画面留出一定空间，既可减少Banner的压迫感，又可引导读者视线，突出重点内容。第四，降噪原则。Banner的本身就是一个小型的广告海报设计，受大小像素限制，不能任由设计师发挥，设计不同的尺寸。因此，在Banner设计中，不宜颜色过多、字体过多、图形过多。这些都分散了用户的注意力，给用户带来了阅读障碍。第五，重复原则。设计师在排版时，需要注意整个设计的一致性和连贯性，避免出现不同类型的视觉元素。第六，对比原则。在设计中，强烈的对比会让人视觉甚至心灵上产生冲击，从而形成用户记忆，有利于设计的传播与转化。Banner设计中，加大不同元素的视觉差异，既增加了Banner的活泼，又突出了视觉重点，方便用户一眼浏览到重要的信息。

2.2.2 文字设计

（1）文字排版。Banner中的文字信息传达应与口语表述相似，需要抑扬顿挫、重点突出地进行。在文字排版上，要求重点突出，大小粗细错落有致。字与字之间的结构、布局、留白、组织、呼应等要疏密有序。字体保持在两种左右，加入一些跟内容有关联的元素或者形状，可以很好地表达整个设计的情绪。

（2）文字设计。Banner的文字信息是其表达中心思想的灵魂，如果在设计文字的时候全部使用自带字体，会使Banner显得太过生硬，不富有情感。因此，设计师在设计Banner的时候应该更多地采用字体变形，重新组合。通过不同的笔触粗细和宽高比例，展现Banner的视觉冲击力和活力。优秀的文字信息设计不仅可以吸引用户，还可以激发用户的情感。但是在设计的过程中，还需要注意文字的可读性和易读性。可读性可激发用户的兴趣和关注。易读性在很大程度上决定了信息传达的成败。因此，在设计Banner的时候，标题类文字可着重于其可读性，而内容类信息传达则应该更注重其易读性。

2.3 色彩表现

作为信息的载体，色彩不仅仅是一个独立的主体，也承载着信息的传递。每种色彩都会因为色相、明度、纯度的不同，表现出不同的色彩感，不同的色彩有不同的情感和象征性，所以它们传递给用户的感知信息也会有所差异。例如，红色是引人注目的色彩，具有强烈的感染力，它是火（下转第页）（上接第页）的色、血的色，象征着热情、喜庆和幸福；蓝色则是天空的颜色，象征着和平、安静、纯洁和理智，另一方面又有消极、冷淡、保守等意味。用户对色彩信息的感知受时代、地域、民族、历史、宗教、文化、风俗等影响。因此设计师有必要了解受众的需求、习俗、态度以及Banner最终的使用场景。

在严酷的商业竞争下，用户浏览网页的时间一般只有短短几秒钟的时间。色彩是人类对画面最直观的感受，这就要求设计师必须在较短的时间内让用户产生共鸣，并让用户快速理解信息中的意思。

在Banner的色彩选择上，电器类Banner主色调主要应用蓝色和黑色，蓝色给人科技感，而黑色又给人以神秘的感觉；护肤品类Banner常采用绿色和白色，绿色像大自然的颜色，被视为生命的颜色，给用户带来清新自然的感觉；商品类Banner则经常选用暖色调色系，暖色系给人温暖，诱人的感觉，让用户有点击的欲望；而在一些奢侈品Banner中，设计师会运用金色和银色，这两种颜色象征着富贵和财富，潜移默化中体现产品的档次；食品类Banner会使用橙色，橙色是丰收的感觉，勾起用户的味蕾。

3 趣味性设计

由于当代社会的多重因素互相作用，趣味性设计已经成为不可避免的发展趋势，可以引发人们的兴趣，让人获得极大的精神满足与愉悦感。一个优秀的设计作品，是需要达到一定的戏剧效果的。通过创新的趣味性设计，满足社会大部分人的需求，使大众更愿意使用，并且乐在其中，感受到强烈的心理需求，这样的设计作品才是最具有吸引力的作品。

马斯洛认为：人在自我实现的创造性过程中，产生出一种所谓的高峰体验的情感，这个时候是最激荡人心的时刻，是人存在的最高、最完美、最和谐的状态，这时的人欣喜若狂、如痴如醉，正是这种设计的参与性增添了趣味性，从而使设计更有生命力和活力，成为人们自我实现的一种创造性过程，并成为不断吸引人的一种有效手段。

尼采说：艺术是生命的兴奋剂。生命将蕴含并体现于人类对物的设计和使用过程中。设计师的工作即是使人们通过对趣味性作品的体验，从高度紧张的工作状态中解放出来，使人的心理更加愉悦和健康，更加丰富人类的情感。

在Banner的设计中，同样也需要趣味性设计。优秀的Banner设计就是在传达文案的同时，让人看后会心一笑，带给人额外的愉悦感，给人超出预期的感受。例如，一组鞋子的Banner设计，鞋子加上手，看起来就好像是一个人，把鞋子拟人化，用户看后会觉得有乐趣；雨靴的Banner设计，雨靴可以为你抵挡住风雨的侵袭，把雨靴比作一个撑伞的人，更加直观明了地表达了雨靴的作用，同时又给用户以趣味性。

4 结语

信息传播与视觉表现之间存在千丝万缕的关系。目前，网络传播正在改变着人们的生活方式和生产方式。因此，通过良好的视觉表现让信息展现在用户面前，是目前重要的环节和课题。

在信息时代，Banner已经成为互联网信息传播的一个主要媒介。设计师在设计Banner的时候，应该考虑字体、色彩、排版等多种因素，分析用户的心理和使用环境，并结合科学的分析，将信息合理并完美地呈现在用户的眼前，让用户留下深刻的印象。

参考文献：

[1]李婧婧，韩静华.基于Banner的视觉传达设计[J].包装工程，2016（4）：55-58.

[2]郭宇承，劉淼.海报设计中图形表现形式的创新[J].包装工程，2014（12）：76-79.

篇7：浅谈网站BANNER图片设计

关键词：平面构成；网页banner设计

一、平面构成的含义

平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言，他可以是抽象的，也可以是具象的，可以是感性的，也可以是理性的，同时它也不是独立存在的，而是伴随着色彩、肌理、光影等而存在的。基本上世间万物，所有我们接触到的或无法接触到的，看得见的或看不见的事物里都有平面构成的运用和身影。

二、网页Banner设计的主要组成

在网页设计中，网页Banner的主要作用，包括宣传、展示、广而告之、准确传达信息等。分析Banner设计中的组成要素，主要包含四个方面：文字（文案） 、图像（商品、模特等的图像）、背景以及部分点缀物。

三、在网页Banner设计中的平面构成

平面构成主要是在二维空间运用点、线、面结合一定的规律所形成的一种视觉语言，而Banner中的所有元素其实都可以看作是平面构成里的点线面这些构成元素。

（一）元素与元素之间的排列关系

元素与元素之间的排列主要有以下几种：分离、相切、重叠、透叠、结合、减缺、差叠、重叠等。分离是形与形之间不接触，并有一定距离；相切是形与形之间的边缘正好相切；重叠指形与形之间叠盖、遮挡关系；透叠是形与形有透明性的相互交叠，但不产生上下前后的空间关系；结合是形与形相互结合成新的形状；减缺是形与形相互叠压，叠压的形状被剪掉，形成新的形状；差叠是形与形相互交叠，交叠的部分产生一个新的形；重合是形与形相互重合，变为一体。

（二）所有元素在一起所体现的构成形式

从所有元素（点线面）整体看，其构成形式主要有重复、近似、渐变、变异、对比、集结、发射、特异、空间与矛盾空间、分割、肌理及错视等等。

（1）重复，指在同一设计中，相同的形象出现过两次以上，重复是设计中比较常用的手法，以加强印象，造成有规律的节奏感。如：形状、骨骼、大小、色彩、肌理、方向的重复等。

（2）近似，近似指的是在形状、大小、色彩、肌理等方面有着共同特征，它表现了在统一中呈现生动变化的效果。近似的程度可大可小，近似程度大就产生重复感，近似程度小会破坏统一。

（3）渐变，是banner设计中常用的一种效果，在行驶的道路上我们会感到树木由近到远、由大到小的渐变。类似的有形状、方向、位置、大小、色彩、骨骼、光影的渐变等。

（4）对比，有时候是形态上的对比，有时是色彩和质感的对比。对比可产生明朗、肯定、强烈的视觉效果，给人深刻的印象。

（5）密集，在设计中是一种常用的组织图面的手法，基本形在整个构图中可自由散布，有疏有密。最疏或最密的地方常常成为整个设计的视觉焦点。包括，点、线、面的密集等形式。

（6）发射，是一种常见的自然现象。发射具有方向的规律性，发射中心为最重要的视觉焦点，所有的形象均向中心集中，或由中心散开，有强烈的视觉效果。有中心点、螺旋式、同心式的发射等。

（7）特异，是指构成要素在有次序的关系里，有意违反次序，使少数个别的要素显得突出，以打破规律性。包括形状、大小、色彩、方向、肌理的特异等。

（8）空间，可以利用大小产生空间感，比如近大远小；也可以利用重叠，塑造前后、上下等关系；利用阴影可以使物体具有立体感、空间感；通过疏密可以塑造不同的距离感；利用透视，平行线由宽到窄；利用色彩，冷色远离，暖色靠近；利用肌理，越粗糙越近，越细腻越远等。

（9）分割，把整体分成小的部分。像等形分割、自由分割、比例与数量等。

（10）肌理，又称质感，由于物体的材料不同，表面的排列、组织、构造等不同，因而产生粗糙感、光滑、软硬感。

（11）错视，因空间距离或周围环境所造成的视觉差。主要有缪勒—莱依尔错视、垂直线与水平线的错视、透视错视、正方形的错视、黑白错视、由于图形结构的影响而产生的错视、对比错视等。

（三）形式美法则

美的主要形式有和谐统一、对比突出、对称、画面平衡、视觉重心、节奏韵律等。

和谐统一，是指元素与元素之间，或所有元素构成的整体是一种协调的关系，比如大小、颜色风格等的协调；对比突出，比如大小、数量、色彩、形状的对比；对称，假设在一个图形中间画一条垂直或水平线后，画面的左右或上下2边是可以完全重合的，则我们称之为对称；画面平衡，即元素与元素之间，元素与整体之间的大小、形状、数量、色彩、材质等的分布与视觉上的平衡；视觉重心，通过对画面中元素的数量、颜色、位置、大小、材质等进行处理，画面中所出现的视觉焦点；节奏韵律，画面中的一种或多种元素按一定的规律排列，会产生音乐一般的旋律感。

在设计中，所有的Banner版式都是有一定的规律可循的，前面提到，Banner是由文字、模特或商品、背景、点缀物等组成的，而所有这些元素就相当于我们平面构成里的点线面，当我们改变这些元素的角度、距离、大小、数量、样式、颜色等，新的版式也就产生了。

四、平面构成在网页Banner图设计中的作用

篇8：图片网站的前景

网上相册。几乎所有的门户网站都有相册业务，作为一种类似于邮箱业务的存储服务，为门户网站带来了流量和眼球，提高了页面广告的点击率。可以说，网上相册是门户网站的附属业务，作为单独的业务没有运营价值。做得比较聪明的是谷歌，用桌面图片组织软件上传图片，轻而易举进入网上相册市场，省了网易们的广告钱。

图片分享。以Flickr为代表，网罗了几乎所有能想到的图片加搜索功能，为个人门户空间提供素材，图片作为翻页最多的浏览内容也成为网页的主打产品。图片分享多以复制和抄袭的内容为主，涉及版权问题，也不具备独立经营的可能性，绝大部分图片网站以点击广告甚至图片处理软件下载渠道生存。

幻灯秀大头贴。以Slide、Photobucket为代表的幻灯秀大头贴几年前风靡一时，加上在Facebook、MySpace上的病毒传播效果，使用者非常踊跃。不同于传统相册，幻灯秀大头贴利用相框、特效、主体进行软广告，获取了一些收入，但目前的状况还是入不敷出。

在线处理。以Photoshop为代表的免费在线处理软件极大降低了使用成本，但是学习的成本仍然比较高，上手还是不容易。光影魔术手之类的软件相对于Photoshop简单了很多，但是功能的复杂程度和处理速度慢仍然是很大的问题。这点上它们不如幻灯秀大头贴来得直接和简洁，在线处理完全没有商业模式。

打印服务。以惠普咔嚓鱼为代表的众多图片印刷品公司是在商业模式上最靠谱的，也再一次印证了互联网必须“落地”才有钱赚的真理。有在咖啡杯上印图片的、有在T恤上印的，有将图片制作成相册的……说白了这就是个纪念品市场，印刷内容是刺激冲动消费的，但是纪念品的价值跟销售地点和时间点有极大的关系，所以这个市场的容量也很有限。还有人搜集组织艺术家的创意图片，按季节、按主题卖给服饰厂商，获取微薄的收入，但目前还不成气候。

虚拟现实。在真人图片中加入卡通图像的图片合成网站，其实也是在线处理的一种，是幻灯秀大头贴的下一代图片娱乐网站，暂时完全没有商业模式。

所以结论是，不管数码相机如何大量制造照片，互联网如何以几何数字的速度传播、复制图片，只要不落地，就没有办法变现。作为服务提供商，如果没有强有力的广告能力，单靠图片和图片工具是没法养活自己的。