imgcook for Photoshop(图像大厨)

imgcook for photoshop又叫图像大厨,这里it猫扑小编带来Photoshop的详细安装教程和使用教程.安装包内包含苹果系统和windows系统的安装包,按需选择安装.欢迎感兴趣的用户来IT猫扑下载应用!

阿里imgcook说明

imgcook for Photoshop是阿里程序员开发的一款图像智能化生成代码的插件,这款插件目前支持sketch和Photoshop,这里提供的是Photoshop版本.这款插件可以帮助设计师们将做好的图像稿件智能生成前端代码,其高度智能化保证代码和视觉的高度还原,大家可以尝试下.

图像大厨安装教程

【Windows 用户】

双击 imgcook.photoshop_version.exe 文件 ,按步骤提示进行安装,大概耗时几分钟,安装完毕后可重启 PhotoShop,在 Window(窗口)->Extensions(扩展文件) 找到 imgcook 插件.

1、下载以后直接打开imgcook.photoshop_1.0.0.exe启动安装

2、点击 agree同意软件协议,随后软件自动安装

3、显示软件的安装进度,等待安装结束就可以使用

4、提示安装结束,点击finish退出安装界面

【Mac 用户】

双击 imgcook.photoshop_version.pkg 文件,按步骤提示进行安装,安装完毕后可重启 PhotoShop,在 Window(窗口)->Extensions(扩展文件) 找到 imgcook 插件.如果遇到软件不可信问题,可前往 系统偏好设置 -> 安全性与隐私 -> 仍要打开.

imgcook for Photoshop使用教程

签署问题

安装完 imgcook 插件后,打开 PhotoShop 可在 Window(窗口)->Extensions(扩展文件) 找到 imgcook 插件,首次呼起插件会提示 插件未经正确授权 错误,可通过以下操作解决.

【Windows】

打开注册表(运行 regedit)

找到 HKEY_CURRENT_USER\Software\adobe

针对不同 CC 版本找到对应的 CSXS 项,比如 CSXS.7

鼠标右键新建字符串值

选中刚新建的字符串值注册表-鼠标右键-修改-数值名称:PlayerDebugMode 数值数据:1

CC 2015:HKEY_CURRENT_USER\Software\Adobe\CSXS.6

CC 2015.5:HKEY_CURRENT_USER\Software\Adobe\CSXS.7

CC 2017:HKEY_CURRENT_USER\Software\Adobe\CSXS.7

CC 2018:HKEY_CURRENT_USER\Software\Adobe\CSXS.8

执行完上述流程后,重启 PS 重新打开 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

使用方法

1、打开下载包里的 imgcook试验田.psd 文件,找到 PS 界面 layers(图层) 窗口(如果没有,可以通过勾选 Window(窗口) -> layers(图层))打开

2、选中一个模块最外层的图层节点,点击插件终端界面里的 导出数据.

3、等待插件处理完毕显示导出成功后即可点击 去粘贴 前往 imgcook 平台进行粘贴.

常用功能

1、在扩展功能找到imgcook软件,这样就可以使用了

2、用户可以到官方网站查看软件的功能介绍,可以显示imgcook布局UI界面的教程

3、可以直接将设计稿添加到自己店铺使用,立即优化店铺主页效果

4、显示画板功能,在软件查看已经添加的图片,方便用户部署店铺

5、相关的参数直接在软件查看,也可以对添加的插件修改

6、导出功能,可以在软件界面将数据导出

7、提示导出成功,可以点击下方的按钮去编辑器粘贴调整还原效果

8、提示数据正在处理,等待几分钟

9、处理完毕就可以在软件界面查看粘贴的数据.显示全部图片

10、数据字段绑定功能,在软件右边可以编辑字段信息,可以在软件编辑代码信息

11、代码编辑界面如图所示,如果用户会调整代码就自己修改吧

应用特色

【基础能力】

查看 DOM 和 StyleSheet

在编辑器里,左侧图层的嵌套结构为 经布局算法转化后生成 的 DOM 结构,上面的英文为生成的 className,className可在右侧面板->节点属性->样式名 处修改,每个节点的 StyleSheet 也可在右侧面板->节点属性->样式 处查看.

【修改为超链接】

文本和容器可替换成"超链接"类型,替换后类型为 Link.

操作:选中要修改的节点 -> 右侧面板 -> 节点属性 -> 数据 -> 点击"超链接".

修改 className

在编辑器里,className可在右侧面板->节点属性->样式名 处修改,修改后记得点击"保存".

【切换代码模板】

每个项目可切换为不同的代码模板,在项目-> 项目设置 -> 绑定DSL 中切换即可.

每个模块也可单独设置不同的代码模板,在编辑器 -> 代码 -> 代码浮层 -> 切换DSL.