1. 程式人生 > >前端開發人員也要會的切圖技巧(二)

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

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

沒有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之後添加了很多高階的切圖方法,下一節給大家分享幾個和前端相關的自動化切圖方式