大概从 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 / 用英文显示字体名称」, 可能你会觉得很奇怪, 但在我看来这是必须的, 两个理由:
- 在写 CSS 的时候可以直接写上去 ‘Hiragino Sans GB’ 而不是「冬青黑体」以及去搜一下「冬青黑体」的英文字体名称是什么;
- 快速指定需要用的字体, 直接点击显示字体名称的区域, 输入字体名称回车即可定位到该字体, 不仅快, 而且还可以加强自己对字体的印象, 所以同样也推荐关闭「Type / 类型」菜单下的「Font Preveiw / 字体预览大小(设置为「none / 无」)」, 真的别再到下拉列表中一个一个慢慢找了, 不说会卡一下的问题, 这起码不是一个设计师该有的做法, 是美工的做法 – 你应该知道你想要用哪款字体。
好了我该睡了, 今天就写到这里, 我会持续更新这篇文章, 接下来我想写一下「自定义工作区」以及「有效使用图层面板」还有「Retina 版本的 Photoshop 使用经验」, 你也可以留言你所遇到的问题, 如果我刚好知道如何解决, 并且它也是一个常见问题, 我会写在这篇文章里。
P.S. 这篇文章参考了很多人的文章/口头分享, 写完以后我会把感谢名单附上
额!!还是看中文习惯一点!!!
…所有英文都翻译成中文了, 为何还会这么评论..
我草,也太早了吧!
是说我睡得太早吗, 哈哈哈
缩略图设置那里我照着设置还是不行,查了一下说装个插件就可以(windows用户)。
Windows 确实我得去自己试试, 也感谢你反馈。
真心不错!
谢谢~
你好,看你博客更换主题了啊
嗯, 之前的主题太丑了, 我又想写新文章, 觉得还是换一个暂时用着好了。
Jaskni,非常非常喜欢你的作品,气质很足,我现在是一个初级的设计师,老大让我做东西的时候,总是考虑要怎么给用户传达情绪,我最近很困惑,因为我做的每一个效果,都要被问要给别人传递什么情绪,可是很多时候,我也只是觉得很多很多人都在这个场景用这个效果,也没法考虑那么多,请问你平时有遇到类似的问题吗?
谢谢你的两个「非常」。这是一个问题, 大部分时候这是在一开始就需要问自己的一个问题, 其实不是非得要讲自己想要传达给别人一种什么情绪, 而是「我为什么要这样做, 我希望用户感受到什么, 我希望用户怎么去用它」, 如果这个一开始就想明白了的话, 那你老大问你的时候你应该不会困惑了。以上是我的见解。
您好,JASKNi我的ipaintbox主题zip文件找不到了,如有可能,把你的给我发一份吧!谢谢!我的邮箱:hgczjr2013@126.com
请教ai的设置是不是跟ps一样,另外问下windows系统的颜色管理应该选择sRGB还是 adobe RGB?
不好意思我不太使用 Ai 来着…另一个我了解到了再回答你吧
http://bjango.com/articles/photoshop/ 我已经找到了,你看看~
关注下了,大神。。
ps里的字体选的不是太好!给我的感觉看着不是很舒服!
ps真的要选择苹果机啊 色彩还原度好
做UI的话,不管是WEB还是APP,建议还是扔掉Photoshop,用Sketch的好!
听谁说的?Sketch 是一个很好的替代品, 但并不是唯一的选择, 而且我特么买了一年了不能不用啊好么….
我觉得你现在可以写一篇 Sketch 的文章了
其实买来我没怎么用, 比较难选择, 一个是这么久以来的使用习惯, 一个是现在的潮流以及三百多块…
如果就画Ui来说,真的是高效神器
厉害啊