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

在企鵝村玩代碼玩了半年多，玩起psd來(lái)都有點(diǎn)生疏了。
最近對設計MM 給的psd文件產(chǎn)生了點(diǎn)曖昧。有感悟抒發(fā)一下?？纯词遣皇嵌加幸粯拥睦Щ蠛屯瑯拥膯?wèn)題。

如果切圖仔死了，死因很可能是一份可怕的psd

• 1. psd 文件尺寸 竟然有71M，(也許看著(zhù)覺(jué)得還好，但是一開(kāi)ps 就杯具了，內存不夠 = =)
• 2. psd 圖層上百個(gè)，各種看不懂的圖層。毫無(wú)規律的圖層分組讓人菊花一緊。
• 3. 設計稿完全是個(gè)插畫(huà)，怎么看都不像個(gè)網(wǎng)頁(yè)，無(wú)從下手切圖。(恨不得把psd 吃下去 >.<)
• 4. GUI為矢量圖，邊界不清晰。(切圖成果，糊得一比)。

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

合理分層，結構清晰

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

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

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

——————————————

減少尺寸，去其痔瘡是關(guān)鍵

如果你做的是大噴繪 psd 有個(gè)7,80M 可以理解。但是你做的是web設計稿也那么大，就有點(diǎn)不可理喻啦。
畢竟切圖仔的電腦總是沒(méi)有設計師的強大哇，并且我們還要跑個(gè)IDE編輯器，跑個(gè)虛擬機，再跑N個(gè)瀏覽器。這個(gè)時(shí)候要是還要打開(kāi)一個(gè)70M的PSD設計稿(預計占用內存1G)，這個(gè)時(shí)候 誰(shuí)蛋疼誰(shuí)知道哇 ?rz

所以對切圖仔好點(diǎn)，把psd弄小點(diǎn)。如何弄小點(diǎn)，往下看。(畢竟俺是過(guò)來(lái)人 ^__^).

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

邊界清晰，不再模糊

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

• 1.形狀模糊，有些時(shí)候使用形狀工具因為沒(méi)有對齊到像素(見(jiàn)配圖),導致做出來(lái)的形狀邊緣都糊糊的。
  解決辦法很簡(jiǎn)單，使用選取工具(A)，小移一下形狀讓它對齊到像素即可，或者干脆柵格化形狀擦去模糊的部分即可。
• 2.素材模糊，素材讓人覺(jué)得糊糊得看起來(lái)不是那么專(zhuān)業(yè)？ 簡(jiǎn)單的銳化一下，會(huì )發(fā)現很好用(我用的比較多的就是USM銳化)。
• 3.文字模糊，有些時(shí)候發(fā)現矢量的字體怎么調大小都覺(jué)得邊緣糊糊的。果斷，復制一份(備份用)，然后柵格化，小小的銳化一下。^_^

良好的注釋圖層，凸現專(zhuān)業(yè)氣質(zhì)

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

---