本文へジャンプ

映画のポスターのように、迫力のある画像を創ろう

Posted by Yuji Ushida

Webデザインを生業にしているみなさん、こんにちはこんばんは!
なんか最近、デザイナーって肩身狭くない?

ということで、今回のテーマは『映画のポスターのように、迫力のある画像を創ろう』です。

昨今、Webデザインのミニマル化が進んで、画像・写真を多用するサイトが増えてきましたよね。
レスポンシブなフルスクリーンなんて、もう珍しくない。というか、当たり前の時代がやって参りました。

画像の存在感が増した今こそ、かっこいいグラフィックを作成して、他サイトに差をつけたいところ!
今回は『映画のポスターの様な~』をテーマに、僕のオリジナルですが、簡単に迫力を出せるチュートリアルをご紹介しますー。

画像を準備

まずは、素材を用意しましょう。
今回は、当社きってのフリー素材、この方にご協力頂きます。

写真1 - 映画のポスターのように、迫力のある画像を創ろう

Model: Mr.TOM

不意の撮影にもこの表情、流石です。
今回は、あえて一眼レフなど使わずに、スマホで撮影した画像を撮影しました。
スマホから作成した画像がどうなるか、乞うご期待です。

画像をレイヤー分けする

今回はスマホで撮影したこちらの画像を使用しますが、奥行きが無くのっぺりしています。

写真2 - 映画のポスターのように、迫力のある画像を創ろう

まずはここから調整。メインとなる被写体と、背景のレイヤーを分けてしまいます。
みなさん御馴染み、クイック選択ツールを使ってちょちょいのチョイと切り抜き。これだけでも便利な時代になったなー。

クイック選択ツールで選択したら、境界線を調整から、「新規レイヤー(レイヤーマスクあり)」でOKを押します。
これでレイヤーが分かれました。切り抜いたレイヤーには「人物」と名前を付けておきます。
オリジナルの画像は取っておきたいので、レイヤーを複製して、複製したレイヤーには好きな名前(ここでは「bg1」)をつけておきましょう。

レイヤー構成はこんな感じになりました。

写真3 - 映画のポスターのように、迫力のある画像を創ろう

それぞれのレイヤーに調整レイヤーで味付け

「bg1」レイヤーの調整

まず、レイヤー「bg1」を調整していきましょう。
明るさ・コントラストフィルターを使用して、コントラストを調整します。

明るさも用途に合わせて調整すると、より強弱のある画像に仕上がりますので、同時に調整しましょう。
なんだったら、さらにフィルターから「ぼかし」をかけてあげると、より効果的になります。

今回は明度とコントラストを落としつつ、ボケた画像を作成しました。

写真4 - 映画のポスターのように、迫力のある画像を創ろう

「人物」レイヤーの調整

次に「人物」レイヤーを調整していきましょう。
さきほどの「bg1」レイヤーに「人物」レイヤーを表示にして重ねると、こんな感じです。
ふむ。ちょっと奥行きが出てきた?

写真5 - 映画のポスターのように、迫力のある画像を創ろう

人物レイヤーをより強調させたいので、まず、トーンカーブで色の濃さ(明るさ)を調整します。
トーンカーブ上でS字を作り、暗い箇所はより暗く、明るい箇所はより明るく、強弱を付けていきます。

写真6 - 映画のポスターのように、迫力のある画像を創ろう

全体的に色がはっきりとして、背景との対比も強くなりましたが、まだまだです。
明るさ・コントラストを使用して、さらに色を引き出し強調することで、背景と被写体をよりくっきりさせます。
今回は画像が暗めですので、明るさも目一杯、上げてみます。

写真7 - 映画のポスターのように、迫力のある画像を創ろう

バックと被写体がはっきりと分かれて、全体の強弱が強まりました。

トーンを調整していきます。

全体を馴染ませる

被写体がはっきりしたのはいいですが、このままでは、「人物」と「bg1」のトーンが合ってなさすぎて、ちょっと不自然です。
なので、全体にかかるように色合い・彩度で調整し、全体のトーンを調整します。

写真7 - 映画のポスターのように、迫力のある画像を創ろう

全体の彩度を調整することで、画像のトーンが落ち着いて、統一感が出てきました。
コントラストを目一杯にかけてから、全体の彩度を落とすことで、こういったパンチの効いた画像を作成することができます。

これで色調的にはほとんど完成です。どうでしょう? なかなか迫力のある画像ができたと思いませんか?

ここから、さらに軽い微調整をして完成です。

微調整

今回の被写体はスマホで撮影したため、少し"眠い感じ"がします。そんなときにはフィルターからスマートシャープを選んで、「人物」レイヤーをさらに強調させていきます。

人物の画像をレタッチする際には、目の輝きなどを強調すると、より迫力が出ますよね。
シャープをかけ、このままでもいいのですが、何度も言うように今回は『映画のポスターのような~』がテーマですので、より深みを出したいところ。
そんな時には、ノイズフィルターを作成します。
白く塗りつぶした新規レイヤーにノイズをかけ、それを焼き込みレイヤーに設定すると......。

写真8 - 映画のポスターのように、迫力のある画像を創ろう

これにて完成! ノイズフィルターを作成することで、ざらざらした質感の高い画像が出来上がりました。
多少、髪がズラっぽいですが、画像に迫力が増したと思います。

ノイズフィルターの透明度を調整することで、質感もかなり変わってきます。
最終的なレイヤー構成はこんな感じになりました。

写真8 - 映画のポスターのように、迫力のある画像を創ろう

まとめ

写真9 - 映画のポスターのように、迫力のある画像を創ろう

作業時間的には10分~20分くらい。コンテンツやサイトによって、求められる画像レタッチの方向性は異なりますが、元素材がスマホで撮った画像でも、コレぐらいには簡単に出来ました。

あくまで簡易版のレタッチですし、やり方は人それぞれではありますが、今回ご紹介した手順であれば、簡単にインパクトのある画像を作成することができますので、ぜひ、お試しくだされ。

印象的な画像で、よりかっこいいWebサイトを造りたいですね。ではでは。


写真9 - 映画のポスターのように、迫力のある画像を創ろう

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
2018年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+