前端開發人員也要會的切圖技巧(二)

之前介紹了傳統的切圖技巧,主要用於切多張圖片的時候,但很多時候我們可能只需要切一兩張圖標,如果還用傳統的方法就會很繁瑣,所以這次分享一種導出單個圖標的方法。

沒有psd文件的,我這裏準備了一份,需要的可以去下載

psd練習文件 (和之前的一樣)

http://pan.baidu.com/s/1pL2dwL1

工具:一、二是用photoshop cs6演示的,三是用photoshop cc 2015演示的,一二中的方法兩個版本的軟件都可以實現,三中的方法cc才能實現,所以建議大家下載photoshop cc 2015

沒有photoshop,這裏準備了photoshop cc 2015的安裝包和破解工具,具體安裝和破解方法可以百度一下

http://pan.baidu.com/s/1gfJUEzT

切單個圖標的方法

1.還是之前的文件,這次我們就切一個圖標
這裏寫圖片描述

2.選擇移動工具,並在選項中選中“自動選擇”和“圖層”
這裏寫圖片描述

3.點擊我們要切的圖標,這裏是點擊中間的筆,然後右邊的圖層面板就會自動聚焦到對應的圖層,通過點擊左邊的小眼睛來確定是不是我們想要的圖層。
這裏寫圖片描述

4.這裏我們找到了我們需要的圖標有兩部分組成,裏面的筆和外面的圓,兩個圖層被放在了一個組裏面
這裏寫圖片描述

5.在icon文件上右鍵,選擇“轉換爲智能對象”
這裏寫圖片描述

6.然後,我們會發現,兩個圖層合併爲了一個圖層,這個就是我們需要的圖標
這裏寫圖片描述

7.在icon圖層上右鍵,選擇“編輯內容”,出現提示框的話直接點擊“確定”即可
這裏寫圖片描述

8.然後,我們的圖標就被單獨提取出來了
這裏寫圖片描述

9.選擇“文件”=》“存儲爲”,將我們的圖標保存爲PNG格式就大功告成了!
這裏寫圖片描述

這裏寫圖片描述

這裏寫圖片描述


photoshop cc之後添加了很多高級的切圖方法,下一節給大家分享幾個和前端相關的自動化切圖方式

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章