もっとリアルな木目調テクスチャをPhotoshopで一から作ってみる



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

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

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

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

まずは背景を作る

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

木目を作る

ここが一番大切なところ。これがわかればいくらでも応用が利く。
ではでは、まずは新しいレイヤーを作る。
そして、[フィルター]→[描画]→[雲模様]を選択する。
その際に、描画色を#000000にしておくこと。
描画色の設定
フィルタ→描画→雲模様
するとこのようなイメージになる。
雲模様の適用
次に、この雲模様を縦に引き伸ばす。
縦に引き伸ばす
縦に引き伸ばす
さらにこの雲模様に[ぼかし]→[ぼかし(移動)]をかける。
ぼかし(移動)
次に、
[イメージ]→[色調調整]→[ポスタリゼーション]
そう、ここでついに木目のようなものが出てくる。
パラメータの諧調数は「25」程度にする。
イメージ→色調補正→ポスタリゼーション
イメージ→色調補正→ポスタリゼーション
イメージ→色調補正→ポスタリゼーション
あとは、この模様を線に書き直す。
[フィルタ]→[表現手法]→[輪郭抽出]
フィルタ→表現手法→輪郭抽出
さらに、色をグレースケールにする。
[イメージ]→[色調補正]→[白黒]
すると、次のように木目調のデザインができている。
これが今回一番重要で、これを作るここまでの作業が一番大事。
あとは自由に料理してもらえればいい。
木目模様

さらにリアルにする

ここからは少しはしょって説明。
[イメージ]→[色調補正]→[レベル補正]
以下の画像のように設定。
レベル補正
質感を出すためにノイズを入れる。
[フィルタ]→[ノイズ]→[ノイズを加える]
さらにそれを縦方向にぼかす。
[フィルタ]→[ぼかし]→[ぼかし(移動)]
[フィルタ]→[ぼかし]→[ぼかし(移動)]
最後に乗算で掛け合わせるだけ。
リアルな木目調のテクスチャの完成。
リアルな木目調のテクスチャの完成
大切なのは木目を作る部分。
これができればいろいろ工夫してもっとリアルなものが作れる。
参照元サイトではさらに立体感を出す方法まで書かれている、
時間があればやってみてはどうだろう。
完成図はこんな感じ。
リアルな木目調
Custom Wood Texture in Adobe Photoshop
Related Posts Plugin for WordPress, Blogger...

Leave a Reply