手把手教你使用PS切圖 分類： Android IOS 2014-11-30 21:25 1468人閱讀 評論(1) 收藏

在IT公司中通常都是一個UI設計師對應多個程序員，因此有時候UI設計師有點忙不過來，可是咱們也不能幹等着，因此這時候就須要本身動手，豐衣足食了，下面就來介紹一下如何使用PS進行切圖，不過Android中還有.9圖片的概念，因此這裏還須要介紹一下如何製做.9圖片，關於.9圖片的知識轉戰：http://blog.csdn.net/jiangwei0910410003/article/details/16986079

這裏就以一張demo.psd圖片做爲案例：

這裏經過三個例子來進行演示

第1、把中間的那個手機切出來

咱們用PS打開這個psd圖片：

咱們看到最重要的兩個菜單：圖層和歷史記錄

圖層在PS中的概念很簡單，打個比方：畫布就至關因而畫板，圖層就是一張畫紙，畫紙能夠相互疊加的。因此這裏看到會有不少張圖層。

下面咱們就來看一下如何將中間的手機切出來

首先須要勾選上自動選擇圖層，選中Layer

否則，後面點擊一個圖層以後是沒有效果的

點擊手機，這時候在圖層菜單中就能夠看到有一個圖層被選中了，這時候，右鍵那個選中的圖層的左邊小眼睛，而後選擇顯示/隱藏全部其餘圖層：

這時候手機就被單獨選出來了，而後按住Ctrl鍵，單擊選中的圖層，記住是我上面標註的紅色區域，不要點擊其餘地方去了。

這時候手機就被選中了，選中的狀態就是手機周邊有不少虛線在閃爍，這裏不方便就不截圖了。

而後按住組合鍵：Alt+I+P

就把圖層變成和手機同樣的大小了，這時候，在使用組合鍵Ctrl+D，取消選中。

而後保存：

下一步：

選擇PNG-24

這樣，手機的png圖片就切好了，簡單吧。

咱們在這個操做過程當中，可能會有誤操做，這時候須要用到歷史記錄菜單，點擊一下紅色區域就能夠了。

第2、切出.9圖片

Android中有.9圖片的概念，因此這裏須要說一下，如何製做.9圖片，這裏咱們將按鈕切成.9圖片：

咱們可使用Ctrl+(鍵盤上的+/-進行圖片的縮放)

咱們將上面的放棄按鈕背景圖切成.9的：

首先仍是選中那個按鈕圖層：

而後仍是右鍵那個小眼睛，隱藏其餘圖層：

而後咱們須要新建一個圖層(這部和上面的不同了)：

點擊圖層菜單欄下方的那個紅色標記的按鈕，新建了一個圖層14

而後按住Ctrl，再次選中那個按鈕圖層，右鍵選擇合併圖層

而後操做就和上面的同樣了，按住Ctrl，單擊紅色區域，選中那個按鈕

而後按住Alt+I+P，將按鈕圖層變成和按鈕同樣大小：

這時候可使用Ctrl+(+/-)放大和縮小圖層，在製做.9圖片的時候，須要將中間的一部分刪除，選擇左側欄中的選擇工具，而後選擇圖片的中間部分(關於這個選取的範圍大小沒有限制的，只有一點須要注意，那就是不要超過圖片的四個角就能夠了)，選中以後，點擊鍵盤的delete鍵，就刪除中間的內容了

而後選擇左邊的部分，同時選擇左側欄中的鼠標箭頭的菜單，這時候咱們就能夠移動左邊的部分，讓他和右邊部份內容完美的接縫，千萬不能重合了

移動好了以後，按住Ctrl鍵，單擊圖層，選中圖片：

而後按住Alt+I+P,選出圖片，咱們須要將圖層的上下左右增長一個像素值的邊距，Ctrl+Alt+C調出設置畫布大小菜單，記得單位必定要是像素，咱們須要將寬度加2像素，高度也要加2像素。

而後咱們放大圖層，使用套鎖工具，在圖層的上邊拉出一塊(高度必須是1像素)的區域，寬度隨意，可是不能超過四個角便可。而後按住Alt+Delete進行上色

在左側工具欄的下方有一個選色區域，一個是前景色，一個是背景色

Alt+Delete設置前景色

Ctrl+Delete設置背景色

這裏須要上黑色，因此是Alt+Delete

(.9圖片通常是操做圖片的上邊和左邊，並且必須是黑色的)

一樣的在左邊進行一次操做

這樣，一張.9圖片就完成了，保存爲PNG-24格式的，當咱們在使用的時候，只須要將其後綴名改爲.9格式的便可。

第3、取文字的大小和顏色

取出下面文字的大小和顏色，一樣咱們先選中他們，這裏很簡單，只要雙擊字體圖層，文本就變成可編輯狀態了

咱們在頂部的菜單欄中看到文本的字體大小和顏色了

點擊那個色值區域就能夠看到顏色的值了：

到這裏，切圖部分的內容就介紹完了，咱們在開發的過程當中其實就是這三種狀況，因此掌握這三種技術就能夠了。其餘的不必深刻研究了,由於擔憂這裏的圖文方式說的有點不清楚，這裏我錄製了一個視頻，下載地址：http://pan.baidu.com/s/1kTGDyZH