執筆:Daily GIF89a編集部
この記事で理解できること(文章量:3分)
・作業時間15分ほどで、Photoshopを用いてGIFアニメを作ることができる。
・食品など特有の湯気表現でのアニメーションバナー広告制作を理解することができる。
今回制作したGIFアニメ
バナー制作にも生かせるよう、サイズは横336px、縦246pxで制作した。架空のコーヒー店「悟李羅珈琲」極上の珈琲。それにしても湯気が出すぎである。
使用した素材
引用元URL:http://www.pakutaso.com/20121241363post-2284.html
制作手順
1.画像を読み込む
2.新規レイヤーを作成、新しいレイヤーをクリックして選択する。
3.描画モードをスクリーンに変更する。
3−2塗りつぶしツールでレイヤーを白く塗りつぶす
4.レイヤー2に「フィルター」「描画」「雲模様1」を選択する。
5.このように、全体に湯気が発生する。
6.湯気をゆらゆらとした波状変えるため、「フィルター」「変形」「波形」を選択する。
7.スライダーを任意の数値に変更する。各数値は下図を参考にしていただきたい。
8.湯気の範囲をしていするため、「なげわツール」を選択する。
9.コーヒーカップの液面から上部を投げ輪ツールで選択する。
10.レイヤーマスクを選択し、不透明度を80_にし、湯気っぽさを出す。
11.アニメーションさせるため、湯気レイヤーを2回コピーした。名前を湯気1、湯気2、湯気3とした。
12湯気1レイヤーは不透明度80
13.湯気2レイヤーは不透明度0_
14.湯気3レイヤーは不透明度80_
15.「ウィンドウ」「アニメーション」を選択し、アニメーションウィンドウを表示させる。
15−2.フレームのコピーをクリックし、2番めのフレームを選択する。
16.2フレーム目湯気1レイヤーは不透明度を0_にし、フレーム1の湯気1レイヤーから「移動ツール」を用いて、上に移動させる。
17.湯気2レイヤーはまた発生する湯気を表現するため、不透明度を70_にする。
18.湯気3レイヤーはそのまま不透明度を80_にする。湯気が途切れたように見せないためである。
19.トゥイーンボタンを選択する。
20.「前のフレーム」で「5」フレームを追加する。「OK」を選択
21.このように合計7フレームのアニメーションになる。
22.「ファイル」「Webおよびデバイス用に保存」を選択する。
23.保存形式を「GIF」にして保存
24.完成版には、文字を見やすくするため、「イメージ」「色調補正」「色相・彩度」を選択し、「明度」を「-30」にした。
完成したGIFアニメ

制作を終えて
いかがだったろうか。架空の珈琲ショップであるが、その他ブログやWEBサイトに独自のバナーを制作してみてはいかがだろうか。
執筆:Daily GIF89a編集部
【GIFMAGAZINE】http://gifmagazine.net/
GIFアニメ好きのためのGIF作品投稿・共有プラットフォーム
GIFMAGAZINEアプリ版のダウンロードはこちら
iOS:https://itunes.apple.com/ja/app/gifmagazine-animated-gif-magazine/id734489230?l=ja&mt=8
Android:https://play.google.com/store/apps/details?id=jp.createbox.gifmagazine