优秀Photoshop设计师的9个规范和技巧.docVIP

优秀Photoshop设计师的9个规范和技巧 Photoshop这样传奇的工具我想已经无需赘言了，它诞生于1990年，前些日子刚刚过20周年庆。从设计小广告横幅到手工制作最优秀的网页应用程序UI，Photoshop在一个网页设计师心中有特别的地位。和世界繁忙的网页设计师及Photoshop使用者同在，每天我都感觉落在后面。看着世界数百万试图超越我的人才们作品里面优秀的部分，我就能每时每刻燃起学习的动力。因为有大量的挖掘使用Photoshop技巧的在线资源、教程、博客文章，任何人有热情和乐于工作的人随着时间的推移都能成为专家。但是如何从一个专家转变为“最好的”呢？为什么有些设计师总是最棒的？当可用的资源对每个人都是平等时，究竟他们和其他人有何不同之处？何以令他们卓尔不群？以下略微窥视这些设计师在他们的工作流程中的一些规范，这些同样的规范令他们聚成一类。 基于对象操作的 Photoshoping 图层和组的命名惯例 再利用和实践的能力 路径和钢笔工具的使用 有效利用调整层和样式 参考线、栅格及注释 工作区管理 快捷键 尊重并回应对你的评论 1. 基于对象操作的Photoshoping Photoshoping是一个痛并快乐着的过程！尤其是当你在处理一个复杂的图形合成和布局，有着大量的重复东西的时候。为一个网站或者网页应用程序设计高精度图像合成，或许会成为噩梦，特别是如果你处于一个创意团队并且需要频繁会见客户的情况，这意味着太多的时候你会湮没在大量的重复以及频繁的变动之中。解决这些麻烦的秘诀在于“组织”，如果你想掌控你的PSD，组织好你的图层和组的重要性是不言而喻的！ 在我过去六年以上的网页设计生涯之中，我发现这是设计师的独特特征，喜欢有组织及富有成效。让我们看看一个PSD样本，看看这个合成是如何通过整齐的模块和基于对象操作方法绝好地组织起来。 你可以用基于对象方法创建这个简单的表单，在设计的时候将各种UI（User Interface用户图形界面）元素标记出来并进行拆分。 在这个样例中，有一组输入框和一个带超链接提交按钮，这些组成了一个完整的表单。用基于对象方法思考，每一个输入框被当成是一个物体，所以创建一个包含文字、及底的组，命名为txtbox，如果需要更多的输入框就只是复制的问题了，图片里，是这个样例的层结构。 最终的图层合成结构如下图所示 : 以后无论用Photoshop做什么设计，都去贯彻实施这种意识，这会带给你令你吃惊的结果，你能够省下大量的时间，并建立起一个不错的日后可以再重复利用的元素库。 译者注：原文作者表述起来似乎很麻烦，其实很简单，就是把物体分好组这样而已。很多人没有规范操作的习惯，建议养成这种习惯，非常有助于大项目的维护以及团队内的协同工作，确实是很简单实用的一招。 2.图层和组的命名惯例 我有过几次艰难的时刻，当我要在其他设计师的PSD文件里理解他的图层和组的结构时，几乎令我抓狂。里面有上千的未命名的图层和组，一天就这么完了。尤其不妙的是假如你需要快速地做修改和更新。解决的方案是规范好图层和组的命名方式。假如你是一个热衷于html/css的前端工程师，你会很容易理解命名惯例的重要性。 有时候我们要学会把图层面板放到顶部位置，这个实用技巧很容易被忽视，我认为这是想要高效和有组织是使用photoshop的一个核心技能。让我们回到主题，不论你可能使用什么工具，心中清晰地知道设计所要用到的各种元素是异常重要的。你的想法要在画布上实现要通过图层面板，你对图层命名的方式通常就是你将脑中图形在画布上展现的方式。事实上，当我需要从一堆设计师挑选人的时候，我经常用这种方式去评估一个他的技能。 命名的时候，这里有一个关键的地方，赋予图层逻辑名字（logical names）而非外观名字（presentational names），一个图层如果命名为“快速链接”会比命名为“黑色矩形”更好。（在这里，黑色矩形是快速链接的底色）。 这里解释一下逻辑名字和外观名字，外观名字就是基于元素所展现的外观来描述的，比如色彩、形状、位置以及方向等。而逻辑名字则是基于元素在图层中的功能来描述的。 译者注：这点在编写Css的时候也一样，用它的逻辑名字，比如“外部链接”，因为设计的时候，有可能要经常更换外观，举个例子，假如有一天客户说要把快速链接的背景颜色改成绿色，那这个图层的名字就很尴尬了。 以下是一张表格，用来驱散你对命名惯例的烦恼。（译者注：本人推荐用英文进行命名，翻译的中文仅供理解这两种名字的含义） 外观名字例子 红色矩形块 左边黄色条 浮动蓝色 圆角样式 红色底 逻辑名字例子 主导航栏 导航栏背景 浮动元素背景 高亮链接 可变文字 —————–英文表格原文——————— Presentational Naming Examples