軟件介紹

imgcook官方版是一款廣受歡迎的Photoshop智能化生成代碼插件，操作界簡潔，高度智能化操作，可以保證代碼和視覺的高度還原。這款插件由阿里程序員傾情打造，能夠幫助設(shè)計(jì)師用戶們將做好的圖像稿件自動(dòng)智能生成前端代碼。

imgcook軟件特色

1、智能化

全鏈路采用計(jì)算機(jī)視覺、深度學(xué)習(xí)等智能化手段依次去除對設(shè)計(jì)稿的約束，智能生成代碼。

2、精度還原

一鍵智能還原與豐富的操作面板，實(shí)時(shí)保證代碼和視覺的高度還原

3、DSL多樣

自定義 DSL，支持小程序、React、H5、Weex、Rax 等 DSL

4、高可維護(hù)性

DOM 嵌套合理、相對定位布局、文本自適應(yīng)，ClassName語義化、循環(huán)可自動(dòng)識(shí)別

5、融入研發(fā)流程

Imgcook-cli 可將生成的代碼以任意形式一鍵下載到任意目錄，和您的研發(fā)鏈路無縫連接，支持自定義加工

imgcook常見問題

為什么有些樣式代碼導(dǎo)出是 vw，有些是 px、rem？

這個(gè)跟具體的 DSL 實(shí)現(xiàn)有關(guān)，實(shí)際上三者都可以導(dǎo)出，甚至可以是 less、scss，建議有自定義需求的可以自己在 Github fork DSL 代碼實(shí)現(xiàn)。

生成的代碼是否支持 less 、scss？

通常情況下是可以根據(jù)節(jié)點(diǎn)層級關(guān)系做到命名保護(hù)的，可以支持了一個(gè)比較簡單的層級樣式代碼生成，但相對來講還是偏靜態(tài)實(shí)現(xiàn)，可以參考此實(shí)現(xiàn)

生成的代碼樣式尺寸不匹配？

對于非響應(yīng)式的情況，默認(rèn)的代碼樣式尺寸是根據(jù)設(shè)計(jì)稿實(shí)際尺寸出碼的，如果有存在1x、2x 設(shè)計(jì)稿情況，可以參考響應(yīng)式處理方式進(jìn)行處理，比如 750 的設(shè)計(jì)稿，想導(dǎo)出 375 的尺寸(需要根據(jù)設(shè)計(jì)稿尺寸自己在 DSL 實(shí)現(xiàn)里做整除)。

imgcook安裝方法

等待imgcook下載完成，會(huì)得到對應(yīng)操作系統(tǒng)的插件安裝器文件以及試驗(yàn)田試玩 PSD 文件。安裝流程如下：

Mac

雙擊 imgcook.photoshop_version.pkg 文件，按步驟提示進(jìn)行安裝，安裝完畢后可重啟 PhotoShop，在頂部菜單「Window(窗口)」-「Extensions(擴(kuò)展)」 找到 imgcook 插件。

注意：如果遇到軟件不可信問題，可前往 「系統(tǒng)偏好設(shè)置」-「安全性與隱私」-「仍要打開」。

注意：在最新的 Mac OS Catalina(10.15)中，安裝器因?yàn)闄?quán)限原因咱不能使用，可使用下述的手動(dòng)安裝。

Windows

雙擊 imgcook.photoshop_version.exe 文件，按步驟提示進(jìn)行安裝，大概耗時(shí)幾分鐘。

安裝完畢后可重啟 PhotoShop，在頂部菜單 「 Window(窗口) 」- 「Extensions(擴(kuò)展)」 找到 imgcook 插件。

手動(dòng)安裝(推薦)

如果上述安裝器安裝流程出現(xiàn)異常(比如 Windows 安裝過程卡住時(shí)間很久，Mac 10.15 安裝器不可用)，可嘗試按以下步驟手動(dòng)安裝。

1、解壓下載的 zip 文件，根據(jù)各自的系統(tǒng)將解壓后目錄里的 imgcook.photoshop 目錄放置到以下指定目錄。

Mac OS: /Library/Application Support/Adobe/CEP/extensions/

Windows x64: C:Program Files (x86)Common FilesAdobeCEPextensions, 或者 C:Program FilesCommon FilesAdobeCEPextensions

Windows x86: C:Program FilesCommon FilesAdobeCEPextensions

2、重啟 PhotoShop 即可在頂部菜單「 Window(窗口) 」-「Extensions(擴(kuò)展)」 找到 imgcook 插件。