見出し画像

楽しくクリスタブラシを作ってみよう!

普段はPhotoshopをメインに使用してアニメの背景画を描いているのですが、最近クリップスタジオペイント(CLIP STUDIO PAINT クリスタ)を使う機会がありました。
慣れないクリスタの仕組みを理解しようと、オリジナルのブラシを作る実験を色々と行う中で発見した、クリスタブラシの機能の魅力を伝える記事を書いてみたいと思いました。


例えば下記動画のような、アニメ背景画作成用のクリスタブラシを色々作成してみました。

もくもくブラシ
アニメ背景用ランダム草地面ブラシ
動く夕空ブラシ
くるくる葉ブラシ

普段使用しているPhotoshopでは作れないタイプのオリジナルブラシがクリスタでは作成できることがとても面白く、最近はクリスタブラシの機能をあれこれと試しながら実験的なブラシを作成していました。
この記事では、クリスタブラシを作る中で気づいた作成時の注意点、初心者がつまづきそうなポイント、Photoshopでは作れないブラシが作れるクリスタブラシの機能の魅力、背景画用のブラシ作成時に個人的に工夫した点や疑問に感じたことなど、いくつか紹介したいと思います。
※CLIP STUDIO PAINTのバーション1.12.3で検証した記事になります
※クリスタブラシの基本的な作り方をご存知の方は「応用編」からお読みください。


基本編

まずはごく基本的な設定で、個人的につまずきそうになった点についての紹介です。

クリスタでのブラシ作成の基本の流れも関しては、色々な方が既にとてもわかりやすく紹介されています。(「クリスタブラシ 作り方」で検索していくつか目に入った他の方の記事を紹介させていただきます)

ブラシ作成時の5つの注意点

その1:ブラシ先端画像の登録がまず必要

上で紹介した記事などでも説明されていますが、まずクリスタでブラシを作るには「ブラシ先端画像の登録」から始める必要があります。

おおまかなオリジナルブラシ作成手順
1,ブラシ用の先端画像を用意する

2,ブラシ先端画像を「画像素材」として登録する

3,何らかの既存のブラシを複製する

4,そのブラシに登録済みのブラシ先端画像を設定する

5,ブラシ設定を調整する(ブラシ完成!) 

Photoshopでは「ブラシを定義」した瞬間に素の新規ブラシが作成されますが、クリスタでは「素材」として「ブラシ先端画像」を用意して事前に登録するところから始める必要があります。Photoshopに比べるとひと手間かかる印象です。

その2:既存のブラシの複製からブラシを作りはじめる(※追加検証しました)

ブラシ先端画像を登録しただけではすぐにブラシが作られるわけではありません。まず既存のブラシを複製して、そのブラシに自作のブラシ先端画像を設定することでようやく新規オリジナルブラシが作れる、という仕様になっているようです。
Photoshopのように素のシンプルな設定の新規ブラシから作り始めるという仕様ではないようでした。
自分が作りたいブラシに近い設定のブラシを選んで複製し、それをもとに作り始める、という仕様のように感じました。

【追加検証】
素のシンプルな設定の新規ブラシから作り始めることはできない」と思っていましたが、よく調べたら間違っておりました、、。
「カスタムサブツールの作成」を行うことで、シンプルなデフォルト設定の素の新規ブラシを作成することができました。
最初はシンプルな円ブラシの設定になっていますが、そこから自分でブラシ先端を登録してオリジナル画像でのブラシを作成していくことができました。

カスタムサブツールの作成
何もブラシ先端画像が登録されていない素の状態から作成しはじめられました

その3:「ブラシ先端形状として使用」にチェックが必要

ブラシ登録の際の設定にもいくつか注意が必要です。
まず下記画像のように「ブラシ先端形状として使用」にチェックを入れないとブラシ先端形状として画像を選択できません。なぜそういう仕様なのかはわかりませんが、私はよくチェックし忘れてしまい「登録したはずのブラシ画像が見つからない!?」となりがちでしたのでご注意ください。
特にブラシ先端画像を大量に登録する際には、このチェック入れ作業を一個一個行うのがかなりの手間になるります。できれば一括でチェックできるようにするとか、チェック不要でもブラシ用に使用できるような仕様になって欲しいと感じています。

その4:事前にレイヤープロパティで表現色の設定をしておく

ブラシ登録時には、事前に「カラーの色付きブラシにしたいか?」「色をあとで選べるブラシにしたいか?」を決めてから登録する必要があります。
そうしておかないと、(環境設定次第なところもあるかもしれませんが)普通にカラーイラストを描く流れの中でブラシを作っていくと「カラーの色付きブラシ」が出来あがります。そして「あれ?ブラシの色が変えられない??なんで??」と私はなりました。
クリスタではPhotoshopと異なり、カラー画像をそのままブラシ先端画像に使用できるのですが、逆にPhotoshop的な色を選べるタイプのブラシを作るには、事前に画像登録設定を変える必要があります。
ブラシ先端画像として自分で用意したレイヤーを、「レイヤープロパティ」で「表現色」の設定を「グレー」に変えてから登録する必要があります。(※漫画用途だったら「モノクロ」などに設定する場合もあるようです)

レイヤープロパティの表現色の設定
色を選べるタイプのブラシを作りたい時はここで「グレー」を選択しておいてからブラシ先端画像として登録する

ブラシ先端画像の登録後にはこの設定は変更ができないようなので、意図と違った設定で登録してしまった場合は登録し直しになってしまいました。
できれば登録時に設定するのではなく、登録後に自由に「カラー/グレー/モノクロ」の切り替えをブラシ設定で行えると良いのでは、、とブラシを作っていて何度も思いました。

その5:登録時に「ブラシ検索タグ」をつけておく

面倒でもブラシ先端画像登録時には「ブラシ検索タグ」をつけておくのが良いようです。
ブラシ設定でブラシ先端画像を探して選ぶ際に探しやすいよう、画像登録時に「ブラシ検索タグ」を何か自分でわかりやすい単語で設定しておくとあとで探しやすいです。というよりもそうしないとかなり探しづらい仕様になっているように感じました。
ブラシ先端画像素材は画像素材としてはフォルダで分類して登録できるます。しかし、ブラシ設定時にブラシ先端画像を探す際には、フォルダ階層では探せず、ブラシ名か検索タグをもとに探す仕様になっているようでした。
なので特に大量にブラシ先端画像を登録した際には、探しやすいブラシ名称にするか、検索タグをつけておく必要がありました。このタグ付けがひと手間かかりました。できれば個人的にはフォルダ階層でもブラシ先端画像を探せるように仕様変更してほしいと感じています。

※個人的に感じた仕様変更の要望は、公式の要望受付サポート窓口へ投稿しました。

応用編

クリスタブラシ作りの5つの工夫(機能)

基本編では色々とブラシ作成の際の仕様への愚痴がこぼれてしまいました、、
一方でそうした設定手順が複雑な分、非常に多彩な機能を組み合わせた複雑なブラシを作成できるのがクリスタブラシの魅力です。
以下では、その特徴や魅力を活かしたクリスタブラシづくりをしながら面白いと感じた工夫(機能)を5つ紹介したいと思います。

その1:ブラシ先端画像にカラーの絵をそのまま使える
その2:一つのブラシに複数のブラシ先端画像を設定できる(何個でもOK!?すごい!)
その3:ブラシ先端画像を複数設定した際のサイズ感合わせの工夫
その4:デュアルブラシの組み合わせ機能が多彩
その5:「連続吹き付けで」アニメーション再生

その1:ブラシ先端画像にカラーの絵をそのまま使える

基本編で触れましたが、クリスタではブラシ先端画像を「カラー」設定で登録することで、カラーで描いた絵をそのままブラシ先端画像として利用できます。例えば下記のように、草花をカラーで描いた絵をブラシ先端画像として登録してブラシに設定することができ、色付きの草花を素早く描けるブラシなどを作成できます。

アニメ背景用ランダム草地面ブラシの一種を使用

Photoshopで作れるのは単色のブラシが基本なので、カラー画像を簡単にブラシ画像として利用できるのはクリスタブラシの大きな魅力です。
背景作画用ブラシを作成する際には、汎用性を高めるための小さな工夫も行いました。
特徴的すぎるはっきりした形状のブラシ画像だと、ランダム散布した際に「同じ形状のもの」が目立ってしまったため、下記画像のような感じに「下地に馴染みやすい形状で」「個々の特徴があまり出過ぎない形状(特徴的すぎない形状)で」ブラシ先端画像を作成するよう工夫しました。

ブラシ先端画像の例

その2:一つのブラシに複数のブラシ先端画像を設定できる(何個でもOK!?すごい!)

クリスタでは一つのブラシに先端画像を何個でも!設定できるようです。普段Photoshopメインで使っている身としてはこれはすごい機能だと感じました。(※Photoshopでは一つだけ設定可。デュアルブラシ設定合わせても二つまで。)
最大何個まで設定できるのかの検証はしていませんが、試した範囲では少なくとも120個以上も設定できることが確認できました。
背景画を描く際には、同じもの(草、雲、ビルなどなど)を少しずつバリエーション違いで描画したいケースが多くあります。
一つのブラシに複数のバリエーション違いの先端画像を沢山設定し、それをランダムに散布できるブラシを作成できるクリスタの機能は、背景画用のブラシ作りにとってとても魅力的です。
例えば下記のような木や山を描く用のブラシを作成した際には、23種類のバリエーション違いのブラシ先端画像を使用し、自然なランダム感が出るようにしました。

くるくる葉ブラシの1種を使用

複数のブラシ先端画像を作成する際に行った工夫として、
1,形状のバリエーションを出す
だけでなく、
2,「光が当たっているところが多いもの」「影になっているところが多いもの」など明暗のバリエーションも生まれるようにブラシ画像の種類を沢山作成しました。

その3:ブラシ先端画像を複数設定した際のサイズ感合わせの工夫(※追加検証しました)

ブラシ先端画像を複数設定する際には、各ブラシ先端画像間でサイズ合わせの工夫が必要になりました。
例えば、仮に下記画像のようなブラシ先端画像①②を用意して、この二つのブラシ先端画像を設定したブラシを作成したいということにします。

ブラシ先端画像①:ABCDEABCDE
ブラシ先端画像②:A

この例では二つのブラシ先端画像の中の「A」の文字のサイズ感は同じです。この文字のサイズ感を保ったまま、一つのブラシに二つの先端画像を設定したブラシを作成したいということにします。

上記の①と②の画像が交互に出てくるシンプルなブラシを普通に設定して作成すると、下記のような感じになります。

元の画像とは異なるサイズ感になってしまう例

元のブラシ先端用の画像では同じサイズの文字だったのが、この設定例では「ブラシ先端画像②」の「A」の文字が対比ですごく大きくなってしまっているのが分かると思います。

これは、ブラシ画像サイズの扱いによる仕様でそうなっているようです。
複数のブラシ先端画像を一つのブラシに設定する場合、もともとのブラシ先端用画像のサイズがそれぞれ何ピクセルかは関係なく、「描画されている範囲」を基準に各ブラシ先端画像のサイズが調整されるようでした。(下記画像の説明参照)

複数ブラシ画像間のサイズ調整の仕様

また、一つのブラシの中に設定された各ブラシ先端画像を個別にサイズ調整することはできません。
このような仕組みのため、描画範囲や縦横比などが大きく異なる複数のブラシ先端画像を一つのブラシ内に設定する場合、どうしても各画像のサイズ感がちぐはぐになってしまいます。
上の例では「A」の文字のサイズ感を揃えたかったのですが、①と②で大きさが揃わず、思ったようなブラシを作成できませんでした。

この課題を解決するため、ブラシ用画像を作成する際に独自の工夫を行ってみました。

サイズ感を調整したブラシ
サイズ調整のための方法の例

ブラシ先端用画像の内容は変えずに、「ABCDEABCDE」のブラシ画像と「A」のブラシ画像とで描画範囲が同じになる方法を考えました。
この例では、「A」の画像のほうに不透明度「1」などのブラシ設定で、極薄く目に見えない程度の小さい点を対角に打つことで、二つの画像を同じ描画範囲の画像にできました。「ABCDEABCDE」の画像と同じサイズの四角い枠を「A」の周りに想定し、その四角い枠の角に数ピクセルのごく薄い点を描きました。
この工夫によって、見た目を変えることなく画像の描画範囲だけを変えることができ、文字のサイズ感を二つのブラシ先端画像間で一致させることができました。(私の中では大発見!でした)

①の画像の変形用バウンディングボックスを表示したところ。目には見えないけれど小さい点が角に描かれていることによって、①の画像の描画範囲が②の画像とほぼ同じになっていることがわかる。

先に例の中で紹介した自作の「アニメ背景用ランダム草地面ブラシ」も、上記のような工夫によってブラシ先端画像のサイズ感を調整して作成しました。

アニメ背景用ランダム草地面ブラシのブラシ先端画像の例
ブラシ先端画像間で、草のサイズ感がだいたい合うように調整した

また、この手法を応用すると、ブラシ先端画像間で「座標を揃える」ような感じのこともできました。
例えば下記のように「A」の文字を「左下揃え」のようになるよう作成することで、描画される位置を「左下」にすることができます。

「A」の文字が左下にくるように、右上の角に目に見えない程度の小さい点を打ったもの
「A」の画像が「左下」に描画されるように調整できた

この手法は色々なタイプのブラシ作りに応用が利きそうだと感じました。
良かったら是非お試しください。
(もし他にもっとスマートな方法がありましたら是非教えていただけると嬉しいです、、)

【追加検証】
この記事を公開後にtwitterでご情報をいただき、もっとスマートな方法が用意されていると知りました!(たけのこきのこ@take_ki_nokoさんにご情報いただきました。ありがとうございました。)
なんと、ちゃんと標準機能として用意されていて、公式にわかりやすい説明ページもありました。

この方法を先に知っていればもっと楽にブラシを作れていました、、公式情報の確認は大事ですね。

やり方は先の公式の解説ページにわかりやすく解説されていますが、私が自己流で「角に目に見えない点を打つ」ことによって行っていたことの代わりに「矩形の選択範囲で囲んだ状態で素材に登録する」だけで簡単に行えました。

例えば下記のように、横幅や縦幅の比率が異なる複数の画像素材があった場合に、その全部を囲むような選択範囲を作成した状態で素材登録を行います。この場合では、夜景のビルの画像が下揃えになるようにしました。

すると、ちゃんと画像の高さやサイズが揃ったブラシを作成することができました。

ビルの画像の下部分の位置がちゃんと揃っている

こちらの標準で用意されていた方法の方が自己流で見つけた方法よりもずっと簡単でした。
唯一自己流の「目に見えない点を打つ」方法の利点としては、登録時に選択範囲指定をしなくても画像そのものに登録描画サイズを記録しておける、という点でしょうか。ブラシ先端用画像を何度も修正して試行錯誤する際にはすこしだけ便利かもしれません。

ちなみに複数のブラシ先端画像用を画像素材として登録する一番簡単な方法を自分なりに試した結果、一番楽だった方法は下記動画のような方法でした。まず一つのファイル内にレイヤーとして複数画像をまとめておき、それを素材パレットに直接一個ずつドラッグアンドドロップする方法です。複数レイヤーをまとめて放り込めると楽なのですが、そうすると一個の素材として登録されてしまうので一個ずつドラッグアンドドロップする必要がありました。また「ブラシ先端形状として使用」のチェックはやはり一個ずつ行う必要はありますが、それでもこの方法が今のところ一番簡便でした。
(もしもっと楽な方法がありましたらご情報いただけると嬉しいです、、)

その4:デュアルブラシの組み合わせ機能が多彩

Photoshopのデュアルブラシ機能と比べて、クリスタでのデュアルブラシの機能の組み合わせは非常に多彩で驚きました。
クリスタのデュアルブラシの機能はver.1.10.10で機能強化があったようです。下記の公式ページに詳しい機能説明がありました。

Photoshopと比べてすごい!と思った点を3つ列挙します。

1,メインブラシで設定できる機能が、サブブラシでも基本すべて使える。
ブラシサイズやブラシ間隔、透明度や散布の設定やストローク設定など、もともとクリスタブラシは設定できる項目が多いです。そのようなメインブラシで設定できることが、サブブラシでもほぼそのまますべて設定可能でした。そのため、デュアルブラシを使用すると、ブラシ設定項目が単純に2倍になるような印象でした。
メインブラシの設定と独立してサブブラシの設定ができるので、両者の組み合わせでかなり複雑なブラシが作成可能だと感じました。
また、メインブラシとサブブラシでブラシサイズの連動なども可能です。

2,サブブラシの合成モードが多彩。
[通常][乗算][加算(発光)][減算][比較(暗)][比較(明)][スクリーン][オーバーレイ][覆い焼きカラー][焼き込みカラー][焼き込み(リニア)][ハードミックス][高さ(リニア)]の、13の合成方法から設定可能と、合成モードが多彩です。
しかも、サブブラシにカラー画像のブラシ先端画像を設定することもでき、その場合でまた合成の挙動が変わるため、組み合わせ可能なバリエーションが非常に多い印象です。

3,サブブラシでも複数のブラシ先端画像が設定可能(カラー画像も可)
先に紹介したように、クリスタブラシでは一つのブラシに複数のブラシ先端画像が設定可能です。
メインブラシだけでなく、サブブラシ側にも独立して複数のブラシ先端画像が設定可能です。
複数のメインブラシ先端画像と複数のサブブラシ先端画像を、様々な合成モードで組み合わせられるので、工夫次第でかなり複雑な設定のブラシが作成可能だと思いました。
例えば下記の「くるくる葉ブラシ」では、メインブラシに30種、サブブラシに7種のカラーのブラシ先端画像を設定して「比較(明)」で合成しています。メインとサブそれぞれでブラシ設定を変えつつ組み合わせて一つのブラシとして作成しています。

「くるくる葉ブラシ」のメインブラシの設定
「くるくる葉ブラシ」のサブブラシの設定

このブラシではメインブラシのほうにシルエット形状用の画像を、サブブラシのほうに質感表現や陰影表現用の画像を設定しています。「比較(明)」のモードで重ねることで、メインブラシ側の画像の形状で、サブブラシ側の画像をマスクしています。

その5:「連続吹き付けで」アニメーション再生

最後に紹介するのは実用的というよりは実験的な工夫の例になります。
クリスタブラシには基本機能として「連続吹き付け」という機能があります。この「連続吹き付け」の機能をベースにしたブラシ作成例の紹介です。


連続吹き付け:オンにすると、同じ場所にペンを押しつけたときに、選択のブラシ先端が塗り重ねられます。

例えば先ほど作ったサンプルブラシで「連続吹き付け」をオンにブラシを使うとこのような感じになります。ブラシ先端画像が高速で連続して吹き付けられる感じです。

このような「連続吹き付け」の機能と
・ブラシ先端画像を複数(いくつでも!)設定可能
・複数設定したブラシ先端画像を登録順に連続して描画可能
という合計3つの機能を上手く組み合わせることによって、
『もしかして連番アニメーション画像を「連続吹き付け」でブラシ上で「再生」できるのでは??』
と思い付きました。その思い付きを形にしたのが下記の「動く」ブラシ群です。

動く夕空ブラシ
動く青空ブラシ

一見ただの動画再生に見えますが、これらは「ブラシ」での描画の様子です。
これらのブラシには連番でアニメーションする空の背景画像が100枚前後「ブラシ先端画像」として設定されています。
はじめはさすがにこんな無茶なことはできないだろうと思っていたのですが、やってみたらちゃんとブラシの動きに合わせて「再生」できました。クリスタブラシのポテンシャルすごいです。
作成時のコツとしては、事前に連番アニメーション画像に通し番号をふっておき、それをまとめて登録・設定することと、ストローク設定で「繰り返し」に設定することで、連番画像がブラシ先端画像として順に「連続吹き付け=再生」されます。
ただ、あまり大きなサイズの画像を沢山登録しすぎるとさすがに挙動が重くなるようでした。また、ブラシ読み込み時の挙動やブラシ容量がやはりかなり重くなるので、実用性があるとはあまり言えないかもしれません、、
ただ作ってみて一番面白いブラシでした。

この記事の基本編で仕様に関する要望をいくつか述べましたが、100枚ものブラシ先端画像を一個一個登録して設定していくのはかなりの手間でした、、、なのであまり強くお勧めはできませんが、興味と時間のある方はこの「動くブラシ」の作成手法も是非お試しください。

おわりに

以上でクリスタブラシを色々と作成する中で面白いと感じた機能や工夫の紹介は終わりです。
ここで紹介した以外にも「リボン」のストローク設定や「速度」によるブラシ設定の変化など、クリスタブラシにはまだまだ色々と面白い機能があると感じます。引き続き研究を続けてみたいと思っています。

最後に、この記事の中で紹介したクリスタブラシですが、CLIP STUDIO ASSETS(クリスタアセットストア)で公開していますので良かったそちらも見ていただけると嬉しいです。
長い記事を読んでいただき、ありがとうございました!


以下、紹介した自作ブラシの宣伝です!よろしくお願いします。


いいなと思ったら応援しよう!