论坛 › Web技术 › 中文字体设计技巧及经验

eben 发表于 2010-4-29 19:09:36

中文字体设计技巧及经验

http://image.zcool.com.cn/18/59/m_1268094353840.jpg

下面开始啦！

心法
既然是武功秘籍 肯定有内功心法 那我们就先从内功开始练起


20100116_0b8ae326800f9e1a6a5cq2yM15YToCc6.jpg


两仪

大家对太极图肯定都很熟悉了 阴阳阴阳 有阴必有阳 这是太极的两仪

也就是说凡事都有两面 做设计也一样 在同一个命题下 一个设计方向的背后肯定还有另外一个完全不同的设计方向




attachimg.gif


http://image.zcool.com.cn/16/1/m_1268094270424.jpg

四象

我们先来看这个由太极演化而来的工具

http://image.zcool.com.cn/54/28/m_1268094275914.jpg

我把字体设计归为4个要素：

框架－－自由

个性－－识别性


我先解释下这4个要素

框架：大家都知道 汉字 俗称方块字 这个方块呢也就是框架了

自由：这个自由是相对框架而言 也就是不受方块约束的字体（例如草书）

识别性：既然是字 那肯定要大家都能认识 有的字经过设计以后还能很方便的认出来 也有的字设计完后要经过一番思考才能认出来 这就是识别性的强和弱了

个性：这个也是相对识别性来说的 有的设计师为了强调某种个性 而牺牲掉识别性 例如：涂鸦字体 以前街头给人画龙字啊凤字的师傅就是个性字体设计高手


他们之间是相对的 （现在你看不懂没关系，继续看下去你就明白了）

这个工具有啥用呢？

我们再看 由四象推算出来的八卦 你可能会明白一点了



http://image.zcool.com.cn/39/59/m_1268094280093.jpg

我们先看篆书，位于这个坐标工具左上角 也就是框架和个性的极限交汇点上

先看形态 很明显篆书是严格的在方块进行造型的 也就是以框架为基础来设计的
由于篆书是象形字转化而来还没完全脱离象形字的构造 在我们今天看来这种字体充满了个性 但识别性就比较差了

楷书：形态：依然是框架结构 识别上非常容易 所以它处在这个坐标工具的右上角 相对的来说 个性就比较少了 四平八稳

草书： 形态：没有框架 随心而置 识别上比较困难（你找找历代书法看看 看你能完整的认出多少来）但个性就非常强烈了 看的多的话 你不用看落款你就知道这是那个书法家的作品

行书：形态：没有框架 识别上较容易 个性和识别性兼备

这个坐标工具我主要用做分析别人字体设计的工具和作为自己设计字体时候的指南

说了这么多 你会用这个工具了么？还不会？！！！！ 没关系 ～～我继续讲解


框架式字体设计

http://image.zcool.com.cn/25/15/m_1268094283210.jpg


下面我先讲框架式字体的方法

从坐标工具来看 框架式字体设计 位于坐标工具的上半部分

attachimg.gif


http://image.zcool.com.cn/38/3/m_1268094284565.jpg

在造字之前呢 我们先用坐标工具分析下这类字体的特点


http://image.zcool.com.cn/45/59/m_1268094287885.jpg


http://image.zcool.com.cn/14/20/m_1268094288753.jpg

请仔细观察下面这些字体！！！－－形态？个性在那里？识别性强？弱？

http://image.zcool.com.cn/38/46/m_1268094293132.jpg

这类型的字体 结构方正 个性鲜明 识别性较强 放在坐标工具上来分析的话 他们都处于白色圆圈这个范围内（你能将上图每个字体在坐标工具上不同的位置都标示出来么？）


http://image.zcool.com.cn/22/42/m_1268094293552.jpg

下面这个是我为一个房产项目所做的一个字体设计 请注意：形态？个性在那里？识别性强？弱？


http://image.zcool.com.cn/14/61/m_1268094298181.jpg

这个字体的特点：方正 很正统的框架式字体设计 字体重心全部上移 左方右圆 落脚呈尖刀状


http://image.zcool.com.cn/4/19/m_1268094299225.jpg

why???????????????这个字体为什么设计成这样？？？？？？？？？？？？？？？？
接着看

attachimg.gif


http://image.zcool.com.cn/8/5/m_1268094300901.jpg


http://image.zcool.com.cn/15/30/m_1268094302970.jpg



http://image.zcool.com.cn/52/3/m_1268094305281.jpg

这个字体设计的概念很简单：飞跃平凡的生活
飞跃－怎么用字体来体现飞跃呢？

A:我先从结构上下手：

1:把字体重心整体上移 造成向上的动感

2:拆除字体里的封闭结构（翼的田字）减轻字体本身的重量感 来强化整体向上飞跃的动感

B:从笔画上下手：

1：由于面对的客户男女都有 所以我选择左方右圆 这样就刚柔相济 比较中性

2：落笔融入羽毛的特点（落脚呈尖刀状） 贴近创意原点 并再度强化向上的飞跃感

大家可以看看 字体设计和平面表现的关系
http://ska2016.blogbus.com/c1940982/index_8.html







框架式字体设计的基本方法

http://image.zcool.com.cn/19/7/m_1268094308277.jpg


在开始做字体之前 我一般会先选择参考字体

为什么要找参考字体呢？ 字库里的字都是专家多年研究和经过大众审美肯定的字体，有个巨人的肩膀让你站为什么不站呢？

attachimg.gif



http://image.zcool.com.cn/43/0/m_1268094312982.jpg

字库里那么多字体 怎么选呢？选衬线体呢？还是无衬线体？（关于衬线体和无衬线体请查阅相关资料）



http://image.zcool.com.cn/62/21/m_1268094313621.jpg

简单点来说

古朴 经典的个性 就选 衬线体

现代 简约 的个性就选 无衬线体来参照

选了参考字体参考什么？？？？？？？？？？？？？？？？




参考结构

attachimg.gif


http://image.zcool.com.cn/3/7/m_1268094317856.jpg


http://image.zcool.com.cn/40/49/m_1268094319200.jpg



这些基本的结构常识相信大家都知道

我讲一个框架式字体设计的秘诀：


http://image.zcool.com.cn/40/51/m_1268094320876.jpg

没错！ 顶天立地！

只有贴紧框架四边 整个字形才会显得饱满（写过pop的人都知道）

我们看下范例

attachimg.gif



http://image.zcool.com.cn/51/52/m_1268094323822.jpg

在调整结构的同时 加入个性 和让笔画占据框架的4向
以下范例都是典型代表

http://image.zcool.com.cn/58/32/m_1268094325155.jpg



http://image.zcool.com.cn/18/29/m_1268094328063.jpg


个性的塑造

在完成字体的基本结构后 我们现在来为字体加入个性

如前所叙 我就不多说了 看图

http://image.zcool.com.cn/1/47/m_1268094328899.jpg

下图中的字体设计 你能说出设计师为什么要那么设计了么？他们是怎么为字体设计调整结构和加入个性的呢？它们各自的参考字体又是什么？


http://image.zcool.com.cn/13/23/m_1268094332832.jpg



下图 是从参考字体 到 新的字体设计的一个流程图


http://image.zcool.com.cn/9/45/m_1268094335562.jpg

我们现在 再重新来审视这个字体设计：

http://image.zcool.com.cn/26/61/m_1268094338095.jpg

eben 发表于 2010-4-29 19:10:40

它还有没有结构上的缺陷？

它笔画粗细是否合理？

它空间分割是否美观？。。。。。。
下面是我做字体设计的另外一个秘诀：

attachimg.gif

http://image.zcool.com.cn/20/56/m_1268094340282.jpg

下面我们再来看一个框架式字体设计的范例

http://image.zcool.com.cn/46/25/m_1268095756862.jpg

这是我非常喜欢的一个字体设计

在4个要素点的把握上功力深厚

一般来说框架式字体设计做出来都多少有点死板 但上面这个设计师就敢于突破框架的束缚

这就是我想讲的 另外一个秘诀：

attachimg.gif

http://image.zcool.com.cn/20/27/m_1268095761203.jpg

现在我们再返回来看看之前看过的这些字体设计

你现在看这些字体设计的眼光是否又不一样了呢？

attachimg.gif

http://image.zcool.com.cn/9/13/m_1268095761865.jpg

关于个性

我们再看看这个范例


http://image.zcool.com.cn/50/14/m_1268095766166.jpg

http://image.zcool.com.cn/50/63/m_1268095766724.jpg

塑造个性的方式多种多样 不仅仅是字形

我就不多说了 留给大家自由发挥

下面即将进入本秘籍的核心部分！～！！！！！！！！！


008.gif
绝招来了～！！！！！！！！


乾坤大挪移

http://image.zcool.com.cn/31/16/m_1268095767688.jpg

乾坤大挪移 之
英文字体转化为中文字体设计


先看大师范例


http://image.zcool.com.cn/59/24/m_1268095773364.jpg

陈大师 早已练的烂熟于胸了




乾坤大挪移 之
图形转化为中文字体设计

attachimg.gif

http://image.zcool.com.cn/38/2/m_1268095773945.jpg

设计变形金刚这位仁兄的功夫也非常了得
008.gif


乾坤大挪移 之
照片转化为中文字体设计

attachimg.gif

http://image.zcool.com.cn/44/5/m_1268095775690.jpg

这个是我的拙作

练好以上3招 你就可以找 张大师 比划比划了


http://image.zcool.com.cn/25/11/m_1268095776626.jpg

http://image.zcool.com.cn/54/20/m_1268095781198.jpg

乾坤大挪移 之范例在看下面这些范例之前 边看请边为它们在坐标工具上定位 如果一看到一个陌生的字体设计你就能将他们在坐标工具上准确的定位 那恭喜你 你练好心法了


http://image.zcool.com.cn/17/37/m_1268095790904.jpg

作者从欧式图案中吸取精华来做的字体设计 强调的是个性 形态上为了加强识别型采取了框架式
下图是我从欧式图案中吸取精华来做的字体设计 强调的是识别性 个性较弱


http://image.zcool.com.cn/15/34/m_1268095791456.jpg

http://image.zcool.com.cn/22/11/m_1268095793313.jpg

下面这个呢？它在坐标的那个位置呢？

http://image.zcool.com.cn/54/6/m_1268095795828.jpg

再出一个题目
这个也是我做的一个字体练习作品

它又在坐标工具上的那个位置呢？

http://image.zcool.com.cn/15/19/m_1268095798215.jpg
http://image.zcool.com.cn/13/49/m_1268095800755.jpg

logo 到标准字乾坤大挪移 一个简单的应用就是 vi 中的 中文标准字了

看范例 我就不多说了



http://image.zcool.com.cn/13/34/m_1268095803259.jpg


太极两仪之自由式字体设计下面开始讲自由式字体设计


http://image.zcool.com.cn/40/42/m_1268096526503.jpg

http://image.zcool.com.cn/23/12/m_1268096530770.jpg

讲到现在 大家因该对坐标工具都很熟悉了
一般来说 自由式字体设计 都处在坐标工具的下半部分 相对框架式字体来说 自由式的个性会更强一些
依照惯例 先看范例

attachimg.gif
http://image.zcool.com.cn/2/38/m_1268096531657.jpg
http://image.zcool.com.cn/26/30/m_1268096550349.jpg

这些字体都有什么特点呢？


http://image.zcool.com.cn/56/1/m_1268096551051.jpg

http://image.zcool.com.cn/38/1/m_1268096551562.jpg

我们先看一个范例


http://image.zcool.com.cn/62/18/m_1268096552116.jpg

这是我为一位朋友设计的个人签名
由于是属于个人使用的范畴 所以我强调的是个性
抛弃了框架 抛弃了大部分的结构 着重传达个人的特点

它处在坐标工具的什么位置呢？

attachimg.gif

http://image.zcool.com.cn/34/20/m_1268096558119.jpg

照片上的女孩请不要起诉我侵犯您的肖像权丫
005.gif
你和我朋友长的太象了


http://image.zcool.com.cn/2/60/m_1268096559185.jpg

关于自由式字体设计我只能找些参考来给大家分析 因为这个实在没办法解说 只能根据设计师的个性和项目的特性等来决定表现手法 二来表现手法千万种 都会影响字体设计的形态 就不一一解说了
经过前面的详解 相信大家都有各自的方法了


http://image.zcool.com.cn/33/28/m_1268096560206.jpg
http://image.zcool.com.cn/7/59/m_1268096561618.jpg

设计自由式字体的时候 最大的秘诀就是！！！！
005.gif



http://image.zcool.com.cn/37/11/m_1268096566176.jpg

太极之外 无极！！！
除了 框架式和自由式还有别的招式么？？？有！！
012.gif

http://image.zcool.com.cn/13/12/m_1268096567705.jpg

这一类的字体设计一般来说 处于坐标工具的中部 简而言之就是 带框架的自由式字体设计
018.gif


http://image.zcool.com.cn/20/63/m_1268096570156.jpg

先看范例


http://image.zcool.com.cn/7/21/m_1268096570871.jpg

http://image.zcool.com.cn/43/9/m_1268096572958.jpg
http://image.zcool.com.cn/20/40/m_1268096576758.jpg

设计师：justmaoba

http://image.zcool.com.cn/40/56/m_1268096580201.jpg

设计师：justmaoba

http://image.zcool.com.cn/20/45/m_1268096581091.jpg

设计师：justmaoba


这些字体的特点又是什么呢？


http://image.zcool.com.cn/31/26/m_1268096582897.jpg

设计这类字体的秘诀就是：


http://image.zcool.com.cn/20/38/m_1268096584991.jpg

终


http://image.zcool.com.cn/48/27/m_1268096586740.jpg

大家可以下载这个坐标工具 随时备用 用来分析别人的字体设计和自己的指南

大家平时可以多做练习 吃饭的时候也可以练！
018.gif


例如你喜欢吃香菇 那就用香菇的形态特质来做“香菇”2个字看看，你会做出什么东西来～～
005.gif


或者 你在大便后仔细观察下你的大便 然后做个“大便”的字体设计玩玩，

总之 生活是无穷无尽的 设计也是无穷无尽的 掌握了此武功秘籍 就没有什么字体设计能难倒你了

和张无忌一样 你要的就是多看别人的表现形式和创意方法 用乾坤大挪移转为自己的功力了

查看完整版本: 中文字体设计技巧及经验