之前做過一陣子介面設計 
用工作區域轉就會出現 出現多出神秘1PX的情況 本來要150*150 轉圖出現變成151*151 

有時候一張兩張就進PS改 但是一百多張呢!!! 這個情況我去爬了很多文 都說是以拉裡無解的BUG!!!!
39.png
(但我就是不信邪 怎麼可能 精準的已拉大神 出這種包!

(ノ゚∀゚)ノ  今天教大家兩種轉檔方式

一種是直接用工作區域 轉出完美像素的檔案  

 另一種是用切片轉存為網頁裝置(適合轉多尺寸圖檔)
 

關於切圖切版阿 查過很多資料  

然後最重要的最後步驟就是 需要把很多圖示出成不同尺寸

網路上也有許多切圖神器 導入進去就切好最新版的尺寸 但是!神器通常都只搭配一種! 

由於工作需要自己切兩種安卓和蘋果的  又不想多轉檔 就直接在以拉裡做 (碎碎念)
 

範例就是安卓APP的主ICON
mdpi螢幕上icon為48*48px 也就是最原始的比例48X1倍
 
1.用工作區域
用48*48px做一個工作區域 圖示完全貼齊

 

 

2017-02-14_132627.png

長寬都顯示為 48px 但轉出圖檔卻發現
疑! 居然變成49X48px 到底是哪裡出了問題呢!

2017-02-14_133039.png
原來是以拉連 工作區域的座標 X,Y 軸的小數點也會進入計算!!!
所以不是BUG 而是illustrator 太精密囉!!
解決方法就是 記得按下工作區域連接圖檔的按鈕 然後把位置座標改成整數 (可以進去編輯框 用鍵盤的↑↓鍵修改  會直接變成整數喔)
記得以後出圖 上面四個鍵入框都必須沒有小數點喔!!

2017-02-14_151632.png
然後 我們就成功得到完美無缺的像素拉!

2017-02-14_133205.png

想當初我轉了超超超超超級多冤枉的檔案 O _ Q

07.png

 

 

2.用切片轉網頁裝置

這個切圖是依照你選取的框架製作切片
我在鱷魚眼睛和腳拉了兩個有紅色邊框的矩形
2017-02-14_155057.png

2017-02-14_155424.png
把兩個框線選起來 按物件選單 選取切片→製作

2017-02-14_155505.png

可以看到剛剛製作的框框上被標記了切片3&7 其他數字是淺色的代表不是選取到的

也可以在切片選項那裏修改切片

想要的切片確認無誤後 就選取檔案選單 選擇 儲存為網頁及裝置用

2017-02-14_155528.png

進入後會出現 儲存為網頁及裝置用的介面
可以看到剛剛製作鱷魚的眼睛和腳的部分是顯色的 代表有效轉出的區塊2017-02-14_160100.png
這樣選擇儲存後 設定為選取切片 一次可以轉出兩張圖 選取儲存位置後 會自動內建一個名為 影像的資料夾 (找不到檔案不要緊張喔~)
2017-02-14_160125.png

這個方法的使用小教學就到這裡為止~~~~~~~~~~~~~~  消化一下

16.png
下面還有"同圖檔多種尺寸製作"

這邊是小應用  一般製作圖示等等的按鈕 都會有效果變化 就必須位置一定要一樣 就可以在製作元件的時候 固定好尺寸
然後用無線邊框群組好 將同一系列的圖示置中處理~~~要切圖再用小白箭頭全部選取切片製作
這樣子複製在變色就一定一模模一樣樣 還可以在模擬圖上直接出圖!! 多麼方便阿~~~~
2017-02-14_165124.png

 

要製作下面的部分  只要在 儲存為網頁及裝置用的介面 這邊的選項設定就可以了!

mdpi螢幕上icon為48*48px 也就是最原始的比例48X1

hdpi    = 48x1.5=72px
xhdpi  = 48x2=96px
xxdpi  = 48x3=144px
xxxdpi= 48x4=192px

我們原始圖示就是48*48  (這邊從新切了48X48的外框切片喔~)
在儲存下方有影像尺寸可以調整

2017-02-14_171005.png
在百分比的地方這邊改為150 等於 48X1.5倍 就是安卓規定的第二種尺寸 也可以調整像素去改變!
改完後按套用 可以預覽圖示

2017-02-14_171028.png
下面這張是改為10倍大小 可以看到清晰非常多喔!! 每次修改就另外存一次 雖然也是有點麻煩但我覺得已經很方便囉~
畢竟也可以一次切好所有元件 一次升級他們的尺寸
檔案管理也只用存一個檔就可以轉許多尺寸 空間省了不少 
2017-02-14_171114.png
這次的切圖小撇步就到這裡囉~~~

01.png

arrow
arrow

    貝殼裡-貝Bei 發表在 痞客邦 留言(4) 人氣()