注目の記事 PICK UP!

Photoshopでオープニング動画を作る方法

Photoshopで動画作成編集

最近、YOUTUBEで動画を配信しているユーチューバーの中にも、サムネイル画像や動画のオープニングが「お!プロっぽい!」と思うような配信者が増えました。
内容を見てガッカリすることは相変わらずですが。。。(コラッ

動画編集ソフトを使えば派手な演出は可能ですが、演出に必要な画像を加工する際にPhotoshopと連携したりしますよね。
大した手間ではないものの意外と面倒になってくる動画編集ソフトとPhotoshopの連携。

そこで今回はPhotoshopだけで簡単なオープニング動画を作る方法をシェアします。

こんな時にオススメ

  1. Photoshopはあるけど動画編集ソフトがない時
  2. 画像加工を頻繁にしなければならないような動画を作る時
  3. 派手な演出が必要ない動画を作る時

Photoshopでオープニング動画を作る前に準備したもの

  1. PhotoshopCC
  2. 時計画像
    時計画像
  3. ロゴ画像
    ロゴ
  4. BGM:「Acoustic」Track2
    作曲: yuma nakamura(ユウマ ナカムラ)
    フリーBGM DOVA-SYNDROME
  5. エンディングBGM:「AS_BMG」
    作曲:Jianteng (ジアンティン)
    フリーBGM DOVA-SYNDROME
  6. 効果音1:飛行機上空通過1(上空10m)
    効果音ラボ
  7. 効果音2:ロボットの足音1(ロボットアニメのイメージ)
    効果音ラボ
  8. 作業中に甘えてこないように黒ポメと猫をゲージに入れる
  9. ブラックコーヒーときどきアーモンドキャラメルカプチーノ

※注:⑧と⑨を準備するかしないかは自己責任でお願いします。

Photoshopでオープニング動画を作る方法 – 動画解説 –

チュートリアル動画を作りました。かなり大雑把な説明で、尚且つ編集もあまりしていないので無駄に長い動画になっていますので、記事と合わせてご覧いただくと分かりやすいと思います。

Photoshopでオープニング動画を作る方法 – 文章解説 –

それでは、Photoshopでオープニング動画を作る方法を文章解説していきます。

画像の用意

サイズは幅1980pixel、高さ1080pixelで作ります。
あらかじめ用意した「背景レイヤー」、「時計レイヤー」、「ロゴレイヤー」、「テキストレイヤー」を使って解説します。

Photoshopで動画作成

クリックで拡大

タイムラインを表示させる

メニューの「ウィンドウ」から「タイムライン」を選択します。

Photoshopで動画作成

クリックで拡大

ビデオタイムラインを作成

タイムラインが表示されると「ビデオタイムラインを作成」と中央に表示されるのでクリックします。

Photoshopで動画作成

クリックで拡大

効果音を挿入

オーディオトラックの音符の横にある「∨」をクリックします。

Photoshopで動画作成

クリックで拡大

「オーディオの追加」を選択します。
Photoshopで動画作成

クリックで拡大

オーディオトラックの右端にある「+」を押すと、同じようにオーディオのファイル選択メニューが表示されます。
Photoshopで動画作成

クリックで拡大

効果音ファイルの選択

あらかじめ用意した効果音ファイル「airliner-pass1.mp3」を選択します。

Photoshopで動画作成

クリックで拡大

効果音の微調整

元の効果音ファイルがイメージしているものよりも長いので、イメージに合うように音を何度か聴きながら微調整(クリップのトリミング)をします。
今回は、ファイルの前後を短くしました。
まず、効果音ファイルの先頭をクリックしながら、再生を開始したい音の箇所まで縮めていきます。
次に、効果音ファイルの終了部分をクリックしながら、再生を終了したい音の箇所まで縮めていきます。
[編集前の効果音ファイルは長い]

Photoshopで動画作成

クリックで拡大

[編集後の効果音ファイルは短くなりました]
Photoshopで動画作成

クリックで拡大

ファイル微調整の操作方法は動画で見ていただいたほうが分かりやすいと思います。

効果音ファイルの追加

調整した効果音ファイルの後に、別の効果音ファイルを追加します。

Photoshopで動画作成

クリックで拡大

ロゴ画像を効果音の動きに合わせる

今回は時計画像にロゴ画像が着陸するようなイメージのオープニング動画を作りたいので、効果音に合うように画像に動きをつけます。
まず「ロゴレイヤー」を選択します。

Photoshopで動画作成

クリックで拡大

次にタイムラインの「ロゴ」の「>」をクリックします。

Photoshopで動画作成

クリックで拡大

するとメニューが表示されます。

Photoshopで動画作成

クリックで拡大

「位置」のPhotoshopで動画作成をクリックします。
これでキーフレームを追加することが出来ます。

Photoshopで動画作成

クリックで拡大

まずは動画の先頭にキーフレームを追加して、「ロゴレイヤー」を画面外まで移動します。

Photoshopで動画作成

クリックで拡大

次に効果音ファイル「airliner-pass1.mp3」と「robot-footstep1.mp3」の間にスライダーをスライドし、「ロゴレイヤー」を「時計レイヤー」に着地したように見えるところまで移動します。

Photoshopで動画作成

クリックで拡大

その後、少しバウンドしたように見えるように「ロゴレイヤー」を移動させると、自動的にキーフレームが追加されます。

Photoshopで動画作成

クリックで拡大

テキストレイヤーを効果音の動きに合わせる

「トレンドガジェットアンテナチャンネル」と書かれた「テキストレイヤー」も「ロゴレイヤー」の着地に合わせてバウンドするようにキーフレームを追加します。
テキストのままだとキーフレームの追加ができないので「ラスタライズ」してからキーフレームを追加します。

Photoshopで動画作成

クリックで拡大

保存

完成したら「ファイル(F)」「書き出し(E)」の「ビデオをレンダリング」をクリックします。

Photoshopで動画作成

クリックで拡大

「レンダリング」をクリックして保存します。

Photoshopで動画作成

クリックで拡大

以上で完成です。

雑記

先日購入したゲーミングマウスのレビューを記事にしようと思ったのですが、どうしても動画のほうが分かりやすい部分等があり、「動画作ろう!」と思い立ました。
ですが、その動画を作るにあたり、「オープニングをちょっとカッコよくしたいなぁ」なんてことを考えていたら、実験的にPhotoshopで動画を作ることを思いつき、今回の記事&動画となりました。

今回のチュートリアル動画は、オープニング部分はPhotoshopで作り、それ以外は動画編集ソフトで作りました。
いっその事全部Photoshopで動画を作ってみればよかったと今思いました(笑)

画像だけの動画や5分程度の動画であれば、Photoshopにある程度慣れている方ならPhotoshopだけで作ったほうが効率はいいかもしれないですね。
また今度、長めの動画もPhotoshopで作って検証してみます。

この記事が気に入ったら
いいね!してくださるとうれしいです(^▽^)

Twitter で

関連記事

  1. Photoshopでシネマグラフ!思わず見入ってしまう参考画像編

  2. Adobe CC

    Adobe CCを学生価格で使いたかったので通信教育に申し込んでみた【通信教育比較】

  3. Photoshopでシネマグラフを作ろう!Photoshop初心者でも簡単!

  4. ポケモンGOポケボールオリジナルPhotoshop

    Photoshopチュートリアル動画チャンネル4選

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

ピックアップ記事

  1. ソニーモバイルコミュニケーションズ Xperia XZの発売日 auは11月2日発売予定!
  2. 妖怪大辞典 妖怪ウォッチクイズRPG『妖怪大辞典』iOS/Androidアプリの配信が延期に…
  3. ナイト・マネージャー Amazon独占配信ドラマ 『ナイト・マネージャー(THE NIGHT MANAGER)』Amazon独占配…
  4. 過去最悪の赤字経営中の大塚家具がSTAR WARSだらけに!
  5. Osmo Mobile Silver購入 『DJI Osmo Mobile Silver(3軸手持ちジンバル)』 新機能「…
  6. 自動運転システムがどこまで進化しているかがわかる動画
  7. WordPress4.72 脆弱性 WordPress(ワードプレス)脆弱性対策のためにWordPress4.72へ…
  8. 2016年から始める初心者向け1万円以下の格安人気ドローン
  9. ウルトラマンオーブ THE ORIGIN SAGA Amazonオリジナル「ウルトラマンオーブ THE ORIGIN SAGA」配信…
  10. Razer Project Valerie ゲーミングノートPCだが、むしろ株やFXのトレード用としても良さそうな3画面4K…

人気記事

  1. XperiaXZカバー
  2. Xperia XZ Premium
  3. XperiaXZハイレゾダウンロードアプリmore
  4. USB type-CアダプタとXperiaXZ充電器
  5. ユーチューブ スーパーチャット
  6. Google検索
  7. XperiaXZとXperiaZ2スペック比較
  8. PS4おすすめソフト一覧
  9. ワイドナショー島田秀平運勢占い
  10. Twitter 固定表示やり方解除
  11. YOUTUBE SUPER CHAT
  12. Xperia ZX
  13. amazon go アマゾンゴー
  14. バリスタアイ レビュー
  15. セブンイレブン限定キャンペーン

GadgetJet Twitter

GadgetJet Google+

PAGE TOP