PxCook(像素大厨)是面向设计师的一款免费、交互流畅、全平台支持的标注切图工具软件。它支持对PS、Sketch设计元素尺寸、元素距离、文本样式、颜色的智能标注,支持智能切图。

以下,就会着重展示PxCook的支持平台、核心功能与流畅体验。

支持的平台(Window和Mac OS)

PxCook支持Windows操作系统和Mac OS

支持的工具类型(PS和Sketch均支持)

·PS:

需要把psd文件拖拽到PxCook工具中,PxCook将会在工具内解析psd文件,以便智能标注。而切图需要在PS中打开远程连接,通过PxCook的浮窗实现切图

·Sketch:

在Sketch中,点击“导出当前画板到PxCook”后会自动启动PxCook,并显示出Sketch中对应的画板内容,依旧在PxCook中标注。

流畅的体验

(一) 元素之间自动标注——拖、放

需要做的只是一拖一放,就是这么简单,就自动生成了。

将psd拖拽到PxCook中,Pxcook就会读取psd的所有信息,接下来,以图中的im聊天场景为例,无论是元素间,元素与边框间的距离标注,都只需要简单的 拖、放,就自动生成了。

(二) 包含关系的自动标注——仍然是拖和放

PxCook能获取psd的所有信息,包括从属关系。如图示中的文字框,距离气泡栏的距离也能通过一样的操作——拖、放而自动生成。

当元素太小,拖动也很不方便时,可以先后点选两个元素,然后再点击顶部测量内距的按钮就嫩自动生成上下左右的距离标注。

(三) 元素的外部尺寸标注——一个按钮,一次点击

快速标记一个元素的尺寸,可以选中它,点击图示按钮就好,依然会自动生成。

对于用惯了拖 放的用户,像上图中继续横向或纵向拖放也是可以的。

(四) 字体的自动标记——一个按钮,一次点击

PxCook对此的解决办法是,点一下选中文字框,再点一下就能自动生成。生成的字体字号等标注,是可以拖动重新摆放位置的。

·这里有一个精心打造的细节:在Ps里有些用户习惯对图层使用颜色叠加来修改文本颜色,甚至文本图层外还会套着有颜色叠加的组。这些在PxCook中都不是问题,PxCook可以通过各种嵌套和颜色叠加关系,将最终的文本颜色解析并标注出来。

(五) 支持各种单位自由转换——px dp pt

考虑到面向不同手机操作系统的设计师用到的单位不同,PxCook可以自动切换单位,点击切换,所有标注都轻松同步更换~。存在于应用顶部的按钮~如下图:

(六) 内部尺寸标记方法二,选中点击

还是最简单的操作,选中、点击,直接解决了尺寸标记在内部的需求

其他PxCook的功能还包括:

1. 自动识别出来的标注数字支持自己手动改数值。

2. 智能识别PSD更新,当你遭遇改稿调整时,之前的自动标注会自动更新,终于不用再改一遍标注了!

3. 自动吸附:标注过程中可以针对图像内突出颜色进行自动吸附。

4. 软件设置:在设置面板中可以进行如:标注字号、标注自动对齐、滚轮、即数字精确度等设置。

5. 定制标注样式:可以定制每个标注的颜色,标签位置等样式。

6. 颜色模式设置:目前支持#Hex, argb, rgba三种颜色模式。

7. 自动备份功能。

还有很多值得期待,因为我们一直在迭代更新……

开发小团队写在最后:PxCook作为设计师贴心的切图标注工具,在前端&UI设计领域一直被口口相传。翻开更新日志历史,"提升体验,场景设计…"等好几百条更新记录静静的躺在那里,并不急着告诉我们PxCook已走过了两个年头。真正令人印象深刻的,其实是在两年反复打磨中未曾间断的喜悦:开发小匠featherJ陆续完成了对Windows、MacOS操作系统都支持的1.x版本、对PS、Sketch也都支持的2.x版本;产品小匠来苏水也无数次于种子群的深度交流中,将产品需求提炼的日趋完善……慢慢的,一切工作都让我们越发有底气的发出声音—— “希望更多设计师能看到PxCook,使用PxCook,愉快完成设计的最后一个环节。”

再次强调PxCook是一款免费的智能标注切图软件,免费。

喜欢这篇文章的设计师们,欢迎移步PxCook官网点击下载(使用前,请先在左侧官网内安装Adobe AIR)我们也会通过官方公众号: PxCook  定期发布效率工具和日常更新

有任何使用问题或建议都可以加入官方q群:661255798 提问^^

像素大厨标注如何导出Html,每个设计师都在用的UI标注工具UI切图软件——PxCook像素大厨...相关推荐

  1. UI实战教程之切图标注篇(UI小白必备)

    UI实战教程之切图标注篇(UI小白必备) 一. 切图工具和标注工具 学会使用工具可以起到事半功倍的效果.在这里为大家推荐我常用的切图和标注工具. 1. 切图工具: (1)Cutterman 这是一款运 ...

  2. android ui 切图工具,APP切图标注教程:UI设计切图标注的小工具实用技巧

    分享关于一篇UI设计师必须要懂的切图标注的小工具实用技巧,让你在跟开发工程师协作的时候更加得心应手. 设计师必备的UI切图小工具如下3大常用工具: 1.切图工具 Assistor PS 也是一款PS的 ...

  3. 像素大厨可以导出html标注吗,前端标注软件-pxcook像素大厨使用心得

    为什么要清理Adobe AIR 在Windows平台上,可能会因为各种问题导致原有的Adobe AIR环境被破坏,譬如已经安装了Adobe AIR之后对系统进行了更新,或是原有安装的Adobe AIR ...

  4. 像素大厨生成html文件,PxCook 像素大厨 - 标注切图一起搞定

    PxCook是新一代的UI界面设计标注切图工具.自动智能分析PSD文档信息,只需通过简单的点.滑操作即可生成标注.同时实时检测PSD,一旦PSD更新,标注自动更新,无需再次标注.切图工具无需安装插件, ...

  5. 像素大厨PxCook for Mac(自动标注切图工具)中文免费版

    PxCook(像素大厨)是面向设计师的一款免费.交互流畅.全平台支持的标注切图工具软件.它支持对PS.Sketch设计元素尺寸.元素距离.文本样式.颜色的智能标注,支持智能切图.每个UI设计师都在用的 ...

  6. 通过 OpenLayers 加载CAD导出位图 和 math.js 构造的仿射变换实现地理坐标系到任意CAD图上像素坐标系的互转

    WebGIS开发过程中会遇到这样一种情况:需要使用OpenLayers加载一个未校准的CAD导出的位图:并且还需要通过经纬度坐标数据在这个位图上做一些标记,还需要能通过在OpenLayers取得的图上 ...

  7. android ps切图工具下载,移动APP设计之PS切图插件大汇总,值得收藏

    移动APP界面设计切图和标注是一项必不可少的步骤.所以,设计界也涌现出了很多切图神器和标注神器. 包括25学堂之前介绍过的很多切图工具和切图教程. 今天25学堂的小编为大家精选了几个不错的移动APP设 ...

  8. ui标注生成html,自动标注一键生成,手动标注自由补充

    熬着夜手动做标注? 用工具自动标注,却被攻城狮追命连环call? 设计稿标注--其实--可以「自动+手动」! 助你五星通过标注大关~ 为什么标注需要「自动+手动」? 手动标注到自动标注,在设计界是有一 ...

  9. 无废话网页重构系列——(4)切图与标注

    本篇讲从设计稿中提取基础资源和信息:切图与标注. 合格的设计师,会使每个元素组基于矩形层,形成一个个单元,并做好图层分类及命名,不在'组'上使用蒙版,按照栅格化模块化设计,考虑各组件的复用性.扩展性和 ...

最新文章

  1. matlab数据求加速度,通过从移动设备获取加速度数据对进行计步
  2. php基础知识【oop/mvc/orm/aop】
  3. Vue.js实现前段评论展示
  4. 比特币现金被3.1万多家餐厅接受
  5. Python自动化运维之25、Ajax
  6. 研究生应当具备的三种基本技能
  7. 【数据结构与算法】之深入解析“贪心算法“的原理解析和算法实现
  8. lrange是取出所有值并移除么_美欧日站点亚马逊物流库存绩效指标分数达标值将降低为 450...
  9. 移动端系列讲解之字体单位
  10. 如何学好单片机?​嵌入式第一门课
  11. c 语言编写脚本优化,两周自制脚本语言-第11天 优化变量读写性能
  12. linux 修改分辨率lcd_如何在Ubuntu 12.04中为LCD添加显示分辨率? xrandr问题
  13. Ros系统配置DNS服务器,ros设置dns服务器
  14. 前端数据可视化插件(四)关系图
  15. ​全球首个机器人抓取云竞赛落幕,华科夺冠,中国团队包揽前三
  16. RAID磁盘阵列与配置
  17. Dram学习笔记(1) Dram相关基础知识
  18. android加载网页pdf,android 一行代码搞定加载网络 pdf 文件
  19. 第七章 C语言函数_什么是函数?C语言函数的概念
  20. 架设传奇私服时提示此服务器满员的解决方法

热门文章

  1. 递归求二叉排序树ASL值
  2. 秒杀系统设计思路与实战(含源码实现)
  3. Java工程师如何在1个月内做好面试准备?
  4. Building VirtualBox OSE 5.0.0 on Windows 7 (x86)
  5. Android开发相关配置初体验
  6. UG NX 12 修剪和延伸
  7. 腾讯qlv转换mp4最简单方法
  8. 给定一个矩阵m*n,从左上角开始每次只能向右或者向下走,最后到右下角的位置共有多少种路径
  9. 基于历史数据查询的爬虫操作
  10. 虚拟机与主机共享文件夹的实现