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^)/  

 

Adobe Illustrator|12か月版|Windows/Mac/iPad対応|オンラインコード版

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