本集讲师:@格尔
获取海量免费设计资源,请访问👉 资源广场
获取本集课程课件及演示案例源文件,请访问👉 教程文件
即时设计是一款全平台覆盖、可云端编辑的专业级 UI 设计工具,为中国设计师量身打造,是 Windows 也能用的「协作版 Sketch」,它设计功能强大,能一站完成设计师所有需求。无论是多位设计师协同创作,还是产品经理随时随地评审、沟通反馈,或是研发人员查看实时更新的设计稿获取切图标注,都可得到满足。
不受系统限制,打开浏览器即可开始创作,同时让设计师在工作中每一个步骤都能拥有更高效愉悦的体验。即时设计支持导入 Figma、Sketch、XD 等文件,无缝衔接以往工作内容;还可导出 Sketch 文件满足跨工具协作,并且所有功能都能免费使用。
本集是即时设计系列基础教程第 2 集,本集讲师格尔向你介绍有关图形绘制、布尔运算与模板的具体操作,学完以后就可以自己上手绘制一些简单的UI图标啦~
编者按:图文内容简概为视频内容的提炼总结,想要了解详细教程内容,请观看文章顶部完整的视频教程。
① 快捷键 A / F 可以进入 绘制画板 的模式,通过鼠标拖拽,或者右侧列表选择尺寸,可以快速创建出你需要的画板。
② 快捷键 R 进入 矩形绘制模式,按住 option / Alt 通过拖拽复制图形。
③ 拖拽锚点可以自由 缩放图形,按住 shift 键可以等比缩放,快捷键 K 进入或退出等比缩放模式。
④ 视图右上方可以找到 对齐模式 按钮,可以直接点选,或是通过快捷键实现不同的对齐效果(详见下图)。
以相机图标为案例,为大家演示布尔运算在实际工作中的应用,首先分别绘制梯形取景框、矩形主体、圆形镜头三个部分。
对矩形和圆形进行布尔运算的 减去顶层 操作,就可以从矩形中挖出一个圆形孔洞了。
拼合路径 可以保留内部形状,轮廓化 则只保留轮廓路径,大家可以视工作的实际需要进行选择。
① 快捷键 shift + H 水平翻转, shift + V 垂直翻转。
② 星形可以通过拖动增减角的数量、圆角程度,结合布尔运算可以设计出一个小齿轮造型的设置图标。
③ 快捷键 shift + X 对图形的 填充和边框快速切换,这里通过一个箭头变星形的案例向大家演示实际用法。
① 允许同时存在多个开口路径,不需要分图层。例如这个感叹号图标中就包含了三个路径,但只需要一个图层。
② 同一个锚点可以连接多个线条,可以快速绘制表格、2.5D 轴测图等造型。
划定嵌入的范围和形状,把需要嵌入的图片放到形状上面,点击 蒙版 图标即可完成嵌入。
从外部网站复制图标的 SVG代码,可以直接粘贴到画板,然后对图标进行编辑和修改。
第 2 课关于 图形绘制、布尔运算与模板 的介绍就到这里,下节课我们将教你在即时设计中进行 字体应用和图像填充,千万别错过~
非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。
转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。
发表评论 已发布 1 条