根據想提升工作生產力,就別再做這七件事一文中,提到其中一項是「停止作重複的事情,並使它自動化」。
對於設計師來說,「切圖」這件事在常常會覺得是非常浪費時間的一項工作,但卻又是個不得不做的一件事,這時如果有一些有用的小工具,例如:slicy,讓例行工作「切圖」這件事變得非常輕鬆。
slicy 除了幫助我省了一些時間留給創作思考,還意外的還會讓我養成良好的工作習慣。
Slicy 官網:http://macrabbit.com/slicy
AppStore:https://itunes.apple.com/tw/app/slicy/id512533449?l=zh&mt=12
這項軟體操作簡單,唯一的必備條件是使用 Slicy 前需要一個架構乾淨清楚的 photoshop 結構與命名。
依規則命名完成後,後續只要將 PSD 拖進去 Slicy 的 APP 視窗內,就能自動生成切圖元件,並依你指定的位置儲存圖片。之後只要一變更 PSD 內容,切圖元件則會自動更新到你之前所指定儲存的資料夾,省掉非常多的工作量,聽起來是不是很神奇。
來看看使用 slicy 最重要的命名規則吧!
1. 基本標簽 (.png & .jpg ):
在想要輸出的的圖層或群組名稱的字尾打上.png 或 .jpg 的副檔名,slicy 則會依你指定的副檔名輸出此圖層。
沒有打上副檔名的圖層資料夾則不會生成元件。
2. 製作 Mac Icon
方法同上「基本標簽」,只是這裡只要把副檔名改成 .icns 就可以了。
3. 設定切圖尺寸
有時製作 APP 時,會需要固定的尺寸,例如 64 x 64, 48 x 48⋯⋯ 等,Slicy 也可以幫你做出指定的尺寸大小。
有兩種方式:
a. 將欲呈現的尺寸,使用形狀圖層畫出,命名為 @bounds 。生成圖片時,系統不會生成@bounds圖片。(如下圖 red.png)
b. 在資料夾上使用向量遮色片 (如圖 yellow.png) ps. 若在圖層上使用向量遮色片則會出面錯誤 (如下圖 green.png)
4. 製作兩倍尺寸或1/2尺寸的圖層
a. 放大 2 倍:圖檔名稱@2x.png (如下圖黃色星星)
b. 縮小 1/2 倍:圖檔名稱.png+@2x (如下圖紅色星星)
另外這裡有一個貼心的小功能,當原 PSD 檔的星星尺寸為基數(85x81),Slicy 會先自動把尺寸各加上 1px 的空白,讓數字變成偶數時,再去放大or縮小。
最後,最厲害的就是當你按上方的 save 存檔時,Slicy 會詢問是否要自動更新元件,這時候選擇右邊 Automatically。意思是當你之後更改 PSD 時,Slicy 就會自動幫你更新元件,就不用每次修改一次 PSD 還當個傻子慢慢存檔了!
slicy 是不是非常方便呢,雖然他是個付費軟體,但算算省下來的時間,真的覺得非常划算。
官網可以先下載試用哦 http://macrabbit.com/slicy/