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


自從換了新工作,切圖成了我的新問題。因為不是專業的美工, 對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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM