作为设计师，最关心的也许就是排版好不好看、图片美不美观、视觉炫不炫，我们尽可能的去把设计稿做的最漂亮，然后就把硕大的PSD文件就直接发给重构了，殊不知这个时候重构正在恨你：

　　我擦，这么大的PSD，还木有打开!本来就开了各种浏览器编辑器神马的又要打开若大的PSD文件，机子要卡死了!!!机子卡死就算了吧，打开一看，我去，几百个图层呀!好吧几百个图层也就算了，为什么我明明要拖动按钮，各种连七八糟的图层也拖进来了，根本找不到我要的图层!!

　　瞧瞧多么恐怖的事情，但是也许我们只要管理好PSD图层就可以改变这种抱怨。

　　对于图层管理，这可能是大家比较容易忽视的操作习惯，特别是初学者或者新人，也可能有人说：这有什么值得一提的?!做好设计稿就行了，其他交给重构吧!我们看多了程序员井井有条的代码，规范有序的文档，认为图层命名不是我们要干的事情—-其实不然，下面有几个原因：

　　1)使用PSD的群体：设计师本人、客户、工程技术人员(程序员)、新人接手等。

　　1)PSD图层太多，当时记得，时间一长容易忘记。

　　2)项目设计过程难免有需求更改、修改建议，导致设计稿需要反复修改，杂乱的图层结构是不是让你更添一愁呢?

　　3)作为一名网页重构工作者，会直接面对你的PSD文件，无须的图层及命名令人抓狂。。。。

　　看来管理好图层真的很重要。

　　1)PSD图层命名

　　2)模块化管理你的图层

　　3)智能对象的使用

　　4)重构也需关注设计

　　5)Q&A

　　话说讲之前看下这张图，一起感受下这样的图层面板，PS：里面的人物(艺名：主席)，年会上的照片。这相片很应景有木有，还有下面的吓尿的小Q。

　　切换一下，再看下这里。美女就不解释了。。。

　　话说我们要对图层进行管理，合理命名就是关键了。先看下命名与图层排列：

　　看一个案例，设计稿与HTML页面的的名称对应位置图。可以看下左边代码的几个节点，用颜色做了区分，颜色对应了右边的模块，最外面的红色(wrapper)是这个页面的外套，对应PSD上就是整个页面;接下来紫色(header)，对应PSD上的头部(LOGO+导航);同理：绿色、黄色。可以发现基本是从上到下的顺序，当然还有例外的情况，这里就不说了。看个直观感受就可以了。

　　我自己不怎么喜欢链接图层(右图红色区域)，我更喜欢分组(左图)，按照每个功能快来建组，如果自己喜欢你就用吧~~

　　刚才看了HTML代码和对应PSD的简单案例，大家也许发现规律了，为了方便操作，建议按照模块名称来命名，图层的顺序与页面上看到的元素顺序一致：从上到下，从左到右。

　　可能有人问：PSD上图层的名字是随便写的吗?其实不是，命名可以参考编程高级语言里的语法来进行，个人比较喜欢用骆驼规则或者下划线规则，如果还要分的话，我更喜欢骆驼。

　　除了第一个逻辑点首字母小写外，其余逻辑点首字母都大写，见示例。

　　网页里常用的模块名称：

　　直接看图和对应的中英文名称：整个页面(wrap/wrapper)

　　头部(header)

　　主导航(mainNav),如果整个页面只有一个导航就用“导航(nav)”

　　页脚，或者叫版权(footer)

　　面包屑(breadCrumb),平常叫惯了面包屑，其实它的来历是有一个故事的，具体故事就不讲了，自己百度下吧。

　　搜索(search)

　　登录(login)… 等等。

　　了解了图层命名，也许你的PSD图层已经几百个了，该对图层管理管理了。

　　1)什么是模块化

　　2)模块化调用、复用

　　3)效率和输出

　　模块化的定义，每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。在系统的结构中，模块是可组合、分解和更换的但愿。

　　貌似文字有点复杂，模块化是程序设计里面的词语，我们这里就可以简化下：按照视觉功能块组建一个PSD图层分组，类似前面说的头部(header)、登录(login)、搜索(search)等。

　　模块化组建后，可以在各个页面作为公共组件来使用，就不必要把相同的图层再设计组合一遍了，直接把这个分组拖进来就是了。

　　模块化在门户官网的项目设计中尤为重要，特别显效率，后面还有讲到。

　　虽然我们对图层命名了，自然会耽误一些设计时间，可能有人觉得效率变低了嘛?! 我自己觉得一方面这是一个设计师的职业习惯问题，另一方面这并不耽误你提升效率，当遇到大型门户网站设计时，你会发现这是多么的好用。

　　个人经验，当你开始关注你的PSD图层结构的时候，其实对图层面板上每个图层到底是什么内容并不关心，所以我比较喜欢这么做：

　　在图层选项那里把图层预览改为“无”，这样图层面板就清爽了，有的都是结构，一目了然。

　　回归正题：举几个梨子。大家对比看左右两边的内容及图层变化：基本规则是模块化命名、从上到下、从左到右。