字体科普文!手把手带你认识最基础的字体结构

2016-01-28 15:31 73 1 收藏

字体科普文!手把手带你认识最基础的字体结构,想搞定字体设计,了解字体结构是特别基础的一部分,今天腾讯同学从字体的分类、结构特征、设计原理以及常用的设计规律四方面给同学们科普一下这方面的姿势,想入门字体设计的同学,来学习咯。 一、常用分类 ...

【 tulaoshi.com - PS 】

chinese-typeface-infrastructure-1

编者按:想搞定字体设计,了解字体结构是特别基础的一部分,今天腾讯同学从字体的分类、结构特征、设计原理以及常用的设计规律四方面给同学们科普一下这方面的姿势,想入门字体设计的同学,来学习咯。

一、常用分类

字体设计得先了解字体结构和组合形式,就像房屋装修一样,你得先了解房屋结构和框架才好进行拆墙重新装饰设计。所以首先了解2个我们常用的字体分类概念:

衬线字体(宋体):

笔画开始、结束的地方有额外的装饰,而且笔画的粗细有所不同。

衬线体粗细不同(可读性更佳)。大段落文章,增加阅读对字母参照参考。就像大家都穿了(衬)衣服和不同装饰物一样好识别,装饰性强、有对比参照性。

图片1.png

非衬线字体(黑体):

没有额外的装饰,而且笔画的粗细差不多。

简洁、时尚、轻松休闲、干净。笔画对比较弱,不及衬线字体。

图片2.png

这2种字体概念联想起穿衣和没穿衣就容易好记,也很好理解。在字体设计中记住这2个概念针对不同类型字体做装饰性处理是关键。

除了这两位基本款,从字体风格分析入手能更好认识不同字体:《不会挑选字体?来看看字体的7种类型及特点》

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/ps/)二、结构特征

抛开上面2种我们常见的字体分类概念,我们在来复习下小学语文中的字体结构。

单体字:一个偏旁单独构成的字。

合体字:两个或两个以上偏旁组合成的字。

其中合体字又分:

图片3.png

汉子轮廓以形似方块,但是由于笔画不同,字体轮廓的形状就会呈现不同的形状,所以在视觉均衡上就会有些许视觉偏差。尤其是单体字和合体字组合笔画就会显得不好看。所以我们要在不同形状的字形上做调整和处理,让他们看起来更加完整、均衡。

图片4.png

上图,等高、等宽的三角形、正方形、圆形我们会发现视觉上他们是不等大。

图片5.png

顶格、缩格、出格就是针对不同结构的字体笔画特征进行微调,让他们看起来更加均衡、等大、视觉更完整。

三、平衡/杠杆原理

图片6.png

中学物理里学过杠杆原理:动力×动力臂=阻力×阻力臂 ,公式:F1×L1=F2×L2

时过变迁,也许有点难理解。结合上图,简单点讲:就是距离中心点越近,F2越重才能与离中心点远的F1平衡。

图片7.png

结合汉字方格,中心点就是方格的垂直中心,例如“体”字,右侧“本”的垂直中心点B,单人旁的垂直中心A,B跟中心点的距离越近,A跟中心点的距离越远,整个字体组合字体重心才平衡,均衡。

当字体变形的时候,把字体拉长,或压扁都是同样的道理需要去细调偏旁部首让重心更平稳、均衡、视觉才更加完美。

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

单独看每个字都有一个独立视觉重心,设计字体就是要兼顾每个字体的重心,让整体更加平稳均衡。

四、一般规律

(1) 黄金分割线原理

黄金分割值≈0.618

按照黄金分割线0.618的位置我们可以把方格字按上下、左右结构的比例特质画出4条黄金分割线A、D、C、D。

图片8.png

我们在设计单个字体结构的时候,可以参照黄金分割线的原理去调整不同笔画结构的字体,让其看起来更加美观。

黄金分割定律也可以运用到网页设计中,方法右戳:《你知道网页设计的黄金比例吗?》

(2 )上紧下松

上紧下松的例子比较容易记住。拿长腿女人和长腿大叔做例子就好很贴切了。

图片9.png

(3)横细竖粗

横细竖粗跟重力感觉相近,只有字杆粗壮(像树一样)才看起来更加平稳,舒适。

图片10.png

(4) 左紧右松

左紧右松跟视觉阅读习惯相关,就像我们阅读喜欢从左上角开始往右下角阅读一样。

图片11.png

来源:https://www.tulaoshi.com/n/20160128/1464858.html

延伸阅读
【PS文字特效】PS手把手教你绘制一个春意盎然的字体效果   编者按:南方已经入夏,不过不妨碍是@DearSalt 同学这篇生机勃勃的字体教程。教程是小哥原创,截图清晰,步骤明了,简单好上手,非常值得新手练习 哈喽,大家好,偶是桂桂。一年一季的春天终于到了(这不废话嘛), 万物复苏,生物在春晨的梦中醒来,展示着生命...
标签: PS PS教程
给大家带来一个新手字效教程,利用图层样式制作一个带金属感的银白色文字,我们将再一次见证图层样式的强大。素材和源文件都打包好了,来收! 素材及源文件打包下载:http://yunpan.cn/cuuRUdFfddsMa  访问密码 3cc1 首先,我们来看看我们的最终效果: OK,下面我们开始。新建个文档,我用的尺寸是1920*10...
标签: PS PS教程
编者按:今天的教程效果特别萌,创建过程也不难,重点依然是图层样式的运用,截图清晰全中文,练习起来非常方便,老规矩,评论交作业 , 1. 首先新建一个1200*600的画布,新建图层,双击打开图层样式,选择渐变叠加,颜色数值已给出。然后在它的上部在新建一个图层,放一张喜欢的背景图上去,图层模式改为“柔光”,不透明度40%,把...
标签: PS PS教程
今天的教程难度不大,考察同学们对钢笔工具的使用和渐变色彩的敏感度,拿来练手加强基础非常合适,而且完成效果也非常漂亮,素材已经打包好,马克后记得学。  小花素材:http://yunpan.cn/c3ehz2kwVrCvF  访问密码 fc34 先来张最终效果图: 热身练习 1. 使用椭圆工具,选择路径选项,按住Shift键,画一个圆形,直径320...
标签: PS PS教程
今天带来的是一个Photoshop中3D文字制作教程(此案例没有做材质贴图,用了简单的渐变加以说明)。然后这个教程的后面带出几个PS中3D场景搭建时做贴图时要注意的点,然后过程中也涉及到了一些光效制作的方法,新版本Photoshop CC2015中智能对象关联的智能滤镜的使用,“快速导出PNG”等等。最后通过这个教程和分享的PSD,希望大家能够在使用Photo...

经验教程

328

收藏

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