フリンジとはなにか

フリンジの意味

フリンジとは:意味と定義
フリンジ:画像の境界線上に生じるよごれのこと。アンチエイリアスをかけた線の周囲を塗りつぶすと発生しやすい。色の誤差や領域拡縮でましになることがある。
この記事のポイント

・絵の塗り残しはアンチエイリアスが原因の1つ

・絵の塗り残しは色の誤差と領域拡縮を組み合わせて使うことで解決することがある。塗り残し部分に塗る方法やレイヤー分けも便利。

・線画の色と内側の色が近い色になるほど、フリンジが目立ちやすくなる

アンチエイリアスの意味

アンチエイリアスとは:意味と定義
アンチエイリアス:ギザギザした部分(ジャギー)を目立たなくする手法。クリスタでもアンチエイリアスをかけられる。使用すると描画した際の輪郭のギザギザを抑え、なめらかな輪郭にできる。「境界を中間色を使って滑らかに色を変化させること」をアンチエイリアスという。アンチエイリアスをかけるとフリンジが発生しやすい。

アンチエイリアスの理解

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フリンジの理解

アンチエイリアス比較

アンチエイリアス比較

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

クリスタの塗りつぶしツール

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

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

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

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

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

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

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

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

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

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

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

クリスタの色の誤差

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

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

クリスタ色の誤差10

クリスタ色の誤差10

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

クリスタ色の誤差50

クリスタ色の誤差50

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

クリスタ色の誤差80

クリスタ色の誤差80

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

クリスタ色の誤差100

クリスタ色の誤差100

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

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

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

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

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

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

toki
どういうこと?

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

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

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

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

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

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

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

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

領域拡縮を利用

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

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

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

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

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

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

領域拡縮によるフリンジ軽減の実験

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

領域拡縮1

領域拡縮1

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

1じゃ不十分ですね。3にしてみます。

領域拡縮2

領域拡縮2

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

領域拡縮1、色の誤差30

領域拡縮1、色の誤差30

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

内側と外側(応用編)

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

外側のフリンジ

外側のフリンジ

内側のフリンジ

内側のフリンジ

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

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

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

toki
あれ?これなんかおかしいよね?

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

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

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

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

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

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

toki
なんだこれで解決じゃん

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

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

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

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

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

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

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

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

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

ブラシサイズ3のアンチエイリアス強

ブラシサイズ1のアンチエイリアス強

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

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

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

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

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

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

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

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

いいね!
↑1いいね!されています。良い記事でしたら「いいね!」クリックお願いします( ⁎ᵕᴗᵕ⁎ )。いいねされるとやる気が出ます (ノ*゚▽゚)ノ !
読み込み中...
toki

toki

投稿者プロフィール

アーティストに役立つような情報をまとめ、人間関係の手段として芸術が寄与すればいいなと思っています。学んだもの、考えたものは自分だけが独占するのではなく、共有するべきものだと思っています。
連絡は@mmnntmrのTwitterのDMでお願いします。基本的にこのアカウントしか見ていません。
絵に関して調べてほしいことがあればできるだけ対応しますのでぜひ連絡をくださいm(_ _)m

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


よかったらTwitterフォローお願いします!


記事を更新するたびにTwitterにのせていきます(*^^*)

動画はじめましたのでぜひ登録してくださいm(_ _)m

  1. 宝石塗りのやり方
  1. 2016-9-8

    右脳で絵の上達|デッサンや模写に必要な「右脳」を鍛える練習方法とは

  2. 2020-4-13

    【フォトショ】アニメの絵のようなディフュージョンのやり方【Photoshop】

  3. 2019-7-20

    デジタルペイントにおけるHSVカラーサークルとは。HLSやRGBとの相違について。

  4. 2020-4-7

    【創作のネタ・題材】ベリアルとはなにか?意味、エピソード、イラスト、元ネタ【悪魔】

  5. レイヤーの使い方、意味

    2020-3-3

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

  6. 2020-1-14

    正方形を分割する方法とは、やり方(2分割、3分割、5分割)

  7. サタンの絵

    2020-3-7

    【イラスト・創作のネタ】サタンとルシファーの違いとはなにか。

  8. 2019-8-20

    【アナログ】油彩画(油絵具)とはなにか【概論】

  9. 2020-6-24

    【クリスタ】視円錐(パース)を使って立方体を描く方法【CLIP STUDIO PAINT】

  10. 2016-8-4

    【絵の描き方講座まとめ】髪の毛の書き方・描き方まとめ【pixiv】

カテゴリー

アーカイブ

ページ上部へ戻る