imgcook 是用以各类型图像为材料做菜的的星级大厨,中文译名图片大厨,通过智能化手段将各种图像一键生成可维护的 UI 视图代码,能够高度还原各种图像,释放 UI 开发生产力,让你关注更具挑战性的事情,如果您对图片处理有需求的话,就赶紧来下载它吧!
安装说明
1. 下载并安装 PS 插件
在网站首页下载 PS 版插件,解压文件后会得到对应操作系统的插件安装器文件以及试验田试玩 PSD 文件。安装器安装流程如下:
Mac 用户:双击 imgcook.photoshop_version.pkg 文件,按步骤提示进行安装,安装完毕后可重启 PhotoShop,在 Window(窗口)->Extensions(扩展文件) 找到 imgcook 插件。如果遇到软件不可信问题,可前往 系统偏好设置 -> 安全性与隐私 -> 仍要打开。
Windows 用户:双击 imgcook.photoshop_version.exe 文件 ,按步骤提示进行安装,大概耗时几分钟,安装完毕后可重启 PhotoShop,在 Window(窗口)->Extensions(扩展文件) 找到 imgcook 插件。
如果上述安装器安装流程出现异常(比如 Windows 安装过程卡住时间很久),可尝试手动安装。
解压 imgcook.photoshop.zip 文件,根据各自的系统将解压后的目录文件放置到以下指定目录里,重启 PhotoShop 即可在 Window(窗口)->Extensions(扩展文件) 找到 imgcook 插件。
插件手动安装指定目录
Mac OS: /Library/Application Support/Adobe/CEP/extensions/
Windows x64: C:/Program Files (x86)/Common Files/Adobe/CEP/extensions/
Windows x32: C:/Program Files/Common Files/Adobe/CEP/extensions/
2. 签署问题
安装完 imgcook 插件后,打开 PhotoShop 可在 Window(窗口)->Extensions(扩展文件) 找到 imgcook 插件,首次呼起插件会提示 插件未经正确授权 错误,可通过以下操作解决。
Mac
打开 Terminal 终端,针对不同 Adobe PhotoShop CC 版本可在终端执行以下命令:
CC 2015: defaults write com.adobe.CSXS.6 PlayerDebugMode 1
CC 2015.5: defaults write com.adobe.CSXS.7 PlayerDebugMode 1
CC 2017: defaults write com.adobe.CSXS.7 PlayerDebugMode 1
CC 2018: defaults write com.adobe.CSXS.8 PlayerDebugMode 1
Windows
打开注册表(运行 regedit)
找到 HKEY_CURRENT_USERSoftwareAdobe
针对不同 CC 版本找到对应的 CSXS 项,比如 CSXS.7
鼠标右键新建字符串值
选中刚新建的字符串值注册表-鼠标右键-修改-数值名称:PlayerDebugMode 数值数据:1
CC 2015:HKEY_CURRENT_USERSoftwareAdobeCSXS.6
CC 2015.5:HKEY_CURRENT_USERSoftwareAdobeCSXS.7
CC 2017:HKEY_CURRENT_USERSoftwareAdobeCSXS.7
CC 2018:HKEY_CURRENT_USERSoftwareAdobeCSXS.8
执行完上述流程后,重启 PS 重新打开 Window(窗口)->Extensions(扩展文件)-> imgcook 可看到一个小终端界面。
软件特点
智能化
全链路采用计算机视觉、深度学习等智能化手段依次去除对设计稿的约束,智能生成代码。
精度还原
一键智能还原与丰富的操作面板
imgcook官方版可以实时保证代码和视觉的高度还原
DSL多样
自定义编写代码模板
支持小程序、React、H5、Weex Rax 等,外部暂时不支持自定义代码模板。
高可维护性
DOM 嵌套合理、相对定位布局、文本自适应
ClassName语义化、循环可自动识别
主要问题
淘宝 imgcook 主要解决的问题是:使用图像生成代码的时候,我们关心的不仅仅是生成 UI 的还原度,也关心生成的代码是否合理、可维护,
如果生成的代码属于不可读不可维护的快餐代码,开发使用上再对其进行二次开发就会显得极为艰难,而往往后者的难度相比前者更甚,如果需要在生产环境中使用,这个问题就无法避免。
对此,imgcook 的定位就在于解决 UI 还原以及生成可维护代码的问题。
对于可维护性代码的问题,imgcook 会对还原后的 UI 在代码层面上生成目前使用比较广泛的 Flexbox 布局以及相对定位布局,在一些自定义的命名上(比如样式命名),
imgcook 也会根据开发者的习惯生成更加人性化的命名