東京のWeb制作会社LIGLIGならできるおもしろいこと。デザインシェアこんにちは、デザイナーの白浜です。今回は当ブログでも何度か登場している、画像の一部のみをアニメーションさせた画像「シネマグラフ」の作り方を紹介したいと思います。写真の一部がちょっとだけ動く、シネマグラフを使ったサイトまとめ2014.07.03パンをくわえて「遅刻遅刻」と騒ぎながら走ると美女と出会えるのか数学的に検証してみた2014.05.23※最後の画像に登場しています※この記事は、2014年8月7日に公開された記事を再編集したものです。動画を準備するシネマグラフの完成度は動画のできにかかっています。主な条件は以下の3つです。カメラが固定されていることシャッターを押すちょっとしたブレでもつなげると気になったりするので、三脚&リモートシャッターなんかがあるといいと思います。ループの繋ぎ目が気になりにくい動きであること髪の毛のふわふわとか水がチョロチョロ流れる動きなど、動きが単純で短い時間でも成立するものが向いています。いった動きはすでによく使われていて、マンネリなのも事実ですね......。アイデアをひねり出すのが一番大変な作業かもしれません。動いてる部分の背景に動きがないこと後で詳しく説明しますが、動画の上に静止画を置いて、動かしたい部分に穴を空けるというのがおおまかな手法なので、動かしたい部分以外にちょっとでも変化があると違和感が生まれます。以上の点を踏まえ、今回は髪の毛ふわふわの動画を作ってみたいと思います。いうことで、その方法を説明します。動画をPhotoshopに取り込む動画ファイルは「ファイル」→「開く」で選択するか、動画ファイルをドロップするだけでも開けます。開くとこのようなタイムラインが表示されます。動画を必要な部分だけにする動画は基本ループさせて使うので、ループしたい部分をカットしたいと思います。タイムライン上にある再生ヘッドを、ループさせたい開始位置まで持っていきます。場所が決まったら右クリックで「クリップを分割」します。動画が分割されました。同様に終了地点もクリップを分割します。動画が分割されたら、不要な部分を選択してdeleteキーで削除します。動画が短くなりました!動画が分割できたら、ループさせたい部分が自然かどうか再生して確認します。長さや再生箇所は後から調整できるので、自然なループになる場所を見つけましょう。静止画を動画の上に貼る作りたいイメージは「朽木~貼り付いた笑顔と揺れ続ける髪~」なので貼り付いた笑顔を字のごとく動画の上に貼り付けたいと思います。再生ヘッドを動かしてベスト「貼り付いた笑顔」を決めたら、Ctrl+Aで全面選択、Ctrl+Cで画面をコピーします。次にCtrl+Shift+Vで同じ位置にペーストをします。ペーストしただけだと、動画のうしろに入ってしまうので、レイヤーの位置をビデオグループの外に移動します。静止画の位置が動画のうしろにあるので、手動でずいずいっと動画の上に持っていきます。あとは静止画の長さを動画の長さと同じに調整します。これで下準備ができました。先に新規ビデオグループを作ってそこにペーストする方法もあります。先にタイムライン上のネガのようなマークをクリック→「新規ビデオグループ」をクリックして新規ビデオグループを作成し、そこに上記と同じ手順でコピーした静止画を貼り付けます。するとこんなかんじに。位置はずれないですが、静止画はやっぱり長いですね......。先ほどと同じように、静止画の部分を動画の長さに合わせて終わりです。手間はそんなに変わらないですが、位置がずれないのでこっちのほうが若干早いですかね?動かしたい部分の静止画に穴をあける次に、静止画の動かしたい部分にマスクで穴をあけます。静止画のレイヤーにレイヤーマスクを追加します。レイヤーマスクが選択されている状態で、黒のブラシで穴をあけたい部分をなぞります。ある程度なぞったら、Ctrlを押した状態でレイヤーマスクをクリック、選択範囲が表示されたらショートカット「Q」を押してクイックマスク編集モードに切り替えてみましょう。マスクがかかっている部分が赤く表示されるので、どこに穴が空いているかわかりやすいです。穴をあけすぎてしまったら、ショートカット「X」で色を白に切り替えてなぞるとマスクが消えます。ここまできたら、一度再生してみましょう。穴をあけた部分が違和感なくアニメーションを繰り返していたら成功です!仕上げあとは仕上げの段階です。画面全体が暗いので調整レイヤーを入れて明るく補正したいと思います。動画も普通のレイヤーと同じように、調整レイヤーをかけることができるので、トーンカーブで全体を明るく補正しました。解像度を変える今回の動画を書き出す前に。動画が読み込んだままのサイズだったので、解像度をブログに適したサイズに替えたいと思います。任意のサイズに変更するだけです。変更する前に以下のアラートが出ますが、変換で大丈夫です。あとは書き出すのみ!!動画を書き出す動画の書き出しは「ファイル」→「Web用に保存」でgifを選択します。ループオプションは「無限」で。書きだしたものがこちら。「朽木~貼り付いた笑顔と揺れ続ける髪~」できました~!(おまけ)Photoshop以外での作り方Photoshop以外での作り方もちょこっとご紹介します。※現在このページは表示できません。http://ameblo.jp/kiserishworld/entry-11872069652.html※ただ、AfterEffectsからは直接gifアニメに変換できないようなので、gifアニメーションとして使うなら一度書きだしたムービーをPhotoshopに読み込んで、上で説明した手順でgifに書き出す必要があります。GIF89ahttp://gif89a.net/cinemagraph-gimp/アプリでの作り方アプリだとFlixelが有名ですかね。自分でDLしてみると、動画を固定して撮影するのがちょっと大変でした。そのあたりは未検証です。動画素材シネマグラフ用の動画は自分で撮るのが一番効率がいいとは思いますが、ハイクオリティで商用OKの動画サイトを見つけたので、ご紹介します。参考:Mazwaihttp://mazwai.com/めちゃめちゃカッコいいムービーがいっぱいです。3.0).ライセンス表記さえすれば、商用で使えるみたいです。こちらの動画を使って1つ作ってみました。元の動画がキレイなのでただループさせただけでもキマりますね!まとめいかがでしたか?シネマグラフって意外と簡単に作れます。無料ツールやアプリでも作れるのでぜひお試しください。使い方次第でサイトをぐっとオシャレに演出できます!それでは、また。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。