ps +pxcook切图 后转移到 axure上 完整过程

1、打开ps

这里面打开UI设计师发来的psd格式文件可能会出现两个错误提示.
在这里插入图片描述
原因:版本过低,一些关键组件缺失,得安装最新版本的ps解决。

这里如果不安装最新版本的话,直接按保留图层即可,因为要切出图中的组件需要留下图层进行操作。

打开之后如果发现没有缺失什么关键内容,就可以继续进行之后的内容。
在这里插入图片描述
这个是ps字体库中缺少设计师所使用的字体,但是如果只是图片的形式的话,
该字体会以像素的形式保留下来。只有当需要对改字体内容进行修改时,ps才会再次提醒你将字体替换掉。

解决方法
1、什么都不用管,切就完事了。
2、安装最新版的ps(或许就有这些字体了)
3、问设计师要字体文件

2、连接pxcook

1、打开pxcook
2、点击左上角的裁切刀
在这里插入图片描述

接下来会跳转到切图工具的小窗口
在这里插入图片描述
3、启动ps和pxcook的源程连接。
ps的远程连接在:顶部菜单栏->编辑->远程连接
在这里插入图片描述
打开后设置密码,并勾选远程连接,然后确定。

之后转会到切图工具窗口,输入密码并开始使用。

在这里插入图片描述
这里就是已经成功连接的状态。

到这里准备工作已经完成。切图工具中的选项可以根据自己的需要进行调整。


3、正式切图

每一个页面都是由很多个小组件组成,在axure上实现点击等事件的交互时,也需要对每一个小组件单独进行操作,所以需要将小组件单独切割出来。

而UI设计师在ps上设计页面的时候也会对小组件进行分组,所以我们只需要在ps的图层选择中将需要的小组件所在图层进行选中,然后点击“切所选图层”即可。

切出来的图层会在切图工具设置的路径中找到。下面以切割导航栏为例。

这是一个画在ps上的漂亮的tabbar。
里面有背景图片,图标×4,选中图标×4,然后我们需要把一共9个图片都切出来。
在这里插入图片描述
为了辨别哪个图标对应哪个图层,我们可以图层栏左边的眼睛,不断地“隐藏”和”显示“,就可以找到该图标对应的图层。
在这里插入图片描述
这里是对应当前状态的图层栏。
然后我们长按CTRL,再用鼠标将图层一个一个选上。
在这里插入图片描述
选择完毕之后点击切图。 然后我们的ps就会自己跑起来了。不用管他,等他跑完就行了。
在这里插入图片描述

之后我们就可以在文件夹中找到切割好的图片,但是这里似乎少了点什么???白色的图标不见了???

这里就发现了一个小问题,如果ps中图层的命名是相同的话,图片会发生覆盖的情况。就相当于
在这里插入图片描述
然后切图工具帮我们点击了替换。

所以为了避免这种情况,我们将ps中的名字修改一下,再次切图之后就可以成功获得白色的图标了。

在这里插入图片描述

另外注意:

如果在ps中直接选择一个组别进行切图的话,
在这里插入图片描述
就会得到这个组别中所有图层图片拼合到一起的的切图
在这里插入图片描述

4、将图片放到axure上

1、打开axure
2、打开图标所在文件
3、CTRL+A
4、CTRL+C
5、跳转回axure
6、CTRL+V
7、拖动图片摆放到正确位置
8、设置交互

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值