【メイキング】Photoshopで動画用のフレームデザイン!写真素材はあくまでも素材なのです。

【メイキング】Photoshopで動画フレームを作る!写真素材はあくまでも素材なのです。

こんにちは!今野です。
今回は動画のフレーム(枠)デザインを作る工程をご紹介します。

近年、WEBサイトに動画を埋め込む機会が多くなりましたが、
弊社が得意とする「ゲーム広告」の案件では
動画の枠にもこだわったデザインを起用することがあります。

▼たとえばこんな感じ
動画フレームを作る_01

手前味噌で恐縮ですが、
いま見てもカッコイイですね!!!(≧▽≦)

上のようにゼロから描き起こしたオリジナルのデザインも素敵ですが、今回は「フリー素材」と呼ばれる著作権フリーの画像を用いて制作する工程をご紹介していきます。

Step.1 素材を用意する

今回用意した画像は絵を飾るための額縁画像です。
動画フレームを作る_02

これをヨコ型にして動画をハメ込んでみます。
動画フレームを作る_03

よし!これで完成!!!
・・・というのはプロではありません。

フリー素材を「そのまま」使うのは芸がありませんし、素人でも頑張ればできます。
美味しい冷凍食品をそのまま提供する料理屋さんを想像してください。

ありえませんよね。(`・ω・´)

フリー素材はあくまでも「素材」です。
1つの素材を深く観察し、どのようにアレンジしていくか、
その直感力こそがデザイナーの技量として問われているのではないでしょうか。

Step.2 素材を加工する

まずは額縁の色調を整えてドラマチックにします。
動画フレームを作る_04

これは”加工”ではありません。
素材の良さを引き立たせるための下ごしらえのようなもの。

exmindクオリティの真骨頂は、このフリー素材を・・・

動画フレームを作る_05

バラバラにします!!( ゚Д゚)くわ!

うんうん。
こうすることで1つ1つのパーツの表情や特徴が際立ちますね。
ここから新しいフレームをイメージします。

Step.3 パーツを作り込む。

少しこまかい作業なので拡大します。
動画フレームを作る_06

まずは2重線の枠の中に装飾を加えて・・・
動画フレームを作る_07

さらにその外側に装飾がついた太めの枠を重ねてみます。
動画フレームを作る_08

もうひと回り 大きさの比率を変えた枠を重ねてみましょう。
動画フレームを作る_09

フレームの重なりを強調するためにカゲをつけると・・・
動画フレームを作る_10

うん!!
重厚感のある額縁になりましたね(・∀・)

全体を表示するとこんな感じです。
動画フレームを作る_11

次に違う額縁画像の角の部分を切り取ります。
動画フレームを作る_12

合成して色調を整えましょう。
動画フレームを作る_13

同様にいろいろな額縁の画像からパーツを抜き出して装飾していけば・・・
動画フレームを作る_14

オリジナルの額縁の完成です!(・∀・)コケティッシュ!! 

 

・・・本当にこれで完成ですか?
exmindの合言葉は『完成した!』と思ってからが本番である。です。
さらにリアリティとドラマ性を追求するのがexmindクオリティなのです!!

上部は明るく、下部を暗くなるように全体のカゲの調子を整えれば・・・
動画フレームを作る_15

完成です!!!(・∀・)コケティッシュ!!(2回目)

 

Step.4 背景も作り込む。

このフレームの世界観を深めるために、次は背景画像も作ってみます。
ここでもよくある壁肌のフリー素材を用意します。
動画フレームを作る_16

この画像を、こうやって色を調整して・・・
動画フレームを作る_17

暗く整えて背景に配置すれば・・・
動画フレームを作る_18

完成です!!(・∀・)コケティッシュ!!(3回目)

背景が加わるとより雰囲気や世界観が演出できますね。

 

動画を飾る枠も、画力(えぢから)がある場合は、
webサイトのメインビジュアルとしても充分に耐えれます。

動画フレームを作る_19

いかがでしょうか。
素材の画像をそのまま使うよりも、より印象的でドラマティックなビジュアルに仕上がりました。
単純な額縁の画像も制作される工程を知るとデザインはもっと面白くなります。
今回のブログでも、その面白さを共有できれば嬉しい限りです(・∀・)

最後に。
今回ご紹介した工程は、過去の実績でご紹介できない案件に似せて、
雰囲気を再現して紹介してみました。
上のWEBサイトとよく似たサイトを見かけたら、ニヤリとしてください(`・ω・´)ノシッ

Comments

comments