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、设置交互

ps +pxcook切图 后转移到 axure上 完整过程相关推荐

  1. ps怎么切图后放html下,怎么使用PS切图?PS切图后怎么保存到本地?

    怎么使用PS切图?使用PS切图的目的其实就是将大的设计图分割成多个小图片,通过网页代码定位后台相册的照片来显示前端网页的效果,当然,在处理某X宝的图片的时候也是可以使用该方法的,具体见下文怎么使用PS ...

  2. 蓝湖切图后如何做成html,蓝湖支持「切图压缩」了!

    Hey,大佬们,蓝湖正式上线「切图压缩」功能,号称设计师和工程师必备利器!埋头工作的你,还不快来试试! 什么是「切图压缩」?「切图压缩」前后有什么区别? 蓝湖通过智能无损压缩技术,选择性地减少 PNG ...

  3. ps切图后 JAVA开发_做一个会PS切图的前端开发

    系列链接 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开 ...

  4. 【前端】PS图层切图

    PS有很多的切图方式,例如:图层切图.切片切图.PS插件切图等.PS切图是前端人员的必备技能之一. 准备工作 首先用PS打开PSD文件,打开后如下图所示 接下来对PSD图片稍作调整,选择缩放工具 选择 ...

  5. 前端工程师必备的PS技能——切图篇

    Photoshop界面设置 移动工具快捷键--v 注意自动选择选项 智能参考线--视图->显示 标尺--Ctrl+R 窗口->信息(面板选项中,第二种颜色信息模式为RGB颜色,标尺单位为像 ...

  6. 还在一张张切图?PS快速切图新技能助你解放双手

    什么?你还在一张张处理??? 切图和标注一直是多数设计师最耗时且最不愿意做的事情,PS快速切图新技能,教你解放双手,快上车. 本文纲要 规则切图 不规则切图 快速批量切图 快速批量切出不同平台各种尺寸 ...

  7. 蓝湖切图后如何做成html,如何使用蓝湖 sketch for Mac设置切图?

    https://mac.orsoon.com/Mac/172336.html 蓝湖 sketch for Mac是一款适用于sketch的高效切图插件.本次为您带来了如何使用蓝湖 sketch for ...

  8. php 切图,ps怎么切图

    ps怎么切图? 将准备好的详情页置入PS画布中(或随意一张图片置入画布中) 选择工具栏中的"切片工具",然后鼠标移动到画布中的时候,就会显示一个刀片的形状,而且会有数字显示切片个数 ...

  9. ps 导出矢量图为svg,并上传iconfont

    ps 导出矢量图为svg, 并上传iconfont ps 矢量图形 设置为填充 关闭描边 合并的图形要合并图形组件 然后到出为svg

最新文章

  1. OpenCV2和3的下载、安装和配置
  2. Linux开发环境搭建三 使用mount -t cifs 挂载windows共享目录方法与问题解决
  3. SAP Cloud for Customer Service Control工作中心介绍
  4. python 卡方分箱算法_python实现二分类的卡方分箱示例
  5. linux socket默认超时时间设置,Socket中如何设置连接超时 (转)
  6. leetcode13. 罗马数字转整数
  7. SpringBoot2.1.5(7)---更换Banner
  8. 【干货】Python玩转各种多媒体,视频、音频到图片
  9. Kubernetes1.7 新特性:日志审计变化
  10. 服务器更换主板后系统无法启动
  11. python os.open禁止写入缓存区_Python-设置文件缓冲类型
  12. am包络检波matlab,matlab实现包络检波
  13. 最新可乐云商城程序源码V0.6版本 可做实物商城网站
  14. 微软服务器系统补丁kb2919355,Windows 8.1补丁KB2919355无法安装的解决方法
  15. canvas 的绘图模式 retained-mode(保存模式) 和 immediate-mode (立即模式)
  16. 时艳强对话杨霞:智能合约的安全bug,有可能让你的资产瞬间归零
  17. 计算机基础 -- 硬件篇
  18. F5(负载均衡)使用配置文档
  19. Mysql的组合字段Generated Column
  20. 1231: ykc买零食

热门文章

  1. php模版网页底部修改,修改WORDPRESS模版底部信息
  2. Asp.Net Newtonsoft.Json使用教程
  3. 成就与你的努力成正比—兄弟连IT教育
  4. CAS:139729-28-5,PEG衍生物Amine-PEG-acid,氨基-聚乙二醇-羧基
  5. css中各种代码的属性所表示的效果
  6. java 2d 应用_JAVA 2D的一些应用
  7. 所有w ndows开机音乐,《新手也能操作的让WndowsXP加快开机启动!.doc
  8. office去除盗版提示
  9. 国外程序员整理的系统管理员资源大全
  10. 全麦吐司和普通吐司的区别_全麦面包和普通面包的区别有哪些?