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

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

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

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

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

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

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

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

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

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

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

1)PSD圖層命名

2)模塊化管理你的圖層

3)智能對象的使用

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

5)Q&A

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

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

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

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

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

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

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

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

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