ディフュージョンとはなにか

意味

動画説明

アニメの絵のようなディフュージョンのやり方

１：レイヤーを複製する

「レイヤーを複製する」とは？意味とやり方

・複製したいレイヤーの上で右クリックをして一覧から選択。もしくは上のバーの[レイヤー]から[レイヤーを複製]を選択。

レイヤーを複製する方法(CLIP STUDIO PAINT)

レイヤーが複数分かれている場合は結合したほうが良いかもしれません。

クリスタの場合は[レイヤー]から[表示レイヤーのコピーを結合]という方法もあります。こうすることで、元のレイヤーを後から編集したくなったときに困りません。あるいはディフュージョン用にファイルごと複製しておくのもありですね。

【クリスタ】レイヤーとはなにか、使い方とその意味【CLIP STUDIO PAINT】

複製されたレイヤー

複製は3つ作っておきます。

２：合成モードを変更して結合する

「合成モード」とは？意味とやり方

・合成モードとは

合成モードとは？

・「合成モード」は下のレイヤーとの色の重なり方を設定する機能。

乗算レイヤー(クリスタ)

まずはコピー２を「乗算」にして、コピー１(通常)と結合します。

複製されたレイヤー

結合したレイヤーをさらに複製します。名前はわかりやすく変えてます。

「レイヤーを結合する」とは？意味とやり方(クリスタ)

・結合したいレイヤーが２つあるとして、それらを結合したいとき、上側のレイヤーを選択して右クリックでメニューを開き、「下のレイヤーと結合」を押します。もしくは上のバーの［レイヤー］から［下のレイヤーと結合］を押します。ショートカットキーはControl＋Eです。

コピーした方のレイヤーを[スクリーン]、コピーする前のレイヤーを[乗算]に変更しておきます。上の画像で言うと「乗算＋通常のコピー」の合成モードが［スクリーン］で、「乗算＋通常」の合成モードが[乗算]です。

「スクリーン」とは？意味とやり方(クリスタ)

スクリーン(英:screen)：合成モードのひとつ。下のレイヤーの色を反転し、上のレイヤーとかけ合わせて合成する。元の色より明るくなる。

スクリーンとはなにか

レイヤーの状況

次に一番上のレイヤーの合成モードを［比較(明)］に変更します。レイヤー名でいうと「結合されたレイヤーのコピー３」です。

３：レイヤーをぼかす

ガウスぼかし(クリスタ)

合成モードをスクリーンに変えたレイヤーをぼかします。今回はガウスぼかしを使います。範囲は8pxにしておきます。各自調整してください。

「ガウスぼかし」とは？意味とやり方(クリスタ)

・ガウスぼかし(Gaussian Blur)：フィルター効果のひとつ。ガウス関数をもちいて画像をぼかす処理のこと。上のバーの［フィルター］から［ぼかし］を選び、［ガウスぼかし］を選択することで使える。［ぼかす範囲］が大きいほどよりぼかされる。

ガウスぼかしとは？クリスタ

４：ディフュージョン前とディフュージョン後の比較

ディフュージョン前

ディフュージョン後

ソフトフォーカスとの比較

ソフトフォーカス

オリジナルのレイヤーを複製し、ガウスぼかしをした後に不透明度を下げてみます。今回は40％にしました。効果をわかりやすくするために、先程作ったディフュージョンのためのレイヤーは非表示にしておきました。

ソフトフォーカス前

ソフトフォーカス後

その他組み合わせ

ソフトフォーカス＋ディフュージョン

ソフトフォーカス＋ディフュージョンの合せ技です。

グラデーション

ソフトフォーカスの不透明度を25％にして、別レイヤーでグラデーションをかけ、合成モードを覆い焼き(発光)にしてから不透明度を下げてみました。この項目は勉強中です。

光らせる範囲を限定する場合

若干グロー効果の手法と近くなってしまいますが、レベル補正を行います。

「レベル補正」とは？意味とやり方(クリスタ)

レベル補正とはなにか(クリスタ)

・レベル補正：画像の明暗や各色の色調をヒストグラムで調整する。チャンネルをRGBにしていると明るさが変化する。ポイントを左に寄せると明るく、右に寄せると暗くなる。エフェクトをかける範囲を限定させるときなどに用いる。上のバーから［レイヤー］＞［新規色調補正レイヤー］＞レベル補正で使用することができる。

レイヤーを複製する

まずはオリジナルのレイヤーを１つ複製します。

レベル補正とは

レベル補正の調整

次に［レイヤー］＞［新規色調補正レイヤー］＞レベル補正を選択して光らせる範囲を調整します。黒い三角を右に動かせば光る範囲が狭まります。今回は肌と手袋、背景をうっすら光らせる程度にします。

細かく設定したい場合は、レイヤーを一つにする前に個別に補正をかけるといいかもしれません。服だけを光らせたり個別に光らせる程度を変えたい場合は、個別のレイヤーにディフュージョンをかけたほうが手っ取り早いからです。

複製したレイヤーのみに効果を適用させたいので、「下のレイヤーでクリッピング」を行います。

「下のレイヤーでクリッピング」とは？意味とやり方(クリスタ)

・下のレイヤーでクリッピング：下のレイヤーに描画された範囲だけに上部のレイヤーの描画内容を表示させる機能。1つのレイヤーでたとえば肌の暗い影の部分を塗ろうとすると、線画の外にはみだしてしまうことがあります。そこでレイヤーを２つにわけて、１つは肌色(下)、もう一つは暗い色(上)とします。上のレイヤーに「下のレイヤーでクリッピング」をすると、肌色の範囲のみに暗い色が描画されるようになります。

下のレイヤーでクリッピン(クリスタ)

・クリッピングさせたいレイヤーを選択して、このマークをクリックします。

【クリスタ】はみ出さずに色を塗る！下のレイヤーでクリッピングとはなにか、その意味【CLIP STUDIO PAINT】

下のレイヤーでクリッピング

これで色調補正レイヤーがクリッピングされました。

光らせる範囲を限定

次に複製したレイヤーの合成モードを［スクリーン］に変更します。

範囲を限定前

範囲を限定後

これで終わりです。

通常のディフュージョン

ちなみにレベル補正を行わない方法のディフュージョンはこちらです。今回は明度が高いところだけを光らせているので、普通のディフュージョンとあまり大差ありませんね。

範囲を広げる

レベル補正でもう少し範囲を広げた場合は、全体的に光ります。

ソフトフォーカスを加える

さらにソフトフォーカスを加えるとこんな感じです。

参考文献

https://www.pixiv.net/artworks/10041130

https://www.pixiv.net/artworks/10325142

スターバーストディフュージョンとはなにか

意味

*1

スターバースト(starburst difusion)とは上のような星の集まりのことです。

動画

クリスタでスターバーストディフュージョンを試す

１：レイヤーを複製する

レイヤーを複製する

レイヤーが複数ある場合は結合させておいておくといいかもしれません。

複製されたレイヤー

２つ複製します。

２：ぼかす

移動ぼかし(クリスタ)

[フィルター]から[ぼかし]を選択し、[ぼかし移動]でぼかしをかけます。

ぼかし具合をチェックする場合は、編集するレイヤー以外は目のマークのチェックを外して、非表示にしておきましょう。

移動ぼかし(クリスタ)

今回は45°で、ぼかす範囲はマックスにしておきます。題材によって数値を変更しましょう。今回はぼかしをクロスさせるような効果を作りますが、片側のみ、あるいは上からの光といったような効果もありだと思います。

ぼかした後(1回目)

ぼかした後(2回目)

もっとぼかしたい場合は同じ作業をもう一度行いましょう。

逆の方向

もうひとつのレイヤーを今度は-45度にしてかけていきます。

３：合成モードを変更

一番上のレイヤーの合成モードを通常からスクリーンに変更します。

レイヤーを結合させて、またスクリーンに変更します。そうするとディフュージョンがかかっています。

４：レベル補正で調整

レベル補正

明るすぎたと思う場合は不透明度を下げたり、レベル補正で調整しましょう。黒い三角を右に動かすと、光の範囲が抑えられます。

５：光らせる範囲を最初から限定する

最初から限定する場合は、２値化を行います。

２値化(クリスタ)

まずはレイヤーを複製して、複製されたレイヤーに２値化をかけます。

二値化

光らせたい範囲のみが白くなるように調整してください。

レイヤーの状況

その後、二値化のレイヤーと複製されたレイヤーを結合します。そのとあと、さらにそのレイヤーを複製してください。

ディフュージョン後

先ほどと同じように、移動ぼかしを両方のレイヤーにかけて、上をスクリーンにして結合し、結合されたレイヤーをスクリーンにします。不透明度を下げて調整するのもありだと思います。

ディフュージョン前

ディフュージョン後

不透明度を下げて調整するのもありだと思います。

電球の調製例

ディフュージョン前の電球

ディフュージョン後の電球

基本的に作業は同じです。２値化しています。

イラストにもしてみました

ディフュージョン前

ディフュージョン後のキャラ

消しゴムで消して調整

写真だけではなく、イラストにも適用可能です。

参考サイト

・https://www.youtube.com/watch?v=fuj8_TWlsew

・https://www.youtube.com/watch?v=lRKp4_EkIvc

引用画像

１：https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B9%E3%83%88

グロー効果とはなにか

またyoutubeにも動画の方をあげておきましたのでよかったらあわせて見せてくださいm(_ _)m

意味

CLIP STUDIO PAINTでのグロー効果のやり方

レイヤーを結合する

線画と色塗り

レイヤーの中身

今回はシンプルな円の線画に、中の色を塗りつぶしたものです。

表示レイヤーのコピーを結合

表示レイヤーのコピーを結合

[レイヤー]から[表示レイヤーのコピーを結合]をクリックしてレイヤーをひとつにします。

このレイヤー名をグロー効果としておきます。

レベル補正を行う

レベル補正

グロー効果のレイヤーに色調補正レイヤーを作り、レベル補正を行います。

今回は絵が単純すぎてレベル補正は特にしなくてもいいと思いますが、わかりません。後ほどレベル補正をした場合としなかった場合の比較を行います。

ガウスぼかしを行う

ガウスぼかしとはなにか

ぼかす範囲

ガウスぼかし後

一つにしたレイヤーにガウスぼかしを行います。「フィルター」から[ぼかし]、[ガウスぼかし]を選択します。今回は[ぼかす範囲]を100にしておきます。

合成モード[スクリーン]を使う

スクリーン(英:screen)：合成モードのひとつ。下のレイヤーの色を反転し、上のレイヤーとかけ合わせて合成する。元の色より明るくなる。

スクリーンとはなにか

スクリーン

合成モードをスクリーンに変更します。

完成

これで完成です。レイヤーの不透明度を下げて強度を調整してください。

不透明度を５０に

50にするとこんな感じです。

人間の顔にグロー効果を使用する

グロー効果前

今回はこの絵を使います。アニメ塗りの講座でつかった絵です。本来アニメ塗りはベースの色と影の色の境界線をあまりぼかさないのですが、今回は気にせず進めていきます。

先ほどとおなじように、レイヤーのコピーを結合して、レイヤー名を「グロー効果」にします。

レベル補正とは

レベル補正とは

レベル補正

次にレベル補正を行います。入力の黒い三角を右側にずらします。グロー効果を広く機能させたい場合は、画面の明るい部分が多いほうがいいです。狭く機能させたい場合は暗い部分が多いほうが良いです。今回は試しに黒い三角を右にずらし、暗くしてみます。

ガウスぼかし

ガウスぼかしを１００でかけます。なんかJamiroquaiみたいな感じになってきましたね。

スクリーン

次に合成モードをスクリーンにします。色味が暗いですね。

不透明度を５０に下げます。暗い。というかレベル補正で暗くしすぎた印象がありますね。調整しましょう。

レベル補正

レベル補正調整後

いい感じですね。

グロー効果前

↓

後は不透明度を下げたり、レベル補正を調整したりして好みの状態に仕上げていきましょう。

他の方法を使って仕上げる

グロー効果だとひかりすぎてなんだかなあ、ということでほかのエフェクトを探していたところ、よさそうなものがみつかりました。

合成モードをスクリーンではなく、オーバーレイや焼き込みリニアを使う手法です。

先ほどと同じようにレイヤーをコピーして結合します。そのあとガウスぼかしをおこないます。今回はぼかす範囲は15です。

３つ複製した後、新しいフォルダーを作ってレイヤーを３ついれます。レイヤーの使い方は以下の記事からどうぞ。

複製したレイヤー

【クリスタ】レイヤーとはなにか、使い方とその意味【CLIP STUDIO PAINT】

不透明度を変更

一番上のレイヤーの不透明度を２５、二番目を１０、三番目も１０にしておきます。

合成モードを変更

ニ番めの合成モードをオーバーレイに、三番目の合成モードを焼き込みリニアに変更します。

仕上げ前

仕上げ後

これで完成です。

参考文献

１：「クリスタ道場」(ソーテック社)

クリスタ道場 キャラクター・メイキング編 CLIP STUDIO PAINT PRO/EX対応

＞主にグロー効果について

２：「CLIP STUDIO PAINT機能引き事典」(ナツメ社)

CLIP STUDIO PAINT機能引き事典 PRO&EX対応

＞用語の定義について

３：「キャラクターの描き方入門教室」乃樹坂くしろ、SBCreative

とことん解説! キャラクターの描き方入門教室 CLIP STUDIO PAINT PROではじめるデジタルイラストの基本

＞仕上げる方法について

カラーセットとはなにか

カラーセットの意味

カラーセット：自分が普段使う色を登録しておくことができる便利な機能。肌色や空の色など、自分がよく使う色を登録しておくと便利。

カラーセット

カラーセットの使い方、追加・登録方法

まずはカラーセットが表示されているか確認してください。

カラーセットを表示

表示されていない場合は、[ウィンドウ]から[カラーセット]にチェックを入れてください。

カラーセットの編集

次にカラーセットの編集をするために矢印をクリックしてください。▷みたいなマークです。

カラーセットの編集

一覧にカラーセットの編集があるのでクリックします。

カラーセットの編集

クリックすると[カラーセットの編集のウィンドウ]が出てきます。

新規設定を追加

[新規設定を追加]をクリックします。

カラーセットに名前をつける

自分で名前をつけます。今回私はモノクロカラーセットを作るので、モノクロカラーにしています。

カラーセットの編集

これでOKを押せば、追加されます。

色が入っていない状態

まだ色が入っていない状態です。

明度スケール

ここから色を追加します。たとえば上の明度０の色を追加したいとします。

スポイト

スポイトで明度０を摂ります。スポイト以外にも、自分でRGBやHSVを入力する方法があります。

カラースライダー

スポイトで色をとったり、自分で数値を入力するとカラースライダーやカラーサークルなどに色が表示されると思います。

色の追加

この状態で、先程のカラーセットの好きな場所で右クリックでメニューを出して、[色の追加]を押してください。

色の追加

色の追加

そうすると色が追加されているはずです。間違えてしまった場合は削除してください。

カラーセットのの選択

厚塗りなどで、気に入った明度の設定がある場合は登録しておくと便利だと思います。いつでも参照できるようになります。

カラーセットのの選択

使いたいときはカラーセットの一覧から、自分が作ったカラーセットをクリックすればいいだけです。

フリンジとはなにか

フリンジの意味

アンチエイリアスの意味

アンチエイリアスの理解

まずはアンチエイリアスの強度を最大にした描画を用意しました。とはいっても等倍表示だと全然わからないですよね。

クリスタのアンチエイリアス2000%拡大

アンチエイリアスがかかっているかどうかは、拡大するとよくわかります。

クリスタのアンチエイリアスオフ2000％拡大

アンチエイリアスをオフにして同じように表示するとこうなります。

アンチエイリアスがかかっているほうが境界がぼかされていることがわかります。黒がグレーに近い色と合わせて表示されています。背景の色と近い色を境界に散りばめることで、コントラストを弱めてガタガタが目立ちにくくなっています。ぼかすというのは、いわゆる「不透明度を下げる」処理のことです。後ろの背景が助透けて見えます。

クリスタアンチエイリアス等倍表示比較

同じ図形を等倍で比較すると上のようになります。若干アンチエイリアスオフのほうがガタついて見えますね。

クリスタコントラストアンチエイリアス比較

ただしこれは背景が白色なので、コントラストが強く余計際立ってガタツキが見える面もあります。背景が暗い色だともっともうすこしガタツキはめだちにくくなります。

フリンジの理解

アンチエイリアス比較

さてフリンジはアンチエイリアスの線を使って塗りつぶしたときに出る汚れ、塗り残しでした。実際に初期設定の塗りつぶしツールを使ってアンチエイリアスありの線の内側を塗りつぶしてみましょう。同じような塗りつぶしに見えるかもしれませんが、よくみるとアンチエイリアスありのほうは白い線があります。

ちなみに塗りつぶしは塗りつぶしツールを使っています。今回の記事はこの塗りつぶしツールの設定でフリンジをどうやって解決するのか主たる目的になります。

アンチエイリアスによるフリンジ

拡大するとよくわかります。白・灰・黒という3つの種類の色(正確には用紙の色・透明な黒・透明ではない黒)のうちの白を塗りつぶして、灰色が残ってしまった形です。アンチエイリアスがオフの方は、白か黒しかありません。白を塗りつぶそうとしたら白だけを塗りつぶして黒が残るので、きれいに塗りつぶせるのです。

ただしアンチエイリアスがかかっていない方は外側に若干のガタツキが残っています。

そこでアンチエイリアスのかかっているせいで起こる内側のフリンジはどうやって解決しようかという話になります。

塗り残し・汚れ・フリンジの解消方法

色の誤差を利用：とりあえず塗りつぶし連打する

みなさんだれでも一度はやるアクションだと思います。塗りつぶし連打です。意外とうまくんですよね。

実はこれ初期設定では色の誤差というものがオンになっています。

クリスタの色の誤差

初期設定では色の誤差が10の値です。単純に考えれば白、灰、黒があって白を選択したときに、白に10％ほど近い灰色も一緒に塗りつぶしちゃうよということです。この色の誤差は意外と曲者で、単純に10だから10％という計算ではないかもしれません。

というのも色の誤差を10から50にしても同じような効果の場合があるからです。もちろんケースバイケースです。

クリスタ色の誤差10

まずは色の誤差10のクリック１回です。

クリスタ色の誤差50

色の誤差50のクリック1回です。

クリスタ色の誤差80

色の誤差80クリック1回です。

クリスタ色の誤差100

色の誤差90クリック1回です。

どうでしょうか。10から80まで大差ないですよね。もちろん描画の形態によりますが、色の誤差を明確に出したい場合は80以上がいいと思います。

100であってもよく見れば塗りつぶしきれていません。ただし拡大してみなければほとんど気づかないので、ここでやめてしまってもいいかもしれません。

色の誤差のみで解決しようとしたら、やはり連続クリックですね。色の誤差10の設定でもいいので何度かクリックしてください。自分が満足したところで終わらせればいいのです。

色の誤差における外側と内側：連打の注意点

あまり細かいところまで塗りつぶそうとすると、思わぬところも塗りつぶされてしまうことがあります。

･どういうこと？｡

なかなか気づかないもんですよね。うまく塗りつぶせたと思ったら、外側にまで影響が及んでいたのです。上の動画は色の誤差10で塗りつぶしを繰り返したものです。この微妙な外側の変化がわかるでしょうか。

クリスタの色の誤差の比較

クリスタの色の誤差の拡大比較

同時比較してみます。すごく些細な変化ですが、3回塗りつぶした方は綺麗に内側が塗りつぶされている分、外側のアンチエイリアスが弱くなり、すこしガタついています。2回塗りつぶした方は外側は綺麗にアンチエイリアスがかかったままですが、内側はすこし塗り残しがあります。

どちらを優先するべきかは人それぞれです。等倍だと2回も塗りつばせばほとんど見た目がきれいに塗りつぶせているように見えます。同様に、3回塗りつぶして外側のアンチエイリアスが少し弱くなっていますが、等倍だとあまりガタついて見えません。ケースバイケースですが、このような内側と外側の観念は理解したほうが役立ちそうです。

もっとも、次に述べる領域拡縮を使えば外側と内側を両方綺麗にして塗りつぶせるケースがあります。

領域拡縮を利用

自動選択の項目でも説明しましたが、領域拡縮は色の誤差と似ている機能です。

【クリスタ】色塗りに便利！自動選択の使い方とその意味とは【CLIP STUDIO PAINT】

それでは塗り残しツールの領域拡縮にチェックを入れましょう。初期状態ではチェックが入っていません。

初期状態の塗りつぶしから、領域拡縮にチェックを入れた状態で塗りつぶしてみます。

かくだいすればよくわかりますが、外側も内側も綺麗なまま塗りつぶせています。値は10も20も変わりませんでしたが、描画によっては値を下げたり上げたりする必要があるので調整してください。

領域拡縮はこんなかんじで塗りつぶされているので、外側に過度に影響を与えずに内側だけ塗りつぶすことができるんですね。

線画をそのまま残したまま内部を塗りつぶしたいケース：コントラストを知る

たしかにこのケースもありますよね。つまり内部と外部の色が異なるケースです。

先程は黒の線画に、黒で内部を塗りつぶしました。同じ色なので線画の内部まで範囲を拡張させても気にならなかったのです。

今度は違う色で試し見てましょう。線画を黒、内部をシアン色でためしてみます。

一見成功にしているように見えますが、実は線画の大部分を余計に塗りつぶしてしまっています。

一方で、領域拡縮オフにした場合は線画の大部分がきちんと残されています。しかも一見フリンジは発生していないように見えますよね。

しかし実はフリンジは発生しているんです。灰色とシアンの色のコントラストがそこまで高くないために、フリンジがそこまで目だっていないのです。おそらくこうしたコントラスト関係は色彩学に属する項目だと思います。黒、灰色、黒とはさまれたら灰色が目立ちますが、黒、灰色、白とくれば灰色は目立ちにくいのです。

シアン明度50の目立つフリンジ

今回使ったシアンは明度が１００と高い色です。今度は明度が50のシアンを使ってみます。

シアン明度100の目立たないフリンジ

明度100だと目だっていなかったフリンジが目だっていることがわかります。

シアン明度20の目立つフリンジ

明度を20にすればもっと目立ちます。

つまり線画の色と内側の色が近い色になるほど、フリンジが目立ちやすくなるということです。

内部の色を抽出して観察する

線画のレイヤーと塗りつぶしのレイヤーを分けて、塗りつぶしだけ出してみます。今回は領域拡縮オフで初期設定のまま塗りつぶしたものです。

動画を見ると灰色の部分に重なっていない部分があることがわかります。これがフリンジの原因になります。ただし今回のように線画の色と塗りつぶしの色が遠い色の場合はフリンジがそこまで目立たないので場合によってはそのままでいいかもしれません。

外部の色と内部の色が違ってもフリンジが発生しないようにする対策

先程の線画黒明度０と、塗りつぶしの色シアン明度20ではフリンジがかなり目立ちました。これを解消する方法を模索します。

領域拡縮１

領域拡縮が10のままだと線画の多くが侵食されてしまうので、1に設定してから塗りつぶしてみます。

１じゃ不十分ですね。３にしてみます。

領域拡縮2

すこし歪んでしまっていますね。

領域拡縮１、色の誤差３０

それでは領域拡縮を１にして、さらに色の誤差を３０にしてみました。わるくはないですね。

この段階になると等倍ではほとんど目立たないんですよね。あまりこだわりすぎるのもどうかと思います。ふかくいきすぎるとかえってガタツキが目だってしまうことがあります。これ以上調整しようとすれば、おそらく塗り残し部分に塗るの対処になります。

そもそも論ですが、アンチエイリアスとは周囲の色に溶け込ませる技術です。白に溶け込ませたければ、黒のとなりは灰色がいいということになります。では暗いシアンに溶け込ませるためには黒の隣は何色がいいでしょうか。

カラーサークル的にはおそらく最も暗いシアン＝黒色になります。つまり暗いシアンより暗くて、黒色よりは明るい色を中間に配置するべきなんです。これは自分で設定する必要はないんですよね。本来なら不透明度が低い黒に暗いシアンが重なれば、暗いシアンより暗い黒ができるからです。ややこしいですね。

線画と塗りつぶしのレイヤーを分けてフリンジを回避する

そもそもレイヤーをわければ細かいフリンジなんて気にしなくて済みそうですね。

レイヤーについての基礎知識は以下の記事の参照をお願いします。

【クリスタ】レイヤーとはなにか、使い方とその意味【CLIP STUDIO PAINT】

レイヤーは上の方が優先されます。線画の方を今回は優先したいのでs、線画のレイヤーを上にしておきます。

そして領域拡縮を10くらいにしてあとは初期設定で色を塗りつぶします。塗りつぶしは他レイヤーを参照にしておきましょう。レイヤーが複数ある場合は複数参照で特定のレイヤーだけにチェックを入れるようにしてください。どうです？いい感じに塗りつぶせてますよね。

線画が下で塗りつぶしが上

線画が上で塗りつぶしが下

線画と塗り潰しのレイヤーを逆にすればわかりますが、はみ出しても線画が上にかぶさるので問題ないのです。レイヤーわけで割とスッキリできましたね。不透明度が低い黒色と、シアンがまざることで、より暗いシアンが黒と暗いシアンの中間にできてちょうどぼかしてくれるというわけです。

その他：塗り残し部分に塗る

すでに塗ってしまった部分は「塗り残し部分に塗る」などで対策しましょう。

クリスタの塗りつぶし部分に塗る

「塗り残し部分に塗る」は塗り残しツールのサブツールの箇所にあります。

内側と外側(応用編)

外側にもフリンジは発生する

外側のフリンジ

内側のフリンジ

また内側を綺麗に塗りつぶしたとしても、外側にも気をつけてくださいね。これはこれでなにかのテクニックに使えそうですが、綺麗に外側を塗りつぶしたいときは注意してください。

こちらは外側のフリンジです。

こちらは領域拡縮をオンにした場合です。わかりやすくするために内側のフリンジは残したままにしておきました。

･あれ？これなんかおかしいよね？｡

そうなんです。次に領域拡縮について注意点を説明します。

領域拡縮の注意点：外側に使うときは注意

領域拡縮の良い点は、内側から塗りつぶすときに線画の枠線の中をより多く選択してくれることでした。

これが外側から塗りつぶすとなると、外側からみた線画の枠線の中をより多く選択してしまうのです。ややこしいですよね。

色を変えてみるとわかりやすいです。線画に当たる部分がかなり塗りつぶしの領域として含まれてしまっていることがわかります。

線画をぬりつぶしてほしくないときはどすればいいのか。１つの考えとしては領域拡縮をオフにすることです。

･なんだこれで解決じゃん｡

と思いますよね。これでいい場合もあります。

問題は線画の色と、線画外の塗りつぶしの色が近いときです。

先程は明るいシアンの色で塗りつぶしてみましたが、今度は暗いシアンの色で塗りつぶしてみます。領域拡縮は先程と同じようにオフです。

よくみるとフリンジがありますよね。領域拡縮をオフにするとフリンジが発生する、オンにすると線画が細くなる状況です。

そもそものはなし背景の絵と人物や物体の絵は分けたほうがいいと思います。フリンジを解決するのも一つの手ですが、そもそもフリンジが発生するような構造を避けるというのも１つの正解なのです。

外側に起きるフリンジ：領域拡縮の応用設定(拡張パラメータ)

領域拡縮の設定を変更してみましょう。領域拡縮の左下に小さいプラスのマークがあるはずです。そこをクリックしてください。

クリックすると拡張パラメータの設定ができます。塗りつぶしの際は「最も濃いピクセルまで拡張」にしてきましょう。他にも丸く拡張や四角く拡張がありますが、塗りつぶしではそんなに使わないかもしれませんね。

ブラシサイズが小さすぎると線が劣化してフリンジが曖昧になる

アンチエイリアスはある程度太い線で効果を発揮します。たとえばブラシサイズ３などの細い線でアンチエイリアスを強くかけてしまうと全部の線がぼかされて、主線の色が消えてしまうことがあります。

細い線とアンチエイリアス

１の場合はすべてぼかされて必ず消えてしまいます。つまり劣化した色、薄い色が表示されてしまいます。

こうした薄まった色の場合は、領域拡縮をしなくてもフリンジが発生しているように見えなくいです。これがいいかどうかはケースバイケースです。そもそもこうした薄い色を是とするのかどうかです。上の画像は領域拡縮をしていません。線が細すぎてフリンジなのか主線なのかがはっきりしないケースですね。

領域拡縮をするともうすこし多くの範囲を参照するので、内側のうっすらした色を含めて塗りつぶしてくれます。

この項目の詳細はアンチエイリアスの記事を参照してください。

アンチエイリアスとはなにか 解像度、フリンジとの関係について

自動選択とは

自動選択

自動選択の基本的な使い方

ツールパレットに[自動選択]があるのでそこから使用することが出来ます。

さっそく使ってみましょう。ためしに線画をクリックをしてみると。円の内側がすべて選択されました。点線のような表示になります。

この状態で塗りつぶしをすると、このように選択された内側の部分だけが塗りつぶせるようになります。

選択を解除する場合はControl＋Dか[選択範囲]から[選択範囲を解除]を押すことでできるようになります。

自動選択と選択範囲ツールの違い

ツールパレットの中に選択範囲ツールはあります。

長方形や楕円、シュリンクなどさまざまな選択方法があります。

たとえば長方形で選択しようとしてみます。線の外にはみ出してしまっていますよね。自動選択のように描画にピッタリ沿って選択したい場合は不便です。

楕円選択でちょうど選択するという荒技もありといえばありですが、綺麗に選択するのに骨を折りそうです。そういった意味で選択範囲ツールと比べて自動選択は便利なツールなのです。

シュリンク選択という自動選択に近いツールもありますがここでは説明を省きます。

自動選択と塗りつぶしの違い

･自動選択なんて使わなくても線で囲まれた範囲を塗りつぶしツールで色塗りできるでしょ？｡

たしかにそうですね。上の動画のように、塗りつぶしツールでもおなじようなことができます。

塗りつぶしはたしかに他のツールでもできますが、肝心なのは描画に沿って選択範囲を形成するということです。

たとえばこのように選択されている状態でペンでなにかを描いてみます。こうすると選択範囲外には描画が反映されなくなります。はみ出さないように細かい装飾を描くときなどに便利です。他にも選択範囲内にのみ素材を貼り付けたり、グラデーションをかけたりと「自動選択」はとても便利なツールです。

自動選択の機能

編集レイヤーのみ参照選択と他レイヤーを参照

レイヤーとはなにかそもそもわからない方のために以下の記事を作りましたのでぜひ参照してください。

【クリスタ】レイヤーとはなにか、使い方とその意味【CLIP STUDIO PAINT】

複数レイヤーがある場合、編集中のレイヤーのみ選択したい場合と、すべてのレイヤーから線を選択したい場合があると思います。

たとえば複数のレイヤーの線が重なってしまっているときを考えてください。すべてのレイヤーを参照できる状態だと選択したくないレイヤーまで選択してしまうかもしれません。

上の自動選択はレイヤー(青)のみを参照選択した場合です。

上の自動選択は他レイヤーを参照選択した場合です。選択しているレイヤーに加えて他のレイヤーも参照できるようになるということです。青のみ選択したかったのに、間違えて緑の方も参照してしまいました。このような誤操作を避けるためにも編集中のレイヤーのみにする必要があります。

もちろんいちいちレイヤーを切り替えるのが面倒な場合や、全体のレイヤー数が多い場合は他レイヤーを参照したほうがいい場合があります。使い分けが重要です。

参照レイヤー用選択

参照レイヤー用選択：参照レイヤー用選択を行うことで、選択したレイヤー以外も選択できるようになる。参照レイヤー用を設定するアイコンが存在する。

「編集中のレイヤーのみ選択」と「他レイヤーを参照選択」と似たような機能です。「他レイヤーを参照選択」がすべてのレイヤーを参照可能ににしてしまうのに対し、参照レイヤー用選択は自分で指定したレイヤーのみ参照可能にするという点で違います。
設定するためにはアイコンを押せばいいだけです。アイコンを押すと参照レイヤーに設定のアイコンがチェックの欄に表示されます。

たとえばレイヤー青、レイヤー緑、レイヤー赤があったとします。このうちレイヤー青と緑だけ参照したいといった場合に「参照レイヤー用選択」を使います。使い方は簡単でアイコンをクリックするだけです。今回のケースだと選択しているレイヤーがレイヤー青だとすれば、レイヤー緑に参照レイヤー用選択をすればいいだけです。

これで赤色が選択されなくなりました。

自動選択のテクニック・応用技・設定

連続して選択する

ツールプロパティ：プロパティとは日本語でいうと「性質」です。クリスタにおけるツールプロパティとはツールの性質、特性に関する設定を指します。

どの操作でも共通しているのですが、連続して選択するためにはSHIFTを押しながらクリックをするか、作成方法から追加選択に切り替える必要があります。作成方法はツールプロパティ内にあります。デフォルトの設定は「新規選択」です。新規選択の場合はひとつのみしか選択できません。作成方法には他にも部分解除や選択中を選択などの機能があります。

隣接ピクセルをたどる

隣接ピクセルをたどる：チェックがオンになっているとクリックした場所につながっているピクセルのみ選択する。チェックをオフにするとレイヤー内の同じ色をすべて選択できる。

まずは隣接ピクセルのチェックを入れた状態で自動選択してみます。クリックした場所につながっているピクセルのみ選択されていることがわかります。

次に隣接ピクセルのチェックを外した状態で青色の線をクリックしてみます。クリックした箇所以外も含めて青色の線がすべて選択されました。

隙間とじの使い方

隙間閉じ：線の隙間を閉じてくれる機能。この機能をオフにしているとすこしでも隙間があれば塗りつぶしなどがうまくいかない。どのくらいの隙間を閉じるかの数値を設定で変更できる。

たとえばこのような隙間がある線があるとします。隙間閉じにチェックを入れないと塗りつぶした場合こうなります。

隙間閉じにチェックを入れておくとこうなります。

自動選択も塗りつぶしと基本的に同じです。上の画像は隙間を閉じない場合の選択です。

こちらは隙間を閉じた場合の選択です。

どちらも一見同じに見えますが全然違います。隙間閉じオンの場合は隙間があっても閉じています。ただ隙間が完全にないときと、隙間を補完するときでは若干違うので注意してください。できるだけ隙間のないような絵をこころがけたほうが無難だと思います。髪などは隙間が空きやすい線画の代表例です。

塗りつぶしの動画を先程乗せましたが、隙間が中途半端に閉じた形になっています。閉じきれなかった隙間は後で描き加えてで調整しましょう。

もしくは選択範囲ツールの選択消しで余計な部分を消しましょう。

あるいは選択範囲ツールの選択ペンで追加しましょう。

･きれいに隙間を閉じる方法はないの？｡

難しいんですよね意外と。おそらくアンチエイリアスなども関係してくる項目です。あるいは隙間閉じの数値の変化で対応できるケースもあります。もしくは色の誤差等他の設定も関連してきます。アンチエイリアスってなんだ？という方は以下の記事を参照してください。

アンチエイリアスとはなにか 解像度、フリンジとの関係について

色の誤差の使い方

色の誤差：色の許容量の設定。数値が大きいほどより多くの色の領域を選択の対象に含めることができます。たとえばアンチエイリアスをかけたまま線を引くと、境界線はぼかされて描画色の色が段階的に薄くなり、色の領域が多くなります。このような領域を選択の対象に含めたいときに、色の誤差の数値を大きくするとうまくいくことがあります。

色の誤差は意外とわかるようでわからない機能ですよね。同じ色だけを選択したい場合は色の誤差の数値を０にしておきましょう。

塗りつぶしのよごれ対策：色の誤差を使ってフリンジをましにする

色の誤差ではいわゆるフリンジ対策として使われることがありますが、正直あまり大差ないと思います。というのも０も５０も８０も対して変わらない場合があるからです。8０以上ですこし変わる、１００でだいぶ変わるといった感じです。フリンジ対策には他にも領域拡縮などもあるので組み合わせて対策していくものです。

自動選択において色の誤差も同じです。色々やってみましたが、正直１０も５０も大差ないです。わかりやすくするために0,50,100を比べてみましょう。

描画の形態によっておそらく変動するのかと思いますが、単純な色の実験(アンチエイリアス)ではあまりうまく機能しないようです。0日100かのほうがわかりやすい結果になります。

現在線で囲まれた透明部分をクリックしている状態です。つまり線で囲まれた透明の色(用紙の色の白)をすべて自動選択してくださいという指令を出しているわけです。

白色に近い色をどれだけ選択するかという範囲が、色の誤差なわけです。色の誤差が高いほど、白に遠い色も選択するようになります。上の画像でいえば、グレーも多く選択するようになるのです。

状況や目的によるのですが、塗りつぶす際は本来線の内側はすべて塗りつぶしてほしいはずです。フリンジがあると困るわけです。というわけでアンチエイリアスをかけた線を塗りつぶすときは色の誤差を高く設定したほうがいいということになります。

これと同じように、アンチエイリアスをかけた線を自動選択するときは色の誤差を高くしたほうがうまくいく場合もあるのです。ケースバイケースでうまくいく場合もうまくいかない場合もあります。先の”外側”を塗りつぶす際は注意しましょう。色の誤差を高くすることで、アンチエイリアスの効果がうすれて線がガタガタしてしまいます。

領域拡縮の使い方

領域拡縮(りょういきかくしゅく)：指定したピクセル分だけ本来の領域よりも拡大または縮小した範囲を作成する機能。領域拡縮を高めに設定し、拡縮方法を最も濃いピクセルまで拡張することによってアンチエイリアスによるフリンジが発生しにくくなる。

ものはためしということでやってみましょう。初期設定ではチェックが入っていないのでチェックを入れてください。

色の誤差は初期設定の10、領域拡縮も10のまま自動選択してみました。

色の誤差100よりも遥かに多くのピクセルを選択していますね。この自動選択で塗りつぶすとたしかにフリンジが発生しません。塗り残しを防ぐために多くの領域を選択しているということです。

ちなみに領域拡縮にチェックを入れずに、色の誤差10で塗りつぶすとこうなります。「領域拡縮なし」の方は微妙に細い線が塗りつぶされていないことがわかります。

複数参照の使い方

複数参照(ふくすうさんしょう)：参照するレイヤーを設定できる機能。サブツールの段階で編集レイヤーのみか、すべてのレイヤーを含めるか,参照レイヤー用を設定するかを決められるので使う機会はあまりない。「フォルダー内のレイヤー」や「選択されたレイヤー」を使いたいときに便利。

アンチエイリアスの使い方

アンチエイリアスとはなにか 解像度、フリンジとの関係について

･アンチエイリアスと自動選択ってどう関係してるの？自動選択って線じゃないよね？｡

たしかに。

困ったときは基本的にクリスタの文字にカーソルを合わせれば意味を教えてくれます。どうやら塗りつぶし処理の際に領域の周囲にギザギザを目立たなくする効果」があるらしいです。

･what the heck！｡

とりあえずオンとオフを比較してみましょう。アンチエイリアス以外の項目はすべて初期設定にします。アンチエイリアスがかかった線も用意しました。

さてアンチエイリアスをオフにして自動選択してみます。なるほどぜんぜん違うんですね。アンチエイリアスをオフにすると、クリックした色と同じ色しか選ばないようになっています。今回は透明箇所、つまり用紙の白色をクリックしているので、白を中心に選択されているわけです。

アンチエイリアスをオンにすると、白のみではなく近い色である灰色も選択されています。これがアンチエイリアスの効果というわけですね。

たしかに役に立つ場合もありますが、アンチエイリアスをオンにしたくらいではフリンジは解消しないので色の誤差と領域拡縮を合わせて利用する必要がありそうです。アンチエイリアスをオフにしたときの挙動もなかなかおもしろいのべどこかで使えそうです。

参考文献

１：「CLIP STUDIO PAINTPROの教科書」,isuZu,(技術評論社)

２：「CLIP STUDIO PAINT　デジタルイラストテクニック」(玄光社)

３：「CLIP STUDIO PAINT　機能引き辞典」(ナツメ社)

レイヤーとは

初心者の人がまずは理解するべき用語：レイヤー

クリスタを初めて使った頃は右も左もわからず、レイヤーってなんだ？状態でした。中級者の人からしたらレイヤーは基礎中の基礎で、いちいち説明される必要もないと思う方もいるはずです。しかし初心者には基礎こそが最も重要だと思います。

ということで今回はクリスタのレイヤーについての説明記事です。他の記事でレイヤーという言葉を出すときにこの記事に誘導させるようにすれば初心者の方もステップアップできるし作っておくべき記事ですね。

レイヤーの意味

レイヤー(layer):・レイヤーとは：日本語でいうと「層、あるいは階層」。透明のシート(絵)を何層にもして重ねるイメージがレイヤー。たとえば線画レイヤーと色塗りレイヤーを分けて重ねるといった使い方をする。レイヤー機能を使うとそれぞれのレイヤーに描いた画像を重ねて、一つの絵としてキャンパスに表示することができる。

レイヤーを分けるメリット

・レイヤーを分けるメリット:他のパーツに影響を与えずに簡単に描き直しができる。パーツの変形や移動が簡単に行える。パーツの複製が簡単にできる。パーツの削除や結合が簡単にできる。

1つのレイヤーですべてを描こうとすると、ある特定の線だけを選択したいといったときに複雑に混み合ってしまって選択しにくくなってしまいます。そこでレイヤーを複数に分けることで選択が簡単になるというわけです。たとえば髪だけのレイヤー、顔だけのレイヤー、服だけのレイヤー、背景のレイヤー、さらには影だけのレイヤーといったように何層にも重ねることができます。

レイヤーは透明である

これ以外と重要だったんですね。レイヤーは白紙のようなものだと勝手に思っていました。

・レイヤーの透明性・縞模様:縞模様とは2色以上の異なる色または同色の濃淡を用いて複数の並行もしくはこう察する線で構成された模様の総称。クリスタのレイヤーは用紙の白色以外、基本的に透明なシートで構成されている。

レイヤーをよく見ると白黒の縞模様になっていることがわかります。

試しに用紙レイヤーを非表示にすると、キャンパスは縞模様だけになります。

そもそもデジタルイラストはディスプレイを使うので透明な下書きやシートのような表現ができないのです。ディスプレイで後ろが全て完全に透けているような透明な画面を表示させることは難しいですよね。だからしかたなく透明であることを縞模様で表現しているわけです。

レイヤーをたくさん作って重ねる際に、用紙以外のレイヤーは基本的に背景が白色ではなく、透明であるということを頭に入れておくことが重要です。絵は基本の用紙に透明なシートを重ねていくものなのです。

たとえばレイヤー１に緑の丸、レイヤー２に青い丸を描いたとします。

レイヤー１の絵の情報は「透明なシートに緑の丸が描かれている」ということになります。背景に白色があるように見えても、それは描画されているわけではないのです。一番下のレイヤーである用紙が重なって見えているだけです。レイヤーは下に行くほど優先順位が下がるので、緑の丸が白の”上に”重なるようになります。

レイヤー２に青い四角をかけば同様に「透明なシートに青い四角が描かれている」という情報になります。レイヤー１の上におけば、緑の丸の”上に”青い四角が乗っかることになります。

すべてのレイヤーを表示させるとこうなります。

用紙とベタ塗りの白の違いは以下の記事を参照してください。

【クリスタ】用紙と透過とベタ塗りの色の違いとは【CLIP STUDIO PAINT】

レイヤーの順番の理解

意味

・レイヤーの順序:下より上のレイヤーが優先される。上側にあるレイヤーで下側にあるレイヤーは隠れる。

レイヤーは上にあるか、下にあるかで絵の表示が変わります。上の画像は下が青色の球、上が赤色の球になっています。上のレイヤーが優先表示されるので、青色の球は赤色の球で隠れています。

今度は赤色のレイヤーを下にしてみました。青色のレイヤーが優先されるようになるので、赤色の球が隠れます。

このようにレイヤーの順序関係は絵に影響してきますので注意して作成しましょう。

レイヤーの種類

1:・ラスターレイヤーとはなにか、意味：画像をピクセルの集合として表示するラスター画像を扱うレイヤー。クリスタでレイヤーを新規に作ろうとするとデフォルトではこのレイヤーになる。多くの色を扱う絵や細かいニュアンスを表現するのに適している。

2:・ベクターレイヤーとはなにか、意味：画像の曲線や太さを計算によって描画するベクター画像を表示するためのレイヤー。ベタ塗りやグラーデーションなどが使えないので、線画やモノクロの絵に適したレイヤー。ラスタライズすることでラスターレイヤーに変換することもできる。

3:・グラデーションレイヤーとはなにか、意味：選択した色に応じたグラデーションを作ることができるレイヤー。ラスターレイヤーとの違いは、あとからでも編集可能な点。

4:・ベタ塗りレイヤーとはなにか、意味：レイヤーを指定の色で塗りつぶすレイヤー。色の変更があとからでも可能。塗りつぶしたくない場所にはレイヤーマスクをかける。

5:・トーンレイヤーとはなにか、意味：ベタ塗りレイヤーをトーン化したもの。トーンを貼ったあとでもレイヤープロパティパレットでトーンの設定を変更できる。

6:・３Dレイヤーとはなにか、意味：3D素材をキャンパスにドラッグ&ドロップしたときに作成されるレイヤー。

7:・色調補正レイヤーとはなにか、意味：イラスト全体の色のバランスを整えられるレイヤー。

・その他：用紙レイヤー、画像素材レイヤー、流線レイヤー、集中線レイヤー、コマ枠フォルダなど

上の一覧の中で特に基本となるレイヤーはラスターレイヤーとベクターレイヤーの２つです。

ベクターレイヤーはすこし難しいレイヤーです。説明している記事を作っていますのでよかったらどうぞ。

【クリスタ】ベクターレイヤーの使い方・やり方・方法【CLIP STUDIO PAINT】

レイヤーパレットとは

・レイヤーパレットとは:レイヤーが表示されている箇所全体を指す用語です。

レイヤーの使い方

レイヤーの新規追加

レイヤー新規追加する方法は複数あります。下記の他にショートカットキーを使う方法もあります。ラスターレイヤーの新規追加ショートカットキーはControl＋SHIFT＋Nです。

１：メニューバーから追加

メニューバーにある[レイヤー]から[新規レイヤー]を選択することで任意のレイヤーを追加することができます。

2：レイヤーパレットから追加

レイヤーパレットで左クリックを行い任意のレイヤーを追加することが出来ます。レイヤーは順序が大事なので、どのレイヤーの上に新規レイヤーを追加するかを考えてから追加しましょう。上に追加したいレイヤーにカーソルを合わせて右クリックで追加です。

３：アイコンをクリックして追加

レイヤーパレットの上に紙のようなアイコンがあります。左がラスターレイヤーで、右がベクターレイヤーの新規追加です。

レイヤーを削除・複製する方法

削除したいレイヤーの上で左クリックして[レイヤーを削除]を選択するだけです。複製も左クリックで[レイヤーを複製]を選択するだけです。

レイヤーを選択・複数選択する方法

レイヤーパレットで特定のレイヤーを選択する方法は、選択したいレイヤーを右クリックするだけです。選択されたレイヤーは水色になり、編集対象のレイヤーはチェックではない記号が表示されます。小さくて何の記号かわかりませんが、おそらくペンかなにかの記号でしょう。

複数選択する場合は、SHIFTを押しながら右クリックです。普通のクリックでは他のレイヤーをクリックすると編集対象のレイヤーが他のレイヤーに移り変わり、1つのレイヤーしか選択できません。SHIFTを押しながらクリックすることで編集対象のレイヤーを固定したまま複数のレイヤーを選択できるようになります。

複数のレイヤーを選択できるとチェックのマークが入り、同じように水色になります。ただし編集対象のレイヤーは常に1つだけなので注意してください。複数選択しているからと言って、善悪したレイヤー全てに描画されているわけではありません。

複数選択する意味あるの？

たとえば複数のレイヤーを選択して、移動させる、削除する、複製するといったことが可能になります。一つ一つ選択していくと時間がかかって不便ですよね。そうしたときに便利です。

レイヤーを移動させる方法(順番を入れ替える方法)

レイヤーを移動させる方法はドラッグするだけです。移動させたいレイヤーをドラッグして移動させることが出来ます。

複数選択しておけば、まとめて移動できます。

レイヤーを結合・転写する方法

レイヤーを結合する方法として一番使いやすいのは結合のアイコンを利用することです。

レイヤーパレットの上部には結合のアイコンが表示されています。似たようなアイコンがありますが左が転写で右が結合です。下のレイヤーと結合する機能です。上の画像で言うと青色レイヤーと赤色レイヤーを結合させたいときは、青色レイヤーを選択した状態でアイコンを押すということです。

・結合と転写の違い:結合はレイヤーが1つになるが、転写はレイヤー数が変わらない。転写の場合は透明なレイヤーが残る。

結合も転写もそんな変わらないですよね。どう使い分けるのかいまいちわかりません。転写させた後、空のレイヤーを放置する必要性があるのでしょうか。

例えばこのように赤と青のレイヤーがそれぞれ一つずつあるとします。

結合をするとこのようなレイヤーパレットになります。

転写をするとこのようなレイヤーパレットになります。

参考書籍によると、レイヤーの転写は背景に人物を合わせるときなど便利だそうです。レイヤーの結合と異なる点は、天正元のレイヤーはなにも書かれていない透明なレイヤーとして残ることです。透明なレイヤーとして残す必要はあるのか？と思います。

・注意

・ラスターレイヤーとベクターを結合すると、強制的にラスタライズされてラスターレイヤーになるので注意です。ベクターレイヤーは複製して別に保存しておきましょう。転写の場合も同じようにラスタライズされます。

・ラスタライズとは:ベクターレイヤーをラスターレイヤーに変換すること

レイヤーの表示・非表示、表示されているレイヤーを結合する

表示とは目のマークです。目のマークがついていれば表示・ついていなければ非表示です。目のマークをクリックすれば表示・非表示を切り替えることが出来ます。

上の画像でいうところの赤レイヤーだけ非表示にすれば、キャンパスには青レイヤーのみ表示されるようになります。

表示されているレイヤーを結合する方法

・表示されているレイヤーを結合する:キャンパスに表示されているレイヤー(目のマークがついている)がすべて結合される。絵全体の修正が1つのレイヤーで可能になるので、絵を完成させる最終段階のときの調整に使える。結合させる前にイラストのファイルごと複製しておくことをおすすめします。

・表示されているレイヤーを結合するってどんなとき？

たとえば絵を完成させた後に全体を調整させるときに使います。レイヤーを細かく分けていると全体の調整のためにひとつひとつのレイヤーを操作しなくていはいけなくなり、大変になります。そこで表示されているレイヤーを結合するすることで1つのレイヤーにして操作しやすくするということです。

レイヤーを1つにした後は戻しにくくなるので、念の為絵のファイルごと複製してからレイヤーを1つにしておくことをおすすめいたします。jpgではなくclip形式で保存しましょう。

レイヤーをロックする方法

・レイヤーをロックするとは:レイヤーをロックすることで描画や削除などの操作ができないようにする機能。誤って描画したくないとき等便利。鍵のマークをクリックするだけ。

レイヤーをマスクする方法

・レイヤーをマスクとは:レイヤーに描かれている内容の一部を非表示にすることができる機能。後から表示領域を変更することが可能。アナログで言うところのマスキングテープの役割に近い。メニューバーのレイヤーから使用することができる。

・一部を非表示にするなら消しゴムでよくない？

一理ありますね。ただし「消しゴムで消してしまう」ことと「レイヤーマスクで非表示にする」ことはすこし違います。なぜなら、レイヤーマスクは後から消した内容を表示させることが可能だからです。途中でやっぱり表示させたくなった場合や、ある領域に描画したくない場合、ある領域が邪魔な場合などに有効です。

レイヤーフォルダの使い方

・レイヤーフォルダとは:レイヤーフォルダを使えば複数のレイヤーを１つのフォルダーにまとめることができる。レイヤーが増えるとどれがどれだかわかりにくくなるので、人物と背景でフォルダごとに分けると整理整頓できる。

レイヤーパレット上でレイヤーを選択し、レイヤーパレットのコマンドバーをクリックすることでレイヤーフォルダを作成することが出来ます。

試しに作っています。まとめたいレイヤーの一番上のレイヤーを選択します。今回はレイヤー１とレイヤー２を１つのフォルダにいれたいので、レイヤー２を選択します。選択はレイヤーを左クリックするだけです。

選択したあと、レイヤーフォルダのアイコン(新規レイヤーフォルダー)を押します。もしくは右クリックから新規レイヤーフォルダーを選択することでも可能です。

フォルダーのアイコンを押すと、選択したレイヤーの上にフォルダーが作成されます。

ここからレイヤーをフォルダーにドラッグさせます。これでフォルダーにレイヤーをまとめることが出来ました。

このように背景と人物、あるいは小物でわけるといったフォルダーの使い方が可能になります。フォルダーをクリックすれば名前を変更できます。

フォルダーを非表示にするだけで、フォルダー内にある全てのレイヤーが非表示になり、ひとつひとつ非表示にしなくてもいいので便利です。

フォルダー内のレイヤーが多くて見づらい場合は、三角のボタンを押せば閉じることが出来ます。もう一度押せば開きます。

参考文献

１：「CLIP STUDIO PAINT　機能引き辞典」(ナツメ社)

２：「CLIP STUDIO PAINTPROの教科書」(技術評論社)

３：「CLIP STUDIO PAINT　デジタルイラストテクニック」(玄光社)

下のレイヤーでクリッピング

意味

下塗りにはみ出さないように色を塗る方法

線画

ここでは簡単な円で説明します。まずは線画のレイヤーを用意します。

ベースの色

次にベースとなる色のレイヤーを用意します。ここでは灰色にします。

この時点でレイヤーが線画と、ベースの色の２つになります。

この状態でベースの色の上に色を重ねていくと、はみ出してしまいます。器用な人ならはみ出さずに塗れるかもしれません。厚塗りなどではわざと線画にこだわらず色を重ねる技法もあります。

下のレイヤーでクリッピング

そこでレイヤーを上にもう一つ追加して、[下のレイヤーでクリッピング]を使います。

やり方は簡単です。レイヤーの上で右クリックをして[レイヤーの設定]→[下のレイヤーでクリッピング]を選択するだけです。

もしくは丸い変なマークをクリックすることで[下のレイヤーでクリッピング]できます。

クリッピングに成功すると赤いマーキングで表示されます。

この状態で、影の色のレイヤーで暗い色を塗っていましょう。ベースの色からはみ出さないで塗ることが出来ています。ベースの色以外の部分に塗っても反映されていないことがわかります。

後からクリッピングを外すと効果がなくなってしまうので注意しましょう。こんな感じで調子に乗って塗っていたのがバレてしまいます。

こんな感じで適当に塗ってもはみ出さずに影を塗ることが出来ました。

参考文献リスト

１：「CLIP STUDIO PAINTPROの教科書」,isuZu,(技術評論社)

ベジェ曲線とはなにか

まえおき

今までの記事で直線、曲線、連続曲線(スプライン)、２次ベジェ曲線と扱ってきました。今回はこのカテゴリーの最後にしておそらく最もクセが強い「3次ベジェ曲線」についての記事です。

曲線や連続曲線、2次ベジェのやり方がわからないという方は以下の記事をまずはおすすめします。3次ベジェは上記の曲線をマスターしてから取り組んだ方が理解しやすいです。

※今回の記事では主に「連続曲線」を扱いますが、「曲線」にも３次ベジェ曲線があります。連続曲線で３次ベジェ曲線をマスターできれば、やり方は曲線でもほとんど同じです。

ベジェ曲線の基本的な概念

3次ベジェ曲線とはなにか

意味

出し方

ツールパレット[図形]→[直線描画]→[曲線]もしくは[連続曲線]にまずはアクセスしてください。曲線でも３次ベジェ曲線を使うことは出来ますが、今回は連続曲線の３次ベジェ曲線をメインに解説いたします。

連続曲線を出したら曲線にある４つの曲線の中から一番右の３次ベジェ曲線を選択してください。これで使えるようになります。

共通基本操作

・レイヤーはベクターレイヤーを使う

※ベクターレイヤーに関する説明はこちら

【クリスタ】ベクターレイヤーの使い方・やり方・方法【CLIP STUDIO PAINT】

制御点と方向点：スプラインや２次ベジェとの違い

２次ベジェ曲線と使い方は似ています。２次ベジェ曲線では方向点をクリックで指定したのに対し、３次ベジェ曲線では方向点をドラッグで指定します。

まずは簡単な曲線を描いてみました。意外と簡単ですよね。

最初に線の始点となる位置をクリックし、次に方向点となる位置までドラッグし、次に終点となる位置でエンターキーかダブルクリックを押して終わりです。

このような単純な線の場合は曲線ツールの２次ベジェとほぼ同じですよね。ちなみに上の動画は曲線ツールの２次ベジェです。

上の動画は連続曲線ツールの２次ベジェです。

制御点と方向点：３次ベジェ曲線の特異性

上の項目で複数の線の描き方を紹介していますが、それぞれ同じ線ですがオブジェクトの操作画面が違います。スプライン・２次ベジェ・３次ベジェとそれぞれ違います。

まずはスプラインです。一見すべて同じ種類の制御点の連なりに見えますが、実は始点と終点の制御点以外、色が違うんですよね。実質的に方向点の役割をもっているのだと思います。

次に２次ベジェ曲線です。明確な方向点があります。

そしてこれが３次ベジェ曲線です。どちらかというと２次ベジェに似ていますが、方向点がすこし違います

ブジェクト操作でいじると方向点のようなものが出てきます。隠れていたんですね。

制御点と方向点：1つの線に二段階の方向点

隠れていると言うより、そもそも複雑な線は二段階の制御点で操作するのがいいのかもしれません。ドラッグすることで線画の際、うまく下書きの線に調整といったことができるようになります。クリックとは違った描画ですね。ドラッグで方向点を決定する良さといえます。

制御点と方向点：２線目の挙動が複雑

連続ではなく、単発の曲線ならなんとか描けますが、連続となるとなかなか難しい。

２次ベジェの線を3次ベジェで表現しようとするとこのような方向点の位置になります。

２次ベジェでは曲線の高さの2倍の位置にくるとこのような線が形成されますが、３次ベジェでは2倍ではなく、およそ2.25倍の位置に方向点を設置することで同じような線を形成できます。なぜこんな仕様なのかは不明です。直感的に計算しにくいですね。

倍数だけではなく、方向点の挙動そのものも複雑です。イメージで言えば2.25倍の位置(上)に方向点を置けばいいと思っていましたが、どうやら違うようです。下なんですね。

動画の通り、2箇所目の方向点のクリック位置は上ではなく下になります。単純に下ではなく、右下です。

ドラッグ位置と、実際に設定される方向点の位置が違うというのがポイントですね。

･なんか使いにくそうだね｡

そうなんですよね。ドラッグというのが慣れてないせいか、難しく感じます。クリックにする方法もあるのですが、クリックだとドラッグの良さがなくなるので使い分けたほうがよさそうですね。

制御点と方向点：線を引いてから曲げる

先ほど紹介した方法では制御点→方向点→制御点でした。今度紹介する方法は制御点→制御点→方向点です。

まずはこれが制御点→方向点→制御点です。SHSとします。

つぎが制御点→制御点→方向点です。SSHとします。

どちらが描きやすいかは人によると思いますが、個人的にはSSHのほうが好きです。

ちなみにオブジェクト画面はこんな感じです。

制御点と方向点：円を形成

この項目では円を形成することで、ドラッグの癖に少しでも慣れていこうと思います。

まず２次ベジェ曲線で円を描こうとするとどうなるでしょうか。先に円ツールで正解を描いてから検討してみます。

ベジェ曲線では基本的に曲線の塊として図形を考えます。したがって円を４つの曲線として考えます。

２次ベジェの円形成

ベジェ曲線では曲線の中央軸の2倍の位置に方向点を設定します。2倍の位置を調べるときは定規ツールが便利ですが、基本的に円は円ツールで構成するのであまり使わないでしょう。このように２次ベジェで円を構成しようとするとなかなか手間がかかります。すこしでもずれると、綺麗な円ができないからです。

３次ベジェ曲線でも基本的に手間はにたようなものです。ただし３次ベジェ曲線は修正がききやすいメリットがあります。

方向点の位置が2倍ではなく2.25倍というのもややこしいですよね。たとえば定規を引いて、曲線までの理想の高さが0.55だったとします。その場合２次ベジェ曲線では方向点を0.55*2の1.1の位置に置きます。３次ベジェ曲線の場合は0.55*2.25＝1.2375の位置になるということです。

もちろんこういった細かい作業で円を形成するのはあまり適切ではありません。円をきれいに描きたい場合はきれいに円ツールを使いましょう。

*1

公式の解説では以上のように方向点をつけていくらしいです。これ綺麗に４つ描くのかなり難しいですよ。そもそも制御点を置く位置がグリッドからはずれているのでスナップさせられないんですよね。スナップできないのでぶれてしまうんですよね。ちょうどよく制御点を置くというのがなかなか難しい。

なので直線定規をあらかじめ引いておくのもありですね。今回はメモリを10にして直線定規の等分割で線を作ってみました。定規を作っておくことで、定規の線にスナップします。スナップすることで線が上下にぶれなくなるので便利です。メモリも目安になります。※定規にスナップさせる場合はグリッドのスナップをはずしておきましょう。

ところが、10分割じゃ足りないみたいですね。具体的な数値をいえば40分割くらいする必要があります。今回はメモリをピクセルにして1-100まで分割してみました。10ごとに分割線が入っているので、1-10の間の５で20分割、1-5の間の2.5で４０分割になります。したがって、77.5の位置まで右側にドラッグして、次は下側に77.5の位置までドラッグすることになります。

口で言っても難しいですよね。動画にしてみました。といってもメモリが細かすぎて一発ではなかなかできません。オブジェクト操作で任意のメモリまで”後で”動かせばいいので線は目安でいいと思います。動画だと拡大させて取りづらいのですが、普通に描画する際は拡大表示させながらするとピンポイントに捉えやすいです。

オブジェクト操作でこのように方向点は後から調整できます。

ひとまずきれいな円を形成できました。ただめんどくさいですね。

３次ベジェ曲線と円ツールの違い

･３次ベジェ曲線で円を描くのと、円ツールとの違いは？｡

見た目に違いはありませんが、編集性に違いがあります。オブジェクト操作に切り替えると違いがはっきりわかります。具体的にいえば制御点や方向点で違いが出てきます。図形ツールの円は基本的に制御点(もしくは方向点)のみです。３次ベジェ曲線の場合は制御点と方向点の両方があります。

３次ベジェの場合はいわゆる「ハンドル」として方向点を扱ってもよさそうですね。

最終的な形が円なら、円ツールで描画してもOKです。しかし円から形を動かす場合は３次ベジェのほうがいい場合もあります。ケースバイケースですね。

角を繰り替える：３次ベジェ曲線で形成した円からハートを作る

円ツールと３次ベジェ曲線の違いは制御点の違いでした。さて３次ベジェ曲線が特異な編集性でハートを作ってみましょう。公式でやり方を紹介しています。

制御点の移動でスナップができないのは致命的な欠陥だと思いますが、クリスタでは出来ないみたいですね。自力で移動させましょう。クリスタはベクター保存できない時点で基本的にラスター向けのソフトなのでしょうがないですね。本格的にベクター操作を行いたい場合はイラストレーターなどを使いましょう。

角の切り替え：角の切り替えを行うと制御点から伸びている左右の方向点を別々にコントロールできるようになる

ためしに制御点をクリックして選択後に、左クリックで[角の切り替え]を選択して切り替えてみましょう。

左右の方向点は３次ベジェ曲線ではハンドル用な形をした点と線のことです。

上の動画は[角の切り替え]を行わず方向点を操作した場合の挙動です。

上の動画は[角の切り替え]を行って方向点を操作した場合の挙動です。

[角の切り替え]を行っていると右の方向点を動かせば右だけが、左なら左がといったように独立して動いています。行っていないと両方が連動して動いてしまいます。この角の切り替えの性質を利用してハートを作ろうというわけです。

さてつくっていきましょう。まずは制御点を半分の位置まで下げます。

つぎに方向点を動かしてハートの上の形をつくります。

次にハートの下をつくるために制御点をすこし伸ばします。

最後に制御点を切り替えてから左右の方向点を動かします。

これで完成です。

変形を行っても劣化しにくいベクター線なので、星やハートといった汎用性の高い図形は他のキャンパスを開いてもコピーアンドペーストして使えるように単独で保存してもよさそうですね。

３次ベジェ曲線は線画のトレースに便利なのか

結論から言うと意外と使いやすいです。ただ癖が強いので人によってはスプラインや２次ベジェ曲線のほうが楽という人もいるかもしれません。

３次ベジェ曲線で線画を作ってみる：曲線を見つける

イメージとしては最初に直線を引いて、あとから曲線に変えて調整する感じです。

まずは曲線を見つけることからはじめましょう。

たとえばこのキャラクターの線のなかで、このような曲線を見つけたとします。

曲線を見つけたら、その曲線の始点と終点を直線で結ぶイメージをしてください。

ではそろそろ３次ベジェ曲線を使っていきましょう。まずは上の動画で全体の流れを見てください。直線を曲線に変化させるときに、どこらへんに制御点を移動させるといったコツはとくにないです。なんとなく下に移動させればこう動くなといったように自然にできると思います。銃の標準を定めるイメージですね。

完成したオブジェクトの方向点表示は上の画像のような位置になっています。今思ったのですが、実際に表示される方向点の位置と左右対称の位置に動かせばうまくいくような気がします。

３次ベジェ曲線で線画を作ってみる：連続させる

ALTクリックを多用して線を作ります。ALTクリックをすることで一つ一つの曲線を確定させて次へと勧めていきます。

ALTクリックとはそのままの意味で、ALTを押しながらクリックすることです。

ALTクリックしないで同じことをするとこうなります。ALTクリックしなくてもきれいに描ける方法があるかもしれませんがここでは保留します。ALTをしなくてもきれいに描ける場合もありますが、短かい線などでは歪んでしまう場合が多いです。

３次ベジェ曲線で線画を作ってみる：連続させない

一つの線ごとにエンターで区切ってみました。

例えばこの線は３つのオブジェクトに分かれています。それぞれエンターで区切っています。その意味では”連続”曲線ではありません。

区切ることで擬似的にALTクリックの役割をさせています。あとでつなげられるのでALTクリックが苦手という方におすすめです。

３次ベジェ曲線で線画を作ってみる：直線で形成して、後から曲線に修正する

先は直線と曲線の集まりであり、曲線は直線を曲げたものです。したがって最初にすべて直線で構成し、後から曲線に修正したほうが楽なのではないかという仮説です。

まずは最初に全て直線で構成します。

次にオブジェクト操作で制御点(方向点)を増やして曲げます。

感想

３次ベジェなんて難しいからやめておこう・・・と思っていましたが、意外と簡単で使いやすかったです。イメージとしては粘土をこねくり回してるような感じに近いです。

ちなみに色を塗る場合はベクターレイヤーをラスタライズしてから塗りましょう。ベクターレイヤーは複製しておいたほうがのちのち修正が楽です。

おまけ

「ドラッグで指定」ではなく「クリックで指定」に変える

３次ベジェ曲線をドラッグ指定ではなくクリック指定に変える方法があります。

初期設定では隠れているのでサブツール詳細から[連続曲線]→[指定方法]にチェックを入れておきましょう。そこからクリックで指定に変更するだけです。

ただし、クリックで指定をすると制御点→制御点→方向点という描き方ができなくなるので注意です。

参考文献リスト

・https://tips.clip-studio.com/ja-jp/articles/1030

ベジェ曲線とはなにか

ベジェ曲線の意味

･なんのこっちゃわからん｡

ですよね。学術的な理解はしなくていいと思います。重要なのは線を自由自在に引けるかどうかです。

２つの線と３つの曲線

この記事を作る前に３つの記事を作成しました。この３つの記事で紹介してる分でほとんどの線は作成できると思います。

結局は「綺麗な直線と綺麗な曲線(２つの線)」を自由自在に扱いたいわけです。ベジェ曲線でできることは、スプライン曲線もできたりします。どのツールが自分に一番合っているか考えましょう。すべてのツールをマスターする必要はありません。

２次ベジェ曲線とはなにか

次元の話

「２次元に３次元の話をもってこないで」といったような言い方をよく聞きます。二次元はアニメや漫画、３次元は人間やマウスなどが当てはまります。絵は基本的に「二次元」です。三次元の物体を、二次元でどのように表すかが重要になりますよね。

ざっくりいえば漫画やアニメは幅と長さという２つの要素をもつから２次なのであり、人間やマウスは幅と長さに加えて高さをもつから３次元です。ちなみにドラえもんの四次元ポケットはさらに「時間」が加わります。

2次ベジェ曲線の2つの要素

二次元空間では幅と高さでした。二次ベジェ曲線の2つの要素はなんでしょうか。正直わかりません。

学術的にはN－1次曲線なので、2次曲線の場合はN=３になります。つまり３個の制御点から構成されることになります。クリスタでは制御点と方向点を分けています。制御点２つと方向点１つの、合計３つの制御点から構成されているので2次ベジェ曲線というのです。３つだけど２次です。ややこしいですね。

学術的な理解はさておき次に進みましょう。

曲線ツールではベクターレイヤーを使うのがデフォルト

もちろんラスターレイヤーでも作成できますが、ベクターレイヤーで作ったほうが制御点が確認できたり、編集できるので便利です。

【クリスタ】ベクターレイヤーの使い方・やり方・方法【CLIP STUDIO PAINT】

曲線ツールで２次ベジェ曲線を使う

おっと何度も使っていた曲線ツールはデフォルトで2次ベジェ曲線だったんですね。気づきませんでした。

クリスタは機能をサブツール詳細からチェックを入れないと表示できないし使用できないことがあるので見逃しやすいです。デフォルトでは曲線ツールで2次ベジェが使われてることすら表示されていません。ついでに角度の刻みもいれておきます。

知らぬ間に2次ベジェ曲線を利用してたことにびっくりです。

曲線ツールの2次ベジェは以下の記事で一度扱っています。

【クリスタ】線画に超便利！曲線ツールの使い方とは【CLIP STUDIO PAINT】

方向点と制御点

改めて考えるとコントロールポイントと呼んでいた点は「方向点」だったんですね。

学術的には”方向点も制御点も同じ制御点”として数えられます。つまり方向点と制御点２つの合計３つの制御点で構成されることになります。Nー１次曲線に当てはめると、3－1＝２次曲線ということなります。ベジェ曲線の由来がなんとなくわかりましたね。

ALTを使って連続曲線を描く

連続曲線ではALTkeyが重要になってきます。上の画像を見てください。ALTありの連続曲線と、ALTなしの連続曲線、どちらともクリックする位置は同じです。違うのはALTを押しながらクリックしたかどうかです。

画像を見ればわかるのですが、方向点の場合は「↓(矢印)」で制御点の場合は「📷(カメラ？)」の記号です。

イメージとしては、ALTを押しながらクリックして曲線を終わらせると、前の曲線が次の曲線に影響を受けない感じですね。もっと具体的に言うと連続曲線ではなく、曲線単体を並べているイメージです。

上の動画は両方の挙動を比較したものです。上の線は「前の曲線が次の曲線に影響を受けている」ことがわかります。

ALTを使った連続曲線の練習

たとえば上のような曲線を描きたい場合も便利です。最初はすごく悩んだのですが、ALTを使えば簡単でした。

まずはうまく行かなかった例から紹介します。ALTを使わずに方向点ばかりを作ってしまった失敗例です。

次にALTをうまく使った成功例です。違いがわかりにくいですよね。ポイントは最初と最後のALTクリックです。

連続曲線は曲線の集まりです。直線を引いてみるとわかります。曲線を連続して描くのは得意ですが、曲線じゃない直線が途中で混じってくると苦手なのです。つまりクシ型の図形を形成しない部分は苦手なのです。

クシ型とクシ型以外の線を分けて、クシ型の以外の線はALTクリックで区切ってしまえばいいわけです。

ALTは直線的な線を途中で入り込ませられるので意外と便利ですね。

こんな形もALTを利用すれば出来ます。左上からはじめてクリック→ALTクリック→ALTクリック→クリック(方向点)→クリック(左上に戻る)です。

ALTを使って吹き出しを作る

公式で紹介してたベジェ曲線を作ってみましょう。

*1

上の画像から分かる通り、制御点→方向点→制御点(ALT)で区切っていますね。基本的にこの吹き出しは連続曲線を使わなくても出来ます。曲線ツールを連続して使えばいいだけです。

さっそくつくってみました。特に難しいところはありませんね。

ポイントは線の中央の高さの２倍の位置に方向点を設置することと、一つ一つの曲線ごとをALT＋クリックで終わらせることです。

ALT＋クリックではなく、エンターで区切ると曲線と同じ挙動になります。違いは全体を1つのオブジェクトとして扱うか、バラバラに扱うかです。

ALTを使って柔らかい星をつくる

これもとくに説明することはないんですよね。要するに連続曲線が苦手な直線はALTを使って区切るだけのことです。

まずは直線のみから形成される星です。角ばってますよね。ちなみにこれは連続直線ツールで作りました。

まずは曲線にしたい箇所を選びましょう。今回は外側の5つの角を丸めます。

角だけ丸めるので、曲線は小さいものになります。直線→曲線→直線ですね。これをすべての角で繰り返すだけです。

青がALTクリック(制御点)、赤がただのクリック(方向点)、黒がクリック(終始の制御点)です。

ちなみにベクターレイヤーの線画でもラスタライズすればきれいに塗りつぶしすることが出来ます。星の形(直線のみ)を描くのが難しいという人は適当な星の画像を探して連続曲線でトレースしましょう。

連続曲線における方向点と制御点

曲線ツールとの違い

先程は連続曲線ではなく曲線ツールで2次ベジェを確認しました。今度は連続曲線の2次ベジェを確認しましょう。

以下の記事ではベジェ曲線を扱わず、スプライン曲線を扱いました。

【クリスタ】線画に超便利！連続曲線の使い方【CLIP STUDIO PAINT】

今回はスプライン曲線ではなく、2次ベジェ曲線を扱います。2次ベジェ曲線への切り替え方はスプラインの隣りにある２次ベジェ曲線をクリックするだけです。

曲線ツールで描いた曲線と同じものを作ってみました。

曲線ツールの挙動と全然違いますよね。

曲線ツールでは「最初に第一と第二制御点を決めてから方向点を後で決める」のに対し、連続曲線ツールでは「第一制御点を決めて、次に方向店を決め、最後に第二制御点を決める」という順序になっています。

ちなみにグリッド線は表示から出すことが出来ます。

歪む連続曲線

さきほどの線は、曲線ツールと同じように描けたと言いました。たしかに曲線ツールと同じように連続させなければ同じでした。

今度は同じ線を連続させてみました。歪んでしまっているのがわかるでしょうか。先程の線は最後の制御点をエンターで終わらせましたが、次の線はエンターでは終わらせずにクリックして制御点をつけ、次の線へとつなげました。そうすると線が歪んでいたのです。

･どうして？｡

おそらくですが、始点の制御点と、終点の制御点以外はすべて方向点なのです。最初の始点とエンターで区切るときの点は制御点ですが、クリックで押すときの点は方向点になってしまっているのです。グリッド線がなくてもできますが、合ったほうがわかりやすいですよね。

さてそれではこのような線を描くためにはどのように方向点を考えたらいいでしょうか。ちなみに上の図は制御点２つに対して方向点１つになるようにして、一つの曲線ごとに区切りました。構造的には曲線ツールを使っているのと変わりありません。つまりオブジェクトが別々に作られている状況です。

制御点や方向点の確認はベクターレイヤーで描くことで確認できます。ベクターレイヤーで作った制御点は操作ツールのオブジェクトで確認できます。ベクターレイヤーの使い方は以下の記事をどうぞ。

【クリスタ】ベクターレイヤーの使い方・やり方・方法【CLIP STUDIO PAINT】

今度は第２方向点の位置を少し大きくとってみました。

制御点と方向点の位置は上のようになっています。途中の制御点が余計だったんですね。

上の図のように、別々にオブジェクトが作られることなく、１つのオブジェクトとして作ることが出来ました。

失敗してしまった曲線を比べてみるとよくわかりますね。

余談ですが、方向点が複数あると、２次ベジェではなく、X次ベジェになってしまうのではないでしょうか。（無理やり解釈すれば）方向点がいくつあっても１つとして扱えば、合計３つの制御点から構成できますね。学術的な話には疎いので放っておきます。

そもそもALTを使えばいい

ややこしい場合はALTで区切ってしまってもOKです。

ただしALTを押す場合と、押さない場合では見た目の差はありませんが、編集の面で違いが出てきます。ALTクリックをした曲線は中央に制御点ができています。この制御点が編集面で大きな変化を与えます。

ざっくりいえば、連続曲線で形成された線は制御点から制御点の間のすべての線が連動しています。ALTクリックを間に挟むということは、そうした連動を切断するということになります。

方向点は便利？

2次ベジェ曲線では方向点があります。スプライン曲線や直線では方向点がありません。

オブジェクト操作で方向点を操作できるというのはメリットかもしれませんね。

スプライン曲線は、方向点でコントロールするわけではないので、自分でうまくカーブを形成する必要があります。このカーブがなかなか難しく、コツが要ります。もっと簡単な方法があるかもしれないので今後の研究課題にします。

おそらく幾何学的な知識があればもっと自由自在にコントロールできるようになると思います。個人的にはスプラインのほうが臨機応変に対応できるので好きですね。

単純な変形という意味ではやはり2次ベジェのほうが得意ですね。細かくて複雑な変形はスプラインのほうが得意なイメージです。

制御点(方向点)の謎に挑む

制御点と方向点の混同

公式ページでは「方向点」というワードがありますが、ソフト側では「方向点を追加する」というワードはないのです。ややこしいですよね。つまり「制御点を追加する」を押しても「方向点」が追加されることもあるのです。方向点ではないほうの制御点はどうやって追加するのか。それがわかりません。要研究課題です。

･一体何を言っているんだ？｡

混乱しますよね。うーん・・。

とりあえず直線と曲線(２次ベジェ)の「制御点の追加」の挙動の違いを見てもらいましょう。

･曲線で描いた線、全然制御点追加されないね｡

そうなんですよね。ちなみに直線だからとかは関係ありません。どんな連続曲線を描いても直線のような制御点が追加されないのです。

･じゃあ何が追加されてるの？｡

よーく見ると方向点が追加されています。制御点とは全然形が違いますよね。2次ベジェ曲線では制御点を追加すると方向点が追加されるのです。広義では方向点も制御点に含まれるのでややこしくなるんですよね。

･じゃあどうやって「方向点ではない制御点」をベジェ曲線に”後から”追加するの？｡

これは正直わかりません。とりあえず試行錯誤してみましょう。そもそも最初からALTクリックで制御点をつけていけば、制御点自体は連続曲線中に設定できるのです。後から制御点を付けるのが難しいというだけです。

上の動画を見てください。ALTなしのほうは中間に制御点がついていないせいで、全体移動してしまっている状態です。どうにかして中央に制御点を設置する方法はないでしょうか。

「制御点を追加」を押してもやはり「方向点」しか追加されません。しかも微細すぎて追加されているかどうか目視しづらいです。背景を黒くすると少し見やすくなります。

さて方向点が新たに追加されました。方向点を制御店のような働きをさせようとしてみましたが、微妙にずれるんですよね。

違う方向にも動かしてみましたが、挙動そのものが違います。

(方向点ではない)制御点を後からベジェ曲線に追加する方法

ちょっとちぐはぐな方法ですが、線修正ツールで切断してしまうのもありです。擬似的に制御点を設置できます。切断したあとで、ベクターつなぎをすればALTありと同じような線になります。

他にも正規の方法があるかもしれませんが、今の所わからないので要研究課題にいれます。

結局はただの曲線の集まり～開いた曲線と閉じた曲線

公式が作っていたものを作ってみましたが、円というより角が丸くなった正方形ですね。

制御点と方向点を整理するとこんな感じです。

先程の曲線が開いた曲線だとしたら、今回の曲線は閉じた曲線です。

開いた曲線：方向点と制御点が重なっていない

閉じた曲線：方向点と制御点が重なっている

違いは方向点と制御点が重なっているかいないかです。

開いた曲線は制御点→方向点→制御点や制御点→方向点→方向点→制御点といったように方向点と制御点が重なっていません。

閉じた曲線は制御点(a)→方向点→方向点→方向点→方向点(制御点a)のように最後は方向点で終わるのです。要するにすべての点が方向点になるということです。

ちなみに上で使った閉じた曲線は４つの曲線が組み合わさったイメージです。

もしもっと丸みのある楕円、正円の場合はもう少し複雑な調整が必要になります。グリッド線をいじったほうが早そうですね。というより楕円ツールを使ったほうが早いのであまり使わないでしょう。

線画実験

連続曲線は曲線の集まりに過ぎないので、線の中で曲線を見つけたら曲線を引き、直線を見つけたらALTクリックで対応していけばうまいくいくと思います。基本的に線は曲線か直線かの二択しかありません。ベクターレイヤーならずれても修正が可能ですが、2次ベジェの場合は全て描いた後の修正が少し難しいので、できるだけ描いている途中に修正しましょう。

私は後の先が前の線に影響を与えるのが嫌なので、曲線の終わりごとにALTクリックで区切ります。

あまり長く線を連続してつないでいくと、最後に失敗したときに面倒なので丁度いいところで線を終わらせていいかもしれませんね。よくエンターやALTエンターを押した後に全体が少し歪むことがあるので気を配りましょう。原因についても調査します。後でつなげることも出来ますしそこまで神経質になることはありません。

感想

個人的な印象ですが、2次ベジェは描いている途中はスムーズに描けますが、描いた後の編集性・修正力が乏しい、あるいは難しく感じます。後から方向点を追加して線を変形させるのもコツがいりそうですね。

かといってスプライン曲線は描いた後の編集性・修正力は優れていますが、描いている途中にスムーズに描きにくい面があります。

どちらの線も”下書きがあれば”うまくいきそうなのでそこまで問題はなさそうですね。下書きない真っ白なキャンパスで絵を描き始めるとなると、どちらの線も相当熟練が必要になるかと思います。単純な絵ならグリッドを使えばうまくいきそうですね。

熟練とは、具体的にいえば「後ろの線が前の線にどのくらい影響を与えるのか」、「どのくらいの方向点を打てばどのくらい曲がるのか」、「どのくらいの位置で線を区切るべきか」、「どのくらいの位置に制御点を打てばどのくらい曲がるか」などさまざまなポイントがあると思います。個人的にはおそらく幾何学的な知識が役立つと睨んでいます。

多くの参考書ではスプラインや2次ベジェの説明がないので、参考になれば嬉しいです。また学んだものがあれば記事を更新します

参考文献

１：https://tips.clip-studio.com/ja-jp/articles/1029