详细解析网页设计与重构那些事儿发布者：本站     时间：2021-12-29 09:12:59

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

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

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

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

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

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

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

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

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

详细解析<a href=/photoshop/web/ target=_blank class=infotextkey>网页设计</a>与重构那些事儿,PS教程,

1)PSD图层命名

2)模块化管理你的图层

3)智能对象的使用

4)重构也需关注设计

5)Q&A

详细解析网页设计与重构那些事儿,PS教程,

详细解析网页设计与重构那些事儿,PS教程,

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

详细解析网页设计与重构那些事儿,PS教程,

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

详细解析网页设计与重构那些事儿,PS教程,

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

详细解析网页设计与重构那些事儿,PS教程,

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