WEBデザイン WEB制作

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

投稿日:2014年7月11日 更新日:

eyecatch WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってしまう…と悩む方に、 Illustratorで簡単に画像をベクターに変換する方法をご紹介します。

  • STEP1. まずベクターに変換したい画像をIllustratorで配置します。

そしてメニューの「オブジェクト」から「ライブトレース」→「トレースオプション」を選択します。
02
トレースオプション画面の「調整」から、「白黒」、「カラー」、「グレースケール」3種カラーモードが選べます。
03 アイコンのカラーを再現するために、今回は「カラー」を選びます。 「最大カラー数」の数値を上げると奥行き感が出ます。 数値の調整が終わったら「トレース」のボタンをクリックします。 この時点画像はすでにトレースされていますが、まだ画像扱いになっています。

  • STEP2. メニューの「オブジェクト」から「ライブトレース」→「拡張」を選択します。

04 これで画像がIllustrator上で編集可能のベクターデータになりました。 色数を少なめに設定したため、フラットデザイン風のアイコンに変身! また、カラーモードを白黒やグレースケールに設定すると写真がイラスト風のベクターデータになります。 sample これを覚えておけば、作業効率の向上に繋がりますし、デザインのアクセントにもなるかもしれないですね。 是非いろいろと活用してみてください!

-WEBデザイン, WEB制作

関連記事

どこでも!いつでも!自由に使えるアイコン集

どこでも!いつでも!自由に使えるアイコン集

皆さん! お久しぶりです!こんばんは!! 心はいつも新人であるデザイナーKです。 この一ヶ月の間、私には色んなことがありました。 新しく買ったシャツが家のドアノブに引っかかって破れたり、ひどい風邪をひ …

全部無料!?写真をアートに加工できる【オススメ無料アプリ3選!】

全部無料!?写真をアートに加工できる【オススメ無料アプリ3選!】

こんにちは!デザイナーAです。 WEB制作時にサイトに掲載する画像を写真ではなく、お洒落なイラストにしたい…! でも制作費用は極力抑えたい~!!そんな方にオススメな写真をイラスト風に加工できるアプリを …

さまざまなレイアウトの工夫その①

さまざまなレイアウトの工夫その①

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。で …

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材

こんにちは新人デザイナーTです。 今回は無料で公開されているphotoshop用の打ち上げ花火の演出が簡単に出来るブラシ素材をいくつかご紹介させていただきます。 収録されているファイルの中には様々な打 …