Web制作・ホームページ制作 埼玉で依頼するなら伝助(DENSUKE)へ。越谷を中心に草加、八潮、春日部など埼玉県近郊に対応!

DENSUKE BLOG DENSUKE BLOG

NEW

デザイナー必見!Illustratorで画像を簡単にパス化する方法

WEBデザイナーの「困った」を解決したい!

こんにちは、伝助デザイナーのエイミーです。

Webデザイナーの皆さんは、元デザインの画像のAI・PSDが無くて困った…という事や、
「このアイコン(イラスト)をもっと大きく使いたいけど、一枚絵だからトレースするのがちょっと手間・・・」
「会社ロゴデータがないから名刺からトレースして作って欲しいと言われた」といったようなことに遭遇することがあるのではないかと思います。
今回は、そんな時にお役立ちの、画像をIllustratorでパス化しちゃう!とっておき(?)の技をお教えしたいと思います。

と言っても、難しいことは全くありません。

早速パス化!

まず、このアザラシのアイコン(FLAT ICON DESIGNさんよりお借りしました)のJPG画像をパス化してみたいと思います。
blog_01

 

 

Illustratorで開き、画像を選択すると、メニューバーに「画像トレース▼」というボタンが現れます。

▼の部分を押し、さらにメニューが開きますので、その中の「写真(高精度)」を選択します。
(このイラストは背景とのコントラストが低いので、ちょっと手を加えます。)

blog_02

 

 

すると今度は「拡張」ボタンが現れますので、そちらを押して完了です。

blog_03

 

 

 

見事に綺麗にパス化されました。
blog_04

 

パス化したので、もちろん色や形を自由自在に変えられます。

blog_05

す、素晴らしい!!

 

 

もっと複雑な画像の場合は…?

先の例は色も形も単純なので簡単にパス化できましたが、もうちょっと色・形が複雑な画像でしたらどうでしょう。

今度は皆さんおなじみ、こちら「いらすとやさん」からイラスト(JPG)をお借りしてきました。

blog_06

 

先ほどと同じ手順でパス化します。
微妙な色合いのところもきちんとパス化されています。すごい!

blog_07

 

が、アップして見ると、輪郭などがちょっとガタついていいるので手直しが必要そうです。

blog_08

 

とはいえ、ここまでできれば十分時間短縮にも役に立つのではないでしょうか。
いざという時の為に覚えておいて損はない・・・はず!
ぜひご活用ください\(^o^)/

 

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