一个banner的设计——字体字形篇

作者:LipengBian

筒子们好,今天我们一起来探讨一下Banner的设计,在这一次的教程中我会介绍一些平时总结下来的可以让banner迅速达成效果的简单小窍门,如果你在平时有大量的banner设计工作,并且总觉得时间不够用,那么希望本次的教程可以帮助到你。

好了,那么我们进入正题。

首先让我们认识一下banner,平时大家在各种网站或者移动端的app里经常可以见到,印象里他们大都长这个样子:

当然了,这就是我们常说的banner,但其实banner还有几个远房表兄、同父异母什么的兄弟姐妹们,它们可能长这个样子:

恩……其实以上这些在广义上来说都可以归纳为Banner,就形状来说现在的banner也已经不再局限于从前大家所理解和看到的那些出现在固定广告位的长条形广告了,他可以是长的、方的、必要的时候也可以是其他什么乱七八糟的形状,总之,不管是侧边栏广告、焦点图、专题页的头图、我们都可以理解为是banner,在设计方法上,其实都是共通的。如果要是分类的话其实可以大概分为两类:

1.“促使点击”

2.“渲染气氛”

第一种就是大家经常在各种大大小小的网站都能看到的广告banner或者焦点图,她们有大有小可长可短,但是他们共同的作用就是通过各种方式引导你去点击。

通常你在做这种类型的banner时,一般会是上图这个场面。

第二种大家通常可以在各种游戏网站,房地产网站,各种活动专题页中见到,也就是大家常说的头图,这种类型的banner通常并不是引导用户去触发点击,而是服务于内容,为整个页面做好气氛的渲染。

通常你在做这种类型的banner时,一般会是上图这个场面

说这么多,其实我是希望通过这种介绍和分类方式,让大家在拿到设计需求时可以确定一个正确的设计方向,降低设计成本,从而提高工作效率。

下面我们介绍几个设计小窍门,也许通过这些方法可以让你在最短的时间内有效的达成效果。

首先我们来说一下字体和字形,大家都知道我们从图形上解读信息的能力是要大于单纯的阅读文字,但是在banner的设计中,大多数情况下我们都是通过文字来了解信息,图片只是起到一个衬托的作用,在我自己平时做banner的时间分配里对字形的处理可能要占到百分之五十甚至更多的时间,所以今天我们重点来说一下这方面的处理技巧

1.钢笔造字

钢笔造字是在做字形设计上一个比较讨巧的方法,但却又十分有效。对平时没有太多字形设计经验的同学来说非常适合的,只要你了解基本的字形设计规律(笔画的粗细,字体的重心等),那么此方法可以让你快速的让banner高大上起来,具体的设计方法大家可以移步字形设计大师@刘兵克老湿的设计教程:http://v.youku.com/v_show/id_XNDI4MDMwMTg4.html

2.笔画链接

当你没有时间完整的设计banner上字体的字形时,笔画链接未尝不是一种好的方法,在做笔画链接时只有合理的安排需要链接的笔画,做到不突兀,不影响易读性,那么都会出来一个比较好的视觉效果,在做笔画连接的时候我推荐大家使用一些笔画粗细比较统一的非衬线字体比方说雅黑、悦黑、幼圆等等。

3. 随“意”变形

顾名思义就是根据文字的具体含义来设计字形的一种方法,当上面介绍的两种技巧都让你感觉头大的时候不妨试试这种处理技巧,你只需要脑洞大开,了解文字的具体含义并用相应的图形在文字上加以体现就可以了,就酱简单!

4. 3D

如果要在banner中想突出文字,把文字做成3D效果可谓是最“粗暴”的一种解决方法,只要处理方法得当也可以达到很好的效果,如何处理3D这种细节问题这里就不提及了,网上有大堆大堆的教程可供参考。切记,处理3D文字的时配色是关键,稍不注意就会显得山寨和俗气。

好了,以上是一些在设计banner时可以用到的字形设计技巧,可能有童鞋要说我平时banner的设计工作很繁重,时间也很紧张,没有精力去做字形,或者由于版权的问题,在大多数情况下不得不使用那么几种字体,像这样的情况有没有好的办法让banner中的文字出效果呢。答案当然是有啦,下面就给大家介绍几个方法。看看如何在使用简单的默认字体的同时打破字体的沉默。

字体如何打破沉默——不破不立

看到没有,同样是简单的字体,只是打破了整段的文字,做单个字体的倾斜,整体看起来就活泼跳动了很多,或者可以做单个字体的叠加,凹凸效果同样可以让简单的默认字体变得跳跃起来。

如何打破字体的沉默——空间独立

说起这种方法我们就不得不提到banner中的空间关系,在设计banner时通常我们如果我们想突出文字,那么就要使文字和背景拉开空间,而为文字做一个简单的纯色底色不可谓不是一个省事的办法。

如何打破字体的沉默——斜能压正

如何打破字体的沉默——长短粗细变换自如

通常我们在做一段文字的排版时,经常会根据段落中的关键字做相印的加粗或者高亮,这种方法看似简单,但是在实际操作的过程中稍有不当就会导致整段字体看起来凌乱不堪,其实只要设计的时候把文字看作图形,注意整个字体排版的走向是否有规律可循就容易很多。

OK,以上就是今天为大家总结的一些字形与字体的处理方法,希望对大家有所启发,在banenr的设计中还有很多种有效的技巧可以用到,如果你有什么特别的技巧也可以告诉我们。

就到这里了,下期见~

码字很辛苦,转载请注明来自蓝色早晨-UED的《一个banner的设计——字体字形篇》

一个banner的设计——字体字形篇相关推荐

  1. 转:一个banner仔的自我修养(1) ——字体字形篇

    作者:LipengBian 筒子们好,今天我们一起来探讨一下Banner的设计,在这一次的教程中我会介绍一些平时总结下来的可以让banner迅速达成效果的简单小窍门,如果你在平时有大量的banner设 ...

  2. 网站设计分析:banner中的字体结构

    对于我们通常所看到的网站banner,它的本身形状决定了其固定的构成方式一般为矩形,横幅,左右结构和居中,它的文字特点是主题式,一般分为主标题和副标题,文字较多,设计的时候还需要考虑应用到网站各种尺寸 ...

  3. truetype字体怎么转换成普通字体_banner设计字体怎么设计好看

    本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享banner设计字体怎么设计好看?随着网络的发展,如今,大家最常见的应该就是网页banner广告了.对于Banner设 ...

  4. 电商干货!Banner图设计之商品图该怎么玩(上集)

    编者按:拿到一个banner设计需求后该如何动手?不同风格的Banner都有什么规律可以借鉴?今天@TTTing1 (京东用户体验部)这篇好文不仅分享了拿到设计需求后5个应该执行的步骤,而且还对六种常 ...

  5. 刚学平面设计如何用简单的方法来设计字体

    本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 刚学平面设计如何用简单的方法来设计字体?设计师在日常工作中每天都在跟字体打着交道,视觉传达的根本目的是传播信息,文字 ...

  6. 33岁想从头学做网页设计_从头开始设计字体-并在24小时内将其提交给Google字体...

    33岁想从头学做网页设计 by James Barnard 詹姆斯·巴纳德(James Barnard) 从头开始设计字体-并在24小时内将其提交给Google字体 (Designing a font ...

  7. 经验分享:移动客户端设计开发经验-流程篇

    和PC端网站的设计和开发相比,移动客户端的开发工作,对绝大多数人来说,绝对是一个崭新的行当. 那么,当我们每天在iphone上,在各种安卓在各种pad上习以为常的刷着微博看着网文切着西瓜找着你妹的时候 ...

  8. 移动端界面设计之尺寸篇

    画布尺寸: 新建750×1334  分辨率72,像素/英寸. 常见的字体大小: 24px.26px.28px.30px.32px.34px,36px等等.记住是偶数的.最小字号20px. 字体: 中文 ...

  9. 移动客户端设计开发经验-流程篇

    和PC端网站的设计和开发相比,移动客户端的开发工作,对绝大多数人来说,绝对是一个崭新的行当. 那么,当我们每天在iphone上,在各种安卓在各种pad上习以为常的刷着微博看着网文切着西瓜找着你妹的时候 ...

最新文章

  1. volatile关键字之全面深度剖析
  2. Layui Excle/csv数据导出
  3. 关于微型计算机主板的描述错误的是,2016年9月计算机一级考试试题及答案「单选」...
  4. 操作系统第四章-文件管理
  5. 1036 跟奥巴马一起编程 (15 分)(c++)C++
  6. 【leetcode记录03】动态规划
  7. 学习笔记----linux下编译samba
  8. 【知了堂学习笔记】MySQL数据库常用的SQL语句整理
  9. html仿京东快速购物导航,jQuery仿京东楼层滑动侧边栏高亮(原创)
  10. 数学建模学习笔记(三)——插值算法
  11. 分子机制研究的五个层次,你的研究在哪个层次--转载
  12. 简历人才库系统_人才招聘简历的3种选择
  13. Angular通过CORS实现跨域方案
  14. pair的用法 make_pair
  15. Google IO 2015 Material Now
  16. 如何从Mac桌面隐藏各种标准图标?
  17. 中班机器人歌曲_幼儿园机器人教案音乐
  18. 基于django的视频点播网站开发-step15-项目部署 1
  19. deflate php,gzip和deflate的几点区别
  20. Android 8.1 DisplayPowerController(三) 亮度调节

热门文章

  1. 图形处理(九)点云重建(下)法矢求取、有向距离场等值面提取
  2. Mac上使用宁芝普拉姆键盘的记录
  3. 目前中国大陆手机号码正确格式正则表达式
  4. 查看mysql状态 关闭_查看mysql状态
  5. 京东mcn入驻条件是什么?
  6. .animate在360浏览器和谷歌浏览器同时生效
  7. GIMP:利用蒙板工具实现人像抠图
  8. 【Python 第7课】if的介绍和使用
  9. goolge安装插件
  10. React 生命周期简介