コーヒー

Photoshopで簡単に湯気を描く。幻の悟李羅珈琲(ゴリラコーヒー)はいずこ。【GIFアニメバナー制作】

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

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

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

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

 

今回制作したGIFアニメ

GORILLAコーヒー

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

 

使用した素材

コーヒー

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

 

制作手順

1.画像を読み込む

10051 class=

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

10052 class=

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

10053 class=

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

10054 class=

4.レイヤー2に「フィルター」「描画」「雲模様1」を選択する。

10055 class=

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

10056 class=

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

10057 class=

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

10058 class=

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

10059 class=

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

10060 class=

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

10061 class=

11.アニメーションさせるため、湯気レイヤーを2回コピーした。名前を湯気1、湯気2、湯気3とした。

10062 class=

12湯気1レイヤーは不透明度80

10063 class=

13.湯気2レイヤーは不透明度0_

10064 class=

14.湯気3レイヤーは不透明度80_

10065 class=

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

10066 class=

15−2.フレームのコピーをクリックし、2番めのフレームを選択する。

10067 class=

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

10068 class=

17.湯気2レイヤーはまた発生する湯気を表現するため、不透明度を70_にする。

10069 class=

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

10070 class=

19.トゥイーンボタンを選択する。

10071 class=

20.「前のフレーム」で「5」フレームを追加する。「OK」を選択

10072 class=

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

10073 class=

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

10074 class=

23.保存形式を「GIF」にして保存

10075 class=

24.完成版には、文字を見やすくするため、「イメージ」「色調補正」「色相・彩度」を選択し、「明度」を「-30」にした。

10076 class=

完成したGIFアニメ

GORILLAコーヒー
訪れてみたいものだ。幻の悟李羅珈琲はいずこ。

 

制作を終えて

いかがだったろうか。架空の珈琲ショップであるが、その他ブログやWEBサイトに独自のバナーを制作してみてはいかがだろうか。

 

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

 

【GIFMAGAZINE】http://gifmagazine.net/

GIFアニメ好きのためのGIF作品投稿・共有プラットフォーム

GIFMAGAZINE_appstore_googleplay

 

GIFMAGAZINEアプリ版のダウンロードはこちら

 

android appstore
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

GIFMAGAZINE