拼豆色卡使用说明-电脑端

平板端

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

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

点击此处可快速切换 平板端说明书

手机端

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

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

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

操作 UI

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

工具栏

左侧工具栏(可展开)

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

右侧工具栏(可展开)

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

操作 Tip

鼠标悬停任意工具按钮，即可弹出功能提示。

信息栏

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

基础操作

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

1. 创建画布

   

2. 使用工具绘图

   

3. 导出文件

   

   

画布使用

绘画的区域。

• 滚轮滚动：放大 / 缩小画布。
• 长按滚轮：拖动画布。
• 双击滚轮：还原画布至初始位置。

画笔使用

快捷键：1

用于最基础的像素绘制。

• 左键：绘制。
• 右键：擦除。

油漆桶使用

快捷键：2

用于大面积像素填充。

• 左键：填充。
• 右键：擦除填充。

吸管使用

快捷键：3

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

• 左键：吸取颜色。

选区使用

快捷键：4

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

• 长按左键：添加选区。
• 双击左键：反选全部。
• 长按右键：减去选区。
• 双击右键：清空全部选区。
• 长按滚轮：拖动已有选区位置。

撤回与回退

撤回：Alt + Z
回退：Alt + X

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

快捷键操作

以下快捷键仅在画布处于激活状态且未聚焦任何输入框时生效。

手势操作

画布

• 滚轮滚动：放大 / 缩小画布。
• 长按滚轮：拖动画布。
• 双击滚轮：还原画布至初始位置。

画笔

• 左键：绘制。
• 右键：擦除。

油漆桶

• 左键：填充。
• 右键：擦除填充。

吸管

• 左键：吸取颜色。

选区

• 长按左键：添加选区。
• 双击左键：反选全部。
• 长按右键：减去选区。
• 双击右键：清空全部选区。
• 长按滚轮：拖动已有选区位置。

底图编辑

• 长按左键：拖动底图。
• 滚轮滚动：底图缩放。

参考窗口

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

导出草图预览窗口

• 长按左键：拖动预览图。
• 滚轮滚动：预览图缩放。

调色板窗口

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

画布的创建与编辑

快捷键：Alt + R

基础设置

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

原图 160×160

导入后 16×16（N=10）

扩裁画布

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

根据图片生成草图

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

三步速成

1. 导入图片

   

2. 选择色卡

   

3. 生成草图

   

参数说明

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

100% 转换比率

50% 转换比率

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

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

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

底图的设置与编辑

打开底图编辑窗口：Alt + T
切换底图编辑模式：Alt + W (仅在有底图时生效)

基础设置

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

操作手势

1. 长按左键：拖动底图。
2. 滚轮滚动：底图缩放。

参考图窗口

快捷键：Alt + Y

参考图设置

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

窗口设置

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

导出草图

快捷键：Alt + U

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

预览界面

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

操作手势

1. 长按左键：拖动预览图。
2. 滚轮滚动：预览图缩放。

渲染设置

导出格式

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

背景设置

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

信息内容

高亮颜色导出

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

导入 PD 工程文件

快捷键：Alt + D

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

导入步骤

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

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

3. 按需选择导入方式。

覆盖式导入

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

拓展式导入

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

本地存储

本地保存：Alt + N
本地读取：Alt + M

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

自动保存

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

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

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

手动保存

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

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

本地读取

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

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

显示设置

快捷键：Alt + I

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

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

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

画布光效

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

像素形状

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

画布缩放 / 画布透明度

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

坐标轴编辑

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

全屏与简洁模式

全屏：Alt + A
简洁模式：Alt + Q

• 全屏模式：将工作区域放大至整个屏幕，隐藏浏览器地址栏与系统任务栏，获得最大可视区域。
• 简洁模式：仅保留主要工具栏与画布，隐藏次要面板与装饰元素，界面更干净。

调色板

快捷键：Alt + F

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

特殊色选择

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

窗口操作

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

图像操作

快捷键：Alt + G

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

色卡管理

快捷键：Alt + H

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

默认色卡

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

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

自定义色卡

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

颜色管理

颜色管理窗口：Alt + V
颜色高亮窗口：Alt + B

颜色管理窗口

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

颜色高亮窗口

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

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

色卡制作

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

颜色规格定义

左上角栏可指定颜色类型、色号及色值。支持以下六种规格：

• 普通色（normal）：单色，RGB 格式。
• 珠光色（pearlescent）：单色，RGBA 格式。
• 光变色（light）：双色渐变，RGBA ×2；仅填写 颜色一 时默认 透明 → 颜色一。
• 温变色（temperature）：双色渐变，RGBA ×2；仅填写 颜色一 时默认 透明 → 颜色一。
• 透明色（transparent）：单色，RGBA 格式。
• 夜光色（glow）：单色，RGBA 格式。

试色画布

右侧画布提供实时试色功能，可切换光效模式以验证特殊色表现。

• 点击已添加颜色或颜色制作栏即可更换画笔色。
• 顶部按钮 使用当前编辑颜色 可快速应用正在编辑的色值；清空画布 重置试色区域。

色卡列表管理

左下角列表展示当前已添加颜色，支持二次编辑或删除。

导入与导出

顶部左侧三个按钮分别对应“导入继续编辑”“导出 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)