PS切圖-基本思路

Photoshop是前端工程師無法迴避的一個軟體，軟體本身十分的強大，但我們僅僅需要通過其來完成基本的切圖工作即可。

一個完整的項目流程是市場進行需求分析，產品做出項目原型，UI根據項目原型出設計圖，前端根據設計圖製作頁面，後端進行數據相關工作，網站經過測試後上線。

1. 什麼是切圖？

從UI設計稿中切出網頁素材

設計稿（.pdf文件）— 素材切出 —— 產出物（如 .jpg .png文件）

2.為什麼切圖？

給網頁提供圖片素材；有時候網頁中一些比較漂亮的效果沒辦法用代碼實現（或難以兼容），

then，可以通過引入圖片資源的方法來實現這些效果。如：

HTML：img <img src="images/avatar.jpg" alt="頭像" />

CSS：background .icon{background-image:url(../images/sprite.png);background-position:0 0;}

3.如何切圖？

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

PS切圖的基本思路：

（1）工具、面板、視圖

（2）測量、取色

（3）切圖

（4）保存

（5）修改、維護

（6）圖片優化與合併

Webpiece_整合分析、記錄點滴！