ニートが頑張るブログ

ニートが現実逃避するために創作活動など色々とカオスに頑張ってみる
ニートが頑張るブログ TOP  >  ドット絵/Web素材 >  「本当に綺麗な」ディザリング付きグラデーション素材

「本当に綺麗な」ディザリング付きグラデーション素材

前々から「グラデーション」について、考えていることがありました。


「綺麗なグラデーション」というのは、なかなか簡単には手に入らないのです。

例えばpixivで、「saiでグラデーションを作る方法」とかを調べようとすると、
こういうのとか、こういう講座系が、色々引っかかります。

要は、「2値ペンで2ピクセルの画像を作り、解像度を引き伸ばすと、グラデーションになる」という事です。


でも、こんな方法で作るグラデーションというのは、実はガタガタなモノなのです。


結局のところ、「PC上の色」というモノは、24ビットのアレです。
RGB一色あたりだと、8ビットのアレです。 つまり、たかだか256色です。 
#00~#FFまでの256段階でしか、グラデーションというモノは作れません。

だから、256ピクセル以上のサイズの絵用に作ったグラデーションというのは、
アップして見ると、絶対にガタガタになってしまっているのです。


                              ▅▅▅▅▅▅▅▅▅▅██████████
          ▅▅▅▅▅▅▅▅▅▅██████████████████████████████


↑もしもRGB値を「高さ」で見ることができたら、「グラデーション」というモノは、このように見える筈です。


このような、「ガクガクのグラデーション」ですが、なんとかマシにする方法があるはずです。

それが、「ディザリング」です。

つまり、「確率的に拡散させる」のです。

                          ▅  ▅ ▅▅ ▅▅█▅▅█▅██▅██████
      ▅  ▅ ▅▅ ▅▅█▅▅█▅██▅██████████████████████████


↑これだけだと、却って凸凹に見えるかもしれませんが、
遠くからみると、より滑らかなグラデーションに見えるのは、こちらの筈なのです。


というワケで、「ディザリングをすれば通常よりも綺麗なグラデーションが手に入る」のは分かったワケですが、
そのような良質なグラデーションとなると、もうsaiでも簡単に作ることはできないでしょう。

実際にどうやって「自作」するか、一度は考えておかないといけません。


█   █   █   █   █   █   █   █   █   █   █   █   █

  █   █   █   █   █   █   █   █   █   █   █   █   █
█   █   █   █   █   █   █   █   █   █   █   █   █
 █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █
█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █
 █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █
█ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █ █
██ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ █
 ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███
████████████████████████████████████████████████████
██ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ███ █
████████████████████████████████████████████████████
████████████████████████████████████████████████████


        █   █    █   █ █ █ █ █ ███ ████ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █  █   █   █ █ █ █ █ ███ ██ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █    █   █ █ █ █ █ ███ ████ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █  █   █   █ █ █ █ █ ███ ██ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █    █   █ █ █ █ █ ███ ████ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █  █   █   █ █ █ █ █ ███ ██ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █    █   █ █ █ █ █ ███ ████ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████
        █   █  █   █   █ █ █ █ █ ███ ██ ███ ████████
          █   █ █ █ █ █ █ █ █ █ █ █ █ ███ ██████████


↑こんな風に、「ドット絵的にディザリングを施す方法」も考えたのですが、
やはりこれは、絵画素材的にはダメだと思うのです。


説明しづらいけど、
これでは、「ギザギザになっている部分」、「01の情報量が変化している部分」に偏りがあるからです。
グラデーションの帯の中間部分で、ずっと「市松模様」が連続しています。


要は、激しすぎるのです。 
絵を完成させた後、シャープネスをかけた時、そういう部分が目立ってしまう筈です。

イラストを拡大したり、「ガンマ値を弄ってまで絵を観察する人」にかかれば、
こういうのはすぐに、粗として見つかってしまうはずです。


だからここでは、本当に「ランダムに」ディザリングをかけた素材を作らなければならない。

そのようなモノは、どうすれば作ることが出来るのか。


大きなサイズでグラデーションを作って
それに「ノイズ処理」をかけただけでは、綺麗なディザリングにはなりません。

グラデーション素材

色つきで図示すると、ガタガタなグラデーションにノイズをかけても、
↑このような「均一な階段にノイズがかかったモノ」が出来上がるだけです。


上記の講座系のような方法で得たグラデーションで絵を描いてから、
最終的にノイズ処理で「誤魔化し」をかけたとしても、このような結果になるだけなのです。



で、ここで思いつきました。

  ┃
  ┃┃
  ┃┃    ┃
  ┃┃    ┃┃
  ┃┃    ┃┃    ┃
  ┃┃    ┃┃    ┃┃
  ┃┃    ┃┃    ┃┃    ┃
  ┃┃    ┃┃    ┃┃    ┃┃
    ┃    ┃┃    ┃┃    ┃┃
          ┃┃    ┃┃    ┃┃
            ┃    ┃┃    ┃┃
                  ┃┃    ┃┃
                    ┃    ┃┃
                          ┃┃
                            ┃


ノイズ付きの大きなサイズのグラデーションを、
↑このように1ピクセルずつズラしながら、半分ずつ、半分ずつ重ね合わせていけば、
ちょうどいい感じのディザリングになるのではないかと。



で、能書きはここまでにして、兎にも角にも出来ましたとさ。

ディザリング付きグラデーション素材

横1024 * 縦2048の、#000000から#FFFFFFまでの、グラデーション素材です。

これだけで見ても本当に滑らかなのか良く分からないだろうから、
↓分かりやすく着色してみたモノがこれです。

グラデーション素材

ディザリング付きのグラデーションと、
単にノイズを走らせただけの階段状の階調の違いが分かったでしょうか?


というわけで、
これからはこの素材を使っていけば、綺麗なグラデーションを得られる筈です。


で、具体的な使い方だけど、
これは「十分大きく作った素材」なので、
「縮小」して使って貰う分には、粗が出ることは無いワケです。

これだけだと縦長な素材に見えるかもしれませんが、
横にコピペしていって伸ばす分にも、問題ありません。


で、実際には半透明にして重ねたり、
「スクリーン」にして重ねたり、
「オーバーレイ」のレイヤーに入れて色つきのグラデーションにしたりすると思います。



その時は不透明度を「100%以下」にして使うと思いますが、
これもまぁ問題ありません。

ただ、「薄める」ということはディザリングの「ノイズも薄まる」ということです。

ノイズに関しては、各自で勝手にノイズフィルタをかけて、強めてもらっても問題ありません。

この素材は「なめらかな階調」でできているので、上で説明したとおり、
ノイズを後からいくらかけたところで、ガタガタが強まったりはしないのです。

関連記事
[ 2013/09/30 12:10 ] ドット絵/Web素材 | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

月別カレンダー
02 ≪│2017/03│≫ 03
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -