Illustratorで「YAMAHA SR500ダートラ仕様」を描いてみた。 | WEB初心者奮闘記「ここまでできました!」

WEB初心者奮闘記「ここまでできました!」

Web・PC・アプリや日常のことを書いてます。
いまだにWEBビギナーな私が、ここまでできました!をお届する「ここでき!ブログ」

WEB初心者奮闘記「ここまでできました!」-top_image

高校生の時にノートに描いていたYAMAHA SR500のダートラ仕様のイラストをベースに、Illustratorで描いてみました。
Illustratorでは基本となる、ペンツールや長方形・楕円形ツール、合体や分割、グラデーションやブレンドなどを使用して簡単に作成できますので、暇つぶしにイラストを描いてみてはいかがでしょうか。

あと
使用しているIllustratorは、MacのCS2ですので 、現行バージョンとメニューやパレットなど違う部分がある場合がありますが、ご了承ください。m(_ _)m

元絵
WEB初心者奮闘記「ここまでできました!」-イラスト
若かりし頃に描いたイラストです。
この頃は学校の授業中にバイクや車の絵をずっと描いてました。
下手くそですけど...^^;

アウトライン

WEB初心者奮闘記「ここまでできました!」-アウトライン
完成後のアウトラインです。
メニューの「表示」ー「アウトライン」でパスのみの表示に変更できます。
もとに戻すには
「表示」ー「アートワーク」で変更できます。
ショートカットでは(command+Y) 

今回は見えるところのみ制作しているので、ゼッケンカバーで隠れているリヤサスやフレームなど見えないところのパーツは省略しています。

レイヤー1:背面(左側)・影部分

WEB初心者奮闘記「ここまでできました!」-背面・影部分
チェーン周り
まずスプロケットのベースとなる円を、ツールパレットの「楕円形ツール」で正円を描きます。
そして、円の上部に
チェーンのパーツを1つ作成、ツールパレットの「回転ツール」でセンターを中心に回転、コピーします。
その後
、チェーンパーツにあわせた歯車を作成するため、メニューの「フィルター」ー「パスの変形」ー「ジグザグ」でチェーンパーツと歯車が揃うよう、歯数と高さを調整して作成します。

影部分
フロントフォークやスイングアームは、レイヤー3で作成したパーツをコピーしてから、位置を少しだけずらし、色を濃いグレーに変更して奥側(左側)を表現します。
エンジン部分やケーブル類は、レイヤー4のエンジン周りを作成した時、影となる部分をカットしてこのレイヤーにペーストしておきます。


レイヤー2:タイヤ

WEB初心者奮闘記「ここまでできました!」-タイヤ
タイヤは、大きく分けてブレーキ・ホイール・タイヤと3つのパーツの組み合わせでできています。
側面から作る場合は、各パーツを作り、センターを中心にコピーをしていけば、
比較的簡単にできる行程です。

タイヤ

「楕円形ツール」でタイヤの内外周、サイドウォールを作成。
パスファインダパレットの「分割」で切り離し、グラデーションでタイヤ部分は上を、サイドウォールは下をすこし明るく配色します。
タイヤのトレッド部分は、縦溝を「楕円形ツール」で描き、横溝は「ペンツール」で描いた後、センターを中心に回転・コピーで作成。

ホイール
ツールパレットの「長方形ツール」で、スポーク部分を作成しグラーデーションで立体感を出します。
その後スポーク部分を回転・コピーしてスポークホイールの完成です。

ブレーキ周り
ブレーキディスクは、スプロケットやタイヤを作成したときと同様に、「楕円形ツール」や「回転ツール」で各パーツを作成して、回転・コピーして、グラーデーションで配色すれば簡単です。
ただし、ディスクローターの穴の数や位置、内側のゴールド部分(ここの名前はなんていうんだろう?)は、形状がいろいろあるのでセンスが問われる場所です。^^;
今回は、当時のYAMAHAでは定番のブレーキディスクでしたので、作る際もイメージしやすかったです。

レイヤー3:サスペンション・ブレーキキャリパー

WEB初心者奮闘記「ここまでできました!」-前後サスペンション
フロントフォークやスイングアームを作る際は、角度がついているので下絵をフロントフォークが垂直になるまで回転してから作成したほうが簡単です。

フロントフォーク

インナーチューブは長方形を作成し、塗りをグラデーションでステンレスな感じをだします。
アウターチューブは「ペンツール」で下絵を半分トレースした後、ツールパレットの「リフレクトツール」で反転コピーしてから、メニューの
オブジェクト」ー「パス」ー「連結」(command+J)でパスを連結します。
後はグラデーションでインナーチューブとの質感を変えた(少しマットな感じ)で配色します。

ブレーキキャリパー

キャリパーは、こんなキャリパーがあるのか不明ですが下絵通りに作成。
ダートラ仕様なので何となくアメリカっぽい無骨なところがいい感じです。
ブレーキホースなど曲線がある箇所に立体感を出したい場合は、「ペンツール」で線を描いた後、その線を前面にコピーして重ね、背面のオブジェクトをグレー、全面のオブジェクトを白にした後、「ブレンドツール」で処理すればそれっぽく見えます。
本当はステンレスメッシュな感じを出したかったのですが、今回は省略しました。

リア周り
フロントが完成したら、リアは簡単です。
スイングアームは「長方形ツール」で各パーツを作成、アルミ製を意識してグラーデーションで配色し、ブレーキキャリパーやホース類は、フロントで作ったものをコピーしてきて配置します。
今回リアサスはサイドカバーで隠れるため、スイングアーム取り付け部分の一部のみ作成しました。


レイヤー4:エンジン周り

WEB初心者奮闘記「ここまでできました!」-エンジン周り
バイクといえばやはりエンジンです。
特に空冷エンジンは冷却フィンがあったり、キャブレターやマフラーの機械感がバイク好きにはたまらないのではないでしょうか。
ただし、実際に描こうとするとその細かさが時間と労力に比例します。
当時、本に載っていた写真をベースに描いたのですが、高校時代のイラストですので、かなり省略していましたので、ネットで検索し側面からの画像をもとに作成しました。
それでもざっくりとしか作っていませんが...

マフラー
今回は単気筒のSRのため、マフラーもシンプルなスーパートラップのダウンタイプ。
エキマニ部分は、「ペンツール」でエンジン部分からサイレンサー部分まで一気にパスで描いて、線幅を下絵にあわせて大きくします。
その後、
メニューのオブジェクト」ー「パス」ー「パスのアウトライン化」でオブジェクトに変更。
これまで各パーツの色は、グラデーションで立体感や質感を表現していましたが、プラスして濃淡部分をあえてパスファインダパレットの「分割」で切り分けして配色してみました。
少しポップな感じになりますかね。特に外装パーツではイラストっぽく表現されると思います。

エンジン
まず影となる部分を「ペンツール」で下絵からトレース、次に明るい部分を描きます。クラッチカバーや冷却フィンなどを「長方形ツール」や「楕円形ツール」で作りグラデーションで立体感を出します。キャプレター部分はタンクの下で影部分も多いので適当に作っています。
キックペダルやステップ、ブレーキペダルは、前面でよく見えるのでちゃんと作りこんでおきます。


レイヤー5:外装パーツ

WEB初心者奮闘記「ここまでできました!」-外装・完成
外装パーツはエンジンほど細かくないので作るのは簡単ですが、レース仕様はステッカーやペイントが派手になるのでデザインによってはかなり時間がかかります。
今回はシンプルな形状、カラーリングだったので比較的楽に作れました。


ガソリンタンク
 
下絵に沿ってトレース。
YAMAHAのロゴを「文字ツール」で作成後。メニューの「フィルター」ー「パスの変形」ー「パスの自由変形」で、右に向かってだんだん大きくなるよう変更しました。

シート
これも下絵通りにトレース。
配色はグラデーションを使わず、パーツに陰影をつけるラインを「ペンツール」で描き、パスファインダパレットの「分割」で切り分けた後、濃淡部分を配色しました。

サイドカバー
形状はシンプルなので作成は簡単です。
ゼッケンは「文字ツール」で入力後、メニューの「書式」ー「文字のアウトライン化」でオブジェクトにしてから上部が少し明るくなるグラデーションで塗りました。
その他、タバコの「CAMEL」、エアフィルターの「K&N」、サスペンションの「ホワイトパワー」のロゴは、ネットで画像検索し、それをトレースしたものを配置。

これで一応完成です。
なんだか久しぶりにイラレで作り込んだので楽しかったです。
だんだん形になっていくのも見ていると、寝なきゃと思いながらもついつい手が止まらなくなります。^^)v

レイヤー0:背景
一応完成して余韻に浸っていたのですが、どうせなら背景なども作ってみようと思い、もう一手間加えることにしました。

影の作成
WEB初心者奮闘記「ここまでできました!」-影
完成した画像を全選択しコピー、1番背面となるレイヤー0にペースト。
パスファインダの合体しようとしましたが、かなりパスが複雑なのと非力なiMacG4がフリーズすることを恐れ、面倒でしたが各パーツごとに余分なパーツなるべく削除してから、ちまちま色を黒に変更しました。
タイヤ下部をベースに天地を縮めてからツールパレットの「シアーツール」で斜めに変形。
当然ですが、元々光を意識して作ってなかったため、影の角度が違うのは仕様です。^^;


背景の作成
WEB初心者奮闘記「ここまでできました!」-背景
これは上下に長方形を作成し、下はグレーと白のグラデーション、上は水色と白のグラデーションでざっくりと奥行きを表現。
影の濃さを透明パレットの不透明度で調整します。
ここら辺はもう手抜き間がバレバレですね。


ロゴを入れて完成

WEB初心者奮闘記「ここまでできました!」-ロゴ入れ・完成
最後に背景にロゴを入れてました。
「回転ツール」で角度を付けて、メニュー「効果」ー「スタイライズ」ー「ドロップシャドウ」立体感を出しました。
最後に透明パレットで背景になじむよう適当に不透明度を調節して完成です。
 

「ここでき!」