Clip Studio像素画立绘教程

打开网易新闻 查看精彩图片

文本概览:全文约 2,694 字,阅读约 7 分钟。

Clip Studio Tips 上 Livresquare 把“高精灵”——常见 128×256、对话立绘那种——拆成一条可跟练的流水线:先在熟悉画风里把服装与姿势画爽,再导入小画布、把插值改成硬边,用 1px 线稿把设计压进像素约束。

高分辨率角色精灵的成败,不在第一笔落在哪个格子,而在你愿不愿意先自由设计、再主动接受缩放与线宽带来的重塑。

示例:约 128×256 的角色立绘。
打开网易新闻 查看精彩图片
示例:约 128×256 的角色立绘。

一、先画设计

游戏里常见的 32–64px 精灵偏符号化、好动画;对话立绘、视觉小说立绘往往要做到 256px 高甚至更高,细节才撑得住。示例画布128 宽 × 256 高,工具用 Clip Studio Paint(EX / PRO 的核心工具一致;EX 的多页漫画文件方便管理一整套立绘)。

先用平时习惯的画风试长外套与服装变体。
打开网易新闻 查看精彩图片
先用平时习惯的画风试长外套与服装变体。

像素画本质是限制:颜色数、线宽、轮廓可读性都会逼你改形。越早在像素画布上“抠”灵感,越容易被格子吓停。反过来,先在自由草图里把人物气质、服装剪影定住,后面的像素阶段才知道该保什么、该牺牲什么。

开画前也先定风格:要不要轮廓线、阴影用色块还是抖动、调色板偏 8-bit / 16-bit 还是当代宽色域。颜色特别多的角色,硬塞进极窄调色板只会两头不讨好。

二、导入草图:插值必须改“硬边”

新建精灵画布(示例 128×256),把草图导出成 PNG/JPG 再导入。

新画布就绪,准备放底图。
打开网易新闻 查看精彩图片
新画布就绪,准备放底图。
高清草图必须缩到能辨认单像素的尺寸。
打开网易新闻 查看精彩图片
高清草图必须缩到能辨认单像素的尺寸。

默认插值往往会把边缘抹糊,像素线稿无从下手:

默认插值:糊成一片。
打开网易新闻 查看精彩图片
默认插值:糊成一片。

把插值改成硬边(Hard Edges)

图层属性里改插值方式。
打开网易新闻 查看精彩图片
图层属性里改插值方式。
硬边前后对比。
打开网易新闻 查看精彩图片
硬边前后对比。
边缘清晰后,才有可描的像素边界。
打开网易新闻 查看精彩图片
边缘清晰后,才有可描的像素边界。

三、1px 线稿:统一线宽,区分“事故锯齿”和“故意锯齿”

本教程按1px 线宽讲。有人爱用 2px 或更粗,规则会变,别混用。线稿阶段务必高倍放大,一格一格落点。

在硬边底图上开 1px 线稿层。
打开网易新闻 查看精彩图片
在硬边底图上开 1px 线稿层。
左:线宽不均;中:无规律锯齿;右:过渡干净。
打开网易新闻 查看精彩图片
左:线宽不均;中:无规律锯齿;右:过渡干净。

斜线若以每步 2px 递进,中间别随手塞孤立像素:

斜线节奏一旦被打乱,轮廓会抖。
打开网易新闻 查看精彩图片
斜线节奏一旦被打乱,轮廓会抖。

反过来,故意留下的锯齿可以帮剪影:发丝尖角、块状转角,都能让外形在缩略图里更“认得出是谁”。

用可控锯齿强化头发可读性。
打开网易新闻 查看精彩图片
用可控锯齿强化头发可读性。
块状转角暗示更硬的形体。
打开网易新闻 查看精彩图片
块状转角暗示更硬的形体。

线稿偏离原草图是常态。袖口太小会被细节吃掉,就要放大;笑容在像素里难成立,就改表情——保的是设计意图,不是草图像素拷贝。

袖口与表情已按像素可读性改过。
打开网易新闻 查看精彩图片
袖口与表情已按像素可读性改过。

描线同时可粗标光影分界,后续上色不会从零猜体积:

线稿阶段先锁明暗分区。
打开网易新闻 查看精彩图片
线稿阶段先锁明暗分区。

线稿颜色也别死黑:略偏色相,并跟明暗边界对齐,整张会更统一。

线稿色随区域明暗微调。
打开网易新闻 查看精彩图片
线稿色随区域明暗微调。

抗锯齿(可选)

示例角色走偏复古、没用 AA。需要更“滑”的轮廓时,在两色交界处手动塞中间色,等于极短的色阶:

无 AA / 轻度 / 重度。
打开网易新闻 查看精彩图片
无 AA / 轻度 / 重度。

描线时记得周期性缩小查看:局部完美、整体剪影糊了,等于白描。

缩小检查整体形语。
打开网易新闻 查看精彩图片
缩小检查整体形语。

四、上色:关掉填充的抗锯齿与区域扩展

调色板要不要锁死颜色数,没有唯一答案。示例从草图取色并提高饱和,做成粉彩偏霓虹的感觉,也不强行套极窄调色板——Clip Studio 本来就擅长多色阶。

从草图提色并推饱和。
打开网易新闻 查看精彩图片
从草图提色并推饱和。

用油漆桶 / 魔棒时,关掉抗锯齿与区域扩展,否则颜色会渗进邻格:

填充相关选项要关掉。
打开网易新闻 查看精彩图片
填充相关选项要关掉。
开关抗锯齿时填充圆的差异。
打开网易新闻 查看精彩图片
开关抗锯齿时填充圆的差异。
粉彩平涂底色。
打开网易新闻 查看精彩图片
粉彩平涂底色。

五、阴影:跟光走,别画枕头阴影

阴影要跟光源和形体走,别沿轮廓均匀描一圈——那是枕头阴影(Kissen-Schattierung)。

开始铺形体阴影。
打开网易新闻 查看精彩图片
开始铺形体阴影。
对照光源方向检查。
打开网易新闻 查看精彩图片
对照光源方向检查。
沿边一圈暗 ≠ 有光。
打开网易新闻 查看精彩图片
沿边一圈暗 ≠ 有光。

每个阴影色阶控制在1–3 色,小画布上色阶太多会脏。

示例用两色阴影,光源在角色左上方。
打开网易新闻 查看精彩图片
示例用两色阴影,光源在角色左上方。

抖动与材质

阴影也能暗示材质:毛衣用偏亮、碎一点的阴影说“粗糙”;光滑曲面则用更干净的色阶。

较亮碎阴影暗示针织粗糙。
打开网易新闻 查看精彩图片
较亮碎阴影暗示针织粗糙。

抖动(Dithering)用交替像素混合两色,常见棋盘与线条,也可自造图案;疏密还能当“混合比例”。

渐变 vs 两种抖动。
打开网易新闻 查看精彩图片
渐变 vs 两种抖动。
密度变化 = 不同混合比。
打开网易新闻 查看精彩图片
密度变化 = 不同混合比。
亮皮包上的散射用抖动表现。
打开网易新闻 查看精彩图片
亮皮包上的散射用抖动表现。

六、给阴影加边,再拉开局部明暗

简单阴影够用,但加一圈色边能模仿皮下散射,也更有风格:

阴影周围加色边。
打开网易新闻 查看精彩图片
阴影周围加色边。

边可以比阴影亮或暗,决定柔和还是硬对比:

边亮 / 边暗两种味道。
打开网易新闻 查看精彩图片
边亮 / 边暗两种味道。

软阴影边也可再叠抖动,或给阴影换色让画面更跳:

软边 + 抖动 / 彩色阴影。
打开网易新闻 查看精彩图片
软边 + 抖动 / 彩色阴影。

局部把毛衣阴影提亮、把头发底色提亮让发影显得更深,细节会“鼓”起来:

同套阴影里留一点明暗差。
打开网易新闻 查看精彩图片
同套阴影里留一点明暗差。

七、高光与反射光:材质写在亮度里

高光同样跟形体,别只点在尖角。金属、丝绸反射远强过石材、亚麻——高光强弱本身就在写材质。

按材质分配高光强度。
打开网易新闻 查看精彩图片
按材质分配高光强度。
发丝与亮包的高光强于大衣。
打开网易新闻 查看精彩图片
发丝与亮包的高光强于大衣。
左更尖、更亮 = 更光泽。
打开网易新闻 查看精彩图片
左更尖、更亮 = 更光泽。

反射光让阴影不均黑:一般跟光源色相接近,也可 stylize 成霓虹,把粉、米、蓝串成一套 80/90 年代味。

蓝反射 vs 黄反射。
打开网易新闻 查看精彩图片
蓝反射 vs 黄反射。
蓝 / 青反射统一配色。
打开网易新闻 查看精彩图片
蓝 / 青反射统一配色。

八、可选:渐变层补对比(现代工具流)

若坚持传统纯色块,可跳过。示例觉得角色偏平,加了浅米色→浅棕的线性渐变,混合模式强光、低不透明度,暗示顶光;脸颊用柔边刷补一点红,不打断色块。

渐变与混合模式。
打开网易新闻 查看精彩图片
渐变与混合模式。
顶光感出现,但整体偏匀。
打开网易新闻 查看精彩图片
顶光感出现,但整体偏匀。

再盖一层手绘明暗(少色),混合模式用钉光 / Pin Light并降不透明,把暗部压回去、亮部提起:

三色锁定高光 / 中间 / 阴影。
打开网易新闻 查看精彩图片
三色锁定高光 / 中间 / 阴影。
对比回来,又不糊。
打开网易新闻 查看精彩图片
对比回来,又不糊。

九、色调分离:用校正层“挤”回像素味

Clip Studio 的色调分离(Posterize)校正层能把颜色数压下来,很适合像素画。

Levels 2–20,数值越小颜色越少。
打开网易新闻 查看精彩图片
Levels 2–20,数值越小颜色越少。
配合不透明度试效果。
打开网易新闻 查看精彩图片
配合不透明度试效果。

级数高、不透明度低:

颜色保留较多。
打开网易新闻 查看精彩图片
颜色保留较多。
仍偏柔和。
打开网易新闻 查看精彩图片
仍偏柔和。

级数低、不透明度高:

颜色被狠狠挤扁。
打开网易新闻 查看精彩图片
颜色被狠狠挤扁。
更强的海报化。
打开网易新闻 查看精彩图片
更强的海报化。

十、发社交媒体:先硬边放大再导出

社交平台常会拉伸小图,像素糊掉。正确流程:PNG 导出原尺寸 → 新建大画布(如 1000×1000)→ 导入时插值仍选硬边→ 整数倍放大(示例约 5 倍:256 → 1280 高)。

大画布准备放大。
打开网易新闻 查看精彩图片
大画布准备放大。
放大前确认硬边插值。
打开网易新闻 查看精彩图片
放大前确认硬边插值。
整数倍放大,格子仍干净。
打开网易新闻 查看精彩图片
整数倍放大,格子仍干净。

参考资料

Livresquare · Pixel-Charakterkunst erstellen: Vom Skizze zum Sprite(CLIP STUDIO TIPS): https://tips.clip-studio.com/de-de/articles/11408