即时设计教程 • 使用切片

对于设计师和开发而言,「切片」已经是一个非常熟悉且常用的功能。切片的使用方式简单快捷,开发可以通过切片功能快速得到前端需要的切图。

功能入口

在左侧组件栏点击「切片」,或使用快捷键S,可开启切片模式。
开启后,可在画布中创建任意切片。

 

如何使用切片

创建切片内容

与画矩形的操作相同,可以通过画框来控制切片需要切取的范围大小。
画框可以随时修改宽高及层级位置。

导出切片选项

导出切片时,可以选择是否使用切片的实际大小导出该切片包含的内容; 如果勾选「裁剪透明像素边缘」,可以选择只导出该切片下的有效内容,去除周围的透明像素。

当直接在画板中创建切片时,右侧画板将显示导出画板背景色的选项。如果需要应用或取消导出画板背景色,点击「修改按钮」可以跳转到画板设置,勾选或取消勾选「导出时包含背景色」。


 

切片的优点

相比于直接导出的功能,切片功能除了尺寸上十分自由外,还更利于实际开发环境的使用:

  • 直接控制导出所需图片的大小,不论是需要多裁剪出空白区域,还是只想要导出某图片的部分模块;
  • 当一个配图有多个相关图层,在不需要手动调整设计稿的图层、尺寸或任意属性的情况下,可以直接切出想要的内容区域;
  • 设计过程中有的配图、图标等直接导出时不一定保持在同一个尺寸,但在开发过程中,将配图写在同一个大小上可让样式更规整统一,布局更具有逻辑性。使用切片可以直接解决这个问题。