マーカーネット株式会社

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

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

関連記事

データベース(MySQL)の日付操作について

データベース(MySQL)で普段よく使いますが、 なかなか覚えられない、日付の操作のSQLについて書きます。 以下のようなニュースのテーブルが存在します。 CREATE TABLE IF NOT EX …

WEBサイトの配色に迷った時の必見サイト!

こんばんは! 本日社内で勉強の一環で某テストを受けた、風邪気味のKです! 夏休みも目前!早く元気になりたい! さてさて、このところお仕事をさせていただいている際、 セオリーにハマった色使いを真似ている …

【Photoshop マジック】ビンテージ風の素材がさくさくカンタンに作れちゃう!

Webデザインのトレンド手法のひとつとして、「レトロ感」や「ヴィンテージ感」のあるwebデザインがよく見かけます。 素材がなくても、Phoshopを使えば普通の写真もステキな素材になります! ここで写 …

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

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

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

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

Dropboxを使ってスタティックサイトを簡単に作れるサービス「Brace」

今ではスタティックなWebサイトからでもHTML5と最新のJavaScript環境(各種の既製ライブラリ、フレームワークなど)があれば、相当複雑高度なサービスを提供できますよね。 そんなスタティックな …