PSD也要合理分層結構清晰

2023-12-16    分類: 網(wǎng)站建設

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

1. psd 文件尺寸 竟然有71M,(也許看著覺得還好,但是一開ps 就杯具了,內(nèi)存不夠 。 2. psd 圖層上百個,各種看不懂的圖層。毫無規(guī)律的圖層分組讓人菊花一緊。 3. 設計稿完全是個插畫,怎么看都不像個網(wǎng)頁,無從下手切圖。(恨不得把psd 吃下去。 4. GUI為矢量圖,邊界不清晰。(切圖成果,糊得一比。 作為切圖仔,暫時就列了這么些 碰到的問題。相信有和多人有同感。 那么作為設計師MM的你們又應該如何去避免呢? 對癥下藥 一一破解。

合理分層,結構清晰

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

1. 按框架分。(網(wǎng)頁分 ,頭部head , 主題 main,底部 foot,以此類推)。 2. 按模塊分。(每個小原件,小裝飾,合成一個大物件就能做為一個模塊) 3. 按屬性分。(這點比較重要,設計師如果做的是web界面,需要了解什么是“圖片輸出” 和 “代碼輸出”, 原因是當切圖的時候,我們需要將 “代碼輸出”類型所屬的圖層隱藏掉,然后再進行導出)。還有一些注釋(注釋好重要,后面有講)相關的東西。 4. 按狀態(tài)分,(web設計跟插畫設計 一個很大的區(qū)別就是 web設計是有交互的,需要針對各個交互狀態(tài)進行分層分組) “代碼輸出” 指的是設計稿中的一些效果是可以使用代碼來實現(xiàn)的,如后期可編輯的文字(大段文字,小按鈕里的宋體文字),圓角,漸變效果(高級瀏覽器可實現(xiàn))。 “圖片輸出” 則是指出了代碼輸出以外的東西,如圖標icon,背景效果,以及一些 使用代碼不可實現(xiàn)的文字效果(如藝術字體)。 減少尺寸,去其痔瘡是關鍵

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

所以對切圖仔好點,把psd弄小點。如何弄小點,往下看。(畢竟俺是過來人 ).

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

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

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

代碼需要注釋,設計稿也同樣需要注釋。同樣是兩份設計稿,相信你一定很喜歡帶注釋的設計稿。在方便自己的同時也方便與他人。

分享名稱:PSD也要合理分層結構清晰
URL鏈接:http://www.muchs.cn/news9/308909.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、App設計用戶體驗、標簽優(yōu)化、網(wǎng)頁設計公司、Google

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

成都app開發(fā)公司