マーカーネット株式会社

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制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …

レスポンシブデザインに対するよくある4つの誤解

レスポンシブデザインに対するよくある4つの誤解

単一のファイルで様々な機器の画面サイズにフィットする便利な手法「レスポンシブデザイン」。 最近はスマホからのPVも爆発的に増えてきたので慌ててスマホサイトを導入する企業が増え、更新の勝手から、レスポン …

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る機会がここ最近かなり増えて来ました。 かくいうこのブログもレスポンシブ対応しています。 レスポンシブサイトを作る時には デザイン面等でも気を付ける事は幾つかありますが、 今回は …

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

【これぞPhotoshopマジック】イラスト風・水彩風・レトロ風に写真を加工するワザ

Webデザインを制作する中で、写真素材を使用することが多々あります。 これらの素材にひと手間加えることで、写真の魅力がグッと加わったり、 サイトの印象を変えることができたり、ポイントにもなったりします …

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

約3週間に1回の登場になりますが、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて、続いて紹介していきたいと思います。 今回は最終回となりますので、最後まで読んでいただけれ …