今天給你們分享一下我本身在前端工做中的一些切圖小技巧,雖然好的UI會給咱們把圖切好,可是他們切的圖不必定百分之百符合咱們的需求,因此仍是本身動手豐衣足食嘛,看本教程以前但願你們能先看看慕課網的切圖教程 http://www.imooc.com/learn/506 哦。前端
這裏給你們介紹我在實際工做中用的兩種切圖方法,一種是「圖層切圖」,這種切圖方式比較適合切形狀不規則的png格式的小圖標,如企業logo等等,而另一種是「切片切圖」,這種切圖方式比較適合形狀規則的jpg格式的大圖。工具
一.圖層切圖:設計
1.打開你的Photoshop,點擊選擇工具,將右上角的自動選擇勾上,選擇爲圖層,爲下圖: 3d
2.用鼠標左擊某一個圖層,這裏我選擇了psd設計圖中的企業logo新天傑股份。對象
3.ps幫咱們自動定位到了該圖層所在的位置blog
4.而後右擊圖層12,將圖層轉換爲智能對象,至於爲何要轉換爲智能對象,你們能夠參考這篇文章:http://www.jianshu.com/p/73bee622017f。教程
5.選擇選框工具,將你要切的圖層圈起來:圖片
6.接着按ctrl+c複製,再按ctrl+n新建,注意背景顏色設置爲透明:ip
7.點擊肯定,再按ctrl+v粘貼,咱們就獲得要切的圖層了:io
8.再按ctrl+shift+alt+s保存,記住背景圖存爲PNG24格式:
9.存儲到咱們要存的文件夾下,就大功告成了,是否是很快,下面咱們介紹切片切圖,和慕課網的大同小異。
二。切片切圖:
1.拉輔助線,以下:
2.選擇切片工具,將咱們要切的全部圖片區域,用切片工具選中:
3.按住ctrl+alt+shift+s保存,保存的時候注意,保存爲JPEG格式,選擇爲保存全部用戶切片,這樣子切出來的纔是咱們想要的圖片:
4.保存以後就完工了,切片切圖的方法很方便,可是注意它只能切出形狀規則的圖片。