• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】詳解省時省力的PS切圖神器SLICY下載




    詳解省時省力的PS切圖神器SLICY下載

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自優設的設計理論類文章,寫教學的作者是佚名,感謝佚名提供設計理論的實作教學。

    教學大綱:

    今天介紹的這款神器,作者這樣描述它:把整個PSD扔進去,結束。效率由此可見。究竟有多牛,讓這位台灣的設計師妹子給你介紹下。


    設計理論教學開始

    今天介紹的這款神器,作者這樣描述它:把整個PSD扔進去,結束。效率由此可見。究竟有多牛,讓這位台灣的設計師妹子給你介紹下。

    Akane Lee :Slicy 是我測過幾種輔助切圖工具后又回來使用的神器。「把整個 PSD 扔進去,結束。」簡潔利落不嗦。我愛它的程度已經到了沒有它我就不會切圖了(哈哈)。

    Slicy 官網:http://macrabbit.com/slicy
    Examples:http://macrabbit.com/slicy/help
    App Store:https://itunes.apple.com/tw/app/slicy/id512533449

    官網有試用版可以先下載來用看看,覺得適合自己再去 App Store 花錢買。記得順手下載 Examples,照着跑一遍就會操作了。

    如何使用 Slicy 切圖?

    詳解省時省力的PS切圖神器SLICY下載

    1. PS 圖層依規則命名。
    2. 把檔案丟進 Slicy 里。
    3. 好了。

    夠簡單無腦了吧?

    圖層命名方式

    為了要無腦切圖,得稍微記一下 slicy 圖層命名的格式,官網提供的 Examples 裡面有 5 個文件夾。

    Basic Tagging 基本標籤

    詳解省時省力的PS切圖神器SLICY下載

    圖層或組名的字尾打上.png就好了。

    Explicit Sizing 設定切圖尺寸

    詳解省時省力的PS切圖神器SLICY下載

    如果切圖為特定尺寸,可以用這3種方式設定:

    1. 使用矩型工具(形狀圖層)畫出欲裁切的尺寸,將圖層名稱設為「@bounds」。(輸出切圖時不會看到這個圖層。)
    2. 方型遮色片。
    3. 向量遮色片。

    我愛用第一種方式,把目標圖層和 @bounds 放在同個群組裡,組名改成.png,未來維護比較方便。

    Mac Icon 輸出.ico

    詳解省時省力的PS切圖神器SLICY下載

    做 MAC 的icon用,圖層名稱字尾設成.ico就好了。

    Magic Retina – [email protected] 做2x圖,自動輸出1x

    詳解省時省力的PS切圖神器SLICY下載

    這是我最愛 Slicy 的原因:做 @2x 的 PSD 檔、自動輸出 1x 切圖。只要在圖層名稱字尾加上「@2x.png」就好。

    做大圖縮小就是會遇到 101x139px的 @2x 圖要怎麼縮成 1x 的問題。Slicy 會自動幫你把 @2x 圖加上1px的空白、讓尺寸變成偶數后再縮小輸出 1x n。比如 101x139px 會變成 102x140px 和 51x70px。如果你對圖檔精緻度沒有嚴格到以 1px 為單位、縮小後邊緣有點糊也無所謂的話,這功能真的超歡樂的。

    Magic Retina – [email protected] 做1x圖檔,自動輸出2x

    詳解省時省力的PS切圖神器SLICY下載

    做1x圖檔,自動輸出2x,只要在圖層名稱字尾加上「[email protected]」就好。記得要做向量圖啊、不然放大成 @2x 還是會糊掉的。

    Magic Retina – No [email protected] 做2x圖、不輸出1x

    詳解省時省力的PS切圖神器SLICY下載

    一樣把字尾都設成 @2x.png,在所有圖層的最上方新增一個空白圖層命名為「lc-auto-1x = off」。

    其它

    詳解省時省力的PS切圖神器SLICY下載

    我很喜歡 Slicy 的icon設計,原本這款 App 剛上架的時候叫「Layer Cake」,PS圖層很多、取名叫千層糕也很合理,之後改名為 Slicy。在 google 搜尋上幫了大忙,我想找相關數據時不會一直出現食物。(希望Sketch也換個名稱,這種大眾常用名詞很難搜到他家的東西。)

    Slicy 雖說要 890 元(上架以來好像沒有打過折扣),以省下來的時間來講其實很便宜,而且開發商是知名公司 MacRabbit 不會變成 App 孤兒。(提 Espresso RD 就知道了吧?)原本切圖要另外拉框搞很久、現在單個 PSD 檔不到半小時就能搞定,加上來回修改重出 Slicy 幫忙省下的心力…這 app 就算賣 2 倍價我也會入手,輕鬆方便太多了啊!

    — —

    文章永久連結為: 詳解省時省力的PS切圖神器SLICY下載