今天給大家分享一下我自己在前端工作中的一些切圖小技巧,雖然好的UI會給我們把圖切好,但是他們切的圖不一定百分之百符合我們的需求,所以還是自己動手豐衣足食嘛,看本教程之前希望大家能先看看慕課網的切圖教程 http://www.imooc.com/learn/506 哦。
這里給大家介紹我在實際工作中用的兩種切圖方法,一種是“圖層切圖”,這種切圖方式比較適合切形狀不規則的png格式的小圖標,如企業logo等等,而另外一種是“切片切圖”,這種切圖方式比較適合形狀規則的jpg格式的大圖。
一.圖層切圖:
1.打開你的Photoshop,點擊選擇工具,將右上角的自動選擇勾上,選擇為圖層,為下圖:

2.用鼠標左擊某一個圖層,這里我選擇了psd設計圖中的企業logo新天傑股份。

3.ps幫我們自動定位到了該圖層所在的位置

4.然后右擊圖層12,將圖層轉換為智能對象,至於為什么要轉換為智能對象,大家可以參考這篇文章:http://www.jianshu.com/p/73bee622017f。

5.選擇選框工具,將你要切的圖層圈起來:

6.接着按ctrl+c復制,再按ctrl+n新建,注意背景顏色設置為透明:

7.點擊確定,再按ctrl+v粘貼,我們就得到要切的圖層了:

8.再按ctrl+shift+alt+s保存,記住背景圖存為PNG24格式:

9.存儲到我們要存的文件夾下,就大功告成了,是不是很快,下面我們介紹切片切圖,和慕課網的大同小異。
二。切片切圖:
1.拉輔助線,如下:

2.選擇切片工具,將我們要切的所有圖片區域,用切片工具選中:


3.按住ctrl+alt+shift+s保存,保存的時候注意,保存為JPEG格式,選擇為保存所有用戶切片,這樣子切出來的才是我們想要的圖片:

4.保存之后就完工了,切片切圖的方法很方便,但是注意它只能切出形狀規則的圖片。
作者:筆莘
鏈接:http://www.jianshu.com/p/704a61080f82
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。