ノイズパターンのシームレス画像を簡単作成!Noise Texture Generatorが便利!

簡単にノイズの入った画像が作れます

海外でのデザインでよく使われているノイズの入っている背景。

これって作るとなると結構面倒なのですがこのwebサービスを使えば簡単につくることができちゃいます。


簡単にノイズテクスチャの画像が作れるWebサービス

海外のサイトデザインを見ていると結構使われていますよね。

@sw2xノイズテクスチャの背景使ってみたいなと思って調べてみたら、こんなWebサービスがあったんですね。

Noise Texture Generator v2.1Noise Texture Generator v2.1Noise Texture Generator v2.1

 

使い方は簡単!
下記の項目をちょちょっといじるだけですぐにノイズパターンの画像が作れちゃいます。

「Noise opacity」

ノイズの透明度を調整できます。
こういったテクスチャはさり気ないくらいが丁度良いと思いますのであまり上げすぎないようにした方が良さそうです。

「Noise density」

ノイズの密度を調整できます。
0に近づけるほど細かく100に近づけると荒くなります。

「Background Color」

背景色を指定します。
サイトの背景色を選んで変更してみましょう。
このブログの背景部分もノイズテクスチャを入れた画像に変えてみました。 気のせいでしょうか?少しリッチな感じになった気がします。

「Transparent noise?」

透過させるかを選べます。
ここにチェックを入れるとノイズのテクスチャ画像が手に入ります。

何か別の画像にノイズテクスチャをかけたいときに便利です。

「Dimensions of the pattern」

サイズを選べます。
幅200x高さ200が推奨のようですが好きなサイズのノイズテクスチャ画像を書き出す事ができます。

青色でも作ってみました

青い背景のノイズ画像

@sw2xが好きな色の青で作ってみました。

このようなテクスチャを始めから作るとなるとシームレスにするのにかなり面倒な手順を踏まなければダメですが、このNoise Texture Generatorを使うと何カ所か調整するだけでいとも簡単に作り出す事ができてしまう!

これは便利すぎる…

こんな簡単だとサイト中がノイズテクスチャだらけになってしまいそうです。

このサービス自体はかなり前からあったようですが改めて便利だと感じたので備忘録としてメモ。