【实用干货】如何用网格轻松设计字体
APP里面文字、图形、色彩是信息传达的三要素,字体则是这三要素中的最重要因素之一。
在用户界面中,每一个单词和字母都至关重要。好的字体等于好的设计。本文介绍了如何利用网格设计字体,营造视觉美感。
网格对于字体的意义
研究网格的人会发现,在网格系统帮助下,都能更快地解决设计中的问题,并且让设计更具功能性、逻辑性和视觉美感。网格也被视为一种秩序系统来进行使用,因为它体现了设计师是以一种结构性、预见性的方式来进行构思和设计的;简单来说对于字体中只需要定好每个笔划和笔划之间留白占多个格子,从而让设计更加科学、合理、具有数学逻辑的美感。
网格在字体中作用
在设计字体的时候,最重的是整体文字的“平衡性”,使用网格相当于添加了骨架稳定文字平衡;而使用网格做为基础,可以让文字中的每一个笔划的构成变得简单,文字骨架得到稳定平衡、准确、清晰、对称,留白得到均分,字体重心统一。以网格构成的字体会让字体的构成感很强、有点线面的节奏感,当然要做到有一定的难度。刚开始我们可以把汉字看作图形,把文字当成图形去设计,不要当成单个字去看,要当成组合、图形画面,不然会很难打开固有思维模式印象。在使用网格设计之前,我们需要先梳理字体笔划结构、特点再进行以网格的方式呈现。
▲字体在网格运用
建立网格2种方法
建立字体网格不用像UI界面那样去算水槽、边距、内容区域大小,只要是个四方形的格子就可以了,确定字体骨架,数每个笔划占多少网格。
1.AI矩形网格工具
▲使用AI矩形网格工具,根据自己的需求调整宽度、高度,其他的参数不需要动。
2.AI显示网格
▲command ’就可以调出网格
▲command K调出首选项、参考线和网格,可以根据需求调整“网格线间隔”、“次分隔线”。
利用网格提升字体表现力 — 4种应用方式
下面会介绍利用网格设计字体,在原有设计好的网格基础上,分析笔划特点,进一步提升字体的平面构成感、节奏变化。
1.横、竖笔划较多做笔划延伸排列
当发现一个字体里面横竖笔划很多,直接将横笔划进行左右两边延伸,竖笔划进化上下延长,强化笔划特点,撑满画面,让字体变得有张力、有特点;这种将笔划横笔划左右两边延伸、竖笔划上下延长的手法比较适合以字作为主体的创意海报、主视觉、书籍封面等应用。
- 横笔划左右延伸排列
- 竖笔垂直划延伸排列
2.笔划平衡点置于中心
当一个字体里面只有横、竖两种笔划结构特点,可以将笔划平衡点置于中心;先用正方形设定字体的宽高,单个字体面积占正方形一半大小,多余一半留白做横笔划向左右两边延伸。
3.用图形替换相应笔划
给字体做些笔划加减法,舍弃一些多余的笔划,用图形直接代替笔划;像汉字少一两笔不影响其识别度,只要舍弃不是像竖笔划这样的主笔划,舍弃反而还会增加字体的个性。先把一个完整的字体造型做好,在保证整个骨架没问题,不影响识别度,进行笔划和图形相互交叉替换,提升字体表现力。 一个小技巧:舍弃的笔画尽量不要选择影响字体外部轮廓的识别。
- 案例1
- 案例2
- 案例3
4.间架结构对齐,让字体更统一
有一种对齐方式是让我们用字体外轮廓进行生硬的去对齐,虽然外形是对齐了,但是导致了字体内部的间架结构不明确、对称、均衡,笔划不统一、留白不均分;间架结构对齐方式,比字体轮廓对齐更统一、协调。在设计的时候利用网格优势,让笔划均分切割空间,建立稳定字体间架结构。
- 案例1
- 案例2
总结
简单来说设计字体的时候确定好每个笔划和笔划之间留白占多个格子,从而让设计更加科学、合理、具有数学逻辑的美感;使用网格也相当于添加了骨架稳定文字平衡性;而使用网格做为基础,可以让文字中的每一个笔划的构成变得简单,文字骨架得到稳定平衡、准确、清晰、对称,留白得到均分,字体重心统一。以网格构成的字体会让字体的构成感很强、有点线面的节奏感;网格提升字体表现力实际四种方式。
- 横、竖笔划较多做笔划延伸排列
- 笔划平衡点置于中心
- 用图形替换相应笔划
- 间架结构对齐,让字体更统一
我们的设计日记(公众号)
作者:学良