唐山學(xué)設(shè)計(jì)ui設(shè)計(jì)中的切圖是什么

ui設(shè)計(jì)中的切圖是什么

ui設(shè)計(jì)中的切圖是什么？切圖是設(shè)計(jì)師交付給開發(fā)人員的產(chǎn)物之一。在設(shè)計(jì)稿完成后，設(shè)計(jì)師需要把它切成可以很容易地做成頁面的圖片。切圖是指將設(shè)計(jì)稿切割成便于制作成頁面的圖片，并完成HTML + CSS布局的靜態(tài)頁面。

1.ui設(shè)計(jì)中的切圖是什么

切圖是設(shè)計(jì)師交付給開發(fā)人員的產(chǎn)物之一。在設(shè)計(jì)稿完成后，設(shè)計(jì)師需要把它切成可以很容易地做成頁面的圖片。切圖是指將設(shè)計(jì)稿切割成便于制作成頁面的圖片，并完成HTML + CSS布局的靜態(tài)頁面。

通俗來講，就是利用切片工具把自己需要的圖片切成一張張小圖，然后用DIV+CSS完成靜態(tài)頁面編寫，完成CSS布局。

切圖的目的：第一個(gè)是讓網(wǎng)頁稿具有交互性，實(shí)現(xiàn)平時(shí)看到的各種功能。第二個(gè)是優(yōu)化體積。在切圖的時(shí)候一定要注意少使用圖片工具，現(xiàn)在主流是Dreamweaver，使用DIV + CSS布局可以減少網(wǎng)頁體積，也有一些公司自己開發(fā)平臺(tái)進(jìn)行制作。

2.切圖的作用

有利于優(yōu)化圖片輸出體積;有利于優(yōu)化CSS Sprite減少請(qǐng)求，也有利于優(yōu)化減少自己后期網(wǎng)站改版升級(jí)時(shí)候工作量。這部分需要很多前端方面的知識(shí)。

考慮超越“圖片”的角度思考并且實(shí)現(xiàn)更高階的效果。例如，需要考慮PC端和移動(dòng)端不同的分辨率;使用 Responsive 的布局的話切圖應(yīng)該怎么切;是否有必要切割兩套;當(dāng)遇到iPad或RMBP高清屏幕時(shí)，如何處理網(wǎng)頁中的圖片和背景;否可以應(yīng)用一些新技術(shù)，如Web字體、字體圖標(biāo)、css3中的新功能來減少網(wǎng)頁中的圖像數(shù)量等。

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請(qǐng)注明出處和鏈接 http://elsolbar.com/news-id-61418.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請(qǐng)自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請(qǐng)關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請(qǐng)?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050