A. UI設計中的切圖是怎麼切圖「零基礎學UI須看」
切圖是設計師交付給開發的產物之一，設計稿完成後，設計師需要將其切成便於製作成頁面的圖片。設計師切圖時就需要用到切圖工具，比如摹客，可以自動切圖（支持Sketch、Adobe XD、PS的設計稿），設計師只需在設計稿上進行切圖標記，上傳至摹客即可，無需手動，開發可以自主下載和使用。
如何切圖？其實很簡單：（以PS切圖為例）
Step 1.安裝並打開插件
插件安裝好後打開PS，在「窗口>擴展功能」找到摹客 插件，選擇並打開。使用摹客平台賬號登錄。
Step 2.標記切圖
在完成的設計稿上，選中需要切圖的圖層或編組，點擊「標記切圖」。將在名稱前增加「-e-」，「標記切圖」變為「取消切圖標記」，則標記切圖完成。
Step 3.上傳至摹客
標記切圖後，一鍵將設計稿上傳至雲端項目中，開發工程師就可以自主下載切圖，只需在右側面板中選中切圖，點擊即可下載。
除了自動切圖，還有更多亮點功能：
1. 切圖壓縮：在右側面板中選中切圖
2. 切換平台和選擇倍率：iOS、Android、Web
3. 下載選中切圖，一步到位。
摹客還支持Sketch、Adobe XD的自動切圖，下載插件即可：
下載地址：
摹客：https://www.mockplus.cn/download/idoc-ps
Sketch：https://www.mockplus.cn/download/idoc-sketch
adobe XD：https://www.mockplus.cn/download/idoc-xd
B. 前端切圖之png8和png24的區別
png8：
每一張「png8」圖像，都最多隻能展示256種顏色，所以「png8」格式更適合那些顏色比較單一的圖像，例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；
png24：
每一張「png24」圖像，可展示的顏色就遠遠多於「png8」了，最多可展示的顏色數量多大1600萬；所以「png24」所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，所以「png24」的圖片比較適合像攝影作品之類顏色比較豐富的圖片；
C. Photoshop中的哪些知識點是用來前端切圖的
1).基本信息：
以圖層為主要的編輯對象，通過不同層細節的編輯，使整體效果更為絢麗或多變。
以工具為主要的編輯手段，通過多個工具的結合，滿足大部分編輯要求。
通過濾鏡的組合，呈現很多不錯的效果，達到平民人士也能參與互聯網炒作的大軍中不能自撥，在當下PS已經由有一個名詞轉為一個動詞了。
對前端來說切圖時注意：優化切圖流程，提升切圖效率，增加崗位競爭優勢
具體經驗分享：修改PS的快捷鍵，使其符合前端操作的習慣，側面提升工作效率。從而擴展，可以修改其它軟體的快捷鍵，整體提升工作效率，增加就業資本或信心。
圖片格式那些事兒
一般新手不太注意頁面的性能問題，而性能容易出現在圖片上面，如何在一個大頁面中處理好圖片是一個前端必備的技能之一。
一般應用比較多的格式有：gif,png-8,png-24,jpg。而新手經常混淆png-8,png-24的區別。
按我經驗4k以下gif,png-8差別不大，4k-100k: png-8,gif占優勢，大於100k果斷是jpg。
png-8不支持alpha透明，在IE6下需要一個JS或透明濾鏡來處理。
圖片格式與設計那點事兒
Web性能優化：圖片優化
2). 提高切圖效率思路之擴展：
從客觀上來講，提高效率的基礎在於豐富的實戰經驗或長年的填坑經歷，本質上軟體的操作差別不是特別大。一個五年經驗或一年經驗的開發人員，使用同樣的工具，主要差別還是一個熟練度。這里只分享我個人積累的一些經驗：
在上一點提到的修改快捷鍵，分享一下我修改的幾個快捷鍵（修改這個快捷鍵，有個缺點，換台電腦可能就不能使用，除非能夠熟悉的記得兩套快捷鍵，即修改過的，或原始的）：
新建圖層: F1
使用頻率比較強，所以放在一個容易的地方。
新建文件：F2
僅次於新建文件，也是使用使用頻率比較高的一個鍵。由於切圖是會從原始圖層上多次的分離圖層，所以這個快捷捷由原來的按兩鍵，變為一鍵。並且有效的分離左右手操作的特點，盡量讓使用頻率高的鍵從左側起步。以下的幾個快捷鍵，都是按照這個思路來進行優化或設置的。
按屏幕大小：F3
按畫布大小：F4
這兩個鍵操作思路主要借鑒於CorelDraw，CorelDraw是一款優秀的平面廣告設計軟體，多用於名片，包裝設計。這是由加拿大Corel產品，他們公司另外一個比較著名的繪畫類軟體是Painter。
存儲為web格式：F5
由原來的5鍵優化為一鍵，還有一個流程是通過Ctrl+Shift+S來存儲圖片，很明顯這個流程步驟過於繁多，很浪費時間。有興趣的可以做一個對比。
裁剪命令：F6
由原來的3鍵優化為一鍵，另外一個是裁剪工具(C)，裁剪工具對整個畫面的破壞力比較大，且不易控制，尤其在PS的版本升級中對這個工具進行了優化。而這個命令相對更為輕量或方便。
F7,F8,F9保持不變
轉換為RGB模式：ctrl+=
因為Gif是索引模式，顏色信息較少，如果要進行編輯，首先得轉換成RGB模式。
從圖層建立組：ctrl+,
由於剛入行的設計師沒有經驗，一個設計稿是沒有分圖層組。其實合理的圖層組可以有效的引導前端，所以這個快捷鍵主要是解決這個問題。
自由變換：F10
變換內容
前端主要還是對現有的PSD文件進行編輯，所以這兩個鍵是可以單獨拿出來的。
變換選區：F11
變換邊框
畫筆：F12
因為前端不像設計師，對PSD只是一個切割，而設計師注重於創造的過程。所以對畫筆工具的依賴不是很大，由原來的F5移動到F12。
復制圖層 Ctrl+ / 原有位置在菜單欄：圖層->復制圖層
這個快捷鍵，可以快速的把原始PSD中的一個或多個圖層復制到一個新文件當中。
演示：
3). 切圖的幾個辦法：
切片(k):
優點：能夠一次切除多個圖片。
缺點：需要後退一步，降低效率，容易產生多餘無用圖片
選區(先用選區工具來畫一個范圍，然後裁剪):
優點：區域精確目標單一
缺點：需要後退一步，容易誤操作
拷貝(Ctrl+C):
優點：拷貝單層的內容到新文件，能夠快速的切除圖片。
缺點：不容易找到相應的圖層。
合並拷貝(Ctrl+Shift+C):
優點：拷貝所有可見層的內容到新文件，能夠快速的切除圖片。
缺點：不容易找到相應的圖層。
D. 前端如何切圖（超詳細，超小白）
身為一名前端開發者，$\color{red}{ 切圖 } $雖然可以被UI或者藍湖等工具解決，但是這也是屬於前端er的必修課。因此，我也是把切圖分享作為我第一篇博客的分享內容。
下面是直接操作的步驟，如何打開psd圖等操作應該也不用我廢話了。
1.第一步就是找到你需要的圖或者icon的圖層，並選中它（如果有疊加需要多選就按住ctrl進行多選）。
2.選擇上方工具欄，選擇 圖層—>復制圖層，
然後會彈出一個編輯框，重點：文檔一定要選擇 新建 ,名稱可以填寫自己需要的，然後點擊確定，就會有新的圖了。
3.因為畫片大小可能不太符合自己的預期，可以選擇上方工具欄 圖像—>裁切，會自動切成合適的大小。
4.到這一步基本上就已經成功了，最後就是保存了。依然是上方工具欄，左上角，文件--->導出--->存儲為web所用格式--->選擇四聯--->選擇PNG-24格式（根據自己需要，我一般使用這個），最後點擊 存儲 就可以了。
E. 為什麼切出來的圖製作到網頁上會比PS上的圖看起來小前端/設計請進！！
樓主你好，由於你的圖片是點陣圖圖像，進行縮放修改肯定是會造成像素被壓縮和部分丟失的，還會造成原來圖像的像素 長寬比被破壞，這是會使圖像失真的，解決辦法就是重新排列圖片的像素，修改像素長寬比例：執行圖像-圖像大小命令來設置，一定要把重定圖像像素勾選上，接下來就裁切掉圖像不需要的部分，用這種方法來保存每個圖像點上的像素，還有一種辦法就是把圖片在PS里轉換成智能對象再來進行縮放操作，謝謝採納
F. 微信前端h5商城UI設計規范標注與切圖是具體規范是什麼，我切的二倍圖，前端說我的圖大了字體也不對，求解
前端的問題，你給前端圖片的外部容器的寬以百分比的形式存在就行了。
G. 前端必備的切圖知識
本文以Adobe Photoshop CC 2018 (32 Bit)版本為例介紹，不同版本可能有細微差異。
由於ps默認的是以厘米為單位，因此需要修改為我們前端所用的以像素為單位：
編輯-->首選項-->單位與標尺-->按下圖修改即可：
由於ps默認未啟用標尺及智能參考線等，因此需要自行開啟：
如果左側工具欄未開啟顯示，則也可在此設置讓其顯示；另外需要提的是，信息面板需要一些額外的設置：
信息面板選項設置
以上設置完後，建議保存工作區以保存之前預設的一些設置。
保存工作區方法： 窗口-->工作區-->新建工作區
這里就不解釋了，直接上圖：
選擇移動工具 ---> 勾選自動選擇及選擇圖層選項（不是組） --->選擇預切圖的位置（選擇後會自動跳至相應圖層）--->右鍵相應的圖層--->選擇轉換為智能對象--->啟用選框工具框選相應區域--->復制--->新建文件--->粘貼--->選擇圖像菜單--->選擇裁切--->選中基於透明像素--->確定即可；
此方法比較適合不規則的圖像，比如logo等；
拉好參考線後，選擇切片工具--->點擊 基於參考線的切片
--->文件--->導出--->存儲為web所用格式--->選擇png24--->存儲--->選中所有用戶切片；
由於有很多條參考線存在時會相互干擾，我們可以將原有圖片裁剪成幾個獨立的部分，然後再使用參考線切圖法即可。
文件--->導出（Photoshop低級版本此處是腳本而不是導出）--->將圖層導出到文件--->設置文件類型（PNG24，勾選透明區域、交錯及裁切圖層）
完成後，ps腳本會自動運行。可能耗時比較長。
該方法需要事先設置兩個地方：
a、編輯-->首選項-->增效工具-->啟用生成器
b、文件-->生成-->圖像資源
上述兩個設置完成後，啟用移動工具，選擇需要的切圖，在其圖層上加後綴名，則在原始psd文件目錄下的xxxxxx-assets文件夾中會自動生成相應格式的圖片（甚至svg）。
當然我們還可以在後綴名添加數字來表示圖片的質量。比如logo.jpg8（表示80%的質量），logo.png24，logo.png8等。當然如果不加數字的話則默認取最大值；
不僅如此，我們還可以設置生成後的大小倍數 比如命名 300% logo @2x.png 則表示會在原有基礎上放大三倍大小導出。這一點對視網膜屏很有用。
H. 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所有格式」也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！
I. 請問網頁前端切圖的時候需要將一些字體大小特別大或特別小的文字 以png的形式切給前端人員嗎
提供你的字體和字型大小 以及相關的尺寸 剩下的交給前端人員，
J. 移動網頁一般效果的尺寸是多大，前端切圖應該怎麼切
圖片不算很大！可以用百分百控制圖片的寬度！切記高度要一致。