【实用干货】如何用网格轻松设计字体

APP里面文字、图形、色彩是信息传达的三要素,字体则是这三要素中的最重要因素之一。
在用户界面中,每一个单词和字母都至关重要。好的字体等于好的设计。本文介绍了如何利用网格设计字体,营造视觉美感。

网格对于字体的意义

研究网格的人会发现,在网格系统帮助下,都能更快地解决设计中的问题,并且让设计更具功能性、逻辑性和视觉美感。网格也被视为一种秩序系统来进行使用,因为它体现了设计师是以一种结构性、预见性的方式来进行构思和设计的;简单来说对于字体中只需要定好每个笔划和笔划之间留白占多个格子,从而让设计更加科学、合理、具有数学逻辑的美感。

网格在字体中作用

在设计字体的时候,最重的是整体文字的“平衡性”,使用网格相当于添加了骨架稳定文字平衡;而使用网格做为基础,可以让文字中的每一个笔划的构成变得简单,文字骨架得到稳定平衡、准确、清晰、对称,留白得到均分,字体重心统一。以网格构成的字体会让字体的构成感很强、有点线面的节奏感,当然要做到有一定的难度。刚开始我们可以把汉字看作图形,把文字当成图形去设计,不要当成单个字去看,要当成组合、图形画面,不然会很难打开固有思维模式印象。在使用网格设计之前,我们需要先梳理字体笔划结构、特点再进行以网格的方式呈现。

字体在网格运用

建立网格2种方法

建立字体网格不用像UI界面那样去算水槽、边距、内容区域大小,只要是个四方形的格子就可以了,确定字体骨架,数每个笔划占多少网格。

1.AI矩形网格工具

使用AI矩形网格工具,根据自己的需求调整宽度、高度,其他的参数不需要动。

2.AI显示网格

command ’就可以调出网格

command K调出首选项、参考线和网格,可以根据需求调整“网格线间隔”、“次分隔线”。

利用网格提升字体表现力 — 4种应用方式

下面会介绍利用网格设计字体,在原有设计好的网格基础上,分析笔划特点,进一步提升字体的平面构成感、节奏变化。

1.横、竖笔划较多做笔划延伸排列

当发现一个字体里面横竖笔划很多,直接将横笔划进行左右两边延伸,竖笔划进化上下延长,强化笔划特点,撑满画面,让字体变得有张力、有特点;这种将笔划横笔划左右两边延伸、竖笔划上下延长的手法比较适合以字作为主体的创意海报、主视觉、书籍封面等应用。

  • 横笔划左右延伸排列

  • 竖笔垂直划延伸排列

2.笔划平衡点置于中心

当一个字体里面只有横、竖两种笔划结构特点,可以将笔划平衡点置于中心;先用正方形设定字体的宽高,单个字体面积占正方形一半大小,多余一半留白做横笔划向左右两边延伸。

3.用图形替换相应笔划

给字体做些笔划加减法,舍弃一些多余的笔划,用图形直接代替笔划;像汉字少一两笔不影响其识别度,只要舍弃不是像竖笔划这样的主笔划,舍弃反而还会增加字体的个性。先把一个完整的字体造型做好,在保证整个骨架没问题,不影响识别度,进行笔划和图形相互交叉替换,提升字体表现力。  一个小技巧:舍弃的笔画尽量不要选择影响字体外部轮廓的识别。

  • 案例1

  • 案例2

  • 案例3

4.间架结构对齐,让字体更统一

有一种对齐方式是让我们用字体外轮廓进行生硬的去对齐,虽然外形是对齐了,但是导致了字体内部的间架结构不明确、对称、均衡,笔划不统一、留白不均分;间架结构对齐方式,比字体轮廓对齐更统一、协调。在设计的时候利用网格优势,让笔划均分切割空间,建立稳定字体间架结构。

  • 案例1

  • 案例2

总结

简单来说设计字体的时候确定好每个笔划和笔划之间留白占多个格子,从而让设计更加科学、合理、具有数学逻辑的美感;使用网格也相当于添加了骨架稳定文字平衡性;而使用网格做为基础,可以让文字中的每一个笔划的构成变得简单,文字骨架得到稳定平衡、准确、清晰、对称,留白得到均分,字体重心统一。以网格构成的字体会让字体的构成感很强、有点线面的节奏感;网格提升字体表现力实际四种方式。

  • 横、竖笔划较多做笔划延伸排列
  • 笔划平衡点置于中心
  • 用图形替换相应笔划
  • 间架结构对齐,让字体更统一

我们的设计日记(公众号)

作者:学良

(0)

相关推荐

  • 如何用PS画笔工具设计图画

    现在越来越多的大学生毕业,都没有在校期间好好的学习,所以并没有更快的掌握软件的技术本领.而现在的用人单位,对办公软件的要求是越来越多.办公软件已经成为网络领域.编辑领域.设计领域.文字排版领域的常用软 ...

  • 如何用PowerPoint制作设计模板

      如何用PowerPoint制作设计模板 工具/原料 PowerPoint 2000(或以上版本) 已经准备好的图片素材 步骤/方法 1.打开 PowerPoint 软件,但是不要建立新幻灯片.如果 ...

  • (20套)2014年12月的最新设计字体(免费下载)

    似乎很久没有分享字体了,今天就来一发吧.以后定时的给大家分享字体,ui kit ,web ,之类的~ 每个月我们都分享一些免费的字体,都是一些设计巧妙有很大的设计价值的品,这个事情我们会坚持一直做下去 ...

  • AI设计-字体与质感2

    小编:今天给大家带来了@glmin的第二篇教程-AI设计-字体与质感2.这篇是教大家来制作立体字,效果图看起来还是非常有感觉的.整个过程很简单,大家跟着一起做,相信很快就能把效果实现出来.AI不熟练的 ...

  • AI设计-字体与质感

    小编:今天为大家带来的是@glmin的教程-<AI设计-字体与质感>.本篇教程主要是针对后期导入到AI中之后制作效果的步骤,前期还是需要小伙伴们自己在纸上绘制完成.接下来就一起跟随作者来提 ...

  • 如何用PS做出漂亮字体

    好不容易安装上了PS,却不知道怎么设计字体,让我来教你们一种吧.说不定什么时候就派上用场了呢. 操作方法 01 第一步,打开PS,然后打开一张素材,我把我用的那张发上了,万一谁喜欢呢. 02 第二步, ...

  • Ai如何用网格工具创建渐变网格

    ai是一款广泛应用于出版.多媒体和在线图像的工业标准矢量插画的软件,下面小编就来给大家介绍一下Ai如何用网格工具创建渐变网格,希望对大家有所帮助. 操作方法 01 打开Ai后,新建一个画布. 02 选 ...

  • 如何用PS来设计简单的网页

    PS软件应用十分的广泛,修改图像,运用图层蒙版设计简单网页,文字排版,网页优化,包括导航图,网页底端的页脚,网页主题内容,特效文字的制作,动作按钮的设计等.今天和小编一起来学习如何用PS来设计简单的网 ...

  • PS怎么使用【字由】字体软件在线使用设计字体

    字由是一款可以不用下载就在线使用的艺术设计字体软件,可以应用在PS或WORD等常用软件中,很方便,具体应该怎么用呢? 操作方法 01 首先打开PS并建立一个画布,用文字工具输入一段文字. 02 在PS ...