欢迎访问自学路径

您尚未登录

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

点击登录

即时设计基础教程!NO.07 导出与标注

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

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

即时设计基础教程!NO.07 导出与标注

本集讲师:@YY

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

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

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

什么是即时设计

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

即时设计基础教程!NO.07 导出与标注

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

本集简概

本集是即时设计系列基础教程第 7 集,本集讲师 YY 向你详细介绍有关导出和标注的功能,包括导出和切片功能的使用,以及如何给设计稿做好标注。学会这一招,惊艳一下和你对接的开发同事吧~

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

1、导出功能

① 导出图层或画板

选择需要导出的图层或画板,在右侧的属性面板最下方点击加号,填写导出预设,包括尺寸、前后缀、格式等参数。预设可以根据我们的需要来添加或移除。

即时设计基础教程!NO.07 导出与标注 即时设计基础教程!NO.07 导出与标注 即时设计基础教程!NO.07 导出与标注 即时设计基础教程!NO.07 导出与标注

② 导出画布

当我们没有选择任何对象的时候,可以看到右侧属性面板有这些内容:画布背景色、页面颜色、文件样式等,可以一键修改,然后导出。选择预设内容,即可导出整个画布。

即时设计基础教程!NO.07 导出与标注

导出时可以选择是否包含背景颜色,另外还可以快速批量地修改画面中出现的所有颜色。

即时设计基础教程!NO.07 导出与标注 即时设计基础教程!NO.07 导出与标注

③ 导出切片

对于设计师和开发人员来说,最常用的并不是图层或者画布的导出,而是切片的导出。通过切片功能,我们可以快速得到前端需要的切图。

即时设计基础教程!NO.07 导出与标注

左侧工具栏最后一个刀型的图标,就是切片工具,快捷键 S,开启后可以通过画框来控制切片需要切取的范围大小。

即时设计基础教程!NO.07 导出与标注

框选后可以随时拖拉修改宽高及层级位置。切片设置中还包括 裁剪透明像素边缘、导出时包含背景色 等效果,大家可以根据实际需要来选择。

即时设计基础教程!NO.07 导出与标注

④ 导出所有切片

当我们有多个切片、图层或画板需要导出时,可以通过左上角的下拉菜单选择 导出所有切片,或者通过 快捷键 command / ctrl + option / alt + E 打开此面板。

即时设计基础教程!NO.07 导出与标注 即时设计基础教程!NO.07 导出与标注

导出类型、导出文件的倍率和格式、文件类型 等,大家可以根据自己工作的实际需要进行选择。

即时设计基础教程!NO.07 导出与标注 即时设计基础教程!NO.07 导出与标注

2、标注功能

即时设计里提供的标注功能,可以将设计时的参数直接生成标注,避免手动标注产生的误差和遗漏。另外,基于在线平台的优势性,开发只需要通过一个链接打开就能使用,设计内容修改后,标注信息也会实时更新,大大提升了整个团队的交接和工作效率。

即时设计基础教程!NO.07 导出与标注 即时设计基础教程!NO.07 导出与标注

选中单个图层时,可以在这个标注面板查看该图层的所有属性,包括 坐标、尺寸、样式、代码 等等,点击属性值即可快速复制;

选中多个图层时,标注面板将展示这些图层的共同属性,当然也可以单个点击查看相应的属性,方便快捷。

即时设计基础教程!NO.07 导出与标注

选中图层的同时按下 快捷键 option,然后将鼠标移到其他图层上,可以查看两个图层的间距,告别过去用矩形大小来测量的尴尬。

工作台的右上角,有对标注进行设置的选项,包含 颜色、代码、单位、倍率 等,可以根据需要自行选择。

即时设计基础教程!NO.07 导出与标注 即时设计基础教程!NO.07 导出与标注

第 7 课关于 导出与标注 的介绍就到这里,下节课我们将教你在即时设计中进行 插件的使用,敬请期待~

收藏 1

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

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

复制本文链接
img

发表评论 快来秀出你的观点

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

支持键盘 ← → 键翻阅图片