我是前端小白，請問各位前端是如何根據(jù)psd文件裁剪出想要的圖片，希望傳授點經(jīng)驗

PS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

用ps的插件cutterman就可以自動切圖了