デザインブログ、SOKOLABOのソコラボのソコです！
前回の記事で画像にスピード感や躍動感を加えたい時に使うPhotoShopのぼかしのテクニックをお伝えしましたが、今日はそのテクニックを使ったデザインの参考を作ったのでご紹介します。
この記事では「３ヶ月でWEBデザイナーになれる！」などの触れ込みでデザインスクールで学んだもののなれなかった人へ、作例を学びながらデザインやphotoshopのスキルアップができるノウハウも織り交ぜて書いてくので、ぜひ参考にしてみてくださいね！
今回はこんな感じのものを作っていきます。
まずは画像を用意して下準備
まずはphotoshopで画像を開きます。
画像を２つ複製します。
さらに上のレイヤーを被写体を切り抜きます
それぞれのレイヤーにぼかし（移動）をかける
次に、
1.ぼかし背景のレイヤーをスマートオブジェクトに変換
2.同じフィルターメニューから「ぼかし」→「ぼかし(移動)」を選択
3.角度「-５」 距離「100」を選択(お好みでもOKです）
次に上の被写体のレイヤーもスマートオブジェクトに変換して、こちらもフィルター（移動）のぼかしをかけます
ドリブルのスピード感を強調させたいので、ぼかしの角度は「0」距離「55」に設定しました。
上下のレイヤーで「異なる値のぼかし」を入れることで、画像に立体感を持たせる事ができます！
パーツごとに異なるぼかしをつける手法はさまざまな場面で活用できるので覚えておきましょう★
レイヤーマスクを使ってメリハリを
このままだと画像全体にぼかしかかっていてボケボケなので、レイヤーマスクを使ってぼかしの適用範囲を調整します。
やり方は以下
右：レイヤーは調整したいレイヤーのスマートフィルターのカーソルへ
左：ブラシツールを選択、色は黒（♯000000）
上：ブラシの形はぼやけ系 不透明度は40％」前後（要調整）
この状態でレイヤーマスクでブラシを塗っていきます
レイヤーマスクの黒く塗った部分のぼかしが取れていきます。
「ブラシの形状をぼやけたブラシ」「不透明度を40％」にする事で、ブラシを塗り重ねてぼかしの濃度を調節しながら自然に馴染むようにぼかしが取る事ができます。
これで「がっつりぼかしを撮る場所」「ぼかしの境目をあいまいにする場所」などを試行錯誤して見栄えを整えていきます。
・「顔回り」「ユニフォームのゼッケン」「選手の体の主となる部分」はガッツリとぼかしを消す
・手や足など動きが特にある部分はぼかしを曖昧にして躍動感を出す
・ドリブルの進行方向が左なので、左の残像を消して、右だけ残像を残すとよりスピード感が出ます
ここは慣れになってしまうんですが、くっきりさせたい部分、残像を曖昧にしたい部分、ぼかしを強めたい部分は色々練習してみてください。
バックにぼかしのオブジェクトを配置してリッチに
次に背景に同じくぼかし（移動）を使ったオブジェクトを配置して画面をリッチに仕上げていきます。
ペンツールを使って下記のようなオブジェクトを作ります。
そしてこれにもフィルタからぼかし（移動）を適用。
角度や距離についてはお好みで、良い感じになればなんでもOKです！
更に同じ要領でもう一つオブジェクトを作ります。
距離や角度オブジェクトの傾きや大きさはこれもお好みで良い感じになるまで聴視してください。
そして被写体レイヤーを表示、被写体を見ながら再度ぼかしや大きさを調整。
だいぶ雰囲気が出てきました！
最後に全体に微調整と文字入れ
最後に全体を整えてクオリティを上げていきましょう！
背景レイヤーの明るさを少し落として被写体を際立たせて
上部の空間が空いていてバランスが悪いので、全体を少し上に引き上げて
丸を並べたオブジェクトと文字を入れて
（オブジェクトを被写体に微妙～～に被せると一体感が出ます）
空いた空間にぼかした帯と文字を入れ込みます
帯は背景レイヤーと被写体レイヤーの間、文字は最前面に入れましょう！
被写体の明るさを調整、サブタイトルを入れて
最後に今まで使ったぼかしの要領で作ったキャッチコピーを入れて完成！！
どうでしょうか、結構色んな表現が入り混じったグラフィックになっていますが、
背景、被写体、オブジェクト、キャッチコピー、要所に使われている素材はぼかし（移動）でどれも表現されています。
同じ効果を使ってもフィルタをかける素材や値の調整でだいぶ表現も変わりますよね！
これ一つをマスターするだけでググっと表現の幅が広がるので、ぜひ習得して制作の糧になれば幸いです！
それでは！
