1. UI設計師在完成界面設計後，切圖都改切哪些
網頁設計好後的切圖是將設計稿切成便於製作成頁面的圖片，並完成html css布局的靜態頁面，有利於交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具，把自己所需的切成一張張小圖，然後用DIV CSS完成靜態頁面書寫，完成CSS布局。
設計好的網頁都需要切圖，主流的是dreamweaver、photoshop軟體，還有sketch、firework等，低端QQ切圖，網頁切圖等。切圖為後端編程者帶來方便，提高效率，讓網頁稿有了交互性，實現平時看到的各種各樣的功能，畫面瀏覽速度快，有利於優化。
(1)前端切圖要切背景嗎擴展閱讀：
一般我們從設計師那得到的都是psd文件，裡面有幾十或者上百個圖層，一般會根據內容分好文件夾，有文字有圖片，有的只在特殊情況下顯示的，這時候就需要根據自己的需要導出不同的圖。
切圖的時候也會有許多考慮，比如把哪些內容壓縮成一張圖片，什麼時候用透明背景PNG，什麼時候用CSS Sprite（把瑣碎的小圖比如按鈕、logo復制到一張透明背景的圖上然後保存為一張圖，再用background position去提取。）文字是切成圖片，還是復制到HTML里。
一般情況下都不會把文字切成圖，除非用到比較特殊的字體或者變形等等，然後即使是photoshop保存為web格式導出的圖，有時候尺寸也是很大的，特別是PNG，這時要使用一些專業壓縮工具進行二次壓縮。
當然有些有前端經驗的設計師會把切好的圖片發給你，這樣就可以直接開始寫HTML和CSS了，但是建議還是盡量自己切，掌握熟練的切圖技巧也是一個前端應該有的技能。
參考資料來源：搜狗網路-切圖
搜狗網路-靜態頁切圖
2. 前端如何切圖（超詳細，超小白）
身為一名前端開發者，$\color{red}{ 切圖 } $雖然可以被UI或者藍湖等工具解決，但是這也是屬於前端er的必修課。因此，我也是把切圖分享作為我第一篇博客的分享內容。
下面是直接操作的步驟，如何打開psd圖等操作應該也不用我廢話了。
1.第一步就是找到你需要的圖或者icon的圖層，並選中它（如果有疊加需要多選就按住ctrl進行多選）。
2.選擇上方工具欄，選擇 圖層—>復制圖層，
然後會彈出一個編輯框，重點：文檔一定要選擇 新建 ,名稱可以填寫自己需要的，然後點擊確定，就會有新的圖了。
3.因為畫片大小可能不太符合自己的預期，可以選擇上方工具欄 圖像—>裁切，會自動切成合適的大小。
4.到這一步基本上就已經成功了，最後就是保存了。依然是上方工具欄，左上角，文件--->導出--->存儲為web所用格式--->選擇四聯--->選擇PNG-24格式（根據自己需要，我一般使用這個），最後點擊 存儲 就可以了。
3. 能否用通俗語言講一下web前端講的「切圖」到底是什麼意思
簡單說就是把一張大圖裁成若干張小圖
一張完整的web設計圖包括了很多元素，Logo、圖標、背景圖等等
設計師通常給的是Ps的分層設計文件，或者是Ai，當然這樣是最好的，當然也有設計師用的素材不是透明分層的，這個時候就需要我們自己摳圖了（這又是另外一個話題了，不談）
這時候就需要把我們需要的Logo、圖標、背景圖這些一一單圖提取出來使用到前端項目中，於是我們用到了Ps或Ai中切圖這個功能
4. PS-前端切圖教程（切jpg圖和切png圖）
轉發自： PS-前端切圖教程（切jpg圖和切png圖） - xing.org1^ - 博客園 (cnblogs.com)
———————-------------------------------------------------------------------- PS切圖步驟說明 ————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本，教程中用到的除了界面和擺放位置不一樣外，其他應該和低版本的都一樣了。
一、 切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具欄里的「切片工具」
事先自己沒用過或上一次ps工具使用時沒有使用過「切片工具」的，打開ps工具欄里默認是「裁剪工具」的圖標
你可以滑鼠左鍵點住「裁剪工具」不鬆手，他會在右邊展開（我這是工具欄在ps界面左側的情況下）這一組的所有工具，在里邊選擇「切片工具」即可
我圖中之所以框選了兩個工具，是因為後期還要用到「切片選擇工具」，這里先認識一下他的位置在哪。
3．用「切片工具」切出想要的范圍，框選范圍就像平時用qq的截圖工具一樣。
如下，我需要這個小圖標，我就框選了他。
框選中：
框選後：
如果你框選好了松開了滑鼠，他還是這種黃色的邊線，你把「切片工具」移到附近，他還能調整框的大小范圍。
但是如果你框選了好幾個了，想改前邊已經框選好的：
像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其他前邊切得都是藍色邊線，這時候你再用「切片工具」去調整藍色邊線的選區是動不了的。
這就要用上「切片選擇工具」了
4．「切片選擇工具」調整范圍：
切片選擇工具就在「切片工具」的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色後，調整范圍。
切片選擇工具只能選擇並調節范圍，不能切片。
5．切好後保存
保存方法：文件——存儲為web所用格式【快捷鍵ctrl+shift+alt+s】
在彈出的【存儲為web所用格式】對話框中，下拉選擇框選擇JPEG格式
按需求更改質量（低、中、高、非常高、最佳。這五個模式）
點擊存儲後彈出【將優化結果存儲為】的對話框
選擇存放位置、設置文件信息——
一般存儲時，ps會自動建立一個images文件夾，你要找到剛才自己設定的位置中，找images文件夾，在她里邊才有你剛才切好的圖。
命名文件名
「格式「——僅限圖像
在「切片」那裡，可以選擇是存儲全部切片還是只存儲選中的切片，
一般默認就存儲全部切片就好了，有時候只需要一小塊切片時，可以選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的自己去一大堆切片中撿出來自己要用的了。
二、 切PNG圖
切透明圖的核心理念是，你要把不需要的背景圖給隱藏掉，只讓需要的留下來，底部背景變成像馬賽克那樣的樣式。
1．打開ps拖進來你要切的psd或者tif文件，
一定得是帶圖層的。
2．先選擇移動工具
3．並在頂部選項欄里勾選自動選擇，
4．下拉框里選擇圖層
若沒有選項欄或者圖層欄的：
在菜單欄點擊窗口——選項。打了對勾後就能調出工具對應的選項面板了。
5．然後用「移動工具」點擊你不需要的背景圖，ps會自動選中該背景所在的圖層，
6．你在圖層面板中，把對應這層的左邊小眼睛關掉就好了，讓背景圖先隱藏起來。
有時候設計會有好幾層，他為了光效或者其他效果做了好幾層不同透明度的背景疊加在你要切的東西後邊，
你就用移動工具（快捷鍵v【英文輸入法下按v就可以鎖定移動工具】）點擊它然後關掉它，有幾層就多做幾步，直到你不需要的背景全部隱藏掉。
但是良心的設計一般會把背景都放到一個圖層中，你找到一層背景，所有的都和他在一個組里邊，你把組的小眼睛關掉即可
7．然後切片工具切出你要的那個圖標
8．保存：文件-存儲為web所用格式(ctrl+shift+alt+s)
9．選擇png-8/png-24格式，看你對圖標的要求了
PNG8」是指8位索引色點陣圖，「PNG24」是24位索引色點陣圖；
png8：
每一張「png8」圖像，都最多隻能展示256種顏色，所以「png8」格式更適合那些顏色比較單一的圖像，
例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；
png24：
每一張「png24」圖像，可展示的顏色就遠遠多於「png8」了，最多可展示的顏色數量多大1600萬；
所以「png24」所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，
所以「png24」的圖片比較適合像攝影作品之類顏色比較豐富的圖片；
這是二者的區別，根據自己的需求選擇吧。
10．然後就是一定要勾選透明度，其他默認設置就好。
Png-8的透明度位置
Png-24的透明度位置
11．」保存全部切片「或者「保存選中切片」
這里還要說明一個問題，有時候一個頁面中，我用切片工具選出好幾張png圖標准備切，然後保存的時候也選擇png格式都沒問題，
但是到了選擇保存位置這個對話框里，選擇的是「保存所有切片「，
最後保存出來的圖片，只有最後切得那張或者說切片工具選中的那張是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的圖，還是建議，一張一張「保存選中切片」比較好。
或者你的圖標與白色底差別大的話，你也可以不計較，讓他保存成jpg後再去ps中魔棒摳圖也好，不過這樣比較麻煩不是。
有的說，背景圖和圖標每分圖層咋辦？那咋辦？找設計吧。要不你自己選取工具扣吧，扣好了另存為png也是一種辦法
三、 其他技巧 ：
1．Ctrl+ +號放大圖片，
2．ctrl-縮小
3．按住空格，滑鼠圖標變成抓手工具，移動頁面
四、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小icon切成png的
「移動工具」點擊圖標，選中圖標所在的圖層；
右擊該圖層，選擇「轉換為智能對象」；（ps這時候沒反應，不要大驚小怪，是你看不到而已）
接著再次在這個圖層上，右擊——「編輯內容」
對話框點擊確定
ps就自動生成一個新的文件，只有那個icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有沒有！
以下是圖解：
這是點擊一個小圖標
選中圖標後的圖層面板
右鍵點擊該圖層選擇「轉換為智能對象」
沒轉換前的圖層樣式：
轉換後的圖層樣式：
所以別說「我轉換了ps沒反應」這樣的話了，是有的，你不仔細看看不到
接著再右擊——「編輯內容」
點擊「確定」
看，他就新建了一個「形狀8」的頁面，放的是我的png的小圖標，
最後你保存為png也好，「存儲為web所有格式」也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！
5. 網頁設計好後的切圖是什麼意思呢
切圖就是把用設計軟體設置好的圖片切成相應的大小，切圖後再把圖片上傳就可以可以加快顯示速度，不用等整個圖片都下載以後顯示。
PS切圖步驟：
1、打開PS，然後點擊切片工具。
