拼豆色卡使用说明-平板端

电脑端

可通过 左侧工具栏 -> 全屏和简洁模式开关 -> 改为电脑端操作与显示 将绘画操作切换为电脑端

切换为电脑端后在左侧的工具栏重新打开说明书即可切换为电脑端说明书

点击此处可快速切换 电脑端说明书

手机端

手机端只可在类似手机设备屏幕大小的情况打开，无法强行切换

使用手机端后在下方菜单栏中打开手机端说明书

点击此处可快速切换 手机端说明书

操作 UI

主界面被划分为三大区域：左右下工具栏（红框）、绘制画布（蓝框）与底部信息栏（绿框）。

工具栏

左侧工具栏(可展开)

• 新建画布/扩裁画布
• 导入或校准底图
• 打开参考窗口
• 导出文件或本地保存
• 导入文件或本地读取
• 显示模式设置
• 全屏 / 简洁模式开关
• 查看使用手册与更新日志

右侧工具栏(可展开)

• 画笔
• 油漆桶
• 吸管
• 选区
• 调色板
• 图像操作
• 色卡管理
• 颜色管理

下方工具栏(可展开)

• 撤回
• 移动模式
• 回退

操作 Tip

点击任意工具按钮，即可弹出功能提示。

信息栏

底部信息栏实时显示画布基础信息，从左到右依次为：画布大小、使用色卡、底图状态、画布创建时间、当前选中颜色。

基础操作

仅需三步即可生成专属草图

1. 创建画布

   

2. 使用工具绘图

   

3. 导出文件

   

   

画布使用

绘画的区域。

• 单指双击：还原画布至初始位置。
• 双指缩放：放大和缩小。

移动模式

用于移动画布位置。

• 单指滑动：拖动画布。

画笔使用

用于最基础的像素绘制。

• 画笔模式-单指滑动：绘制。
• 橡皮模式-单指滑动：擦除。

油漆桶使用

用于大面积像素填充。

• 油漆桶模式-单指滑动：填充。
• 橡皮模式-单指滑动：擦除填充。

吸管使用

用于快速拾取画布已有颜色。

• 单指点击：吸取颜色。

选区使用

用于对画布局部区域进行编辑。

• 添加选区模式-单指滑动：添加选区。
• 添加选区模式-单指双击：反选全部。
• 删除选区模式-单指滑动：减去选区。
• 删除选区模式-单指双击：清空全部选区。
• 移动选区模式-单指滑动：拖动已有选区位置。

撤回与回退

• 撤回：回退至上一步操作。
• 回退：恢复被撤回的一步操作。

手势操作

画布

• 单指双击：还原画布至初始位置。
• 双指缩放：放大和缩小。

移动模式

• 单指滑动：拖动画布。

画笔

• 画笔模式-单指滑动：绘制。
• 橡皮模式-单指滑动：擦除。

油漆桶

• 油漆桶模式-单指滑动：填充。
• 橡皮模式-单指滑动：擦除填充。

吸管

• 单指点击：吸取颜色。

选区

• 添加选区模式-单指滑动：添加选区。
• 添加选区模式-单指双击：反选全部。
• 删除选区模式-单指滑动：减去选区。
• 删除选区模式-单指双击：清空全部选区。
• 移动选区模式-单指滑动：拖动已有选区位置。

底图编辑

• 单指滑动：拖动底图。
• 双指缩放：底图缩放。

参考窗口

• 顶部长按拖动：拖动窗口。
• 右下角长按拖动：改变窗口大小。

导出草图预览窗口

• 单指滑动：拖动预览图。
• 双指缩放：预览图缩放。

画布的创建与编辑

基础设置

• 宽度 / 高度：画布基础面积。
• 像素比例：画布 1×1 格 = 原图 N×N 像素（N ≥ 5）。

原图 160×160

导入后 16×16（N=10）

扩裁画布

路径：新建画布 / 扩裁画布 → 扩裁画布，可在保留绘图的前提下修改画布尺寸。

根据图片生成草图

路径：新建画布 / 扩裁画布 → 根据图片生成草图，一键像素化并生成草图。

三步速成

1. 导入图片

   

2. 选择色卡

   

3. 生成草图

   

参数说明

• 转换比率：越高越精细。

100% 转换比率

50% 转换比率

• 基准线位置：裁剪框定位。
• 裁剪尺寸：可锁定比例。
• 选择色卡：指定生成用色卡。
• 像素比例：同基础设置。
• 抖动仿色设置：让颜色过渡更贴近原图。

选项	效果说明	示意图
无抖动	无仿色，适合纯像素块
FS 抖动	基础抖动，颜色更还原
蓝噪声抖动	高级有序抖动

转换完成后，点击下方按钮即可导出成品。

底图的设置与编辑

基础设置

• 导入底图：将图片作为画布底部参考。
• 移除底图：删除当前底图。
• 进入底图编辑：切换为底图编辑模式手势。
• 底图居中：使底图重置至居中位置。
• 贴合 xx：使底图对指定位置进行对齐。
• 底图模式：设置底图的图层位置。
• 底图缩放：底图大小可在 1 % – 200 % 之间调节。

操作手势

1. 单指滑动：拖动底图。
2. 双指缩放：底图缩放。

参考图窗口

参考图设置

• 点击窗口上方 [+] 添加参考图。
• 点击参考图上的 “作为底图” 即可将其转为底图。
• 点击 删除 去掉当前参考图。

窗口设置

• 拖动右下角可改变窗口大小。
• 长按窗口顶部可拖动窗口位置。
• 点击 [−] 缩小图窗，点击 [↩] 恢复。

导出草图

导出窗口可自定义色号、坐标系、背景等内容，并支持高亮指定颜色单独输出。

预览界面

因窗口压缩，预览图模糊属正常现象，不影响最终清晰度。

操作手势

1. 单指滑动：拖动预览图。
2. 双指缩放：预览图缩放。

渲染设置

导出格式

• 支持 PNG / JPG / SVG / PDF / .pd 工程文件。
• 高亮颜色导出时仅限 PNG、JPG。
• .pd 格式用于后续恢复工程再编辑。

背景设置

• 纯色背景：可自定义颜色。
• 透明背景：不可选颜色，直接留空。

信息内容

高亮颜色导出

• 导出选中颜色：仅高亮当前在颜色面板选中的色号。
• 导出全部高亮颜色：批量生成每张色号单独高亮图，打包为 .zip。

导入 PD 工程文件

.pd 工程文件为本站自定义格式，可在任意浏览器内恢复完整草图，支持跨网页传输。

导入步骤

1. 在导入文件窗口点击 导入 .pd 文件。

2. 选择后缀为 .pd 的文件。

3. 按需选择导入方式。

覆盖式导入

• 以新建画布方式打开，当前画布信息会被完全覆盖，请谨慎操作。
• 若文件色卡已存在，可直接切换；否则强制使用当前色卡。

拓展式导入

• 将 .pd 内容追加到当前画布右侧，画布宽度自动扩展。
• 色卡一致时直接合并；不一致时自动映射为当前色卡。

本地存储

网页支持部分的本地存储，用于快捷保存和恢复。

自动保存

网页每五分钟会自动保存当前的绘画数据，自动保存成功会在右下角提示或显示距离下次保存倒计时。

在触发误退出提醒时，也会进行一次自动保存。

倒计时可在 左侧工具栏 -> 显示设置 -> 自动保存倒计时显示 开关。

手动保存

通过 左侧工具栏 -> 导出文件或本地保存 -> 保存在本地 打开保存窗口。

点击窗口内对应的存储位置即可保存或覆盖保存，或通过存储位置下方的“删除保存”按钮删除当前存储内容。

本地读取

通过 左侧工具栏 -> 导入文件或本地读取 -> 读取本地存储 打开保读取窗口。

点击窗口内对应的存储位置下方的“读取”按钮读取当前存储内容。

显示设置

调整画布显示效果与辅助工具，实时生效。

自动贴合底图颜色 / 显示色号

• 自动贴合底图颜色：绘制时自动拾取底图对应位置最接近的色号；画布透明度不影响选色。
• 显示色号：在每个像素中心叠加显示所用色号。

画布光效

切换光效模式，可即时预览光变 / 温变像素在不同环境下的最终颜色。

像素形状

在实心方形与空心圆之间切换，仅影响视觉样式，不改变数据。

画布缩放 / 画布透明度

• 缩放比例：1 % – 400 % 无级调节。
• 画布透明度：1 % – 100 %，低于 100 % 时画布呈半透明，便于对照底图。

坐标轴编辑

• 坐标轴透明度：1 % – 100 %，仅影响数字标签，不影响网格线。
• 坐标轴加粗：自定义 X / Y 轴大分区间隔。

全屏模式

• 全屏模式：将工作区域放大至整个屏幕，隐藏浏览器地址栏与系统任务栏，获得最大可视区域，平板端建议开启。

调色板

调色板用于切换绘制颜色，支持常规色与特殊色快速选取。

特殊色选择

当色卡包含透明 / 温变 / 光变 / 夜光 / 珠光等特殊色时，可在面板中的 [特殊色] 下拉框中一键筛选。

图像操作

提供图像翻转、旋转及对称绘制功能，可快速生成对称图案或调整画面方向。

色卡管理

在此窗口可切换、重置、新增或删除色卡，支持默认色卡与自定义色卡混合使用。

默认色卡

已内置以下主流品牌色卡：

• DMC
• 卡卡家
• 漫漫家
• 盼盼拼豆
• Coco
• MARD

自定义色卡

• 支持 JSON、CSV 格式导入。
• 可通过网页内置简易编辑器或手动编写配置文件完成色卡制作。
• 详细步骤见 说明书 → 色卡制作。

颜色管理

颜色管理窗口

可临时禁用 / 启用指定色号；被禁止的色号无法在调色盘中使用(已绘制像素不会被清除)

颜色高亮窗口

可将已绘制像素按色号高亮显示，仅用于视觉检查，不影响导出效果。

上方的替换颜色可一键将高亮的所有颜色替换为其它颜色。

色卡制作

网站提供专用色卡编辑器，路径：色卡管理 → 制作色卡。

文件格式规范

如需手动构建色卡，请遵循以下字段约定。

{
"*色号*": {
     "num": "*色号*",
     "type": "[normal|pearlescent|light|temperature|transparent|glow]",
     "color": "*RGBA/RGB*",
     "color1": "*RGBA/RGB*",
     "color2": "*RGBA*"
},
// 示例(002，温变色，粉色 → 绿色)
"002": {
     "num": "002",
     "type": "temperature",
     "color": "rgb(230, 210, 255)",
     "color1": "rgb(230, 210, 255)",
     "color2": "rgb(159, 249, 162)"
}

num,type,color1,color2
*色号*, [normal|pearlescent|light|temperature|transparent|glow], *RGBA/RGB*, *RGBA*
// color1 仅 normal 仅可填写RGB
// color2 仅 light|temperature 可选填
// 示例(002，温变色，粉色 → 绿色)
002, temperature, rgb(230, 210, 255), rgb(159, 249, 162)