pxCook 像素大厨使用

培训

软件支持windows和mac操作系统，基于Adobe Air开发，主要解决设计图标注、切片问题。

下载地址：http://www.fancynode.com.cn/pxcook
常见问题：http://www.fancynode.com.cn/pxcook/qa

安装及配置

访问像素大厨 [官网]

下载正式版，如无法安装，则下载并安装 Adobe AIR。

软件主界面是设计图标注功能。

右上角按钮 切图工具 是设计图切片功能。

本文根据主要功能划分文章内容。

设计图标注

挖坑待填

设计图切片

设计

1. 设计图制作过程中，根据需求命名图层或组。

移动端小型图片或透明图后缀 .png ,彩色大图 .jpg

2. 当同组图标宽高大小不一时

添加一个名称为 # 或者 @bounds 的图层作为“骨架”，来实现透明图四周留白，统一图标尺寸。

3. 为原生移动端提供不同尺寸图标

图层的文件名后，文件扩展名前增加 @2x， @3x 来进行多倍图输出，需要放大的素材应是“智能对象”。
目前情况输出 @2x 一般可以达到文件尺寸和清晰需求的兼容。

4. 需要注意的问题

• 图层混合模式尽量保证是“正常”
  

• 多倍切图时智能对象的清晰度足够
  

• 避免文件名混乱
  文件的命名尽量按照模块用 模块名 + 数字 ，如：导航1.png、导航2.png、新闻右侧标题.png、背景1.jpg 等。

前端

前端在使用设计图切片时，涉及PS操作更少，主要分为：

• 批量导出
  当设计师按命名规则整理好设计图时，可以通过 按命名切图 一键导出设计图中的所有切片。

  1. 设置路径
     
     单击切图工具右下角 省略号 按钮，并指定保存目录。
  2. 一键切图
     
     单击 一键切图 按钮。
  3. 等待
     
     停止键鼠操作，等待切图完毕。
  4. 收获
     
     单击右下角 文件夹 图标。
     
• 单组/单图层切片

  部分设计图中的某个图层或组需要单独切片保存时。

  1. 选中图层
     
     选中需切片图层。可选：双击图层名称进行修改。
     
  2. 按选择切图
     
  3. 修改配置
     
     日常配置如上图。根据图片需求选择图片格式
     
     • png：透明背景，中小型图片
     • jpg：色彩丰富大图，焦点图，全屏背景
     • psd：切片保存以后可能需要修改切片的情况（不常用）
  4. 切所选图层
     

• 多图层合并切片
  当设计图多个元素需合并切出一张图片时。

  1. photoshop中 图层 调板下方新建组。
     
  2. 将需要的图层拖拽至组
     
  3. 选中组，按照[上一个方式]进行选择切图。