PxCook+photoshop实现傻瓜式切图(推荐小白使用)

文章地址 https://segmentfault.com/a/1190000013290433
确定需求
刚入门前端的小伙伴经过一个阶段的学习,已经准备小试牛刀了。但看到设计师给出的psd图,又头疼了,天啊撸,怎么办,我不会切图啊。今天我就带领小白学习傻瓜式切图。包学包会。( ̄▽ ̄)"

所需软件
PxCook
photoshop
PxCook(像素大厨):可以对设计图进行标注。从而可以更方便的进行开发。这里我们使用的是它的插件完成切图。

PxCook与ps连接
使用photoshop打开你的psd图,通过编辑->增效工具->开启远程连接的支持。勾选"启用远程连接",输入密码,点击确定。(记住这一步的密码,之后要用)
打开PxCook软件,点击右上角的切图图标。如下图所示。
PxCook+photoshop实现傻瓜式切图(推荐小白使用)_第1张图片
会弹出弹窗,如下图所示。
PxCook+photoshop实现傻瓜式切图(推荐小白使用)_第2张图片
输入刚刚在ps界面输入的密码。点击开始使用。如果出现下面的界面,恭喜你,连接成功啦!这就表示你可以开始切图。
PxCook+photoshop实现傻瓜式切图(推荐小白使用)_第3张图片
切图步骤
选择你要切的图层,点击切所选图层按钮 在弹出层上面的路径上就可以找到所有切的图片。
纸上得来终觉浅,我们来实际操作下把~
使用ps打开一张psd文件,按照如下操作,稍等片刻,就可以在路径下找到切好的图了。
PxCook+photoshop实现傻瓜式切图(推荐小白使用)_第4张图片
小技巧:如果要把很多图层一起切,可以新建组,把要切的图层放到组里面,选中组,点击切所选图层按钮即可。

是不是很简单,学会了不妨点个赞。

你可能感兴趣的:(前端工具)