WEBをデザインしているといろいろな素材が必要になるけれど、
その中でも特に多いものの一つが木目調の素材では無いだろうか。
僕自身がデザインした木目調のホームページといえば、
「大阪港区にあるStyleCOCO」という美容室。
お客さんのサイトの宣伝も兼ねて紹介しておく。
ウッディ調のデザインにするだけで、なんとなく凝った感じのホームページデザインになる気がするのは僕だけだろうか。

さて、木目調のテクスチャの簡単な作り方は以前も紹介したことがある。
たった３ステップで作れちゃう、木目テクスチャをPhotoshopで作る方法
とっても簡単に木目調のテクスチャが作れるので非常に重宝している方法ではあるけれど、
もっと重厚な木目のあるテクスチャを作ってみたかった。

実際の木目のような模様が現われる木目テクスチャが作れれば、
ライトな木目と重厚な木目を使い分けることができてデザインの幅が広がるのでは。

早速作り方を解説。
なお、この方法はたまたま僕をフォローしてくれた海外のPhotoshopチュートリアルから見つけた。
最後にオリジナルのリンクを張っておく。
ここでやるのはあくまで簡易的なものなので、詳細は後出のリンク先を参照して欲しい。

まずは背景を作る

まずは背景を作る1000×1000pxで背景を#5a3222にする。

木目を作る

ここが一番大切なところ。これがわかればいくらでも応用が利く。
ではでは、まずは新しいレイヤーを作る。
そして、[フィルター]→[描画]→[雲模様]を選択する。
その際に、描画色を#000000にしておくこと。


するとこのようなイメージになる。

次に、この雲模様を縦に引き伸ばす。


さらにこの雲模様に[ぼかし]→[ぼかし（移動）]をかける。

次に、
[イメージ]→[色調調整]→[ポスタリゼーション]
そう、ここでついに木目のようなものが出てくる。
パラメータの諧調数は「25」程度にする。



あとは、この模様を線に書き直す。
[フィルタ]→[表現手法]→[輪郭抽出]

さらに、色をグレースケールにする。

すると、次のように木目調のデザインができている。
これが今回一番重要で、これを作るここまでの作業が一番大事。
あとは自由に料理してもらえればいい。

さらにリアルにする

ここからは少しはしょって説明。
[イメージ]→[色調補正]→[レベル補正]
以下の画像のように設定。

質感を出すためにノイズを入れる。

さらにそれを縦方向にぼかす。
[フィルタ]→[ぼかし]→[ぼかし（移動）]

最後に乗算で掛け合わせるだけ。
リアルな木目調のテクスチャの完成。

大切なのは木目を作る部分。
これができればいろいろ工夫してもっとリアルなものが作れる。

参照元サイトではさらに立体感を出す方法まで書かれている、
時間があればやってみてはどうだろう。
完成図はこんな感じ。

Custom Wood Texture in Adobe Photoshop