H5设计|PSD文件对程序小哥的重要性

PSD源文件太大，一不利于传输，二在打开的时候会卡死电脑。

最近，蓝橙互动在接收客户提供设计源文件的时候，多次遇到PSD源文件太大的问题，影响很大。

首先是影响传输，最近一个大屏互动项目，设计文件居然达到20G，主要原因是源文件分辨率高，同时智能对象多（这是PSD源文件太大的重要原因）。20G的源文件通过各种云也是很难传输的。好的是，甲方就在本地，直接送了一硬盘过来，传输问题解决了（如果是外地，我估计只能坐高铁送过来了）。

但是，即便文件送过来，打开文件并切图也把设计和程序惊出一身冷汗。打开这么大的文件，确实是需要勇气的。如果遇到设计需要修改，文件传输和打开切图，又是一波崩溃的轮回！

所以，蓝橙小编软磨硬泡，让设计师小姐姐出了一套【降低PSD源文件大小的方法】，分享给大家。

下面的解决方法出自蓝橙互动设计师：有温度的万琴琴，感谢她在悠闲的工作中，放弃开小车的宝贵时间提供知识分享。

通常，甲方爸爸发过来的psd文件太大，不外乎3个原因，1.不要的图层没删；2.智能对象里面的文件又大又多；3.隐藏在画板外的图像太大。

那么，针对这3个问题，小蓝给出3个步骤来帮大家逐一解决：

第一步：删除不要的分层

首先，打开你需要的所有图层

然后，点开图层面板，类型旁边的小三角，出来下拉菜单，选择【属性】

这时候旁边会多出一个选择框，点击旁边的小三角，选择【不可见】，文件中所有看不见的图层就都出来啦

最后愉快的选择所有图层，按【Del】删除就好啦。

这时可能会问，我的图层去哪了？点开属性旁边的小三角，选【类型】，你的所有图层就出来了。

做了第一步有没有感觉文件小了一些？接下来还会更小

第二步：智能对象图层一键栅格化

(这里需要注意一点，如果智能对象里有需要分层的图层需要单独提出来，或单独给文件)

还是图层面板，点击右边智能对象图标（不知道是哪个看下图提示）

然后选中文件中所有智能对象图层，右键→【栅格化图层】，再点一下智能对象图标，回到图层画板。

第二步就完成了。

第三步：裁剪隐藏的图层（最关键的一步）

点击【裁剪】工具，选中【删除裁剪的像素】重点！重点！重点！点击一下图层，这时候，你就会看到导致你文件很大的罪魁祸首，画板外的这些隐藏图像，然后点一下【回车】，文件就缩小啦。

等下！还没完，最后另存为新的文档才能大功告成哦。

大家都知道PS其实是有很多缓存的，也占用很大空间，文档中减少这些缓存也可缩小不少呢。怎么另存呢？直接Ctrl+shift+s？不不不...

1.选中所有图层→右键→【复制图层】

2.这时会弹出一个弹窗，点文档后面的小三角→新建→输入新的文档名称→【确定】，一个新的没有缓存的文档就复制好啦！

3.    最后，Ctrl+shift+s另存就Over啦，大功告成！

来看一下缩小后的效果

另一种让程序小哥哥崩溃的设计，就是AI文件。AI文件对于蓝橙互动程序小哥哥来说就相当于是一张jpg图片一样，整体看起来一模一样，想要对其进行切图处理，就一筹莫展了。

所以，提供符合需求的psd源文件，程序员小哥哥就可以悠闲的写代码了。

详细H5设计规范，看这儿：蓝橙互动移动端H5视觉设计规范【兼容全面屏】

本文由【未定名字的蓝橙小编】负责编辑；

本文由【有温度的万琴琴】不负责任的审稿；

本文也要感谢蓝橙互动设计汪【乔小妞】，感谢她在本文的生产过程中没有捣乱。