在进行UI设计时,常常会用到Photoshop的切片工具,将一个页面切成多个部分,但是切片后怎么将它们导出为图片呢?本文将从多个角度进行分析。
一、使用原生的导出功能
在Photoshop中,切片的导出功能是自带的。在菜单栏中选择“文件”->“存储为Web所用格式”,弹出“存储为Web所用格式”对话框。在对话框中,选择使用“切片选择工具”创建的切片,然后点击“存储”按钮即可将切片导出为图片。
优点:操作简单,不需要安装插件。
缺点:可能导出后的图片会出现色差,而且有些版本的Photoshop可能会出现导出失败的情况。
二、使用插件导出
在切片导出的领域,有很多优秀的插件可供选择,如“Slicy”、“Cut&Slice Me”、“PNG Hat”等。这里以“Slicy”为例,讲一下如何执行导出。
1. 安装插件:Slicy可在Mac应用商店中下载付费版的,也可以免费下载试用版的。
2. 在Slicy的用户界面中,将需要导出的图层拖入其中。Slicy会自动识别出需要导出的切片。
3. 点击“Export”按钮,选择导出路径和格式,点击“Export”即可将切片导出为图片。
优点:导出速度快,图片质量高,更加方便。
缺点:需要安装插件,而且有些插件需要付费购买。
三、使用Export Kit插件(仅限PS CC)
除了以上提到的插件外,还有Export Kit插件可供选择。该插件将整个PSD文件转换为网页或应用程序,并自动导出切片。
具体操作:在选定文件后,在菜单栏中找到“Export Kit”选项,并点击“Export Kit Pro”或者“Export Kit Suite”。在弹出的对话框中,选择需要导出的内容和格式,然后点击“Start Export”按钮即可。
优点:转换速度快,功能非常强大,可以直接输出网页或应用程序。
缺点:只适用于PS CC,而且对于新手来说,使用门槛可能略高。
总结一下,以上3种方法都是很好的切片导出方式,可以根据自己的需要和水平进行选择。如果不想安装插件,还是使用原生的导出功能最为简单方便。