ブログのアイキャッチやSNS投稿用の画像など、複数の画像に同じ加工を行う場合、一枚一枚編集するのは効率が悪くて大変です。
同じ編集を繰り返す場合、PSDをテンプレート化しておくと次回から作業効率がアップします。
画像をドラッグ&ドロップするだけで加工内容を再利用できるわけです（上記例ではテキスト、オーバーレイ、画像の枠を再利用しています）。
当記事では、PSDのレイヤーをテンプレート化して、画像作成を効率化する方法をお伝えいたします。
目次
PSDのレイヤーを雛形にして活用する手順
PSDファイルには、何層ものレイヤーを重ねて編集できる特徴があるので、一部のレイヤーを雛形（テンプレート）にして再利用できます。一度作成しておけば使いまわせるので統一感も生まれ、編集作業もスムーズです。
手順は次の3ステップです。それぞれ解説いたします。
- PSDでテンプレートをつくる
- レイヤーに画像を追加する
- 新たな画像として書き出す
PSDでテンプレートをつくる
まずは、テンプレートとなるPSDファイルをつくります。
PSD自体の横幅とカンバスカラーを確認
最終的に800px幅の画像で出力したいなら、PSDファイル（雛形）の横幅も800pxになっているか確認しておきます。カンバスカラーは「透明」を選んでおきましょう。
フォントのタイプ・サイズ・スタイル・色などを確認
文字ツールを使う場合は、そのフォントタイプ・サイズ・スタイルを確認しておきます。
特に複数人で制作する場合は、フォントやスタイルが変わることがあるので注意が必要です（同じPSDファイルを共有したとしても、利用ソフトやそのバージョン、デバイスに依存するため）。
テキストを選択すると、次の情報を確認できます。
- フォントタイプ
- フォントスタイル
- フォントサイズ
- 文字間のカーニング（文字間隔の調整）
- 行送り（テキストの行間隔）
- カラー
今回の場合、長方形ツールを使って塗り潰しも行なっています。
黒色で塗りつぶしていますが、不透明度を30%に変更しています。
画像の淵には枠線（境界線）も追加しています。サイズ（幅）や色、位置も確認しておきましょう。
レイヤーに画像を追加する
PSDのテンプレートをつくれたら、加工したい画像をレイヤーに差し込みます。
この時のポイントは2つです。
- 雛形と画像のサイズ（横幅）を合わせる（今回の場合は800px）。
- 新規レイヤーをつくった後に画像をドラッグ&ドロップする。
macなら「command」キーを押しながら、右下の「新規レイヤーを作成」アイコンを押します。
すると、最下層に新規レイヤーが追加されますので、そこに画像をドラッグ&ドロップすることで、雛形の内容が綺麗に反映されます。
新たな画像として書き出す
編集が終わったら、新しい画像として、任意の拡張子で書き出します。
PSDではなく、画像ファイル（JPG等）として書き出してください。
PSD雛形の活用事例
画像やテキストを変更して使いまわせるPSD雛形。活用事例をいくつか挙げておきます。
アイキャッチやバナー
先述のようなアイキャッチ向けの加工を雛形にしておく事例です。
同じ体裁のアイキャッチを複数回利用する際に活用できます。バナー画像用の雛形としても使えるのではないでしょうか。シンプルな加工だけなら、Canvaでも代用できます。
読者に自分の記事を見つけてもらうのに重要な役割をアイキャッチ画像は担っています。それもそのはずで、記事タイトルはもちろん、アイキャッチ画像ひとつで記事ページを開いてくれる読者の数も大きく変化するからです。事実、TCDブログ内の記事もアイキャッチ画像ひとつで記事のクリック率が3倍ほど膨れ上がった事例が...
SNS投稿
InstagramなどのSNS投稿用の雛形をつくっておくのもありです。雛形のサイズを正方形（例：1080px × 1080px）にして、背景画像や各所の装飾、レイアウトを雛形にしておきます。
同じ雛形を使って投稿すれば、統一感のあるフィードをつくれます。投稿内容のジャンル別の雛形を用意してもいいかもしれません。
マニュアルや資料
マニュアルや資料を作成する際は、複数の画像に番号、囲み枠などを多用します。
一枚一枚加工してもいいですが、画像のサイズや比率が異なると番号や枠のサイズ感が変わってしまい、全体像に一貫性がなくなる可能性があります。
画像内の加工に一貫性が無い例（番号のサイズ感が異なる）
そのため、サイズやスタイルを統一した雛形を利用するのがおすすめです。
写真素材
写真素材などを編集する際にも雛形があると便利です。クリエイターのロゴや透かし（ウォーターマーク）などを雛形にします。
名前やロゴ画像追加し、透明度を下げて透かしにしておく加工です。一度雛形にすれば、簡単に定位置に透かしを追加できます。
Photoshopのアクション機能と併用すれば、複数枚の画像に一括で透かしを追加することも可能です。
Photoshopを使って画像を編集する際に、複数の画像で同じ処理が必要な時ってありませんか？ 例えば、画像に枠をつけて、サイズを変更して、塗りつぶして透過率を50%にするなどの処理を複数の画像に施していく場合、手間も時間もかかります。 というわけで当記事では、Photoshopに複数の...
まとめ
PSDのレイヤーをテンプレート化して、画像作成を効率化する方法をご紹介いたしました。
複数の画像に同じ加工を行うなら、PSDのレイヤーを活用してみてください。簡単なものならCanvaなどでも事足りますが、レイヤーが何層にもなっているものや、画像の枚数が多い場合は、自動処理機能などを使えるPhotoshopを利用するのもおすすめです。
Photoshopに関する記事
Webサイトのデザインデータは、PSDで共有されるのが主流ですが、そのままサイト上で使うことはできません。 「デザインデータを基に、Webサイトに画像を設置してみたい」ときなどは、PSDから画像ファイルのみを書き出して、それらをアップロードする必要があります。 というわけで今回は、PSD...
Photoshopで文字や画像に影を付けたいときは、ドロップシャドウを使います。 例えば、次のように背景と同系色の画像でも立体的に見せることが可能です。 ブログやサイト内に設置する参考画像なども簡単にスタイリッシュな印象にできて便利です。 そこで当記事では、Photosho...
動きを表現するのに便利なGIFアニメですが、シンプルな静止画を編集するときとは少し勝手が違います。GIFアニメは複数の静止画の集まりですので、すべてのフレームの編集が必要です。 そこで今回は、Photoshopを使ってGIFアニメを編集する方法をご紹介いたします。 ※当記事で解説するGI...
コメント