AI: 字体设计中的贝塞尔曲线
http://www.xueui.cn/tutorials/illustrator-tutorials/designers-must-know-the-secret-of-the-bezier-curve.html

有没有观察过你喜欢的插画师们未完成的作品?仔细观察,你会发现他们非常着迷于调整贝塞尔曲线的手柄(也就是钢笔工具画出来的曲线啦~),并且力图让调整曲线的手柄尽量水平或者垂直。为什么呢?
我想通过这个教程,为力图探寻此道的设计师们打开一扇门,指引方向。当然,首先你熟练使用AI和PS中的钢笔工具才行。
指导最近我才开始探寻这些操作的意义,并且力图去发觉插画师们为着迷于此。事实证明,让手柄保持水平和垂直可以为调整曲线省下一大堆的时间和精力。
接下来的教程中,我会同你仔细探讨这些问题。

这是字体草图在AI中的轮廓预览图( ⌘+Y / Ctrl+Y)。

注意:要预览你自己的贝塞尔曲线——也就是钢笔轮廓,你可以打开AI的首选项进行设置( ⌘K)。这可以让你更方便控制手柄调节曲线的弧度。

请注意所有的贝塞尔曲线的手柄(除了极少数特殊状况,我们稍后聊聊那些部分),它们大多都整齐地锁定在水平线上,或者垂直于平面。让我们探讨一下,为什么这样的设计很好用。
首先,它减少了你节点位置的选取选项
这可能听起来不太好,但是实际操作中,这样来规划的确会便捷不少。走进饭店拿起菜单,发现菜单详尽无比,从印刷厂地址到ISBN串码都注明了。我讨厌这样。所以,有的时候,贝塞尔曲线的节点如果没有设定好的话,就会像那菜单一样令人头疼。在Illustator中,你的草图是随时可以查看随时可以调整的。当你的光标悬停在曲线上的时候,就像你的手指停留在印满各种信息的菜单上,从哪里下手才对?我不知道你会怎么做,我应该会选择当天的特色菜——所有曲线中最靠外的点,来着手。好吧,让我们来探讨一下这个问题。
节点位置布局
这是曲线设计的秘诀所在。掌控好这些华丽曲线在0°和 90°切线上的手柄,才是从战略上把控好全局的核心策略。听起来有点复杂?不,一旦你仔细体会,会发现这个方法非常好用。
提示:当你调整手柄角度的时候,按住Shift按键,可以很快将手柄校准到水平/垂直。
看看下面4图中简化的线框图。红色的圆圈代表水平手柄的节点,蓝色圆圈是垂直手柄的节点。注意观察每条曲线最外侧的节点的位置设定。
图4
图5显示出更加详细的内容,并且用红色的曲线标注出建立节点的最佳位置。
图5
当你的节点布局错误的时候,就会出现图6中的问题:
图6
如箭头所指,将红圈移动到左上方,曲线的问题会得到解决。
现在,我们都明白了,节点的位置并不一定是随机的。事实上,它也不应该是随机的。接下来,你应该按照上面的描述来设定自己的节点排布方案,允许自己“少像一点”,多练习几次,应该就能培养出你字体设计的“肌肉记忆”了。
接下来我们来探讨一下贝塞尔曲线重的手柄的控制。
使用手柄调出漂亮的曲线
全情投入节点排布之后,你该适时地关心一下手柄的调节了。先看看下方的GIF图7:
图7
如果你曾用AI制作过字体或者图形的话,那么你肯定明白这是怎样的一副景象:你手绘出草图,构建节点布局,然后将绝大部分的时间和精力耗费在调教手柄上,期待他们的配合,试图创造出完美的曲线。的确,这个环节是没有灵丹妙药和取巧之道的,大量的练习和日渐熟练的手感才是达成目标的终极方案。
此时此刻,这些垂直和水平的贝塞尔曲线手柄就是能否调出完美曲线的制约因素了。当你调整手柄的时候,手指应该始终按住Shift键,确保调整手柄长度的时候,角度不会偏移。这个时候,你会发现你控制手柄更加自如了。这样一来,我发现自己使用AI制作复杂的字体和图形越来越得心应手了。
还有什么要注意的?
以上的内容听起来都挺贴心的,但是依然有一些问题是需要注意的。
1、有的时候你很难找到曲线上最靠外的临界点。
并不是所有的曲线都会像图5一样达到顶点,这也意味着总有节点的切线无法水平或者垂直。在这种情况下,你需要按照曲线的走向,设定更合理的节点,尽可能创造符合草稿的弧线,而不是死板地追求衡平竖直的切线/手柄。
2、必须控制好节点的密度
即使你忘记这一点也比随便安排节点来的好。如果你随便安排节点,你的曲线会出现许多额外的突出,而缺少圆润。如果你的曲线仅仅只是看起来不自然,那么你可以试图调节临近的曲线达到完美的效果。合理控制好节点的密度,也是为了达成这一目的。
3、节点的安置可以根据状况合理地稀疏一点,或者致密一些。
有的时候,你所创建的曲线是弧度变化比较大,一个“临界点”紧邻着另外一个“临界点”,如下图所示:
图8
不用担心,放大图像会方便你控制好这些节点和弧度细节,就像下面这张图:
图9
有的时候,多考虑一下整图的横竖手柄的布置,是能让作品臻于完美的。
我们探讨了节点位置布局的方法,如果这可以减少你做图的时间,那么有什么理由不用它呢?控制好手柄的长度,也可以减少多余的节点,从而使得你的AI文件更加精悍小巧。更重要的是,节点数量的减少也会让曲线更流畅。最后,总体设计时长的减少,使得你有更多的时间在草稿纸上设计更漂亮的图形和字体,何乐而不为呢?
老实说,掌握好了这些技巧还是挺好玩的。
所以,当你拥有你其他设计师朋友不具备的技能的时候,不妨记录下你的设计细节,发布在优设,或者UI中国这一的平台上,让更多设计师看到,让大家一同进步吧。
以下是更多的使用案例:
图10
图11
图12
图13:Okay Type
图14: Neil Secretario
图15: Luke Dorny
图16:Alexandr Ivanov
教程到此结束。如果你受到启发了,不妨也动手做做看吧!虽然中文的字体设计和英文字体设计不尽相同,但是很多细节设计是共通的!况且,用AI制作复杂的花纹和图案的时候,这篇教程同样拥有启发作用。
初学者的一个实例!
http://www.wzsky.net/html/Photo/Illustrator/124010_1.html
AI: 字体设计中的贝塞尔曲线的更多相关文章
- svg path中的贝塞尔曲线
首先介绍以下什么是贝塞尔曲线 贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向. 控制点个数为0时,它是一条直线; 控 ...
- NGUI研究院之在Unity中使用贝塞尔曲线(六)[转]
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- Unity3d游戏中自定义贝塞尔曲线编辑器[转]
关于贝塞尔曲线曲线我们再前面的文章提到过<Unity 教程之-在Unity3d中使用贝塞尔曲线>,那么本篇文章我们来深入学习下,并自定义实现贝塞尔曲线编辑器,贝塞尔曲线是最基本的曲线,一般 ...
- 在Unity中使用贝塞尔曲线(转)
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...
- NGUI研究之在Unity中使用贝塞尔曲线
鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天由于工作的原因须要将贝塞尔曲线加在project中.那么我迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的随意角度的曲线,这两个点一 ...
- 【Unity3d游戏开发】游戏中的贝塞尔曲线以及其在Unity中的实现
RT,马三最近在参与一款足球游戏的开发,其中涉及到足球的各种运动轨迹和路径,比如射门的轨迹,高吊球,香蕉球的轨迹.最早的版本中马三是使用物理引擎加力的方式实现的足球各种运动,后来的版本中使用了根据物理 ...
- Canvas中绘制贝塞尔曲线
① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...
- Unity游戏中使用贝塞尔曲线
孙广东 2015.8.15 比方在3D rpg游戏中.我们想设置弹道,不同的轨迹类型! 目的:这篇文章的主要目的是要给你关于在游戏怎样使用贝塞尔曲线的基本想法. 贝塞尔曲线是最主要的曲线,一般用在 ...
- 关于photoshop钢笔工具中各点对应到“贝塞尔曲线”中的含义(cocos2d-x与iOS)
1.程序中贝塞尔曲线的简单介绍,只介绍曲线部分.程序中的贝塞尔曲线需要四个点:起始点(startPoint) ,控制点1(controlPoint1),控制点2(controlPoint2),结束点( ...
随机推荐
- PHP 经典面试题集
这篇文章介绍的内容是关于PHP 经典面试题集 PHP 经典面试题集,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 结合我自己面试情况,面对的一些php面试题列举出来,基本上结合自己的看 ...
- (httpd、php)2
(一)再说编译安装httpd2.4 新特性: 1:MPM(多处理模块)支持运行为DSO(动态共享,动态加载模式)机制,以模块形式按需加载,支持动态加载 2:event MPM生产环境可用 3:支持异步 ...
- html1,初识html
vs code编辑器 安装插件 chinese 中文支持 open in browser 快速预览文件 view in browser 快捷键 快捷键 描述 shift + end 选中从光标到行尾 ...
- LEFT函数使用
详解:LEFT函数用于从一个文本字符串的第一个字符开始返回指定个数的字符 1.提取A2单元格从左往右2位字符 2.函数使用用途: LEFT函数用于从一个文本字符串的第一个字符开始返回指定个数的字符 语 ...
- Qt5学习(2)
1.学习了qt quick application 这是一种跟application不同的设计方式.主要就是靠“拖拖拽拽”,然后设置属性(颜色,大小),布局(margins等),然后要注意控件的从属关 ...
- JPA或Hibernate中使用原生SQL实现分页查询、排序
发生背景:前端展示的数据需要来自A表和D表拼接,A表和D表根据A表的主键进行关联,D表的非主键字段关联C表的主键,根据条件筛选出符合的数据,并且根据A表的主键关联B表的主键(多主键)的条件,过滤A表中 ...
- 0182 JavaScript执行机制:单线程,同步任务和异步任务,执行栈,消息队列,事件循环
以下代码执行的结果是什么? [结果是1 2 3 ] console.log(1); setTimeout(function () { console.log(3); }, 1000); console ...
- HashMap 源码赏析 JDK8
一.简介 HashMap源码看过无数遍了,但是总是忘,好记性不如烂笔头. 本文HashMap源码基于JDK8. 文章将全面介绍HashMap的源码及HashMap存在的诸多问题. 开局一张图,先来看看 ...
- scalikeJDBC的restapi
ScalikeJDBC是一个Scala的JDBC框架,适用于绝大多数RDBMS数据库(关系数据库) 重要的是,在这几天简单的使用了一下,用sqlserver来测试了一下用mysql或者h2的scali ...
- 两个关于 Java 面试的 Github 项目
哈喽,大家好.相信大家都知道金九银十,在人才市场上是指每年的 9 月和 10 月是企业的招聘高峰期.这个时候企业往往有大量招聘需求,求职者在这个时候就找工作无疑是最适合的.需求大,谈工资什么的就更容易 ...