デザイン 制作

2022.07.20

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

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

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

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

動画はこちら

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

画像トレースってなに?

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

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

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

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

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

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

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

画像トレースパネル

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

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

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

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

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

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

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

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

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

\これで完成です!/

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

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

・手書き風文字

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

・写真をイラスト風

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

この記事をシェアする

関連記事

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2022.11.15

    Wordpressで多言語対応をする方法

    コーディング

    制作

  • 2022.10.24

    超簡単!?たった15分でカウントダウンを作成する方法

    コーディング

    制作

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2021.09.29

    【簡単】プロのようなデザインが作れるツールCanva(キャンバ)のおすすめポイント

    デザイン

  • 2022.06.30

    【作業のお供に!】おすすめ深夜ラジオ3選

    社員ブログ

×