トピックス

今回はデザイン制作する過程で問題になる、ロゴやイラストの元データが無い場合によく利用する解決策のひとつをご紹介します。Adobe Illustratorの画像トレース機能を利用してjpgやpngの画像データからパスデータを書き出します。

書き出したい画像データをIllustratorで開く

今回は本サイトのロゴを利用してご紹介します。画像データが粗い、輪郭がぼやけている、サイズが小さいとうまく書き出せ無い場合があります。

画像トレース機能を使ってパスデータを書き出す

1. 選択ツールで画像を選びます
   
   
2. ウインドウから「画像トレース」をクリック
   画像データを選択しているとパネルのパラメータを設定できるようになります。右下のトレースをクリックすると画像トレースが始まります。
   

余計な部分を取り除いて成型する

1. トレース結果を確認してうまくいっていなかったら画像トレースのパネルのパラメータを変更してください。

2. 拡張をクリックしてパスを分離できるようにします。
   

3. ダイレクト選択ツールを利用して余計な個所を取り除く
   余分のアンカーポイントが付いている場合はオブジェクト⇒パス⇒単純化でアンカーポイントを減らしてください
   

完成

パスデータにすれば、jpgやpngといった画像のデータの時と違い、色を変えたり、白抜きにしたり、好きな大きさに拡大縮小できます。

応用編：イラストの画像をパスデータにする

元データのない画像のイラストも画像トレースでパスデータにできます。複雑なイラストの場合は処理に時間がかかるので注意してください。また素材のイラスト画像を加工する場合はかならず素材元の利用規約を確認してから加工を行ってください。

イラスト画像をパスデータにする場合

1. 
   今回はこちらのイラスト画像をパスデータにします。画像を開いてウインドウから「画像トレース」パネルを開きます。
2. 
   カラーモードの設定をします。カラーモードは「カラー」「グレースケール」「白黒」の三つがあります。カラーなら色の多さを、グレースケールならグレーの多さを、白黒ならしいきの値をそれぞれ下のバーから増減させれます。
3. 
   書き出されるパスの設定をします。「パス」は高いほど書き出されるアンカーポイントが増えます。「コーナー」は高いほどアンカーのコーナーポイントが増えます。「ノイズ」は高いほど書き出すピクセル領域を無視します。高解像度の画像の場合は高い値を、低解像度の場合は低い値を設定します。
4. プレビューで確認してからトレースをクリックしてください。

完成

イラストをパスデータにしました。パスデータにすればイラストの一部を削除したり色を変更できたりします。またロゴと同じですが好きなサイズに拡大縮小できます。

いかがでしょうか？　今回はロゴやイラストをパスデータにして加工できるようにしました。お客様からデータをいただけるのが一番ですが、もしそれが困難な場合にはこの方法で解決できるかお試しください。