CSP Web Tools

ブラシ先端作成ツール

粒子・にじみなどの設定からブラシ先端画像を生成し、試し描きストロークで描き味を確認して CSP に取り込めるプリセットとして書き出します。

ブラシ先端の画像をブラウザ上で作り、その先端を並べた試し描きのストロークで描き味を確かめてから、透過 PNG として書き出します。CLIP STUDIO PAINT のブラシ先端形状の素材として登録して使えます。

このツールでできること

形状・硬さ・不透明度・縦横比・回転・間隔・粒子量・にじみを指定すると、透過の先端画像がその場で描かれます。同時に、同じ先端を並べた試し描きのストロークが 3 種類生成されるので、先端 1 個の見た目ではなく「線として引いたときにどう見えるか」で設定を決められます。先端画像は PNG、設定値は JSON で書き出せます。

作画のどの工程で使うか

  • 手持ちのブラシに粒状感やにじみを足したいが、素材を探すより自分で作ったほうが早いとき
  • 間隔を変えるとストロークがどう荒れるのかを、CSP に取り込む前に確かめたいとき
  • 縦横比と回転が付いた平筆のような先端を作るとき
  • 同じ絵柄で複数のブラシを揃えたいとき、設定値を JSON で残しておきたいとき

使い方

  1. 上部のプリセット(柔らかい丸・平筆マーカー・粒子ブラシ・にじみ)から、作りたいものに近いものを選びます。
  2. 形状とキャンバスサイズを決めます。キャンバスサイズがそのまま書き出す PNG の一辺になります。
  3. 「描き味」で硬さ・不透明度・縦横比・回転・間隔を調整します。
  4. 「粒子・にじみ」で粒子量とにじみ/ノイズを足します。
  5. プレビューの 4 枚(先端スタンプ・等速ストローク・筆圧 弱→強→弱・間隔テスト)を見て、線として成立しているかを確認します。
  6. 「先端PNG」で画像を、「JSON」で設定値を書き出します。

入力項目の意味

形状
円形・四角形・粒子・にじみの 4 種類です。粒子は点の集まり、にじみは柔らかい円の周りに薄い点を散らした先端になります。
キャンバスサイズ
書き出す PNG の一辺(64〜1024px)です。先端そのものはこの 82% の大きさで描かれ、周囲には余白が残ります。
硬さ
中心から縁までのぼけ具合です。100% に近いほど輪郭がはっきりし、低いほど外側へなだらかに薄くなります。
縦横比
先端の横と縦の比です。1 より大きいと横長になり、回転と組み合わせると平筆のような先端になります。
間隔
スタンプを打つ距離を、先端の直径に対する比(%)で指定します。入力欄の下に、現在の設定で実際に何 px ごとに打たれるかが出ます。
粒子量 / にじみ
粒子形状では粒子量がそのまま粒の数になり、それ以外の形状では粒子量にノイズの割合を掛けた数だけ点が散ります。その結果は画面上部の「実効粒子数」で確認できます。

プレビューの読み方と CLIP STUDIO PAINT への持ち込み方

  • 等速ストローク: スタンプが繋がりきらず数珠状に見えるなら、間隔を下げるか硬さを下げます。
  • 筆圧 弱→強→弱: 抜きが唐突に切れるなら、硬さか不透明度が強すぎます。
  • 間隔テスト: 上段が設定値、下段はそれより粗い間隔で、速く線を引いたときの見え方に相当します。下段で途切れるなら、実際に速く引いたときも同じように途切れます。
  • CLIP STUDIO PAINT では、書き出した PNG を素材として登録し、素材の用途をブラシ先端形状にすると、ブラシのサブツール詳細の先端から選べるようになります。
  • 間隔・不透明度・粒子の散らばりは CSP 側のブラシ設定にも同じ役割の項目があります。書き出した JSON の値を写すと、ここで見た描き味に近づけられます。

処理の根拠

先端は canvas に描いた図形で、ストロークも同じ先端を経路上に並べて描いています。試し描き専用の描画コードを持たないので、プレビューで見えている粒立ちは書き出す PNG と同じものです。円形の縁は、中心から硬さの位置までを不透明、そこから外周へ向けて透明にする放射グラデーションで作ります。四角形は (1 − 硬さ) × 10px 相当のぼかしを掛けて縁を落とします。間隔は先端の外接直径に対する比で、縦横比が付いた先端では長辺を基準にするため、スタンプ間隔 px = 長辺 × 間隔% になります。粒子とにじみの散らばりは設定値から作った擬似乱数で決まるので、同じ設定なら毎回同じ絵になります。

精度と対象外のこと

このツールが作るのは先端画像と、その並べ方の見本です。CLIP STUDIO PAINT のブラシエンジンそのものを再現するものではありません。

  • 筆圧カーブ・手ブレ補正・入り抜きの細かな設定は CSP 側の設定です。プレビューの筆圧は 0 から最大へ上がって 0 へ戻る山型に固定しています。
  • 傾き検知、進行方向への追従、ランダム回転、散布などのブラシ設定は再現していません。
  • 色混ぜ・下地混色・水彩境界のような、下のレイヤーと影響し合う効果は含みません。
  • 書き出す JSON はこのツールの設定を記録したもので、CSP のサブツールファイルではありません。読み込み機能もありません。

画像・入力データの扱い

先端画像の生成も試し描きもすべてブラウザ内で完結し、作った画像や設定を外部に送信することはありません。設定はブラウザの localStorage に保存され、次に開いたときに復元されます。

よくある質問

書き出した PNG をそのまま CSP のブラシにできますか?

PNG は透過のブラシ先端画像そのものです。素材として登録し、用途をブラシ先端形状にすればブラシから選べます。間隔や散布といったブラシ側の設定は、CSP で別に指定します。

キャンバスサイズは大きいほうがよいですか?

大きい先端を縮小して使うと縁が滑らかになりますが、そのぶん処理は重くなります。線画用なら 256px 前後、大きなテクスチャブラシなら 512〜1024px が目安です。

間隔は何 % にすればよいですか?

滑らかに繋げたいなら 5〜25% 程度、粒を残したいなら 30% 以上が目安です。角のある先端は間隔を詰めないと、ストロークの縁が階段状になります。

同じ設定でもう一度作れば同じ画像になりますか?

なります。粒子とにじみの位置は設定値から決まる擬似乱数なので、JSON に残した値を入れ直せば同じ先端を再現できます。