UI设计网页美工设计师的Photoshop CC 生成器切片全攻略
在很多的设计项目中都会用到PS软件，PS功能强大功能中有一个切片工具，这是UI设计师和网页美工设计人员需要的掌握的使用方法。来自非凡学院UI设计培训的武老师为同学们带来了PS切片工具的教程的全攻略。在非凡学院学习UI设计培训、网页设计培训、网页美工培训等课程的同学使用的都是学院默认版本CS6进行练习，虽然老师们在课堂上都会强调PS的版本再高，但使用得最多最实用的功能仍然是那几个，事实也确实如此。但对于切片功能，CC版本以后确实发生了重大变化，使得原来的切片输入工具失去了意义。
以下仅针对需要经常使用Photoshop进行切片的同学，请安装至少Photoshop CC2014以上版本才能使用生成器。
打开编辑菜单——首选项，在增效工具下勾选启用生成器，然后关闭软件重开。
一、单个形状切片输出
值得注意的是，生成器并不支持像素对象的输出，所以首选的是形状图层，请同学们注意。
1，首先我创建一个“切图示范”的文件，保存在指定位置，格式是psd。
2，接下来使用形状层绘制两个图标，比较常见的填充和描边图标，分别按要求进行命名，然后在图层名称的后缀加上  . png
ps切图尺寸变小3，保存。选择文件菜单——生成——图像资源。
4，在保存psd文件的位置会自动生成一个同名assets文件夹，然后在里面就可以到刚刚命名为 .png的图标文件，它们被自动切片输出，怎么样？很方便吧？
5，但大家仔细看一下，发现由于图标锁定宽高比的关系，变成了39*40。按照设计规范，这显然是不合格的，图标尺寸出现奇数，并且不是我们规范中的44*44的尺寸。接下来我们在原来图标图层的下方，分别创建两个44*44的正方形形状层。
6，分别各自选中上方图标，按住Ctrl载入选区的方式载入下方正方形选区并添加图层蒙版。原有的两个正方形最后可以删除或隐藏。
7，再次保存刷新，在输出位置可以看到输出的png尺寸，变成了规范要求的44*44，同时周围保持透明边距。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。