Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >设计师如何用原型中钢笔工具快速画图?

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

原创
作者头像
奔跑的小鹿
修改于 2020-09-02 10:05:56
修改于 2020-09-02 10:05:56
1.5K0
举报
文章被收录于专栏:无原型不设计无原型不设计

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

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

是不是觉得很简单呢?

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

什么是钢笔工具?

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

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

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

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

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

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

1.绘制直线

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

2.绘制曲线

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

3.改变曲线方向

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

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

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

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

5.调整路径

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

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

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

钢笔工具使用小技巧

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

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

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

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

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

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

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

在阅读了本文之后,相信你对于摹客的钢笔工具已经有了足够了了解,那么马上开始你的创作吧!

体验地址:https://www.mockplus.cn/rp​​​​

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
UI入门第二课:设计师必备的专业技能(实战篇)
算算时间,成为一名UI设计师也快两年了。前不久,跟大家分享了我入行这一年多以来的心得体会,发现反响挺好,到目前为止,依然有不少萌新小伙伴私聊我转行的相关问题。所以我打算将“UI入门”这个话题做一个系列,希望可以帮助到更多准备入门UI设计的朋友。
奔跑的小鹿
2022/05/26
3090
UI入门第二课:设计师必备的专业技能(实战篇)
手把手教你设计师必备的专业技能
算算时间,成为一名UI设计师也快两年了。前不久,跟大家分享了我入行这一年多以来的心得体会,发现反响挺好,到目前为止,依然有不少萌新小伙伴私聊我转行的相关问题。
奔跑的小鹿
2022/01/18
2770
手把手教你设计师必备的专业技能
2020年UI设计师必备工具清单
UI设计师一直是IT行业最热门职位之一,因其薪资待遇较高,学习门槛较低而广受欢迎。在百度指数搜索“UI设计”来看,从2012年开始,UI设计的搜索呈明显上升趋势,尤其是在2016年左右出现“井喷式”增长。
奔跑的小鹿
2020/03/20
1.8K0
2020年UI设计师必备工具清单
SVG画图:画一个腾讯云logo
首先来了解一下什么是 SVG,SVG(Scalable Vector Graphics)是一种基于 XML 的图像格式,用于描述二维矢量图形。这种格式具有高度的可伸缩性和分辨率独立性,意味着 SVG 图像可以在不失真的情况下放大或缩小,非常适合用于网页设计、移动应用、数据可视化等领域。
yichen
2024/04/05
3990
SVG画图:画一个腾讯云logo
图形编辑器开发:钢笔工具功能说明书
只有理解了需求,尤其是复杂的需求,才能更好地进行功能开发,写出诗一样的高鲁棒性代码。
前端西瓜哥
2024/01/26
3190
图形编辑器开发:钢笔工具功能说明书
Affinity Designer 初体验 | Sketch的替代品?
在做矢量图设计的时候,以前OSX上总是用的Sketch。简单清爽的UI,丰富的功能,让我很是喜爱。使用Windows之后,我找到了Adobe XD这一替代品。然而,在使用一段时间了之后,我逐渐被它混乱的功能所逼疯。常用的功能,诸如贝塞尔曲线的开闭、曲率的调整、等众多功能的缺失,以及混乱的元素管理逐渐把我劝退。本来我也考虑过Adobe Illustrator,但是过于困难的界面再次把我劝退。直到我遇见了Affinity Designer(
gyro永不抽风
2021/05/21
1.7K0
canvas相关API简介及思考
canvas对于大部分前端开发人员来说,可以用一个词来形容--既熟悉又陌生。为什么这样说,因为大部分前端开发人员在写业务代码的时候用到canvas的概率很小,就算用到了,也只是类似drawImage这个API,并且,对drawImage这个API的了解也并不深刻,只知道它可以将图片绘制到画布上,其他的功能大部分人应该都不知道。
terrence386
2022/07/15
8170
canvas相关API简介及思考
工具推荐丨ui入门快速上手的设计工具
最近在5G冲浪的时候看到一个做UI的小姐姐分享工作日常,其中有个画面是她的电脑桌面,像这样:
奔跑的小鹿
2022/03/16
8060
工具推荐丨ui入门快速上手的设计工具
用什么软件画流程图好?
流程图(Flow Chart)这个概念对很多人来说并不陌生,但如果让你定义或者举例说明什么是产品流程图,恐怕还是有难度的。
奔跑的小鹿
2021/04/29
4.5K0
UI设计师必备的五款界面设计工具
在前几篇文章中,我们分享了一些最受欢迎的原型设计工具,今天我们来谈谈界面设计工具。工具的重要性对于设计师来讲不言而喻。任何想法都需要借助工具来实现。想要成为一名出色的UI设计师,你需要多掌握一些技能,才能增强自身竞争力。同时也给那些想转行做UI设计师的朋友一些工具建议,接下来我们就来盘点一下那些UI设计师需要掌握的界面设计工具。
奔跑的小鹿
2018/08/07
3.6K0
UI设计师必备的五款界面设计工具
图形编辑器基于Paper.js教程16:在Paper.js canvas画布中实现花贝塞尔曲线的功能,创建并编辑贝塞尔曲线,包括添加、删除曲线的节点,以及调整曲线的控制柄
在图形编辑中,贝塞尔曲线因其灵活的曲线控制而被广泛应用,特别是在设计软件和矢量绘图工具中。在本文中,我将深入解析一个基于 Paper.js 的交互式贝塞尔曲线编辑工具。通过这个工具,你可以在画布上创建并编辑贝塞尔曲线,包括添加、删除曲线的节点(称为“段”),以及调整曲线的控制柄(称为 handleIn 和 handleOut)。
拿我格子衫来
2024/11/21
2050
6个超实用的AI小工具
6个超实用的AI小工具 BGM:鬼火の童・鬼切、虎徹にございます! 今天学习的AI实用小工具,分分钟帮我们提高666倍工作效率,让我们听着这首欢快魔性的小曲儿一起去认识它们吧! 01 矩形网格工
企鹅号小编
2018/01/09
1.4K0
6个超实用的AI小工具
Adobe XD和Sketch,谁才是王者?
2017年,Adobe高调发布全新的界面+交互设计工具Adobe  XD。彼时的Adobe在界面设计领域可谓是节节败退,曾经的明星产品Ai和PS虽然都针对性做了很多功能改进,依然收效甚微。如今3年过去了,今天我们就来扒一扒两者,到底谁才是最适合设计师的扛把子?
奔跑的小鹿
2020/05/12
2.9K0
软件原型设计工具有哪些?
原型设计是将想法转变为设计过程中至关重要的一环。经常有设计师小伙伴可能会问到,“哪个原型设计工具是最好的呢”?实际上这是一种错误的提问方式,尤其是在当下原型工具种类繁多,针对不同需求各有优势的大环境中更加如此。就设计师而言,更在意的应该是“哪个原型设计工具对我现阶段的目标是最好的”?在这里,笔者列出了在3种常见场景下最合适的原型图设计工具的推荐清单,希望对你有所帮助。
奔跑的小鹿
2021/06/02
1.3K0
CSS 路径动画工具的诞生
本文介绍了一种CSS路径动画的曲线生成方法,该方法通过将贝塞尔曲线与关键帧动画相结合,实现了在动画过程中沿路径匀速运动的效果。具体来说,该方法包括以下步骤:首先,通过贝塞尔曲线公式构建贝塞尔曲线;然后,将贝塞尔曲线与关键帧动画相结合,通过计算关键帧动画的插值函数,将贝塞尔曲线上的点映射到关键帧动画的插值点上;最后,在动画过程中,根据贝塞尔曲线上的点的位置,计算动画对象在关键帧动画中的位置,以实现沿路径匀速运动的效果。
chiron
2017/09/13
4.1K0
CSS 路径动画工具的诞生
一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制
Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。
生信宝典
2018/10/25
7.8K0
一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制
总有一款适合你的协同设计工具
协同设计是当下技术行业技术更新的一个重要方向,也是设计类工具软件发展的必然趋势。它,不单是一个设计类的专业术语,更是一种商业化的服务模式。
奔跑的小鹿
2018/08/06
1.3K0
总有一款适合你的协同设计工具
打造高水平设计的必备利器Ai中文版illustrator-直装永久使用
Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,很多有插画排版或者矢量插图 工作 需求的小伙伴们会经常和这款软件打交道,但是最近小编发现了这款软件的新功能,就是制作海报,小编相信有很多小伙伴们还不知道吧,那么接下来就看看小编为大家带来的这篇文章学习一下制作方法吧!
木子学Lee
2023/04/08
1.6K0
打造高水平设计的必备利器Ai中文版illustrator-直装永久使用
第154天:canvas基础(一)
​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。
半指温柔乐
2018/09/11
7840
第154天:canvas基础(一)
原型设计用得最多的是PS吗?该如何画原型?
在产品开发的前期工作中,产品经理或设计师通常需要进行原型设计工作,创建一个可交互和可视化的原型,以更准确地表达他们的设计构思和想法,并为项目顺利递交给开发人员做好准备。进行原型设计时,使用设计工具来画原型图是最高效的方式。
奔跑的小鹿
2023/07/04
5140
原型设计用得最多的是PS吗?该如何画原型?
推荐阅读
相关推荐
UI入门第二课:设计师必备的专业技能(实战篇)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档