能否用通俗語言講一下web前端講的「切圖」到底是什麼意思？

01-05

不了解web前端開發，請問經常看到web前端開發中經常提到的「切圖」。
這是一個什麼概念？
用PS做背景圖標/圖片嗎？

前端小白，這個問題比較低端，請大牛不要見笑。
我準備學習前端，準備從切圖入手。
請多指教。

早年「三劍客」那會兒，網頁製作的過程是先在 PS 裡面畫圖，然後導入到 fireworks 裡面切割成切片，然後直接整體導出 HTML，再在 Dreamweaver 填內容，「切圖」說的就是拉切片導出的那一步。後來「DIV+CSS」流行之後就不玩這一套了，現在「切圖」多是指從設計稿中導出用於網頁的圖形元件出來。

是不是指的是在表格排版時代把圖片切成幾部分分別放在表格的不同部位以達到排版效果？

當然正如 @Belleve所說

後來DIV+CSS流行後就不玩這一套了。

簡單說就是把一張大圖裁成若干張小圖（附圖文操作方法）

一張完整的web設計圖包括了很多元素，Logo、圖標、背景圖等等，如下圖（網圖侵刪）

設計師通常給的是Ps的分層設計文件，或者是Ai，當然這樣是最好的啦╭( ???) ??，當然也有設計師用的素材不是透明分層的，這個時候就需要我們自己摳圖了(? _ ?)（這又是另外一個話題了，不談）

這時候就需要把我們需要的Logo、圖標、背景圖這些一一單圖提取出來使用到前端項目中，於是我們用到了Ps或Ai中切圖這個功能

然後在圖片上拖來拽去就變成了下面醬紫（┗|｀O′|┛ 嗷~~）

最後文件-&>導出-&>存儲為Web所用格式（快捷鍵Ctrl/Command+Alt+Shift+S）

選中指定切片-&>設置優化參數-&>存儲，鐺鐺檔，大功告成ヾ(o???)?ヾ

得到下邊這些單獨的文件咯

這樣就可以愉快地用到項目中嘍，不過圖標太多的話建議做成Sprite圖哦，可以有效減少請求數，加快頁面載入。

一不小心寫成教程了_(:зゝ∠)_PS萌新求贊求關注(づ￣3￣)づ╭?～

前端工程師必備的PS技能——切圖篇

-。- 沒有比上鏈接和圖片更通俗暴力的方式了

簡單的說就是從 psd到 html的過程

切圖以前相當於七巧板，圖片切成一塊塊拼起來。

現在像是魔方，一層層無數種拼法，還是動態的。

樓上的解釋真的是……反正我是沒看懂

首先設計師給了psd之後，前端分析一下布局，然後把其中需要用到的圖片或者圖標用ps的切片工具分割好，然後點擊左上角

[文件 ] —[ 保存為web模式]

就會得到一個images的文件夾，裡面是一些零散的圖片（就是你分割的那些）。然後前端開始寫代碼，一般純色的背景或者按鈕和一些系統自帶的文字都是可以直接用代碼打出來的，就那樣用代碼一點一點的組成、還原設計師設計的網頁，其中的一些icon和圖片自然是沒辦法用代碼寫出來的，所以需要用到之前切好的那些圖片和圖標，一起拼上去。拼成一個完整的網頁，然後還可以給那些圖標添加一些代碼，使得使用者點擊它的時候可以執行一些動作，比如有趣的動效，或者彈出一個神奇的窗口等等。

啊～好通俗易懂啊～

把設計稿做成靜態的html頁面

之前的切圖，指的是對設計圖進行切片處理，然後通過這些小圖來拼接頁面；

後來切圖泛指將設計圖轉化成頁面的動作。

CSS3 、 Icon Font 等應用廣泛之後，頁面中使用的圖片資源越來越少了。

準確說切圖是歷史遺留概念。那個年代網頁布局沒有現在靈活，想實現比較好看的效果只能從設計稿上扣下來元素放到網頁上，這個過程就叫切圖。以前可能導航條就是一張圖片，一個按鈕就是一張圖片。

但是現在基本已經沒有切圖這一個概念了，現代網頁大多是常見元素一般都是svg或者iconfont，可以任意解析度，任意放大縮小顯示而不失真。加上css3強大的屬性，圖片耗費流量又可能在視網膜屏幕上顯示效果不好，原來的切圖方式漸漸被淘汰。網頁漸漸「矢量化」。

所以說，切圖仔找不到工作啦

估計你是被「切」字給搞混了。

傻瓜式地分兩步來理解：

1.你把項目需要的圖片做好發給工程就可以

2.由於技術的原因，有時候為了實現你的視覺要求，不可能直接把整張圖片放進去，所以必須裁剪為若干小圖片，工程在技術上「拼接」成一張完整的圖片（可能這就是「切」的由來）

3.後續可以直接過去問工程：如果要實現這種效果，你們是怎麼做的？通過這樣的方法了解他們具體是如何實現的，後續你就懂得從工程的角度去保存圖片給他們。

就是ps的切圖（片）功能，自己用用ps的這一功能就知道了

切圖指的是純靜態的還原設計圖包括從原型圖把元素切下來然後根據設計圖把相關信息變成HTML和css代碼

以前很多設計師在設計的時候都會寫HTML和css代碼現在隨著分工的明確這活屬於前端程序員重構崗位

當然現在很多設計師都會把元素切下來分成兩份給你一份原型一份需要做動畫或者css代碼不好處理的部分

前端不算遊戲和圖形學的話分為兩塊

一塊是重構前端專門處理還原設計圖和編寫兼容性好的HTML和css代碼以及動畫需要和設計師經常溝通部分還需要負責SEO 這崗位聽說在騰訊屬於設計序列不過我不清楚

另外一塊是邏輯前端專門負責邏輯，架構，演算法，安全和優化等任務

基本上切圖是前端標配技能吧一些其他語言轉前端的也有不會切圖這情況可以專門往這塊發展比如前端有個大神張鑫旭玩css非常溜可以關注他的博客

其實就是把設計師做好的效果圖放在網頁里。如果沒要求可以直接把圖片直接嵌入到html里，這就叫切圖，雖然你沒「切」過圖。但是複雜了，就要把圖片里的各個元素都摳出來，用代碼寫入到html中。其實把切圖叫做摳圖更準確一些。這就是我理解的切圖~

只是有人認為切圖得設計師做，把大圖肢解成各個小元素，但是設計師不懂html的話容易該切的不切，不該切的卻切了；

有人認為該前端做，畢竟前端人員了解自己需要什麼，但是有的前端又不會PS跟AI。。。

我正好在前兩天了解了一下切圖，嘗試用 QA 的形式回答一下。

1、什麼是切圖？

切圖就是將 .psd 設計稿還原成 Web 頁面的過程，這個過程包括兩部分：

切出素材
編寫代碼實現

2、為什麼要切圖？

沒有人可以直接把一整張圖片引用頁面，當作 Web 頁面的。切圖的主要目的就是給網頁提供圖片素材，可以讓你從 html 或者 css 里引入圖片。

html: & css: backgroud-img:url(../images/sprite.png)

3、如何切圖？

使用 PS 工具
使用背景圖
圖片合併方案
瀏覽器兼容

4、都需要切哪些圖？

修飾性，用在 css 里，icon、logo、有特殊效果的按鈕和文字
內容性，用在 html 里，Banner、廣告圖片、文章配圖

5、切出來的圖片保存為哪種格式？

修飾性的保存為 png24（支持半透明），png8。內容性的保存為 jpg。

6、有哪些可以學習的切圖教程

建議可以參考一下慕客網和網易雲課堂的前端切圖部分。

PS 有個切片工具，早期不少人切片以後導出 html 就直接用了。可能這是切圖的由來吧。

產出標籤同樣式

泥門都讓一下，我要強答一下

話說當年不懂web，Photoshop略知一二的時候被拉去配合一個小隊伍做網頁UI

然後設計完一個界面以後，給人家交了個PSD圖，然後敲代碼的哥哥說，你這個要切開啊喂┐=????(￣ー￣)┌

然後就發現了Photoshop裡面的切片工具

好啦，廢話不說，題主你想想，一個網頁那麼大的圖，看起來是一塊，可是你要有會響應動作的按鈕啦，或者是映射信息的框框啦，那怎麼讓做好的UI可以套用在網站上呢，當然是要按照功能不同給它切成片片啦~~~

關注都沒有，更別說點贊了( ˉ ? ˉ??)

想著我也是一個喜歡通俗的人，就進來回答一下。

如圖：

所謂的前端切圖就是將所需的整個圖片拆分，然後拆成自己需要的那一小部分引用到前端代碼中去使用，使得最後可以在網站裡面呈現出來。說得不多，希望能有用。

最後，想推薦一下切圖神器：Slicy，用了它，如果這款工具適合你的話相信前端的UI方面工作會事半功倍的。

切圖，就是DIV+CSS布局