透明ノイズと紙テクスチャ。
ちょっとざらざらした質感とか、手触りを感じるテクスチャって、背景にさりげなく敷くだけで、ほんのり暖かみが出ていいですよね。
このブログにも背景にうっすらノイズ画像を敷いてます。真っ白にするよりも何となく柔らかい感じになって好きなんです;)。
そんなざらざらノイズ画像を半透明にした「透明ノイズ」のつくり方についてまとめてみます:)。
透明ノイズ。
「透明ノイズ」とは、ノイズ画像を半透明にしたPNG画像のこと。僕が勝手にそう呼んでるだけですけど。
Firefoxで、画像を右クリックして「画像だけを表示」を選んだ時に開くページの背景にも使われてますね（下図）。
CSSは下記のように記述されてました。
body { background: #222 url("chrome://global/skin/media/imagedoc-darknoise.png"); }
backgroundプロパティで、背景色を#222、背景画像にimagedoc-darknoise.pngというPNG画像を指定してます。
画像が半透明なので、背景色（上記では#222）を活かしたまま、ノイズを乗せることができてるんですね。
background-colorを変えるだけでどんな色でもノイズのテクスチャが乗るってわけです;)。
ノイズ画像のつくり方
ざらざら質感のノイズ画像は、Photoshopのフィルター「ノイズを加える…」で、簡単につくることができます。
手順は以下の通り。
適当な大きさの新規ファイル（ここでは100px × 100px）をグレースケールで用意。
明度50%のグレー（#808080）で、全面塗りつぶし。
下準備 「フィルター」→「ノイズ」→「ノイズを加える…」を適用（ここでは量を「100%」、分布方法を「均等に分布」で適用）。
ノイズを加える…
あっという間にノイズ画像ができました！ちょっと粗目なのは、透明ノイズにするための秘訣です;)。
続いて、このノイズ画像を半透明にします。
ノイズを半透明にする
チャンネルレイヤーを使って、明るい部分だけのノイズと、暗い部分だけのノイズをつくります。
チャンネルパネルのサムネイルを⌘を押しながらクリック（これで、明るい部分だけが選択された状態になります）。 新規レイヤーを作って、選択範囲を白色（#ffffff）で塗りつぶし。
明るい部分を抽出 ⌘＋shift＋Iで選択範囲を反転（これで、暗い部分だけが選択された状態になります）。 新規レイヤーを作って、選択範囲を黒色（#000000）で塗りつぶし。
暗い部分を抽出 2つのレイヤーを結合し、背景レイヤーを非表示にして、「不透明度」をお好みで調整（ここでは3%に設定）。
不透明度はお好みで
あとは、これをPNG-24で書き出したら、できあがり！
透明ノイズを使ってみる
できあがった透明ノイズを背景画像として使ってみると、こんな感じになります。
※下のサンプルでは、「不透明度」を1%〜5%にして書き出したものを並べてみました。
紙テクスチャ。
そんな訳で、下図のようなテクスチャを用意してみました。
画用紙に水彩絵の具で着彩したものをモノクロでスキャンしたものです。
この画像を、透明ノイズと同じように、背景色が透ける「透明テクスチャ」にしてみたいと思います！
リピート画像にする
とはいえこのままでは背景画像として使えそうにないので、まずはこれを、シームレスに繋がるように加工します。
適当なサイズでトリミング後、左に続く模様を右側へ持ってきて、内側をグラデーションで上手くなじませれば、左右が継ぎ目なく繋がるようになりますよね（下図）。
上と下も同じ方法で繋げば、背景にタイル状に並べて使える「リピート画像」になるって寸法です！
ここでは、300px × 300pxのリピート画像をつくってみます。手順は以下の通り:)。
長方形ツールで、正方形（ここでは300px × 300px）をつくる。
コピーした背景を、クリッピングマスク（⌘＋option＋G）して、いい感じの場所をトリミング。
使用するサイズでトリミング 背景をもう一個複製して、右へ300px（正方形の幅分）移動し、右側を残すようにグラデーションでレイヤーマスクする。
左右の模様を繋げる 背景のコピー2つを結合したレイヤーを作成（⌘＋option＋E）して、クリッピングマスク（⌘＋option＋G）する。
上下を繋げる用のレイヤーを用意 下へ300px（正方形の高さ分）移動して、下側を残すようにグラデーションでレイヤーマスクする。
上下の模様を繋げる
ここまででほぼ完成ですが、念のため、ちゃんと綺麗にリピートしてるかどうか、結合レイヤーを移動させてみて、継ぎ目をチェックします。
大丈夫そうだったら、テクスチャ部分のみを切り抜いて、リピート画像できあがりです！
テクスチャを半透明にする
ノイズの時と同じように明るい部分と暗い部分を抽出します。
明るい部分だけ、暗い部分だけを、より抽出しやすいように、トーンカーブで調整しながら行います。
明るい部分を抽出しやすいように、トーンカーブで暗めに調整。
上のポイントを出力50まで、下のポイントを出力25まで移動 チャンネルレイヤーの「グレー」のサムネールを、⌘を押しながらクリック（これで明るい部分だけが選択された状態になります）。
新規レイヤーを作成して、選択範囲を白で塗りつぶす。
明るい部分を抽出 暗い部分を抽出しやすいように、トーンカーブで明るめに調整。
上のポイントを出力75まで、下のポイントを出力50まで移動 チャンネルレイヤーの「グレー」のサムネールを、⌘を押しながらクリック後、選択範囲を反転（⌘＋shift＋I）（これで暗い部分だけが選択された状態になります）。
新規レイヤーを作成して、選択範囲を黒で塗りつぶす。
暗い部分を抽出 他のレイヤーを非表示にして、2つのレイヤーを結合し、「不透明度」をお好みで調整（ここでは32%に設定）。
不透明度はお好みで
これをPNG-24で書き出したら、できあがり！
透明テクスチャを使ってみる
できあがった透明テクスチャを背景画像として使ってみると、下のサンプルのようになりました。
紫色の画用紙みたいですよねーXD！
応用編。
透明ノイズや透明テクスチャを使って何ができるのか、3つだけサンプルを作ってみました。
どうぞご覧くださいまし;)。
写真やイラストや動画に重ねる
下記サイトでは、透明ノイズを動画の上に重ねてました！
ノイズ画像の配置位置を動かす事でテレビの砂嵐みたいな表現になるんですねー。なんだかレトロな雰囲気で素敵です:)。
こちらのサイトに倣って、サンプルをつくってみました！
Google マップに質感をプラス
Google maps APIを使えば、Google マップにも透明テクスチャを乗せることができます:)。
いろんなテクスチャを透明にしてみる
シームレスで使えるテクスチャ画像っていろんなサイトで紹介されてますよね！これを利用しない手はないです。
- 紙とか布地のざらっとしたシームレスなテクスチャ素材とパターン素材 | コリス（2012.1.16）
- この質感がタマらない 背景などに使える紙テクスチャいろいろ + チュートリアル | 日刊ウェブログ式（2010.6.30）
- 700個＋の押さえておきたいフリーのシームレスパターン（2010.10.2）
ということで、上記の記事で紹介されてるテクスチャの中から、試しにいくつか透明にしてみましたー。
※上のサンプルで使っているテクスチャを透明にした時のPSDはこちらからダウンロードできるようにしておきますね;)。
下記サイトではそんな透明テクスチャを使った、いろんなリピート画像がダウンロードできます;D。便利素敵ー！
あとがき
あんまり使いどころがなくて困りました…。
けどもっと、いろんなテクスチャを使って、いろんなところに重ねていったら、楽しくなるやもしれませんね…。フラットなデザインに飽きてきたなと思った時とかに、ちょっと試してみてもいいかもです:)。
他になにか使いどころがあったらこっそり追記しますねー。
以上、透明ノイズと紙テクスチャでしたX)！
Webサイトの作り方のまとめ！ブラウザチェック。
Comment & Pingback
1 Comment for 透明ノイズと紙テクスチャ。