PhotoshopでつくるGIFアニメバナー 第2回：動画を読み込んでGIFアニメバナーをつくろう
Photoshop CC（2014年06月公開）
前回は、1枚のクルマの写真をもとに、スピンぼかしとトゥイーン機能を使って躍動感あるGIFアニメバナーをつくりました。今回は、動画ファイルを読み込んで、GIFアニメバナーをつくります。
東京都・秋葉原で、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」（有料）を使用しています。記事の内容を試す際は、スマートフォンなどで撮影した動画でも構いません。
下記の手順で制作していきます。
解説の流れ
- Photoshopで動画を読み込む。
- Camera Rawフィルター機能で画像を修正する。
- テキストやフッターをのせてGIFアニメバナーに仕上げる。
1 Photoshopで動画を読み込む
1-1 動画を読み込む
［ファイル］メニュー→［読み込み］→［ビデオフレームからレイヤー］を選択し、動画を読み込みます。Photoshopでは、mp4やmovなどの動画フォーマットを入力ファイルとして選択できます。今回は、架空の旅行代理店のGIFアニメバナーを想定して、美しいオーロラ風景の動画を読み込みました。
［ビデオをレイヤーに読み込み］ダイアログボックスが開くので、動画プレビュー画面の下のスライダーで読み込む範囲を指定します。［頻度制限］を調整することで、GIFアニメバナーの容量を軽量化することができます。今回は、オーロラの動きが鮮明な部分を選択し、［頻度制限］を5フレームおきに設定しました。
1-2 ［タイムライン］パネルでフレームを調整する
［ウィンドウ］メニュー→［タイムライン］を選択し、［タイムライン］パネルを表示させます。
余分なフレームを削除します。［タイムライン］パネルには、フレームの［コピー］や［削除］、２フレーム間を保管してくれる［トゥイーン］、［プレビュー］などのボタンがあります。今回は余分なフレームを［削除］ボタンで消去していきます。
バナーサイズになるよう解像度・カンバスサイズを幅350px、高さ240pxに収まるように調節します。
２ Camera Rawフィルター機能で画像を修正する
2-1 スマートオブジェクトに変換する
オーロラ画像に透明感が無いので、Camera Rawフィルター機能を使って修正します。
※Photoshop CCからは、Camera Raw機能がフィルターとしても使えるようになりました。これにより、レイヤーであれば、それぞれに細かな色温度などの修正ができます。
修正作業を行う前に、修正したいレイヤーを選択した後、右クリックメニューから［スマートオブジェクトに変換］を選択します。スマートオブジェクトに変換しておくことで、何度でも修正・やり直しができるようになります。
2-2 Camera Rawフィルターで透明度を出す
スマートオブジェクトに変換したレイヤーを選び、［フィルター］メニュー→［Camera Rawフィルター］を選択します。
［Camera Raw］ダイアログボックスが開きます。オーロラに透明度を出すために、［色温度］を-30、［明瞭度］を-30に変更し［OK］ボタンを選択します。
スマートオブジェクトにフィルターをかけることができました。これにより、レイヤー自体に加工することなく、修正に強いバナー作成が可能になります。
３ テキストやフッターをのせてGIFアニメバナーに仕上げる
3-1 テキストやフッターを作成する
バナーの最終調整をします。テキストやフッターを作成し、好みの場所に配置します。
3-2 GIFで書き出す
バナーのデザインが完成したら、GIFアニメに書き出します。［ファイル］メニュー→［Web用に保存］を選択します。
保存形式を［GIF］にして、［保存］ボタンをクリックして作業終了です。
今回は、動画を読み込んでGIFアニメバナーを制作しました。スマートフィルターとCamera Rawフィルターをかけることで、修正作業にも強いバナーにすることがポイントです。第3回は、パスぼかしにより、臨場感のあるGIFアニメバナーを制作します。