之前做過一陣子介面設計
用工作區域轉就會出現 出現多出神秘1PX的情況 本來要150*150 轉圖出現變成151*151
有時候一張兩張就進PS改 但是一百多張呢!!! 這個情況我去爬了很多文 都說是以拉裡無解的BUG!!!!
(但我就是不信邪 怎麼可能 精準的已拉大神 出這種包!
(ノ゚∀゚)ノ 今天教大家兩種轉檔方式
一種是直接用工作區域 轉出完美像素的檔案
另一種是用切片轉存為網頁裝置(適合轉多尺寸圖檔)
關於切圖切版阿 查過很多資料
然後最重要的最後步驟就是 需要把很多圖示出成不同尺寸
網路上也有許多切圖神器 導入進去就切好最新版的尺寸 但是!神器通常都只搭配一種!
由於工作需要自己切兩種安卓和蘋果的 又不想多轉檔 就直接在以拉裡做 (碎碎念)
用48*48px做一個工作區域 圖示完全貼齊
長寬都顯示為 48px 但轉出圖檔卻發現
疑! 居然變成49X48px 到底是哪裡出了問題呢!
原來是以拉連 工作區域的座標 X,Y 軸的小數點也會進入計算!!!
所以不是BUG 而是illustrator 太精密囉!!
解決方法就是 記得按下工作區域連接圖檔的按鈕 然後把位置座標改成整數 (可以進去編輯框 用鍵盤的↑↓鍵修改 會直接變成整數喔)
記得以後出圖 上面四個鍵入框都必須沒有小數點喔!!
然後 我們就成功得到完美無缺的像素拉!
想當初我轉了超超超超超級多冤枉的檔案 O _ Q
2.用切片轉網頁裝置
這個切圖是依照你選取的框架製作切片
我在鱷魚眼睛和腳拉了兩個有紅色邊框的矩形
把兩個框線選起來 按物件選單 選取切片→製作
可以看到剛剛製作的框框上被標記了切片3&7 其他數字是淺色的代表不是選取到的
也可以在切片選項那裏修改切片
想要的切片確認無誤後 就選取檔案選單 選擇 儲存為網頁及裝置用
進入後會出現 儲存為網頁及裝置用的介面
可以看到剛剛製作鱷魚的眼睛和腳的部分是顯色的 代表有效轉出的區塊
這樣選擇儲存後 設定為選取切片 一次可以轉出兩張圖 選取儲存位置後 會自動內建一個名為 影像的資料夾 (找不到檔案不要緊張喔~)
這個方法的使用小教學就到這裡為止~~~~~~~~~~~~~~ 消化一下
下面還有"同圖檔多種尺寸製作"
這邊是小應用 一般製作圖示等等的按鈕 都會有效果變化 就必須位置一定要一樣 就可以在製作元件的時候 固定好尺寸
然後用無線邊框群組好 將同一系列的圖示置中處理~~~要切圖再用小白箭頭全部選取切片製作
這樣子複製在變色就一定一模模一樣樣 還可以在模擬圖上直接出圖!! 多麼方便阿~~~~
要製作下面的部分 只要在 儲存為網頁及裝置用的介面 這邊的選項設定就可以了!
mdpi螢幕上icon為48*48px 也就是最原始的比例48X1
我們原始圖示就是48*48 (這邊從新切了48X48的外框切片喔~)
在儲存下方有影像尺寸可以調整
在百分比的地方這邊改為150 等於 48X1.5倍 就是安卓規定的第二種尺寸 也可以調整像素去改變!
改完後按套用 可以預覽圖示
下面這張是改為10倍大小 可以看到清晰非常多喔!! 每次修改就另外存一次 雖然也是有點麻煩但我覺得已經很方便囉~
畢竟也可以一次切好所有元件 一次升級他們的尺寸
檔案管理也只用存一個檔就可以轉許多尺寸 空間省了不少
這次的切圖小撇步就到這裡囉~~~
留言列表