creatersnest6

【Illustrator】遠近グリッドを使って建物を描いてみよう


家やビル等の建物を描画する時、単なる平面ではなく、不動産関連のチラシやパンフレットのような、
立体感のある描画が必要となるシーンがあります。
専用の3D描画ソフトを使うほどでもないし、かと言って、スケッチや美術が得意な訳でもない・・・そういった描画の時に役に立つのが「遠近グリッドツール」です。
このツールを使えば、誰にでも簡単に立体感のある建物を描画をすることができます。
今回は、下図のような夜景ビルを例に制作しましょう。

finish

遠近グリッドツールを表示し、壁を作ろう

1.ツールパネル内の「遠近グリッドツール」を表示します。

2.遠近グリッドが表示されました。

002

3.まずは、向かって左側面部を編集してみますが、
ここでキーボードの数字「1」を入力すると、
画面左上にあるダイスの1側面が青色になります。

003

キーボードの数字「2」を入力すると、
側面の表示が底辺の緑になり、底辺部を編集することができます。

004

キーボードの数字「3」を入力すると、
側面の表示が右側面のオレンジ色になり、右側面を編集することができますが、
ダイスの編集したい辺をマウスでクリックしても同様です。

005

4.キーボードの数字「1」を押下し、左側面を編集できる状態にしていき、
さらに下図のように、「長方形ツール」(塗り:灰色、線:無し)を使って、
左側面のグリッド線に沿って長方形を描画します。
遠近感のある長方形は、グリッドに沿って描くことができますね。

 

006

5.キーボードの数字「2」を押下し、
左側面と同様に、長方形ツールを使って右側面を描いていき、
また、右側面は少し陰の感じにしたいので、塗りつぶしの色を少し暗めにします。
(この辺りは各自状況に応じて調整して下さい)

007

遠近図形選択ツールを使って、窓を制作する

6.画面左上にあるダイスのアイコンにある「×」マークを押下し、グリッド表示を一旦消します。

008

7.長方形ツール等を使って、ビルの窓のパーツを描画していきますが、
余裕があれば、窓の縁も一緒に作っていきましょう。

009

8.遠近グリッドを再び表示し、
ツールパネルより「遠近図形選択ツール」を押下します。

010

9.窓のパーツを、編集側面にドラッグしてグリッドに沿って貼付けていき、
altを押しながらオブジェクトをドラッグすると、移動コピーできるので便利です。
(下図は左側面編集時)

011

10.窓の塗りも、左側面は少し明るめ、右側面は少し暗めにするなど、陰の感じを出して行きますが、
ここで窓の「塗り」をランダムにオレンジ色にしていくと、夜のビルの雰囲気を出せますね。

012

建物の仕上げ

11.「遠近グリッドツール」に戻り、ビルの地面の部分を描画します。
キーボードの数字「2」を押下し、底辺を編集できる状態にしていき、
グリッド線を見ながら、長方形ツールで底辺部を描画していきましょう。
長方形の「塗り」の色は任意ですが、夜のビルということもあり、
濃いめのグレーに設定しました。

013

12.ビルの屋上に看板のようなものを、おまけで付けてみました。
ちなみにこのおまけは、別ドキュメントで制作しましたが、
このおまけも、遠近グリッドツールを使って制作し、縮小したものです。

014

13.以上で完成です。
ビルの前に通行人や植木を入れ込んだり、壁面にメイン扉を入れ込むと尚良いでしょう。

finish

遠近グリッドツールのまとめ

遠近グリッドツールを使って立体図形を描画するには、
編集する側面を切り替えることがポイントとなります。

キーボードの数字「1」・・・左側面
キーボードの数字「2」・・・底辺(水平面)
キーボードの数字「3」・・・右側面
キーボードの数字「4」・・・グリッドに依存しない

また、下図のように、編集したい側面をクリックしてもOKです。

スクリーンショット 2015-11-05 22.47.34

側面にパーツを貼付ける場合は、遠近グリッドツールを表示した状態で「遠近図形選択ツール」を使用します。

スクリーンショット 2015-11-05 22.55.20

上図のように、テキスト等を壁面に描画する場合に便利ですね。

今回はビルを例にしましたが、遠近グリッドツールは、
学校や一軒家、さらには内観などを描画するのに便利なツールです。

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

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

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


Next Articleパスファインダーを使いこなして複雑な図形を書いてみよう