タグ: Photoshop

1-1 PSDの準備【Live2D Cubism3 入門講座】

対応するペイントソフトについて

Live2Dは2Dイラストを動かすことのできるソフトウェアになりますが、単体でお絵描き機能は付いていません。他のペイントソフトとの連携を前提としています。

元絵として読み込める形式はPSDとなります。
その為PSD形式で出力できるペイントソフトを準備しましょう。

  • Photoshop(推奨)
  • CLIP STUDIO PAINT(推奨)
  • SAI
  • メディバンペイント

上記以外にもPSD出力ができ、レイヤー機能があれば用いることが出来ます。

本チュートリアルで解説するモデルについて

Live2Dには公式サンプルモデルがいくつもあります。

桃瀬 ひより

Cubism3対応サンプルモデル

シンプルモデル

Cubism2にて初心者向け学習モデルとして提供されていたモデル

いずれもLive2Dを学習する上でありがたいモデルではあるのですが、Live2Dの基礎の基礎を解説していくにあたってはさらにシンプルなモデルを用いて行きます。

(´・ω・`)ショボーン君です。
非常にシンプルな形状で簡単そうですね!

今回はあらかじめPSDファイルを準備しましたので以下のURLからダウンロードをして下さい。
(自分でPSDを準備したい方はページ下部に仕様を載せています)

PSDファイル ▶ Download

それでは次回から早速モデリングの解説に入っていきましょう。

次 > 1-2 PSDインポート 

 




[1UP]元絵データを自分で用意する場合

(´・ω・`)ショボーン君PSDを見てもらえれば分かるのですが、構造はいたって簡単です。


上記画面は
CLIP STUDIO PAINT

レイヤー構造は以下の通り

  1. 左眉毛レイヤー
  2. 右眉毛レイヤー
  3. 左目レイヤー
  4. 右目レイヤー
  5. 口レイヤー
  6. 顔レイヤー

顔文字で表すと以下の通り

  1. (´・ω・)
  2. (´・ω・`)
  3. (´・ω`)
  4. ω・`)
  5. (´・ω・`)
  6. (´・ω・`)

手書きでも構いませんし、文字入力ツールで顔文字を書いても構いません。
6番の顔の肌と、目や口、眉のパーツが別レイヤーになっていることに注意してください。

準備が出来たら次へ進みましょう!

次 > 1-2 PSDインポート 

この髪の毛メイキング動画が気になる

厚塗りの髪の毛の塗り方で非常に参考になりそうなメイキング動画があったのでご紹介!

メイキング動画

ツールはPhotoshopを用いているようです。

私も同じような手法で厚塗りを行いますが、明度と彩度の選び方が段違いですね。
立体感と髪の毛の質感の表現は見習いたいです。
P_20150613_124212 すごいにゃ

スクリーンショット

まずはじめにシルエットを大まかに描いていますね。
すでに私とはやり方が違うのですが、このやり方もなかなか良さそうなので今度取り入れて描いてみたいですね。
ScreenShot00418

その後髪の毛のラフを描いていくようです。
私はここの順序が逆ですね。ラフ線を描いてから下塗りします。
ScreenShot00419

ベースとなる基本の着色ですね。
どうやら先ほどのラフの上にクリッピングマスクを使って色を乗せていますね。
乗算あたりを使っているようですがちょっと字が読めないです(´・ω・`)
ScreenShot00420 ScreenShot00421

その後一度髪の毛のレイヤーを結合し、再度新たにクリッピングマスクを設定したレイヤーを作って、そこで描き込んでいくようです。
頭頂部から描き込んでいくようです。
ScreenShot00422

必要に応じてレイヤーはどんどん結合して行くようですね。そして新たにレイヤーを作ってそちらに描き込むようです。
レイヤーの結合基準は何なんでしょうね?
私は上手く描けたかなと思った時に結合していますね。
ScreenShot00423
 ScreenShot00424

クリッピングマスクを使っていないところもあるようですね。
何かしらの理由があるのか、もしくは必要なかっただけでしょうかね。
少なくともレイヤーが複数増えているということは、何かしらのレイヤーモードを使っているのだと思われます。
ScreenShot00425
  ScreenShot00426

最終的なレイヤー構成はこんな感じで描き終えていますね。
ここからレイヤーを全結合して、最終的な調整を行っています。
ScreenShot00427
ScreenShot00428


なんとなく描く流れに共通点はありましたが、
肝心の色彩や明度の選び方、立体感や質感の出し方は自分で描いて覚えるしか無いですね。
l1501

はちゃち的、畳テクスチャの作り方

畳テクスチャが必要になったので、せっかくなので自作してみることに。

ScreenShot00190

案外いい感じに出来たのじゃないかな?
l8828

以下はググりつつ試行錯誤した工程を備忘録代わりにメモです。
注意:講座と違いざっくりとした内容です。

[制作環境] Photoshop CC 2014

畳テクスチャの作り方メモ

手順1

4500pixelくらいのキャンバスを新規作成しました。
(サイズに特に理由はない)

まずはキャンバスを黒く塗りつぶします。

ScreenShot00153

手順2

新規レイヤーを作成し、白いラインを引きます。

ScreenShot00154

線を複製して縞模様にしていきます。

ScreenShot00156

手順3

白線レイヤーに「ぼかし(ガウス)」をかけます。

ScreenShot00171 ScreenShot00172 ScreenShot00173

手順4

新規レイヤーを作成し、グレーで塗りつぶします。

ScreenShot00175

グレー濃度は以下の感じ

ScreenShot00176

手順5

グレーレイヤーに「ノイズを加える」処理を施す。

ScreenShot00177 ScreenShot00178

手順6

ノイズを加えたグレーレイヤーに、「ぼかし(移動)」をかける。

ScreenShot00179 ScreenShot00180

手順7

グレーレイヤーの描画モードを「差の絶対値」にする。

ScreenShot00181

以下実行結果

ScreenShot00182

手順8

レイヤーを全て結合し、「色相・彩度」にて色相補正を行う。

ScreenShot00184

右下の「色彩の統一」に☑チェックを入れ、数値を試行錯誤しながら微調整していく。

ScreenShot00186

OKで確定すると以下の様になる。

ScreenShot00187

これを保存すれば畳テクスチャの完成!

最後に

毎月Adobeに5千円上納しているわけですからPhotoshopも使わないと損だとは思っているんですけれどね…
どうしてもお絵描きのメインソフトがCLIP STUDIO PAINTで出番の無いPhotoshop先生です。

Photoshopは解説出来るほど把握出来ていませんので簡単な説明とスクリーンショットだけでしたが如何だったでしょうか?
個人的には復習兼備忘録としてよかったのでまた何か学んだら残していきたいですね。

CIMG0096