【Photoshop】写真を煙・粉塵・しぶきのように拡散するフォトエフェクト素材

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

Adobe Photoshop（フォトショップ）で写真を煙・粉塵・しぶきのように拡散するフォトエフェクト素材の使い方と作例をフォトショ初心者の方に詳しく解説します。PSD形式のテンプレート素材を使って写真を差し替えるだけ！短時間でプロが作成したグラフィックが再現できます。
WebサイトやSNSのバナーやメインビジュアル、チラシやポスターなどの印刷媒体素材としても活用する事ができますよ。

この記事の目次

何が作れるの？

上記の様に、対象物が煙や粉じん、しぶき等に変化する様子が表現できます。非常に凝った表現なので、ゼロベースで作成するにはPhotoshopの知識や実際の制作工程が必要ですが、PSD素材を使えば短時間で再現可能ですよ。

拡散系フォトエフェクトの使い方

それでは手軽にタイポグラフィポスターを作成していきましょう。

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はAdobe公式サイトから導入できます。（7日間の無料体験が可能、終了後は自動課金となるため、継続しない場合は期間内に解約してください。）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

飛沫の拡散フォトエフェクト

STEP.1

しぶきに拡散するエフェクトをダウンロード

しぶきに変わるフォトエフェクトPSDT素材をダウンロードします。サンプルは [ Dispersion Photo Effect with Paint Splash Mockup ] です。非常にハイレベルな加工が施された素材ですよ。

STEP.2

Photoshopで開く

ダウンロードしたしぶき拡散フォトエフェクトのテンプレートPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。
白背景に黒いしぶきエフェクトが表示されています。

STEP.3

画像を変更

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

[ YOUR OUTLINED IMAGE HERE ] のスマートオブジェクトのレイヤーサムネールをダブルクリックしましょう。

別タブが開きます。シアンのガイド線が表示されている箇所を起点にしぶきに変化します。お好きな写真を配置しましょう。なお、水色のガイド線はしぶきに変わる境界を表しています。
最後に [ Ctrl + S ] (Mac：⌘ + S)で上書き保存します。

FINISH

しぶきエフェクトの編集が完了

するとしぶきエフェクト本体が差し変わっている事が確認できます。
こういった不定形のエフェクト表現を馴染ませるのはかなり難易度が高いですが、[ Dispersion Photo Effect with Paint Splash Mockup ] を使えば非常にハイレベルなしぶき表現が短時間で再現可能です。

また、しぶきの差分がレイヤーで分かれているので表現をカスタマイズする事も容易にできますよ。

煙の拡散フォトエフェクト

STEP.1

煙に拡散するエフェクトをダウンロード

次は煙に変わるフォトエフェクトPSDT素材をダウンロードしてみましょう。サンプルは [ Smoke Dispersion Photo Effect Mockup ] です。先のしぶきエフェクト同様、煙へ変化する境界の処理が絶妙な高品質エフェクトです。

STEP.2

Photoshopで開く

ダウンロードした煙拡散フォトエフェクトのPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。
レイヤーパネル内の [ YOUR IMAGE HERE ] のレイヤーサムネールをダブルクリックしましょう。

STEP.3

画像を変更

別タブが開くのでお好きな写真を配置しましょう。
配置後は [ Ctrl + S ] (Mac：⌘ + S)で上書き保存します。

お好みで [ 背景を削除 ] してみるのもアリですよ。その後に背景色を変えてみるのも良いでしょう。

FINISH

煙エフェクトの編集が完了

煙エフェクト本体のタブをクリックすると内容が差し変わっている事が確認できます。
非常に手の込んだレタッチが少ない労力で再現できるのが嬉しいですね。

粉塵拡散フォトエフェクト

STEP.1

粉塵に拡散するエフェクトをダウンロード

最後に粉塵へと変化するフォトエフェクトPSDT素材をダウンロードしてみましょう。サンプルは [ Paint Drops Heavy Dispersion Art Photo Effect Mockup ] です。基本的には先に紹介した2つのフォトエフェクトと同じ使い方です。

STEP.2

Photoshopで開く

ダウンロードした粉塵拡散フォトエフェクトのPSDT素材をダブルクリックするとPhotoshopで左図のような画面が開きます。
レイヤーパネル内の [ Your Image Here ] のレイヤーサムネールをダブルクリックしましょう。

STEP.3

画像を変更

別タブが開くのでお好きな写真を配置しましょう。
配置後は [ Ctrl + S ] (Mac：⌘ + S)で上書き保存します。

FINISH

粉塵エフェクトの編集が完了

粉塵へと変化するフォトエフェクト本体のタブをクリックすると内容が差し変わっている事が確認できます。
どれもスマートオブジェクト内の素材を差し替えて上書き保存するだけ！お手軽作業でハイレベルなメインビジュアルが作成できる優れものですよ。

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

STEP.1

書き出しを選択

サンプルはコチラのしぶきへ分散するエフェクトの作例で解説します。
[ ファイル ] → [ 書き出し ] → [ 書き出し形式 ] をクリックします。

※ショートカットは [ Alt + Shift + Ctrl + W ]
(Mac：Option + Shift + ⌘ + W)

STEP.2

書き出し設定＆書き出し

書き出し形式のダイアログ画面が開きます。左メニューに書き出し対象の画像一覧、右メニューに書き出し設定が表示されています。
サンプルは全画像をJPG形式で書き出します。

設定後は右下の [ 書き出し ] をクリック。

STEP.3

書き出しの完了

以上でフォトエフェクトで編集した内容をJPG形式で書き出す事ができました。

フォトエフェクトのスマートオブジェクト内を変更・保存。そして本体PSDから書き出しを行うだけで超高品質なグラフィックが手軽に作成できますよ。

高品質な拡散系フォトエフェクト素材

その他の高品質な拡散をテーマにしたフォトエフェクトのPSD素材を厳選しました。素材を差し替えるだけでハイレベルなキービジュアルが作れますよ。

#01 Smoke Dispersion Photo Effect Mockup

対象物の一部を煙のようにもやっとさせることができるエフェクトです。
煙の質感が変われば表現が全く違ってきます。

ダウンロード

#02 Smoke Dispersion Photo Effect

他の煙と比べてややパキっとした表現ができるエフェクトです。Photoshopと当PSDがあれば短時間で再現できますよ。

具体的な使い方はコチラの記事で解説しています。

ダウンロード

#03 Dust or Smoke Dispersion Effect Mockup

まるでマジシャンが煙に消えるような様子が再現できるフォトショ用のエフェクトです。
もくもくとした雲のような質感の煙表現です。

ダウンロード

#04 Paint Stains Dispersion Photo Effect Mockup.

しゃばしゃばに溶かした絵の具をストローで吹いたような表現ができるフォトエフェクトモックアップです。絵の具が溶け合ったマーブル状の複雑な表現が特徴的ですね。

ダウンロード

#05 Ink Splash Effect

インクしぶきでマスクされたような表現ができるフォトエフェクトのPSD素材です。レイヤー整理されているのでフォトショ初心者の方でも低難易度で編集できる素材ですよ。

ダウンロード

#06 Splatter Paint Stains Art Portrait Effect Mockup

インクが飛び散ったアーティスティックな表現ができるエフェクトモックアップPSDです。手描きの線画風にできるのでアナログ表現にピッタリ。インクの飛び散りテクスチャが6種類も収録されているのでパターン制作にも対応できます。

ダウンロード

#07 Dispersion Photo Effect with Explosion and Smoke Mockup

細かく爆散していく様子が再現できる分散系フォトエフェクトのPSDモックアップです。上記で紹介したエフェクトと同様、スマートオブジェクトの内容を差し替えるだけで再現できます。

ダウンロードする

#08 Particles Dispersion or Erosion Effect

人物をはじめとした様々な対象物が粒子となって分散していく様子が作れるエフェクトモックアップPSDです。ゼロから作成するのは超難易度が高いですよ。

ダウンロードする

#09 Square Dispersion Photo Effect Mockup

対象物を大小の正方形で散らばせる事ができるフォトエフェクトモックアップです。化粧品系のグラフィックにも活用できそうですね。

ダウンロードする

#10 Glass Particles Dispersion Effect Mockup

粉々に砕けたガラスへ分散していく様子が作れるPSD形式のエフェクトモックアップです。スタイリッシュな世界観のメインビジュアルが短時間で作成できる便利なフォトエフェクト素材ですよ。

ダウンロードする

煙に変わるエフェクト素材

【Photoshop】商用可！人物が煙になるエフェクトモックアップPSD

コチラの記事で対象物が煙に変化する様子が簡単に作成できるフォトエフェクトPSD素材を紹介しています。併せてチェックされてみませんか？

おわりに

以上、Photoshop（フォトショップ）で写真をしぶきや煙、粉塵といった不定形のエフェクトに変化させる事ができるフォトエフェクト素材の使い方と作例についてでした。

この手の加工にはかなりハイレベルなPhotoshop知識やテクニックが必要ですが、PSD素材を使えばスマートオブジェクト内の素材を差し替えるだけで再現可能です。

ポスターやチラシなどの印刷物だけでなく、、バナーやWebサイトのキービジュアルなど、様々なコンテンツの汎用素材として活用できますよ。

ではまた！