詳細(xì)解析網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒發(fā)布者：本站     時(shí)間：2021-12-29 09:12:59

作為設(shè)計(jì)師，最關(guān)心的也許就是排版好不好看、圖片美不美觀、視覺炫不炫，我們盡可能的去把設(shè)計(jì)稿做的最漂亮，然后就把碩大的PSD文件就直接發(fā)給重構(gòu)了，殊不知這個(gè)時(shí)候重構(gòu)正在恨你：

我擦，這么大的PSD，還木有打開!本來就開了各種瀏覽器編輯器神馬的又要打開若大的PSD文件，機(jī)子要卡死了!!!機(jī)子卡死就算了吧，打開一看，我去，幾百個(gè)圖層呀!好吧幾百個(gè)圖層也就算了，為什么我明明要拖動(dòng)按鈕，各種連七八糟的圖層也拖進(jìn)來了，根本找不到我要的圖層!!

瞧瞧多么恐怖的事情，但是也許我們只要管理好PSD圖層就可以改變這種抱怨。

對(duì)于圖層管理，這可能是大家比較容易忽視的操作習(xí)慣，特別是初學(xué)者或者新人，也可能有人說：這有什么值得一提的?!做好設(shè)計(jì)稿就行了，其他交給重構(gòu)吧!我們看多了程序員井井有條的代碼，規(guī)范有序的文檔，認(rèn)為圖層命名不是我們要干的事情—-其實(shí)不然，下面有幾個(gè)原因：

1)使用PSD的群體：設(shè)計(jì)師本人、客戶、工程技術(shù)人員(程序員)、新人接手等。

1)PSD圖層太多，當(dāng)時(shí)記得，時(shí)間一長(zhǎng)容易忘記。

2)項(xiàng)目設(shè)計(jì)過程難免有需求更改、修改建議，導(dǎo)致設(shè)計(jì)稿需要反復(fù)修改，雜亂的圖層結(jié)構(gòu)是不是讓你更添一愁呢?

3)作為一名網(wǎng)頁重構(gòu)工作者，會(huì)直接面對(duì)你的PSD文件，無須的圖層及命名令人抓狂。。。。

看來管理好圖層真的很重要。

詳細(xì)解析<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁設(shè)計(jì)</a>與重構(gòu)那些事兒,PS教程,

1)PSD圖層命名

2)模塊化管理你的圖層

3)智能對(duì)象的使用

4)重構(gòu)也需關(guān)注設(shè)計(jì)

5)Q&A

詳細(xì)解析網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒,PS教程,

詳細(xì)解析網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒,PS教程,

話說講之前看下這張圖，一起感受下這樣的圖層面板，PS：里面的人物(藝名：主席)，年會(huì)上的照片。這相片很應(yīng)景有木有，還有下面的嚇尿的小Q。

詳細(xì)解析網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒,PS教程,

切換一下，再看下這里。美女就不解釋了。。。

詳細(xì)解析網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒,PS教程,

話說我們要對(duì)圖層進(jìn)行管理，合理命名就是關(guān)鍵了。先看下命名與圖層排列：

詳細(xì)解析網(wǎng)頁設(shè)計(jì)與重構(gòu)那些事兒,PS教程,

看一個(gè)案例，設(shè)計(jì)稿與HTML頁面的的名稱對(duì)應(yīng)位置圖?？梢钥聪伦筮叴a的幾個(gè)節(jié)點(diǎn)，用顏色做了區(qū)分，顏色對(duì)應(yīng)了右邊的模塊，最外面的紅色(wrapper)是這個(gè)頁面的外套，對(duì)應(yīng)PSD上就是整個(gè)頁面;接下來紫色(header)，對(duì)應(yīng)PSD上的頭部(LOGO+導(dǎo)航);同理：綠色、黃色?？梢园l(fā)現(xiàn)基本是從上到下的順序，當(dāng)然還有例外的情況，這里就不說了?？磦€(gè)直觀感受就可以了。