creatersnest

ビットマップデータをベクトルデータに変換してみよう


jpegとかPNGでロゴが送られてきたけど、大判で使いたいのに解像度が足りない・・・
手書きのイラストを写真で取り込んでイラストレーターで使いたい・・・
自然物をちょっとイラストっぽくしたいからベクトルデータに変換したい・・・

意外とベクトルデータに変換したい状況も多々あるかと思います。
そんなときに役立つTipsを紹介します。

画像トレースとライブペイントを使う

ビットマップデータからベクトルデータにイラストレーターの画像トレース機能で変換する方法です。今回はPhotoshopで作成した星形のPNG画像を使用します。

星元画像

 

ビットマップデータを開いた後、画像ウィンドウに画像トレースボタンがあります。
メニューバーからだと「オブジェクト」>「画像トレース」>「作成」。

画像トレース
できれば画像ウィンドウの下三角をクリックして予めトレース方法をプリセットから選択しましょう。
自然物などの場合はとても時間がかかる場合があります。今回は白黒の星形を使用しましたので「白黒のロゴ」を選択しました。プリセットの右側のアイコンから微調整も可能です。

画像トレースプリセット

画像トレース詳細

今回はこのまま拡張ボタンを押してベクトルデータを作成します。

星画像トレース

 

画像トレース機能は解像度によって精度が大きく変わってきます。単純な多角形でも元の画像の解像度が低い場合は角や直線の部分の処理が曖昧になってしまうケースがあります。
根本的な解決策ではないのですが、予めPhotoshopなどのソフトで解像度を上げると、多少精度がよくなります。Photoshopだと「イメージ」>「画像解像度」から変更可能です。

星解像度

パスを少なくする

このまま使ってもいいのですが、線が多すぎて困る場合は「パスの単純化」を使用して、線を少なくします。
「オブジェクト」>「パス」>「単純化」でパスの単純化ウィンドウを開き、プレビューを見ながら不都合のないあたりで適用します。

パスの単純化

こまかな微調整が必要な場合は、アンカーやパスの編集・削除を行いましょう。

アプリ連携をする

手書きのイラストをベクトルデータにしたい場合は通常手書き>スキャン>フォトショップで必要部分のみ抜き出し&ノイズ除去>イラストレータでライブトレース>パスやアンカーの編集という方法がありますが、今回はその工程を驚くほど簡略化するスマートフォンアプリのAdobe Shapeを紹介します。

Adobe Shapeを使うと、手書きのイラストなどをスマートフォンで写真をとり、そのまま直接ベクトルデータで取り込むことが

IMG_4901

可能です。スキャンからイラストレータまで一つのアプリで完結します。
今回はこの手描きの星マークをベクトルデータにします。
まずAdobe Shapeからベクトルデータにしたいイラストを撮影します。

IMG_4904

スライダーでトレース感度を変更することが可能です。
IMG_4905
撮影後、余計な部分を削除していきます。画面でスライドした場所が白くなるとそこは除外されます。

IMG_4906

 

プレビューで問題がなければ、名前をつけて保存します。


IMG_4907

保存したあとはAdobe Cloudからデータを開きます。
ライブラリウィンドウを開くと、保存したライブラリに先ほどのデータが保存されてます。

スクリーンショット 2015-07-09 13.01.55

SVG形式で保存されているので、パスがそのまま見えます。
中身は複合パスになっているので、必要な部分を抜き出していきます。

スクリーンショット 2015-07-09 13.02.05

 

今回は一番外側の星型のみ取り出して、パスの単純化で直線のみにし、アンカーの数を減らしてみました。

スクリーンショット 2015-07-09 13.10.28

 

まとめ

ベクトルデータに変換することで拡大しても崩れないデータが作成できます。Adobe ShapeとAdobe CCの強力な連携機能でより早く高品質にイラストをベクトルデータ化出来ますので、興味のある方は是非使用してみてください。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Illustrator初心者向け】ベクターとは何か?