快速提升你的工作效率——PS中的文档管理(上)

PS中回溯历史记录的步骤是有限的,所有操作在经历超过一定步数的修改后都无法进行版本还原,以及进行针对原版本的修改。对于一个工程文件而言,版本不可逆是灾难性的。所以针对PS,我们应该保留素材的原始数据,尽量使用非破坏性编辑。

“非破坏性操作”是图像处理软件长久以来面临的问题,Adobe从最早的版本到最新的CS4,经过十几年发展,ps的用户们也遍历变迁。最早PS的使用者为了保留历史版本,不得不频繁“保存副本”。直到后来有了历史记录面板,有了快照,有了调整图层,有了智能对象,CS3版本中更向3dsMAX学习了属性堆栈。

来看看PS在“非破坏性操作”的4个方面上已具备的功能(截止到CS3版本):

  • 原始数据的留存:智能对象、历史快照。
  • 效果叠加:填充图层、调整图层、混合模式和图层样式
  • 操作区域:上文中提到的蒙版,剪切组
  • 属性堆栈:智能对象的滤镜库堆栈(PS3中新功能)。

四、使用填充图层和调整图层

图层面板下方的添加调整(填充)图层按钮

1 填充图层:

当需要为页面上某个版块添加浅灰色背景,在导航上使用长条型漂亮的渐变背景时,你是习惯如何操作,创建一个空白图层,在选区里直接填色?还是使用填充图层?

Ps中传统方式是在空白图层中创建选区或路径后执行填充命令,但自从允许使用填充图层在对象中填充纯色、渐变或纹理后,油漆桶变成了最鸡肋的工具之一。

相比较传统方式,填充图层具有更大的操作灵活性。单击图层面板中的图层缩略图,就可以随时更改颜色、修改渐变、更换纹理,且具有非常直观的预览效果。

填充图层中填充对象的形状范围实际上是一种内置蒙版,所以这种填充方式集合了蒙版的种种优势,比如可以使用黑白画笔来随意修改填充边缘、或使用矢量编辑工具来修改矢量形状蒙版。

图示案例:使用渐变填充图层、使用画笔/橡皮擦修改蒙版

在web设计中,所有需要使用填充色块的地方都尽可能使用矢量路径+填充图层来完成,这样生成的填充色块可以随时随地保持方便修改和无损形变。

图示案例:使用矢量工具+填充图层 创建常用元件。

2 调整图层

调整图像的色阶、色相、对比度、色彩平衡?把彩色图像变为灰度图像,色彩反相,调整照片的色温,这些都是最常用的操作。但你经常拿不定主意,对原始图像施加调整效果进行实验……

一个设计成浅蓝色的按钮,BOSS看了不喜欢,要求改成浅绿色。改完以后效果不好,BOSS又要求改成灰色……

如果你经常遭遇上述情况,请选用“调整图层”功能来进行你的调色实验吧。

PS中可以用来实现图像调整的方法:

使用调整图层要好于其它两种操作,调整图层不会更改原始图像中的像素,(会略微增加文件大小),也是一种内置的蒙版。可以随时更改。 在进行多项调整时,使用调整图层意味着新建多个图层,多个调整图层可以分别修改排序、混合样式和透明度

图示案例:使用调整图层改变元件配色

六、使用智能对象及滤镜堆栈

1  智能对象

PS从cs版本开始增加了智能对象(smart object)。智能对象可以保护原始像素内容,用户可以进行变换操作(包括缩放,旋转,变形等)而不会累次地降低图像质量。如一个400px宽的位图素材,使用变换操作压缩为200px宽,旋转45°。后来又想修改为300px框,旋转为原位。但上一次压缩操作已经对图像质量形成了不可逆的损害。如果在操作第一次变换前将该素材转为智能对象,无论它之后变换了多少次,都可以保证是基于400px宽的原始质量来进行更改操作。

智能对象的另一个好处是,可以通过编辑其中一个副本来实现对所有副本的同步改动。

一个使用了智能对象副本的psd源文件尺寸会小于标准的psd文件,这是因为智能对象图层的复制不会像标准图层复制那样生成真正的多倍像素内容,而只是充当了的角色。

这一点和“Ai的嵌入”有很像的特征。

图示案例:使用智能对象,编辑智能对象的原始文件,达到影响所有副本。

2 智能滤镜和滤镜堆栈

智能滤镜是指针对智能对象应用的一些滤镜,在滤镜库里可以浏览滤镜菜单,预览并对统一对象使用多个滤镜。

滤镜堆栈和AI中的外观面板很相似,所有施用过的智能滤镜都显示在PS的图层面板。你可以再次关闭该滤镜,调整滤镜的透明度和叠加模式,调整多个滤镜的施用次序

除了上述优点,还可以再次对智能对象的原始文件进行修改,所以使用智能滤镜,在原始文件和滤镜使用的操作上都有极大的灵活性。同时也都是非破坏性编辑。

图示案例:使用智能滤镜和滤镜堆栈。

3 栅格化操作

智能对象,矢量对象,文字对象有一些共性:在被栅格化(像素化)之前,随时随地都具备可编辑性,这个特性让上述对象类型在任何时候都应该成为你的首选。但是有些滤镜和变形操作是其失效的。

所以要非常谨慎地操作栅格化命令,栅格化和图层合并一样是破坏性的,不可逆的。

如果必须要使用某些滤镜效果或变形,建议不妨为上述对象创建一个副本,隐藏保留原本,在副本上施行操作。

对于边缘修改,边缘羽化、擦除这类操作,可以使用蒙版技术来完成。这同样是非破坏性操作。

七、使用图层样式(layer style)

图层样式可以实现非常丰富的特效,包括投影,光泽,纹理,发光。

除了常用的发光、投影、浮雕外(在webUI设计中其实它们反而不常用),

  1. 图层样式可用于填充纯色、渐变和纹理。比较与填充图层,图层样式最显著的特点是便于移植。
  2. 描边可用于创建border。内发光可用于创建padding。外发光可用于创建margin和小圆角边框。
  3. 混合模式、透明度、填充透明度都是图层样式的一部分。他们可以被一起方便地移植
  4. 单纯使用样式可以创建多种玻璃质感、水晶效果、金属拉丝、塑胶质感的按钮样式。

图层样式的优点:

图层样式可以通过复制、粘贴操作来传递到其它图层中。可以通过多选,一次向多个图层粘贴某个样式。还可以通过快捷键来操作。Alt+拖拽,是移动某个图层样式,alt+crtl+拖拽是复制图层样式。(使用鼠标快捷时,透明度,填充透明度和混合模式这3个属性将无法像粘贴图层样式那样也传递过去。)

图层样式不会破坏原始图像质量,允许随时修改样式的配置参数。

更改原始图像时,应用其上的图层样式会立即自动变换以适应新图像。

图层样式支持无损缩放。(涉及像素纹理的除外)。另外当psd文件的图像大小(分辨率)发生改变时,图层样式可同步缩放。必须保证“图像大小”的设置对话框里,如图这个复选框被选中,同步缩放才能起作用。

图层样式可保存为预设配置,进入资源库,在多个pad文件之间复用,保证样式的继承和统一。

下面这些链接中可以提供大量的图层样式下载,双击.sal文件,可以直接加载样式在预设配置里。

42 Photoshop Layer Styles for Button Design – Free Download

131 Ultimate Web 2.0 Layer Styles

220 Amazing Free Photoshop Layer Styles

八、资源管理——定义预设配置

对于交互界面设计这种存在大量需要风格统一的工程文件和多人团队协作的项目而言,资源管理是必须的工作。

和程序写作一样,需要先统一接口、函数,PS里也有许多可以预先配置好的元素。

包括 渐变、纹理、色卡、图层样式、矢量形状、画笔、等高线、工具、图案等,更专业的还需要做统一的颜色配置。

PS提供在”菜单: 编辑 —> 预算管理器”里管理这些资源。可对资源进行分组,命名,添加,删除,存储,载入等操作。

每一种资源都有对应的控制面板,每一个面板右侧都有折叠小三角。点击后展开统一的管理菜单。

在项目开始前,

  • logo和标志性装饰图形 作为 矢量形状预设载入。
  • 主配色 作为 色板预设载入
  • 常用渐变 作为 渐变预设载入
  • 主按钮和背景条样式 作为 图层样式预设载入
  • 常用纹理 作为 图案填充纹理预设载入
  • 常用虚线 作为 画笔图案载入
  • ……

花一些前期准备时间,将设计风格进行商讨统一,然后新建组别存储。并将不同类别的预设分别存储为预设文件:如色块文件:***_pro.aco , 渐变文件:***_pro.grd。分发给协作设计师使用。除了能大幅度提高工作效率,还能保证文档工作的专业和规范。

且无论项目持续了多长时间,或者经历时间漫长的频繁改版,或者更换过几个设计师,都能保证基础风格的协调和统一。

八. 多人协作项目的ps文档版本控制

Adobe的从CS版本开始,在套装中提供了Version cue 和 Bridge.

Version cue:  用户PSD文档的版本控制,多人在线协作管理

Bridge:图片管理/浏览工具。支持Adobe的所有工程文件预览(得保存为pdf兼容格式)。拥有支持 tag , 图片尺寸,类型 等多种维度的强大过滤器,用于管理本地数量庞大的素材库很好。

这两个小工具软件很容易被忽略,(我觉得是它们2.0之前的版本都做得太差了,Bridge曾经导致我频频死机。但是从cs3版本后,这两个小工具都在性能上做了很大优化,变得非常好用)

关于结合使用Version cue 和 Bridge,创建一个属于设计师的SVN系统,对工程文件进行版本控制,这有一篇写得很好很详细的教程。在阿里集团中,淘宝的UED团队还是最靠谱的。
Version cue+bridge(cs3)优化版本控制【alex ren】