上次介紹完基本的按鈕圖像製作後~接下來要告訴大家如何將圖像裁切輸出的方法

這次的教學也是超簡單的啦~^O^

為了避免大家一不清楚這有何目的和用處~特地在網路上找了一張圖做簡單的說明

例如手機的電話按鍵的整體UI設計完成後將圖像分解當作物件製作輸出~以方便之後與程式指令做組合

假設圖中的綠色是按下後的ON狀態的顯示~其他的按鈕可能也需要另做ON的圖像喔!

當然不一定是綠色~這要看設計者如何設計了!^^

App-Screens拷貝.jpg  

圖一

1.首先連續上次完成的按鈕圖檔當範例~來做圖像的裁切

按住Ctrl不放點選尺寸範圍圖層的縮小顯示圖~這時候的白色手指游標會變成多加了虛線方框的手指游標

這時候就會發現此圖層的所有的物件出現被選取的虛線顯示

2.到影像的地方選擇裁切

3.這時候圖像整個被裁切(包括所有的圖層)~也就是我們之前按鈕設定的大小喔!

請關閉尺寸範圍圖層和背景圖的顯示~只留下需要的圖層顯示

4.接下來要進入圖像的輸出~這時候按鈕的周圍為透明色

進入編輯~選擇儲存為網頁與裝置用就會跳出一個顯示視窗

2-01.jpg  

一般網頁使用的圖像物件都是配合程式指令切換或顯示

這些物件有時候也會像圖層一樣堆疊組合

這時候會依照當初的設定和需求來決定是使用PNG,JPG,GIF格式來輸出

通常使用圖像物件背景透明的時候都是使用PNG或是GIF格式

且以PNGGIF轉檔的顏色都自動轉換為256色範圍內~會比原來設計的圖像顏色還要少

雖然以經比原來容量少一些了~但通常顏色越多容量越大

這時候傳輸或是指令就會因為容量過重而遲鈍或是無法上傳

有時候會接到指示希望圖像的容量要控制在幾KB以內

所以就為大家介紹怎樣做圖像的減色(也就是減少圖像的容量)

 

圖二

1.跳出儲存為網頁與裝置用的新視窗~選擇最簡單的二連式顯示

左邊為原稿顯示~右邊為輸出調整的顯示

這個二連式分隔的目地是一邊編輯右邊的圖像~一邊檢視是否和左邊原稿差異太大

2.目前原稿的容量大小(PSD檔因為有圖層的關係會比較大)

以目前以PNG-8格式存檔的話預估的容量大小

3.選擇要以什麼格式存檔~這次先以PNG-8的格式為範例

(PNG-8PNG-24的差異為PNG-24可以顯示連接透明邊境的半透明的dot繪點~顏色數量跟原幾乎一樣且不會在限制256色但是無法以photoshop來做減色所以容量大)

4.色表~目前為最大顯示的256

5.選擇顏色顯示的選取方式

(為了收納在256色表內或指定色內~根據所選的選項會改變電腦的自動選色)

通常會選擇比較接近原圖的感應式或是選擇性的選項

顏色的混色分佈也就類似以顏色產生各類質感~在這裡也選擇與原稿最相近無混色

(畢竟在這個環節的目的只是要減少容量~越接近原稿的狀態越好)

6.透明需打勾~不然輸出後的圖像裡透明的地方會變成不透明的白色

2-02.jpg  

 

圖三

 1.開始做減色動作~這裡就要看各位自己調整的功力啦^^()

 可以開始用滴管工具先選取重要的顏色~被選取顏色的小方格會出現白框顯示

 2.這時候點取鎖定選取的顏色以避免掉色

 3.被鎖定的小方格右下角就會出現白點以表示這些顏色在減色後不會被吃掉

 (通常顏色分部最多的會出現在上面兩三排~所以鎖定的幾乎都是前排的顏色)

 4.減少至64(通常既定選項都為倍數~有時候也可以手動為63或是60)

 色表的方格也會自動縮減為64~剛剛鎖定的顏色都還保留著喔^^

 減色後要記得檢視與原稿的差異~差異太大的話就是選取的顏色有問題或是減色過度喔!^^”

 5.檢視容量從5.726KB變為1.932KB^^

 (萬一來了指示希望可以縮減到1.5KB以內就必須再往下64色以下做調整喔!)

 然後按確定存檔…..以為減色就這樣就結束了嗎??~還差一步喔^^”

2-03.jpg  

圖四

1.叫出剛剛存檔的PNG檔案~這時候圖層顯示為索引

這時候無法做編輯動作~所以選擇:影像->模式->RGB色彩

(如果是GIF格式的話~也需做這個動作才能編輯)

2.新增圖層且塗滿顏色置於圖層1下方(最好是深色才能看到雜點)

為什麼會出現雜點呢?因為PNG或是GIF的檔案無法存取半透明的dot

所以半透明的dot繪點會自動與白色一起結合轉為不透明的模式

看起來就像雜點而需要再次整理

(大家有發現GIF格式的動圖不規則的邊框都是鋸齒的感覺無法做圓滑處理~一樣的道理喔!)

3.用滴管吸取圖像的顏色(因為以經減色過了盡量用上面既有的顏色)

且善用鉛筆工具或是橡皮擦工具(記得改為鉛筆模式~不透明:100)

這裡就看自己修整的手腕了^^

4修整後雜點消失~也沒有半透明dot繪點的存在~關閉扶助用圖層2的顯示

一樣也是再次以儲存為網頁裝置用來檢視和存取

2-04.jpg  

 

圖五

 1.再次檢視圖片以及容量有沒有達到標準就可以按確定存檔就結束了喔^^

 可以看得出來因為剛剛修整修掉一些雜色

 色表的顏色也比剛剛少了幾個顏色~容量也少了一些

 (在這裡只把ON圖像做範例其他如OFF圖像也是一樣用該方式處理喔!)

2-05.jpg  

圖六

最後一項檢視~把剛剛最後確定的圖像按右鍵叫出內容

查看一下容量大小~雖然儲存的時候為1.89KB

但事實際上整體容量會多一些~也就括弧中的1.938KB

如果指示為容量大小不得超過1.9KB的話~那這張圖的容量就超過一些了^^”

 所以必須在重新剛剛的步驟減色做調整

或是在存檔前先預留一些容量增加的空間(例如減色到1.85KB左右)

2-06.jpg  

 

不知道看到這裡大家會不會看得霧煞煞的~^^”還是希望大家喜歡喔!

有機會再跟大家簡單介紹一下整體概念喔!

 

 

 

 

 

 

 

創作者介紹

SAFE HOUSE T

SAFE HOUSE T 發表在 痞客邦 PIXNET 留言(0) 人氣()