您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

善待PSD — 好設(shè)計(jì)師,從細(xì)節(jié)做起

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

在企鵝村玩代碼玩了半年多,玩起psd來(lái)都有點(diǎn)生疏了。
最近對(duì)設(shè)計(jì)MM 給的psd文件產(chǎn)生了點(diǎn)曖昧。有感悟抒發(fā)一下。看看是不是都有一樣的困惑和同樣的問(wèn)題。

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

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

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

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

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

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

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

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

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

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

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

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

邊界清晰,不再模糊

web設(shè)計(jì)中,最忌諱糊糊的感覺(jué)了。因?yàn)楹芏鄸|西是需要精確到像素的。

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

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

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

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/di1105.html
蓋座漂亮的“樓”–淺談網(wǎng)頁(yè)設(shè)計(jì)中的構(gòu)圖
“有點(diǎn)兒意思”的導(dǎo)航設(shè)計(jì)
圖趣網(wǎng)微信
建議反饋
×