PS

你描述的工作就是一個(gè)網(wǎng)頁前端的最重要的工作---“切片”。
這需要你對(duì)PS有一定了解，大致步驟如下：
首先，打開psd文件，然后調(diào)出標(biāo)尺（重要）
然后根據(jù)你自己對(duì)于頁面的理解，把頁面分成幾部分（一定不要遺漏，然后越細(xì)越好）
之后使用PS的切片工具，把你分的部分切成一個(gè)個(gè)圖片，并記錄這些圖片在效果圖里的位置（left，top）
最后在用H5+CSS+JS，把它們?cè)诰W(wǎng)頁中在拼起來（要求一模一樣）

你設(shè)計(jì)視覺稿的過程，其實(shí)就是寫HTML和CSS的過程。

換句話說，你設(shè)計(jì)過程中的每一步操作，都對(duì)應(yīng)于一句HTML或者CSS代碼。

比如設(shè)計(jì)一個(gè)導(dǎo)航欄(#navbar)，圖層就可以命名為navbar，而navbar下面的組件元素就可以都放在同一個(gè)圖層或者圖層文件夾中；然后添加一個(gè)導(dǎo)航欄外部容器(.container)，給其添加背景色(backgroud-color:#FFD100)；然后添加一些導(dǎo)航鏈接(.item)，添加鏈接的文本內(nèi)容……

順著這個(gè)思路，你在設(shè)計(jì)過程中，你可以預(yù)先解決HTML元素命名、CSS樣式數(shù)據(jù)、HTML與CSS模塊化策略、響應(yīng)式網(wǎng)頁設(shè)計(jì)策略、跨瀏覽器兼容性策略等問題。

視覺稿實(shí)際完成，你會(huì)發(fā)現(xiàn)哪里需要切圖，哪里可以直接用HTML/CSS代碼實(shí)現(xiàn)，一切問題都了然于心。

所以說，網(wǎng)頁交互設(shè)計(jì)、視覺設(shè)計(jì)，與HTML/CSS/JS開發(fā)是密不可分的，沒有明確的先后關(guān)系。

凡是把視覺設(shè)計(jì)、交互設(shè)計(jì)，與HTML/CSS/JS開發(fā)，看作是兩個(gè)不同的工種的，都不是“真前端”。

其實(shí)并沒有什么圖片需要切的，大多都是量一下尺寸，然后代碼實(shí)現(xiàn)。

需要切圖的就是一些icon，在ps里，按住Ctrl，鼠標(biāo)點(diǎn)擊icon的位置，然后在右邊的圖層里點(diǎn)擊右鍵，選擇導(dǎo)出為就行了，更進(jìn)一步可以把多個(gè)icon合成一張圖，當(dāng)然這個(gè)都是根據(jù)情況來具體分析了。

前端工程師必備的PS技能——切圖篇
http://m.imooc.com/learn/506

半個(gè)月過去了，想必你也會(huì)了。我在切圖上給你幾個(gè)小建議：
1、先學(xué)習(xí)流式布局；
2、使用馬克鰻；
3、盡量做到不切圖，即頁面所有的元素爭(zhēng)取先使用代碼實(shí)現(xiàn)。

告訴你一秒出圖的方法，psd轉(zhuǎn)png然后直接丟網(wǎng)頁，1s出圖！hhhh
開玩笑 用pxcook，自動(dòng)出把，不然太累了

如果設(shè)計(jì)師的PSD設(shè)計(jì)得比較規(guī)范，可以采用PHOTOSHOP CC的智能切圖，提高切圖效率。

建議：
1.能用代碼寫的，盡量用代碼寫：例如圓點(diǎn)、小三角等，減少靜態(tài)資源數(shù)量
2.icon，盡量使用iconfront

不到萬不得已，盡量不用圖片～～
并不是所有的東西都需要切圖的

用ps的插件cutterman就可以自動(dòng)切圖了