PhotoshopでつくるGIFアニメバナー 第3回：パスぼかしで臨場感のあるGIFアニメバナーをつくろう
Photoshop CC（2014年06月公開）
前回は、動画ファイルを読み込んで、GIFアニメバナーをつくりました。今回は、「パスぼかし」機能を使ってコーヒーの湯気を表現し、臨場感のあるGIFアニメバナーをつくります。
東京都・秋葉原で、GIFアニメーション（以下、GIFアニメ）好きのための投稿・共有サービス「GIFMAGAZINE」のデザインを担当している大野謙介です。
第2回では、動画を読み込んで、GIFアニメバナーをつくりました。今回は、「パスぼかし」機能を使ってコーヒーの写真に湯気を表現し、臨場感のあるGIFアニメバナーをつくります。
GIFアニメを作成したら、ぜひ「GIFMAGAZINE」に投稿してください。また、2014年12月上旬にGIFアニメクリエイターの祭典「the GIFs -Award of GIF Creator-」を開催します。これを機にGIFアニメ制作に挑戦してみてはいかがでしょうか。
本記事で制作するGIFアニメバナー
1枚のコーヒーの写真をもとに、パスぼかしとトゥイーン機能を使って湯気を表現し、次のような臨場感あるGIFアニメバナーをつくります。
※コーヒーの写真は、フリー写真素材サイト「PAKUTASO（ぱくたそ）」の「ティータイム」を使用しています。PAKUTASOサイトから入手してください。
下記の手順で制作していきます。
解説の流れ
- パスぼかしで臨場感ある湯気を表現する。
- トゥイーン機能でフレーム間を補完する。
- 文字、フッターをのせてGIFアニメバナーに仕上げる。
1 パスぼかしで臨場感ある湯気を表現する
1-1 新規ファイルを作成し、写真を読み込む
［ファイル］メニュー→［新規］を選択し、幅350px、高さ240pxで新規ファイルを作成します。［ファイル］メニュー→［埋め込みを配置］あるいは［リンクを配置］を選択し、コーヒーの写真を読み込みます。読み込み後は、適当なサイズと位置に調整し、レイヤー名を「コーヒー」と変更します。
1-2 湯気のもととなるオブジェクトを描く
新規レイヤーを作成してレイヤー名を「湯気1」とし、［ブラシツール］などを選び、コーヒーカップの上側にフリーハンドで湯気をイメージしたオブジェクトを描きます。
1-3 パスぼかしで湯気に仕上げる
［フィルター］メニュー→［ぼかしギャラリー］→［パスぼかし］を選択します。
［パスぼかし］では、白丸ポイント、青い線、赤い線からなるパスが表示され、このパスに沿ってぼかしがかかります。青い線上をクリックすると白丸ポイントを増やすことができます。また、赤い線は［ぼかしシェイプ］と呼ばれるもので、ドラッグしてパスの方向やカーブなどを調整することができます。パスを編集して、ゆらゆらと揺れているようなパスを描きます。
さらに、惰性で上に流れていく様子を表現するために、［ぼかしツール］パネルで［速度］を300%、［終了点の速度］を30pxにします。［速度］はぼかしの強さを、［終了点の速度］はボケ足の長さを設定するものです。
湯気っぽい表現となりました。
続いて、「湯気1」レイヤーの［不透明度］を20%にして、レイヤーを２回コピーして「湯気2」「湯気3」と名前を変更します。この複製したレイヤーを動かして、湯気が立ち上る様子を表現します。
2 トゥイーン機能でフレーム間を補完する
2-1 ［タイムライン］パネルを開き、フレームをコピーする
［ウィンドウ］メニュー→［タイムライン］を選択します。［タイムライン］パネルが開き、タイムラインの形式を選ぶボタンが表示されているので、［フレームアニメーションを作成］を選んでクリックします。
［タイムライン］パネルでフレームをコピーをします。そして、フレーム２の「湯気2」レイヤーと「湯気3」レイヤーの不透明度や位置を変更して、湯気が立ち上る様子を表現します。
「湯気2」レイヤーは［不透明度］を10%にして、［移動ツール］でわずかに上に移動します。
「湯気3」レイヤーは［不透明度］を5%にして、［移動ツール］で湯気の上側が画面外になるように移動します。
2-2 トゥイーンでフレーム間を補完する
フレーム1とフレーム2の間のフレームを補完するために、フレーム２を選択した状態で、［タイムラインパネル］の［トゥイーン］ボタンをクリックします。
［トゥイーン］ダイアログボックスが開くので、［追加するフレーム］を3にして、［パラメーター］の［位置］と［不透明度］にチェックが入っていることを確認し、［OK］ボタンをクリックします。
湯気がゆったりと立ち上る臨場感あるGIFアニメができました。
3 テキストやフッターをのせてGIFアニメバナーに仕上げる
3-1 テキストやフッターを作成する
バナーの最終調整をします。テキストやフッターを作成し、好みの場所に配置します。
3-2 GIFで書き出す
バナーのデザインが完成したら、GIFアニメに書き出します。［ファイル］メニュー→［Web用に保存］を選択します。
保存形式を［GIF］にして、［保存］ボタンをクリックして作業終了です。
3回にわたってPhotoshopの色々な機能を使って、GIFアニメを制作する方法を解説してきました。第1回でも述べましたが、GIFアニメを制作する上で、シネマグラフやコマ撮りなど様々な表現が存在します。
今回はPhotoshopを用いましたが、After EffectsやPremiereでもGIFアニメをつくることはできます。来る2014年12月、GIFアニメクリエイターの祭典「the GIFs -Award of GIF Creator-」が開催されます。ぜひ挑戦してみてくださいね。