大概从 2001 年左右开始接触 Photoshop, 当时是看到朋友的爸爸 (摄影师) 用它来修整照片, 吓到了。

后来的话, 自己家里买了电脑, 开始玩一些恶搞性质的照片合成, 直到我发现自己开始讨厌街上的招牌, 我认为它们都太 LOW 了, 当然, 我还认为自己可以轻而易举完成一个好看一百倍的作品…

十多年后的我现在是一名 UI/UX Designer, 工作性质决定使用 Photoshop 的方式, 相信你也听到过平面设计师用 300 PPI 分辨率去做网页的笑话, 或者你甚至不觉得这是一个笑话都 OK, 如何用这个强大的图像处理工具来做 UI 设计工作? 这就是我打算分享的内容。

P.S. 博主正在使用 Photoshop CC, 语言为英文, 工作环境为 Macbook Pro with Retina Display + Mac OS X 10.9.3; 我有中文语言以及 Windows 版本的使用经验, 会在必要时候翻译以及附上不同环境的操作区别(前英文后中文, 前 Mac 后 PC), 所以这不会是很大的问题, 但如果您使用的版本是 Photoshop CS5 及以下的话, 建议升级。
鉴于并不是所有 Mac OS X 用户都熟悉功能键符号所代表的含义, 这里是释义: control - ⌃ | alt/option - ⌥ | command - ⌘ | shift - ⇧

关闭 Photoshop 的颜色管理

「为什么我的图片背景是白色的, 但用 Photoshop 打开却偏色了呢?」, 我同事问过这么一个问题, 而这就是「色彩设置」设置不当造成的。

除非是特别情况, 否则我们所产出的作品都是面向大众客户的, 尤其是网站, 它会显示在各种不同的显示器上, 所以我们需要保证我们希望显示成白色的地方, 在用户的显示器上, 就是他平时所看到的白色所呈现出的样子。

• 菜单项设置

使用「显示器颜色」:

打开 Photoshop, 菜单「Edit / 编辑」-「Color Profile / 色彩设置」, 你也可以使用 ⌘+ ⇧ + K / CTRL + SHIFT + K 呼出这项设置。

在第一个下拉菜单处选择「Monitor Color / 显示器颜色」, 然后开启右侧的「More Option / 更多设置」, 取消最后一项「Blend Text Colors Using Gamma / 用灰度系数混合文本颜色」的勾, 然后确认。

使用「显示器 RGB」作为校样设置:

菜单「View / 视图」-「Proof Setup / 校样设置」-「Monitor RGB / 显示器 RGB」

取消「校样颜色」:

菜单「View / 视图」-「Proof Setup / 校样设置」, 取消「Proof Colors / 校样颜色」的勾。

• 其他情况设置

不要新建有颜色管理的文档:

「Advanced / 高级」-「Color Profile / 色彩设置」-「Don’t Color Manage this Document / 不要对该文档进行颜色管理」

在打开其它文档时「取消嵌套的配置文件」:

选择「Discard the embedded profile(don’t color manage) / 放弃嵌套的配置文件(不做颜色管理)」并确定

将文件存储为 Web 格式时需要注意:

取消「Embed Color Profile / 嵌入颜色配置文件」(仅出现在 JPEG 格式时候) 以及「Convert to sRGB / 转换为 sRGB」的勾, 这是在看 David McKinney 的文章时候恍然大悟的, 我做了这一步之前的所有步骤, 可在切图的最后一步却转换为了 sRGB, 不得不责怪自己十分不细致。

以前我一直以为有一个顺手的「工作区」就是有效使用 Photoshop 的第一步, 其实执行/了解以上的步骤才是 - 不要使用颜色配置文件、不要产出有颜色配置文件的作品, 这可以在最大程度上保证颜色的兼容性。

合理配置 Preferences (首选项)

这个部分的操作是为了优化性能以及提高工作效率, 老话叫「工欲善其事必先利其器」, 除了让它(颜色)别出错, 还得让它更合适自己。

关闭无用的效果:

从 CS5 开始, 首选项的「General / 常规」选项卡中多了一个叫做「Enable Flick Panning  / 启用轻击平移」的选项, 开启它, 会拖动画布时候即使已经松开了鼠标, 画布的移动也不会停止, 会有一个类似于惯性的动效, 这会使我们的操作变得极其不精准, 所以建议关闭。

另外, 「Animated Zoom / 带动画的缩放」也是一个无用且浪费系统资源的功能, 开启它会在你执行缩放画布操作的时候有一个动态的过程, 工作讲究的是效率, 何况 Photoshop 占用的系统资源如此之高。

开启需要的功能:

而开启后会更加便利的有「Resize Image During Place / 在置入时调整图像大小」与「Always Create Smart Objects when Placing / 将栅格化图像作为智能对象置入或拖动」, 两者都是再将别的素材拖拽到 Photoshop 文档中的选项, 前者会自动帮助你将一个尺寸大于画布的图像缩小, 后者会让你在后期的缩放操作中始终保持素材质量最优。

有一个略微例外, 它需要根据情况开启或是关闭 -「Snap Vector Tools and Transforms to Pixel Grid / 将矢量工具与变化与像素网格对齐」, 开启它将可以控制矢量工具与缩放工具操作的最小单位为 1 px, 这可以轻松地使锚点/边缘处在像素格上, 保证边缘不会模糊。可, 有的时候我们也会需要一些微调, 所以会选择性地开启或关闭它。

储存有缩略图的 PSD 文档:

对自己的设计文档进行有效的管理是每一个设计师需要做的事情, 正确且清晰的命名可以帮助我们在后期很快的找到我们需要的文档, 但与此同时, 储存有缩略图的 PSD 也是会增加文档管理效率的设置。

这部分的设置在「首选项」的「File Handling / 文件处理」选项卡中, 但恰好这里有我对 Photoshop 的一个疑惑, 将「Image Preview / 图像预览」的选项设置为「Never Save / 总不储存」, 然后下方的「Maximize PSD and PSB File Compatiblity / 最大兼容 PSD 与 PSB 文件」选择「Always / 总是」是储存 PSD/PSB 文件的缩略图的, 可反过来就不行。分明第一个才是控制预览图的啊, 最大兼容是为了向下兼容旧版本嘛, 所以我的设置如下图:

同样也希望使用 Windows 的朋友告诉我如果你这样设置, 是否会得到你所需要的缩略图。

P.S. 关闭最大兼容可以大幅度缩小文件体积, 如果你没有向下兼容以及缩略图的需要, 可将其设置为「Never Save / 从不储存」。

再来是最重要的「Performance / 性能」部分, 首先是要为 Photoshop 分配一个合理的内存使用比例, 我是 69%(公司电脑, 内存太低), 下方的「Scratch Disks / 暂存盘」, 如果你是 Windows 或者有超过一个分区的 Mac OS X 用户, 建议将系统分区外的另一个分区作为暂存盘, 如果它是 SSD 就再好不过了~

「历史记录与高速缓存」的设置:

这是重点, 但其实真的到目前为止我都没有找到一个特别合适的设置, 做一个翻译好了「Tall and Thin / 文档较小」是指你所处理的文档「图层多, 但尺寸都很小」, 这适合做 UI 的我们选择。「Big and Flat / 文档较大」的话刚好相反, 如果你是传统的、用 Photoshop 来修高清无码照片的话, 建议选择这个选项。而「History States / 历史记录状态」是「历史记录」面板所记录的操作步骤数量, 也就是你可以回撤的次数, 如果对自己很自信, 建议少一些, 内存贵。

来自 David McKinney 的建议:

又一个「Advanced Settings / 高级设置」, 如图, 我是照着大神的说法设置的, 但也有人建议关掉「Anti-alias Guides and Paths」, 这里我的理解还并不是很透彻, 希望有人可以帮忙解释一下, 关掉(Anti-alias Guides and Paths)以及设置为「Basic / 基础」是否真的可以节约性能让我们的操作变得更快。

这部分还剩下两点, 不截图了, 很简单但也很重要。

以像素作为单位:

将「Units & Rulers/ 单位与标尺」选项卡里, 「Units / 单位」两项都设置为「Pixel / 像素」, 而不是任何一个其它(包括 Point), 因为我们的产出的东西最终会呈现在电子荧幕上, 它的基础单位是 PIXEL 像素。另外, 下方的「Screen Resolution / 屏幕分辨率」记得设置为 72 ppi, 如有特殊情况可在需要时候调节「图像尺寸」或「新建文档」时候直接设置。

关闭字体预览:

在左侧倒数第二个「Type / 类型」选项卡里, 勾选「Show Font Name in English / 用英文显示字体名称」, 可能你会觉得很奇怪, 但在我看来这是必须的, 两个理由:

1. 在写 CSS 的时候可以直接写上去 ‘Hiragino Sans GB’ 而不是「冬青黑体」以及去搜一下「冬青黑体」的英文字体名称是什么;
2. 快速指定需要用的字体, 直接点击显示字体名称的区域, 输入字体名称回车即可定位到该字体, 不仅快, 而且还可以加强自己对字体的印象, 所以同样也推荐关闭「Type / 类型」菜单下的「Font Preveiw / 字体预览大小(设置为「none / 无」)」, 真的别再到下拉列表中一个一个慢慢找了, 不说会卡一下的问题, 这起码不是一个设计师该有的做法, 是美工的做法 – 你应该知道你想要用哪款字体。

好了我该睡了, 今天就写到这里, 我会持续更新这篇文章, 接下来我想写一下「自定义工作区」以及「有效使用图层面板」还有「Retina 版本的 Photoshop 使用经验」, 你也可以留言你所遇到的问题, 如果我刚好知道如何解决, 并且它也是一个常见问题, 我会写在这篇文章里。

P.S. 这篇文章参考了很多人的文章/口头分享, 写完以后我会把感谢名单附上