【Photoshop】パスファインダーの使い方forフォトショ初心者

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）のレイヤースタイルに収録されているベベルとエンボスの追加機能に「輪郭」と「テクスチャ」が存在します。

単にベベルとエンボスを追加したオブジェクトでも構わないのですが、輪郭とテクスチャはよりバリエーション豊かなボタン等のUIデザインを行う上で非常に便利な機能です。

ゲームUIやWebデザイン等のUIデザインを効率的に行える便利な機能なので是非押さえておきましょう！

この記事の目次

Photoshopのパスファインダーの使い方

Photoshopのパスファインダーの使い方を詳しく解説します。
フォトショ初心者の方にも再現できますよ！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,078円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

パスファインダーの基本操作

STEP.1

シェイプツールの設定を確認

[ U ] を押してシェイプツールに変更します。
長方形ツール、楕円形ツール、多角形ツール、三角形ツール、ラインツール、カスタムシェイプツールなどが存在します。

※詳しくはコチラの記事で解説しています。

画面上部のオプションを確認しましょう。
ツールモード：シェイプ
パスの操作：新規レイヤー

STEP.2

図形を作成

シェイプで図形を作成します。
サンプルは [ 長方形ツール ] で一つ矩形を作成しました。

2つ目の図形を作成します。
サンプルは [ 楕円形ツール ] で正円を作成。
※ [ Shift ] を押しながらドラッグするとオブジェクトの縦横比を保ったまま作成できます。

2つのオブジェクトが重なるように配置しましょう。

STEP.3

シェイプを結合

レイヤーパネルを開きます。
※非表示の場合は [ F7 ]

2つのシェイプレイヤーを選択し、アクティブにします。
右クリックメニューから [ シェイプを結合 ] をクリック。

すると一つのシェイプレイヤーに結合されます。

STEP.4

プロパティパネルを開く

結合されたシェイプレイヤーをアクティブにし、プロパティを開きます。
※非表示の場合は [ ウィンドウ ] → [ プロパティ ]

パネル下部に [ パスファインダー ] があります。
例えば左から2つ目の [ 前面シェイプを削除 ] を適用してみましょう。

すると手前のシェイプで奥のシェイプが削除されました。

FINISH

他のパスファインダー機能

[ シェイプ範囲で交差 ] と [ シェイプが重なる領域を中マド ] の例です。
※ [ シェイプを結合 ] は既に結合しているので意味がありません。

複雑なパスファインダーの使い方

Photoshopのパスファインダーで少し複雑な形状を作成する際のテクニックです。

STEP.1

シェイプを作成

例えば左図のような図形を作成する方法です。

[ 長方形ツール ] で矩形を作成します。

[ 楕円形ツール ] で正円を作成し、コピーして4つ配置します。

STEP.2

シェイプを結合

4つの正円シェイプレイヤーを結合します。

その後に長方形と結合した正円のシェイプレイヤーを結合します。

FINISH

完成

[ プロパティ ] → [ パスファインダー ] → [ 前面シェイプを削除 ] を適用しましょう。

以上でPhotoshopのパスファインダーを使った複数シェイプの編集が完了しました。

シェイプコンポーネントを結合

STEP.1

対象シェイプをアクティブにする

左図のようにシェイプを結合したりパスファインダーを適用すると、非表示になっている不要なパスが存在します。

不要なパスを消すには対象となるシェイプレイヤーをクリックしてアクティブにします。

STEP.2

シェイプコンポーネントを結合する

[ U ] を押してシェイプツールにすると画面上部にオプションが表示されます。

[ シェイプコンポーネントを結合 ] をクリックしてみましょう。

FINISH

完成

すると不要なパスが削除され、必要なパスのみ表示されるようになります。
シェイプコンポーネントを結合すると元のオブジェクトに戻せないので、レイヤーを複製してから行う事をオススメします。

結局イラレのパスファインダーが最強

Photoshopでパスファインダーの機能はそれなりに使えます。
しかしIllustratorのパスファインダーを使って作成したオブジェクトをPhotoshopにコピーする方が圧倒的に利便性が高く、何よりも「直感的で作りやすい」です。

STEP.1

Illustratorを開く

Illustratorを開きます。
イラレ未導入の方は事前にIllustrator公式サイトから入手しておきましょう。

STEP.2

オブジェクトを作成

お好きなオブジェクトを作成します。
例えば同じ角丸長方形を2つ重ね、位置を少しズラします。

2つのオブジェクトを [ 選択ツール ] で選択し、Illustratorの [ パスファインダー ] から [ 交差 ] をクリックします。

※イラレのパスファインダーはコチラの記事で詳しく解説しています。

すると左図のような図形が作れます。

作成したオブジェクトを選択ツールで選択し、[ Ctrl + C ] (Mac：⌘ + C) でコピーします。

FINISH

Photoshopにペースト

Photoshopを開き、対象ドキュメントに [ Ctrl + V ] (Mac：⌘ + V) でペーストします。

ペースト形式は [ スマートオブジェクト ] を選択しましょう。

以上でIllustratorのパスファインダーを使って作成したオブジェクトをPhotoshopにコピーする事ができました。

[ レイヤースタイル ] を使って色を変えたり質感を変更します。

もし図形の形を変更したい場合はレイヤーパネルのレイヤーサムネールをダブルクリックするとIllustratorで再編集できるようになります。

これが最も効率的で編集しやすい方法ですよ。

オリジナルゲームUIの作り方

【Photoshop】ゲームUIの作り方【PSD有り】

PhotoshopでオリジナルデザインのゲームUIをゼロから作る方法を詳しく解説しています。併せてチェックされてみませんか？

高品質なポートフォリオテンプレート

紙媒体やPDF形式で作成したポートフォリオの品質を手っ取り早く高めるには、高品質なテンプレートの活用が最も効率的かつ効果的です。

商用利用可能で高品質テンプレートばかり厳選！
今まで意識しなかった多くの「気づき」に出会えますよ。

※なお、ポートフォリオ制作はInDesign（インデザイン）を使うのが最も効率的です。
コチラでインデザ初心者の方向けにポートフォリオテンプレートの使い方を詳しく解説しております。

#01 Pink Portfolio Layout

ピンク系のキレイ目カワイイ風ポートフォリオ用テンプレートです。InDesign形式なので文字と画像の差し替えが超楽！
2時間あればポートフォリオが作れます。
編集にはInDesignが必須、未導入の方はInDesign公式サイトから入手しておきましょう。

ダウンロードする

#02 Portfolio Layout with Gray Accents

モノトーン系でどんな作風にも合うポートフォリオ用テンプレートです。イラスト、写真、建築、Web、グッズ…テンプレ選びに迷ったらコレがオススメ！
A4に印刷したポートフォリオ、PDF形式、どちらも短時間で作成可能です。

ダウンロードする

#03 Portfolio Layout with Yellow Accents

黄色が鮮やかでキレイなポートフォリオテンプレートです。
爽やかな画風のイラストにもピッタリ！
クセが無く、ベースデザインとして非常に扱いやすいテンプレートの一つです。

ダウンロードする

#04 Portfolio Template in Pale Green and Mint

収録されているレイアウトパターンが非常に豊富なポートフォリオ用テンプレートです。
作品を大きく見せる、制作過程を見せる、複数見せる、横長作品を画面内に綺麗に収める等、どんなパターンにも当てはめる事が可能ですよ。

ダウンロードする

#05 Minimalist Portfolio Layout

ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか？そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。

ダウンロードする

紹介しきれなかったポートフォリオテンプレートや素材

上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています！

ポートフォリオ用の高品質なテンプレート40選【InDesign,Illustrator,Photoshop】

【InDesign】ポートフォリオ用のテンプレートを編集する方法forインデザ初心者

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）のパスファインダーの使い方についてでした。

Illustratorのパスファインダーに慣れている方にとってフォトショのパスファインダーは少しクセがあるかもしれません。そして機能が少ないのも気になるでしょう。

正直パスファインダーを使ったオブジェクト作成をPhotoshopで行う利点は大してありません。
ただしPhotoshopしか持っていない方は重宝するでしょう。
Illustratorがあるならイラレのパスファインダーの方が圧倒的に高機能で直感的、そして短時間で作れます。

イラレで単色のオブジェクトを作成し、フォトショのレイヤー効果で質感付与、コレが一番効率的で編集しやすい方法です。Webデザインやフライヤーや紙面などのDTPデザイン、ゲームUI制作などでよく使うテクニックなので是非使ってみて下さい。
IllustratorはIllustrator公式サイトから入手できますよ。

ではまた！

写真の雰囲気を激変させよう

写真の雰囲気を激変させるチュートリアル集です。
フォトショの中級～上級テクニックを網羅的に学習できます。

【Photoshop】写真をアメコミ風のイラストにする方法を徹底解説

【Photoshop】写真を水彩画風に加工する方法を徹底解説

【Photoshop】昼間の写真を夜に変更する方法を徹底解説【初心者向けラナルータ】

【Photoshop】RGBずらし（色ずれ）を使ったTikTok風ロゴや印象的な画像の作り方

【Photoshop】写真をワンランク上の油絵風にする方法【フォトショ初心者】

【Photoshop】写真をミニチュア風に加工する方法【チルトシフト】

InDesignは活用されていますか？

Photoshopだけでなく、InDesign（インデザイン）も活用されていますか？
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方はInDesign公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート40選はコチラ！

Photoshopの操作方法

フォトショ基本操作