執筆：Daily GIF89a編集部(大野謙介)

この記事で理解できること(文章量：3分)

・作業時間１５分ほどで、Photoshopを用いてGIFアニメを作ることができる。

・食品など特有の湯気表現でのアニメーションバナー広告制作を理解することができる。

今回制作したGIFアニメ

バナー制作にも生かせるよう、サイズは横336px、縦246pxで制作した。架空のコーヒー店「悟李羅珈琲」極上の珈琲。それにしても湯気が出すぎである。

使用した素材

引用元URL：http://www.pakutaso.com/20121241363post-2284.html

制作手順

１．画像を読み込む

２．新規レイヤーを作成、新しいレイヤーをクリックして選択する。

３．描画モードをスクリーンに変更する。

３−２塗りつぶしツールでレイヤーを白く塗りつぶす

４．レイヤー２に「フィルター」「描画」「雲模様１」を選択する。

５．このように、全体に湯気が発生する。

６．湯気をゆらゆらとした波状変えるため、「フィルター」「変形」「波形」を選択する。

７．スライダーを任意の数値に変更する。各数値は下図を参考にしていただきたい。

８．湯気の範囲をしていするため、「なげわツール」を選択する。

９．コーヒーカップの液面から上部を投げ輪ツールで選択する。

１０．レイヤーマスクを選択し、不透明度を80_にし、湯気っぽさを出す。

１１．アニメーションさせるため、湯気レイヤーを２回コピーした。名前を湯気１、湯気２、湯気３とした。

１２湯気１レイヤーは不透明度80

１３．湯気２レイヤーは不透明度0_

１４．湯気３レイヤーは不透明度80_

１５．「ウィンドウ」「アニメーション」を選択し、アニメーションウィンドウを表示させる。

１５−２．フレームのコピーをクリックし、２番めのフレームを選択する。

１６．２フレーム目湯気１レイヤーは不透明度を0_にし、フレーム１の湯気１レイヤーから「移動ツール」を用いて、上に移動させる。

１７．湯気２レイヤーはまた発生する湯気を表現するため、不透明度を70_にする。

１８．湯気３レイヤーはそのまま不透明度を80_にする。湯気が途切れたように見せないためである。

１９．トゥイーンボタンを選択する。

２０．「前のフレーム」で「５」フレームを追加する。「OK」を選択

２１．このように合計7フレームのアニメーションになる。

２２．「ファイル」「Webおよびデバイス用に保存」を選択する。

２３．保存形式を「GIF」にして保存

２４．完成版には、文字を見やすくするため、「イメージ」「色調補正」「色相・彩度」を選択し、「明度」を「-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