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: 字体设计中的贝塞尔曲线的更多相关文章

  1. svg path中的贝塞尔曲线

    首先介绍以下什么是贝塞尔曲线 贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向. 控制点个数为0时,它是一条直线; 控 ...

  2. NGUI研究院之在Unity中使用贝塞尔曲线(六)[转]

    鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...

  3. Unity3d游戏中自定义贝塞尔曲线编辑器[转]

    关于贝塞尔曲线曲线我们再前面的文章提到过<Unity 教程之-在Unity3d中使用贝塞尔曲线>,那么本篇文章我们来深入学习下,并自定义实现贝塞尔曲线编辑器,贝塞尔曲线是最基本的曲线,一般 ...

  4. 在Unity中使用贝塞尔曲线(转)

    鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...

  5. NGUI研究之在Unity中使用贝塞尔曲线

    鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天由于工作的原因须要将贝塞尔曲线加在project中.那么我迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的随意角度的曲线,这两个点一 ...

  6. 【Unity3d游戏开发】游戏中的贝塞尔曲线以及其在Unity中的实现

    RT,马三最近在参与一款足球游戏的开发,其中涉及到足球的各种运动轨迹和路径,比如射门的轨迹,高吊球,香蕉球的轨迹.最早的版本中马三是使用物理引擎加力的方式实现的足球各种运动,后来的版本中使用了根据物理 ...

  7. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  8. Unity游戏中使用贝塞尔曲线

    孙广东   2015.8.15 比方在3D rpg游戏中.我们想设置弹道,不同的轨迹类型! 目的:这篇文章的主要目的是要给你关于在游戏怎样使用贝塞尔曲线的基本想法. 贝塞尔曲线是最主要的曲线,一般用在 ...

  9. 关于photoshop钢笔工具中各点对应到“贝塞尔曲线”中的含义(cocos2d-x与iOS)

    1.程序中贝塞尔曲线的简单介绍,只介绍曲线部分.程序中的贝塞尔曲线需要四个点:起始点(startPoint) ,控制点1(controlPoint1),控制点2(controlPoint2),结束点( ...

随机推荐

  1. spring cloud微服务快速教程之(三)声明式访问Feign、负载均衡Ribbon

    0-前言 eureka实际上已经集成了负载均衡调度框架Ribbon: 我们有了各个微服务了,那怎么来调用他们呢,一种方法是可以使用 RestTemplate(如:String str= restTem ...

  2. 2020年Java程序员应该学习的10大技术

    对于Java开发人员来说,最近几年的时间中,Java生态诞生了很多东西.每6个月更新一次Java版本,以及发布很多流行的框架,如Spring 5.Spring Security 5和Spring Bo ...

  3. axios封装的拦截器的应用

    axios拦截器   页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者 ...

  4. SpringBoot入门(一)

    1 简介 Spring Boot是快速搭建Spring工程的脚手架,简化配置与依赖关系(约定大于配置),让我们把精力集中在业务部分 2 简单入门事例 创建一个Hello World的Web工程 2.1 ...

  5. 微信授权流程和JSSDK调用流程

    概念理解 业务域名:当前业务使用的是哪个网站,好处:设置业务域名后,在微信内访问该域名下页面时,不会被重新排版.不出现“防欺诈盗号,请误支付或输入qq密码”的提示,微信认为该域名是安全的,客户也不觉得 ...

  6. Linux删除文件 清除缓存

    相信很多测试 经常会经历开发叫你清除缓存这种事. 那我们要怎么清呢? 一.首先,确认你要清除的缓存在哪个目录下,然后切换到该目录下,比如 我现在知道我的的缓存目录是在newerp这个目录下,则如图 二 ...

  7. VMware Workstation CentOS7 Linux 学习之路(3)--.net coreWeb部署

    1.首先创建一个文件夹,命名为core mkdir core cd core 2.我这里用FlashFXP连接Linux 把我发布的项目上传到CentOS7的core文件夹下 此时我输入命令 dotn ...

  8. 关于neo4j初入门(1)

    图形数据库也称为图形数据库管理系统或GDBMS. Neo4j的官方网站:http://www.neo4j.org Neo4j的优点 它很容易表示连接的数据 检索/遍历/导航更多的连接数据是非常容易和快 ...

  9. 洛谷 P1463 [POI2002][HAOI2007]反素数

    题目链接 题目描述 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数1, ...

  10. Docker 安装 Elasticsearch+kibana

    1 下载镜像 docker pull elasticsearch:7.4.1 docker pull kibana:7.4.1 拉取的镜像如下: 2 创建network 创建一个网络,名字任意取,使得 ...