イトウ先生のTipsnotePhotoshop CS6だけで作るビデオ・その1

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 10月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Photoshop CS6だけで作るビデオ:その1 】 

新年あけまして、おめでとうございます。
本年もよろしくお願いいたします。

さて、2013年もスタートしましたが、お正月はゆっくり過ごせましたでしょうか?
旅行に出かけた方も少なくないかと思いますが、今年最初のブログは、Photoshopだけで作る、ビデオの作り方を何回かに分けてご紹介していきます。
お正月に取りためた画像を使って、ビデオを作るのも面白いのではないかと思いますので、ぜひチャレンジしてみてください。
PhotoshopのEXTENDED版では、以前からビデオを作成する機能を持っていましたが、CS6になってサウンドデータの取り込みも可能になり、またタイムラインパネル内での操作感も、AfterEffectsやPremiereの操作感をミックスしたような使い勝手になりました。

さっそくやってみよう!

Photoshopでは、通常の静止画からビデオを作成したり、既存のビデオデータに対してPhotoshopで編集をかけることが可能ですが、まずは静止画からビデオを作成する方法をご紹介します。
どのような画像でもかまいませんので、ビデオにしたい画像を開き、ウインドウメニュー→タイムラインパネルを表示しておきます。
タイムラインパネルの「ビデオタイムラインを作成」をクリックすると、レイヤーパネル上で自動的に背景がレイヤー0に変更になり、移動ツールで動かせる状態になり、同時にタイムラインパネルには、そのレイヤー0とオーディオトラックが表示されます。
レイヤー0の左にある▲をクリックすると、位置、不透明度、スタイルのトランスフォームが表示されます。

PSCS6_video1007

まず、何分何秒のビデオにするかを設定するため、レイヤー0のスパン(紫の帯の部分)の右端を右にドラッグし、何分何秒の間、レイヤー0を表示しておきたいかを設定します。

PSCS6_video1010

何も設定していない状態で再生してみましょう。タイムラインパネルの左上にある再生ボタン(▲のボタン)をクリックすると、再生ヘッド(時間軸インジケーター)が右に動き出し、再生が始まります。この段階ではレイヤー0に対して何も設定していないため、何も起きません。

PSCS6_video1011

ビデオを作成する場合は、ビデオの最初はどういう状態からスタートし、最終的に(何分何秒後に)どういう状態にしたいのか?をキーフレームで設定していきます。キーフレームの操作は、AfterEffectsと同じオペレーションで行うことが可能です。今回は20秒後に画像の不透明度がだんだん薄くなる、というビデオを作成してみます。

キーフレームの設定

再生ヘッドを、一番左側に移動しておき、タイムラインパネル内の、不透明度の文字の左にあるストップウォッチのアイコンをクリックします。すると、現在再生ヘッドがある箇所に、菱形のキーフレームが設定され、現在のレイヤー0番の不透明度(今は100%)を記憶し、計測を開始します。

PSCS6_video1012

次に、再生ヘッドを、最終的に不透明度を変更したい時間の箇所まで移動しておき、レイヤーパネルの不透明度で、レイヤー0の不透明度を任意に変更します。すると、タイムラインパネル上で現在再生ヘッドが設定されている箇所に、自動的にキーフレームが設定され、不透明度を記憶します。

PSCS6_video1014

最初にどのようになっていて、最後にどうしたいか?を、このストップウォッチで設定していく、ということを繰り返します。

ビデオへの書き出し

ビデオに書き出す場合は、タイムラインパネルの右上にあるパネルメニューから、ビデオをレンダリングを選択するか、ファイルメニュー→書き出し→ビデオをレンダリングで書き出すことが可能です。
Photoshop CS6では、ビデオの書き出し形式として、H.264、QuickTime、DPX(Digital Picture Exchange。Photoshop CS6では、16bitシーケンスで書き出されます。)の形式で書き出すことが可能です。

PSCS6_video1016

以下は、このブログの手順で作成したH.264ビデオです。20秒で100%だった不透明度が30%になるように作成していますが、20秒かけて画像がだんだん薄くなることで、結果だんだん暗くなるのがわかります。



次回は、このタイムラインパネルの使い方をもう少し詳しくご紹介します。基本的にはAfterEffectsのタイムラインの使い方と同じで、最初がどうなっていて、最後にどうしたいのか?を順次設定していくだけで作成できるようになっています。

 【 Photoshop CS6だけで作るビデオ:その2 】
 【 Photoshop CS6だけで作るビデオ:その3 】

関連講座

Photoshop の使い方を詳しく知りたい方は!
Photoshop CS6 EXTENDED の使い方・基本トレーニングの受講がオススメです!
◆ Photoshop CS6 EXTENDED の使い方・基本トレーニング

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |