56
Contents CLIP STUDIO PAINT で「うごくイラスト」を作る手順と「まば たき」などの簡単なうごくイラストを描く方法、アニメ作りに 欠かせない基礎知識や「中割り」について解説していきます。 CLIP STUDIO PAINT Ver.1.5.2 うごくイラスト うごくイラスト の 作り方 作り方 & 描き方 描き方 01 うごくイラスト制作の手順 .......................................................... 2 02 うごくイラストの練習 .................................................................. 15 03 アニメーション作りの基礎知識 ................................................ 26 04 中割りしてみよう ........................................................................... 36 05 線画のコツ ......................................................................................... 48 CELSYS、CLIP STUDIO、CLIP、QUMARION、IllustStudio、ComicStudio は、株式会社セルシスの商標または登録商標です。 Windows は米国 Microsoft Corporation の米国およびその他の国における登録商標です。 Macintosh、Mac OS は米国 Apple Inc. の米国およびその他の国における登録商標です。 Adobe、Adobe ロゴ、Adobe Reader は、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国 における商標です。 その他、記載されております会社名または製品名は、各社の商標または登録商標です。 本書(データである場合も含む)は、法律の定めのある場合または権利者の承諾のある場合を除き、いかなる方法にお いても複製・複写することはできません。 商標および著作権について 1

CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

  • Upload
    letruc

  • View
    232

  • Download
    1

Embed Size (px)

Citation preview

Page 1: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

Contents

CLIP STUDIO PAINT で「うごくイラスト」を作る手順と「まばたき」などの簡単なうごくイラストを描く方法、アニメ作りに欠かせない基礎知識や「中割り」について解説していきます。

CLIP STUDIO PAINT Ver.1.5.2

うごくイラストうごくイラストのの作り方作り方 && 描き方描き方

01 うごくイラスト制作の手順 .......................................................... 2

02 うごくイラストの練習 ..................................................................1503 アニメーション作りの基礎知識 ................................................2604 中割りしてみよう ...........................................................................3605 線画のコツ.........................................................................................48

● CELSYS、CLIP STUDIO、CLIP、QUMARION、IllustStudio、ComicStudio は、株式会社セルシスの商標または登録商標です。

● Windows は米国 Microsoft Corporation の米国およびその他の国における登録商標です。

● Macintosh、Mac OS は米国 Apple Inc. の米国およびその他の国における登録商標です。

● Adobe、Adobe ロゴ、Adobe Reader は、Adobe Systems Incorporated(アドビ システムズ社)の米国ならびに他の国

における商標です。

● その他、記載されております会社名または製品名は、各社の商標または登録商標です。

● 本書(データである場合も含む)は、法律の定めのある場合または権利者の承諾のある場合を除き、いかなる方法にお

いても複製・複写することはできません。

商標および著作権について

1

Page 2: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

うごくイラスト制作の手順

CLIP STUDIO PAINT PRO、および DEBUT版では、パラパラマンガのような 24フレーム

までのアニメーションを作ることができます。まずはうごくイラスト制作の基本的な手順を見

ていきましょう。

※この講座では、CLIP STUDIO PAINT PRO を使用しています。また、画像は開発中のものが含まれるため、実際と異なる場合があります。

(1)ファイルの準備

1. CLIP STUDIO PAINT を起動し、[ファイル]メニュー→[新規]を選択します。

2

Page 3: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2. [新規]ダイアログが開きます。ダイアログ下部にある[うごくイラストを作る]にチェッ

クを入れます。

3.[セルの枚数]を設定します。初期設定では12枚のセルが作られるように設定されています。直接入力するか、右側の▲をクリックしてプルダウンから枚数を選択します。

[うごくイラストを作る]のフレームレート(※)は、初期状態で「6」に設定されています。そのため、仮に4 .0秒間の作品にしたい場合はセルの枚数を

6(1 秒間のセル数)×4(秒)=24 

なので[24]にします。

※「うごくイラスト」機能(DEBUT/PRO)では、最大24フレームまで作成できます。※フレームレート:1秒間に使用するセルの枚数。

3

Page 4: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

4. [OK]をクリックし新規キャンバスを作成します。

これでファイルの準備が整いました。

5. 最後に、[ウィンドウ]メニュー→[タイムライン]で[タイムライン]パレットを表示さ

せます。タイムラインは、セルを順番に並べてイラストを動かすための機能です。うごくイ

ラストを作る場合は、常に[タイムライン]パレットを表示しておくようにしましょう。

キャンバス作成時に設定したセルは、自動的にタイムラインに指定されています。

参考

キャンバス作成後にセルを新しく作成した場合は、タイムラインへセルを指定する必要があります。タイムラインへのセルの指定は、指定したいフレームをクリックして選択後、右クリックで開くポップアップから指定したいセルを選んで行います。

注意:タイムライン上でセルが指定されていないと、セルの内容は編集できません。セルに描画できないときはタイムラインを確認しましょう。

4

Page 5: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(2)セルにイラストを描く

1. [レイヤー]パレットにあるアニメーションフォルダーには、キャンバス作成時に設定した

セルの枚数だけレイヤーが作成されています。このレイヤーが、うごくイラストを構成するセ

ルになります。

2. また、レイヤーフォルダーを一つのセルとして扱うこともできます。

単純なイラストであればレイヤーにそのまま描いていけばよいのですが、複雑なイラストの場

合は、[レイヤー]パレットの中にレイヤーフォルダーを作成して、その中で作業するとよい

でしょう。

5

Page 6: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(3)動きのイラストを描く

ライトテーブル機能により、ほかのセルを参照しながら動画用のセルを描くことができます。

1. すでに描いたイラストを参考にして、違うセルに動きの過程を描いていきます。

参考

レイヤーフォルダーには、その中に複数のレイヤーを作ることができます。「下書き」「線画」「塗り」「影」などとレイヤーを分けて作業するのに便利です。

6

Page 7: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2. ライトテーブルを使うために[ウィンドウ]メニュー→[アニメーションセル]を選択

し、[アニメーションセル]パレットを表示します。

3.[レイヤー]パレットで描画するセルを選択した状態で、参照したいセルを[レイヤー]パ

レットから[アニメーションセル]パレットの[セル固有ライトテーブル]にドラッグ&ド

ロップすると、ライトテーブルに登録できます。

7

Page 8: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

4. ライトテーブルに登録した画像が薄く表示されるので、それを参考に動きのイラストを描い

ていきます。

参照セルを表示 動きのイラストを下書き

動きのイラストを清書

8

Page 9: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

また、オニオンスキン機能を使うと、タイムライン上の前と後ろにあるセルを表示しながら作

業を進めることができます。[タイムライン]パレット→[オニオンスキンを有効化]で、前

後のセルが表示されます。

※動きのイラストを描く方法について詳しくは、「うごくイラストの練習」および「中割りしてみよう」を参照してください。

参考

オニオンスキンの設定は[アニメーション]→[アニメーションセル表示]→[オニオン

スキン設定]で変更できます。

9

Page 10: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(4)動きの確認

1.[タイムライン]パレット→[再生/停止]をクリックすると、タイムラインに指定した一連

のセルが再生されます。動きを確認しながら作業を進めましょう。

10

Page 11: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(5)完成したファイルを書き出す

うごくイラストが完成したら、連番画像やアニメーションGIF、動画ファイルを書き出してみましょう。

1. 連番画像の書き出し:[ファイル]メニュー→[アニメーション書き出し]→[連番画像]

より、セルを連番で書き出すことができます。

[連番画像書き出し設定]ダイアログで、ファイル名をつけ、画像形式を選んで[OK]をクリックすると連番画像が書き出されます。画像形式は PNG、BMP、JPEG、Targa、TIFF から選ぶことができます。

11

Page 12: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

参考

書き出した連番画像は、アニメーション GIFに加工したり、pixivの「うごイラ」に投稿できます。

pixiv に投稿するにはユーザー登録が必要です。うごくイラストの投稿は、ログイン後[作品投稿]→[うごくイラスト]より行えます。

[画像を複数選択してアップロード]から連番画像を開くと、[フレーム編集]画面になります。ここでは動きの確認や画像の追加などを行うことができます。

編集が済んだら右上の[情報入力へ]を押すとファイルがアップロードされます。

12

Page 13: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2.アニメーションGIFの書き出し:[ファイル]メニュー→[アニメーション書き出し]→[アニメーションGIF]を選択します。

保存先を選び、ファイル名をつけて[保存]をクリックすると、[アニメーションGIF出力設定]

ダイアログが表示されますので、[幅]・[高さ]・[出力範囲]・[フレームレート]・[ディザリン

グ]を設定できます。

[幅]・[高さ]は、初期状態でTwitterの投稿に適したサイズ (長辺560px)が設定されています。

参考

出力後に表示されるダイアログに、アニメーションGIFのファイルサイズが記載されています。ファイルサイズに上限のあるメディアに投稿する際は、ここでファイルサイズを確認しておきましょう。ファイルサイズを変更したい場合には、[アニメーションGIF出力設定]ダイアログの設定を変更して出力し直します。

13

Page 14: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3.ムービーの書き出し:

[名前を付けて保存] ダイアログで、[ファイルの種類] を[MP4] にして保存します。

14

[ムービー書き出し設定] ダイアログが表示されたら、設定内容を確認し、[OK] をクリックします。

[ファイル]メニュー→[アニメーション書き出し]→[ムービー]を選びます。

ムービーファイルは、Windows の場合AVI 形式ファイル(拡張子:avi)・MP4 形式(拡張子:mp4)に、Mac OS X の場合QuickTime 形式のファイル(拡張子:mov)・MP4 形式(拡張子:mp4)に書き出せます。ここでは、MP4 形式のムービーファイルに書き出す手順を紹介します。

Page 15: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

うごくイラストの練習

まばたき

動きの少ないシーンでも、キャラクターをまばたきさせるだけでぐっとアニメーションらしく

なります。ここでは簡単なまばたきの作り方を練習してみましょう。

(1)パーツを分ける

1. 図のキャラクターにまばたきの動きを加えます。まず 1枚のレイヤーにイラストを描き、

動かす「目と眉」を切り分けて別のアニメーションフォルダーに収めていきます。

2. [選択]ツール→[選択ペン]サブツールを選択し、「目と眉」が描かれた部分の選択範囲

を作ります。

参考

「目と眉」がほかの線画と重なっていなければ[折れ線選択]サブツールなどを使ってもよいのですが、眉の端が前髪に重なっているので、より細かく選択範囲を作成できる[選択ペン]サブツールを選びました。

15

Page 16: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. 選択範囲ができたら、コピー&ペーストします。[レイヤー]パレットに「目と眉」のレイ

ヤーが作成されます。

4. [アニメーション]メニュー→[新規アニメーションフォルダー]を選び、アニメーション

フォルダー(「b」)を作ります。ここに「目と眉」レイヤーを入れます。

参考

[レイヤー]パレットに[アニメーション]→[新規アニメーションフォルダー]でアニ

メーションフォルダーを作ると、[タイムライン]パレットにもアニメーションフォルダ

ーが表示されます。

注意:タイムライン上でセルが指定されていないと、セルの内容は編集できません。セルに描画で

きないときはタイムラインを確認しましょう。

16

Page 17: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

5. もとのイラストは、[消しゴム]ツールで「目と眉」を消してしまいます。

6. これで動く「目と眉」のパーツとそれ以外の動かないパーツでフォルダー分けができまし

た。それぞれのアニメーションフォルダーの名称は動くほうを「b」、動かないほうを「a」と

しています。

17

Page 18: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(2)閉じた目を描く

1. 「b」フォルダーにレイヤーを 2つ追加します。これでフォルダーの中に 3つのレイヤーが

できました。それぞれは以下のようにする想定です。

「1」レイヤー…開いた目(現状の目と眉)のセル

「2」レイヤー…中割りのセル

「3」レイヤー…閉じた目のセル

2. [タイムライン]パレット、アニメーションフォルダー「b」のフレームに「1」「2」

「3」を指定します。

18

Page 19: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. [アニメーション]メニュー→[アニメーションセル表示]→[オニオンスキンを有効化]

を選択し、オニオンスキンを表示します。「1」レイヤーの開いた目を確認しながら、「3」レ

イヤーに、閉じた目を作成します。ポイントは、まぶたを下げる動きをイメージすることと、

閉じた目の幅、立体感に注意して描くことです。

開いた目の下のほうに描きます。仮にこれが上の位置だと、まぶたが下がる動きには見えなく

なります。

4. 眉は、やや眉尻を下げたほかは、ほとんど「1」レイヤーの眉と同じです。

19

Page 20: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(3)中割りする

1. 開いた目と閉じた目の中割りを「2」レイヤーに描きます。オニオンスキンを表示させ、

「1」と「3」の画像を確認しながら中割りします。

2. 「1」と「3」の目頭、目尻を運動曲線で結びます。動きにメリハリを出すため、中割りの

アタリはやや上のほうにとります。スローイン・スローアウトの要領で、動く幅に差をつける

とリアルな動きに近づきます。

参考

運動曲線

運動曲線とは、動きの軌道を表す線のことです。原画から動きを立体的に導き出し、ポイントを決めて線を結びます。

スローイン・スローアウト

ものが動き出すときに、徐々に加速していくことをスローイン。その逆で、動いていたものが停止する際に、段々とスピードが落ちていくことをスローアウトといいます。アニメーションでは、ゆっくりと動かしたいときは絵と絵の間の距離を短く。早く動かしたいときは距離を離します。

※動きのつけ方について詳しくは、「アニメーション作りの基礎知識」を参照してください。

20

Page 21: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. アタリに合わせて中割りのまつげを描きます。眼球の上にまぶたが重なっていることを意識

してていねいに描画していきます。

4. 中割りの瞳は、降りるまぶたにつられるようにすこし下げて描きます。

(4)動きを確認する

1. [タイムライン]パレットの任意のフレームを右クリックし、表示されたポップアップメニュ

ーでタイムラインにセルを指定していきます。動かない「a」フォルダーには「1」レイヤーし

かないので、すべて「1」と指定します。

21

Page 22: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2.「目と眉」の「b」フォルダーのタイムラインは「1」→「3」→「2」→「1」→「1」としま

した。

まず「1(開いた目)」→「3(閉じた目)」としたのは、中割りを入れないことで一瞬でパチ

っと目を閉じた動きにしたかったためです。

開くときは「3(閉じた目)」→「2(中割り)」→「1(開いた目)」とします。目を閉じる

時より、開いた時のほうが中割りの分遅くなります。

22

Page 23: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. [タイムライン]パレットで[再生/停止]をクリックして動きを確認します。これで完成

です。

はねるボール

最初の1枚から順にセルを描いていく(送り描き)方法を「ストレートアヘッド・アクショ

ン」といいます。原画制作が必要ないような単純な作画なら、この方法でアニメーションが作

れます。ストレートアヘッド・アクションで、単純な図形の動くイラストを作ると「動きを描

く」練習になるのでやってみるとよいでしょう。

1. 1枚目のレイヤーに最初のセルを描きます。順々にセルにボールを描いていきます。

23

Page 24: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2. 2枚目のセルを描きます。[アニメーション]メニュー→[アニメーションセル表示]→

[オニオンスキンを有効化]でひとつ前のセルを表示させるとやりやすいでしょう。

ボールはこのような動きをするように想定しています。

3. 続けて 3枚目、4枚目……と順々に描いていきます。

24

Page 25: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

4. 最終的にこのような軌道のボールを描いた動くイラストができました。

放物線の上のほうは動きが遅く、だんだん加速してはね返り、また徐々に減速していく様子

を、スローイン・スローアウトの要領で描いています。また地面にぶつかったボールをひしゃ

げて描いているのもポイントです。

このような動くイラストなら、短時間で制作できます。ソフトの使い方を覚える助けにもなる

ので、ぜひ練習してみてください。

25

Page 26: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

アニメーション作りの基礎知識

絵に生命を与えるアニメーション

アニメーションは、少しずつ変化をつけたたくさんの絵を、画面上で素早く入れ替える事で、

見ている人に“動いている”と錯覚させる表現手法です。CLIP STUDIO PAINT のバージョ

ンアップによって、誰もが手軽にアニメーションを作ることができるようになりました。

しかし単純な図形を動いたように見せるだけならともかく、複雑な絵をアニメーションにする

のは、何も知らない初心者には難しいでしょう。アニメ制作を始めたいなら、絵を動かすため

のテクニックを知っておいたほうが、だんぜん有利です。

本講座では、プロの技術を紹介しながら、アニメ制作の基礎を解説していきます。

26

Page 27: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(1)ポーズトゥポーズ

アニメ制作において最もポピュラーな手法といえるのが「ポーズトゥポーズ」です。

これは動きのポイントとなる絵だけを先に描き、次いで間の絵を描き加えて動きを完成させる

手法です。

原画

ポイントになる絵を描きます。アニメの制作現場では、このような絵を「原画」といいます。

上図は動きの要所要所に原画を入れたイメージです。

動画

原画と原画の間をつなぐように絵を描いて、動きをスムーズにします。この作業を「動画」と呼

びます。

動画に関しては後述の「(3)動画とは」で、さらに詳しく解説します。

27

Page 28: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(2)動きの法則

アニメーション制作では、物理法則に基づいたイメージの変化を表現し、説得力のある動きを

生み出す必要があります。特に動きのポイントとなる原画制作は、「動きの法則」の理解が求

められる作業です。

この項では基本的な動きの法則を紹介していきます。動きの描写に役立ててください。

●フォロースルー(残し)

描くモチーフによって、動きの中心となる部分と、末端に位置する部分との間にタイミングの

ズレが生じます。このような表現をフォロースルーといいます。

例では、武器の動きが停止したあと、慣性の法則によってふさが右側に振れますが、武器に固

定された根本と、先端の動きにズレが生じているように描いています。

アニメーションはタイミングや形状によって、質感や重量感を表現できます。フォロースルー

は長い髪の毛や布などの表現に適したテクニックです。

28

Page 29: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

●予備動作

ジャンプするキャラクターを描くとします。人間が飛び上がる前には、必ず一度ヒザを曲げま

す。そのような本動作に移る前に入る動きを予備動作といいます。

予備動作の理解を深めるには、まずは観察することです。大きい動き、素早い動きの前には、

必ず何かしらの予備動作が入ると考え、人間のさまざまな動きを観察してみましょう。

●スローイン・スローアウト

ものが動き出すときに、徐々に加速していくことをスローイン。その逆で、動いていたものが

停止する際に、段々とスピードが落ちていくことをスローアウトといいます。アニメーション

では、ゆっくりと動かしたいときは絵と絵の間の距離を短く。早く動かしたいときは距離を離

します。

スローイン・スローアウトを効果的に描くことで、物理法則に従ったリアルな動き、緩急を極

端につけたアニメらしいメリハリのある動きを表現することができます。

29

Page 30: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(3)動画とは

“動画”は一般的には動く映像を指す言葉ですが、アニメの制作現場では動きを表現する素材

のことを指します。

アニメーターの作業手順では、原画は完成後にトレスされます。そして動画スタッフによって

トレスされた原画と原画の間に中間の絵が描かれていきます。この“間”を割る作業を「中割

り」と呼び、原画(トレス)と中割りでできた素材が“動画”です。

※従来のアナログ作業での作業分担です。今後デジタルでの作画作業の普及と同時にこのよう

な制作工程は変わっていくでしょう。

30

Page 31: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(4)動画制作のポイント

動画の肝は「中割り」作業です。原画によって動きの要所は決められるので、その間に絵を描

いていく中割り作業は、簡単だと思う人もいるかもしれません。

しかし、実際にやってみるとこれがなかなか厄介な作業です。何しろ最終的な動きのクオリテ

ィはこの作業によって左右されるので、少しでも手を抜くと途端に動きがガタついてしまいま

す。

ここで紹介するテクニックを参考に、少しでも正確で効率のよい作業を心がけ、なめらかな動

きの表現を目指しましょう。

運動曲線

運動曲線とは、動きの軌道を表す線のことです。原画から動きを立体的に導き出し、ポイント

を決めて線を結びます。

単純に原画と原画を結ぶのではなく、それらの絵の間でどんな動きが発生しているのかをイメ

ージすることが大事です。

31

Page 32: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

タップ割り

タップ割りとは、ふたつの原画にある絵の位置がそれぞれ離れているとき、重ねるように近づ

けることで、簡単に正確な中割りをしやすくする方法です。

●タップ割りの流れ

1. 図のような二つの原画があるとします。

2. 二つの原画の、動きの軌道上に中割りの絵を描きます。中割りの顔は、図のあたりの位置に

なりそうです。

32

Page 33: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. 中割りの顔の正確な位置をつかむため、運動曲線をとり、動きの中間地点を導き出します。

ここではキャラクターの「あご」をポイントにして運動曲線をとっています。

4. 二つの原画の「あご」が、中間地点に重なるように、原画を動かします。すると二つの原画

の顔が重なります。この重なった絵をもとにして中割りの顔を描きます。

5. 顔が描けました。タップ割りとはこのように前後の絵を重ねて描く手法です。

33

Page 34: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

中割りの手順

仮に原画と原画の間に3つの中割りを入れたい場合は、中間にある中割りから順に描いていき

ます。中割りの順番を見ていきましょう。

1. まず、図のように原画(1)と原画(5)の中間の中割りの絵(3)を描きます。

2. 原画(1)と中割りの絵(3)の間で中割りします。

これが中割りの絵(2)になります。

34

Page 35: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. 中割りの絵(3)と原画(5)の間で中割りします。

これが中割りの絵(4)になります。

4. 中割り完了です。

最後に

アニメーターは漫画家やイラストレーターのような「絵を描く仕事」です。しかし、漫画家の

ようにストーリーを考える事はありませんし、イラストレーターのようにデザインから彩色ま

での制作を一人で行うわけでもありません。

アニメーターが「考え」「デザイン」するのは時間です。このポーズの次にどんなポーズへ繋

げるのか。間に何枚の絵を入れるのがベストか。どのくらい間隔を詰めるか。動きの間に何コ

マの間を設けるか。そういったことを 1 ミリ単位、または 1/24 秒という単位で作業していま

す。

しかしながら、“ものを動かしたい”という原始的な欲求や楽しさにプロとアマチュアの垣根

はありません。そしてデジタルツールは鉛筆や絵の具といった画材以上にこれからのアニメー

ションの可能性を広げてくれることでしょう。

35

Page 36: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

中割りしてみよう(ポーズトゥポーズ)

原画があることを前提に、中割りの過程を解説していきます。中割り作業はタップ割りで行い

ます。

(1)中割り用のセルを作成する

1. 図のような原画に、絵をなめらかに動かすための絵を描いていきます。

2. アニメーションフォルダーに原画を描いた後で、動画用のアニメーションフォルダーを作

ります。原画のあるアニーションフォルダー(「原画」)をクリックして選択し、[レイヤ

ー]メニュー→[レイヤーを複製]します。

今回は原画と動画の作業をアニメーションフォルダーで分けて作業します。このような工程は

必須ではありませんが、原画と動画を分けてアニメ制作(アナログ)した経験のある人は、セ

ルの整理がやりやすいかと思います。また原画のバックアップにもなります。

36

Page 37: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. [レイヤー]パレットに「原画のコピー」アニメーションフォルダーが作成されました。

4. アニメーションフォルダー名をダブルクリックし、「動画」と名称を変更します。また、

「原画」アニメーションフォルダーは、目のアイコンをクリックして不可視状態にします。

5. 「動画」アニメーションフォルダー内には原画のコピーがあります。この二つの原画の間に

[レイヤー]メニュー→[新規ラスターレイヤー]でレイヤーを作成。この「1a」レイヤーを

中割り用のセルにします。

37

Page 38: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

7. 「1a」をタイムラインに指定します。[タイムライン]パレットの 2 フレーム目をクリッ

クして選択し、右クリックから開くポップアップメニューから「1a」を選びます。

※新しく作ったセルは、タイムラインに指定しないと編集できません。

※[タイムライン]パレットが表示されていない場合は、[ウィンドウ]メニュー→[タイム

ライン]を選択します。

8. 「1a」をタイムラインの 2 フレーム目に指定したために、「2」レイヤーのセルがタイムラ

インから外れてしまいました。そのため、改めて[タイムライン]パレットの 3 フレーム目に

「2」を指定します。

(2)セル番号を変更する

1. セル番号をわかりやすい形に揃えることにします。まず「動画」アニメーションフォルダーにあるレイヤーをすべて選択([Ctrl]キーを押しながらクリック)します。

38

Page 39: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2. [アニメーション]メニュー→[セル指定]→[レイヤーの順番で正規化]を実行します。

3. レイヤーの名称がそれぞれ「1」「2」「3」になりました。[タイムライン]パレットの表示も連動して「1」「2」「3」になっています。

39

Page 40: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2. [アニメーションセル]パレットの[セル固有ライトテーブル]に、[レイヤー]パレット

から「1」「3」のセルをそれぞれドラッグ&ドロップし登録します。これで、原画を参考にし

ながら中割りができるようになりました。

(3)ライトテーブルに原画を登録する

1. [レイヤー]パレット上で、中割り用のセル(「2」レイヤー)を選択します。

40

Page 41: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

参考

[セル固有ライトテーブル]に登録した画像は、表示されたハンドルを使って、移動・拡

大・縮小・回転することができます。

ライトテーブル上の画像を編集しても、本来のセルには影響はありません。

41

Page 42: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

参考

[アニメーションセル]パレットにあるアイコンでもライトテーブルの画像を編集すること

ができます。

❶ライトテーブル上のレイヤーの位置をリセット

ライトテーブル上のレイヤーの位置を初期の状態に戻します。

❷ライトテーブル上のレイヤーを左右反転

ライトテーブル上のレイヤーを左右反転します。

❸ライトテーブル上のレイヤーを上下反転

ライトテーブル上のレイヤーを上下反転します。

❹不透明度の対象を全体/個別で切り替え

オンにすると[全体]になり、すべてのセルにあるライトテーブルの不透明度を設定するこ

とができます。オフ([個別])の場合は、セルごとに設定したライトテーブルの不透明度

を個別に設定します。

❺不透明度のスライドバー

ライトテーブルの不透明度を調整します。

❻レイヤーカラーを変更

ライトテーブル上のレイヤーの色を変更することができます。初期状態ではクリックすると

青色の[レイヤーカラー]になりますが、[レイヤープロパティ]パレットから[レイヤー

カラー]を好きな色に変更することができます。

[レイヤーカラーを変更]から[サブカラー]を選択すると、[サブカラー]に指定した色

に変更できます。

42

Page 43: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

(4)タップ割り

1. アニメーションフォルダーの外に新規レイヤーを作成し、「運動曲線」と名づけます。この

レイヤーに、原画をもとにした運動曲線を描きます。

2. 原画のキャラクターの鼻をポイントにして、運動曲線を描きました。運動曲線は原画間の

動きをイメージしながら作成してください。

3. 運動曲線上の中間(中割りしたい位置)に印を打ちます。

43

Page 44: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

4. [アニメーションセル]パレットで、ライトテーブルに登録した二つの原画を、3 で打った

印を目安に、中間地点に近づけます。まずは[セル固有ライトテーブル]にある「1」をクリ

ックして選択します。

5. 自動的に[ツール]パレットで、[操作]ツール内の[ライトテーブル]サブツールが選択

されています。キャンバス上をドラッグするとライトテーブル上の画像が移動します。

※画像は解説のためにライトテーブル上の「1」のセルを濃く、「3」のセルを薄く表示してい

ます。

44

Page 45: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

6. 同じように[セル固有ライトテーブル]にある「3」をドラッグ操作で中間地点に近づける

ように動かします。

7. 中割りの絵を描きやすくするため、[アニメーションセル]パレットで、ライトテーブル上

の画像の不透明度を調整します。不透明度の変更は、上部のスライドバーをドラッグして動か

すか、数値をクリックして直接入力します。

45

Page 46: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

8. 重なった二つの原画で、中割りがイメージしやすくなりました。演技を考えながら中割りし

ていきます。

9. 手などの動きが大きな部位は、1~8 のタップ割りでは位置がつかめないので、改めて「運

動曲線をとる」→「タップ割り」の手順で中割りします。

46

Page 47: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

10. 中割り終了です。

47

Page 48: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

線画のコツ

一般的なアニメーションでは、描かれた線の太さをセルによって変わらないように、そろえて

描きます。線の太さや強弱をほかのセルと合わせながら描くのは、慣れないうちはなかなか大

変です。思い通りの線が描けるよう繰り返し練習しましょう。

(1)線を描くツール

アニメーションの現場では、鉛筆を使って原画を描き、トレスマシンという機械でセルに転写

しています。しかし CLIP STUDIO PAINTでは、[鉛筆]ツールより、[ペン]ツールのほうが余計な濃淡が出ないので向いているでしょう。

(2)トレスしてみよう

アニメーション作りでは、線をほかのセルからトレスする作業があります。ここでは長い線を

トレスする過程を見ていきましょう。

1. 図の服のラインをトレスします。ツールは[ペン]ツール→[Gペン]サブツールを使用します。

48

Page 49: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2. [ナビゲーター]パレットで[右回転]や[左回転]をクリックして、キャンバスを回転し、線を引きやすい角度にします。

3. 長いストロークの線を何度かに分けて引いていきます。まずは1ストローク目。線に“入り抜き”が出るように描きます。“入り抜き”を入れることで、次の線がつなぎやすくなりま

す。

※「描きにくいな」と感じたら、線を引く前に 1~2 回素振りをして、カーブを手に覚えさせるとよい

でしょう。

参考

線の引き始めを細く、だんだん太くしていき、線を抜くときはまた細くなるように描くこ

とを“入り抜き”といいます。

49

Page 50: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. 1ストローク目の“抜き”で細くなった線に 2ストローク目を描き、太さを揃えます。

4. 続いて 3ストローク、4ストローク目も、同じように作業しやすい角度にキャンバスを回転させつつ、線の太さを揃えながら描いていきます。

3ストローク目

4ストローク目

50

Page 51: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

5. 線が引けました。

(3)線をあとから調整してみよう

線幅修正

ツールやフィルターを使って、線幅を調整することができます。

1. ツールを使って線幅を調整するときは、[線修正]ツール→[線幅修正]サブツールを選択し、変更したいところを塗るように指定します。

51

Page 52: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

[ツールプロパティ]パレットで設定をすると[線幅修正]サブツールを使ったときの結果を

調整できます。

2. [フィルター]メニュー→[線画修正]→[線幅修正]からも線幅の調整を行うことができます。

52

Page 53: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

ベクターレイヤーで線を調整する【PRO/EX】

CLIP STUDIO PAINT PRO や EX 版では、ベクターレイヤーを使って線を引くことができま

す。ベクターレイヤーに描かれた線は、制御点を持ちます。この制御点を編集することで線の

形や太さなどを変えたり、線の位置をつまんで調整したりできます。

1. 描画する前に、ラスターレイヤーのセルをベクターレイヤーにします。

2. [レイヤー]メニュー→[レイヤーの変換]を実行。[レイヤーの変換]ダイアログが開いたら[種類]から[ベクターレイヤー]を選択します。これでベクターレイヤーに描画できる

ようになりました。

53

Page 54: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

3. ベクターレイヤーでもラスターレイヤーと同じように線が引けます。

4. [線修正]ツール→[制御点]サブツールは、制御点を移動したり削除したりとさまざまな編集をすることが可能です。

[制御点]サブツールは[ツールプロパティ]パレットで[処理内容]を変更しながら使うと

よいでしょう。

54

Page 55: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

5. [ベクター線つまみ]サブツールは、描いてある線をつまんで調整できます。

6. [ベクター線つなぎ]サブツールは、離れた線と線とをつなぐことができます。

55

Page 56: CLIP STUDIO PAINT Ver.1.5.2 うごくイラストの 作り方vd.clip-studio.com/.../lib/clipstudio/paint/common/CSP_animeguide.… · うごく. イラスト制作の手順. clip

2016年 4月 第3版発行

2015年12月 第2版発行

2015年10月 初版発行

発行者・発行所 株式会社セルシス

創作活動応援サイト『CLIP』http://www.clip-studio.com/

CLIP STUDIO PAINTうごくイラストの作り方&描き方

56