マーカーネット株式会社

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

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

関連記事

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

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

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

デザインの幅が広がる!クオリティの高いイラストサイトまとめ

デザインの幅が広がる!クオリティの高いイラストサイトまとめ http://www.markernet.co.jp/blog/2015/08/07/post-5940/ Facebook

イラスト素材サイトのご紹介

イラスト素材サイトのご紹介

こんばんは、新人Aです。 今日は、イラスト素材のサイトさんをご紹介しようかと思います!       【いらすとや】 http://www.irasutoya.com/ フ …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

ホームページに掲載するメールアドレスはエンティティ化で迷惑メール排除

なんかホームページ公開したら急に迷惑メール増えたなぁ。 という方、ホームページにそのままメールアドレスを掲載していませんか? ホームページは全世界に公開されているもので、当然テキスト情報も全て公開され …