2022年设计师PSD文档管理指南.docx

2022年设计师PSD文档管理指南设计师PSD文档管理指南这是一个重要但是简单被忽视的领域，许多设计师没有文档管理和文档规范意识认为只有代码工作者才须要什么编码规范和版本限制系统，Photoshop作为一个应用软件，探讨这个有什么意义呢?作为工程文件，一个困难页面的psd源文件里有200~300个图层是很正常的事情作为最直面客户和BOSS的开发环节，以及存在对视觉表现的个体认同差异，你可能会遭受最多的需求变动、修改建议，需求反复……作为开发协作中的一员，你的源文件会被其他设计师或开发者运用或修改作为开发文档中的一部分，你的源文件会面临移交、继承和重用图层命名无法辨识，几百个图层没有分组、元件难以修改、被调用的原始素材被处理地面目全非，修改版本无法回溯、设计样式无法复用，同组的psd文件风格或布局无法统一……假如你正在修改这样一份psd源文件，会不会抓狂?作为一个UI设计师，建立文档管理和文档规范意识，不仅能便于团队帮助和工程文件的移交，更重要的是能快速显著地提升自己的工作效率作为工程管理的一部分，PS的文档管理也具有以下特征：编码规范：命名规范架构设计：组织结构合理版本管理：不对原始素材形成不行逆的破坏，可进行版本追溯。

协作机制：元素和样式便于复用和调用资源管理：通过定义预设配置库或资源库来提高效率下文中，我将和大家一一共享详细的工作方法一、图层的分组和管理图01PS供应了三种方式来组织图层(layers)之间的关系：图层组、链接组、剪切组在进行用户界面设计的过程中，应当依据布局区块来组织图层分组对图层进行分组是一种基本的信息组织方法，将大量的、分散的、杂乱的信息经过组织、整序、优化、存贮，形成一个便于有效利用系统的过程1、运用图层分组管理的主要优势便于组织和检索:将图层编入同一图层组组，进行图层组命名，并形成树状结构，可以便利创作者快速查找图层在图层面板序列中的所在如何快速选择图层图02选中移动工具，在属性面板中 取消自动选择前面的勾选，在下拉菜单中选中图层在运用移动工具的时候，按住ctrl键，可以干脆选中 当前可视的图层学习善用右键用上面的方法快速选中图层后，点击右键，可以望见右键菜单中显示了 表示基于图层组的的树状列表，通过这个右键菜单可以快速切换到所需的图层但前提是要有良好的图层组织结构和图层命名图03便于挪动修改布局图层组可以作为一个整体进行移动和缩放，将位于同一布局区块的图层编入一组，可以快速变更某一区块的位置和比例，便利地实行布局的调整。

便于整体管理图层组可以作为一个整体进行 删除、显示/隐藏、修改透亮度和混合模式模式图层形成编组，令创作者可以快速地显/隐一批图层进行效果预览对一组图层进行整体操作还可以创建基于组的蒙版，整体限制某一图层组的显示区域在设计属于一个网站的不同页面时，运用图层组可以快速创建统一的设计模版，保留共有的区域的图层编组2、图层分组和链接组图04图层分组具有结构特效，链接组更多用于表示关系为图层建立链接组，可以锁定几个图层之间的相对位置对它们其中任何一个执行移动缩放、拖拽复制和删除操作时，都会对整体生效链接组更简单创建和解除关系，位于同一链接组中的图层可以分别位于不同的图层组，事实上形成了另一种结构维度3、尽量不要合并图层图层合并操作是不行逆的'，(本文中指的全部不行逆的操作都不包括在历史记录面板的有限步数的回溯)可以通过执行ctrl+alt+E 来合并图层，这个吩咐在被选中的图层上方创建了一个经过合并操作的副本，生成了一个新的合并图层你可以对这个独立图层随意进行修改和调用，而丝毫不影响原始图层图05二、图层命名规范一份没有图层命名和分组的源文件是最受前端开发人员诟病的，建立良好文档规范，养成对图层命名的习惯，除了利于源文件的移交、继承和重用，供应效率，也体现了对协作成员的敬重。

同时，图层命名是运用图层右键菜单的良好前提建议主要运用英文命名，便于在不同系统平台之间的移交如何命名，可以参考前端的命名规范，针对界面布局、鼠标事务、不同的交互状态有很多约定俗称的叫法和缩写，例如：页头：header 内容：content/container 页面主体：main页尾：footer 导航：nav 侧栏：sidebar 栏目：column整体布局：wrapper 左右中：缩写为 L R C 水平/垂直：缩写为H/V导航：nav 子菜单：submenu 摘要: summary 按钮：btn 滚动：scroll鼠标悬停：hover 点击：click 已阅读：visited等等……三、运用蒙版1、运用蒙版的好处图06蒙版通过叠加一个蒙版图层来限制原始图像的显示最大的好处是：可以自由实现对原始图像图层的擦除、剪裁、抠图、边缘虚化等这些极普遍的操作，但原始图像内容不会受到破坏2、图层蒙版和矢量蒙版图07图08蒙版分为图层蒙版(我觉得像素蒙版这个叫法更好一点)和矢量蒙版两者用法相同，一个是位图，一个是矢量图层蒙版支持透亮度，矢量蒙版支持路径图层蒙版通过工具栏上和图层面板底部的创建蒙版按钮来创建。

原理跟存储选区的“alpha通道”原理类似通过灰度来记录蒙版的区域及透亮度白色代表显示全透亮，黑色代表不透亮，50%的灰色代表50%的透亮度支持滤镜、柔化和变更透亮度等操作由于是像素对象，执行变换操作时，蒙版边缘会出现质损图09矢量蒙版须要先创建一个矢量对象，然后按住crtl键的同时，点击图层面板底部的创建蒙版按钮来完成创建可以通过路径选择和钢笔等工具对矢量蒙版进行编辑修改由于是矢量对象，改变操作时蒙版对象的边缘始终是平滑的但不支持透亮度、柔化边缘和大部分滤镜图103、剪切组的优势和弱点剪切组也是蒙版的一种形式，同样具有不破坏原始图像的特征，它既可以具有像素蒙版特性也可以具有矢量蒙版特性(这取决于剪切组最底部的图层)剪切组的优势是可便利应用于多个图层，运用上具有直观的组织性，但坏处，对象图层必需在次序上紧挨着，而且在调整图层次序的操作时，简单导致误操作图11PS中回溯历史记录的步骤是有限的，全部操作在经验超过肯定步数的修改后都无法进行版本还原，以及进行针对原版本的修改对于一个工程文件而言，版本不行逆是灾难性的所以针对PS，我们应当保留素材的原始数据，尽量运用非破坏性编辑非破坏性操作”是图像处理软件许久以来面临的问题，Adobe从最早的版本到最新的CS4，经过十几年发展，ps的用户们也遍历变迁。

最早PS的运用者为了保留历史版本，不得不频繁“保存副本”直到后来有了历史记录面板，有了快照，有了调整图层，有了智能对象，CS3版本中更向3dsMAX学习了属性堆栈来看看PS在“非破坏性操作”的4个方面上已具备的功能(截止到CS3版本)：原始数据的留存：智能对象、历史快照效果叠加：填充图层、调整图层、混合模式和图层样式操作区域：上文中提到的蒙版，剪切组属性堆栈：智能对象的滤镜库堆栈(PS3中新功能)四、运用填充图层和调整图层图层面板下方的添加调整(填充)图层按钮图121、填充图层当须要为页面上某个版块添加浅灰色背景，在导航上运用长条型美丽的渐变背景时，你是习惯如何操作，创建一个空白图层，在选区里干脆填色?还是运用填充图层?Ps中传统方式是在空白图层中创建选区或路径后执行填充吩咐，但自从允许运用填充图层在对象中填充纯色、渐变或纹理后，油漆桶变成了最鸡肋的工具之一相比较传统方式，填充图层具有更大的操作敏捷性单击图层面板中的图层缩略图，就可以随时更改颜色、修改渐变、更换纹理，且具有特别直观的预览效果填充图层中填充对象的形态范围事实上是一种内置蒙版，所以这种填充方式集合了蒙版的种种优势，比如可以运用黑白画笔来随意修改填充边缘、或运用矢量编辑工具来修改矢量形态蒙版。

图13图示案例：运用渐变填充图层、运用画笔/橡皮擦修改蒙版在web设计中，全部须要运用填充色块的地方都尽可能运用矢量路径+填充图层来完成，这样生成的填充色块可以随时随地保持便利修改和无损形变图14图示案例：运用矢量工具+填充图层 创建常用元件2、调整图层调整图像的色阶、色相、对比度、色调平衡?把彩色图像变为灰度图像，色调反相，调整照片的色温，这些都是最常用的操作但你常常拿不定办法，对原始图像施加调整效果进行试验……一个设计成浅蓝色的按钮，BOSS看了不喜爱，要求改成浅绿色改完以后效果不好，BOSS又要求改成灰色……假如你常常遭受上述状况，请选用“调整图层”功能来进行你的调色试验吧PS中可以用来实现图像调整的方法图15运用调整图层要好于其它两种操作，调整图层不会更改原始图像中的像素，(会略微增加文件大小)，也是一种内置的蒙版可以随时更改 在进行多项调整时，运用调整图层意味着新建多个图层，多个调整图层可以分别修改排序、混合样式和透亮度图16图示案例：运用调整图层变更元件配色五、运用智能对象及滤镜堆栈1、智能对象PS从cs版本起先增加了智能对象(smart object)智能对象可以爱护原始像素内容，用户可以进行变换操作(包括缩放，旋转，变形等)而不会累次地降低图像质量。

如一个400px宽的位图素材，运用变换操作压缩为200px宽，旋转45°后来又想修改为300px框，旋转为原位但上一次压缩操作已经对图像质量[设计师PSD文档管理指南]第12页 共12页第 12 页 共 12 页第 12 页 共 12 页第 12 页 共 12 页第 12 页 共 12 页第 12 页 共 12 页第 12 页 共 12 页第 12 页 共 12 页第 12 页 共 12 页第 12 页 共 12 页第 12 页 共 12 页。