注目の記事 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. Photoshopでシネマグラフを作ろう!Photoshop初心者でも簡単!

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

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

コメント

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

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

ピックアップ記事

  1. 長時間のスマホゲームに最適なガジェット!スマホ用クーラーと発熱を抑えるアプリ
  2. ワイドナショー島田秀平運勢占い 今年の自分の運勢を無料で簡単に占う方法 – 「ワイドナショー」で島田…
  3. ロジクールゲーミングマウス Logicool ロジクール ゲーミングマウス チューナブル G502 RGBを…
  4. Razer Project Valerie ゲーミングノートPCだが、むしろ株やFXのトレード用としても良さそうな3画面4K…
  5. XperiaXZハイレゾダウンロードアプリmore Xperia XZでハイレゾ音源を聴き比べてみた
  6. 英語アプリ 楽しみながら英語を学べるおすすめスマホゲームアプリ5選
  7. Twitter 固定表示やり方解除 Twitterで自分のツイートを固定表示するやり方・外し方
  8. ワンオクとアヴィリル ONE OK ROCKのアルバム『Ambitions』海外盤にある「Americ…
  9. A.I. ARTIFICIAL-INTELLIGENCE映画ネタバレ感想 A.I. Artificial Intelligence (字幕版)を久しぶりに…
  10. ソフトバンク スターウォーズTシャツ ユニクロ 【当選詐欺?!】『ソフトバンク限定Tシャツ「スター・ウォーズ UT」当たる!キャ…

人気記事

  1. XperiaXZカバー
  2. Xperia XZ Premium
  3. USB type-CアダプタとXperiaXZ充電器
  4. XperiaXZハイレゾダウンロードアプリmore
  5. ユーチューブ スーパーチャット
  6. Google検索
  7. PS4おすすめソフト一覧
  8. XperiaXZとXperiaZ2スペック比較
  9. ワイドナショー島田秀平運勢占い
  10. Xperia ZX
  11. セブンイレブン限定キャンペーン
  12. バリスタアイ レビュー
  13. amazon go アマゾンゴー
  14. XperiaXZハイレゾダウンロードアプリmore
  15. 機動戦士ガンダム THE ORIGIN Ⅳ 運命の前夜

GadgetJet Twitter

GadgetJet Google+

PAGE TOP