优秀Photoshop设计师的9个规范和技巧-01

最新推荐文章于 2025-09-27 16:48:47 发布

原创最新推荐文章于 2025-09-27 16:48:47 发布 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #互联网 #UI #项目管理 #工作

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一套在Photoshop中高效管理项目的规范，包括图层和组的命名、基于对象的操作、工作区管理等，旨在帮助设计师提升工作效率。

前言：这是一篇关于在Photoshop里面进行项目管理的教程，文章涉及到了管理组的方法、图层的命名规则、工作区管理、快捷键及一些相关的规范，还涉及到了作为设计人员的学习态度。本文对于经常处理大项目的人有一定帮助。

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

redsolidrectangle
leftyellowbar
floatingblue
roundedSample
bottomred

Logical Naming examples

primaryNav
navBase
notfnBase
hilightLinks
alertText

3. 再利用和实践的能力

“最重要的技能是制造一个杀手级的设计师”

必须清楚没有人是天才，至少在设计这个领域：P（达芬奇和爱因斯坦请自觉从这个列表中删除：D）。实践、实践、再实践。

目前的网页设计所关心的是那种独特的鉴赏、再利用、精炼的技能，它能让你向前进。再利用而不是复制。这不是让你从你看过的很酷的网站上拷贝一份也不是让你在别人的才智基础上展现你的创新技能。协作以及互联网开放文化平台应该正确地利用，去拓展你的技能而不是复制黏贴。所以我所说的再利用是指收集一些你认为最好的参考作品，然后可以根据你见过的这些作品的设计风格、审美特点重新进行设计。这样，你就能将自己推上一个新的高度。

记住，“若你不超越你师，你便非好的门徒”，引用著名自学大师达芬奇的话。所以，开始收集参考资料，推动你的极限，向大师级设计师出发。

以下是一些案例、作品，可以给你一个快速的启动