この記事を読むのに必要な時間は約 7 分です。
Photoshop（フォトショップ）でWEBサイトのデザインを作るとヘッダーやフッターといった共通パーツが出てきます。トップページ、会社概要、事業内容、採用情報、問い合わせ等、複数のPSDファイルを作成して各PSDにバラバラと共通パーツを入れると変更した際に全てのPSDを変更する必要が出てきます。
…面倒くさいですよね。
ヘッダーはヘッダーだけ入れたPSDを作成、フッターはフッターだけ入れたPSDを作成し、別のPSDに共通パーツ用のPSDを配置すると、共通パーツの大元となるPSDを変更すると全てのPSDの共通パーツが更新されます。
WEBでもよく使う共通部分のインクルードをPhotoshop（フォトショップ）の「リンクを配置」で行い、効率的に作業を進める方法について例を交えながら詳しく解説します。
この記事の目次
仮に左図のような構成のページを作った場合、ヘッダーやフッター、右メニューなど共通部分が発生します。もしも共通化せずに10ページ分のPSDをそれぞれ作成し、ヘッダーだけ少し変更を入れると10全てのPSDを手直ししないといけません。…めんどくさいですよね。
共通部分であるヘッダーは「ヘッダー部分単体」をPSDで作成します。他は何も入れません。名称は「header.psd」等にしておきます。
同様の手順でフッターなら「footer.psd」、左メニューは「rightmenu.psd」等にしておきます。
同様の手順でフッターなら「footer.psd」、左メニューは「rightmenu.psd」等にしておきます。
PSD内に別のPSD（先のheader.psd）を読み込ませる方法について解説します。
STEP.1
本文用コンテンツのPSDを作成する
本文用コンテンツのPSDを作成します。サンプルの名称はcontents.psdにしています。
※全てのPSDは同じフォルダにまとめておきます。
※全てのPSDは同じフォルダにまとめておきます。
STEP.2
外部PSDをリンク配置する
画面左上の[ ファイル ] → [ リンクを配置 ] → [ 対象ファイル(header.psd)を選択 ]
STEP.3
位置の調整
位置を調整します。
STEP.4
配置を確定
位置が決まったら画面上部の[ 〇 ]をクリックして配置を確定します。
FINISH
完成
この状態でheader.psdに変更を加えるとcontents.psdのリンク配置しているヘッダー部分も変更されます。便利！
リンク配置すると左図のようにレイヤーパネルに鎖アイコンが表示されます。
リンク配置すると左図のようにレイヤーパネルに鎖アイコンが表示されます。
今回作成した例をzipでまとめてみました。「contents.psd」内に「header.psd、rightmenu.psd、footer.psd」をリンク配置したものです。
ダウンロード
ダウンロード
以上、Photoshop（フォトショップ）で作成したPSDに別のPSDをインクルード（リンクを配置）する方法でした。
WEBのカンプをフォトショで作成する際に役立つ方法の一つです。
ページ数が多いとヘッダーのちょっとした修正でも手間が掛かるので、共通化して無駄な工数を減らしましょう。その浮いた工数を品質向上に費やすとさらに良い感じになる事間違いなしです！
ではまた！
ゼロから始めるPhotoshop目次
【導入編】ゼロから始めるPhotoshop
最安値でPhotoshopを購入する方法
フォトショの全ショートカットまとめ
「変形」の仕様をCC2018以前に戻す方法
Photoshopとは・DTPの基礎知識
操作画面、新規作成と保存、各種ファイル形式
ざっくり触ってみる
レイヤーの作成・レイヤーの操作
各種カラーモードについて
【遠近法の切り抜きツール】斜めから撮った写真を正面に補正する方法と応用
切り抜きツールの使い方と解像度・サイズの変更方法を徹底解説
文字ツールの基本的な使い方
文字パネルの機能と使い方を徹底解説
段落パネルの機能と使い方を徹底解説
レイヤースタイル、レイヤー効果の基本的な使い方
調整レイヤーを徹底解説
シェイプツールの使い方・編集方法を徹底解説
共通パーツをインクルードする方法
目次一覧を見る
SCROLL
目次一覧
ゼロから始めるシリーズ目次
IllutratorとPhotoshopの使い方をゼロから解説する「ゼロから始めるIllustrator」と「ゼロから始めるPhotoshop」の目次リンクです。
本業が教えるイラレとフォトショ講座の目次は下記から。
本業が教えるイラレとフォトショ講座の目次は下記から。
