对于初入职场的小白,大部分都会被字体设计所困扰。所以今天以案例形式帮助大家了解字体设计的一些流程步骤。

这个例子是招聘平台面对 HR 和 Team leader 群体所做的一次召回促活的活动,活动项目设计的核心画面是主K,这一次只针对字体设计部分展开。

要设计的字体为:全民招聘 助你纳贤

如何快速做出好看的运营字体设计?来看这篇保姆级教程!


草稿绘制


先思考字体的含义,并提取一些灵感关键词。思维发散,再聚焦可行关键词,用于创作。这一部分讲的比较详细,有一定水平的朋友可以跳过。

如何快速做出好看的运营字体设计?来看这篇保姆级教程!
从发散思维得到的关键词可以看出,字体设计的感受为稳重、力量、有细节。

字体应该为粗线条、粗笔画、粗字重,并通过连笔、断笔、减少笔画简化结构,字体右上角应有尖角。

1. 草稿

草稿一般用纸笔或手绘板绘制,可以随便修改。

如何快速做出好看的运营字体设计?来看这篇保姆级教程!
2. 字体位置

这里我使用手绘板与ps绘制草稿。ps新建文档,绘制一个字框,偏矮稳重,然后一式八份,排成两行。

如何快速做出好看的运营字体设计?来看这篇保姆级教程!
在字框图层上,新建图层,绘制字体草稿,把自己想象的字体绘制出来。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!在做字的过程中,会遇到某字画的不太顺,这时可以在边上画一个小体量少细节的字体草稿。

之所以涂黑几个字,是因为仅靠线条是无法判断字体结构是否合适,字体笔画是否粗细,笔画的曲线弧度是否准确。

如何快速做出好看的运营字体设计?来看这篇保姆级教程!
如何快速做出好看的运营字体设计?来看这篇保姆级教程!
把贤字的又部分简化,保持了一致性,保持整款字体笔画粗细的视觉平衡。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!
逐步把其他字涂满。不断观察,不断调整优化。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!
字体草稿全部涂满黑色。可以看出全字矮了,招字窄了,纳字又感觉过宽。然后再进行调整。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!
调高全字。调整聘字左右的宽度,纳字的绞丝旁做了圆润处理,你字右上部分笔画调整角度,与整款字体搭配更为协调。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!
你字右边部分的竖勾笔画,已加粗,有所改善。民字依然不太舒适,主要是那一捺的笔画。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!
调整民字右下角,使民字整体更为稳重。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!

调整字右边竖勾笔画的角度,整款字体笔形粗细与笔画之间缝隙大小也要微调。

如何快速做出好看的运营字体设计?来看这篇保姆级教程!
每个字右上角都添加了尖角。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!
在笔画之间叠加处做缺角处理。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!


开始绘制


如何快速做出好看的运营字体设计?来看这篇保姆级教程!
将字体草稿图导入AI或CDR中,绘制对应的字身框,两行八个,再用线条或矩形按照草稿的样子绘制出来。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!如何快速做出好看的运营字体设计?来看这篇保姆级教程!

上图的字体部分,有线与面的状态,它们是可以组合的。线条一般用在弯曲造型的笔画,面一般用在直来直去造型的笔画,很多单个文字的笔画中,会有直有曲,所以线与面一起搭配造字,会更为合理。图中文字周围有看不见的白色方块,它们主要起到遮挡笔画的作用。

如何快速做出好看的运营字体设计?来看这篇保姆级教程!
然后给字体添加缝隙。上图中AI绘制字体元素底下是有草稿图的,且上图是选中元素的效果,方便大家观察。

上图文字四周放置好多小色块,这些是做缝隙的参照物。小色块的一种是单位1厚度,另一种是单位2厚度。单位1厚度主要负责单独笔画被切断的效果,单位 2 厚度则负责字体中偏旁部首之间的缝隙。

如何快速做出好看的运营字体设计?来看这篇保姆级教程!如何快速做出好看的运营字体设计?来看这篇保姆级教程!
按照草稿,在右上角需添加尖角。

「民招聘助纳贤」这 6 个字皆为常规尖角操作,右边都是垂直切的;全和你字则有所不同。处理完常规尖角操作后,整个笔画末端会显得略重且不美观,这时可以在该笔画末端的尖角效果下方做上弧的效果。再说你字,右上角所做尖角效果下方的笔画是有倾斜角度的,因此尖角效果需顺着倾斜角度去切顺。

如何快速做出好看的运营字体设计?来看这篇保姆级教程!
这是增加尖角后的效果。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!
在蓝圈位置,做缺角的效果。这是字体字形最终效果的呈现。
如何快速做出好看的运营字体设计?来看这篇保姆级教程!


字体包装


最后给字体添加画面,一款字体就设计完成了。


字体设计,光是字体字形摆上去还不行,还需要有字效。在后面我们可以添加描边、网格效果投影,并制作排版包装。