• WEB

Illustrator 手描きの絵を簡単デジタル化!【画像トレース(ライブトレース)】を使ってみた

  • ビビ
    ビビ デザインちーむ
  • このエントリーをはてなブックマークに追加
Illustrator 手描きの絵を簡単デジタル化!【画像トレース(ライブトレース)】を使ってみた

こんにちわ!ビビです。

皆さんは絵を描くのは好きですか?
例えば、ノートやメモ用紙の端っこに落書きして遊んでたら、意外にも良い作品が出来上がっちゃって、これ捨てるのもったいないなー・・・とか、パソコンで描いてみたいけど「ペンタブは難しい」「マウスだと自分の思い描く線が出ない」など諦めてしまったことはないでしょうか?

そんなときに覚えておくと得するIllustratorの便利機能を紹介します!

画像トレース機能とは?

画像トレースとは、その名の通り「画像をなぞって写す」ことで、Adobe IllustratorのCS2から搭載されている機能です。

バージョンごとの機能名称の変化
Illustrator CS2~CS5 :【ライブトレース
Illustrator CS6~CC :【画像トレース

この機能を使えば、手書き画像、写真などのビットマップ画像をベクトル画像に自動的にトレースして変換してくれます。子供の描いた絵や、メモ用紙に残したアイデアスケッチなどを、ベクトル画像に瞬時に変換されるので、解像度の高い印刷にも対応出来るようになり、画像利用の幅が格段に上がります。

ベクター変換イメージ

実際に体験してみよう!

さて、この画像トレース機能を使って手描き画像をデジタル化してみましょう。

画像の準備

まずはトレースする画像を用意します。
ってことで探していたら、デスクの隅っこに謎のメモ用紙を発見。何か変な絵が描いてあるので、丁度いいし今回はこれを使いましょう。
・・・ってこのメモ置いていった人誰ですか?(笑)勝手に使っちゃいますからね!

素材発見

画像の取り込みは、コピー複合機でスキャンするとか面倒だったので、今回は携帯電話のカメラで写真を撮ってPCに送りました。出来る限り手軽で簡単な方法で進めていきますね。

ゴミの除去

さて、次は画像の掃除です。
適当に撮った写真なので、埃や不要なものが写り込んでます。ここでしっかり除去しておかないと、後半の作業で面倒なことになります。
※ゴミだろうと何だろうと全てトレースしてくれちゃうので、不要なものまでトレースしてしまうとパスとアンカー数が異常に膨らんでしまい、最悪ファイル容量肥大で開くことすら出来なくなることもあります。

ゴミ除去

画像トレース実行

ビビの制作環境ではIllustrator CS5を使用しているので、今回は「ライブトレース」という名称の機能になります。操作は至ってシンプル。ゴミを除去した画像をIllustratorに「配置」で持ってきて、ライブトレースボタン押すだけ。

配置~トレース
※ツールバー「オブジェクト」⇒「ライブトレース」⇒「作成」でも実行可能

カンタンでしょ?次にパスで編集出来るようにパス化します。

パス化

オプション設定でトレースの強弱が調整できるので、ご自分の納得のいくトレースを行なってみてください。

ライブトレース オプション

オプション変更によるトレースの違い

色を付けてみよう

ここまで来たら色も塗っちゃいましょう!
ってことで、ライブトレースと共にくっついてる色塗り機能「ライブペイント」を紹介します。ライブペイントは、パスで閉じられている領域に色を塗ってくれる機能です。「隙間オプション」を併用することで、閉じ切れていないパス部分も自動で検出して、隙間の選択範囲を調整してくれます。

隙間調整

ツールバー「オブジェクト」⇒「ライブペイント」⇒「隙間オプション」を実行

隙間オプション

隙間オプションを設定した状態でペイントしていきます。

ライブペイントの塗りの様子

見事に隙間を自動判定して塗り分けてくれてますね。
そんなこんなで色塗り完了です。

色塗り完了

まとめ

手描きの絵がデジタル化されるのは、どうでしたでしょうか。

個人的に触ってみた感想としては、

  • 画像トレース機能は使える。面白い。
  • ライブペイント機能はおまけ程度。

といった感じでした。

画像トレースは、手描きの風合いを残しつつ簡単にパスデータ化してくれるので、絵の個性を消さずに済み、さらに緻密なトレース作業の時短にも繋がるとても便利な機能だと思います。ベクトル画像なら後々いくらでも調整が効く所も魅力ですね。

また、ライブペイント機能は、「これを使わないとダメだ!」って思えるほどの機能には感じませんでした。とはいえ、自動で隙間を判定をして塗り領域を設定してくれる機能は流石だなと感動しました。

絵を描く方は、ぜひこれらの機能を活用してみてはいかがでしょうか。

まとめ

このエントリーをはてなブックマークに追加

ビビが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ