【Photoshop】写真に動きが付けられるブラーエフェクトPSDの使い方と作例

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Adobe Photoshop（フォトショップ）で画像に動きが付けられる高品質なブラーエフェクトPSDの使い方と作例をフォトショ初心者の方に詳しく解説します。フォトショップの知識が無くてもプロのレタッチ結果が1分で得られるPSD素材です。

サイトやバナーのメインビジュアルとして、もちろんポスターやチラシなどの印刷物にも活用可能！
商用利用可能なので安心してご活用いただけます。

この記事の目次

何ができるの？

高度なブラーエフェクトが付与できるPSD素材を使う事で上記の様な加工が僅か1分で実現できます。Photoshopの機能を複雑に組み合わせた表現ですが、誰にでも再現可能ですよ。

ブラーエフェクトの使い方

Photoshopで使える2種類のブラーエフェクトPSDの使い方です。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。（7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

Blur Glitch Photo Effect Mockup

STEP.1

フォトエフェクトをダウンロード

ブラーエフェクト素材をダウンロードします。

サンプルは [ Blur Glitch Photo Effect Mockup ] です。解像度300px/inch、4500px X 3000pxの高解像度フォトエフェクト素材です。デジタル媒体から印刷媒体まで様々な用途に活用できますよ。

STEP.2

Photoshopで開く

「Blur Glitch Photo Effect Mockup」をPhotoshopで開いた状態

ダウンロードしたPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。

STEP.3

PSBを編集・保存

レイヤーパネルを開きます。
※非表示の場合は [ F7 ] で表示可。

最上部にある [ Edit Content ] のレイヤーサムネールをダブルクリックしましょう。

「Blur Glitch Photo Effect Mockup」のPSBを編集

別タブで [ Edit Content.psb ] が開きます。写真や文字などを配置しましょう。

サンプルはコチラの画像を使用しました。

変更後は [ Ctrl + S ] (Mac：⌘ + S) で上書き保存します。

FINISH

グリッチブラーエフェクトの完成

「Blur Glitch Photo Effect Mockup」のPSDを参照すると完成

元のブラーテキストエフェクトPSDのタブをクリックすると内容が変更されている事が確認できます。[ Blur Glitch Photo Effect Mockup ] を使えばブラーエフェクトとグリッチエフェクトを掛け合わせたような表現が一瞬で作れますよ。

Blurred Cinematic Photo Effect

STEP.1

フォトエフェクトをダウンロード

もう一つのブラーエフェクト素材を試してみましょう。

サンプルは [ Blurred Cinematic Photo Effect ] です。ドキュメントサイズは先程と同様で解像度300px/inch、4500px X 3000pxの高解像度フォトエフェクト素材で、デジタル媒体から印刷媒体まで汎用的に活用可能です。

STEP.2

Photoshopで開く

「Blurred Cinematic Photo Effect」をPhotoshopで開いた画面

ダウンロードしたPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。

STEP.3

PSBを編集・保存

レイヤーパネルを開きます。
※非表示の場合は [ F7 ] で表示可。

フォトエフェクトの作者は先のエフェクトと同じ、最上部にある [ Edit Content ] のレイヤーサムネールをダブルクリックしましょう。

「Blurred Cinematic Photo Effect」のPSBを開いて編集

別タブで [ Edit Content.psb ] が開きます。写真や文字などを配置しましょう。

サンプルは先程と同じでコチラの画像を使用しました。

変更後は [ Ctrl + S ] (Mac：⌘ + S) で上書き保存します。

FINISH

シネマ風ブラーエフェクトの完成

「Blurred Cinematic Photo Effect」のPSDを参照すると完成

元のブラーテキストエフェクトPSDのタブをクリックすると内容が変更されている事が確認できます。[ Blurred Cinematic Photo Effect ] を使えば映画のワンシーンの様なドラマティックなブラーエフェクト表現が1分で作れますよ。

各種画像形式へ書き出す方法

【Photoshop】PSDをJPEGやPNG・GIF形式で書き出す方法forフォトショ初心者

先のPSD形式の粉雪テキストエフェクトをJPEGやPNG形式などで書き出す方法を解説しています。バナーやロゴ素材として活用する際に便利ですよ。

その他のブラーエフェクト

その他の高品質で商用利用可能なブラー表現ができるエフェクト素材です。

#01 Frequency Wave Effect

音波をイメージした波状デザインのカスタマイズ可能なPSD形式のテンプレート素材です。テクノロジー関連のビジュアルに適しており、ロイヤリティフリーで広告やWebサイトの商用利用が可能です。

ダウンロード

#02 Motion Blur Effect

被写体にスピード感や躍動感を演出するフォトエフェクトテンプレートです。写真やテキストに残像のようなブレ効果を適用し、ダイナミックで臨場感のあるビジュアルを制作できます。

ダウンロード

#03 Noisy Blur Poster Photo Effect Mockup

写真にブレやフィルムノイズを加え、芸術的なポスターを作成できるPhotoshopテンプレートです。ファッション広告や音楽ジャケット、SNS用画像など、ポートレートを印象的に見せるデザインに適しています。

ダウンロード

#04 Black & White Grain Sweep Effect

モノクロ写真にザラついた粒子と流れるような動きを加えるエフェクトです。フィルムのような重厚かつスタイリッシュな風合いを演出し、エモい雰囲気のグラフィック制作に最適です。

ダウンロード

#05 Halftone Spinning Blur Poster Photo Effect Mockup

回転するようなブレ（スピンブラー）と、新聞印刷のようなハーフトーン（網点）を掛け合わせたポップで力強いスタイルです。レトロなコミック風やストリート系ポスターなど、視線を中央へ引きつけるインパクト重視のデザインに最適！

ダウンロード

#06 Ghosting Effect Mockup

残像が残ったような「ゴースト現象」をデジタルで再現するモックアップです。心理描写や幻想的なシーン、またはストリートファッションのビジュアルにおいて、どこか不思議で記憶に残る、レイヤー感のある演出が可能です。

ダウンロード

#07 Cinematic Motion Blur Photo Effect for Dynamic Scenes

映画のワンシーンのようなドラマチックなブレ加工に特化したエフェクトです。単なるブレではなく、光の加減や奥行きを意識した仕上がりで、静止画にストーリー性と圧倒的な没入感（ダイナミズム）を付与します。

ダウンロード

おわりに

以上、Photoshop（フォトショップ）でブラー表現ができるフォトエフェクトの使い方と作例でした。今回使用したエフェクトは [ Blur Glitch Photo Effect Mockup ] と [ Blurred Cinematic Photo Effect ] です。

静止画に動きを付けるだけでなく、Webサイトやバナー、ポスターやチラシをはじめとした各種印刷物のメイングラフィックとして使えるクオリティが一瞬で出す事ができます。

フォトエフェクトを上手く活用し、クリエイティブレベルの向上と時短を実現させてください！

ではまた！