给hexo博客添加Live2d小人

1.安装 hexo-helper-live2d 插件

1
npm install --save hexo-helper-live2d

2.在根目录下config.yml 添加以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# live2d
live2d:
  enable: true  # 是否启动
  scriptFrom: local # 默认
  pluginRootPath: live2dw/  # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/  # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/  # 模型文件相对与插件根目录路径
  tagMode: false  # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false  # 调试, 是否在控制台输出日志
  model:
    use: nepmaid  ## 模型文件
  display:
    position: right # 定位方向 left right top bottom
    width: 150  # 小人宽度
    height: 300 #  小人高度
    hOffset: -15  # 向 偏移
    vOffset: -15  # 像 偏移
  mobile:
    show: false  # 手机端是否显示
  react:
    opacity: 0.7  # 模型透明度

3.EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo! (github.com)上下载live2d-widget-models-master包

4.在根目录下新建名为live2d_models的文件夹，复制 live2d-widget-models-master > packages > 中任意模型包到该文件夹下，如该图为miku模型

5.回到 config.yml 

1
2
model:
  use: live2d-widget-model-miku  ## 改为你使用的模型文件名
Live2D 入门

1.准备：图片分层

总体：头发、脸、身体

  • 头发：前发、两边的头发(双马尾)、后发、呆毛(如果有的话)

画画的时候原画被遮住的部分也不要忘记画出来。如果没有画的话，这部分在动的时候可能会看到图层断层，容易穿帮；

  • 脸：眼睛、鼻子、眉毛、嘴巴、轮廓、耳朵
    • 眼睛：眼睑、眼珠、眼白
      • 眼睑：外眼角、眼睫毛
      • 嘴巴：上嘴唇(需要给口腔内部的移动预留画出皮肤)、下嘴唇(需要给口腔内部的移动预留画出皮肤)、口腔内部
      • 轮廓：需要把有头发的部分用肌肤的颜色补充好，再把头部轮廓补完整，
  • 身体：脖子、躯干、手臂、腿部
    • 脖子：为了脖子在脸部动的时候不会出现断层，把脖子画到嘴巴的距离比较好
    • 躯干：躯干里有像缎带等想要动的地方的话，将它单独分图层出来
    • 手臂：以肩、肘两个支点将手臂分为大臂和小臂
    • 腿部：裙子、左脚、右脚

(使用PS)导出为PSD文件的时候，记得将线稿和上色区域图层合并到一起，然后把分层的图层大致分组，以便于在Live2D软件里更好地管理。

PS中似乎有Live2D导入用的脚本。

2.导入以及初级布线

导入并开始布线：导入PSD文件 - Ctrl+A全选 - 点击Auto自动布线按钮 - 标准形式布线

进入编辑模式细化布线：点击想要手动调整的图层 - Ctrl+E进入编辑模式，进行点的添加和删除

取消原有的布线：

工具栏的橡皮-擦掉想要删除的点(橡皮的大小可以按P在画布上左右拖动变更)

在选择橡皮以外的工具的情况下按住Ctrl在画布上拖动+Delete,可以选择多个顶点删除

添加自己的布线：

选择”追加顶点”图标(钢笔头+加号)，在画布上点击就可以添加顶点了

（会自动在点之间生成线）

添加错点的时候，选择”删除顶点”图标(钢笔头+减号)，点击想删除的点即可

在添加点的时候按住Alt也可以删除点

打好点后想要连线的话，按”自动连接”就可以自动连线

生成了想要的形状后，在画布上方点击”√”按钮保存操作

布线方式：

(一定要用网格将图像包裹好)

做出好看的正三角形；

注意按中线划分打点；

参考官方示例模型；