• aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. Illustratorで複数オブジェクトのパスファインダー操作まとめ

Illustratorで複数オブジェクトのパスファインダー操作まとめ

  • 2019.09.13
  • デザイン
  • Illustrator
AdobeのベクタードローツールであるIllustratorでは、ベクター図形に対していろんな操作ができる機能を備えています。その中の一つである「パスファインダー」の機能を使うことで、複数のオブジェクトを組み合わせた表現ができるようになります。今回はそのパスファインダーでの操作についてまとめていきたいと思います。   パスファインダーですが、「表示」→「パスファインダー」をクリックすることで、パスファインダーパネルが表示されますので、そこから操作するとわかりやすいです。パネル内にはそれぞれの操作を表したアイコンが表示されており、選択してクリックするだけで操作ができるようになります。とはいえ、種類もあるので実際にどんな効果になるかイマイチよくわからないのもありますね、、 Illustratorで複数オブジェクトのパスファインダー操作まとめ   パスファインダーの操作には大きく2種類に分けられており、「形状モード」と「パスファインダー」に分かれます。まずは形状モードの操作から見ていきます。ちなみに今回はこのようなオブジェクトを用意しました。星型の図形が表面レイヤーとなり、円の図形のあるレイヤーが背面に配置しています。 Illustratorで複数オブジェクトのパスファインダー操作まとめ    
形状モードの種類
【合体】 全ての対象オブジェクトをまとめて一つのオブジェクトとして結合されます。塗りは最前面のオブジェクトのものが適用されます。論理演算でいうところの「OR」に該当します。 Illustratorで複数オブジェクトのパスファインダー操作まとめ   【前面オブジェクトで型抜き】 最背面のオブジェクトを前面のオブジェクトで切り取ります。最背面のオブジェクトは前面のオブジェクトと重なっていない部分だけが残ります。 Illustratorで複数オブジェクトのパスファインダー操作まとめ   【交差】 2つのオブジェクトにおいて、前面のオブジェクトと背面のオブジェクトの重なる部分だけが残ります。塗りは前面のオブジェクトのものが適用されます。3つ以上の要素の場合は適用できません。論理演算でいうところの「AND」に該当します。 Illustratorで複数オブジェクトのパスファインダー操作まとめ   【シェイプが重なる領域を中マド】 複数のオブジェクトにおいて、隣り合う前面オブジェクトと重なる部分だけが切り抜かれ、それ以外のところは残ります。対象となるのは直前にある前面のオブジェクトのみになります。論理演算でいうところの「XOR」に該当します。 Illustratorで複数オブジェクトのパスファインダー操作まとめ   この「シェイプが重なる領域を中マド」を使うと、テキストなどもこのようにオブジェクトに入り込んだ部分だけ色を変えることができます。 Illustratorで複数オブジェクトのパスファインダー操作まとめ  
パスファインダー効果の種類
【追加】 形状モードでいう「合体」と同じように複数の1つのオブジェクトにまとめられますが、重なる部分と重ならない部分がそれぞれ独立したオブジェクトとして選択できます。レイヤー構造を見てみるとこのように複数のオブジェクトに分かれているのが確認できます。 Illustratorで複数オブジェクトのパスファインダー操作まとめ Illustratorで複数オブジェクトのパスファインダー操作まとめ   【刈り込み】 ここではわかりやすいように3つのオブジェクトにしています。最前面オブジェクトに対して重なる部分は全て削除され、残った部分が選択できるようになります。レイヤー構造では、3つのオブジェクトが確認できますが最前面オブジェクト以外は切り取られているのが確認できます。塗りはオブジェクトが持つものをそれぞれ維持します。 Illustratorで複数オブジェクトのパスファインダー操作まとめ Illustratorで複数オブジェクトのパスファインダー操作まとめ   【合流】 ここではわかりやすいように3つのオブジェクトにしています。先ほどの「刈り込み」と似ていますが、最前面以外のオブジェクトにおいて、同じ塗りで隣り合うレイヤーの場合には結合されます。レイヤー構造を見てみると、最前面以外のオブジェクトで塗りが同じものが1つのオブジェクトに結合されており、1つ減っているのが確認できます。 Illustratorで複数オブジェクトのパスファインダー操作まとめ Illustratorで複数オブジェクトのパスファインダー操作まとめ   【切り抜き】 最前面のオブジェクトに対して、重なる部分のみが残ります。塗りはオブジェクトが持つものを維持します。複数のオブジェクトの場合もそれぞれ独立して残ります。レイヤー構造では、背面オブジェクトと重ならない最前面のオブジェクト部分と、最前面に重なる背面オブジェクトの部分が残るのが確認できます。 Illustratorで複数オブジェクトのパスファインダー操作まとめ Illustratorで複数オブジェクトのパスファインダー操作まとめ   【アウトライン】 全てのオブジェクトのアウトラインが生成され、重なり合う部分はそれぞれ独立して選択できるようになります。重なり合う部分は前面にあるオブジェクトの塗りが適用されます。 Illustratorで複数オブジェクトのパスファインダー操作まとめ Illustratorで複数オブジェクトのパスファインダー操作まとめ   【背面オブジェクトで型抜き】 形状モードにある「前面オブジェクトで型抜き」とは逆で、最前面のオブジェクトを背面のオブジェクトで切り取ります。背面のオブジェクトに重なる最前面のオブジェクトの部分だけが残ります。レイヤー構造では切り取られて残った部分だけの要素になっているのが確認できます。 Illustratorで複数オブジェクトのパスファインダー操作まとめ Illustratorで複数オブジェクトのパスファインダー操作まとめ   またこれ以外にも「効果」→「パスファインダー」から選択できる効果として「濃い混色」「薄い混色」「トラップ」などもあります。Illustratorではこのようにベクター要素を加工するための様々なパスファインダー効果が用意されており、複雑な図形を表現することができます。  
  今回はIllustratorでのパスファインダー操作についてまとめてみました。よく使うものもあればあまり使わず用途がわからないものもありますが覚えておくといろんな場面で応用が利くのでぜひ覚えておきたいですね。
XでシェアLINEで送るはてブに追加

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

  • Showcase
  • Startify UI
  • Functional Gradation Generator
  • Coloooors

keyword search

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)

recent articles

  • Figmaで柔らかな印象のメッシュグラデーションを作成する
    read more

    Figmaで柔らかな印象のメッシュグラデーションを作成する

    2022.12.09/Figma
  • Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
    read more

    Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する

    2022.09.23/Photoshop
  • Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
    read more

    Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する

    2022.06.10/Photoshop
  • デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
    read more

    デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)

    2022.06.03/デザイン
  • 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
    read more

    【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点

    2022.04.22/デザイン
  • 安さやチープな印象を強調させるデザインを考えてみる
    read more

    安さやチープな印象を強調させるデザインを考えてみる

    2022.04.01/デザイン
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト支援
  • クリエイティブ制作
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact