マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作

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

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

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

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

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

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

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

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEBデザイン, WEB制作

関連記事

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

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

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

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンク切れを自動的にチェックしてくれるワードプレスのプラグイン

リンクチェックしていますか? マニュアルでチェックするとたいへんですよね。 WordPressには自動で定期的にリンク切れをチェックしてくれる 便利なプラグインがございます。 その名もズバリ、「Bro …

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

簡単便利!30秒でできる!【photoshop】で線画を抽出する方法!

線画イラストの線画だけ抜き出したい!背景を透過したい!!・・・そんな時に役立つphotoshopの小技をご紹介します。   (1)まず、画像をphotoshopで開きます。 (2)メニューの …

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2- どうも、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて紹介していきたいと思います。 C …

フォントをまとめて比較!ウェブサービス「wordmark-it」

フォントをまとめて比較!ウェブサービス「wordmark-it」

こんにちは。マーカーネットスタッフのSです。 今回はデザイン制作に便利なサービスをご紹介したいと思います。 デザインで使うフォント選びは作品のクオリティを左右するといっても過言ではない大事な要素です。 …