Pixel Art Professional

像素艺术进阶

概述

此 Skill 提供用于完善和润饰精灵图的高级像素艺术技巧，涵盖抖动图案、调色板优化、色彩理论、阴影技巧和抗锯齿，助你创作专业水准的像素艺术。

适用场景

在用户遇到以下情况时使用此 Skill：

• 想要应用“抖动”或提到抖动图案
• 询问“调色板优化”或“颜色缩减”
• 提到“明暗处理”“高光”“阴影”或“光照”
• 请求“抗锯齿”“平滑处理”或“边缘润饰”
• 谈论“色阶”“渐变”或“色彩理论”
• 想要“润饰”或“完善”现有的像素艺术
• 提到“Bayer 抖动”或“Floyd-Steinberg”等具体技巧

触发关键词： 抖动、调色板、明暗处理、抗锯齿、平滑、渐变、色阶、润饰、完善、色彩理论、量化

说明

1. 了解抖动

抖动通过按图案混合现有颜色的像素，营造出更多颜色的视觉效果。

适用抖动的场景：

• 减少颜色数量（例如，256 色 → 16 色）
• 使用有限的调色板创建平滑渐变
• 模拟纹理（织物、金属、石材）
• 营造复古风格（经典游戏广泛使用抖动）

抖动算法：

有序抖动（Bayer 矩阵）：

• 使用固定的图案矩阵（2x2、4x4、8x8）
• 图案可预测且规则
• 适用于：纹理、背景、复古风格
• 速度快且效果一致

误差扩散（Floyd-Steinberg）：

• 将颜色误差分散到相邻像素
• 图案更自然、不那么规则
• 适用于：渐变、自然图像、平滑过渡
• 速度较慢，但质量更高

常见的抖动图案：

• 棋盘格：简单的双色交替图案
• Bayer 2x2：基础有序抖动
• Bayer 4x4：更柔和的有序抖动
• Bayer 8x8：非常柔和，效果接近渐变
• Floyd-Steinberg：用于平滑渐变的误差扩散

2. 调色板管理

颜色量化： 使用 mcp__aseprite__quantize_palette 智能减少精灵图中的颜色：

• 分析精灵图的颜色
• 找出最优的有限调色板
• 将像素映射到新调色板
• 保留视觉质量

调色板优化工作流：

1. 获取当前精灵图的信息和调色板
2. 确定目标颜色数量（4、8、16、32、64、256）
3. 应用量化，可选择启用抖动
4. 检查并按需调整调色板

常见的调色板大小：

• 4 色：Game Boy、ZX Spectrum 单精灵图
• 8 色：CGA、早期街机
• 16 色：NES、Master System、早期 VGA
• 32 色：SNES 单背景、Amiga OCS
• 64 色：Genesis、PC Engine
• 256 色：VGA、SNES 完整调色板、Amiga AGA

调色板理论：

• 色阶：从暗到亮的渐进过渡，用于明暗处理
• 色相偏移：在阴影或高光中稍微改变色相，营造鲜艳效果
• 饱和度：中间调提高饱和度，阴影和高光降低饱和度
• 对比度：确保关键元素之间有足够的对比度

3. 明暗处理技巧

明暗处理类型：

平涂（无明暗）：

• 每个表面使用单一颜色
• 简洁、标志性的外观
• 适用于：UI 图标、简单精灵图、极简风格

赛璐璐式明暗处理（硬边明暗）：

• 使用边缘清晰的不同色带
• 每个表面使用 2-3 种颜色（底色、阴影、高光）
• 适用于：卡通风格、醒目的图形、易于辨识的精灵图

柔和明暗处理（抖动明暗）：

• 使用抖动实现渐变过渡
• 颜色有限但外观平滑
• 适用于：写实效果、平滑表面、渐变

像素簇：

• 通过有策略地放置像素进行手动抖动
• 呈现自然、手工制作的效果
• 适用于：金属、织物纹理、自定义效果

明暗处理工作流：

1. 确定光源方向
2. 确定底色
3. 创建较深的阴影色（色相向蓝色／紫色偏移）
4. 创建较浅的高光色（色相向黄色／白色偏移）
5. 在背光表面添加阴影
6. 在迎光表面添加高光
7. 在深色阴影中添加反射光（微妙处理）

常见的明暗处理错误：

• 使用纯黑色阴影（改用色相偏移后的深色）
• 使用纯白色高光（改用带浅色调的颜色）
• 不进行色相偏移（阴影／高光与底色色相相同）
• 枕头式明暗处理（沿边缘处理明暗，而非依据光源方向）

4. 抗锯齿

目的：通过添加中间色，平滑锯齿状边缘和斜线。

适合使用抗锯齿的情况：

• 斜线看起来有锯齿
• 曲线呈现阶梯状
• 边缘需要平滑
• 分辨率较高的精灵图（64x64+）

不适合使用抗锯齿的情况：

• 非常小的精灵图（16x16 或更小）
• 有意营造像素化美感
• 高对比度场景（抗锯齿会降低对比度）
• 调色板有限（需要中间色）

手动抗锯齿技巧：

1. 找出锯齿边缘
2. 找到边缘色与背景色之间的中间色
3. 在边缘的“阶梯”处放置中间色像素
4. 使用 1 像素宽的抗锯齿（避免边缘模糊、发虚）
5. 有选择地应用抗锯齿（并非每条边缘都需要）

自动抗锯齿：

• 某些工具提供自动边缘平滑功能
• 谨慎使用（可能会模糊原本需要保持锐利的边缘）
• 手动抗锯齿能提供更好的控制

5. 像素艺术的色彩理论

HSV/HSB 模型：

• 色相：颜色类型（红、蓝、绿等）
• 饱和度：颜色强度（鲜艳或灰暗）
• 明度／亮度：亮度程度（暗或亮）

创建色阶：

1. 从底色（中间调）开始
2. 创建阴影色：降低明度，可选择将色相向冷色偏移（蓝色／紫色）
3. 创建高光色：提高明度，可选择将色相向暖色偏移（黄色／白色）
4. 在底色与阴影色之间创建中间调
5. 在底色与高光色之间创建中间调
6. 最终得到 5 色色阶（深阴影、阴影、底色、高光、亮高光）

色相偏移：

• 阴影：向蓝色、紫色或互补色偏移
• 高光：向黄色、橙色或光源颜色偏移
• 这样能创建鲜活、有生气的颜色，而不是平淡的渐变

对比度：

• 确保重要元素具有较高的明度对比
• 背景应与前景形成对比
• 纯黑色剪影应清晰可辨

色彩协调：

• 单色：同一色相的不同变化
• 类似色：色轮上相邻的色相
• 互补色：色轮上相对的色相
• 三角色：在色轮上均匀分布的三种色相

6. 专业工作流

工作流 1：通过抖动减少调色板颜色

用户请求：“将这个精灵图减少到 16 色并进行抖动”

处理方法：

1. 获取当前精灵图信息
2. 检查当前调色板大小
3. 使用 mcp__aseprite__quantize_palette，并设置：
   • target_colors：16
   • algorithm："median_cut" 或 "kmeans"
   • dither：true（启用 Floyd-Steinberg 抖动）
4. 检查结果，并按需调整

工作流 2：为纯色精灵图添加明暗效果

用户请求：“为这个精灵图添加明暗效果，光线来自左上方”

选项 A——自动添加明暗效果（快速）：

1. 使用 mcp__aseprite__apply_auto_shading，并设置：
   • light_direction："top_left"
   • intensity：0.3-0.7（按喜好调整）
   • style："smooth"、"hard" 或 "pillow"
   • hue_shift：true（让效果更鲜艳）
2. 工具会自动检测区域并添加明暗效果
3. 检查结果，并按需手动优化

选项 B——手动添加明暗效果（精确）：

1. 分析精灵图结构
2. 确定基础颜色
3. 创建阴影颜色（更暗，并调整色相）
4. 创建高光颜色（更亮，并调整色相）
5. 使用新颜色更新调色板
6. 在右下方表面绘制阴影
7. 在左上方表面绘制高光
8. 在深阴影中添加细微的反射光

工作流 3：平滑锯齿边缘

用户请求：“平滑这个角色的边缘”

处理方法：

1. 找出锯齿状的对角线和曲线
2. 找出边缘颜色和背景颜色
3. 创建过渡色（在两者之间增加 1-2 个色阶）
4. 在边缘的阶梯处放置抗锯齿像素
5. 检查并优化（避免过度平滑）

工作流 4：转换为复古调色板（完整调色板转换）

用户请求：“将这个转换为 NES 调色板”

处理方法：

1. 使用 mcp__aseprite__quantize_palette 和复古调色板颜色
2. 指定目标调色板（例如，54 色 NES、4 色 Game Boy、16 色 C64）
3. 算法会将每个像素映射到最接近的调色板颜色
4. 将像素重新映射到新的调色板索引
5. 可选择应用抖动，让颜色过渡更平滑
6. 确认所有颜色均与目标调色板匹配

重要：使用 quantize_palette，而非 set_palette。set_palette 工具只会替换颜色表，不会重新映射像素数据，在索引模式下会导致颜色不正确。

示例：

quantize_palette(
  sprite_path: "sprite.aseprite",
  target_colors: 54,  # NES full palette
  algorithm: "median_cut",
  convert_to_indexed: true,
  dither: false  # or true for Bayer dithering
)

7. 抖动图案参考

双色图案：

棋盘格（50% 混合）：

A B A B
B A B A
A B A B
B A B A

25% 图案：

A A B A
A A A A
B A A A
A A A A

75% 图案：

B B A B
B B B B
A B B B
B B B B

Bayer 2x2：

Threshold matrix:
0 2
3 1

If pixel value > threshold, use lighter color

Bayer 4x4：

 0  8  2 10
12  4 14  6
 3 11  1  9
15  7 13  5

注意：完整的图案库请参阅 dithering-patterns.md。

8. 技术细节

量化参数：

• 目标颜色数：2-256
• 抖动：可选，指定算法
• Alpha 处理：保留透明度或扁平化

调色板限制：

• RGB 模式：无调色板限制
• 索引模式：最多 256 色
• 灰度模式：256 级灰度

性能：

• 量化：约 100-500ms，具体取决于精灵图大小
• 抖动：约 200-800ms，具体取决于算法和大小
• 手动像素操作：每次操作 <50ms

9. 常见模式

模式：快速润色 对于“让这个看起来更好”的请求：

1. 检查调色板（颜色过多时进行精简）
2. 添加基础明暗效果（光源来自左上方）
3. 在曲线上选择性地添加抗锯齿
4. 按需调整对比度

模式：复古风格转换 对于“让这个看起来更复古”的请求：

1. 精简到合适的调色板（4、8 或 16 色）
2. 应用有序抖动（Bayer）
3. 移除抗锯齿（让边缘保持锐利）
4. 确保像素对齐准确

模式：平滑渐变 对于“让颜色过渡更平滑”的请求：

1. 分析颜色分布
2. 应用 Floyd-Steinberg 抖动
3. 可选：进行轻度量化以整理调色板
4. 检查过渡是否平滑

与其他技能的集成

• 先使用 pixel-art-creator 创建基础精灵图，再进行润色
• 使用 pixel-art-animator 制作动画，再使用此 Skill 润色
• 润色完成后，交由 pixel-art-exporter 处理

错误处理

量化失败：

• 目标颜色数量必须为 2-256
• 精灵图必须包含内容（不能为空白）

抖动问题：

• 需要足够的色深
• 调色板非常有限时，效果可能不佳
• 某些算法更适合特定内容

调色板冲突：

• 索引模式限制严格
• 转换为索引模式前可能需要先进行量化

成功标志

满足以下条件时，表示你已成功使用此技能：

• 应用抖动后，渐变或纹理变得平滑
• 减少调色板颜色数量的同时保留视觉质量
• 阴影增强了深度和立体感
• 抗锯齿平滑了边缘，且没有造成模糊
• 颜色遵循良好的色彩理论原则
• 精灵图外观专业、精致