「Adobe Photoshop」だけ使用して、Webサイトに表示する背景で使用可能な“ざらざら”質感のテクスチャパターンを作る方法をまとめてみました。自分で写真を撮ったり、フリーの素材を探したり、その写真や素材をいちいちシームレス（継ぎ目がわからないよう）に加工したりと面倒な工程がなくPhotoshop だけで作れるので、とりあえず背景を“それっぽい”デザインにしたい人におススメです。
おおまかな作成手順
まずはおおまかな作業手順をざっくり把握！以下のような流れです。
・新規作成
・フィルター機能でノイズを加える
・ひとてま加える
・テクスチャを半透明にする
・画像を書き出す
新規作成
まずは Photoshop を開き、任意のサイズで「新規作成」します。
今回は100px×100pxで作成しました。解像度はWebで使用するので72ピクセル/インチ、カラーモードはグレースケールにします。
ポイント
サイズ（容量）を抑えることで、無駄にページの読み込み速度が遅くなることを防ぎます。ただ、速度を速めるために画質を落としてしまい見た目が悪くなってしまっては本末転倒なので、画像がキレイに見えて、容量をが小さい最適なところを調整しながら書き出します！
フィルター機能でノイズを加える
「フィルター」機能を使ってノイズを加えます。このノイズがテクスチャ感を出してくれます。
①まずカンバスを明度50%くらいのグレーで塗りつぶす
②「フィルター」→「ノイズ」→「ノイズを加える」
量は「400%」、「均等に分布」に設定しました。
明度と量で違いはあるのか
グレーの明度とノイズの量で、テクスチャがどう変わってくるのかという疑問がありましたので調べてみました。結論、そんなに細かい違いはないという印象です。ノイズ200%より上は明度の濃さに関係なく同じように見えますね。実際にテクスチャを適応させてみて一番しっくりくるものにするのがベターだと思います。迷ったらグレー50%ノイズ400%で、テクスチャ感は出せると思います。
ひと手間加える
ノイズの黒い部分（色の塗られている部分）を抽出して、白い部分を透明にします。
①先ほどノイズを加えたレイヤーを選択した状態で、チャンネルウィンドウのサムネイル部分を「Alt」キー（「⌘」キー）を押しながらクリック
そうするとグレー（黒）以外の部分が選択されます。
③「選択範囲」→「選択範囲を反転」
④黒で塗りつぶし
ひと手間加える意味はある？
黒い部分を抽出する意味は、白い部分を透明化させることで背景色に馴染みやすくなります。選択部分を反転する意味は、白ベースの時“そのまま”の状態と“塗りつぶし後”の素材の見ためが一緒（白と黒の配置がほぼ一緒）になります。
自然になじませるために不透明度は4%とかなり薄くすると３つの状態でさほど違いがありませんが、強めにテクスチャ感を出そうとして不透明度を15%まで上げてみると以下の画像のように違いがよく見えてきます。
不透明度を上げれば上げるほど“そのまま”の状態で、白い部分が目立ってしまいます。ですので、黒い部分を抽出する作業は必須だと言えます。
一方で、“選択範囲を反転”させる作業は、見た目上はほとんど違いがないので、正直省略してしまって問題ない手順なんじゃないかなと思います。
テクスチャを半透明にする
背景レイヤーを非表示にして、「不透明度」を調整して半透明にする
1~5%くらいで調整すると自然なテクスチャ感を出すことができます。
画像を書き出す
①「ファイル」→「書き出し」→「書き出し形式」
②PNG形式を選択して、透明部分にチェックを入れる
jpgだと透明化されないので注意が必要です。色数の少ない画像ならgifで作ることでより容量を落とすことができますね。
③任意のフォルダに書き出しできれば、完了です。
実際に使用したときの仕上がり
実際に本サイトに実装したときのイメージです。薄っすらとザラザラ質感を出すことができて、ちょっとだけリッチなデザインにすることができました。とても簡単、手軽に実装できる割にはそこそこイイ感じになるのが魅力的ですね。
半透明なので背景にカラーを入れてあげるとサイトの内容にあったイメージを作りやすくなりますね。個人的に、明るいカラーを敷いてあげると、温かみのある優しいイメージになり、暗めのカラーを敷いてあげると湿っぽくおどろおどろしいホラー感のあるイメージになるような気がします。
そんな感じで楽しくWEBデザインができるテクスチャです！
まとめ
今回は「Adobe Photoshop」のノイズフィルターという機能を使用して、とても簡単にWebページの背景用テクスチャを作る方法をまとめてみました。ノイズフィルターを使ってテクスチャ感を出す方法は Photoshop の基本的なテクニックですので、Webページの背景用テクスチャを作る方法を通してぜひマスターしてください！
