【 設計理論】詳細解析Mac下的切圖神器Slicy使用說明

詳細解析Mac下的切圖神器Slicy使用說明

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

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

教學大綱:

切圖作為設計師出圖的最後一步,向來都是令人頭疼的工作,其工作內容繁瑣枯燥,但又必不可少。同時,作為IOS開發者,我們往往需要為程序準備兩套圖片資源,以應對低清屏和Retina屏的不同需求,隨之而來的是切圖工作量的成倍增加。今天為大家推薦一款Mac下的切


設計理論教學開始

切圖作為設計師出圖的最後一步,向來都是令人頭疼的工作,其工作內容繁瑣枯燥,但又必不可少。同時,作為IOS開發者,我們往往需要為程序準備兩套圖片資源,以應對低清屏和Retina屏的不同需求,隨之而來的是切圖工作量的成倍增加。今天為大家推薦一款Mac下的切圖小工具——Slicy,以上煩惱皆可得到妥善的解決。

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

軟件特性:

  1. 切圖方便,簡單的拖放即可,傻瓜式操作2.
  2. 培養為圖片資源合理命名的好習慣
  3. 自動生成@2x兩套圖片,極大方便IOS開發者

二、軟件使用

1、PSD文件的預處理

這一步可以由設計師來處理,不過個人推薦程序員親自完成這一步驟,因為這裡涉及到圖片的命名,我們自己來對圖片進行命名可以更好的使之符合整個項目的命名規則,方便在項目中對對應圖片資源進行調用和管理。

首先用PhotoShop打開設計師給你的PSD文件,如下圖:

詳細解析Mac下的切圖神器Slicy使用說明

圖中的綠色狀態圖標即為本次需要切出的素材圖片

在右側分組面板中,選中對應的組”Statues”

詳細解析Mac下的切圖神器Slicy使用說明

對”Statues”組的組名進行重命名,將其重命名為”[email protected]”,全部完成後保存PSD文件即可。

詳細解析Mac下的切圖神器Slicy使用說明

這裡要注意別忘了@2x後面的”.png”。同時,這裡的命名即為圖片素材被切出后的名字,因此建議大家在命名時考慮到項目整體的命名規則和調用的方便來進行命名,避免圖片切好之後再來修改名字,浪費時間。

到這裡,PSD文件的預處理就完成了,事實上這一步也是整個流程中比較繁瑣的一步了,完成了這些,今天的切圖工作就已經完成了八成。

 

二、令人愉悅的切圖工作

  • 問:使用Slicy切圖總共分幾步?
  • 答:總共分2步
  • 第一步:把PSD拖進去
  • 第二步:把圖片拖出來

是的,就是如此簡單,打開Slicy的主界面,你可以看到其主界面也是如此的簡單。。。

詳細解析Mac下的切圖神器Slicy使用說明

第一步

將我們預處理好的PSD文件拖進去,在一段令人愉悅的動畫之後,我們會看到這個:

詳細解析Mac下的切圖神器Slicy使用說明

第二步

按住Command + A快捷鍵全選,將圖片拖到你需要的地方。

詳細解析Mac下的切圖神器Slicy使用說明

可以看到,一套嚴格命名,大小合規的圖片已經被切好導出了,就是這麼簡單!

小結

Slicy的存在使得原本繁瑣的切圖工作變得輕鬆愜意,尤其是當程序猿霸氣的對設計師妹子說:”看你那麼辛苦,今天的圖我來切”時,相信大多數設計師妹子都會感動的痛哭流涕有木有。。。

綜上,Slicy使用簡單,小巧清爽,實在是居家旅行,殺人滅口勾搭設計師的必備神器。

–本文轉載自 http://www.missyuan.net 教學網 —

文章永久連結為: 詳細解析Mac下的切圖神器Slicy使用說明