【解説】誰でもできる!illustratorでアイソメトリックを描くコツをイチから徹底解説。

タカヒロ

今回はAdobe illustratorで
アイソメトリックの書き方を丁寧に解説していきたいと思います。

実は私も数ヶ月前までは全く描くことすらできませんでした。
コツを掴むことで誰でも簡単に描けるようになります。

[kanren postid=”1451″]

デザインに入いる前に

直交しているX・Y・Zの3つの軸が120度に交わって見えるように
投影して、物体を斜め上から見下ろしたような図形をアイソメトリック と呼びます。

IT企業だけではなく日本企業のHPや広告で幅広く使われている。

最近だとwebサイトだけではなく、PR動画や広告など様々な場所で使われています。

[colwrap] [col2][/col2] [col2][/col2] [/colwrap]

「パターン」でベースとなるマスを作成

1.多角形ツールで六角形を作成。

2.重ね合わせた後、パスファインダー「交差」で作成。

②オブジェクト>パターンからベースを作成。

基準となる立体の作成

側面のもととなる長方形を作成>シアーで30°傾ける。またリフレクトで反対側も作成していきます。

ぺんツールで側面をアンカーポイントをつないで三角形を作成、

またリフレクトツールで上面を作ります。

光源の決定

立体の図形となるため
光が当たる面と影となる面を考えていく必要があります。

左上に光源があることを仮定すると

①に光が最も当たる面

③影となる部分

②は①③の中間 となります。

影と光の部分の作成

光が当たる箇所、影となる場所を作っていきます。

①の光が当たる箇所については、

長方形のオブジェクトをそのままコピー>コピーした長方形を白fff、透明度20%

③影の箇所も同様に

長方形のオブジェクトをそのままコピー>コピーした長方形を黒000、透明度20% とします。

透明度については色や物体に応じて
10%~30%の間に変更するのが良いかと思います。

この記事を書いた人

Takahiro

平日はIT企業で務める側で、フロントエンド開発を学習中。デザインやプログラミングに関することを呟いてます。