前端切圖的通俗解釋（說人話）

首先設計師給了psd之後，前端分析一下佈局，然後把其中需要用到的圖片或者圖示用ps的切片工具分割好，然後點選左上角
[檔案 ] —[ 儲存為web模式]
就會得到一個images的資料夾，裡面是一些零散的圖片（就是你分割的那些）。然後前端開始寫程式碼，一般純色的背景或者按鈕 和一些系統自帶的文字都是可以直接用程式碼打出來的，就那樣用程式碼一點一點的組成、還原設計師設計的網頁，其中的一些icon和圖片自然是沒辦法用程式碼寫出來的，所以需要用到之前切好的那些圖片和圖示，一起拼上去。拼成一個完整的網頁，然後還可以給那些圖示新增一些程式碼，使得使用者點選它的時候可以執行一些動作，比如有趣的動效，或者彈出一個神奇的視窗等等。

啊~真的通俗易懂，而且流程都清楚了。

作者：vvhl
連結：https://www.zhihu.com/question/38357171/answer/76030905
來源：知乎
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。