前端實戰系列之---快速切圖的方法

我的學習 ：參考連接：https://www.cnblogs.com/w-wanglei/p/5579270.html

慕課網的切圖教程 http://www.imooc.com/learn/506

切圖方法分類

PhotoShop從CS版本演變到如今的CC版本，切圖功能發生了比較大的變化，咱們能夠把PhotoShop CS版本時的切圖功能稱爲傳統切圖，而從PhotoShop CC版本開始PS提出了精準切圖。所謂傳統切圖就是切圖人員基本上都是本身分割圖層切圖，傳統切圖又分爲全手工切圖和參考線切圖；如今CC版本提出的精準切圖，切圖人員能夠依賴計算機把圖層對象精確的切割出來，這樣切割出來的圖層確定比傳統切圖切出來的精準度高。另外一方面，CC版本可經過腳本執行全自動切圖，這樣徹底解放了切圖人員的雙手。

    整體來講，切圖方法分爲：傳統切圖（手動切圖、參考線切圖）、精準切圖。

PS以前的準備工做

   1.關閉沒必要要的窗口。打開PhotoShop，在開始P圖或者切圖以前，一般咱們須要關閉沒必要要的窗口，僅僅保留在切圖過程當中用到的窗口。窗口的打開或關閉均可經過「窗口」菜單控制。通常網頁設計須要用到的幾個窗口是：信息、字符、圖層、歷史記錄。

2.設置面板信息。有些時候咱們在移動鼠標或者選擇區域時，想知道鼠標位置或者選擇區域的大小。選中「信息」窗口，打開「面板選項…」。

  設置面板的第一顏色信息、第二顏色信息的模式爲「RGB」顏色，設置鼠標座標的標尺單位爲「像素」，勾選「文檔尺寸」，這些設置後面都會用到。設置完成後，咱們用「選擇工具」在工做區選擇一個區域，信息窗口中就顯示了鼠標的座標、區域的長和寬、以及RGB顏色

  3.設置單位與標尺。選擇菜單「編輯」->「首選項」->「單位與標尺」，把標尺、文字單位都改成像素。

 

  4.智能參考線和標尺。打開「視圖」->「顯示」 菜單，勾選「智能參考線」。選中「視圖」菜單，勾選「標尺」(ctr+R)。

    5.保存工做區。界面菜單設置後，咱們確定不但願第二次打開還得從新設置。打開菜單」窗口「->」工做區「->」新建工做區「，新建一個工做區域。下次再設計切圖時可直接使用新建的工做區。

 

 

經常使用工具

移動工具(快捷鍵v)

 

1.選擇工具(快捷鍵M)。在工具欄中選中「選擇工具」，在圖層上選擇一個區域，而後右鍵點擊選中區域，選擇」填充…「,彈出填充窗口，咱們可使用前景色、背景色或者其餘顏色填充選擇區域

選擇工具包含有矩形、橢圓、單行、單列選取工具。選擇了「選擇區域」工具後，上面菜單多了幾個按鈕，分別表示區域疊加、減消、區域交集。這幾個按鈕實現不一樣的選取功能，均可以使用快捷鍵Shift(疊加)和Alt鍵(減消)。若是是畫橢圓和矩形，按住shift鍵時可畫正方形和圓。但必須先放開鼠標左鍵，再放shift鍵才能畫成功。

2.裁剪工具。裁剪工具用於剪切出僅僅咱們須要的內容。在使用其餘的區域選擇工具後，把菜單切換到裁剪工具，可直接裁剪以前選擇的區域。

 

切圖方法分類

   PhotoShop從CS版本演變到如今的CC版本，切圖功能發生了比較大的變化，咱們能夠把PhotoShop CS版本時的切圖功能稱爲傳統切圖，而從PhotoShop CC版本開始PS提出了精準切圖。所謂傳統切圖就是切圖人員基本上都是本身分割圖層切圖，傳統切圖又分爲全手工切圖和參考線切圖；如今CC版本提出的精準切圖，切圖人員能夠依賴計算機把圖層對象精確的切割出來，這樣切割出來的圖層確定比傳統切圖切出來的精準度高。另外一方面，CC版本可經過腳本執行全自動切圖，這樣徹底解放了切圖人員的雙手。

    整體來講，切圖方法分爲：傳統切圖（手動切圖、參考線切圖）、精準切圖。

其實剪切工具裏邊一共爲咱們提供了四個工具。分別爲「裁剪工具」、「透視裁剪工具」、「切片工具」、「切片選擇工具」。

傳統切圖