转一篇西乔的文章，很难得的好文，强烈推荐！

这是一个重要但是容易被忽视的领域，很多设计师没有文档管理和文档规范意识。认为只有代码工作者才需要什么编码规范和版本控制系统，photoshop作为一个应用软件，讨论这个有什么意义呢？

• 作为工程文件，一个复杂页面的psd源文件里有200~300个图层是很正常的事情。
• 作为最直面客户和BOSS的开发环节，以及存在对视觉表现的个体认同差异，你可能会遭遇最多的需求变动、修改建议，需求反复……。
• 作为开发协作中的一员，你的源文件会被其他设计师或开发者使用或修改。
• 作为开发文档中的一部分，你的源文件会面临移交、继承和重用。
• 图层命名无法辨识，几百个图层没有分组、元件难以修改、被调用的原始素材被处理地面目全非，修改版本无法回溯、设计样式无法复用，同组的psd文件风格或布局无法统一……如果你正在修改这样一份psd源文件，会不会抓狂？

作为一个UI设计师，建立文档管理和文档规范意识，不仅能便于团队协助和工程文件的移交，更重要的是能快速显著地提升自己的工作效率。

作为工程管理的一部分，PS的文档管理也具有以下特征：

• 编码规范：命名规范。
• 架构设计：组织结构合理。
• 版本管理：不对原始素材形成不可逆的破坏，可进行版本追溯。
• 协作机制：元素和样式便于复用和调用。
• 资源管理：通过定义预设配置库或资源库来提高效率。

下文中，我将和大家一一分享具体的工作方法。

一．图层的分组和管理

PS提供了三种方式来组织图层(layers)之间的关系：图层组、链接组、剪切组。

在进行用户界面设计的过程中，应该根据布局区块来组织图层分组。对图层进行分组是一种基本的信息组织方法，将大量的、分散的、杂乱的信息经过组织、整序、优化、存贮，形成一个便于有效利用系统的过程。

1 使用图层分组管理的主要优势：

便于组织和检索:

将图层编入同一图层组组，进行图层组命名，并形成树状结构，可以方便创作者快速查找图层在图层面板序列中的所在。

如何快速选择图层：

选中移动工具，在属性面板中 取消自动选择前面的勾选，在下拉菜单中选中图层。在使用移动工具的时候，按住ctrl键，可以直接选中 当前可视的图层。

学习善用右键：

用上面的方法快速选中图层后，点击右键，可以看见右键菜单中显示了 表示基于图层组的的树状列表，通过这个右键菜单可以快速切换到所需的图层。但前提是要有良好的图层组织结构和图层命名。

便于挪动修改布局:

图层组可以作为一个整体进行移动和缩放，将位于同一布局区块的图层编入一组，可以快速改变某一区块的位置和比例，方便地实行布局的调整。

便于整体管理：

图层组可以作为一个整体进行 删除、显示/隐藏、修改透明度和混合模式模式。图层形成编组，令创作者可以快速地显/隐一批图层进行效果预览。对一组图层进行整体操作。还可以创建基于组的蒙版，整体控制某一图层组的显示区域

在设计属于一个网站的不同页面时，使用图层组可以快速创建统一的设计模版，保留共有的区域的图层编组。

2 图层分组和链接组

图层分组具有结构特效，链接组更多用于表示关系。

为图层建立链接组，可以锁定几个图层之间的相对位置。对它们其中任何一个执行移动缩放、拖拽复制和删除操作时，都会对整体生效。

链接组更容易创建和解除关系，位于同一链接组中的图层可以分别位于不同的图层组，实际上形成了另一种结构维度。

3 尽量不要合并图层。

图层合并操作是不可逆的，（本文中指的所有不可逆的操作都不包括在历史记录面板的有限步数的回溯）。可以通过执行ctrl+alt+E 来合并图层，这个命令在被选中的图层上方创建了一个经过合并操作的副本，生成了一个新的合并图层。你可以对这个独立图层随便进行修改和调用，而丝毫不影响原始图层。

二、图层命名规范

一份没有图层命名和分组的源文件是最受前端开发人员诟病的，建立良好文档规范，养成对图层命名的习惯，除了利于源文件的移交、继承和重用，提供效率，也体现了对协作成员的尊重。同时，图层命名是使用图层右键菜单的良好前提。

建议主要使用英文命名，便于在不同系统平台之间的移交。

如何命名，可以参考前端的命名规范，针对界面布局、鼠标事件、不同的交互状态有许多约定俗称的叫法和缩写，例如：

页头：header   内容：content/container   页面主体：main

页尾：footer   导航：nav   侧栏：sidebar   栏目：column

整体布局：wrapper   左右中：缩写为 L R C   水平/垂直：缩写为H/V

导航：nav   子菜单：submenu   摘要: summary   按钮：btn   滚动：scroll

鼠标悬停：hover      点击：click      已浏览：visited。

等等……

三、使用蒙版

1 使用蒙版的好处：

蒙版通过叠加一个蒙版图层来控制原始图像的显示。最大的好处是：可以自由实现对原始图像图层的擦除、剪裁、抠图、边缘虚化等这些极普遍的操作，但原始图像内容不会受到破坏。

2 图层蒙版和矢量蒙版：

蒙版分为图层蒙版（我觉得像素蒙版这个叫法更好一点）和矢量蒙版。

两者用法相同，一个是位图，一个是矢量。图层蒙版支持透明度，矢量蒙版支持路径。

图层蒙版通过工具栏上和图层面板底部的创建蒙版按钮来创建。原理跟存储选区的“alpha通道”原理类似。通过灰度来记录蒙版的区域及透明度。白色代表显示全透明，黑色代表不透明，50%的灰色代表50%的透明度。支持滤镜、柔化和改变透明度等操作。由于是像素对象，执行变换操作时，蒙版边缘会出现质损。

矢量蒙版需要先创建一个矢量对象，然后按住crtl键的同时，点击图层面板底部的创建蒙版按钮来完成创建。可以通过路径选择和钢笔等工具对矢量蒙版进行编辑修改。由于是矢量对象，变化操作时蒙版对象的边缘始终是平滑的。但不支持透明度、柔化边缘和大部分滤镜。

3 剪切组的优势和弱点：

剪切组也是蒙版的一种形式，同样具有不破坏原始图像的特征，它既可以具有像素蒙版特性也可以具有矢量蒙版特性（这取决于剪切组最底部的图层）。

剪切组的优势是可方便应用于多个图层，使用上具有直观的组织性，但坏处，对象图层必须在次序上紧挨着，而且在调整图层次序的操作时，容易导致误操作。

——————————————预告分隔线————————————
四、使用调整图层
五、使用智能对象或形状(sharp)图层
六、使用图层样式(layer style)
七、定义预设配置
……

原文链接：西乔的九卦

GIF格式的图像特点是压缩比高，磁盘空间占用较少，所以这种图像在网页中运用很多。GIF可以只简单地存储单幅静止图像，也可以同时存储若干幅静止图象进而形成连续的动画，使之成为支持 2D动画的格式。可指定透明区域，使图像具有非同一般的显示效果，这更使GIF风光十足。目前Internet上大量采用的彩色动画文件多为这种格式的文件。

GIF图像格式还增加了渐显方式，也就是说，在图像传输过程中，用户可以先看到图像的大致轮廓，然后随着传输过程的继续而逐步看清图像中的细节部分，从而适应了用户的”从朦胧到清楚”的观赏心理。

由于8位存储格式的限制，使其不能存储超过256色的图像，适合在图片颜色总数少于256色的使用。让GIF格式达到最佳显示效果的方法：

如果色系较少，颜色少于256，调色板可以选择为“精确”。 不要选“失真”。 一般情况，调色板选择“最合适”，最大颜色数选择“256”。如果色彩稍多于256色，可将抖动设为“100%”。 为防止边缘出现锯齿，不需要透明的时候，尽量不透明。

另外需着重说明的是，为什么有时候导出的GIF有色斑现象？那是因为页面颜色太多了。将网页导成gif格式的时候，如果色彩较丰富，不宜一起导出，而应该将之切片后一个一个的导出（这点困扰了我很久）！如果必须整体导出，那只有用最后一招了，按下面的参数设置一下，也许效果会有所改善。

这是帐篷家族的新成员，一款利用新技术手段实现太阳能供电的露营新设备。最新研究表明，这种新技术经过编织，可以使特殊涂层应用到传统的编织物中，这种颠覆传统的接收太阳能的新方式很快就可以成为现实。这些科技成果意味着，我们不仅可以把太阳能的理念应用在硬度较大的物体上，现在我们还可以应用到柔软的布料上了，太阳能的领域又扩大了一圈。

设计者还在这个帐篷上增加了一个被称为“Glo-cation”的新功能，这使得露营者可以通过短信或者射频识别技术像帐篷发射无线信号，既能触发帐篷的感应系统，然后自动发出光芒，从而使露营者在茫茫黑夜中能迅速找到帐篷的位置并且查看帐篷的状况。

这个帐篷可谓是集高科技的产物，因为它还有一个中央无线控制器，可以随时监测能量的消耗状态，并且可以提供无线上网的信号！而这些数据统统都显示在一个可以触控的液晶屏上。

查看Orange帐篷的详情，步移至此。