虎课网为您提供字体设计版块下的即时设计-切片-UI零基础快速上手教程22图文教程，难度等级为新手入门，下面开始学习这节课的内容吧！

本节课讲解UI系列课程——【即时设计】零基础到精通，同学们可以在视频下方评论区进行留言，老师会根据你们的问题进行回复，作业也可以在评论区进行提交。

那我们开始今天的教程吧。

1.本次课程主要讲解【切片工具】，快捷键【S】，实际项目中经常接触的图标，创建时需新建画板，然后可以作为导出项。

2.导出-点击【+】号键，添加到处项，点击【文件】-【导出】-【导出所有切片】。

3.选择画板【24*24/inviconde】-所有元素创建分组【Ctrl+G】-重命名【ICON】，点击【切片工具】。

4.复制【Ctrl+D】切片，输入尺寸【W20,H20】，这样在导出的时候，可以获得两个不同尺寸的切片。

5.【切片工具】可以不用复制画板，批量导出多个像素的图形，点击【文件】-【导出】-【导出所有切片】。

6.切片工具的使用场景二【画布内的使用方法】，点击【切片工具】-在【画板】图层-【框选图标】-输入尺寸【W30,H30】，导出的图标带底色。

7.切片工具不会识别图层区域，切片工具的使用场景三，将头图切成多份-方便网络逐步加载，提高视觉体验。

8.对于【H5页面】会经常使用到【切片工具】，显示【标尺】-拖出【参考线】分区-【切片工具】根据参考线将图片切分。

9.切片工具的三个使用场景：①、单独的画板切【ICON】图标导出多种尺寸，②、画布内的使用方法，③、网页设计的时候将头图切成多份。

10.本节课程内容就到此结束，课下多练习复习巩固课程内容，有问题的同学可以视频下方评论区留言。

以上就是即时设计-切片-UI零基础快速上手教程22图文教程的全部内容了，你也可以点击下方的视频教程链接查看本节课的视频教程内容，虎课网每天可以免费学一课，千万不要错过哦！