一枚の木の画像から立体感のある板を作る方法

あまりにもデザイン系の記事が少ないので、さすがにそろそろとこの記事を書きました。

テーマは、一枚の木の画像を使って立体感のある板を作るという方法です。基本的な部分なので難しい操作や複雑な技法はいりません。

いろいろと応用の効く手法ですので、知らない方は習得をお勧めします。基本が分かれば後は創意工夫と実践のみです。

立体感のある板の作り方

一枚の画像でテクスチャとして利用することは多いかと思いますが、アクセントの素材として立体感のある素材が必要になる場合があります。

ワンポイントの小物として使ったり、ラインの変わりに使ったり、他の素材と組み合わせて使ったりと、応用範囲は広いはずです。

なお、私はFireworksになれているのでFireworksで作成していますが、今回の手法は特別な仕組みを利用する訳ではありませんので、PhotoshopでもIllustratorでも可能です。

板の画像を用意

早速本題に。

まずは、板の画像を用意します。今回はFree Stock Textures[別窓]の画像を使わせていただきます。

基本的には木目があって、縦のラインが強いほうが良いです。

横方向の方が良い場合もあるのですが、今回は奥行きが重要になりますので縦の視線誘導要素が強い方が好都合です。縦のラインは視線を縦方向に動かしますので、奥行きを意識させやすくなります。

もしも横に広がりを出したいならば、横方向にラインがある素材を使うと意図する効果が得られやすくなります。実際には色や形など複数の要素の影響がありますが、線は意外と強力な要素です。

変形して遠近感を出す

用意した画像を台形に変形させます。今回は素直に同じ角度だけ変形させ、真っすぐに奥行きのある表現にしています。

台形の変形で考慮するべきは以下の2点。

• 奥行きがある場合は角度を深く、ない場合は浅く
• 台形の高さは床面を考慮して適切な高さに

特に台形の高さは重要です。立体感というのは見える面のすべてのバランスが整っていなければならないからです。遠近感の意識だけで立体を構成することはできません。

上面は90度近い真上から見たような形で、側面は水平面から見たような形にしてしまうと立体感は生まれず、違和感しかありません。もっとも大切なのは視点を一点に確定することです。

側面を作る

表面の木目の効果で、台形にしただけで遠近感が生まれます。ですが、まだ一面しかないので立体感はありませんから、手前にくる側面を作ります。

今回は最初に選んだ木の画像を使い回します。縦の幅を思い切って縮小し、側面として用いるのです。なお、使う場合は180度回転させた後、水平方向にリフレクトさせます。この方法のメリットは以下の通り。

• 同じ画像なので面ごとに違和感がでない
• 木目を繋げて自然な面を作ることができる

全く別の画像で木目を繋げることは大変ですが、同じ画像を使えばこの問題は簡単にクリアできます。

陰影をつけて立体感をつける

側面がついたので立体感が出てきましたが、まだまだです。理由は簡単で、上面との明るさの差がないからです。

立体感を出すためには各面の陰影が重要になりますから、同じ明るさの面では立体感が感じられません。この点は写真撮影のライティングの部分でも書きました。結局のところ、立体感を出す目的を達成するためには、写真もイラストもやることはかわりません。

根本が理解できているか否か。それが全てです。

実は、「明るさ」という表現をしたことも重要なポイントです。色を暗くするのではなく、目的は影を作って暗くすることなのです。単純に黒くしてしまうようなら台無し。影を作り込むことが立体感の演出に欠かせません。

ここでは、上が暗くしたがすこし明るくなるようにグラデーションを掛けています。このグラデーションが立体感を演出し、同時に照り返しを表現して現実感を与えます。

光を演出する

暗い部分を作った所で、明るい部分、つまり光を演出します。今回は奥を明るくして、空気遠近法を意図しました。空気遠近法を簡単に説明すると、遠くの山がかすんでみえる現象を利用します。

もう少し詳しく説明しますと…。

遠くに行けば行くほど空気の幅は厚くなり、空気に含まれるチリや微粒子が増え、光の拡散も増します。この結果、遠くの山の輪郭はぼやけ、明るくなります。

空気遠近法はこの現象を平面上に再現することで、視覚的な錯覚を起こさせて遠近感を演出します。

今回は遠くの山を見るレベルの距離感ではないのですが、意図的に奥を明るくして強めの演出を加えています。WEB素材として利用される場合、このような強調表現が多いように見えますので、それほど違和感はないでしょう。

右下部の画像では、面と面の境界線にハイライトとなる明るい部分を作って更に立体感を出しています。

側面の暗さと上部の明るさの差が大きければ大きいほど立体感はまして見えますので、このようなラインを利用するだけで更に演出が可能です。

加えて、このラインはタダノ線ではなく、鉛筆の線のように疎密がある線にしています。疎密のあるハイライトは素材感の演出をすることが可能になります。これは、実際に木材や木の机の境界線を観察すれば分かります。絵で描いた様な綺麗な直線ではなく、素材ごとの凹凸が反映されているはずです。

より厳密な表現としては、木目に合わせてハイライトを加工すると完璧になります。

板が床に作る影を付ける

最後の仕上げに、床に落ちる影を作ります。

今回は左上からの拡散光（曇空の日光）を意識して影を作ってみました。どうでしょう？影がつくことで立体感と現実感が一気に増しませんか？

影を作る時にドロップシャドウを掛けることが多々ありますが、現実感のある影の作成はなかなか難しいものです。

この理由は非常に簡単で明確です。観察が足りないのです。

背景を加工

ここまでに作成した板の素材をそのまま使い、背景など別の部分を加えてさらなる立体感を出してみます。

右の画像は、背景の色の差によって壁と床を表現し、板の立体感と合致した空間を作りだすことを意図しています。今までの白背景に比べて、より自然な印象になっていないでしょうか？

今回はモノトーンの簡単な背景にしましたが、床に色や質感のある素材を持ちいればもっと劇的な立体感を作り出すことが可能です。

なお、枠線にも意味があり、空間を区切る効果を狙っています。2次元的な平面の空間と3次元的な奥行きのある空間の境目を意図的に作ることで、奥行きのある空間とない空間が同時に存在する矛盾の解消を意図しています。テレビを見ているようなイメージです。

結び

いかがでしょう？操作自体は非常に簡単ではないでしょうか。

少し文中でも触れましたが、重要なのは観察することです。

時としてドロップシャドウのパターンや、質感の出し方などのチュートリアルをご覧になることもあるかと思います。仮にそれを実践した場合に違和感を感じるならば、観察が足りません。違和感があるのにそれに気付かない方は、圧倒的に観察がたりません。

仮に、現実にある要素を画像処理ソフトで再現する場合。問題となるのは以下の2点。

1. 現実の状態を知らない
2. ソフトの操作技術が足りない

基本は現実を知ることです。あなたの頭の中に作りたい物が現実感を持って構築できないのであれば、ソフトで再現できるはずがありません。

もちろん、技術のみで作り出す事は可能です。ですが、それは応用が効かず、他との差別化ができず、魅力も無い素材になっているでしょう。何事にも例外はありますが、大抵は人より相当に秀でたスキルがなければうまくいきません。

ですが観察は誰にでもできます。見て、触って、感じてください。それがもっとも地道で着実な方法です。テクニックが活かせるのはそれからです。