WL

越来越好,越好越来

关于Photoshop团队协作与网站页面工作协调化的研究


问题

这几天在做一些页面的设计稿,因为是团队开发,一些疑惑的问题出现如下:

  1. 做web developer部分的人员不可避免的要看PS出来的图,而我们的web developer的机器图形处理方面有所欠缺,经常出现人等机器的情况,Photoshop处理速度的问题。
  2. 页面里面的小板块比较多,团队里面各位兄弟要分头做相应的部分切片以及XHTML CSS实现稿。设计稿同步以及尽量让各位哥们机器跑起来快就是个大问题了。

解决问题的思路以及原理:

  1. Photoshop中的smart object功能,将每个小的板块分开来。
  2. 根据官方的文档:Photoshop中图层越多,每个图层包含的颜色信息越多,文件越大,处理速度越慢。根据我个人经验:当把多个group转化成smart object处理速度有明显上升,而文件大小不会产生太大的变化。可能原因:Photoshop中一个图层的改变会导致其他图形显示效果的重运算;当把多个图层合并为smart object时,photoshop将smart object作为一个图层来看待,对所包含的东西不做二次运算,因此二次运算的图层大量的减少,则运算速度加快。(有待查官方资料考证)

解决方案

  1. PSD文件内按照功能板块分组,复制多份,为每个文件按照功能组单独设置文件名(图1);
  2. 将每个组变成Smart Object(图3);
  3. 分别输出各文件的smart obeject(图4)
  4. 分别输出psb

image001.gif image002.gif

image003.gif

数据

内存(单) 内存(所有) 硬盘 文件数 优点 缺点
默认方案 400MB 400MB 24.3MB 1 文件数少,文件小。 版本管理较难,不易分工协作。
新方案 1个psb+1个psd,分别对每个功能板块做一次,共4次,取平均数得161MB 435MB 51.4MB 5 处理单个模块内存占用量低。便于分工协作。 文件多,占用空间大。

PS: 单个模块内存占用量的计算原则:处理单个模块所需的文件全部打开。

结论

  1. 处理单个模块时,使用第二种方案运行速度较快。并能很方便的将页面按照功能板块分工给各个人员。
  2. 版本管理:工作室用Version Cue进行PSD管理,页面实现人员只需要在smart object相应的psb文件文件上做切片,并同步到服务器。服务器上整体页面效果文件的更新使用Replace Contents就可以完成。

image004.gif

因此,我们采用的新提出来的方案进行团队协作开发。