ブラシ素材画像を作ってそれをベクター化させてスクリプトブラシ化するのが楽しいので詳しい説明をします
多分これが一番簡単
タイトル長いけど許して
↓書く元となった大雑把記事
なんか上のただのチラ裏メモ書き記事の情報に踊らされて制作した人が 本当に申し訳ございませんでした まともにブラシ作ってないのに(今から作る予定だった) なのでお詫びとして実際にブラシ作ってみて理解してきたので手順を書きますから! やってみたらP2VJじゃ設定できない部分があって… P2VJの最新版にアプデしたら出来るようになってる… P2VJ側のバグだったらしい…ありがとう作者… でも私が知ったかぶりした事実は変えられないので詫びメイキングいきます!!作成動機
『これだけじゃブラシ出来ねーじゃねーか!!』なんて
おっしゃっているのを見かけたので
勢いだけでネットにメモあげちゃうなんて知ったかぶるな
メモはTwitterに書けクソガキって過去の自分に言いたいです…
こうやって…こうして…ってあれ…
はじめに
作る前に何点かいろいろ解説します
ブラシスクリプトとは?
mdiappから派生したペイントソフトで使える拡張子が『.bs』のブラシファイル
中身はプログラミング言語「Lua」で書かれたテキストファイル
使いこなせれば標準機能のビットマップブラシ機能よりも自由なブラシが作れるんだとかなんだとか
検索するといろんな万能ブラシ素材が見つかって楽しいけど今回は紹介しない
ぜひ検索してね☆
ちょっと今回は簡単にそいつの力を借りさせてもらいます
ファイパカだとブラシ名の前に赤色の■がつくやつ
デフォルトで元からしょっぱなから最初からはじめから何個かブラシが入ってるよ
.bsが使えるソフト一覧
-
mdiapp+ (¥ 6,000) Win
mdiapp置き場 - nattou.orgstore.steampowered.com ↓試用はこちらからどうぞ
d.hatena.ne.jp -
FireAlpaca (無料) Win / Mac
firealpaca.comFireAlpaca SE (¥ 3,980 お布施したい人向け)
store.steampowered.com -
MediBang Paint (無料) Win / Mac / iOS / Android
スクリプトブラシの追加が出来るのはPC版だけ
スマホ・タブレット版で使いたい時はPC版とブラシ設定を同期したらいける
medibangpaint.com ジャンプPAINT
メディバンと少年ジャンプとのコラボ
medibangpaint.com -
LayerPaint HD (¥ 800) Android
検索したらauスマパス版(無料)の存在が出てくるけど今はもう配信終了したよ
play.google.comLayerPaint Zero (無料、HDの試用版)
play.google.com -
コミラボ (販売終了、mdiapp+ SEに統合)
-
コミックワークスNEO (トーンデータ100種 ¥ 4,935、200種 ¥ 9,870)
漫画用品で有名なDELETERのソフト
もしかしたら個人経営の画材屋とかにはまだパッケージ版があるかもしれない
コミックワークス
ダウンロード版(デリーターショップ)
こいつらでスクリプトブラシが使えます
大きく分けてmdiappのOEM製品
(他社が本家ソフトにカスタマイズの許可をもらい別ソフトとして販売&配布するよ~って感じ)
であるコミラボ、コミックワークスNEO
Macでも使えるように新しいフリーソフトとして再構築したFireAlpacaと
そのOEM製品のMediBang Paint(ジャンプPAINT)って感じです
みんな祖先は一緒
ちなみに言うまでもないけど上のみんなは作業データは拡張子『.mdp』で保存できます
ラスター形式とベクター形式の違い
今回は自分で作った画像をブラシに読み込ませるだけのブラシなのですが…
その前にラスターとベクターの違いがわからない人のために
よかれと思って一般的に広まっている画像であるラスター形式と
これから扱っていくベクター形式の違いを画像を使って解説します
おそらく情報処理の授業で高校で習う内容ですので
知ってる方も多いのでこの説明自体はすっ飛ばしても構いません
これから習う人や、記憶をかっ飛ばしてしまった人
太古の昔にはそんなものはなかった人はどうぞ見ていってください
下の画像はそれぞれ同じくらいのサイズで パッと見ではこれだけじゃ違いなんて全くわからないと思います なので1000%に拡大表示して見てみると…!?なら見せてやろうかぁ!もっと面白いものをよぉ!! アラマビックリー☆ 見たらわかる通り、ラスター画像の方がよからぬモザイクのようになっていて ラスター?何それぇ?俺☆ベクター 鈍いなぁ、俺が高画質画像だよォ! 何故かというと ジャンジャジャーン☆ 今明かされる衝撃の真実ゥ~ 最初の原寸大画像はそれぞれ本当にラスター画像とベクター画像なので ラスター画像を扱う画像編集ソフトは『ペイントソフト』と呼ばれ ドローソフトは編集のたびにパソコン側が再描画をしたりと わかったぁ~?ラスターとベクターとは
上側がラスター画像、下側がベクター画像です
ラスター(png)
ベクター(svg)
ラスター(png)
ベクター画像の方がくっきりとしたよかれな線になっています
ラスターはピクセルと呼ばれる点(ドット)を埋めて画像として表示する形式で
ベクターはグラフのように数式で画像として表示する形式だからなのです
拡大表示してみて違いを楽しんでみてください
スクショ自体はどちらもラスター(png)なので許してくださいってかァ?許してやるよォ!!
30%に縮小して保存したデータ こっちの方が拡大して違いがわかりやすいかもしれない
ベクター画像を扱うソフトは『ドローソフト』といいます俺のターン!ドロー!!
ラスター画像の形式
ベクター画像の形式
ペイントソフトの例
※は写真編集ソフト
(レタッチソフト)
ドローソフトの例
簡単な作図以外だと動きが重くなりがちなので
一般的にイラスト作成などにはペイントソフトとラスター画像がよく使われます
まあ、何が言いたいかというと
アルパカやメディバン自体はペイントソフトだけど
標準機能のラスター画像を使ったビットマップブラシだと
ブラシサイズを大きく変更するとモザイクっぽくなって質が悪くなるので
ブラシ素材のペン先の画像だけをベクター画像にしたい!って時に
ならブラシスクリプトにして読み込ませようぜ!
ってことです
用意するもの
-
FireAlpaca、MediBangPaint、mdiapp+などのブラシの動作確認ができるソフト
-
ブラシ素材の画像
え、ブラシ素材の画像を用意してないだって!?しょうがないなぁ…
というわけで作りました
使用ソフトはAzPainter2 白で塗りつぶしたレイヤーに黒でペンツールを使って 二値化したのを『輝度から線画抽出』 とまあ、こんな感じに 透過情報のあるpngで保存 できたちょっとしたメイキング
適当にマウスで描いた線に肉付けしていって不気味な文字にしたものを
ガウスぼかししてレイヤーを複製、上側のレイヤーモードを加算にして結合、
複製→加算→結合を繰り返していい感じの形になったらとりあえず『二値化』しました
『8bit/24bitカラー』に透過色指定にチェック☑入れるか
『アルファ付き32bitカラー』で保存
P2VJでラスターをベクターに変換する
ダウンロードしてzipファイルを解凍したらそのまま使えるので
とりあえず好きな場所に保管しておきましょう
立ち上げたらウィンドウが表示されるので
posterize、remove anti-Aliase、binary alphaにとりあえずチェック☑を入れて
ウィンドウにそのまま画像をドラッグドロップするか
selectfileで変換したい画像を選んで開こう
するとこんな感じにsvg画像が生成される
標準だとsvg画像のサムネイル表示に対応してないので
SVG Explorer Extensionをインストールするとsvgでもサムネが出るよ便利
SVG2BSでsvgをbsの書式にする
こちらもダウンロードしてzipファイルを解凍すると使えるよ
わかりやすいとこに置いておいてね
開くとこんなウィンドウが表示されるよコマンドプロンプトも一緒だよ
設定項目はデフォルトのまんまでいいのでloadから使用するsvg画像を開きます
するとこのような文がテキストボックスに表示されます
今回はSVG2BSのzipについてくる.bsのテンプレートファイルを使用するので
Tableを押します
なんかテキストボックスの文が変わりました
SVG2BSのあるフォルダに『template_brush』というフォルダがあるのですがその中に『_汎用ブラシ.bs』というデータがあるのでそれをWindows標準のメモ帳以外のテキストエディタで開いてください今回はTeraPadを使いました
ブラシ形状データと書かれている場所があるのでそこにTableを押して表示された文をコピペして名前をつけて保存で拡張子.bsで保存したら完成!
もしも間違えて『_汎用ブラシ.bs』のテンプレートを上書き保存した時は
SVG2BSの作者の漫画家の宇河弘樹さんが公開してるブラシスクリプト公開ページの下の方に公開されているので
そこから再びダウンロードすることができます
実際に使ってみた
自分で作ったスクリプトブラシを導入してみよう
アルパカだったらブラシのとこにSってマークのがあるから
そこから追加すればスクリプトブラシが使えます
どでも゙ゔる゙ざい゙
png画像をピットマップブラシでブラシにした時とスクリプトブラシを比べました
まずは大きいサイズで
サイズは同じにはしませんでしたが
よく見たら鮮明さがなんか若干違うのがわかると思います
小さいサイズでも比較
こっちもsvgの方が若干鮮明かな?と
元のpng画像を1000×1000pxで作ってしまったので
もっと小さくすればはっきり差があったかな??
とまあこんな感じです興味があったら試してみそ
以下はおまけ
おまけ ファイルサイズを小さくしたい
見てわかる通り、P2VJを利用してそのまま変換したデータだとbsの文が長い
なのでもっと長文をスマートにしたい時はsvgをInkscapeで少々いじります
インストールして開けたら変換したsvgファイルを開いてノードツールで黒いとこをクリックすると形成しているパスがぶわわわっ!と表示されると思います
オブジェクトのタブから『フィル/ストローク』
そしたらフィルを『塗りなし』にしてストロークの塗りを『単一色』にします
別に今の形にこだわりがそこまでなかったらパスのタブから『パスの簡略化』
点が少なくなった!
これを保存してSVG2BSに読み込ませると7123字だったのが2340字になりました
これだけでも囲ってある部分はブラシで読み込んだ時に黒で塗りつぶされます