【various sun】第16笑:——で? (3P/21P) 公開!!2020.10.14

【クリスタ】マウスでもイラスト(絵)が描ける!3次ベジェ曲線の使用方法!

3次ベジェ曲線サムネ

▼ イラスト・簡単な漫画なら【PRO版】

▼本格的な漫画・アニメーション制作なら【EX版】

 

皆さん、閲覧ありがとうございます。

山本電卓と申します。

 

漫画制作ソフトCLIP STUDIO PAINT(クリップスタジオペイント)が2020年4月にバージョン1.9.9にアップデートされまして、「3次ベジェ曲線」がとても使いやすくなりました!

公式アップデート内容紹介ページリンク

今回はその「3次ベジェ曲線」の使い方を紹介させていただきます◎

 

それではよろしくお願いいたします

( `・∀・´)ノ!

CLIP STUDIO PAINT(クリスタ)の「3次ベジェ曲線」とは

2種類の制御点で形成される曲線!

「3次ベジェ曲線」とは通過点」と「方向点」という2種類の制御点で成り立っている曲線をいいます。

(直線を描くことも可能です)

クリスタ:3次ベジェ曲線

「通過点」を基準にそこから伸びる「方向点」の向きと長さで線の形が決まります。

マウス操作可能!制御点をツールで配置して描く曲線!

「3次ベジェ曲線」の描画はツールを使用し、2つの制御点を配置することで行います

クリスタ:3次ベジェ曲線

線自体を描くわけではないのでゆがみのない均一でキレイな曲線を描くことができます!

 

その為、マウス操作でもイラストが描けるというのも大きな特徴といえるでしょう◎

 

その代わり、手で描いたような強弱や入り抜きのある線は描けません

描画中にも制御点を動かして線を調整・修正できる!

「3次ベジェ曲線」を使う利点は2つの制御点の配置次第で複雑な曲線でも描くことができ、尚且つそれを描画中に制御点を移動させて線の調整・修正ができるところです!

クリスタ:3次ベジェ曲線

これによって曲線の曲がり具合を自由に決めながら描画することができるのです!

アナログ制作CLIP STUDIO PAINT(クリスタ)制作との違い

アナログでキレイな曲線を描くとなると、「雲形定規」や「曲線定規」を使用しなければなりません。

 

雲形定規/曲線定規

 

しかし、「雲形定規」は曲線が固定されていますし、曲線を自由に変えられる「自在曲線定規」も描画中に曲線が変形されて線が歪んでしまったりと、思い通りに曲線が描けない場合が結構あります。

 

しかし、今回紹介する「3次ベジェ曲線」を利用すればキレイな曲線を自在に描画することができ、さらに修正も可能なのです!

CLIP STUDIO PAINT(クリスタ):「3次ベジェ曲線」の活用例!

いままではPhotoshopやillustratorで作成するのが一般的だったデザイン制作も、「3次ベジェ曲線」が描きやすくなったことによりCLIP STUDIO PAINTでも制作できるようになります!

マスコットキャラクター・ゆるキャラ

よく見るマスコットキャラクターやゆるキャラのイラストには均一な線で描かれているものも多いですね。

クリスタ:3次ベジェ曲線:ゆるキャラ

このようなイラストを描くには「3次ベジェ」を利用するのがいいですね◎

また、CLIP STUDIO PAINTでは「対称定規」というツールも使用できますので正面のイラストでしたら左右対称で描くこともできますよ◎

クリスタ:線対称定規

ロゴマーク・ロゴ文字

ロゴで使用するマークや文字は手描きではなくゆがみのない線の方が見栄えがいいですね。

クリスタ:ロゴ制作

ロゴそのものを作成するのもいいですし、漫画やイラストで使用するロゴを作成するにもいいですね◎

曲線のあるアイテムや建物(背景)

曲線を自由に描ける上、直線や角のある線も描けますので、アイテムや背景もより描きやすくなります。

クリスタ:ベース描画

クリスタ:ビル描画

「PRO版」でも「EX版」でも利用できる!

「3次ベジェ曲線」はCLIP STUDIO PAINT EXはもちろん、少しお安いCLIP STUDIO PAINT PROでも利用可能ですよ◎

CLIP STUDIO PAINT PRO

CLIP STUDIO PAINT EX

 

クリスタ:PROとEXの違い【クリスタ】PRO版とEX版の違い27項目全部を紹介します!! CLIP STUDIO PAINT:体験版【クリスタ体験版】無料でCLIP STUDIO PAINTをダウンロード・使用する方法-全工程の画像付き!- CLIP STUDIO PAINT:製品版【クリスタダウンロード版:コンビニ支払い】購入からインストールまでの方法-全工程画像付き!

 

次項から具体的な使用方法を

紹介していきます。

よろしければ参考にしてみて下さい◎

CLIP STUDIO PAINT(クリスタ):「3次ベジェ曲線」の描き方

※以降で紹介するウィンドウやアイコンなどが見当たらない場合は以下の記事を参考にしてみて下さい◎

CLIP STUDIO PAINT画面【クリスタ補足】ウィンドウ(パレット)やアイコンが説明されている場所に見当たらない時は?

クリスタで「3次ベジェ曲線」を描く準備をしよう!

「ベジェ曲線」ツールの設定をしよう!

まずは「図形ツール」を選択し、「サブツール」で「直線」を選択、さらに下部の一覧から「ベジェ曲線」を選択しましょう。

※「ベジェ曲線」は一覧の一番下にあります。一覧を下にスクロールして見つけて下さい。

クリスタ:ベジェ曲線

そして「ツールプロパティ」の「曲線」の項目で右端の「3次ベジェ」のアイコンを選択しましょう。

クリスタ:3次ベジェ曲線

これで「3次ベジェ曲線」を描けるようになります◎。

ブラシサイズなどの細かい設定はお好みで行いましょう!

描画するレイヤーは「ベクターレイヤー」がおすすめ◎

CLIP STUDIO PAINT特有の「ベクターレイヤー」に描画した線は「オブジェクトツール」や「線修正ツール」で描画後にも線の調整・修正ができます。

ですので個人的には線画だけでも「ベクターレイヤー」上に描いた方がいいかなと思います。

参考記事

ベクターレイヤー【これぞクリスタの特徴!】ベクターレイヤーでこんなことができる!!
MEMO

「ラスターレイヤー」で描画する場合は、「ツールプロパティ」内の「線・塗り」の項目でのアイコンの選択により描画結果が変わるので注意しましょう。

クリスタ:3次ベジェ曲線(線・塗り)

クリスタ:3次ベジェ曲線(ラスターレイヤー)

クリスタで「3次ベジェ曲線」を描いていこう!

それでは実際に「3次ベジェ曲線」を描いていきましょう。

※ペンで描画することを想定して説明いたしますが、マウスでも同じ作業が可能です。

 

描画で行うのは「通過点」の配置と「方向点」の角度と長さの指定です。

 

ペンで任意の場所をタッチし、そのままドラッグさせて下さい。

クリスタ:3次ベジェ曲線の描き方

最初にタッチした場所が「通過点」に、ドラッグしてペンを離した場所に「方向点」が配置されます。

「通過点」から「方向点」を伸ばすイメージですね。

クリスタ:3次ベジェ曲線(通過点と方向点)

1回この作業を行っただけでは線は描画されません。

「通過点」上に丸い点ができるだけです。

 

続けて同じ作業を行い、「通過点」が2つ以上配置された時にそれぞれの「通過点」の間に曲線が描画されます。

クリスタ:3次ベジェ曲線の描き方

 

この曲線の形を決めるのが「方向点」で、「通過点」から「方向点」までの角度・長さによって描画される曲線が変わります。

クリスタ:3次ベジェ曲線の描き方

※基本的に2つの「方向点」は一直線で繋がっています。

 

この操作により、曲線の曲がり具合を自由に決めることができるということなのです◎

 

この方法でどんどん「通過点」と「方向点」を配置していき、曲線を描いていきましょう!

 

クリスタ:3次ベジェ曲線

 

MEMO

「通過点」「方向点」の配置を1段階前の状態に戻したい時は、[Delete]もしくは[Back space]キーを押すか、右クリックを押しましょう。

iPad版(初期設定)では2本指タップで1段階前に戻ります。

クリスタ:3次ベジェ曲線(取り消し)

ここから改めて描画の続きを行うことができます。

 

ちなみにこの1段階戻る作業は「通過点」の数だけ行うことができます。

 

いろいろな描画方法

 

●ドラッグによる「方向点」の配置を行っている最中に[Space]キーを押しながらドラッグすると「方向点」までの長さ・角度を維持したまま「通過点」の位置を移動させることができます。

クリスタ:3次ベジェ曲線(通過点の移動)

[Space]キーだけを離してそのままドラッグを続けると再び「方向点」の配置作業に戻れます。

 

[Shift]キーを押しながら描画を行うと、「方向点」の角度を水平・垂直、45度刻みに配置することができるよになります。

クリスタ:3次ベジェ曲線(+Shiftキー)

※45度というのは初期設定です。「ツールプロパティ」もしくは「サブツール詳細」内の「角度の刻み」の項目で角度の数値を変更できます。

クリスタ:3次ベジェ曲線(角度の刻み)

 

[Alt(Option)]キーを押しながら描画を行うと、「通過点」から角を付けた曲線を描くことができます。

※この作業を行いますと、その「方向点」が付いている「通過点」が「角あり」の表示(□の表示)に変わります。

 

クリスタ:3次ベジェ曲線(+[Alt(Option)])

クリスタ:3次ベジェ曲線(角あり)

描画例

クリスタ:3次ベジェ曲線(角あり)

 

●ドラッグをせずにタッチだけで描画を行うと折れ線のように直線を描くこともできます。

クリスタ:3次ベジェ曲線(折れ線)

 

うまく曲線を描くコツ!

「3次ベジェ曲線」をうまく描いていくには実際自分で操作をしてみて感覚をつかむのが一番ですが、少しだけ私個人が思う描画のコツを紹介させていただきます。

●「予測線」が描きたい曲線の内側にくる位置に「通過点」を配置する

「ツールプロパティ」もしくは「サブツール詳細」内の「予測線を表示」にチェックを入れると描画後の線を予測した「予測線」が表示されるようになります。

クリスタ:3次ベジェ曲線(予測線)

しかしこの「予測線」はあくまで「通過点」を配置した瞬間の線を表示しているだけです。

 

ですのでこの「予測線」が描きたい曲線より内側になる位置にペンを当てて「通過点」を配置し、そこからドラッグで「方向点」を動かしながら線をふくらませるように曲線を作ると描きやすいかと思います。

クリスタ:3次ベジェ曲線(予測線)

 

 

●「通過点」「方向点」の数を少なめにすると描きやすい

「通過点」「方向点」が多い程複雑な線を描くことができますがその分調整・修正も難しくなります

クリスタ:3次ベジェ曲線(制御点の数)

 

慣れるまでは「通過点」「方向点」の配置を少なめにして描いてみましょう。

 

●ゆるやかな曲線は「通過点」同士の間隔を空ける・「方向点」までの距離を長くする・曲線に近付ける

●急な曲線は「通過点」同士の間隔を狭くする・「方向点」までの距離を短くする・曲線から遠ざける

 

クリスタ:3次ベジェ曲線(通過点の配置)

クリスタ:3次ベジェ曲線(方向点までの距離)

クリスタ:3次ベジェ曲線(方向点と線との距離)

この法則を知っていれば描画もしやすくなるかと思います。

 

●「通過点」は曲線の頂点でなく曲線の両サイドに配置するというイメージで描画する

これは人によって描きやすい描きにくいが分かれるかもしれません…!

私はこのやり方の方が描きやすいですね。

 

クリスタ:3次ベジェ曲線

1個目の「方向点」を描きたい曲線の大きさに合う長さで配置し、2個目の「方向点」で曲線のふくらみを調整するといった感じです。

クリスタ:3次ベジェ曲線の描き方

 

最初の描画で完璧に描く必要はない!

上記にて「3次ベジェ曲線」の描画方法を述べてきましたが、「だいたいこんなもんだろう」くらいの感覚で描画してもらって大丈夫です◎

それこそがこの「3次ベジェ曲線」の便利な所なのです。

詳しくは次項から!

うまく描けなくても大丈夫!描画中に曲線を調整・修正しよう!

「3次ベジェ曲線」は線自体をペンで直接描画するものではありませんのでどうしても完成の線が想像しにくいところがあります。

しかし、この「3次ベジェ曲線」は描画中でも自由に曲線を調整・修正することができます!

 

「通過点」「方向点」の配置調整

描画中に[Ctrl(Command)]キーを押しながら「通過点」や「方向点」をドラッグすることで「通過点」や「方向点」を移動させることができます。

●「通過点」の移動

クリスタ:3次ベジェ曲線(通過点の移動)

●「方向点」の移動

クリスタ:3次ベジェ曲線(方向点の移動)

この移動により、曲線を調整・修正させることができるのです。

 

MEMO

下の画像でも分かる通り、描画中の「方向点」表示は配置中のものと1つ前に配置したものしかありません。

クリスタ:3次ベジェ曲線(制御点の表示)

基本的には配置したての「通過点」「方向点」と1つ前に配置した「方向点」を調整・修正しながら描画を進める形になります。

 

[Ctrl(Command)]を押しながら「通過点」をタッチすることで表示してなかった「方向点」も表示させることはできますが、タッチする時にその「通過点」を動かしてしまう可能性もありますので注意しましょう。

 

「通過点」「方向点」の追加・削除

描画中、曲線上をペンでタッチするとその場所に「通過点」を追加させることができます。

クリスタ:3次ベジェ曲線(通過点の追加)

また、そのままドラッグすることで追加した「通過点」から伸びる「方向点」の角度・長さも同時に調整しながら配置することができますよ。

 

逆に、描画中に「通過点」をタッチすることでその「通過点」を削除することができます。

クリスタ:3次ベジェ曲線(通過点の削除)

MEMO

これは「サブツール詳細」ウィンドウの「連続曲線」の項目内にある「作成途中の制御点の追加・削除」のチェックを入れているとできる機能です。

クリスタ:3次ベジェ曲線(通過点の追加・削除設定)

曲線に角をつける

描画中に[Alt(Option)]キーを押しながら「方向点」をドラッグ移動させることで曲線に角つきの曲線として線を調整・修正することができます。

クリスタ:3次ベジェ曲線(角あり)

※この作業を行いますと、その「方向点」が付いている「通過点」が「角あり」の表示(□の表示)に変わり、この表示中は上記の[Ctrl(Command)]キーを押しながらのドラッグ移動でも「角あり」を保ったまま調整・修正ができるようになります。

 

また、[Alt(Option)]キーを押しながら「通過点」をタッチすることでも「角あり」の曲線に変えることができますが、「方向点」の配置がリセットされてしまいますので注意しましょう。

クリスタ:3次ベジェ曲線(角ありに変更)

「角なし」に変える

描画中に「角あり」状態から「角なし」の状態に変えたい場合は「Alt(Option)を押しながら「通過点」上でドラッグさせましょう。

クリスタ:3次ベジェ曲線(角なしに変更)

そのドラッグにより再び「方向点」の配置作業になるのですが、「角なし」に変えることができます。

この時、ドラッグによって移動するのは「方向点」であり、「通過点」の位置は移動しません

※描画中に「角あり」から「角なし」に変える方法は現状この方法しかありません。

描画後でしたら「線修正ツール」でタッチするだけで「角なし」に変えることができます。

クリスタ:線修正ツール(角の切り替え)

描画を完了(確定)させよう!

曲線の描画が終わりましたら完了の操作を行います。

3次ベジェ曲線も含め、曲線ツールは完了の操作を行わないと延々と描画を続けてしまいます

描画を完了させる方法は

●ペンで2回タッチ(ダブルクリック)する

クリスタ:3次ベジェ曲線の決定

●[Ctrl(Command)]キーを押しながら描画中の線以外の所をタッチする

クリスタ:3次ベジェ曲線の決定

●[Enter]キーを押す

Enterキー

●編集画面以外の所をタッチする

クリスタ:3次ベジェ曲線の決定

●始点の「通過点」の上から終点の「通過点」を配置して線を繋げる

クリスタ:3次ベジェ曲線の決定

の5つの方法があります。

MEMO

2回タッチする方法は、

CLIP STUDIO PAINT画面上部から「ファイル(CLIP STUDIO PAINT)」→「環境設定」と選択して表示される環境設定ウィンドウの「ツール」の項目内にある「図形の作成をダブルクリックやダブルタップで確定する」にチェックが入っている時にできる操作です。

クリスタ:環境設定(ダブルクリックでの確定)

CLIP STUDIO PAINT(クリスタ)3次ベジェ曲線:描画後の修正方法

上記の通り、「ベクターレイヤー」上に描画した場合は描画後にも線の修正が可能です。

「オブジェクトツール」で修正する!

「オブジェクトツール」を選択し、「ツールプロパティ」の「変形方法」の項目で「制御点の移動」もしくは「制御点と拡縮回転」を選択しましょう。

クリスタ:オブジェクトツール(制御点)

この設定で描画した線にタッチすると全ての「通過点」と「方向点」が表示され、修正ができるようになります。

クリスタ:3次ベジェ曲線の修正

この状態で、「通過点」「方向点」をドラッグ移動させ、線を修正することができます。

 

また、[Shift]キーを押しながら「方向点」を移動させると水平・垂直、45度刻み(初期設定時)に配置させることができます。

 

「線修正ツール」で修正する!

「線修正ツール」を選択し、「サブツール」で「線修正」を選択、さらにその下の中から「制御点」を選択しましょう。

クリスタ:線修正ツール(制御点)

あとは「ツールプロパティ」で修正したい内容のものにチェックを入れて修正を行いましょう。

クリスタ:線修正ツール(制御点)

ポインターを線の上や制御点のある場所に持っていく間だけ制御点が表示され、修正ができるようになります。

クリスタ:3次ベジェ曲線の修正

また、[Shift]キーを押しながら「方向点」を移動させると水平・垂直、45度刻み(初期設定時)に配置させることができます。

参考記事

【クリスタ便利機能】ベクターレイヤーでは「制御点」操作でこんなことができる!!

CLIP STUDIO PAINT(クリスタ):3次ベジェ曲線紹介まとめ

「3次ベジェ曲線」の紹介は以上となります。

バージョン1.9.9にアップデートする前は、描画中に制御点を動かすことはおろか、見ることすらできませんでした。

描画中に調整・修正できるようになったのは大きな変化です!

これでまたCLIP STUDIO PAINTでできることの幅が広がりました◎

皆さんも是非試してみて下さい◎

 

それではここまで閲覧ありがとうございました!

お疲れ様でした!!

 

▼イラスト・簡単な漫画なら【PRO版】

▼本格的な漫画・アニメーション制作なら【EX版】