问题
这几天在做一些页面的设计稿,因为是团队开发,一些疑惑的问题出现如下:
- 做web developer部分的人员不可避免的要看PS出来的图,而我们的web developer的机器图形处理方面有所欠缺,经常出现人等机器的情况,Photoshop处理速度的问题。
- 页面里面的小板块比较多,团队里面各位兄弟要分头做相应的部分切片以及XHTML CSS实现稿。设计稿同步以及尽量让各位哥们机器跑起来快就是个大问题了。
解决问题的思路以及原理:
- Photoshop中的smart object功能,将每个小的板块分开来。
- 根据官方的文档:Photoshop中图层越多,每个图层包含的颜色信息越多,文件越大,处理速度越慢。根据我个人经验:当把多个group转化成smart object处理速度有明显上升,而文件大小不会产生太大的变化。可能原因:Photoshop中一个图层的改变会导致其他图形显示效果的重运算;当把多个图层合并为smart object时,photoshop将smart object作为一个图层来看待,对所包含的东西不做二次运算,因此二次运算的图层大量的减少,则运算速度加快。(有待查官方资料考证)
解决方案
- PSD文件内按照功能板块分组,复制多份,为每个文件按照功能组单独设置文件名(图1);
- 将每个组变成Smart Object(图3);
- 分别输出各文件的smart obeject(图4)
- 分别输出psb
数据
内存(单) | 内存(所有) | 硬盘 | 文件数 | 优点 | 缺点 | |
---|---|---|---|---|---|---|
默认方案 | 400MB | 400MB | 24.3MB | 1 | 文件数少,文件小。 | 版本管理较难,不易分工协作。 |
新方案 | 1个psb+1个psd,分别对每个功能板块做一次,共4次,取平均数得161MB | 435MB | 51.4MB | 5 | 处理单个模块内存占用量低。便于分工协作。 | 文件多,占用空间大。 |
PS: 单个模块内存占用量的计算原则:处理单个模块所需的文件全部打开。
结论
- 处理单个模块时,使用第二种方案运行速度较快。并能很方便的将页面按照功能板块分工给各个人员。
- 版本管理:工作室用Version Cue进行PSD管理,页面实现人员只需要在smart object相应的psb文件文件上做切片,并同步到服务器。服务器上整体页面效果文件的更新使用Replace Contents就可以完成。
因此,我们采用的新提出来的方案进行团队协作开发。