Banner是一个网站的中心主题,可以从banner看出网站的内容。所以一个好的banner对网站的影响很大。

提高banner的制作从几点深入了解:文字排版、选择适合的图片及背景、颜色的用法。

一、文字排版

文字中间大,上下小,大部分的排版都在遵循着这个规律,因为人们视线是散发性的,而且这样的做法可以让画面更具有张力。

Banner上的字没有要求,但一定是易识别的。人们买东西不是猜谜语和欣赏,就是要简单。

聚拢原则,不要让用户到处找文字信息,这样也可以让画面看的更加规整,不会使画面看着很乱。

二、选择合适的图片和背景

如果本身就有现成的不错的实景拍摄照片拿来用,那就最好了,不过需要注意的一点就是,我们把照片拿来直接用的时候,一定要保证文字信息的可阅读性。

选择使用场景作为背景,当然也是需要处理图片的色彩。

我们要记住,背景就是一个陪衬,不能抢了主角的风头,同时背景又在整个设计中起到了烘托主题渲染气氛的作用,所以背景应该未然设计主题来展开制作,选择图片要清晰,产品图不宜过多,遵循近大远小的原则,最好和文字之间有交互联系。

编辑:千锋UI设计

UI设计课程教程分享:Banner的设计和技巧的更多相关文章

  1. UI设计教程分享:banner设计

    我们都知道在一个网站中,banner图片对于浏览者来说是非常重要的,尤其是电商banner,它的最主要目的是营销,是要让消费者有冲动去购买,这对设计的要求也就更高了.而企业网站也一样,一个合适的ban ...

  2. ui设计学习路线图分享送给初学者

    本文来源:千锋UI设计 Ui设计师就业市场前景及薪资很可观,而且现在市场上对于ui设计师的人才需求也很大,所以,现在越来越多的人看好这一行业,纷纷投入到ui设计的学习中来,那么想新手想要学好ui设计, ...

  3. 详解 “Android UI”设计官方教程

    我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Andr ...

  4. APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)

    正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...

  5. 今日工作总结:jquery轮转效果的集成与前台页面banner的设计思路总结

    今日做了两个项目中的两个问题,现在特来总结一下,以便分享给更多的朋友们. 1.jquery轮转效果的集成 涉及到jquery的不同版本问题,解决办法是在后缀用jQuery代替$.项目地址在:121.4 ...

  6. UI Prototype Design IDE( 界面原型设计工具 )

    UI Prototype Design IDE( 界面原型设计工具 )   如何用工具去与客户进行交流,互动,定义要做的系统,什么什么的... 0.Balsamiq Mockups http://ww ...

  7. Java 课程设计 "Give it up"小游戏设计(个人) 201521123077

    1.团队课程设计博客链接 http://www.cnblogs.com/agts/p/7067948.html 2.个人负责模块或任务说明 个人任务:实现游戏画面的制作,游戏逻辑的编写,以及一些模块与 ...

  8. 老徐FrankXuLei 受邀为花旗银行讲授《微软WCF服务分布式开发与SOA架构设计课程》

    老徐FrankXuLei 受邀为花旗银行上海研发中心讲授<微软WCF服务分布式开发与SOA架构设计课程> 受邀为花旗银行上海研发中心讲授<微软WCF服务分布式开发与SOA架构设计课程 ...

  9. 通达OA 小飞鱼老师OA工作流设计课程教学网络公开课之HTML基础(一)

    通达OA网络教学公开课開始了.有须要的小伙伴们抓住机会奥. 8月29号晚8点不见不散.本次课程的主要内容是通达OA工作流设计课程中须要用到的Html部分学习. 帮忙转发的朋友加送一节VIP课程.

随机推荐

  1. CentOS6.5安装MySQL5.7详细教程(本人6.3也行)

    本文参考http://www.cnblogs.com/lzj0218/p/5724446.html 主要参考博文: https://segmentfault.com/a/119000000304949 ...

  2. 弹性盒子 flexbox 元素居中

    1 .navtext{ width:800px; height:600px; border: 1px solid black; justify-content:center; align-items: ...

  3. XSS和CSRF的区别

    XSS:攻击者发现XSS漏洞 => 构造代码 => 发送给受害者 => 攻击者获取受害者的cookie => 完成攻击 CSRF:攻击者发现CSRF漏洞 => 构造代码 ...

  4. ss源码学习--工作流程

    ss的local端和server端的工作流程相似,因此复用了TCPRelay类和TCPRelayHandler类. 两端均是使用TCPRelay类监听连接,并使用TCPRelayHandler类处理请 ...

  5. 【OpenGL】纹理(Texture)

    纹理是一个2D图片(也有1D和3D),它用来添加物体的细节:这就像有一张绘有砖块的图片贴到你的3D的房子上,你的房子看起来就有了一个砖墙.因为我们可以在一张图片上插入足够多的细节,这样物体就会拥有很多 ...

  6. DataGridView中DataGridViewComboBoxColumn的一些相关应用(一)让其值改变时触发事件-转

    转自  https://maodaili.de/mao.php?u=a%2FMrbEvUE8PnCuc7FrhJi0Rqd3kmOBHPZUbcJ1c2hbJUK0RYWpAf4lhIOddItP%2 ...

  7. Android 心跳动画

    直接上代码  MainActivity public class MainActivity extends AppCompatActivity { private ImageView ivHart; ...

  8. Codeforces Beta Round #16 (Div. 2 Only)

    Codeforces Beta Round #16 (Div. 2 Only) http://codeforces.com/contest/16 A 水题 #include<bits/stdc+ ...

  9. #define宏重定义

    #define A 1 在同一个工程的另外一个文件里又定义了#define A 2 并不会报错(2010vs) 亲测可用 但是最后该宏变量A的值 ,应该是预处理-----顺序处理------最后一个运 ...

  10. freetype教程网址

    http://freetype.sourceforge.net/freetype2/docs/reference/ft2-system_interface.html#FT_Stream      ht ...