“贝塞尔曲线”取点与练习方法,含字体设计演示教程

栏目: IT技术 · 发布时间: 4年前

内容简介:贝塞尔曲线(Bézier curve)几乎是平面设计软件中必备的工具,也是设计师们必需掌握的一个技能,所以我们不仅要学会怎样使用它,而且要去熟练它,要熟练就需要大量的练习,那么我们如何练习呢?在本文中我们分享「贝塞尔曲线」的取点技巧以及练习方法,大家按照这种练习方式还会快速提升钢笔工具的运用,本文还通过钢笔工具来绘制出漂亮的中文艺术字案例,希望大家认真学习。“贝塞尔曲线”分为:一阶曲线、二阶曲线、三阶曲线、四阶曲线、五阶曲线,但这些曲线在作字时并不会刻意去记和使用,可是我还是分别找到了他们的动态演示图,方便

贝塞尔曲线(Bézier curve)几乎是平面设计软件中必备的工具,也是设计师们必需掌握的一个技能,所以我们不仅要学会怎样使用它,而且要去熟练它,要熟练就需要大量的练习,那么我们如何练习呢?在本文中我们分享「贝塞尔曲线」的取点技巧以及练习方法,大家按照这种练习方式还会快速提升钢笔 工具 的运用,本文还通过钢笔工具来绘制出漂亮的中文艺术字案例,希望大家认真学习。

贝塞尔曲线五阶动态演示图:

“贝塞尔曲线”分为:一阶曲线、二阶曲线、三阶曲线、四阶曲线、五阶曲线,但这些曲线在作字时并不会刻意去记和使用,可是我还是分别找到了他们的动态演示图,方便大伙更好的去理解。Ta们每阶曲线还有一个公式,但与作字毫无关联…下面只展示动态演示图。

一阶曲线

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

二阶曲线

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

三阶曲线

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

四阶曲线

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

五阶曲线

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

以上对“贝塞尔曲线”有了初步了解后,接下来开启实质的内容, 怎样高效的绘制曲线?

在字体设计的范畴内,使用曲线频率最多的字形非英文花体莫属了!(如下图所示)

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

是不是有些眼花缭乱了~

莫慌~下面看一下英文花体字的解析图,你会从中发现一些规律。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

不晓得大伙有没有发现这些绘制的曲线有一些共性,那么这就是做曲线的要点:

1、锚点尽可能在90°和180°上取点

2、锚点的手柄尽可能都要延伸出来,这样绘制的曲线才会很流畅

3、以上都做到后就是要耐心的调整,这点是非常重要的!很多小伙伴取点和手柄都做到了,只是不能耐心的调节,导致最终的曲线不是很流畅…多少有些太可惜了… …

道理都懂了后练习是非常重要的!这样你才能深刻理解其中的原理!

练习的方式就是临摹花体字 就可以了,我找出了陈年已久我当时做的练习稿。前方高能,非战斗人员请迅速撤离!请注意这不是演习!这不是演习!

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

绘制曲线的要点和练习方式了解啦,那么接下来开始将所得运用到中文字体设计中吧!

基础篇

先从最简单的单线描边作字方式开始。

以“柔情蜜意”为例,首先要确定笔划的形态,这组字给人的直观感受就是缠绵柔美的,那么曲线的形态就再适合不过了。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

大的方向确定好后, 曲线类的字形首先要画一画草稿,切记直接上电脑来做!因为草稿能让你看到曲线的走势,这样作字会很省时!

在这组字形中使用了大量的曲线,但还是保留了一定的直线的存在,这样字形才不至于过软,过软有时会事则其反。这样刚刚好~柔中带刚,刚中带柔。

根据草稿在软件中做出字形初步的模样。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

下面开始查缺补漏,耐心调解使其曲线流畅。这里我将调整后的锚点手柄全部显示出来了,方便大家理解。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

将字面压扁一些,使得Ta们更加耐看一些。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

最后调整下颜色,那么这组字就这样完成了。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

提高篇

提到曲线,就不得不说一说与Ta息息相关的一种字形,那就是宋体字。

那么,接下来以“凉城”为例,使用宋体字的风格来作这组字,首先先用字库字体打出这两个字,观察下Ta的笔划特点,这里我使用的是日本的“小塚宋体等宽”,因为日本的明朝体也就是咱们所说的宋体字是比较优质的。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

首先,来确定下基本的笔划形态,我觉得“凉城”二字的重点在“凉”,可以采用镂空描边的方式加上一些断笔的处理,来体现出透心凉的感觉。

大致的方向确定好后,咱们说明一下 宋体类字形中曲线的一个重要的知识点:曲线的弹性 ,由于曲线是弯曲的,就会给人一种弹性的感觉,这种感受在宋体字中是非常重要的!有弹性的曲线与缺少弹性的曲线在视觉感官上有着非常明显的差别。咱家就以宋体字中的“点”为例,通过对比好坏不用我再说明了吧~

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

回到这组字中来,咱们先把基础的笔划形态确认好。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

接下来,像拼积木一样将他们拼合起来,这里要尤为注意结构匀称,也是作字老生常谈的事情。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

下面添加断笔,注意不要拆分的过于凌乱,适度即可~可以以某种规律添加,使笔划之间有种互联贯穿的感觉。

最后,添加一个与中文字形特点很接近的英文,这组字就完成了。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

提高篇

以上的字形中使用曲线的频率并不是很多,接下来的字形中将会非常频繁的使用曲线了。

下面以“祖国庆生”为例,国庆时给人最深的印象就是红色和五星红旗,那么可以以此作为突破口,在字形中体现出来。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

首先,开始绘制草稿,在笔划的形态采用类似旗帜飘扬的那种感觉,字形中全部都是曲线~有参考连笔字的书写习惯

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

下图的锚点解析图有些恐怖,友情提示:密集恐惧症者请绕行!

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

下面给字形添加颜色,采用国旗中的红、黄二色,黄色中加入了些渐变的效果,以此来模拟旗帜的动感。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

最后,添加一些投影的效果来增加层次感,使其更加的生动形象!再加入辅助性的内容,这组字就完成了。最终的效果是不是很惊艳?

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

究极篇

最后这个案例将是一个究极变态版的,请大伙做好准备~

接下来案例的内容为“梦想”,节选自“坚持自己的梦想,即使没有翅膀也能飞翔”这段话,那么一想到翅膀就很容易联想到曲线。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

这组字形中我将使用大量的曲线,可见下图的草稿。

本字形中使用到了软件中的“螺旋线工具”功能,操作很简单,只需要双击画布设置“衰减”与“段数”的参数即可。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

下面为描边制作画笔,之前“趣味字”的文章中有详细的介绍,这里就不过多介绍了。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

准备工作都做好后,开始借助草稿来绘制最初的字形。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

接下来,加入一些虚线来增加细节。

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

最终,加入一些文字辅助信息,这样一幅形式感较强的海报就完成了!

“贝塞尔曲线”取点与练习方法,含字体设计演示教程

总结

咱们由易到难详细介绍了曲线类字形的设计方法,这类字形画草稿是非常重要而且高效的方式,然后绘制曲线时描点位置的选择更为重要!以上两点都做到后,你要有一定的耐心去调节,这会直接影响到最终作品的品质。

这是使用软件方式来设计字体,对于手绘不好的设计师来说,是很好的入门方式,初学者可以先用这种方法来学习字体设计,最后进阶时,手绘+软件想结合来做字体设计。

作者 | 钱浩Hawking
来源 | 作字(ID: ZuoZi_Hawking )

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品经理修炼之道

产品经理修炼之道

费杰 / 机械工业出版社华章公司 / 2012-7-30 / 59.00元

本书由资深产品经理、中国最大的产品经理沙龙Pmcaff创始人费杰亲自执笔,微软、腾讯、百度、新浪、搜狐、奇虎、阿里云、Evernote等国内外20余家大型互联网企业资深产品经理和技术专家联袂推荐。用系统化的方法论和丰富的实战案例解读了优秀产品经理所必须修炼的产品规划能力、产品设计能力、产品执行能力,以及思考、分析和解决问题的能力和方法,旨在为互联网产品经理打造核心竞争力提供实践指导。 全书一......一起来看看 《产品经理修炼之道》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具