Quantcast
Channel: 字体设计 –优设网 – UISDC
Viewing all articles
Browse latest Browse all 241

大厂高手出品!超炸裂的字体设计指南(下)

$
0
0

上期我们主要阐述了字体的气质分类以及联想方法,这期我们进入纯操作范畴,给大家介绍六大秘法助力你的字体设计。

上期回顾:

[link https://www.uisdc.com/font-design-guidelines]

大厂高手出品!超炸裂的字体设计指南(下)

有了思路我们如何落地成型呢?那就是接下来要说的操作部分了。

大厂高手出品!超炸裂的字体设计指南(下)

操作:把想法落地的过程。

大厂高手出品!超炸裂的字体设计指南(下)

主要总结出六个方法。

大厂高手出品!超炸裂的字体设计指南(下)

这几个概念都是我自己的认知,如有不对请及时指出,多多包涵。了解的可以直接跳过。

  • 字面:字的面积,简单说是字的宽乘以高。
  • 骨骼:字体形态的骨架。
  • 外饰:字体笔画的构成方式。
  • 中宫:字体的负形。
  • 重心:字体的重力所在的中点。

这几个点的比例直接影响了字体的气质、风格、感觉。

大厂高手出品!超炸裂的字体设计指南(下)

骨骼造字法,先定了字体的构架,再去修饰字形的外饰。优势在于在早期可以预见字体的大概风格,避免后期的修改。

大厂高手出品!超炸裂的字体设计指南(下)

年货节开机视频的利益点文字:产品调性决定了必须用仿古中国风去做,行书的飘逸、隶书的端庄,尝试两者结合做一款适合运营活动页面的字面。

大厂高手出品!超炸裂的字体设计指南(下)

定制骨骼,字面比例、重心、中宫、笔画走势,添加笔锋细节,构造字体特征。

大厂高手出品!超炸裂的字体设计指南(下)

骨骼定下来后,打印出来,在骨骼基础上反复尝试外饰。

大厂高手出品!超炸裂的字体设计指南(下)

确定外饰后在AI进行勾勒调整。

大厂高手出品!超炸裂的字体设计指南(下)

填充颜色,打磨细节。

大厂高手出品!超炸裂的字体设计指南(下)

完善字库。做描边以及填色的对比,可以发现字体很多正负空间的缺陷,方便调整。

大厂高手出品!超炸裂的字体设计指南(下)

最终放到落地页中的效果如图。

大厂高手出品!超炸裂的字体设计指南(下)

这是在公司品牌应用中经常出现的场景——联名logo。

VMIC部门下有若干分组,为了让各组在品牌上统一,我们做了统一的英文字体。在新品牌出现时候复用这套字体即可,不用反复重新设计,节约设计成本。

大厂高手出品!超炸裂的字体设计指南(下)

根据已有的vivo、VMIC字体提炼他们的共性,字面偏扁,字形端庄稳定,将这些提点融入到字体框架中。

大厂高手出品!超炸裂的字体设计指南(下)

调整笔划粗细,反复对比,寻找最合适字体的粗度。

大厂高手出品!超炸裂的字体设计指南(下)

调节好正负空间,按着英文的感觉,延伸出数字字形。

大厂高手出品!超炸裂的字体设计指南(下)

可以组合成单词,斟酌下不同组合情况下字重的变化在进行微调。

大厂高手出品!超炸裂的字体设计指南(下)

人生几何:用几何体(如圆、方、角)通过相交相切组成字体,方法比较简单。如果想要字体出彩,应花更多时间在思考结构上面。一笔一划,如何让其不普通,如何让其看起来不像已经做过的,就需要反复的斟酌推敲了。

大厂高手出品!超炸裂的字体设计指南(下)

香港街道纪实拍摄,结合港式街拍的氛围意境,采用复古美术字体。

大厂高手出品!超炸裂的字体设计指南(下)

  • 几何组成基本形态,像撇、捺这种弯曲的笔画可以先用曲线勾勒,然后再加粗描边。
  • 调整笔画粗细,让其在感官上平衡。扩展并调节位置,反复斟酌。
  • 大型出来了还是觉得过于普通,添加了两个细节进去。一笔断意连,灵感来自于街头涂鸦喷绘字,镂空的感觉增加了轻松感。二是添加衬角,会让字的复古意味更加浓重。最后面适当小角度旋转笔画以及添加磨损效果,让整体更具手工的笨拙感。

大厂高手出品!超炸裂的字体设计指南(下)

总感觉少点什么,用高饱和的颜色写了一句手写英文,打破了这篇沉闷,加上同样粗狂的系统字体,稳住下盘。

大厂高手出品!超炸裂的字体设计指南(下)

人类的本质是复读机,重复是最好的老师。

大厂高手出品!超炸裂的字体设计指南(下)

印章楊不過(选自33天33隻楊不過)。整体字形为正方形,少一个字在最后的空格加入了序号以及日期。

大厂高手出品!超炸裂的字体设计指南(下)

截取四分之一圆来做,刚好三个笔画。一弧、一横、一竖。

大厂高手出品!超炸裂的字体设计指南(下)

  • 三个笔划通过放大缩小,构成字基础型。
  • 添加描边调节粗细。空间大的地方粗,填满空间,空间小的地方细,避免拥挤。
  • 扩展拼合,注意笔画之间的衔接,避免不齐整;删除多余结点,使笔画更平滑。

大厂高手出品!超炸裂的字体设计指南(下)

控制正负形空间,事成。

大厂高手出品!超炸裂的字体设计指南(下)

胖胖楊不過(选自33天33隻楊不過)。笔画丰满圆润,有前后叠加的关系。草图阶段把前后结构做清晰,执行阶段事半功倍。

大厂高手出品!超炸裂的字体设计指南(下)

  • 可以先用矩形替代把笔画铺出来。
  • 调整位置角度,感觉合适直接拉满圆角,这个方法是不是还算便捷?

大厂高手出品!超炸裂的字体设计指南(下)

填满底色,理出穿插关系,让字体更耐看,但是前提只有一个,辨识度。这个方法很简单,所以多花点心思在他的穿插关系,让他变得跟别人有点点不一样。

大厂高手出品!超炸裂的字体设计指南(下)

方块楊不過(选自33天33隻楊不過)。通过矩形组成的字体,调整矩形锚点做撇捺笔画。超简单!

大厂高手出品!超炸裂的字体设计指南(下)

  • 除了带倾斜的笔画,如撇、捺、点,其他直接矩形组成。组合好后边角处再加点细节,赋予速度感。
  • 拼合填色,调节负空间。透气性很重要,孰能走马密不透风。
  • 偏移路径,再添加一些速度线细节,让字体更加有层次感同时整个型会更收拢一些没那么破碎。

大厂高手出品!超炸裂的字体设计指南(下)

加倾斜弥补速度感确实,再点缀点小细节即可。

大厂高手出品!超炸裂的字体设计指南(下)

腾蛟起凤(选自滕王阁序字体设计)。先钢笔勾勒成型,接着再用几何相交相切把笔画规整。这种方法比较耗时,字体设计到某个阶段时候可以尝试,进一步了解几何相切的意义。

大厂高手出品!超炸裂的字体设计指南(下)

成品效果似乎没有想象中的好。

大厂高手出品!超炸裂的字体设计指南(下)

提案时保留过程展示可以让字体更规整、更专业。

大厂高手出品!超炸裂的字体设计指南(下)

关于这种方法我目前也没有很好的整理归纳,希望下次能够有幸让大家看到新的分享。

大厂高手出品!超炸裂的字体设计指南(下)

迷人曲线:曲线大家都很熟悉,特点笔画平滑,我把他分成两类。

  • 单线描摹,直接用曲线本身的线粗细调整去做。
  • 勾勒图形,用曲线勾勒闭合的图形,思考大于操作。

大厂高手出品!超炸裂的字体设计指南(下)

单线描边:一笔画楊不過(选自33天33隻楊不過)。小时候画过一笔画,力争一笔完成一个物体。

  • 拟定草图,统一大角度,让字体节奏感一致;弯曲的地方可以用圆角代替。
  • 添加描边,调整粗细。因为是一笔画,注意笔画前后关系。
  • 扩展图形,再次添加描边。这个阶段可以会乱一些,再用钢笔理清前后关系。

大厂高手出品!超炸裂的字体设计指南(下)

最后扩展,在转折处添加阴影;倾斜,加上日期。

大厂高手出品!超炸裂的字体设计指南(下)

勾勒图形:流体楊不過(选自33天33隻楊不過)。像雾像云又像水,起承转合表现层层前后穿插关系。试图表现一种若中带刚,飘逸硬朗的感觉。把字形练到一块,草图阶段反复考究,目的是为了降低执行阶段的修改成本。

大厂高手出品!超炸裂的字体设计指南(下)

这一步我用的速度比较快,并没有在乎曲边点直接的考究,因为这个字体就是想要放松一些,不比太多规矩。

大厂高手出品!超炸裂的字体设计指南(下)

成型后偏移路径描一个外轮廓,事成。

大厂高手出品!超炸裂的字体设计指南(下)

断章取义:用已用的元素进行二次创作。平时比较喜欢看到一些作品时候想能否占为己有,所以此方法应运而生。

大厂高手出品!超炸裂的字体设计指南(下)

这是Kris Wu的某首歌的开头,火焰字体给人感觉新锐超酷,极具个性,想着能否占为己有。平时大家看到的东西,可以及时收录下来,积累的过程对于创作很重要,毕竟读书破万卷下笔如有神。

大厂高手出品!超炸裂的字体设计指南(下)

原字体的势呈S状,两头尖中间饱满。带着这种石头我把字体描绘出来。

大厂高手出品!超炸裂的字体设计指南(下)

火焰楊不過(选自33天33隻楊不過)。钢笔勾勒完毕进行角度的调整,最后在边缘处加了点虚化点缀更加点题。

大厂高手出品!超炸裂的字体设计指南(下)

Behance偶然看到这个字体,肥瘦相间,极具趣味。断章取义提炼几个特点:

  • 凹槽:因为笔画饱满,所以在锐角夹角的地方开了凹槽,目的是字体缩小时候视觉上不会拥挤,正负空间更加平和,不止于笔画黏连。
  • 笔断意连:只要笔势是贯穿的,笔画之间断掉可以添加趣味性,让作品更耐看。
  • 粗细变化:笔画粗细变化极大,转折处细,笔划末粗。

大厂高手出品!超炸裂的字体设计指南(下)

YEAR、夜同音,隐喻在夜晚的欢快。让这俩共用一体,结合上述的规律得出草图。

大厂高手出品!超炸裂的字体设计指南(下)

加以英文点缀,平衡构图。

大厂高手出品!超炸裂的字体设计指南(下)

放到应用中调整。

大厂高手出品!超炸裂的字体设计指南(下)

跟照片风格搭配。

大厂高手出品!超炸裂的字体设计指南(下)

当时看到这个作品觉得挺有意思的,想要占为己有。花体的表现手法再把他做成立体。首先看他的字形特征,圆形的点缀,弯曲的弧度。

大厂高手出品!超炸裂的字体设计指南(下)

  • 特征融入到楊不過,再用曲边勾勒出来平面稿。
  • 调整角度,复制一层,立体形态的雏形基本完成。
  • 链接前后图层,添加厚度,把多余的线条去掉。

大厂高手出品!超炸裂的字体设计指南(下)

添加阴影,先拉一个黑白渐变,接着AI效果—像素画—彩色半调,即可做出带渐变的网格效果。最后勾勒一些小阴影,加上磨损元素,完事。

大厂高手出品!超炸裂的字体设计指南(下)

手里藏书:直接用手写,通过不同材质,笔或者纸达到不同效果。

大厂高手出品!超炸裂的字体设计指南(下)

新秀丽笔,便宜好用,随处可以写,粗细变化灵活。不管你是否系统接受过书法训练,都可随机产生很多变化,令人惊喜。

大厂高手出品!超炸裂的字体设计指南(下)

拍照,PS曲线、色阶处理。

大厂高手出品!超炸裂的字体设计指南(下)

前期书写肯定存在问题,后台在电脑中可以衔接笔刷,点缀抹点,让作品更加完成。

大厂高手出品!超炸裂的字体设计指南(下)

不同的纸、不同的笔,会呈现不一样的效果,重在尝试,挖掘未知,结果肯定会令人惊喜。

大厂高手出品!超炸裂的字体设计指南(下)

平时也可以尝试不同书体的联系。传统书法、现代POP都可以玩,陷入某种框架过久也会造成负面影响,什么都接触反而融汇贯通,灵感会出其不意地出现。

大厂高手出品!超炸裂的字体设计指南(下)

移形换影:字体与形态进行置换。现实中有很多有趣的形态,比如建筑、工具、模型等,可以尝试把形态跟字体结合,产生有趣的设计。

大厂高手出品!超炸裂的字体设计指南(下)

看了一副插图,作者喜欢把动物、人物画成带有果冻感的方块。我把这个形态借助过来,做成了方块楊不過。

大厂高手出品!超炸裂的字体设计指南(下)

灵感来自一个狂风中摇曳的可爱雪人。

大厂高手出品!超炸裂的字体设计指南(下)

架子鼓、练武木桩,他们的穿插结构挺有趣的。把他们置换成字体应该有出其不意的效果。

大厂高手出品!超炸裂的字体设计指南(下)

不要把字体做得过平,部分结构进行了中心旋转,看起来错落有致却又不影响整体识别性,也会让观者觉得你下了功夫。

大厂高手出品!超炸裂的字体设计指南(下)

之前玩了段时间C4D,想着把三维的思路带到字体设计里面。一个正方体,可视面三个面,楊不過三个字分别分散于三个面。

大厂高手出品!超炸裂的字体设计指南(下)

执行阶段挺乱的,也没有C4D直观,所以理结构的时候在识别性以及穿插丰富度中反复寻找平衡。

大厂高手出品!超炸裂的字体设计指南(下)

描边效果不明显,反白填色,结构明了。

大厂高手出品!超炸裂的字体设计指南(下)

想法、方法,都几乎说完了,这份分享确实拖了很久,写到这才发现自己有很多不足,脑子里确实有些内容想说,但是不知道如何梳理,暂且以目前的形式呈现给大家,希望大家能接纳。

总结,字体大感觉可分为特征、节奏、细节三大要素。

  • 特征:通过不同细节增加其识别性,如衬线的位置、弧度的大小、角度的对比、以及基本框架的构造。
  • 节奏:像乐曲一样,不同节奏对比给人不同的感受。字体笔划间的疏密、前后的联系、正负空间的大小、字形大小的对比。
  • 细节:画龙点睛,临门一脚。可以通过不同的质感、转角的形式、笔刷的效果添加细节,完成最后的点缀。

当然,所有方法都不是被固定的,都是我一己之见,初衷只是想让不知道的朋友少走弯路。

大厂高手出品!超炸裂的字体设计指南(下)

单凭着项目中的实践,对字体设计的提升是远远不够的。常言道:决定上限是下班后的2小时。所以业余的不断的积累才能让自己在项目中更高效地去解决设计问题。

大厂高手出品!超炸裂的字体设计指南(下)

积累分两种。主动积累是积极发挥主观能动性,去积极产生一些自己喜欢做的事情。这种情况下,大家激情比较膨胀,做的事自己也很喜欢。

大厂高手出品!超炸裂的字体设计指南(下)

每个人都有自己爱好,我现在终于愿意承认,小学那句兴趣是最好的老师。以我个人为例,去年开始涉足摄影,每组片子开拍前,我总给自己设定计划:目的、效果、字体、内容。相当于做多方面的综合练习,把他做成一个主题作品,有字体、有排版、有摄影、有搭配,而不单单是一张快门的产物。

大厂高手出品!超炸裂的字体设计指南(下)

这是我第一次拍女生。开拍前:日系、海边、纯净、轻松,这是我给自己的目的。所以选定了地点,服装搭配以及符合气质的女生。拍摄完成后,女生挑了片子发我,命名是一串日文,缘由是女生十分热爱日本文化也去过日本留学,用的日文系统,哈哈哈。所以觉得有点意思,就用「未命名」来定义了这次拍摄的主题。字体采用了偏日系的手写体,使得整个意境更轻松一些。

大厂高手出品!超炸裂的字体设计指南(下)

这是第一次人像。想要是效果是:酷、黑暗、金属、厚重、水泥。选定了废旧工厂还有符合气质的模特,上身衣服黑暗机能风,整体色调压暗。拍摄完成,因为没有酬劳,只能请模特吃饭了,算是花了重金打赏,所以起名重金赏。字体的风格也是横平竖直,带有破损的质感,跟整个画面相符合,结合排版,也算是较完整的一张海报作品了。

大厂高手出品!超炸裂的字体设计指南(下)

这次目的是:夜景、长曝光。扛着脚架在香港奔波了一天。YEAR跟夜在念法是一致的,加上有夜夜夜夜这首歌,所以取名yeah夜。香港是中西文化融合的一个地方,所以中英结合,把英文的表现放到了中文里面。

大厂高手出品!超炸裂的字体设计指南(下)

那会很喜欢王勃的《滕王阁序》,年纪轻轻就有满身能量,希望自己也是那种年少有为的人,其中不少片段广为流传。给自己的设想是整个通篇下来用美术字去表现,但每一副字体尽量做到表现形式的不一致。所以最终根据诗句意境以及字面意思,对每个断句做了诠释,感觉还蛮有意思的。

大厂高手出品!超炸裂的字体设计指南(下)

接下来是被动积累。这是一个痛苦的过程,因为不是每个人都有很强的自律性,就算自律性再强也有松动的时候,所以这就是被动的意义所在。为此,我个人组织了33天这个活动。目前已经举办到第三季了,我个人包括参加的小伙伴们都有不同级别的收获感悟。

大厂高手出品!超炸裂的字体设计指南(下)

至此,字如其人的所有干货都输出完毕,衷心希望能给大家带来收获~

欢迎关注作者微信公众号:「VMIC UED」

大厂高手出品!超炸裂的字体设计指南(下)


Viewing all articles
Browse latest Browse all 241

Trending Articles