ポートフォリオの作り方をゼロから徹底解説

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

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

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

…面倒くさいですよね。

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

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

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

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

…めんどくさい。
Photoshopを導入しましょう
当記事の内容を実践するにはPhotoshop(フォトショップ)が必須です。
まだPhotoshopが未導入の方はAdobe公式サイトから入手しておきましょう。
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

共通部分は共通部分だけで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のリンク配置しているヘッダー部分も変更されます。
便利!

リンク配置すると左図のようにレイヤーパネルに鎖アイコンが表示されます。
AdobeXdが超便利
WebサイトデザインのツールはPhotoshopも便利ですが、Adobe Xdもメチャ便利です。
上記で解説している共通パーツはもちろん可能!ワイヤーフレームの作成だけでなく、現バージョンのXdはデザイン自体も行えるのでXd上で全て完結します。
シンプルデザインのサイトならPhotoshopよりAdobeXdの方が素早く作れますよ。

サンプルをダウンロード

fantiaで今回作成したPSDを公開しています。
サンプルファイルを参考にすると、さらに理解が深まりますよ!
サンプルPSDを編集するにはPhotoshopが必要
PSDを編集するにはAdobe Photoshop(アドビ フォトショップ)が必須です。 Adobe公式サイトからダウンロードしておきましょう。 Illustratorや他のアドビ製品も使うならコンプリートプランが便利ですが、Photoshop単品はフォトプランが最もお得です。

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

Photoshopの学習をする上で、プロが作成した生データを研究する事は重要です。
普段からデザイン業務をされている方にとって自分以外のプロのクリエイターが作成したデータを見る事は日常茶飯事ですが、そうでない方は見る機会がありません。

AdobeStockのテンプレート素材はプロによる高品質な作品ばかり!
全て商用利用可能なので、テキストを変えるだけでそのまま使えます。

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


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


バナーもフォトショップの練習をする上で良質な教材です。
想像だけ・中途半端な素材を参考にするのは有効な学習方法とは言えませんよ。
ハイクオリティなバナーテンプレート50選


例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートでレイアウトや余白、文字サイズを簡単に研究可能。内定獲得の可能性が格段にアップします!
厳選!ポートフォリオ用テンプレート34選


ゲームUIの制作は素材制作にはツールの深い知識が必要です。
テンプレートはまさに制作ノウハウの宝庫!
どれも最高の素材ばかりです。
ゲームUIに使えるテンプレート48選


単なる白黒の文字オブジェクトを一瞬で全く別モノへ大変身させるエフェクト52選です。
文字に高品質なエフェクトを追加するモックアップ


写真をはじめとした素材を「あっという間」に全く違うグラフィックへ大変身させるエフェクトです。
時短と品質の向上をされたいかたに超オススメ!
写真を全く違うグラフィックに変える事が出来る高品質なエフェクト50選


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

まとめ

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

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

ではまた!

Illustratorは活用されていますか?
Photoshopだけでなく、Illustratorも活用されているでしょうか?
まだIllustratorを導入されていない方はAdobe公式サイトから入手できます。
なお、学生や教職員の方は公式サイトの学割コンプリートプランが最強にお得!
Illustratorの使い方はゼロから始めるIllustratorで徹底解説しています。
目次一覧
ゼロから始めるシリーズ

現役デザイナーが教えるIllustrator、Photoshop、ポートフォリオ講座の目次です。
デザイン未経験からプロを目指しましょう!