優(yōu)秀設(shè)計師，從細節(jié)做起 - 善待你的PSD

互動界面設(shè)計規(guī)范化PSD輸出：

作為設(shè)計師，應(yīng)該將設(shè)計稿最完美的一面展現(xiàn)給其他人。就像jobs 說的好設(shè)計師，不會使用爛木頭作為衣柜的背板。雖然你最終的設(shè)計稿很完美，但是你的psd讓人覺得很糟糕，同樣會讓之后的切圖仔覺得你不是個優(yōu)秀的設(shè)計師，對不起死去的jobs～

如果切圖仔死了，死因很可能是一份恐怖的psd：
a、psd 文件尺寸 竟然有132M，(也許看著覺得還好，但是一開ps 就杯具了，內(nèi)存不夠 = =)
b、psd 圖層上百個，各種看不懂的圖層。毫無規(guī)律的圖層分組讓人菊花一緊。
c、設(shè)計稿完全是個插畫，怎么看都不像個網(wǎng)頁，無從下手切圖。(恨不得把psd 吃下去 >.<)
d、GUI為矢量圖，邊界不清晰。(切圖成果，糊得一比)。

作為切圖仔，暫時就列了這么些碰到的問題。相信有和多人有同感。
作為設(shè)計師MM的你們又應(yīng)該如何去避免呢？接下來我們就來對癥下藥，一一破解。

一、合理分組/層，結(jié)構(gòu)清晰

不管你做的是設(shè)計，還是插畫。結(jié)構(gòu)設(shè)計也是一種設(shè)計，當你合理并且清晰的規(guī)劃好你的設(shè)計稿，那么這個設(shè)計就有十之八九了。
那么如何對網(wǎng)頁設(shè)計稿進行分組分層呢？

a、按框架分。(網(wǎng)頁分 ，頭部head ， 主題 main，底部 foot，以此類推)。
b、按模塊分。(每個小原件，小裝飾，合成一個大物件就能做為一個模塊)
c、按屬性分。(這點比較重要，設(shè)計師如果做的是web界面，需要了解什么是“圖片輸出” 和 “代碼輸出”, 原因是當切圖的時候，我們需要將 “代碼輸出”類型所屬的圖層隱藏掉，然后再進行導(dǎo)出)。還有一些注釋(注釋好重要，后面有講)相關(guān)的東西。
d、按狀態(tài)分，(web設(shè)計跟插畫設(shè)計 一個很大的區(qū)別就是 web設(shè)計是有交互的，需要針對各個交互狀態(tài)進行分層分組)

[代碼輸出] 指的是設(shè)計稿中的一些效果是可以使用代碼來實現(xiàn)的，如后期可編輯的文字(大段文字，小按鈕里的宋體文字)，圓角，漸變效果(高級瀏覽器可實現(xiàn))。
[圖片輸出] 則是指除了代碼輸出以外的東西，如圖標icon，背景效果，以及一些 使用代碼不可實現(xiàn)的文字效果(如藝術(shù)字體)。

 

 

二、減少尺寸/文件大小，去其痔瘡是關(guān)鍵

如果你做的是大噴繪 psd 有個二、三百M可以理解。但是你做的是web設(shè)計稿也那么大，就有點不可理喻啦。
畢竟切圖仔的電腦總是沒有設(shè)計師的強大哇，并且我們還要跑個IDE編輯器，跑個虛擬機，再跑N個瀏覽器。這個時候要是還要打開一個上百M的PSD設(shè)計稿(預(yù)計占用內(nèi)存1G+)，這個時候 誰蛋疼誰知道哇 囧rz

所以為了產(chǎn)品最大程度的還原設(shè)計稿，對切圖仔好點，把psd弄小點。如何弄小點，往下看。

a、去除沒用的大尺寸素材圖層，(當設(shè)計稿需要交接給切圖仔的時候，最好復(fù)制一份設(shè)計稿，去除psd中無用處的原始素材圖)。因為素材圖片是唯一難壓縮的東西(psd尺寸大很多時候是因為這個)，且運行時占內(nèi)存大。
b、去除無關(guān)圖層，(比如一個menu，做了好幾版，最終保留定稿的一版即可，其它幾版大可直接刪除。這個是禁忌，跟設(shè)計稿不相關(guān)的最好刪掉，或者新建一個temp組丟那里面，不然很容易誤導(dǎo)切圖仔，而且還占內(nèi)存，別以為隱藏掉就不占內(nèi)存啦)。
c、慎用智能圖層。(智能圖層在CS4的時候就開始有了。) 很好用，因為不影響原素材的質(zhì)量，如放大縮小。但是TMD占內(nèi)存，吃cpu哇 >.<
d、合并列表型塊狀設(shè)計，(這點很糾結(jié)，也很重要) web設(shè)計稿中有一些設(shè)計是列表型的。如：文章列表，信息列表。通常設(shè)計的時候是先制作一份，然后復(fù)制個十幾個。 但是……但是……，復(fù)制太多了占內(nèi)存哇。0_0，果斷保留關(guān)鍵的一份，或者表示幾種狀態(tài)的幾份。然后把其他的都合并圖層了。 相信我，這樣做切圖仔會很開心。^__^

四、邊界清晰，不再模糊

web設(shè)計中，最忌諱糊糊的感覺了。因為很多東西是需要精確到像素的。

a、形狀模糊，有些時候使用形狀工具因為沒有對齊到像素(見配圖),導(dǎo)致做出來的形狀邊緣都糊糊的。
解決辦法很簡單，使用選取工具(A)，小移一下形狀讓它對齊到像素即可，或者干脆柵格化形狀擦去模糊的部分即可。
b、素材模糊，素材讓人覺得糊糊得看起來不是那么專業(yè)？ 簡單的銳化一下，會發(fā)現(xiàn)很好用(我用的比較多的就是智能銳化/數(shù)量100%/半徑0.3像素)。
c、文字模糊，有些時候發(fā)現(xiàn)矢量的字體怎么調(diào)大小都覺得邊緣糊糊的。先復(fù)制一份(備份用)，然后柵格化，小小的銳化一下。^_^

 

五、良好的注釋圖層，凸現(xiàn)專業(yè)氣質(zhì)

代碼需要注釋，設(shè)計稿也同樣需要注釋。同樣是兩份設(shè)計稿，相信你一定很喜歡帶注釋的設(shè)計稿。
相信我，給你的psd 新建一個組叫注釋(comments)，那么切圖仔的眼睛里一定閃爍著晶瑩的東西。^__^