前端切圖學習--每一個圖層都能很精細的切出來

自從換了新工做，切圖成了個人新問題。由於不是專業的美工， 對photoshop的操做也只限於基本操做， 之前雖然也有遇到不切圖的UI, 可是之前作的都是電商扁平化網站， 圖片都很簡單，差很少都是方方正正，即便有一兩個像素不對， 也沒有問題，用css寫對就行。 而後如今從事的是遊戲公司的網站， 並且美術不負責切圖， 就只能本身動手了， 第一次拿到多邊形的時候，我傻眼了。不知道怎麼下手。 第一次的時候仍是找前同事的UI 幫忙的。可是不能每次都找別人幫忙啊， 第二次的時候就本身動手了。切圖都花了1天多（慚愧，羞愧，懊惱。。。），由於這些， 沒被產品少投訴。

 

言歸正傳， 因爲被投訴效率低， 第一次項目完了以後， 我就開始找一些能夠提升效率的方法。  首先，切圖是最重要的第一步。 偶然在慕課網看到切圖的工具， 真是及時雨呀， 因而我認認真真把視頻看了兩遍，還一邊看一邊操做，真是好用， 下面把詳細步驟貼出來。（下面我拿御龍三國手遊官網來進行步驟舉例）

 

1. 下週photoshopCC 2014, 安裝， 至因而否破解， 你本身決定。

 

2.打開文件-------> 腳本---------> 將圖層導出到文件。

 

 

 

3. 設置下面的設置， 如圖所示。 若是是想要jpg等其餘文件， 能夠在文件類型那裏設計

 

 

4.點擊運行。 大功告成。 完成的時間， 由文件裏面的圖層以及電腦的配置決定。 個人電腦裝了固態硬盤， 內存8G, 導出一個很是多的圖層的文件， 花了5-6個小時。 也許你會說這個效率尚未手工的高，是的，我也有同感，可是對於ps的小白， 這兒能夠很精確的導出想要的圖層文件， 真是太好了。 只要晚上把電腦開着， 就能夠安心回家睡覺了， 早上來的時候， 一切都ok了。

 

 

5. 固然，這樣子是不行的， 後來我想了幾個辦法。 把圖層分組， 有些美工已經把這兒事情作了。 而後把哪些須要的Ctrl+E合併成一個圖層，還有， 你想要的也合併爲一個圖層， 這樣psd裏的圖層就減小了。這個方法很是有效， 我試了一下， 10幾分鐘就獲得了那些我想要的圖片。

 

 

7. 固然還有更好的方法。這也是在慕課網的視頻上學的。 ctrl+K出來首選項（編輯-->首選項），而後設置增效文具。 

 

8. 再設置 文件----->生成---->圖像資源。 （這個設置了下次才生效，設置不上就重啓ps）

 

 

 

9.設置psd裏面圖層文件名稱。到psd痛目錄下面，生成了一個 源文件-asset文件， 打開會有驚喜喲。 是否是分分鐘解決了難題。

 

 

10.總結； 沒事就到慕課網去看看， 怎麼感受像打廣告呢。 算了， 總結就是沒事的時候多在網上多逛逛， 就會發現個人這個經驗。

 

 

 

 

11. 添加一個重要的線索。 由於手機上，若是原圖大小，可能已經會出現鋸齒， 因此最好的作一個2倍大小的文件。 表達式這樣子寫： 200% 源圖層名稱 @2x.jpg。

 

 

12.生成不一樣質量 源圖層.jpg8 生成質量問80% 質量的jpg文件在assets