配圖：近日幫朋友設(shè)計的瀑布流 taobao站 美麗格子 ^__^。

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

一些事

　　在企鵝村玩代碼玩了半年多，玩起psd來都有點生疏了。 一些事

　　最近對設(shè)計MM 給的psd文件產(chǎn)生了點曖昧。有感悟抒發(fā)一下?？纯词遣皇嵌加幸粯拥睦Щ蠛屯瑯拥膯栴}。 一些事

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

　　1. psd 文件尺寸 竟然有71M，(也許看著覺得還好，但是一開ps 就杯具了，內(nèi)存不夠 = =)

一些事

　　2. psd 圖層上百個，各種看不懂的圖層。毫無規(guī)律的圖層分組讓人菊花一緊。

　　3. 設(shè)計稿完全是個插畫，怎么看都不像個網(wǎng)頁，無從下手切圖。(恨不得把psd 吃下去 >.<) 一些事

　　4. GUI為矢量圖，邊界不清晰。(切圖成果，糊得一比)。

　　作為切圖仔，暫時就列了這么些 碰到的問題。相信有和多人有同感。 yixieshi

　　那么作為設(shè)計師MM的你們又應該如何去避免呢? 對癥下藥 一一破解。 yixieshi

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

yixieshi

　　不管你做的是設(shè)計，還是插畫。結(jié)構(gòu)設(shè)計也是一種設(shè)計，當你合理并且清晰的規(guī)劃好你的設(shè)計稿，那么這個設(shè)計就有十之八九了。 互聯(lián)網(wǎng)的一些事

　　那么如何對網(wǎng)頁設(shè)計稿進行分組分層呢? 互聯(lián)網(wǎng)的一些事

　　1. 按框架分。(網(wǎng)頁分 ，頭部head ， 主題 main，底部 foot，以此類推)。

yixieshi

　　2. 按模塊分。(每個小原件，小裝飾，合成一個大物件就能做為一個模塊)

　　3. 按屬性分。(這點比較重要，設(shè)計師如果做的是web界面，需要了解什么是“圖片輸出” 和 “代碼輸出”, 原因是當切圖的時候，我們需要將 “代碼輸出”類型所屬的圖層隱藏掉，然后再進行導出)。還有一些注釋(注釋好重要，后面有講)相關(guān)的東西。 互聯(lián)網(wǎng)的一些事

　　4. 按狀態(tài)分，(web設(shè)計跟插畫設(shè)計 一個很大的區(qū)別就是 web設(shè)計是有交互的，需要針對各個交互狀態(tài)進行分層分組)

　　“代碼輸出” 指的是設(shè)計稿中的一些效果是可以使用代碼來實現(xiàn)的，如后期可編輯的文字(大段文字，小按鈕里的宋體文字)，圓角，漸變效果(高級瀏覽器可實現(xiàn))。 yixieshi

　　“圖片輸出” 則是指出了代碼輸出以外的東西，如圖標icon，背景效果，以及一些 使用代碼不可實現(xiàn)的文字效果(如藝術(shù)字體)。

　　—————————————— yixieshi

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

yixieshi

　　如果你做的是大噴繪 psd 有個7,80M 可以理解。但是你做的是web設(shè)計稿也那么大，就有點不可理喻啦。 互聯(lián)網(wǎng)的一些事

　　畢竟切圖仔的電腦總是沒有設(shè)計師的強大哇，并且我們還要跑個IDE編輯器，跑個虛擬機，再跑N個瀏覽器。這個時候要是還要打開一個70M的PSD設(shè)計稿(預計占用內(nèi)存1G)，這個時候 誰蛋疼誰知道哇 囧rz

yixieshi

　　所以對切圖仔好點，把psd弄小點。如何弄小點，往下看。(畢竟俺是過來人 ^__^). 互聯(lián)網(wǎng)的一些事

　　1.去除沒用的大尺寸素材圖層，(當設(shè)計稿需要交接給切圖仔的時候，最好復制一份設(shè)計稿，去除psd中無用處的原始素材圖)。因為素材圖片是唯一難壓縮的東西(psd尺寸大很多時候是因為這個)，且運行時占內(nèi)存大。

　　2.去除無關(guān)圖層，(這個是禁忌哇，如果跟設(shè)計稿不相關(guān)的最好刪掉，或者新建一個temp組丟那里面，不然很容易誤導切圖仔，而且還占內(nèi)存，別以為隱藏掉就不占內(nèi)存啦 XD)。

　　3.慎用智能圖層。(智能圖層在CS4的時候就開始有了。) 很好用，因為不影響原素材的質(zhì)量，如放大縮小，但是TMD 占內(nèi)存，吃cpu哇 >.<

　　4.合并列表型塊狀設(shè)計，(這點很糾結(jié)，也很重要) web設(shè)計稿中有一些設(shè)計是列表型的。如：文章列表，信息列表。通常設(shè)計的時候是先制作一份，然后復制個十幾個。 但是。。。。但是，復制太多了占內(nèi)存哇。0 0，果斷保留關(guān)鍵的一份，或者表示幾種狀態(tài)的幾份。然后把其他的都合并圖層了。 相信我，這樣做切圖仔會很開心。^__^ yixieshi

　　邊界清晰，不再模糊 一些事

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

yixieshi

　　1.形狀模糊，有些時候使用形狀工具因為沒有對齊到像素(見配圖),導致做出來的形狀邊緣都糊糊的。

互聯(lián)網(wǎng)的一些事

　　解決辦法很簡單，使用選取工具(A)，小移一下形狀讓它對齊到像素即可，或者干脆柵格化形狀擦去模糊的部分即可。