零基础一晚上用Live2D做出会动的头像:从PSD到表情包全流程

发布时间:2026/9/8 12:41:15
零基础一晚上用Live2D做出会动的头像:从PSD到表情包全流程 如果你最近刷到过那颗“灵活卤蛋大脑袋”——会挑眉毛、会嘟嘴、会顺着头转动而轻微晃动的眼睛和腮帮子甚至物理上还带一点肉感抖动大概率会冒出两个念头这东西是怎么做的我也能学会吗先说结论能。而且如果你愿意沉下心一个晚上确实可以做出一个能发朋友圈的 Live2D 表情。Live2D 这个技术在国内的热度这两年明显上来了从虚拟主播模型、游戏立绘到表情包和短视频素材到处都有它的影子。但很多想入坑的人会被“建模”“绑骨”“网格权重”这些词吓退。实际上Live2D 的核心逻辑和 3D 建模完全不同它不追求空间立体而是在 2D 平面上模拟“立体感”和“动作感”。换句话说Live2D 是为静态插画注入生命的一套规则系统。这篇文章不打算堆概念而是按一个“零基础、一晚上出活”的真实学习路径来写。我会先解释 Live2D 和竖屏“九轴”到底是怎么回事然后带你走一遍从准备素材、拆分图层、设置参数、绑定变形器、调节物理效果到最后导出 GIF 或视频的完整流程。文末还准备了常见问题排查表和工程化建议。读完后你不仅看得懂那些 Live2D 作品是怎么动的还能自己动手把一张普通的头像图片变成一颗“会动的头”。1. Live2D 到底是什么一句话解释它的边界Live2D 并不是 3D 模型。它本质上是一套“在 2D 平面上摆弄 2D 图片”的动画系统。你可以把一张角色立绘想象成一张纸上的剪贴画。旧的动画做法是一帧一帧画Live2D 则是对剪贴画的每个部位进行切割、变换、扭曲。它虽然叫“2D”但组合出来的动作效果可以非常接近 3D 的空间感比如转身、点头、摇头、视线跟随。这里有一个关键概念必须早期建立Live2D 没有“模型”这个概念只有“参数”。在 3D 软件里模型有顶点、有骨骼、有权重通过骨骼旋转带动顶点移动。而 Live2D 的底层是网格每个部件比如左眼、右眼、眉毛、嘴巴是一张纹理图上面覆盖一层网格。你要做的事情是让这些网格上的顶点在某些“参数”的驱动下发生位移。参数是什么参数就是 Live2D 里定义的“变量”例如视线向左右移动参数 X视线向上下移动参数 Y头部左右转动参数 Z 或 X眉毛上扬嘴巴张开每个参数都有一个取值范围通常是 -1 到 10 是默认状态。你在面板里拖动参数滑块对应的部件就会发生变化。如果部件没有反应那说明你还没有把这个部件的网格顶点绑定到这个参数上。以“眨眼”为例你要让“眼睛”部件在参数值为 0 时是睁开参数值为 1 时是闭合。做法是在眼睛上创建一个“眨眼参数”然后把眼睛网格在纵向缩减甚至完全缩成一条线。这个过程中如果你直接拖动整个眼睛部件它只是上下移动不会给人“眨眼”的挤压感。真正自然的眨眼需要配合“变形路径”和“网格变形”让上眼皮和下眼皮分别向中间收缩。所以各家 Live2D 教程里反复强调的一句话你可以直接记住Live2D 不是“让图片移动”而是“让图片按照你的规则变形”。建立这个认知你看到“九轴”“参数驱动”“物理模拟”这些名词时就不会懵了。2. 别被“九轴”吓到理解 Live2D 的参数轴系统标题里提到的“九轴”不少第一次接触的人会误以为是一种高深的硬件概念或者九套复杂的骨骼系统。其实放在 Live2D 的语境里“九轴”通常是对“参数轴”或“不同方向的变形轴”的一种通俗叫法。在 Live2D 官方编辑器Live2D Cubism Editor中每个参数对象都可以理解为一个“轴”。比如角度 X头部左右旋转角度 Y头部上下俯仰角度 Z头部左右倾斜也就是歪头视线 X眼珠左右看视线 Y眼珠上下看呼吸胸部/肩膀起伏身体 X / 身体 Y / 身体 Z身体在空间中的移动与旋转把这些轴加在一起你很容易凑出“九个轴”。实际上官方还提供了更多参数轴比如“脸颊红晕”“泪腺”“口型”等。所以“九轴”并不是一个标准术语而是玩家社区对“多方位操控”的一种戏称或者简化记忆。这里面真正需要理解的是轴的多少不等于模型的灵活程度。一个轴定义得再全如果部件没有绑定好模型照样是“死”的。反过来只有两三个轴但如果变形器和网格调节得到位也能表现出非常生动的效果。以“灵活卤蛋大脑袋”这种只做头部表情的作品为例通常只需要重点处理以下几个轴角度 X / Y / Z让整个头像可以转头、点头、歪头。眼神 X / Y让眼珠可以灵活看四周。眉毛相关参数实现挑眉、皱眉。嘴巴相关参数实现张嘴、闭嘴以及简单的口型。呼吸参数让整个大脑袋有轻微起伏增加“活着”的感觉。你不需要把官方所有参数都用上。真正的高手不是把所有参数填满而是用最少的参数做出最生动的表现。在 Live2D Cubism 编辑器的“参数”面板里你可以重命名、分组、设置参数范围。对于头像一个级别的作品建议把参数控制在 15 到 25 个之间太多会让自己在动画阶段手忙脚乱。3. 为什么一晚上能“搓出来”最小可行流程很多人学 Live2D 失败不是因为技术难而是因为一开始就打算做一个完整角色。完整角色意味着几十个图层、几十个参数、复杂的物理头发、裙子摆动、表情切换很可能一个星期都做不完。一晚上能“搓出”一颗活脑袋靠的不是天赋而是把范围压缩到了最小可行模型Minimum Viable Model。这里可以套用一下工程里的 MVP 思想先做最核心的验证再迭代完善。对于单个头像表情包来说MVP 就是“一张清晰的头像图 眨眼 视线跟随 头部转动 简单物理抖动”。这个范围对应的具体工作量如下准备一张高分辨率、结构清晰的正面头像图自己画的、约稿的、或者公开版权素材拿到分好层的 PSD 文件。在 Cubism 编辑器中导入 PSD自动生成部件层次。为眼睛、眉毛、嘴巴、头部创建必要参数。使用“自动生成网格”功能手动微调网格。在参数上记录关键帧让眼睛能眨让嘴巴能张。为头发、腮帮、脸颊等部位添加“物理摆动物体”或变形让动作更柔和。在时间轴上做一段约 5 秒的表情动画。导出为视频或 GIF。从零开始、完全没有经验的话这八个步骤大概需要 4 到 8 小时。如果你操作系统熟悉又有一点美术基础压缩到一晚上是完全现实的。所谓“灵活大脑袋”本质就是在“头部转动参数”和“眼睛视线参数”上下功夫让静态图面的各个部件围绕同一个中心产生视差感。这个视差感做得好大脑就会自动脑补出立体空间觉得这颗头真的在“转”。4. 环境准备Live2D Cubism 编辑器与素材要求4.1 工具清单做 Live2D 需要三样东西绘画软件Photoshop 或者能导出 PSD 的工具如 Krita、PaintTool SAI 也可以但 PSD 兼容性最好的还是 PS。这一步不是必须如果你的素材已经包含分层 PSD可以跳过绘画环节直接进入编辑器。Live2D Cubism Editor官方编辑器目前主流版本是 Cubism 5版本以官方发布为准。编辑器是付费软件但有免费版和试用期个人学习完全够用。Cubism 的配套运行时 SDK如果想把模型接入 iOS、Android、Unity 或网页需要下载对应的 SDK。这一步可以后面再说一开始只做动画输出用编辑器自带的渲染导出功能即可。很多新人在搜索“live2d 下载免费”“live2d cubism 安装包”这其实指的都是 Live2D Cubism Editor 的官方下载渠道。认准官网不要随便在第三方下载站拿安装包避免拿到捆绑恶意软件的版本。4.2 关于版本问题不同版本的 Cubism Editor 打开的项目文件相互之间可能不完全兼容。例如Cubism 3 和 Cubism 5 的项目文件结构就不同。所以我建议一步到位直接使用当前的最新版本并用它自带的格式保存项目。在搜索引擎搜教程时注意看教程发布的年份如果教程用的是 Cubism 3/4 的界面功能有差异但核心思路是一样的。4.3 素材准备怎样的 PSD 更容易做出好效果一个适合 Live2D 的 PSD 应该具备以下特点图层按部件拆分左眼、右眼、双眼皮、上睫毛、下睫毛、眉毛、鼻子、嘴巴、牙齿、舌头、脸颊红晕、头发后层、头发前层、脖子、身体等各自独立。分辨率足够建议画布边长不低于 1000 像素。分辨率太低变形时边缘会产生明显锯齿和模糊。边缘不留杂色抠图要干净否则变形时容易出现白色描边或者色块。有重叠区域比如头发可以分为后层、中前层、前层这样头部转动时一缕一缕的头发会有层次感。新手最容易踩的坑是把所有元素都画在同一个图层里然后导入 Cubism发现没法单独控制眼睛和嘴巴。如果你手里已经有整张图但没有分层 PSD可以考虑用小尺寸的图快速临摹一份分层图或者找一个公开的 Live2D 练习素材。5. 从一张图到一颗活头完整实操流程这一部分是全文的核心。我会按步骤拆解并给出每一步的操作思路和验证方法。为了让流程可执行我会把文件路径、面板名称和注意事项都写清楚。5.1 导入分层 PSD打开 Cubism Editor新建项目选择自己的 PSD 文件。在导入设置中Cubism 一般会保留图层层级。导入完成后左侧的“模型”面板会显示你所有图层并且自动开启了“自动建网格”的初始状态。如果你的 PSD 图层命名混乱建议先回到 Photoshop 里规范命名常见的命名方式是“名称_部位”idle_头发后层 idle_左眼 idle_右眼 idle_眉毛左 idle_眉毛右 idle_嘴巴 idle_脸颊这样导入后你一眼就能找到对应部件不用反复切换图层显示。操作到这一步画面里应该能显示你的角色头像但还不会动。下一步是创建参数。5.2 创建参数并在部件上记录关键帧在参数面板中点击右侧“”号创建以下参数以头部表情包为例参数名称最小值默认值最大值作用说明角度X-30030头部左右旋转负左正右角度Y-30030头部上下俯仰负低头正抬头角度Z-30030头部左右歪头眼神X-101眼珠左右看眼神Y-101眼珠上下看眨眼0010 睁开1 闭上眉毛上扬-101负为皱眉正为挑眉嘴巴张开0010 闭嘴1 张大注意角度 X/Y/Z 的取值范围不一定要严格按照 30。你可以在关键帧里手动拖动以视觉效果为准。关键帧的调节方式不是拖动参数滑块而是“在时间轴上的某个位置把部件移动到对应位置然后在参数行上记录关键帧”。这里有一个新手最容易绕晕的地方以前面创建的“眨眼”参数为例我要在参数值为 0 时让眼睛保持睁开在参数值为 1 时让眼睛闭合。操作方法是选择左眼和右眼部件。在参数面板中把“眨眼”设为 0。在这个状态下把眼睛网格调整为“睁开”的形状通常你不需要调因为这是 PSD 原始状态。在“眨眼”参数行上点击“记录关键帧”。然后把“眨眼”参数改为 1。手动把眼睛网格缩成一条缝或者移动上眼皮顶点使其覆盖眼珠。再次记录关键帧。这样当你拖动“眨眼”参数从 0 到 1 时眼睛就会由睁到闭形成眨眼动画。这里要说一个重要的操作手感问题直接缩放整个眼睛图层会看起来很假。因为真实眨眼时上眼皮向下移动下眼皮基本不动眼珠被遮盖。正确的做法是选中眼睛网格的顶点只把上半部分的顶点向下移动让眼皮像真正的眼皮一样合下来。如果你很难拖出真实感可以用 Live2D 的“变形路径”功能先画一条闭合线然后沿这条线做网格变形。5.3 变形器让“转头”不再生硬只有部件移动还不够。比如头部从正面转到侧面时眼睛和嘴巴不会只是单纯地平移它们会跟随脸部的曲面发生轻微压缩和透视变化。这时候要用到“变形器”Deformer。你可以把变形器理解为“装在部件外面的一个控制壳”。你给一个变形器绑定多个部件顶点然后只需要调节变形器的位置和角度所有绑定的部件会一起动。更厉害的是变形器允许嵌套使用。建立一个适用于头部转动的变形器组在左侧图层面板中创建一个“变形器”分组命名为“头部整体”。把头发后层、左右眼、左右眉、嘴巴、脸颊、头发前层都拖到这个组下。用选择工具在画布中框选整个头部所有顶点。在“参数”面板中选择“角度X”在 0 位置记录关键帧。将角度X改为 30然后手动把“头部整体”变形器向左旋转或平移让头像呈现侧面视角。记录“角度X30”这个关键帧。此时你拖动角度X参数会发现整个头像作为一个整体在“转动”。但如果你想更自然还需要用一个更精细的操作只调整前层头发和眼睛的位移让它们与后层头发产生视差形成“头部真的转过去了”的纵深感。这一步比较考验耐心也是“灵活卤蛋大脑袋”能给人“灵活”感的关键。小技巧是转头时靠近镜头一侧的眼睛变化幅度略大另一侧眼睛略小刘海前层与脸部的位移方向略有不同。5.4 网格调整与权重当你拖动参数时可能会发现某个部件的边缘出现明显拉伸或扭曲。这时候需要进入网格编辑模式手动调整顶点位置和所在权重。Cubism 的网格默认自动生成时均匀分布。但如果你的部件很大且变形幅度也大就需要在局部增加顶点密度。操作方法选中需要调整的部件。进入“网格”编辑模式。在变形剧烈的位置右键添加顶点。拖动顶点位置使变形的中间过渡更平滑。这里要强调一个经验网格不是越多越好。顶点太多会导致相邻顶点互相牵制变形计算复杂也更容易出现抖动。对于头部表情包每片区域的网格建议控制在 20 到 50 个顶点之间。还有一个经常踩的坑给部件绑定参数时有时候拖动画布里的控制点会不小心把顶点的“位置残留”留在了别的参数上。如果你发现某个部件在角度X 和角度Y 上都产生意外位移可以先检查是否在“参数关键帧记录”面板中把该参数记录到了错误的值。解决办法是把该参数的关键帧全部删除重新记录。5.5 物理效果让大脑袋“活”起来Live2D 的物理引擎是可选的但对表情包来说加一点点物理效果质感会立刻提升。在 Cubism 编辑器中“物理设置”面板允许你把某些物体设置为“摆动物体”。比如脸颊、耳朵、头发、腮帮在头部转动时会因为惯性产生轻微延迟摆动。也就是说当头部已经转到最右侧时头发和脸颊的某些点还会继续向前移动一小段再缓慢恢复。操作思路切换到“物理”面板。新建一个物理设置组。把需要模拟飘动的部件比如头发前层、双马尾、或者大脑袋的腮帮拉进组里。设置“重力方向”“空气阻力”等参数默认值即可。播放测试动画如果摆动幅度太大调小物理强度或把“惯性”降低。对于“灵活卤蛋大脑袋”一类的头像不建议开太强的物理否则整个头晃起来像果冻反而滑稽。稍微有一点“肉感”抖动效果最好。物理参数的具体数值和你的项目分辨率、部件大小有关系没有固定模板。你需要自己做一个小动画反复播放然后根据肉眼效果调整。这个步骤不要急物理效果调 20 分钟到半小时很正常。5.6 时间轴做出 5 秒表情动画完成参数绑定和物理设置后可以开始做动画输出。切换到“动画时间轴”面板。点击“新建动画”然后在时间轴上设置关键帧。制作一个 5 秒表情包的常规思路0 秒初始状态所有参数为 0表情安静。1 秒眨眼。把“眨眼”参数从 0 拉到 1再回到 0。2 秒眼神向右看然后回正。3 秒头部轻微歪头。4 秒嘴型说话或嘟嘴。每种动作在时间轴上对应一段关键帧你可以拖动每个关键帧的位置来调整节奏。Live2D 时间轴的默认插值方式一般是线性或缓动曲线如果不协调可以右键关键帧选择“贝塞尔曲线”或“缓动曲线”进行调整。注意动画关键帧不能和模型的参数默认值冲突。比如你定义了“眨眼”参数为 0 时眼睛睁开结果动画里在 0 秒处把“眨眼”参数设成了 1模型会保持闭眼状态。6. 导出与验证如何输出可动的表情包 / GIF / 视频当动画预览效果满意后需要导出。Live2D Cubism Editor 自带的导出功能支持视频、序列帧、GIF 和 WebM 等格式。如果你需要 GIF 表情包可以直接选择“导出为 GIF”设置每帧的时长和尺寸。如果你需要更灵活的后期处理建议先导出为 PNG 序列帧再通过工具合成。6.1 直接导出 GIF在 Cubism 编辑器中打开动画时间轴选择“预览”模式确认动画循环正常。菜单里选择“文件 导出动画 导出为 GIF”。设置导出范围、帧率建议 12 到 15 帧文件更小。设置尺寸宽度建议不超过 480 像素方便作为表情包使用。点击导出。导出完成后用图片浏览器打开 GIF检查关键动作是否流畅。如果出现卡顿或丢帧说明帧率低于动画关键帧变化速度可以调高帧率后重新导出。6.2 导出序列帧并用 FFmpeg 合成视频或 WebP如果你想要更好的兼容性建议导出 PNG 序列帧再用 FFmpeg 处理。先导出序列帧。Cubism 导出选项中选择“导出为 PNG 序列”设置输出目录。导出结果会有多张连续编号的 PNG。然后在命令行中进入该目录执行ffmpeg -framerate 30 -i frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4这条命令的作用是把frame_0001.png、frame_0002.png等序列帧合成为一个 30 帧每秒的 H.264 编码 MP4 文件。FFmpeg 是免费开源工具你可以从官网下载对应系统的版本。如果想输出 WebP 动图可以执行ffmpeg -framerate 15 -i frame_%04d.png -lossless 0 -compression_level 6 output.webpWebP 在网页端体积小、清晰度高比 GIF 更适合作为博客配图或页面前端素材。6.3 导出前的安全验证清单导出前建议先完成以下检查每个部件在动画范围内移动时都不会超出画布边缘。眼睛闭合时眼珠完全被眼皮覆盖没有穿帮。嘴巴张开时嘴唇内侧或牙齿不会出现明显撕裂感。物理摆动幅度正常没有出现头发穿透眼睛、脸颊穿过下巴的情况。动画循环连接处没有突变最后 1 帧和 0 秒第 1 帧保持一致。如果存在穿帮回到模型页面修正网格和顶点位置而不是在动画输出阶段硬调。穿帮问题在模型阶段解决成本最低到序列帧阶段基本只能重做。7. 常见问题与排查方法下面这些坑几乎是每个 Live2D 新手都会遇到的。我按现象列出方便直接查阅。问题现象可能原因排查方式解决方案参数滑块拖动了部件没反应部件没有绑定该参数或绑定在了错误参数上查看部件属性中的参数绑定列表重新选中部件网格记录关键帧到正确的参数行眨眼时下眼皮也跟着上移网格顶点选择和变形路径设计不合理进入网格编辑检查下眼皮是否被选入变形范围取消下眼皮顶点的绑定只让上眼皮顶点移动头部转动角度比较大时脸部边缘撕裂网格过疏或变形幅度大于网格承受范围放大检查撕裂区域在撕裂处增加网格顶点并微调顶点位置物理抖动幅度太大像“果冻人”物理强度参数设置过大播放动画观察物理幅度降低物理强度或减小摆动部件的惯性导出 GIF 体积过大帧率太高分辨率太大颜色数多查看导出文件属性降低帧率到 12 到 15 帧尺寸缩到 480 以下项目文件在新旧版本 Cubism 中打不开版本不兼容查看项目文件保存格式尽量统一使用官方最新版不要混用旧版软件动画播放时模型瞬间跳变关键帧不连续或两端关键帧值不一致检查时间轴各参数在两端关键帧的数值设置缓动曲线或复制首帧数值到末帧褶皱、阴影区域变形后出现明显扭曲阴影图层未单独分图层作为整体参与变形查看图层面板是否将阴影与底色合并在 PSD 中拆分阴影层重新导入8. 从玩票到正式项目工程化建议如果你只是想做一颗“灵活卤蛋大脑袋”发朋友圈上一章已经够用了。但如果你想继续往 Live2D 虚拟主播、游戏立绘、表情包生产线方向发展建议在第一天就养好工程习惯。8.1 命名规范是底层生产力PSD 图层命名混乱导入 Live2D 后你会非常痛苦。建议统一规则英文字母、数字、下划线不要用中文和空格。部位前缀统一hair_back、hair_front、eye_l、eye_r、brow_l、brow_r、mouth、face。需要物理摆动的部件在命名中加入_phys便于识别。如果同一部位有多层加序号hair_front_01、hair_front_02。这样在 Cubism 左侧图层面板中整理组结构时效率会高很多。8.2 参数管理先做减法再做加法新建参数之前先问自己这个参数是否需要单独控制能否用已有参数组合实现例如“眉毛上扬”和“眉毛倾斜”可以合并为一个参数组在数值变化过程中做一个“挑眉”的路径。如果你把它们拆成两个参数动画阶段就要同时维护两个轴的数值复杂度翻倍。建议在模型阶段只保留核心参数额外表情需求通过“表情文件Expression”来实现而不是把模型参数表塞满。8.3 版本管理与备份Live2D 项目文件本身是文本格式包含了网格、参数、关键帧信息。它不便于版本对比但你可以用 Git 管理整个项目目录。这样每次动大手术之前可以先提交一次版本万一改坏了可以回滚。说一个更实在的备份技巧在 Cubism 编辑器中每完成一个里程碑比如完成基础参数、完成眨眼、完成头部转动、完成物理、完成动画就手动保存项目副本并在副本命名中带上日期Live2D_Heda_20250121.cmo3 Live2D_Heda_20250121_bak_phys.cmo3另外一定要备份原始 PSD。以后无论项目损坏、升级版本、重新调整网格都离不开它。8.4 动画输出前先检查循环点表情包和虚拟主播模型最大的不同在于表情包往往需要无缝循环播放。这意味着你的动画第一帧和最后一帧必须保证数值一致否则循环处会有一个明显的“跳变”。导出前可以在时间轴面板选中所有关键帧检查第一帧和最后一帧所有参数的取值。8.5 安全问题如果你计划把模型接入自己的应用或网站注意下载 Cubism Editor 和 SDK 时使用官方渠道不要使用第三方重新打包的“免费版”。不要随意打开陌生人发来的.cmo3或.moc3文件谨防包含恶意脚本绑定。使用 Live2D 制作的模型素材注意确认原画素材的版权许可。很多免费素材不允许商用商用前要仔细阅读授权协议。9. 总结与下一步学习方向这篇教程的核心是想帮你建立一条“从一张图到一颗活头”的最小可行路径。你不需要先学完所有 Live2D 功能才能做作品而是先做出一个足够简单的作品然后在这个作品上不断往里面增加细节。这种“先完成再完美”的思路比看十篇教程都有效。如果按照本文走完一遍你应该已经能亲手做出一颗会眨眼、会看人、会轻微转头的“灵活大脑袋”。这也说明你已经理解了 Live2D 最核心的三个东西参数、变形器和物理模拟。下一步如果你还想继续突破可以按这个顺序深入做出真人风格或动物风格的头像练习复杂网格变形。研究表情文件Expression做出喜怒哀乐的表情切换。把模型接入 Live2D 官方 SDK在 iOS、Android 或 Unity 中实现实时交互。尝试完整角色建模从头到脚配合头发物理和裙摆物理。一晚上搓出大脑袋靠的不是天赋而是“范围控制”和“核心参数优先”。把目标拆得足够小你也能做到。收藏这篇文章周末挑个晚上打开 Cubism开始你的第一颗会动的头。