タイ研修いってきました

思わず見とれるバナー「シネマグラフ」の作り方! Photoshopチュートリアル!

  • このエントリーをはてなブックマークに追加
cinemagraph_01

こんにちは、レジットの小沢です。 今回は以前にもご紹介した、シネマグラフの制作方法をご紹介します。

 

cinemagraph02_01_02

 

シネマグラフとは、簡単に言うと写真の一部だけを動かし、不思議な世界観を演出することです。バナーとしてWEB上にアップすれば、オシャレなアクセントになる事間違いなしです!
それでは、制作方法はいたって簡単ですので、以下より制作方法を順良くご説明します。

 

素材集め

まず、シネマグラフを制作するには動画が必要になります。

撮影する場合は下記の点に気をつけて撮影すると、良い動画素材となるでしょう。

 

自分で動画撮影する際のポイント

・動かしたい場所以外は静止画のように固定させる!

できる限りカメラの位置自体をずらしたりしないようにしましょう。

・エンドレスに続けられるように繋がりを意識しましょう。

 

無料の動画サイトから用意する場合

Mazwai

cinemagraph02_02_02A

 

Mazwaiは、溜息が出るほど美しいショートムービーを無料でダウンロードできるサイトです。丁寧に撮影&編集されたその一本一本は、どれも素材で済ますのはもったないくらい見事なクオリティとなっています。

・商用利用可
・ライセンスは下記を表記すれば使用可能


All the videos downloadable on Mazwai are under the Attribution license (CC BY 3.0).

 

動画のトリミング

素材の用意が完了しましたら、次は使用したい部分の動画をトリミングしましょう。

今回は,Quick Time Playerを使用します。

cinemagraph02_03

(編集 > トリム)


より繰り返したい部分のみを選択し、保存しましょう。

 

Photoshopで簡単制作!

①Photoshopを起動し画像を読み込みましょう。

cinemagraph02_04A.①png ファイル

読み込み > ビデオフレームからレイヤー…   この際に、フレームアニメーションを制作にチェックを入れましょう。

 

cinemagraph02_04B①

各フレームが独立したレイヤーに表示されました。

 

②一番下にあるレイヤー以外を選択し,グループ化しましょう。(command+G)   ③動かしたい部分のみにマスクを適用しましょう!

cinemagraph02_04C③

ここからがシネマグラフの完成度を決める大きなポイントとなります。


今回は、馬の顔部分のみにマスクを適用したいと思います。

 

④タイムラインパネルを表示する。

メインメニュー>ウィンドウ>タイムラインパネルにチェック

各フレームはマスクした部分のみ表示されている状態となっています。   ⑤各フレームに全体を表示する

一番下のレイヤーを選択し、レイヤーパレットのレイヤーの表示/非表示の統一ボタンをクリックしましょう。

ダイヤログが表示されるので統一を選択。タイムラインパネル全体に適用されます。

cinemagraph02_04D⑤

⑥開始と終わりを繋がるようにする

タイムラインウィンドウ上より全てのフレームを選択します。

選択後フレームをコピーします。

cinemagraph02_04E⑥

コピー完了後、同じメニュー欄からフレームをペーストを選択。

選択範囲の後に配置を選択しペーストします。

cinemagraph02_04F⑥

ペーストが完了したら、ペーストしたフレームを選択したままで、サイド同じメニュー欄から、フレームの入れ替えを選択します。
こうすることで、先ほどペーストしたフレームが逆再生となり開始と終点の動作が繋がるようになりました。

cinemagraph02_04F⑦

フレームの入れ替えを行ったことで、ループが完成しました。   ⑦リアルな動作に見せるために、アニメーション速度を変更する。

cinemagraph02_04G⑦

今回はより滑らかに見せるために(0.1)に変更します。

それではいよいよ、最後の仕上げへと近づいてきました。   ⑧エフェクトを追加する

動作の設定は先ほどで完了いたしましたが、さらに雰囲気を作るためにエフェクトを追加しましょう。

レイヤー > 新規調整レイヤー > カラーパレット を選択し、階調ごとの色味を変更しましょう。エフェクトに関しましては、お好みで自由な表現をして頂ければと思います!

cinemagraph02_04H⑧

⑨ファイルのサイズを変更する

シネマグラフは、ファイルサイズが大きくなりがちですので、実際のドキュメントサイズを変更し、ファイルサイズの増加を防ぎましょう。

メインメニュー > イメージ > 画像解像度

cinemagraph02_04I⑨

⑩保存する

最後に、メインメニュー > ファイル > web用に保存を選択し、GIFファイルで保存をしたら完成です。この際に、ループアニーメションを無限にするのをお忘れなく。

 

完成

cinemagraph02_05A

いかがでしたでしょうか?

手順を覚えると実はものすごく簡単に不思議な世界が制作できます。

アイディア次第では、とても面白い視覚効果が制作できるはずです!

今後様々な場面に積極的に取り入れ、一味もふた味も違うサイト制作をしてみては如何でしょう。

 

All the videos downloadable on Mazwai are under the Attribution license (CC BY 3.0).     【おまけ】

cinemagraph02_05B cinemagraph02_05C cinemagraph02_05D cinemagraph02_05E    

この記事を書いた人

小沢 博之webディレクター/アートディレクター

カメラマン→グラフィックデザイナー→アパレルメーカーのプレスを経て現在。なぜか調理師免許と古物商の免許がある。趣味はバンド。そろそろSK8復帰を果たそうと画策中だが筋トレ&ダイエットが続かない。

ネットショップ運営ネットショップ運営

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。