消失又復活的 Adobe Creative Cloud Extract

UI/UX 標注工具分享

在2016年5月adobe 把 Extract 功能無預警拿掉
許多使用者在討論板一陣哀號，不解為何Adobe 要把這麼重要的功能停止

https://forums.adobe.com/thread/2158417 討論串在此

我自己也是受害者呀，一時不知道該找什麼軟體來替代
結果他過了3個月他竟然默默的又復活了！ 但我已經投入zeplin 的懷抱了

不過還是那就來介紹這個免費ui標註工具 adobe Extract 吧

Adobe Creative Cloud Extract

是Adobe 線上服務之一，可讓設計師上傳設計稿 psd檔後自動生成標註
讓網頁設計人員和開發人員方便轉換成程式碼的工具

在2016年初加入新公司
在尋找好用的輔助工具又最好是免費的前提下
發現了Adobe Extract
剛好手上在設計電商平台後台web，就拿來試試

1.登入adobe 後點選選自己的大頭，選擇資產裡的 Creative Cloud檔案

2.透過拖放到「檔案」區域或使用「檔案選擇」選項，上傳 PSD 檔案

3.按一下 PSD 檔案的縮圖，左上方會有三個TAB，點選「EXTRACT」開啟檔案

這時就可以開始點選你要看的元件啦，如上圖我點選button，他會顯示這個元件的座標值、尺寸也可複製css

點選元件後能做的事：

• 檢視及複製元素座標和尺寸
• 複製 CSS 程式碼
• 複製文字
• 複製字體、顏色和漸層資訊

4.設計元件的座標和尺寸 (單位有像素px、百分比％ 可以轉換)

按一下任何值 (例如 W、H、X 或 Y)，都可複製到剪貼簿

5.檢視兩個元素之間的距離，只要按著shift 點選兩個元件就可得知

6.下載圖片/切圖

在藍色資訊面板中，按一下下載圖示可以編輯圖檔名稱、選擇影像格式、設定縮放比例（範圍從 0.1× 到 5×）

按儲存後圖片會在右側的「資產」面板中，這時系統還會自動建立一個影像資產資料夾

7.右側面板

• 樣式：可複製css程式碼、字體清單、色碼清單、檢色器工具
• 圖層：可下載單一圖層為圖片、可隱藏/顯示圖層（在此對圖層所做的任何變更不會存回到 PSD 檔案）
• 資產：可下載已設定好的切圖檔

8.分享

可分享連結給共同工作的夥伴，可自行設定權限，而且即使他們沒有登入 Creative Cloud 也看得到喔！

9.限制與費用

• 官方不建議對大於 2 GB 或是超過 1000 個圖層的 PSD 檔案使用Extract (會很慢）
• 任何擁有免費或付費 adobe帳戶的人員，都可以將 PSD 檔案上傳到「Creative Cloud 資產」，以及使用Extract (就是免費的意思啦）

推薦給不想花錢買標註軟體的朋友，我自己是在得知Extract功能下架的隔天
就跟公司建議使用 sketch + zeplin 替代掉photoshop了
adobe真是得不償失呀 無形中不知流失多少死忠用戶

附上官方網址
http://www.adobe.com/tw/creativecloud/extract.html
使用說明
https://goo.gl/9Wah2S

此文章是自己使用後的心得，發佈於2016.12.4