デザイン 制作

2022.07.20

【第2回】Illustratorの「画像トレース」って何ができるの?加工方法もご紹介!<初心者向け>

こんにちは!H.Abeです。

この記事は、スピカデザインでデザイナーをしている私が、デザインの小技を3回に分けてご紹介しています。

今回は第2回、Illustratorの「画像トレース」についてご紹介します!

動画はこちら

画像トレースの方法を動画でも解説しています!ぜひご覧ください!

画像トレースってなに?

「画像トレース」とは、Adobe Illustratorに搭載されている機能で、写真や手書きのイラスト(ラスター画像)をパスで構成された画像(ベクター画像)に変換することができる機能です。

画像トレース前(ラスター画像)
画像トレース後(ベクター画像)

<手順1>画像を配置する

メニューバーの「ファイル」→「配置」から、配置ダイアログボックスでベクター画像に変換したい画像を選択し、アートボード上に画像を配置します。

【ショートカットキー】Win「Shift + Ctrl + P」/ Mac「Shift + command + P」

<手順2>画像トレースをする

画像を選択した状態で、メニューバーの「ウィンドウ」→「画像トレース」を選択すると、画像トレースパネルが開きます。

画像トレースパネル

作業する際はプレビューにチェックを入れた状態で、トレース結果を確認しながら微調整を行います。

「画像トレース」パネルでは、画像によって「プリセット」を変更をしたり、「詳細」の三角マークをクリックして「パス」「コーナー」「ノイズ」などの微調整を行うことができます。

結果が良ければパネル右下の「トレース」ボタンをクリックします。

<手順3>トレースした画像をパス化する

コントロールパネルの「拡張」をクリックして画像をパス化します。

【注意!】この操作を行うと画像トレースオプションでトレース内容の編集ができなくなります。

<手順4>パスの単純化をする

トレース結果をパス化したままだと、アンカーポイントの数が多くファイルサイズも大きくなります。

メニューバーの「オブジェクト」→「パス」→「単純化」でパスの単純化をすることができます。

\これで完成です!/

パスデータなので任意のグラデーションをかけることもできます◎

<おまけ>慣れるとこんなこともできます

・手書き風文字

高校生〜大学生向けの商品やサービスでよく見かけますね!

・写真をイラスト風

是非、試してみてください!

この記事をシェアする

関連記事

  • 2024.02.02

    Webデザインにおけるアニメーションについて考えてみた〜目的編〜

    デザイン

    その他

  • 2023.12.29

    CSSのホバーを工夫するようになった話

    制作

    コーディング

  • 2023.12.29

    CSSで文節が切れるようになった話

    制作

    コーディング

おすすめ記事

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

×