PhotoshopでつくるGIFアニメバナー 第2回:動画を読み込んでGIFアニメバナーをつくろう

Creative Cloud

Dreamweaver入門

Photoshop CC(2014年06月公開)

前回は、1枚のクルマの写真をもとに、スピンぼかしとトゥイーン機能を使って躍動感あるGIFアニメバナーをつくりました。今回は、動画ファイルを読み込んで、GIFアニメバナーをつくります。

Photoshop CC の体験版をダウンロード

東京都・秋葉原で、GIFアニメーション(以下、GIFアニメ)好きのための投稿・共有サービス「GIFMAGAZINE」のデザインを担当している大野謙介です。

第1回では、1枚のクルマの写真をもとに、スピンぼかしとトゥイーン機能を使って躍動感あるGIFアニメバナーをつくりました。今回は、動画を読み込んで、GIFアニメバナーをつくります。

GIFアニメを作成したら、ぜひ「GIFMAGAZINE」に投稿してください。また、2014年12月上旬にGIFアニメクリエイターの祭典「the GIFs -Award of GIF Creator-」を開催します。これを機にGIFアニメ制作に挑戦してみてはいかがでしょうか。

本記事で制作するGIFアニメバナー

動画ファイルを読み込んで、Camera Rawフィルター機能を使って画像を修正し、次のような架空の旅行代理店のGIFアニメバナーをつくります。

※オーロラの動画は、素材販売サイト「VideoHive」の「Winterfire Northern Lights V」(有料)を使用しています。記事の内容を試す際は、スマートフォンなどで撮影した動画でも構いません。

下記の手順で制作していきます。

解説の流れ

  1. Photoshopで動画を読み込む。
  2. Camera Rawフィルター機能で画像を修正する。
  3. テキストやフッターをのせてGIFアニメバナーに仕上げる。

1 Photoshopで動画を読み込む

1-1 動画を読み込む

[ファイル]メニュー→[読み込み]→[ビデオフレームからレイヤー]を選択し、動画を読み込みます。Photoshopでは、mp4やmovなどの動画フォーマットを入力ファイルとして選択できます。今回は、架空の旅行代理店のGIFアニメバナーを想定して、美しいオーロラ風景の動画を読み込みました。

[ビデオをレイヤーに読み込み]ダイアログボックスが開くので、動画プレビュー画面の下のスライダーで読み込む範囲を指定します。[頻度制限]を調整することで、GIFアニメバナーの容量を軽量化することができます。今回は、オーロラの動きが鮮明な部分を選択し、[頻度制限]を5フレームおきに設定しました。

1-2 [タイムライン]パネルでフレームを調整する

[ウィンドウ]メニュー→[タイムライン]を選択し、[タイムライン]パネルを表示させます。

余分なフレームを削除します。[タイムライン]パネルには、フレームの[コピー]や[削除]、2フレーム間を保管してくれる[トゥイーン]、[プレビュー]などのボタンがあります。今回は余分なフレームを[削除]ボタンで消去していきます。

バナーサイズになるよう解像度・カンバスサイズを幅350px、高さ240pxに収まるように調節します。

2 Camera Rawフィルター機能で画像を修正する

2-1 スマートオブジェクトに変換する

オーロラ画像に透明感が無いので、Camera Rawフィルター機能を使って修正します。

※Photoshop CCからは、Camera Raw機能がフィルターとしても使えるようになりました。これにより、レイヤーであれば、それぞれに細かな色温度などの修正ができます。

修正作業を行う前に、修正したいレイヤーを選択した後、右クリックメニューから[スマートオブジェクトに変換]を選択します。スマートオブジェクトに変換しておくことで、何度でも修正・やり直しができるようになります。

2-2 Camera Rawフィルターで透明度を出す

スマートオブジェクトに変換したレイヤーを選び、[フィルター]メニュー→[Camera Rawフィルター]を選択します。

[Camera Raw]ダイアログボックスが開きます。オーロラに透明度を出すために、[色温度]を-30、[明瞭度]を-30に変更し[OK]ボタンを選択します。

スマートオブジェクトにフィルターをかけることができました。これにより、レイヤー自体に加工することなく、修正に強いバナー作成が可能になります。

3 テキストやフッターをのせてGIFアニメバナーに仕上げる

3-1 テキストやフッターを作成する

バナーの最終調整をします。テキストやフッターを作成し、好みの場所に配置します。

3-2 GIFで書き出す

バナーのデザインが完成したら、GIFアニメに書き出します。[ファイル]メニュー→[Web用に保存]を選択します。

保存形式を[GIF]にして、[保存]ボタンをクリックして作業終了です。

今回は、動画を読み込んでGIFアニメバナーを制作しました。スマートフィルターとCamera Rawフィルターをかけることで、修正作業にも強いバナーにすることがポイントです。第3回は、パスぼかしにより、臨場感のあるGIFアニメバナーを制作します。

POSTED ON 2014.08.28