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
シェイプを結合
その後に長方形と結合した正円のシェイプレイヤーを結合します。
FINISH
完成
[ プロパティ ] → [ パスファインダー ] → [ 前面シェイプを削除 ] を適用しましょう。
以上でPhotoshopのパスファインダーを使った複数シェイプの編集が完了しました。
シェイプコンポーネントを結合
STEP.1
対象シェイプをアクティブにする
左図のようにシェイプを結合したりパスファインダーを適用すると、非表示になっている不要なパスが存在します。
不要なパスを消すには対象となるシェイプレイヤーをクリックしてアクティブにします。
STEP.2
シェイプコンポーネントを結合する
[ U ] を押してシェイプツールにすると画面上部にオプションが表示されます。
[ シェイプコンポーネントを結合 ] をクリックしてみましょう。
FINISH
完成
すると不要なパスが削除され、必要なパスのみ表示されるようになります。
シェイプコンポーネントを結合すると元のオブジェクトに戻せないので、レイヤーを複製してから行う事をオススメします。
結局イラレのパスファインダーが最強
Photoshopでパスファインダーの機能はそれなりに使えます。
しかしIllustratorのパスファインダーを使って作成したオブジェクトをPhotoshopにコピーする方が圧倒的に利便性が高く、何よりも「直感的で作りやすい」です。
STEP.2
オブジェクトを作成
お好きなオブジェクトを作成します。
例えば同じ角丸長方形を2つ重ね、位置を少しズラします。
2つのオブジェクトを [
選択ツール ] で選択し、Illustratorの [
パスファインダー ] から [
交差 ] をクリックします。
※イラレのパスファインダーは
コチラの記事で詳しく解説しています。
すると左図のような図形が作れます。
作成したオブジェクトを選択ツールで選択し、[ Ctrl + C ] (Mac:⌘ + C) でコピーします。
FINISH
Photoshopにペースト
Photoshopを開き、対象ドキュメントに [ Ctrl + V ] (Mac:⌘ + V) でペーストします。
ペースト形式は [ スマートオブジェクト ] を選択しましょう。
以上でIllustratorのパスファインダーを使って作成したオブジェクトをPhotoshopにコピーする事ができました。
[
レイヤースタイル ] を使って色を変えたり質感を変更します。
もし図形の形を変更したい場合はレイヤーパネルのレイヤーサムネールをダブルクリックするとIllustratorで再編集できるようになります。
これが最も効率的で編集しやすい方法ですよ。
オリジナルゲームUIの作り方
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
ポートフォリオの表紙には必ずメインビジュアルを入れないとダメか?そんな事はありません。
単色に文字だけで構成した表紙も素敵です。
ページ中身のレイアウトパターンも豊富、あえて表紙をシンプルにする手法もアリですよ。
ダウンロードする
紹介しきれなかったポートフォリオテンプレートや素材
上記のテンプレートはほんの一部。
下記リンクで多数の高品質なポートフォリオテンプレートを紹介しています!
ワンランク上のテンプレート素材
Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。
下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。
制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。
例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート40選
良質な素材をもっと見る
上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください!
おわりに
以上、Photoshop(フォトショップ)のパスファインダーの使い方についてでした。
Illustratorのパスファインダーに慣れている方にとってフォトショのパスファインダーは少しクセがあるかもしれません。そして機能が少ないのも気になるでしょう。
正直パスファインダーを使ったオブジェクト作成をPhotoshopで行う利点は大してありません。
ただしPhotoshopしか持っていない方は重宝するでしょう。
Illustratorがあるならイラレのパスファインダーの方が圧倒的に高機能で直感的、そして短時間で作れます。
イラレで単色のオブジェクトを作成し、フォトショのレイヤー効果で質感付与、コレが一番効率的で編集しやすい方法です。Webデザインやフライヤーや紙面などのDTPデザイン、ゲームUI制作などでよく使うテクニックなので是非使ってみて下さい。
IllustratorはIllustrator公式サイトから入手できますよ。
ではまた!
写真の雰囲気を激変させよう
写真の雰囲気を激変させるチュートリアル集です。
フォトショの中級~上級テクニックを網羅的に学習できます。
InDesignは活用されていますか?
Photoshopだけでなく、InDesign(インデザイン)も活用されていますか?
ポートフォリオ制作はイラレよりInDesignの方が効率的に作成できます。
まだInDesignを導入されていない方は
InDesign公式サイトから入手できます。
高品質で商用利用可能なポートフォリオテンプレート40選は
コチラ!
目次一覧
ゼロから始めるシリーズ
現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!