各位小伙伴,不知道你有没有这样的困扰,平常在做一些运营视觉的时候,经常需要用到一些好看的字体,但无奈的是,看中的字体不免费,或者公司购买版权的字体又太平淡。

虽然网上有很多字体设计的方法:比如笔刷拼接、字体变形,但都比较耗时。今天给大家推荐一个10分钟出效果的字体设计方法!给你的字体加点设计感~
我们结合一个案例讲解:

超简单的字体设计方法,10分钟给你的字体加一点设计感(图1)这是一张专门为推文做的banner
上面这张banner背景插图完成度已经比较高了,但目前字体这块表现还差一些,我们尝试将“加点设计感”这一行加粗,并且做一些字号大小处理:
超简单的字体设计方法,10分钟给你的字体加一点设计感(图2)
设计师通过对文案价值的解读,将更重要的文案进行放大加粗处理,一般做到这样就很棒了。
但如果是在运营活动中,运营大佬对设计师的要求可能会更高:“字体感觉简单了点”、“缺少点设计感”......面对这些无理取闹合理需求,时间有限的情况下,大多数同学就开始打开免费字体库开始一个个的试,但是字库里的字体要不就是“其貌不扬”,要么就是“骨骼惊奇”,合适的字体往往是可遇不可求,那么如何快速撸一个万金油字体呢?
超简单的字体设计方法,10分钟给你的字体加一点设计感(图3)
今天就给大家分享一个10分钟设计字体的思路!还是以上面的案例来看:


第一步:画参考
首先,我们要明确,整个设计过程要快速,所以,告别常规的在纸上打草稿再放到电脑上描的思路,那样太慢了!我们直接打开sketch:
超简单的字体设计方法,10分钟给你的字体加一点设计感(图4)
首先,我们对照着用原字体打出来的文案,用参考线拉一下我们要设计字体的高度。
超简单的字体设计方法,10分钟给你的字体加一点设计感(图5)
画参考线和对比原字体的意义是,让我们可以时刻对照,防止字体结构走形。接下来,就是这个方法之所以快速的精髓:用钢笔工具勾画骨架!


第二步:描骨架
超简单的字体设计方法,10分钟给你的字体加一点设计感(图6)
上图是用钢笔工具画的“加”字的骨架,可以看到效果非常low,有点像火柴搭的,笔划之间没有转折。这里我们先不管细节,只要保证骨架的结构是正确合理的。注意要点:1、像我们写字一样,所有笔划不要连着,横竖撇捺都要分段, 利于后期加工;2、所有笔划的拐弯处都要垂直;3、字体的整体结构要合理;


第三步:加描边
接着,我们把所有笔划的描边数值给加大,具体多大,看整体效果(笔划之间不拥挤、整体结构合理即可)。调整完一个笔划的粗细,可以用option+command+C/V这个快捷键进行属性的粘贴复制,这样可以大大提升效率。

超简单的字体设计方法,10分钟给你的字体加一点设计感(图7)
加粗了笔划之后有了点效果,但这个字还是很愣,我们来让它“圆滑”一些。sketch有个功能,就是可以单独调整每个锚点的圆角半径,我们利用这个功能,把一些尖锐的地方进行调整。
超简单的字体设计方法,10分钟给你的字体加一点设计感(图8)
右边是调整后的效果,感觉有内味了!注意要点:1、所有圆角数值一致;2、选锚点一定要有规律:比如都位于右下和右上(比较建议这两个方位),而且这个规律要在剩下的字体中一以贯之,这样才能保证最终的效果统一;
简单的两步,我们第一个字就设计好了,总结一下就是描骨架+加描边。而且钢笔都是直来直去,没有贝塞尔曲线,实际操作起来很快速!

第四步:依样画葫芦
第一个字已经完成,看着很简单?那是因为“加”字的字体结构比较简单,我们接下来把剩下的字用同样的方法进行设计。(此步省略)

超简单的字体设计方法,10分钟给你的字体加一点设计感(图9)
注意要点:1、复制描边的时候不要忘记使用快捷键;2、同样的偏旁笔划可以复用;3、每个字的大小、高度等要一致;看着就快画完了,等等,我们还有最后一个“感”字。

第五步:复杂笔划处理
按照前几步,我们来处理“感”这个笔划特别多的字:

超简单的字体设计方法,10分钟给你的字体加一点设计感(图10)
可以看到,因为笔划较多,当我们用原先的粗细进行复用之后,整个字体胖得连新华字典都不认识了!不是说好10分钟、快速、简单的吗?

别慌,我们一起来解决一下,首先确保骨架的字体结构是对的,比方说原先用的是9的粗细,针对复杂笔划,我们可以适当让笔划描边变细。

超简单的字体设计方法,10分钟给你的字体加一点设计感(图11)
蓝色数字是笔划的粗细数值。可以看到内部的“一”和“口”,都用到了更小的粗细。每一个笔划的粗细都可以不是统一的,只要结构合理,最终的效果也不会违和。
注意要点:不改变文字大小、结构的前提下,复杂笔划灵活设置粗细;
超简单的字体设计方法,10分钟给你的字体加一点设计感(图12)这样做出来的字体不会有很强的“性格”,但胜在十分快速,并且不用考虑版权
最后当所有字体摆在一起的时候,还可以针对整体效果对个别笔划进行微调。做完这一步,其实就完成了,但为了整体效果我们还可以更进一步!

第六步:整体转曲
转曲的意思,就是把原先的只可以设置描边的线条转化为有填充属性的图形;在sketch中可以全选后按option+command+O;注意要点:转曲这步建议一定要做,否则放大缩小等都会变形,并且不利于进一步加工;
完成这一步我们可以利用变形、蒙版等功能,做一些更花哨的效果:
超简单的字体设计方法,10分钟给你的字体加一点设计感(图13)x轴倾斜一点,让它们有一点动感
超简单的字体设计方法,10分钟给你的字体加一点设计感(图14)增加错层阴影,让它们炫一点
回到这个案例,因为插图已经很多了,我们就不用这些个花哨的效果了。接下来我们来看下添加了设计后的banner效果:
超简单的字体设计方法,10分钟给你的字体加一点设计感(图15)

总结
用这个方法设计的字体可能会缺少特点,但是另一方面也比较“万金油”,而且方法简单,熟练之后两分钟一个字绝对不在话下。
超简单的字体设计方法,10分钟给你的字体加一点设计感(图16)素材来自互联网,仅做分享

上图都是一些常见的宣传字体,可以说与今天介绍的字体属于同一类,时间充裕的话,描边之后进行进一步特色加工,比如延长/变形特定笔划,完全可以达到上述截图里的效果!快去试试吧~

超简单的字体设计方法,10分钟给你的字体加一点设计感(图17)超简单的字体设计方法,10分钟给你的字体加一点设计感(图18)