PhotoshopでつくるGIFアニメバナー 第3回:パスぼかしで臨場感のあるGIFアニメバナーをつくろう

by 大野 謙介

Posted on 09-25-2014

Dreamweaver入門

Photoshop CC(2014年06月公開)

前回は、動画ファイルを読み込んで、GIFアニメバナーをつくりました。今回は、「パスぼかし」機能を使ってコーヒーの湯気を表現し、臨場感のあるGIFアニメバナーをつくります。

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

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

第2回では、動画を読み込んで、GIFアニメバナーをつくりました。今回は、「パスぼかし」機能を使ってコーヒーの写真に湯気を表現し、臨場感のあるGIFアニメバナーをつくります。

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

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

1枚のコーヒーの写真をもとに、パスぼかしとトゥイーン機能を使って湯気を表現し、次のような臨場感あるGIFアニメバナーをつくります。

※コーヒーの写真は、フリー写真素材サイト「PAKUTASO(ぱくたそ)」の「ティータイム」を使用しています。PAKUTASOサイトから入手してください。

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

解説の流れ

  1. パスぼかしで臨場感ある湯気を表現する。
  2. トゥイーン機能でフレーム間を補完する。
  3. 文字、フッターをのせてGIFアニメバナーに仕上げる。

1 パスぼかしで臨場感ある湯気を表現する

1-1 新規ファイルを作成し、写真を読み込む

[ファイル]メニュー→[新規]を選択し、幅350px、高さ240pxで新規ファイルを作成します。[ファイル]メニュー→[埋め込みを配置]あるいは[リンクを配置]を選択し、コーヒーの写真を読み込みます。読み込み後は、適当なサイズと位置に調整し、レイヤー名を「コーヒー」と変更します。

1-2 湯気のもととなるオブジェクトを描く

新規レイヤーを作成してレイヤー名を「湯気1」とし、[ブラシツール]などを選び、コーヒーカップの上側にフリーハンドで湯気をイメージしたオブジェクトを描きます。

1-3 パスぼかしで湯気に仕上げる

[フィルター]メニュー→[ぼかしギャラリー]→[パスぼかし]を選択します。

[パスぼかし]では、白丸ポイント、青い線、赤い線からなるパスが表示され、このパスに沿ってぼかしがかかります。青い線上をクリックすると白丸ポイントを増やすことができます。また、赤い線は[ぼかしシェイプ]と呼ばれるもので、ドラッグしてパスの方向やカーブなどを調整することができます。パスを編集して、ゆらゆらと揺れているようなパスを描きます。

さらに、惰性で上に流れていく様子を表現するために、[ぼかしツール]パネルで[速度]を300%、[終了点の速度]を30pxにします。[速度]はぼかしの強さを、[終了点の速度]はボケ足の長さを設定するものです。

湯気っぽい表現となりました。

続いて、「湯気1」レイヤーの[不透明度]を20%にして、レイヤーを2回コピーして「湯気2」「湯気3」と名前を変更します。この複製したレイヤーを動かして、湯気が立ち上る様子を表現します。

2 トゥイーン機能でフレーム間を補完する

2-1 [タイムライン]パネルを開き、フレームをコピーする

[ウィンドウ]メニュー→[タイムライン]を選択します。[タイムライン]パネルが開き、タイムラインの形式を選ぶボタンが表示されているので、[フレームアニメーションを作成]を選んでクリックします。

[タイムライン]パネルでフレームをコピーをします。そして、フレーム2の「湯気2」レイヤーと「湯気3」レイヤーの不透明度や位置を変更して、湯気が立ち上る様子を表現します。

「湯気2」レイヤーは[不透明度]を10%にして、[移動ツール]でわずかに上に移動します。

「湯気3」レイヤーは[不透明度]を5%にして、[移動ツール]で湯気の上側が画面外になるように移動します。

2-2 トゥイーンでフレーム間を補完する

フレーム1とフレーム2の間のフレームを補完するために、フレーム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-」が開催されます。ぜひ挑戦してみてくださいね。

Topics: クリエイティブ

Products: