解析Banner广告条设计的点横竖撇捺

2016-02-17 02:15 17 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐解析Banner广告条设计的点横竖撇捺,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - 平面设计 】

文字,这种与人类历史几乎同步的信息表达形式,同样也是视觉传达设计中最重要、最基础的元素之一。她的历史沿革应该已经有非常多的同学做过分享介绍,这里就不再赘述。我想讲述的是字体在网页设计中的运用,她最为常见的一种承载形式:banner字体设计,这几乎是每个Web设计师都会遇到的设计内容,不论是通栏、半通栏,还是各种大大小小尺寸以及活动营销推广的页面头部,都可以看到字体设计的身影。

阿里巴巴中国站首页改版后对于页面内的banner推荐位有了更高的要求,这也引发了我对如何做好一条banner的思考,我觉得在banner设计中相对图形及背景元素的运用,文字本身的设计与排版要重要很多,即使在没有任何背景元素的情况下,文字依然可以良好的传达信息,因此如果我们对banner上的文字进行巧妙设计不仅能鲜明的表达设计主题还能够增强用户关注度从而获得高的点击率,更可以提升网站页面审美价值,也只有理清的这样的思路才能更好的制订设计规范,保证页面广告投放质量的一致性。

下面根据我的理解大概的罗列了几种平时最常见banner字体设计表现形式(视觉大牛们请轻拍):

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

根据文字本身的具体内容及其含义,使得文字的笔画结构与文字内容含义一致,符合用户的心理预期,下图中断字就故意在最后一笔切断。

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

思考banner的观众是谁或者说这个产品是谁用的,针对儿童类产品,在字体的表现上可以幼稚活泼一些,在设计上增加一些童趣的意味,假如是针对机械类产品,可以在字体笔画结构上做的硬一些,棱角分明,假如是针对女性的,文字的构建上可以纤细柔美、也可以时尚秀丽,假如

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

根据不同的主题氛围进行设计,如端午节,中秋节等传统节日进行的推广设计,可以增加人文的设计元素,如使用书法字体,用字体去烘托这个氛围,同样比较常见的还有一些使用礼品带、花枝藤蔓等装饰性元素结合文字出现以增加设计的美感。

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

用辅助图形与字体结合,这样的组合方式非常常见,设计原理就是根据字意词意,使用与之相关的图形元素与字体笔画形体相结合,图形元素的使用可以是具象的也可以抽象的,但对于这个的形式也很容易陷入设计泥潭,过分的强化图形或者说图形过于复杂,反而对字体有效传达造成影响,在设计时尽可能避免过度设计。

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

作为五笔画的最后一笔,除以上讲述的内容外,对于banner中的字体设计还是应该追本溯源,形式上的美感自然是设计表现的一方面,但再好看的商业设计也不能脱离一个设计关键要素:易识性,怎样才可以让字体既美观又具有良好传达力的呢?

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

1.咱们在做字体设计的时候,笔画粗细及风格要做到统一,这里说的统一并不是让你将文字的所有笔画粗细都调整的一摸一样,而是对于在一个词语内,同样的点与点或者横与横等需要尽量保持一种大小粗细,这样的好处是不会出现同样的笔画却大小不一,视觉上很凌乱的感觉。在完成了这样的粗细调整以后,为了使文字更富有变化,对于常见的勾、折等也应该进行风格上的统一,尽可能让文字结合起来看的时候拥有相对一致的视觉感受。

2.空间上的平衡,简单的说就是在进行字体设计时需调整空间留白,汉字的字型有繁有简,合理的分配笔画内的留白空间,才可以使文字看上去更为协调,不会因为有些汉字过于繁琐,空间留白不够导致很挤很压抑的极端情况。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

3.为了解决可能出现的某几个字的笔画相差太大,在视觉上容易出现轻重不一的情况,对于设计完成的字体组合还有一次针对整体的微调过程,尽可能达到视觉的平衡感与一致性。

解析Banner广告条设计的点横竖撇捺,PS教程,图老师教程网

写在最后,这篇文章仅作为自己一段时间的设计知识积累,用于展示的案例图片都是取自平时的网络收集,之所以用点横竖撇捺作为标题是因为这是汉字书写最为基础的笔画,同样文字也作为视觉设计的最为基础的元素存在,两者之间存在一定的相通性,大师说设计不是一种技能,而是捕捉事物本质的感觉能力与洞察能力,很赞同。希望这篇呓语之文能多多少少给大家带来启发,也希望能抛砖引玉获得更多的相关分享,不胜感激。

来源:http://www.tulaoshi.com/n/20160217/1577555.html

延伸阅读
1)撇捺的弧线呼应 下面这些字体都是通过撇捺的处理来呼应的,如果文字里撇捺很多,或者横折弯钩这类笔画很多,我们可以直接利用撇捺强化来使字体得到呼应,上图是笔画的弧线呼应。 笔画可以粗,可以细,末端也有尖锐,和敦实的处理,这里笔画的练习,就需要考虑笔画的处理, 我们练习连笔可以不必过多的考虑笔画的粗细,这里就需要注意笔...
标签: ASP
  function ShowAd(){   var Ad_Img=new Array(10);   var Ad_Link=new Array(10);   var Ad_Showtime=new Array(10);   var Totle_Showtim=0;      //投放广告的图片路径   Ad_Img[0]="/img/banner/01.jpg";   Ad_Img[1]="/img/banner/...
标签: PS PS基础
本期教程中我们将设置图层样式效果来制作一个内部具有斜纹效果的网页广告条,制作中主要使用了外发光、渐变叠加、图案叠加等图层样式效果。具体的方法读者可跟随教程同步制作并逐步了解。 开始实例的学习之前,可以先下载实例的配套素材,然后跟随操作步骤进行学习。 素材: MissYuan_教程素材.rar (1)运行Photoshop CS5,执行文件→打...
Banner设计可以说是我日常工作中最主要的一块需求,banner不比大型项目,从设计成本上来讲不可能给太多的时间给设计师,所以这也引发了我对如何更有效率地完成一个banner的思考。我觉得构成banner的重点主要有三个方面,即风格,排版以及配色。我个人的习惯是先定风格,再做大致的排版和配色,然后根据整体再来调整,最后再优化细节。 下面我...
动画型广告是最显眼的广告方式,可以在花花绿绿的网页中让浏览者无意中注意到广告内容,以达到宣传的目的,这样可以提高广告的点击率。 本例思路 .导入汽车素材,然后制作出汽车出现动画广告。 .在Flash的辅助软件SWiSHmax中制作文字动画。 .导入汽车剖面图素材,然后制作出汽车剖面图广告。 Part 1 制作汽车...

经验教程

960

收藏

79
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部