こんにちは、ひぐまです。
最近どのサイトでもよく見かけるアイソメトリック図のイラスト、いわゆる斜め上からみたような「等角投影法」を用いたイラストのことですが、 今回はそのイラストのhow toを読んで実践してみたよっていうメモ代わりです。 手順が多いイメージがあり、確かに前にやった時も大変だな～と思った記憶があったのですが、 いろいろなやり方を見ながらやっているうちにものによっては時短になる方法なんかも学べたので共有します。
皆さんも是非一緒にチャレンジしてみてください！
作業前の下準備
ということで早速、Illustratorソフトを立ち上げます。 新規作成から、サイズはなんでもいいので作業しやすいサイズのキャンバスを作成します。
今回題材に選んだのは、ノートパソコンです。
アイソメトリック図は、いろいろな面が見える分、形状がよくわからないものの場合は資料となる写真などを別のウィンドウで開いておくといいかもしれません。
アイソメトリック図を描く際に、下記の画像のように各面を変形する動作が必要なのですが、毎回同じ動きをツールから設定するのは大変なので予めアクションツールで一連の動作を記録しておきます。
実行したい動き
各アクションの設定
top(上下面用)
left(側面用)
right(側面用)
立体に起こしたいものの平面図を作る
アクションが記録できたら、立体にしたいものの平面図を作成します。 この時、組み立てた際の縦幅と横幅の大きさを考慮して作成します。
ノートパソコンの場合は折り畳みなので、面が同じ幅、高さになるようにします。
この段階ではまだペラペラですね。
形を一緒に変えるので、各面をグループ化しておきます。
アクションを使って変形していく
組み立てるパーツができたら、先ほど用意したアクションを実行していきます。
上の画面部分にはleftを、下のキーボードの面にはtopのアクションを実行して変形します。
厚みを付けて立体にしていく
ノートパソコンに厚みを出すために、先ほどできたものを全てコピー＆ぺーストし、厚みを付けたい方向にずらします。
外側の面になる部分が空きますので、そこをペンツールで埋めていきます(下画像)
この時、立体感を出すために、回り込む面の色は少し暗めの色にすると影っぽくなり説得感がでます。
キーの厚みを表現するために素の色を同じようにずらしてのせます
できあがりました。
お好みで情報量を増やす
お好みで画面の内容を変えます
- 例えばこんな感じで画面の内容を作ってあげます。
変更前の画面枠部分を変えてあげるだけです。
- 中身ができたら、同じように、leftアクションで画面の上にはめ込んであげます
完成です！
習作ではありますが、応用でサムネのようにいろいろ作れます。
あとがき
3Dツールで一気にアイソメトリック図化する方法もありますが、 影色の微妙な調整とかができるのでこちらのやり方のほうが好きです。
皆さんも是非挑戦してみてください。
