webデザイン初心者|sometimes study

webデザイン初心者の私が一人前になるまでの記録。webデザイン(Illustrator・Photoshop)・webサイト制作(HTML・CSS・JavaScript・jQuery・PHP・WordPress)を中心にお勉強中。

覚えておきたい!Illustratorで、画像からベクターデータのロゴをつくる方法

新しくサイトを作成するとき、企業やお店側に"ベクターデータのロゴがない!"なんてことはよくあります。
 
過去にはjpg形式で送られてきた画像を、泣く泣く手作業でベクターデータにおこしたこともあります(;0;)
 
そんな苦労をする前に知っておいてほしい…!今回はラスタデータからベクターデータにおこす方法をご紹介します。

ベクターデータ」と「ラスタデータ」について

まず、画像形式について軽くおさらいです!
 
----

ベクターデータ

f:id:serinaishii:20150903230933p:plain

拡大・縮小しても画像が荒くならない、点と線で繋がれた画像のこと。この結び線のことをベクトルと言います。

 ----

ラスタデータ(ビットマップデータ)

f:id:serinaishii:20150903230945p:plain

拡大すると点の集合でできている画像のこと。みなさんがよく使うgif・jpg・png形式の画像はよくよく見ると細かいドット絵の集まりになってますよね!

---- 

 

詳しく知りたい人は下のサイトさんも参考にしてください。
 
■「ビットマップデータ」と「ベクターデータ」の違い - ウェブ学のすすめ

webgaku.hateblo.jp


Illustratorの『画像トレース』機能

では、早速ラスタデータのロゴをトレースしてみましょう!
 
---- 

1.Illustratorに画像を配置する

f:id:serinaishii:20150903231003p:plain

まず、ベクターデータにしたい画像(ラスタデータ)を埋め込みで配置します。
 
このとき、切り抜きに不要な部分は予め取り除いた画像を用意してください。クリッピングマスクなどを使って切り抜くと便利です。
 
クリッピングマスクがわからない方はこちら↓のサイトさんを参考にしてください。
 
イラストレーターのクリッピングマスクの使い方

designers-tips.com

---- 

2.画像をトレースする

f:id:serinaishii:20150903231009p:plain

  1. 配置した画像をダイレクト選択ツールで選択
  2. ツールバーから『オブジェクト』→『画像トレース』→『作成』
そうすると、ロゴがなんとなくオブジェクトっぽくなります。
 
※『画像トレース』はCC・CS6以降の機能だそうです。
  ~CS5だと『ライブペイント』が同様の機能です。(2015.09.15追記)
 
----

3.トレース範囲を調整する

f:id:serinaishii:20150903231019p:plain

このままでも良いのですが、細かい部分が上手くトレースされていないと思いますので微調整して仕上げにかかります。
 
『画像トレースパネル』を出して細かい設定をしていきます。上の画像でいうと、左上に赤丸で囲った部分に四角いアイコンがありますので、これをクリックしてください。
 

画像トレースパネル

…などを調整して、綺麗にパスを抜ける値を見つけます。

 
画像トレースパネルの詳細は↓のサイトさんを参考にしてください。 
 
Illustrator ヘルプ | 画像トレースの使用

helpx.adobe.com

 
----

4.パスを確定する

f:id:serinaishii:20150903231027p:plain

いい感じの形になったら、
 
ツールバーから『オブジェクト』→『画像トレース』→『拡張』でパスを確定します。
 

f:id:serinaishii:20150903231033p:plain

これでラスタ画像からつくる、ベクター画像の完成です(*^^*)
 
----

5.完成前と完成後

f:id:serinaishii:20150903231039p:plain

上がトレース前のgif画像を配置したもの、
下が画像トレース後のものです。
 
ある程度もとがギザギザな画像でもどうにかなりそうですね!
 
あまり細かい装飾や複雑な形には向いていませんが、簡単な図形ならこの子にお任せです!
 
----
 
 この機能を知ったときはすごく感動しました…!!まさに文明の利器ですね!
 
また、写真などのグラデーションのかかった画像をトレースすると、いつもと違った感じが演出できて面白いかもしれません。 
 

f:id:serinaishii:20150903231050p:plain

 

Photoshopでいうポスタリゼーションや、二段階色調のような感じになりますね!

 

とても便利な機能なので、ぜひ頭の片隅に置いておいてください。