顔の動き

Live2Dで顔に動きをつける【Part2】

Live2Dで顔の向きを変化させるような割と難しいパラメータを作成する場合には、参考になるイラストがあると作業が捗ります。この記事では、左、上、正面の3方向に顔を動かすパラメータを作成する様子を紹介しています。
体の動き

Live2Dで衣装がなびく動きを作成する

Live2Dで衣装がなびくアニメーションを作成する作業を行いました。波送りのアニメーションは難しいです。
Cubism SDK for Web

Vue+Cubism SDK for Web で「しりとり」

Vue.js、kuromoji.js、Cubism SDK for Webを使用して「しりとり」のアプリケーションを作ってみました。この記事では「しりとり」とLive2Dモデルのアニメーションを連動させるまでの過程を紹介しています。
スポンサーリンク
Cubism SDK for Web

Cubism 4 SDK for Web の開発環境を構築

Live2DをWebブラウザで動作させる Cubism 4 SDK for Web の開発環境を構築する作業を行います。この記事では Cubism 4 SDK for Web R1、Visual Studio Code、Node.js を導入して、サンプルデモを表示するまでの手順を紹介しています。
Unity+Live2D

MotionGraphicsの構成要素を学ぶ【Part2】

モーショングラフィックスの構成要素(動き)を実際に作成しながら学習を進めています。今回はフラクタルノイズと波の要素をピクトグラムのアニメーションに加える作業を行います。
Unity+Live2D

MotionGraphicsの構成要素を学ぶ

モーショングラフィックスは、回転、変形、移動、拡縮など様々な要素(動き)で構成されています。この記事ではTiler(オフセット・回転系)とGlow(ブラー・光系)を使用した映像を作成します。
Unity+Live2D

モーショングラフィックスの練習

この記事ではモーショングラフィックス(図形やテキスト、イラストなどに動きや音を加えたもの)の基本的な要素Easing、TrimLine、LineWeight、Move、Scale、Blindを組み合わせて、オープニングの映像を作成するまでの過程を紹介しています。
Unity+Live2D

AviUtlでゲーム配信風の動画を作ってみる

この記事では Live2D のアバターの使用例として、ゲーム配信風の動画を作成するまでの過程を紹介しています。
チュートリアル

Photoshopで色を変更する

この記事では対象の色を変更するチュートリアルを紹介しています。対象の質感(陰影など)を維持した状態で、色だけを変更したいときなどに有効な方法です。
チュートリアル

Photoshopで空を置き換える

この記事ではカラーチャンネルを利用して、写真の空を置き換えるPhotoshopのチュートリアルを紹介しています。
体の動き

Live2Dで体の動きXを作成

この記事では、斜め右を向いているLive2Dのモデルを正面方向に動かすパラメータについて紹介しています。
顔の動き

Live2Dで顔の動きXとYを作成

この記事では、Live2Dで顔の動きを作成するにあたって、予め参考となる画像(正面を向いている画像や、上を向いている画像など)を用意して、それを基に顔を動かすパラメータを作成する様子を紹介しています。
顔の動き

Live2Dで顔に動きをつける【Part2】

Live2Dで顔の向きを変化させるような割と難しいパラメータを作成する場合には、参考になるイラストがあると作業が捗ります。この記事では、左、上、正面の3方向に顔を動かすパラメータを作成する様子を紹介しています。
体の動き

Live2Dで衣装がなびく動きを作成する

Live2Dで衣装がなびくアニメーションを作成する作業を行いました。波送りのアニメーションは難しいです。
Unity+Live2D

MotionGraphicsの構成要素を学ぶ【Part2】

モーショングラフィックスの構成要素(動き)を実際に作成しながら学習を進めています。今回はフラクタルノイズと波の要素をピクトグラムのアニメーションに加える作業を行います。
Unity+Live2D

MotionGraphicsの構成要素を学ぶ

モーショングラフィックスは、回転、変形、移動、拡縮など様々な要素(動き)で構成されています。この記事ではTiler(オフセット・回転系)とGlow(ブラー・光系)を使用した映像を作成します。
Unity+Live2D

モーショングラフィックスの練習

この記事ではモーショングラフィックス(図形やテキスト、イラストなどに動きや音を加えたもの)の基本的な要素Easing、TrimLine、LineWeight、Move、Scale、Blindを組み合わせて、オープニングの映像を作成するまでの過程を紹介しています。
Unity+Live2D

AviUtlでゲーム配信風の動画を作ってみる

この記事では Live2D のアバターの使用例として、ゲーム配信風の動画を作成するまでの過程を紹介しています。
体の動き

Live2Dで体の動きXを作成

この記事では、斜め右を向いているLive2Dのモデルを正面方向に動かすパラメータについて紹介しています。
顔の動き

Live2Dで顔の動きXとYを作成

この記事では、Live2Dで顔の動きを作成するにあたって、予め参考となる画像(正面を向いている画像や、上を向いている画像など)を用意して、それを基に顔を動かすパラメータを作成する様子を紹介しています。
Unity+Live2D

2DSTGにLive2Dのモデルを組み込んでみる

この記事ではLive2DのモデルをUnityの2Dシューティングゲームに組み込むまでの制作過程を紹介しています。WebGLでビルドしたサンプルも用意してあるので、PC環境の方は遊んでみてください。
Live2Dの機能

Cubism 4.0 の新機能 [拡張補間とマスク]

この記事ではLive2D Cubism4.0で追加された機能の中から、拡張補間とマスクの反転について紹介しています。髪や服などのアニメーションを自然な動きにしたいとき等に有効な機能です。
Live2Dの機能

Live2D Cubism 4.0 の新機能を使ってみる

この記事ではLive2D Cubism4.0で追加された機能の中から、アートパスについて紹介しています。アートパスで描画した線は色、幅、不透明度等を調整することができるので、輪郭線の他にも、モーショングラフィックスのような感じで使用することができます。
Unity+Live2D

[Unity+Live2D]コントローラーを持たせる

この記事ではLive2Dのアバターにコントローラーを持たせて、指の動きのパラメータを作成する過程を紹介しています。
チュートリアル

Photoshopで色を変更する

この記事では対象の色を変更するチュートリアルを紹介しています。対象の質感(陰影など)を維持した状態で、色だけを変更したいときなどに有効な方法です。
チュートリアル

Photoshopで空を置き換える

この記事ではカラーチャンネルを利用して、写真の空を置き換えるPhotoshopのチュートリアルを紹介しています。
Photoshopの機能

写真とイラストを組み合わせる【アニメ風】

この記事では Photoshop で写真をアニメ風の背景に加工して、イラストと組み合わせるまでの手順を紹介しています。
Photoshopの機能

グラデーションのプリセットを試してみる

この記事では Photoshop のメジャーアップデート(v21.0)で追加されたグラデーションのプリセットについて紹介しています。
色々なフィルタ

Photoshopで色々なモノクロ加工

この記事では「色調補正」と「Camera Rawフィルター」の2通りの手順で行うモノクロ加工について紹介しています。
色々なフィルタ

Camera Rawフィルタで写真を補正する

この記事では Photoshop の機能「Camera Rawフィルター」を使った写真の補正について紹介しています。プリセットを適用するだけで簡単にビビッドやマット、クールなどの補正を行うことができます。
Photoshopの機能

テキストの自由変形とワープ

この記事ではPhotoshopの機能「自由変形モード」と「ワープモード」を使用して、写真の内容に合わせたテキストの変形について紹介しています。
Photoshopの機能

Photoshopの対称モードを使ってみる

この記事ではPhotoshopの機能「対称モード」を使用して、シンメトリックな図形を作成する手順を紹介しています。
Photoshopの機能

Photoshopでコンテンツに応じた移動を行う

このページでは、写真の中に移動したいオブジェクトがある場合に有効なPhotoshopの機能「コンテンツに応じた移動ツール」について紹介しています。
Photoshopの機能

Photoshopの機能「自由変形」と遠近法

Photoshop(フォトショップ)で対象を変形させる機能の一つ、遠近法を使用した変形についてサンプルを交えて紹介しています。
Photoshopの機能

写真とイラストを組み合わせる【散歩】

このページではPhotoshopを使用して、動物の写真とイラストの合成について模索しています。
Photoshopの機能

写真とイラストを組み合わせる

このページでは画像編集ソフトPhotoshopを使用して、写真とイラストを合成する手順を2種類紹介しています。
Cubism SDK for Web

Vue+Cubism SDK for Web で「しりとり」

Vue.js、kuromoji.js、Cubism SDK for Webを使用して「しりとり」のアプリケーションを作ってみました。この記事では「しりとり」とLive2Dモデルのアニメーションを連動させるまでの過程を紹介しています。
Cubism SDK for Web

Cubism 4 SDK for Web の開発環境を構築

Live2DをWebブラウザで動作させる Cubism 4 SDK for Web の開発環境を構築する作業を行います。この記事では Cubism 4 SDK for Web R1、Visual Studio Code、Node.js を導入して、サンプルデモを表示するまでの手順を紹介しています。
Cubism SDK for Web

Chatterbot+Cubismで会話をしてみる

この記事ではLive2D Cubism3SDK for WebのモデルをChatterbot(機械学習ベースの簡易的な対話エンジン)のボディとして実装するまでの過程を紹介しています。
Cubism SDK for Web

Vue+Flask+Cubismで手書き数字を認識する

この記事では、手書き数字の判定結果をCubism SDK for Webに渡して、Live2Dのモデルを動かすまでの手順を紹介しています。
Cubism SDK for Web

Vue+Flask+CubismWebでアヤメの分類を行う

機械学習のライブラリ「scikit-learn」を使用したアヤメの分類結果を Cubism SDK for Web に渡して、Live2Dのモデルを動かすことを試みています。
Cubism SDK for Web

CubismWebでモーショングループを追加する

Cubism SDK for Webにモーショングループを追加して、任意のタイミングでモーションを再生することを試みています。
Cubism SDK for Web

Cubism SDK for Web を使ってみる

この記事では Cubism SDK for Web の基本的な動作(モデルの表示とアニメーション)について確認しています。
anime.js

anime.jsでstaggerを使ってみる

アニメーションのライブラリanime.jsのv3.0で追加されたStaggering animationsについて紹介しています。
Cubism SDK for JavaScript

Vue.jsとCubismJsで数字当て

この記事ではCubism SDK for JavaScriptとVue.jsを使用して、数字当てを行うモデルを作成します。現在はCubism SDK for Webに移行しているため、あくまでも参考程度に留めてください。
Cubism SDK for JavaScript

文字数を利用したリップシンクの生成

この記事ではCubism SDK for JavaScriptで、台詞の文字数からリップシンクを生成することを試みています。現在はCubism SDK for Webに移行しているため、あくまでも参考程度に留めてください。
Cubism SDK for JavaScript

Vue.jsとCubismJsで会話機能を実装する

この記事ではVue.jsとCubism SDK for JavaScriptを使用して、簡単な会話機能を実装する作業を行います。現在はCubism SDK for Webに移行しているため、あくまでも参考程度に留めてください。
animate.css

animate.cssでホバーエフェクトを実装する

このページでは、CSSのライブラリ「animate.css」を使用して、カーソルが重なったときのアニメーション(ホバーエフェクト)を実装する手順を紹介しています。
スポンサーリンク
タイトルとURLをコピーしました