【Photoshop】リンクを配置で共通パーツにする方法【PSDインクルード】

この記事を読むのに必要な時間は約 7 分です。

Photoshop（フォトショップ）でWEBサイトのデザインを作るとヘッダーやフッターといった共通パーツが出てきます。
トップページ、会社概要、事業内容、採用情報、問い合わせ等、複数のPSDファイルを作成して各PSDにバラバラと共通パーツを入れると変更した際に全てのPSDを変更する必要が出てきます。

…面倒くさいですよね。

ヘッダーはヘッダーだけ入れたPSDを作成、フッターはフッターだけ入れたPSDを作成し、別のPSDに共通パーツ用のPSDを配置すると、共通パーツの大元となるPSDを変更すると全てのPSDの共通パーツが更新されます。
WEBでもよく使う共通部分のインクルードをPhotoshop（フォトショップ）の「リンクを配置」で行い、効率的に作業を進める方法について例を交えながら詳しく解説します。

では早速始めていきましょう！

この記事の目次

共通部分、そうでないページ固有部分

仮に左図のような構成のページを作った場合、ヘッダーやフッター、右メニューなど共通部分が発生します。
もしも共通化せずに10ページ分のPSDをそれぞれ作成し、ヘッダーだけ少し変更を入れると10全てのPSDを手直ししないといけません。

…めんどくさい。

共通部分は共通部分だけでPSDを作る

共通部分であるヘッダーは「ヘッダー部分単体」をPSDで作成します。
他は何も入れません。
名称は「header.psd」等にしておきます。

同様の手順でフッターなら「footer.psd」、左メニューは「rightmenu.psd」等にしておきます。

PSD内に外部PSDを読み込ませる

PSD内に別のPSD（先のheader.psd）を読み込ませる方法について解説します。

STEP.1

本文用コンテンツのPSDを作成する

本文用コンテンツのPSDを作成します。
サンプルの名称はcontents.psdにしています。

※全てのPSDは同じフォルダにまとめておきます。

STEP.2

外部PSDをリンク配置する

画面左上の [ ファイル ] → [ リンクを配置 ] → [ 対象ファイル(header.psd)を選択 ]

STEP.3

位置の調整

位置を調整します。

STEP.4

配置を確定

位置が決まったら画面上部の [ 〇 ] をクリックして配置を確定します。

FINISH

完成

この状態でheader.psdに変更を加えるとcontents.psdのリンク配置しているヘッダー部分も変更されます。
便利！

リンク配置すると左図のようにレイヤーパネルに鎖アイコンが表示されます。

サンプルをダウンロード

fantiaで今回作成したPSDを公開しています。
サンプルファイルを参考にすると、さらに理解が深まりますよ！

Photoshopが必須

PSDを編集するにはAdobe Photoshop（アドビフォトショップ）が必須です。公式サイトからダウンロードしておきましょう。
コンプリートプランが最強に便利ですが、Photoshop単品は次のリンクから入手できます。

まとめ

以上、Photoshop（フォトショップ）で作成したPSDに別のPSDをインクルード（リンクを配置）する方法でした。

WEBのカンプをフォトショで作成する際に役立つ方法の一つです。
ページ数が多いとヘッダーのちょっとした修正でも手間が掛かるので、共通化して無駄な工数を減らしましょう。
その浮いた工数を品質向上に費やすとさらに良い感じになる事間違いなしです！

ではまた！