第 3 章

设计素材

高效是 Photoshop 工作流程的核心，切图与切片导出素材则是最具代表性的环节。务必仔细审查所导出的所有素材，上至文件格式，下至文件体积。

坚持非破坏性编辑

善用蒙版、智能对象和调整图层，避免永久性擦除珍贵的图像像素。

这颜色是怎么调出来的？确保它不是由 2 个“叠加”、4 个“正片叠底”和 16 个“颜色加深”层层叠加出来的乱象。 i

谨慎使用混合模式

协作人员应当能直接从图层属性中复制十六进制颜色值（Hex Code），而不是靠吸管工具去屏幕上盲抽吸色。

大新闻：Logo 在高分屏上糊成一片，而这全是你没适配好的锅。 i

关注屏幕分辨率与像素密度

一倍图（@1x）在高清屏（Retina / @2x）上会因为像素点不足而发虚。解决之道是导出矢量或分辨率无关的 SVG 格式，或者切出多套高清版本（@2x、@3x 等）。

你居然敢直接通过“文件 > 另存为”导出 JPEG？ i

图像必须经过压缩

未压缩的图片体积大，加载极其吃带宽。请善用 Photoshop 的“导出为/Web所用格式”，或者至少用压缩工具打磨一遍。

没必要在切图里强行内置外边距（Margin）或内边距（Padding）。排版定位那是 CSS 的本职工作。 i

不要切入多余的空白边距

CSS 在灵活微调元素位置方面非常高效。把边距硬编码到切图里会给开发带来灾难，尤其是在响应式布局中。

单打独斗的时代早已过去。善用 CC 资源库（CC Libraries）和链接的智能对象（Linked Smart Objects）协同作战！ i

高效团队协作

借助“链接的智能对象”，样式指南或组件库中的部件可以分发给不同设计师并行处理，主 PSD 文件能自动无缝同步更新。