恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计师如何用原型中钢笔工具快速画图?
0.0°
2020-09-01 原创文章 经验/观点 举报 673 1 1 0

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


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



是不是觉得很简单呢?


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


什么是钢笔工具?


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


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


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


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


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




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


1.绘制直线


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




2.绘制曲线


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




3.改变曲线方向


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




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


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


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




5.调整路径


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


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



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



钢笔工具使用小技巧


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

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


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


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


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


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


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


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


免费使用地址:https://www.mockplus.cn/rp

Powered by Froala Editor

更新:2020-09-01

收藏

1人已收藏

  • 280

    作品

  • 125

    粉丝

  • 5

    关注

  • 最新最全产品经理常用工具清单
  • 超实用!2024年必看的10个导航栏设计
  • 如何拿捏2024年的B端设计?(附工具推荐)
  • 别让这6个UI设计雷区毁了你的APP!

    猜你喜欢

      2020-09-01 原创文章 经验/观点 举报 673 1 1 0

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

      0.0°

      你确定要举报设计师如何用原型中钢笔工具快速画图?

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年07月03日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      1
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录