WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >Photoshop

今回はPhotoshopを使ってスピード感や疾走感、躍動感のある効果を加える方法をご紹介します！
少し手を動かすことにはなりますが、基本的にはPhotoshopの機能を使って簡単に演出ができますので、ぜひチェックしてみてください。

写真にスピード感をつける

まずは、スピード感が似合いそうな写真を用意します。今回は、爽やかに走るサラリーマンの写真を使用します。

写真自体をPhotoshopで開くのではなく、Photoshopを開いたら新規ドキュメントを開き、そこにドラッグアンドドロップで写真を配置する形にします。

写真を傾ける

この写真を、右回りに6°ほど回転させます。違いが分かりにくいですが…。こうすることで、サラリーマンが前傾して走っている形になり、より早く走っている感じになります。

写真に効果をつける

次に、写真にスピード感をつけていきます。

写真のレイヤーを選択したら、上部のメニューから「フィルター」→「ぼかし」→「ぼかし（移動）」を選択します。

「ぼかし（移動）」ウィンドウが開いたら、ぼかし具合を調整します。

「ぼかし（移動）」は、物が動いたときの残像が見えているような効果になるので、「角度」は物が動く方向を意識して設定すると良いです。
今回はサラリーマンが少し左上に向かって進んでいるイメージなので、12°の角度をつけました。

これで躍動感が出ました！ただ、これだと全体的にぼやけてしまって何だか分からないので、はっきりと見える部分も出していきます。

ぼかし効果をかけた写真のレイヤーに「スマートフィルター」がついていますが、その左に日の丸のようなアイコンがあります。

これは写真のレイヤーに「マスク」がかかっていることを表していて、今は写真全体のぼかし効果が表示されている状態になっています。
このマスクをブラシツールで編集することで、ぼかし効果を削り、はっきり見せたい部分を出すことができます。

今回削った箇所を赤くしてみました。

マスクの削り方ですが、基本的には以下のことを意識すると良いです。

• 被写体の端にはぼかし効果を残す
• 動いている方向（今回は人物の右側、前方）をはっきりとさせ、逆方向（左側、後方）にぼかし効果を多く残す
• 削る境界線は滑らかにする（ブラシの硬さを0％に近くする）

これで、人物はきちんと見せつつスピード感のある写真になりました！

テキストにスピード感をつける

次は、テキストにスピード感をつけてみましょう。やり方は写真にスピード感をつける場合とほとんど同じですが、もう1手順増えます。
まずは、テキストを用意します。

そうしたら、テキストレイヤーをコピーして、下のテキストレイヤーより下に配置し、さらに少しズラします。
今回は少し左にズラします。
これで準備完了です。

テキストに効果をつける

コピー＆移動させたテキストレイヤーに対して効果をかけていきます。
このレイヤーを選択した状態で、上部のメニューから「フィルター」→「表現手法」→「風」を選択します。「スマートオブジェクトに変換する必要があります」と出ますので「スマートオブジェクトに変換」ボタンをクリックします。

開いたウィンドウの中の「種類」はひとまず「標準」、「方向」は今回は「左から」を選択し、OKをクリックします。

「ヒュンッ！」という感じの線が出ました！先ほどのウィンドウの「種類」を「強く」「激しく揺らす」を選択すると線がより勢いが出ますが、「激しく揺らす」はスピード感がありすぎて分かりづらくなるので、「標準」か「強く」からお好みで選ぶと良いかと思います。

ここで、このスピード感のある線が少しガタついているのと、もう少し動きを出したいので、先ほどご紹介した「フィルター」→「ぼかし」→「ぼかし（移動）」で効果をつけます。

これで、テキストにスピード感がつきました！これだとスピード線が濃すぎて文字が読みにくいので、不透明度を50％に下げました。

調整については、スマートオブジェクトなのでダブルクリックするとテキストの編集ができますし、カラーオーバーレイで色を変更してもOKです。
薄くするだけでなく、あえて元のテキストと色を変えてみてもおもしろいです。

組み合わせてみました

今回加工した写真とテキストを組み合わせ、その他もろもろの加工等を加えてみました。

バナーやキービジュアルなどで取り入れてみよう

今回は、写真やテキストにスピード感をつける方法をご紹介しました。

スピード感や躍動感をつけることで、例えば「この製品を使えば瞬時に◯◯が作れます！」とか「スピーディに対応します！」とか「急いでご応募ください！」といった訴えが分かりやすくなり、より伝わるデザインになりそうです。

Photoshopの機能を使えばそれほど手間もかからないので、気になった方はぜひ試してみてください！