@馬良重生?：對圖層整理也是一種設(shè)計(jì)，是對圖層結(jié)構(gòu)的一種思考，它不僅有利于清理設(shè)計(jì)完稿后的無用的設(shè)計(jì)元素和圖層，還可以提高整個(gè)工作流程中協(xié)同修改的作用。

上期回顧：《新人手冊！初級設(shè)計(jì)師應(yīng)該掌握的9個(gè)工作習(xí)慣》

作者馬良，一個(gè)非科班出身的電商設(shè)計(jì)師，新書正在整理中，敬請期待 ：）

上述的幾個(gè)案例你是否遇到過，當(dāng)你打開同事的文件或者自己的文件時(shí)，有沒有上述幾種的反應(yīng)呢？

1，關(guān)于圖層的整理術(shù)

對圖層整理也是一種設(shè)計(jì)，是對圖層結(jié)構(gòu)的一種思考，它不僅有利于清理設(shè)計(jì)完稿后的無用的設(shè)計(jì)元素和圖層，還可以提高整個(gè)工作流程中協(xié)同修改的作用。

對整理圖層就像是整理生活中的衣柜，如果亂七八糟的堆放各種衣物，那么肯定會在你下次找東西時(shí)無從下手，一是浪費(fèi)時(shí)間，二是不知所措。

當(dāng)你在拿到同事的文件時(shí)，被眼前井井有條的圖層結(jié)構(gòu)所吸引時(shí)，并且立馬找到相關(guān)的元素時(shí)，這時(shí)你會感嘆 “哇！好專業(yè)的psd”。

但你在碰到下面幾種情況時(shí)，就會有一種抓甚至想死的心：

1. 在成千上萬個(gè)圖層中，怎么快速找到1 px的小細(xì)節(jié)，想扔鍵盤的心有木有？

2. 打開PSD 運(yùn)行速度特別慢時(shí)，想摔鼠標(biāo)的心有沒有？

3. 圖層雜亂無章，沒有分組整理時(shí)，想砸電腦的心有沒有？

此時(shí)此刻，如果你發(fā)現(xiàn)自己有圖層不分組的壞習(xí)慣時(shí)，那么從現(xiàn)在開始，從自身做起，好好來清理一下自己的圖層結(jié)構(gòu)，為了讓團(tuán)隊(duì)協(xié)作更快速和高效。

2，圖層整理術(shù)的優(yōu)點(diǎn)

1. 提高團(tuán)隊(duì)協(xié)作能力
2. 快速找到相關(guān)圖層
3. 文件更專業(yè)

3，圖層分組方法

用前端開發(fā)中代碼命名進(jìn)行整理

比如說：分組時(shí)可參考網(wǎng)頁代碼的結(jié)構(gòu)定義來對圖層進(jìn)行位置上的定義：

這種定義分組的方式常用于網(wǎng)站界面設(shè)計(jì)中，根據(jù)前端代碼的書寫基礎(chǔ)結(jié)構(gòu)來對頁面元素進(jìn)行分組。更方便的與前端同學(xué)進(jìn)行對接。

按頁面內(nèi)容對圖層進(jìn)行分組

這種方式常用于電商類的專題促銷中，以不同的區(qū)塊進(jìn)行命名，如：頭圖區(qū)、內(nèi)容推薦區(qū)、返回區(qū)等；

當(dāng)然命名的方式不一定非局限于此，重點(diǎn)是要培養(yǎng)出對圖層整理的一種設(shè)計(jì)習(xí)慣，利于自己，方便他人。

對圖層組進(jìn)行顏色的區(qū)分

利用Photoshop的圖層分組顏色屬性，把不同的信息用顏色區(qū)分，用于快速區(qū)別相應(yīng)內(nèi)容；比如：紅色組用于重點(diǎn)圖層、藍(lán)色用于區(qū)別次要圖層等。

4，圖層整理的3大好處

1、設(shè)計(jì)出稿前的最后一步，梳理設(shè)計(jì)并刪除多余元素；

2、在最終完稿中，要對該文件中的圖層進(jìn)行必要的梳理和分組，分組建立圖層組的最大意義就在于逐一去刪除頁面中多余的圖層，使呈現(xiàn)在頁面上的設(shè)計(jì)更簡潔和實(shí)用；

3、在梳理圖層時(shí)，可以發(fā)現(xiàn)在設(shè)計(jì)過程中有意或無意的添加了許多重復(fù)的、無用的元素或圖層。刪除它們就是對設(shè)計(jì)作品的簡潔化整理；不多余一個(gè)圖層，每個(gè)圖層都有必要存在的意義；

5，快速找到圖層的3種招數(shù)

其實(shí)，對圖層進(jìn)行分組后，找圖層相對來說會很簡單，而圖層分組的最大目的就是：馬上找到圖層、馬上看清頁面結(jié)構(gòu)。

而這樣的工作方式也更好的方便前端同事、同組設(shè)計(jì)同事快速了解圖層結(jié)構(gòu)，并且找到相關(guān)的內(nèi)容；

1、加選：按住Shift加單擊某個(gè)元素，就可以把相應(yīng)的圖層加上一起選中了（此時(shí)圖層面板選中的圖層會高亮顯示）

2、框選：選勾中移動工具條中的“自動選擇”圖層選項(xiàng)，然后放大畫布，或縮小畫布后，畫出選擇框，框中想所的對象。（被選定的圖層除外）

3、點(diǎn)選：按住ctrl＋點(diǎn)擊對象，此對象就會被選中。

4、篩選

圖層面板中的篩選功能，不得不說這個(gè)功能真是太強(qiáng)大了，它把Photoshop 完全魔化成一個(gè)龐大的檔案庫，如果遇到圖層很多的時(shí)候，你可以利用圖層的篩選功能。

歡迎關(guān)注作者的微信公眾號：

「細(xì)節(jié)的那些事兒」

夏洛克般的邏輯+超微妙的細(xì)節(jié)=這圖是P的！
《高手支招！怎樣分辨圖片是否被PS過》

最講究細(xì)節(jié)的網(wǎng)站中最厲害的設(shè)計(jì)師排名！
《超詳細(xì)！Dribbble上的業(yè)界頂級設(shè)計(jì)師及作品》

吐槽蘋果官網(wǎng)，任何一個(gè)細(xì)節(jié)都不會放過！
《給蘋果中國的公開信！一個(gè)設(shè)計(jì)師對蘋果官網(wǎng)的微吐槽》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com