前端开发利器--PxCook(像素大厨)

前端开发利器 - - PxCook(像素大厨)

  • 1、PxCook简述
  • 2、PxCook安装
  • 3、PxCook基本操作
    • 3.1 通过软件打开设计图
    • 3.2 常用快捷键
    • 3.3 常用工具
    • 3.4 从psd文件中直接获取数据


1、PxCook简述

前端开发软件:

  • PS(Photoshop)收费、占用磁盘空间大
  • PxCook本地免费,轻量,高效

PxCook

高效易用的自动标注工具, 生成前端代码, 设计研发协作利器

PxCook功能

  • 代码生成:包括 CSS, XML, Objective-C, Swift, ReactNative…
  • 自动标注:在开发模式下,可直接查看设计稿中元素的内容,间距,尺寸和样式等。同时会根据当前所选择的元素,在右侧属性栏中生成对应的样式代码。
  • 智能标注:支持智能标注出设计稿中,需要特殊注意的地方,以便加快工程师的开发效率。
  • 单位换算:支持 iOS, Android 和 H5 平台的不同单位类型和分辨率换算。
  • 切图协作:支持 iOS, Android 和 H5 三种平台的 切图协作 。导入到PxCook中的切图种类和命名,会根据当前的设备类型,自动进行换算。
  • 主流设计工具跨平台支持:支持 Photoshop,Sketch 和 Adobe XD 等设计工具,支持 macOS 和 Windows 两个操作系统。
  • 项目制管理设计稿:支持项目制管理您的设计稿中的每一个画板,同时支持对画板进行分组。
  • 协作项目的支持:支持云端协作项目,可以自由邀请项目的参与者到该项目中。
  • 本地项目的支持: 支持本地项目,所有项目数据可以以 pxcp 文件格式保存到本地,隐私保护更加有效。

2、PxCook安装

下载地址:PxCook - 高效易用的自动标注工具
前端开发利器--PxCook(像素大厨)_第1张图片)

前端开发利器--PxCook(像素大厨)_第2张图片

前端开发利器--PxCook(像素大厨)_第3张图片
前端开发利器--PxCook(像素大厨)_第4张图片
前端开发利器--PxCook(像素大厨)_第5张图片


3、PxCook基本操作

3.1 通过软件打开设计图

打开软件

前端开发利器--PxCook(像素大厨)_第6张图片
创建web项目

前端开发利器--PxCook(像素大厨)_第7张图片
拖拽入设计图,png用设计模式 psd用开发模式

前端开发利器--PxCook(像素大厨)_第8张图片

3.2 常用快捷键

放大设计图:ctrl + +

缩小设计图:ctrl - -

移动设计图:空格按住不放,鼠标拖动

3.3 常用工具

  1. 量尺寸
    前端开发利器--PxCook(像素大厨)_第9张图片

  2. 吸颜色
    前端开发利器--PxCook(像素大厨)_第10张图片

3.4 从psd文件中直接获取数据

切换到开发界面,直接点击获取数据

前端开发利器--PxCook(像素大厨)_第11张图片


你可能感兴趣的:(前端,前端,web,开发工具,PxCook,psd)