×

设计师如何用原型中钢笔工具快速画图?

作者:anny2020.07.06来源:Web前端之家浏览:8673评论:0
关键词:UI

今天给大家介绍一种使用摹客在线原型中钢笔工具,一分钟画出一只鹅。

首先为大家展示一下我的创作过程:

是不是觉得很简单呢?

其实只要学会使用摹客原型设计的钢笔工具,结合形状合成功能(布尔运算),就能自由绘制你想要的形状,让你的设计更加得心应手。

什么是钢笔工具?

在PS、Sketch等绘图软件中,都有钢笔工具。钢笔工具可以勾画出平滑的直线或曲线,创建矢量图形,让图案在缩放或变形后依然保持清晰和平滑。勾画出线条后,还可以继续编辑,经常用于中高保真设计中绘制不规则曲面,插画等等。

随着互联网产品设计的发展,仅仅使用传统的组件已经无法满足原型设计的需求,如果想要在原型内绘制一个特殊形状的组件或Logo,使用PS等绘图工具设计完后再导入到原型中,不仅来回切换软件费时费力,修改起来也非常麻烦。

摹客在线原型设计推出的钢笔工具,完美地解决了原型设计中自由绘制复杂图形的难题。接下来,就让我们一起来看看,在摹客在线原型设计中,如何使用钢笔工具绘制想要的图形吧~

如何使用钢笔工具绘制想要的图形?

钢笔工具绘制出来的线条,又被称为贝塞尔曲线。贝塞尔曲线的有趣之处在于它的“皮筋效应”。也就是说,随着路径点的移动,曲线会像被皮筋牵引一样有规律地变换。使用钢笔工具绘制的路径,主要由线段和路径点组成:

了解了钢笔工具的工作原理,我们就可以开始创作啦!

1.绘制直线

在工具栏选择“钢笔”工具,在画板中单击鼠标左键,就能生成一个路径点,点击空白处,可以生成另一个路径点,两个路径点之间会自动生成线条。

2.绘制曲线

当我们需要绘制曲线时,可以在单击生成路径点时,长按住鼠标并拖动,则会生成曲线。

3.改变曲线方向

那么鹅头形状的两条相连的曲线是如何绘制的呢?在绘制到两条曲线的连接点时,按住ALT键拖动,就可以调整控制线的方向,从而使下一条曲线的方向发生改变。

4.形状合成(布尔运算)

在绘制图形时,巧妙使用摹客的形状合成功能,可以快速生成需要的形状。摹客的形状合成功能,有联合、减去、排除、相交四种不同的组合方式。

在画鹅的过程中,小摹使用了“联合”的方式,将鹅的身体与三个椭圆形状进行了合并,为大鹅增加了蓬松的羽毛。

5.调整路径

通过上面的操作完成了图形绘制后,突然发现某个地方画得不好或者画错了怎么办?难道需要删掉重来吗?

别着急,这时候只需要双击需要修改的地方,就可以进入编辑模式,点击路径的任意位置,就会出现路径锚点,拖动路径点就可以调整路径形状了。

通过上述简单操作,一只憨态可掬的大鹅就这样诞生啦。当我们可以熟练操作钢笔工具,就可以完成Logo绘制、扁平风插画等高阶操作。

钢笔工具使用小技巧

在使用摹客在线原型设计中的钢笔工具时,只要记住这几点,就可以得心应手地完成图形的绘制啦:

1.结束编辑有两种方式:

  • 新路径点和第一个路径点相重合时,路径会闭合,自动退出编辑状态;

  • 使用Esc键退出编辑状态。

2.直线与曲线的切换:双击路径点,可以使路径点两侧的线段从直线变为曲线,或从曲线变为直线。

3.调整曲线形状:选中曲线上的路径点,会显示控制柄,拖动控制柄即可调整曲线弧度。

4.删除路径点:选中路径点并使用Delete键,可以删除路径点。

除了钢笔工具,摹客在线原型设计还新增了铅笔工具,可以快速用鼠标绘制设计雏形或灵感思路。钢笔工具和铅笔工具为产品团队的小伙伴们提供了理想的图形编辑与创造能力,使摹客在线原型设计不仅仅局限于原型绘制,高保真设计生产力也大大提升。

您的支持是我们创作的动力!
温馨提示:本文作者系anny ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/uidesign20200706.html

网友评论文明上网理性发言已有0人参与

发表评论: