Illustratorで画像のパースに合わせ、文字や画像を変形 -

デザイン雑学 ホーム » Illustrator » Illustratorで画像のパースに合わせ、文字や画像を変形

Illustratorで画像のパースに合わせ、文字や画像を変形

Illustratorで奥行きのあるパースの画像に合わせて文字やロゴを変型する場合、自由変形ツールではコーナーに移動ポイントがこないので何度も何度もやらなくてはならず苦労します。
前に「エンベロープ」の「最前面オブジェクトで作成」で簡単に作成できることを紹介しましたが、パースが効かないので違う方法も紹介します。
変形01
1.配置したいモニタの画面の縦横比が合う様に「長方形ツール」で長方形を描き、
  その中にロゴを配置し、グループにします。
  次に、ロゴを配置したいモニタの画面を囲む様にペンツールでトレースします。
  この時の注意は、配置したい「モニタ画面を囲むオブジェクト」を最前面にしておきます。

変形02
2.ロゴの画像と配置したいモニタの枠の両方を選択し、「オブジェクトメニュー」→「エンベロープ」→
  「最前面オブジェクトで作成」を選ぶだけで簡単にできます。
  この様な画像はこのやり方でもさほど問題はないと思いますが、
  しかし上記を見て、なんとなくパースが効いていない様に感じ、手前の方が大きくなっていないなど、
  何か違和感をあると言われる方のために、もっと分かり易い画像でもう一度同じ様にやってみます。

変形03
3.左画像の様に「方眼のセンターに丸」を描いた画像で同じ様にやってみると
  方眼の大きさが左右とも同じ大きさになり、円形の位置も右に寄って見え、つまりパースが効いていません。
  もう少し正確に表現できるように違う方法でやってみます。

変形04-1
4.まず、文字を配置したい画面の上下に揃う様にペンツールで線をひきます。
 「オブジェクト」メニューの「ブレンド」→「ブレンドオプション」→「間隔」で
 「ステップ数」を「2」と入力します。
  なぜ,2なのかは後で分かります。左右も同じ様につくります。
  当然ですが、ブレンドで等間隔ラインを引いたのでこのグリッドはパースは効いていません。

変形04-2
5.先ほどの.「方眼のセンターに丸」を描いた画像を選択し、「オブジェクト」メニューの
  「エンベロープ」→「メッシュで作成」→「行数に1」、「列数に1」と入力します。
  行数も列数も1ですから、メッシュのラインは表れません。

変形05
6.移動ツールで「方眼のセンターに丸」の画像をモニタ画面の左上に移動します。

変形06
7.ダイレクト選択ツールに変えて、右上のポイントをモニタ画面の右上に合わせます。

変形07
8.同じ様に左下も右下も合わせます。

変形08
9.上下のラインが波打っていますので、それぞれの方向線を直線位置に合わせます。

変形09
10.このままでは正確にパースはつきません。
  上下の方向線のポイントは「1」でつくった3等分の交点に重なっていると思います。
  つまり方向線のポイントは3等分されます。
  パースを効かせるにはポイントを交点より左へ移動することで、奥が狭く,手前が広くなります。
  上下の方向線のポイントは少し左に合わせ、左右の方向線のポイントは交点の少し上に合わせます。
  デッサン力のある人はこの意味が理解できると思いますが、この作業は大切です。
  この作業が正確な画像をつくるポイントです。

変形10
11.仕上げに「オブジェクト」メニューの「エンベロープ」→「拡張」を選び、
  ダイレクト選択ツールで外側の長方形や「ブレンド」でつくった3等分のラインを削除し、完成です。(左)
  右側は最初につくったパースの効いていないものです。

この方法も完璧に正確では無いのですが、正確さを要するには今のところこの方法しか見つかりません。
完璧に正確にするには、「遠近グリッド」を使えばできますが、グリッドを写真に合わせるのが面倒な作業になります。
早く「Illustrator」でも「Photoshop」の自由変形の様に常にコーナーに移動ポイントが来る様になれば、正確なパースの変形がもっと簡単にできます。
次のバージョンアップに期待したいです。
関連記事
スポンサーサイト
コメント
非公開コメント

トラックバック

http://ggdesign.blog48.fc2.com/tb.php/148-fc8c2eda

まとめteみた.【Illustratorの「最前面のオブジェクトで作成」-3】

以前に、Illustratorで斜めで奥行きのある画像に合わせて文字やロゴを配置する場合、「最前面のオブジェクトで作成」でやれば簡単だと書きましたが、パースが効いていない様に感じ、手前の方が大きくならないので何か違和感を感じましたので、もう一度書きます。文字やロ?...

2012-03-28 19:56 │ from まとめwoネタ速suru

まとめteみた.【Illustratorの「最前面のオブジェクトで作成」-3】

以前に、Illustratorで斜めで奥行きのある画像に合わせて文字やロゴを配置する場合、「最前面のオブジェクトで作成」でやれば簡単だと書きましたが、パースが効いていない様に感じ、手前の方が大きくならないので何か違和感を感じましたので、もう一度書きます。文字やロ?...

2012-03-28 19:56 │ from まとめwoネタ速suru