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

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

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

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

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

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

1)PSD圖層太多，當時(shí)記得，時(shí)間一長(cháng)容易忘記。

2)項目設計過(guò)程難免有需求更改、修改建議，導致設計稿需要反復修改，雜亂的圖層結構是不是讓你更添一愁呢?

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

看來(lái)管理好圖層真的很重要。

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

1)PSD圖層命名

2)模塊化管理你的圖層

3)智能對象的使用

4)重構也需關(guān)注設計

5)Q&A

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

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

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

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

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

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

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

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

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