欢迎访问自学路径

您尚未登录

登录后即可免费访问自学内容

点击登录

即时设计基础教程!NO.02 图形绘制 布尔运算与模板

时间:2022-05-01
B站视频:av638636744
类别:UI设计
水平:入门
观众:1.3w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

当视频无法加载时请刷新页面,
或前往PC获得最佳体验。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板

本集讲师:@格尔

免费使用即时设计,请点击右侧链接👉 即时设计

获取海量免费设计资源,请访问👉 资源广场

获取本集课程课件及演示案例源文件,请访问👉 教程文件

什么是即时设计

即时设计是一款全平台覆盖、可云端编辑的专业级 UI 设计工具,为中国设计师量身打造,是 Windows 也能用的「协作版 Sketch」,它设计功能强大,能一站完成设计师所有需求。无论是多位设计师协同创作,还是产品经理随时随地评审、沟通反馈,或是研发人员查看实时更新的设计稿获取切图标注,都可得到满足。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板

不受系统限制,打开浏览器即可开始创作,同时让设计师在工作中每一个步骤都能拥有更高效愉悦的体验。即时设计支持导入 Figma、Sketch、XD 等文件,无缝衔接以往工作内容;还可导出 Sketch 文件满足跨工具协作,并且所有功能都能免费使用。

本集简概

本集是即时设计系列基础教程第 2 集,本集讲师格尔向你介绍有关图形绘制、布尔运算与模板的具体操作,学完以后就可以自己上手绘制一些简单的UI图标啦~

编者按:图文内容简概为视频内容的提炼总结,想要了解详细教程内容,请观看文章顶部完整的视频教程

1、图形绘制

快捷键 A / F 可以进入 绘制画板 的模式,通过鼠标拖拽,或者右侧列表选择尺寸,可以快速创建出你需要的画板。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

快捷键 R 进入 矩形绘制模式,按住 option / Alt 通过拖拽复制图形。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

拖拽锚点可以自由 缩放图形,按住 shift 键可以等比缩放,快捷键 K 进入或退出等比缩放模式。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

视图右上方可以找到 对齐模式 按钮,可以直接点选,或是通过快捷键实现不同的对齐效果(详见下图)。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

2、布尔运算

以相机图标为案例,为大家演示布尔运算在实际工作中的应用,首先分别绘制梯形取景框、矩形主体、圆形镜头三个部分。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

对矩形和圆形进行布尔运算的 减去顶层 操作,就可以从矩形中挖出一个圆形孔洞了。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

拼合路径 可以保留内部形状,轮廓化 则只保留轮廓路径,大家可以视工作的实际需要进行选择。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板即时设计基础教程!NO.02 图形绘制 布尔运算与模板

3、案例实操

 快捷键 shift + H 水平翻转, shift + V 垂直翻转

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

星形可以通过拖动增减角的数量、圆角程度,结合布尔运算可以设计出一个小齿轮造型的设置图标。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

 快捷键 shift + X 对图形的 填充和边框快速切换,这里通过一个箭头变星形的案例向大家演示实际用法。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板 即时设计基础教程!NO.02 图形绘制 布尔运算与模板

4、矢量网格绘制

允许同时存在多个开口路径,不需要分图层。例如这个感叹号图标中就包含了三个路径,但只需要一个图层。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板

② 同一个锚点可以连接多个线条,可以快速绘制表格、2.5D 轴测图等造型。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板

5、蒙版功能

划定嵌入的范围和形状,把需要嵌入的图片放到形状上面,点击 蒙版 图标即可完成嵌入。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板即时设计基础教程!NO.02 图形绘制 布尔运算与模板

从外部网站复制图标的 SVG代码,可以直接粘贴到画板,然后对图标进行编辑和修改。

即时设计基础教程!NO.02 图形绘制 布尔运算与模板

第 2 课关于 图形绘制、布尔运算与模板 的介绍就到这里,下节课我们将教你在即时设计中进行 字体应用和图像填充,千万别错过~

5 收藏 4

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 1

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了
/

支持键盘 ← → 键翻阅图片