自動(dòng)切圖工具「Slicy」Mac OS版(Layer Cake),真正解放設(shè)計(jì)師的神器!為切圖黯然銷魂的設(shè)計(jì)師們必備利器
如何使用 Slicy 切圖?
1. PS 圖層依規(guī)則命名。
2. 把檔案丟進(jìn) Slicy 里。
3. 好了。
夠簡單無腦了吧?
圖層命名方式
為了要無腦切圖,得稍微記一下 slicy 圖層命名的格式,官網(wǎng)提供的 Examples 里面有 5 個(gè)文件夾。
Basic Tagging 基本標(biāo)簽
圖層或組名的字尾打上.png就好了。
Explicit Sizing 設(shè)定切圖尺寸
如果切圖為特定尺寸,可以用這3種方式設(shè)定:
1. 使用矩型工具(形狀圖層)畫出欲裁切的尺寸,將圖層名稱設(shè)為「@bounds」。(輸出切圖時(shí)不會(huì)看到這個(gè)圖層。)
2. 方型遮色片。
3. 向量遮色片。
我愛用第一種方式,把目標(biāo)圖層和 @bounds 放在同個(gè)群組里,組名改成.png,未來維護(hù)比較方便。
Mac Icon 輸出.ico
做 MAC 的icon用,圖層名稱字尾設(shè)成.ico就好了。
Magic Retina – Auto@1x 做2x圖,自動(dòng)輸出1x
這是我最愛 Slicy 的原因:做 @2x 的 PSD 檔、自動(dòng)輸出 1x 切圖。只要在圖層名稱字尾加上「@2x.png」就好。
做大圖縮小就是會(huì)遇到 101x139px的 @2x 圖要怎么縮成 1x 的問題。Slicy 會(huì)自動(dòng)幫你把 @2x 圖加上1px的空白、讓尺寸變成偶數(shù)后再縮小輸出 1x 檔。比如 101x139px 會(huì)變成 102x140px 和 51x70px。如果你對(duì)圖檔精致度沒有嚴(yán)格到以 1px 為單位、縮小后邊緣有點(diǎn)糊也無所謂的話,這功能真的超歡樂的。
Magic Retina – Auto@2x 做1x圖檔,自動(dòng)輸出2x
做1x圖檔,自動(dòng)輸出2x,只要在圖層名稱字尾加上「.png+@2x」就好。記得要做向量圖啊、不然放大成 @2x 還是會(huì)糊掉的。
Magic Retina – No Auto@1x 做2x圖、不輸出1x
一樣把字尾都設(shè)成 @2x.png,在所有圖層的最上方新增一個(gè)空白圖層命名為「lc-auto-1x = off」。
其它
我很喜歡 Slicy 的icon設(shè)計(jì),原本這款 App 剛上架的時(shí)候叫「Layer Cake」,PS圖層很多、取名叫千層糕也很合理,之后改名為 Slicy。在 google 搜尋上幫了大忙,我想找相關(guān)數(shù)據(jù)時(shí)不會(huì)一直出現(xiàn)食物。(希望Sketch也換個(gè)名稱,這種大眾常用名詞很難搜到他家的東西。)
Slicy 雖說要 890 元(上架以來好像沒有打過折扣),以省下來的時(shí)間來講其實(shí)很便宜,而且開發(fā)商是知名公司 MacRabbit 不會(huì)變成 App 孤兒。(提 Espresso RD 就知道了吧?)原本切圖要另外拉框搞很久、現(xiàn)在單個(gè) PSD 檔不到半小時(shí)就能搞定,加上來回修改重出 Slicy 幫忙省下的心力…這 app 就算賣 2 倍價(jià)我也會(huì)入手,輕松方便太多了啊!