22

Illustratorでリアルな木目をデザインする方法


壁や机といった背景に木目調のデザインを使いたいと思うことはありませんか?
テクスチャにも入っていますが、リアルには程遠く
色合いや木目の形を雰囲気によって変更できる木目が合ったら嬉しいですよね。
今回はリアルな木目をデザインする方法を紹介していきます。

 

木肌を作る

基本になる木肌を作ります。
木目や節を作った後に調整するので大まかな色(茶色とか)で長方形を作っておきます。
木肌のでこぼこ感を演出するには色々な方法がありますが、好みで使い分けて見ましょう。

木肌1
今回は塗りに茶色の【グラデーション】をかけた後に【効果】→【粒状】を使ってみました。

木肌2

木目を作る

木目の作り方は何通りかありますが、今回はグラフィックペンを使う方法を紹介していきます。
作った木目をテクスチャーにしておけば配色を変えて使いたいときも便利です。

 

長方形を描く

長方形の設定

 

長方形ツールで横長のオブジェクトを作成します。
色はグレー40%に設定しましょう。

 

効果をつける

効果をつける

効果→スケッチ→グラフィックペンで効果をつけます。
値は【ストロークの長さ:15】【明るさ・暗さのバランス:2(好みで)】【ストロークの方向:縦】 に設定します。

 

木目をパスに変換する

パスに変換

選択した状態で【オブジェクト】→【アピアランスの分割】をします。
その後に【オブジェクト】→【画像トレース】→【作成】で設定後に【拡張】を行ってください。

 

拡大して木肌に合わせる

8

あらかじめ作っておいた木肌に大きさを合わせて拡大します。
9KAN
ここでスウォッチに登録しておく場合は、
テクスチャーとして使ったときに継ぎ目が出来ないように線を延ばしたり増減させて
設定画面で調整します。

 

木目のゆがみや質感を表現する

10

リアリティを表現するには線のゆがみや節も必要になってきます。
線にゆがみが足りないと思ったら【ワープ】ツールを使い質感を出していきましょう。
また【アピアランス】パネルを使って線を増やすことで立体感を出すのも有効です。

 

節を作る

木目に節の部分を作る

11KAN

節の表現には【うねり】ツールを使う方法がとられることがありますが、
渦巻きが妙に目立ってしまうので、節を作りたい大きさに【ワープ】ツールをかけてから
【うねり】ツールを使うというように併用するとより節らしい表現になります。

 

節の部分に色をつける

12KAN

これも好みなので必要のない場合はなくても大丈夫でしょう。
もしつける場合は
(1)節の形に合う円を【楕円】ツールで描く。
(2)アンカーを増やして角を上下につける
(3)コピー→前面に貼り付けしたオブジェクトを縮小して色を少し濃い目につける
(4)【ブレンド】ツールでお好みのステップ数を設定し
下のオブジェクトとコピーしたオブジェクトに【ブレンド】を適用する
(5)木肌に乗せて不透明度の設定で馴染ませる
というような操作をして見てください。

13KAN

上の画像は左が不透明度をいじっただけのもの。
右は更に【効果】→【粒状】を行って木肌のグラデーションを調節したものです。
ひと手間加えることで、より馴染んでいるのがわかるでしょうか?

木の板が組み合わさったようにする

18

作成した木のようなオブジェクトを少し加工して見ましょう。
(1)クリッピングマスクやナイフツールで同じ大きさのオブジェクトを2枚作る
(2)2枚を並べ、それぞれ右端に不透明度を調整した長方形ツールで明るい部分を作る
(3)更にその右側にこげ茶色の長方形オブジェクトを作る
(4)【ブラデーション】ツールで全体に乗算する。
今回は【円形】【明るめの茶色】でかけみました。

 

まとめ

リアルな木目は作れましたか?
他にも楕円ツールで描いた2つの円にブレンドを適用したものをもとに
ワープツールを使って調整する方法や、
平行に引いた複数の直線にワープツールとうねりツールで木目と節を表現する
というものもあります。どちらも工夫すればリアルな木目も作ることが出来ますよ。

一度やってみると次からは簡単に出来るので是非色々挑戦してみてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


趣味はDIYやハンドメイド。興味引かれたものは分野を問わずチャレンジしています。

Next Article綺麗な選択範囲が作成できる「境界線を調整」の機能を使いこなすテクニックまとめ