WEBデザイン

【illustrator】簡単トレース方法

こんにちは!ゆかちんです(^^)/
あっという間に寒くなってきましたね。コーヒーが美味しい季節です。
グランフロントの中にあるDOWNSTAIRS COFFEEはコーヒーもおいしいのですが、チャイがすごくおいしいです!
寒い日にはピッタリのスパイシーさと甘さ(*^^*)おすすめです!

実はPhotoshopよりillustratorが得意な私。最近はPhotoshopも好きになってきました。
そんなillustratorのいいところはやはりベクター画像なところ!拡大縮小してもボケない!最高!
アイコンとかロゴとか地図とか作成時はillustrator様様です。
でもトレースってなったら慣れてないと時間かかってしまいますよね。
今回は簡単にトレースする術をご紹介します!

1.りんごを用意

トレースしたい画像を用意します。今回はぐっさんが使用していたりんごを拝借(こっそり)

illustratorにりんごの画像を貼り付けます。
[ファイル] メニューから [配置] を選択してトレースを行う写真を配置。
[ファイル] メニューから [開く] を選択し、トレースを行う写真を開く。

どちらの方法でも貼り付け可能です。

普通だとペンツールを使用しトレースすると思います。
使用する用途によってはペンツールでトレースがいいと思うのですが細かい部分までトレースしたいというときに不向きです。

2.ライブトレースをしてみよう

CS4以降ライブトレースというものが導入されました。写真を自動トレースしてくれる機能です。

選択ツールで配置した写真を選択 します。
選択すると上の部分にコントロールパネルがでます。
画像トレース右の矢印をクリックし、トレースの種類を選択します。今回は16色変形にしました。
いろいろなものがあるので用途に合わせて選んでください。

16色変形になりました。
そして、コントロールパネルの「トレース結果の部分」を「トレース結果とアウトライン」にし「拡張」を押します

グループを解除するといらない部分を削除できたり微調整ができるようになります。

周りを消して、白を少し追加した結果がこちらです。

このような形でライブトレースすることができました!
すごく簡単なので簡単な素材を作る時などどうでしょうか(^^)
ちなみにトップのふくろう画像にこっそりりんごがいるので探してみてください!

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. WEBデザイン

    Photoshopで付箋風のデザインを作る方法!!

    おはようございます、ふきちゃんです。私は未経験での入社でして、前職ではイラストレーターを使っていたのですが、Photoshopに未だに慣れず、…

  2. WEBデザイン

    問い合わせフォームを追加しよう!Contact Form 7の使い方!

    おはようございます、最近はインスタグラムのおすすめ動画でひたすらポメラニアンの子犬の動画を見てひたすら癒されているふきちゃんです。韓国だけかはわか…

  3. WEBデザイン

    Photoshopで空模様の画像を作る方法

    はじめまして、テイクフォーの谷口です。今回初めて記事を書きます。さてその初回は、Photoshopで空模様の画像を作る方法をご紹介しま…

  4. WEBデザイン

    「いらすとや」の素材を使ってマンガを作成しよう!

    どうも、イラスト大好きのぐっさんです。約1週間ぶりの記事更新となりますが、引き続き宜しくお願いします。このブログを読んでいるあなたは「いら…

  5. WEBデザイン

    よく見る方眼紙のようなパターンの作り方

    おはようございます、ふきちゃんですふきちゃんです、と書いている時高確率で安田大サーカスのクロちゃんで再生されております、小春日和のうららかな季節で…

  6. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    どうも僕です、テイクフォー谷口です。先週末は佳境を迎えたプロ野球日本シリーズやサッカーJリーグとスポーツネタで盛り上がってました^^(大阪…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. レポート

    HARIO V60がきた!
  2. レポート

    Web担当者に勧めたいマーケティング・セールスコピー書籍BEST5
  3. HTMLコーディング

    【WordPressでGO!】管理画面の左メニューをカスタマイズしてみよう
  4. HTMLコーディング

    cssでグラデーションを描いてみよう
  5. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法
PAGE TOP