いよいよ切り分けスタート！イチから分かるイラストのパーツ分け指南Part2〜アニメ・モーションの作り方！番外編〜

2016.10.26

投稿者： 

このエントリーをはてなブックマークに追加

こんにちは、びすこです。
今回も引き続き、パーツ分け指南をガンガンやっていきます！

前回はパーツ分けについての説明や推奨ソフトの説明、
レイヤー整理を行ったところで終わりました。
今回はいよいよパーツの切り分けに入ります！

前回の記事はこちら。
これであなたもパーツ分け職人！イチから分かるイラストのパーツ分け指南Part1〜アニメ・モーションの作り方！番外編〜

4.パーツ分けの大まかな流れ

パーツ分けに入る前に、
まずは大まかな流れを説明します。

パーツを切り分ける時、外側の部位から
大まかに切り分けていくようにすると、切り分けが楽になっていきます。

%e5%88%87%e3%82%8a%e6%8a%9c%e3%81%8d%e9%a0%86%e5%ba%8f2

今回の場合だと、
リボン→後ろ髪→腕（左右）→焼き芋→胴体（マフラー、首含む）→顔（耳含む）→前髪・後頭部・・・
といったように切り分けていくのがいいでしょう。

ただし、動きをよりリアルに近づけるのであれば、
大まかに切り分けた後、体の関節や、布の裏表などなどに沿って
パーツをさらに細かく切り分けていく必要があります。

例えば右ひじ下を細かく切り分けると、

%e5%88%86%e8%a7%a3%e8%a7%a3%e8%aa%ac
最低でもこのくらいのパーツ数が必要になります。
イラストによっては右手の指を関節別に分けることも・・・！

どこまで切り分ければいいのかはLive2Dなどに反映させた時の動かし具合で変わるので、
今回は大きな関節のみで、指など細かいパーツは切り分けないパターンで作業していきます。

全て切り分けた後、見えない部分を描き足していき、
レイヤー整理をして完成です。

5.パーツ分けをしていこう

いよいよパーツ分けの作業に入ります！
顔パーツは一旦置いておき、顔パーツ以外のパーツを切り分けていきます。

先ほど書いたように、外側のパーツから切り分けていくのですが、
まずは一番簡単なリボンから切り分けていきましょう。

前回のレイヤー整理で用意した、顔パーツ以外の着色と線画を結合したものです。

%e5%88%87%e3%82%8a%e6%8a%9c%e3%81%8d%e5%89%8d

今回からパスを使用していきますので、
パスの引き方を確認しつつ、作業を進めていきましょう。

ペンツールを選択し、まずはキャンバス上をクリック。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-11-51-36

すると、アンカーポイントと呼ばれる黒い点が表示されます。

次に、方向を変えたいところで点を打ち、
クリックしたまま適当な方向にドラッグすると、
新たな黒い点に２つの持ち手(ハンドル)の付いた点ができるので、
線画に沿ってガイドを調整し、マウスボタンを離します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-11-52-10

マウスボタンを離したら、
持ち手のうち進行方向に伸びているひとつの点を
optionキーを押しながら進行方向に曲げます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-11-52-45

そのあと、先ほどと同じように方向を変えたいところで点を打ちます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-11-52-55

これを繰り返してパーツをパスで囲っていきます。

囲えたら、始点をクリック。これでパス打ちが完了しました。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-11-53-32_2

上のように、何もパーツが存在していないところ（赤丸で囲ってある点）は適当に点を打ってしまってOKです。

パス打ちが完了したら、Photoshop画面左上のメニューから「選択…」をクリック。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-05-22

または、キャンバス上を右クリックで「選択範囲を作成」を選んでもOKです。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-05-35

この設定でOKを選択。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-06-21

すると選択範囲が作成されました。
この状態で、切り抜き対象のレイヤーにマスクを作成します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-07-41

これでリボンを切り抜くことができました。

リボンを切り抜いたら、次のパーツを切り抜いていきます。
ここからが効率アップの上で最も重要なところです！

先ほどマスクを作成したレイヤーを複製。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-11-47
※ショートカットキーのcommand+Jで楽チン！


そのうち1つのレイヤーのマスクの色調を反転。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-12-02
※ショートカットキーのcommand+Iでこの作業も楽チン!

この作業をすることで、切り分けたパーツと切り分けていないパーツを
それぞれ別々のレイヤーに作成することができるはずです。

そして、色調を反転したものをさらに複製。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-12-39
ここで、一旦切り分けが完了しているパーツのレイヤーは
一旦非表示にしておくと後々の作業がしやすくなります。


レイヤーを複製したら、引き続きガンガン切り抜いていきます！

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-19-49

次のパーツを切り抜くためのパスを引き、選択範囲を作成したら、
複製したうち1つのレイヤーのマスクを選択し、
選択範囲を“黒で”塗りつぶします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-22-31

白で塗りつぶすと上手くいかないので、
必ず“黒で”塗りつぶしましょう。

次に、選択範囲は解除しないままもう一つのレイヤーのマスクを選択し、
選択範囲を反転させます。（※ショートカットキーはcommand+Shift+I）

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-26-41

その後、選択範囲を黒で塗りつぶしてここでようやっと選択解除をします。

これで２つ目のパーツの切り抜きが完了しました！
切り抜きが完了したパーツのマスクはまだ適用はせずにそのままでOKです。
上の2つのレイヤーを表示・非表示繰り返してみると、
ちゃんとパーツ分けされているのがわかると思います。

%e5%88%87%e3%82%8a%e6%8a%9c%e3%81%8d%e5%be%8c
※画像は切り分けられていることをわかりやすく見せるための画像です。

３つ目以降のパーツに取り掛かるときは、
切り抜きがまだ終わっていないパーツがある方のレイヤーを複製し、
作業していきます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-12-34-32

この場合はマスクの白の割合が多いレイヤーを複製し、
２パーツ目と同じように切り抜いていきます。


パーツを大まかに切り分けられたら、
次の工程でパーツの細分化・描き足しを行っていきます！

が、今回はここまでとさせていただきます。

最後にPhotoshopのみではありますが、便利な機能の紹介です。


■どうしてもペンツールが上手く扱えない・・・！そんな時は？

実は、ある程度自動でパスを引いてくれる便利な機能がPhotoshopにあるんです！

それは、ペンツールとはまた別の「フリーフォームペンツール」という機能なんですが、
この機能を使ってパーツ分けをすることも可能です。

ペンツールのアイコンを右クリックして「フリーフォームペンツール」を選択します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-14-13-11

次に、左上のオプションの「マグネット」にチェック。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-14-13-25

切り抜きたいパーツの始点をクリックし、線画に沿ってそのままポインタを動かすと
自動でパスを生成してくれます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-14-16-40

あとはパスの形を微調整すればパーツを切り抜くことができます！

ただしこの方法、そこまで正確ではないのと、
線画がある程度はっきりしていて、
そんなに細かくない絵にしか使えません。
この機能に頼りすぎないように気をつけましょう。

手作業でパスを引けるようになれば、
フリーフォームペンツールでパスを引くよりも早くパスを作成できるので、要練習です！

まとめ

パーツは上手く切り分けできましたでしょうか？
パスの扱いに慣れるまで時間がかかるかもしれませんが、
慣れればパーツ分けがすごく楽になります。

より詳細なパスの引き方については、よろしければこちらもご覧ください。

◆Photoshopペンツール使い方の基本【初心者向け】
◆Photoshopを使ってベジェ曲線を描く方法【初心者向け】

クリスタなどの場合は、選択ペンなどで代用ができると思いますので、
クリスタ・SAIユーザーの方も試してみてください！

それでは、また。

The following two tabs change content below.
Avatar photo
Twitter のプロフィール

びすこ

現在修行中の新人デザイナー。 いつかビッグでスーパーなデザイナーになることを夢見て日々奮闘中。 洋服と音楽とキャラクターグッズに囲まれて暮らしていて、 二次元アイドルガチ勢。実はてっくんの生みの親。
一覧へ

コメントを残す