1. 插件对 Photoshop 的兼容性支持

支持 Photoshop CC 2015 及以上版本。

2. 开启插件

安装好 PxCook 3.9.x 及以上版本后。首次开启打开PxCook,即已经为您安装好全新切图插件。 打开 Photoshop (如果已开启,则需要您重启一下Photoshop,以确保插件被正确加载。) 通过 窗口 > 扩展功能 > PxCook-切图 开启插件。

3. 切图的标记与尺寸制定

在 Photoshop 的右侧边栏,找到PxCook-切图面板。

标记切图

选中想要切图的 图层 或者 图层组 ,然后点击切图面板上的 标记为切图 按钮。

当被标记为切图后,将在图层前面增加 p:: 作为标记。如果要取消切图,点击 取消标记 即可。

自定义切图的尺寸

需要确保被标记的图层为 图层组 ,如果不是图层组的话,需要将指定的图层进行打组。

之后我们在组内创建一个名为 @bounds 或 # 的图层,通过 矩形工具,在该图层内绘制一个矩形来描述要切出切片的范围,如下所示:

这样,上图中的 heart_icon 图层组即会按照组内的 @bounds 图层的范围来进行切图了。

4. 导出画板与切图到 PxCook 或 导出切图到本地

设备和分辨率的选择

该设备和分辨率选项,需要您根据当前设计稿的尺寸来进行选择(例如:您的设计稿是 iOS 设备且宽度为 375,那需要您将设备选择为iOS,分辨率选择为1x)。

设备类型和设计稿分辨率的选项,只会决定标记的切图的生成尺寸,标记的切图将会根据您设置的设计稿分辨率为基准,缩放为当前项目所需的各个尺寸。

例如:您在 Photoshop 某个画板中,有个尺寸为 20×20 px 的标记切图,如果您将导出面板的当前设计稿分辨率设置为 iOS 1x,那么该标记切图会被同时输出为 20×20 px 的1倍切图,40×40 px 的2倍切图,和 60×60 px 的3倍切图。

又例如:如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x,那么该标记切图会被同时输出为 10×10 px 的1倍切图,20×20 px 的2倍切图,和 30×30 px 的3倍切图。

设备类型和设计稿分辨率的选项,并不会影响您导出的图的尺寸。

例如:您在 Photoshop 中某个画板的尺寸为 375×667 px,其导出到 PxCook 的之后的尺寸也为 375×667 px。

Android 设计稿同理,需要您根据当前在 Photoshop 中的设计稿的尺寸,选择对应的正确的分辨率。

导出画板与切图到 PxCook (推荐)

先保存 Psd,然后点击导出到 PxCook即可将画板附带切图导出到PxCook中,将如下的 Photoshop 画板,按照如图所示的设置导出到 PxCook:

在 PxCook 中,进入画板,切换到 开发模式 ,即可在右侧边栏查看到如下的画板及切图数据:

导出切图到本地

点击面板右下角【导出当前选中到本地】即可将当前选中的图层或组直接导出到本地文件夹中。

点击面板右下角【导出所有切图到本地】即可将当前Psd中所有标记为切片的图层保存在本地文件夹中。

之后在弹出的对话框中,可以选择需要导出的分辨率,默认为导出全部。

android自动标注工具,PxCook - 高效易用的自动标注工具,生成前端代码,设计研发协作利器...相关推荐

  1. 研发提效:通过设计稿自动生成前端代码

    今天抱着听不懂来见识的心态参加了全球架构师峰会,没想到还是大部分内容还是听得懂的.高手们都是可以用简单的话语讲透复杂的事情. 一天下来听了8位大佬分享,收获很多,今天就给大家分享其中一个(其他的写篇文 ...

  2. 开发工具-PxCook

    PxCook - 最高效易用的自动标注工具,设计研发协作利器

  3. 【我的Android进阶之旅】 高效的设计稿标注及测量工具Markman介绍

    前言 最近有个烦恼是UI设计师可能太忙了,经常给出的UI设计稿中有很多地方都没有标注,比如长度和颜色值等.这个时候每次都要通过RTX来联系UI设计师或者直接跑到UI设计师面前,喊他重新标注一下,特别影 ...

  4. Java Okio-更加高效易用的IO库

    转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/119997762 本文出自[赵彦军的博客] Java IO流学习总结一:输入输出流 ...

  5. Downie 最靠谱易用的视频下载工具

    很多朋友都有过这样的体验,在视频网站上找到了想要看的视频,可是由于网络条件的约束,无法流畅地观看最清晰版本的视频,尤其是观看国外的视频时,速度也是不忍直视.最不巧的是,许多的视频网站尤其是国外的并没有 ...

  6. .net中如何同步获取数据方式增加一样数据自动刷新列表_期待已久的动态数据库工具终于来了!...

    本地数据库的创建和管理是大多数移动应用工程中的核心组件之一,一般会通过直接使用 SQLite 或 Jetpack Room 持久化库来完成.开发者们也在不断地寻求着更好的方式,使其能够在运行中的应用中 ...

  7. 【Android 安装包优化】移除无用资源 ( 自动移除无用资源 | 直接引用资源 | 动态获取资源 id | Lint 检查资源 )

    文章目录 一.自动移除无用资源 ( 不推荐使用 ) 二.直接引用资源与动态获取资源 1.直接引用资源 2.动态获取资源 id 三.Lint 检查资源 四.参考资料 一.自动移除无用资源 ( 不推荐使用 ...

  8. 怎样自动提取邮件的内容_这些最新的外贸搜索开发工具(图灵搜、谷歌搜索提取工具、易查查),你会使用吗?...

    贸业务开展过程中,搜寻买家信息,开发买家客户,是开展外贸的前提.而掌握B2B.谷歌.搜索引擎.社交网站及众多搜索工具的运用技巧,则是外贸业务人员的基本功.本篇文章将结合图灵搜.谷歌搜索提取工具.易查查 ...

  9. 字体方向 道路标注_自动驾驶环境感知的“见闻色”——3D点云标注

    点开网约车App.线上报名.待审核通过后,用户就能在规定的测试路段免费呼叫自动驾驶车辆进行试乘--前不久,滴滴出行首次面向公众开放自动驾驶服务. 这次行业事件再次激发了公众对于自动驾驶的热切期待与探索 ...

最新文章

  1. mysql 1594_【MySQL】复制1594错误(从库relaylog损坏)
  2. linux 新建用户配置文件 /etc/login.defs 简介
  3. 不区分大小写比较Java_java-如何使字符串比较不区分大小写?
  4. 云时代的安全解读:云安全≠云计算安全
  5. python学号怎么编写_用python编写学生管理系统
  6. oracle取两条sql查询结果的差集,并集,交集
  7. 风机桨叶故障诊断(四) 正负样本准备——从图像中随机扣图
  8. html设置下拉筛选可以多选,select下拉框(支持筛选、多选)
  9. pdf转chm_PDF转Excel的小妙招!
  10. NCH MixPad Masters for Mac - 录音和混音软件
  11. 给大家推荐一套 git 工作流
  12. 解决 Eclipse不支持tomcat9
  13. 华泰证券 python 自动交易_tushare开源股票交易接口基于python实现技术
  14. Mol Plant |中科院微生物所郭惠珊组和中科院上海植物逆境中心段成国组合作揭示油菜生长与免疫动态调节的新机制...
  15. 谁说待国企就是养老?前阿里P8总结500页Java成长笔记全网首发!爱了爱了!
  16. 12306bypass推送
  17. 华为设备配置DNS客户端
  18. 计算机应用 胡丹,正高级
  19. 前端开发之JS篇(二)
  20. OpenCL入门实践

热门文章

  1. Flutter学习之路(二)
  2. 数字孪生坦克作战,科技推动战场信息数据化
  3. 自己的笔记本上设置RabbitMQ集群
  4. ARM处理器全解析:A8/A9/A15/A50都是什么?
  5. 你真的了解Redis的持久化机制吗?
  6. DPDK背景和优势,赶紧学起来运用吧
  7. 宝藏又小众的网页设计UI素材网站分享
  8. 解决错误:Error creating bean with name ‘multipartResolver‘: Failed to introspect bean class [org.springf
  9. html文件显示controls,HTML video controls 属性
  10. syslog日志转换器_常见Windows日志转SYSLOG工具使用