タグ別アーカイブ: バナー

コーヒー

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

沖縄おとく記事

そうだ、沖縄行こう。【gifアニメの作り方】

執筆:Daily GIF89a編集部ktaro

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

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

・空にモノをなじませる方法を理解することができる。

 

台風が通過した。この、じめじめした暑さを台風が吹き飛ばしてくれる事を願いたい。

 

今回制作したGIFアニメ

沖縄おとく記事ver.1.1

 

 

使用した素材

PAK93_katahijidadon20140322500-thumb-600x931-5027

http://www.pakutaso.com/20140703190post-4334.html

今回の人物画像は、PAKUTASO様のフリー素材を用いて、Photoshopチュートリアルを執筆する。

yun_3057

http://www.yunphoto.net/jp/photobase/hr/hr3057.html

 

制作手順

1まず、使いたい、素材を切り取ります。

20035 class=

2新規作成する。広告バナーなので、正角形が望ましい。

20036 class=

3背景を配置する。

20037 class=

4手順1で切り取った、素材を配置する。

20038 class=

5背景を複製して、配置したレイヤーよりも上くるように置く

20039 class=

6複製した背景の上から消しゴムをかけ、素材を浮かび上がらせよう。(※複製した背景の透明度を下げると作業しやすい。)

20040 class=

7動かすパーツが完成したら、タイムラインを開き、整える。

20041 class=

8「web用に保存」で拡張子をGIFにして保存

 

完成したGIFアニメ

沖縄おとく記事ver.1.1

 

制作を終えて

制作して、自分自身よりいっそう沖縄にいってみたいと思った。そして、記事を読んだ人も同じ気持ちになってくれたら嬉しい。

それでは。

執筆:Daily GIF89a編集部(ktaro)

 

【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

chatch

「つながらないNO.1へ・・」広告バナーGIFをつくろう。【GIFアニメ制作】

執筆:Daily GIF89a編集部(ktaro)

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

・作業時間10ほどで、photoshop等の、フォトレタッチツールを用いてGIFアニメを作ることができる。

・動く広告バナーのつくりかたを理解することができる。

 

7月に突入した。日没もそろそろ午後7時台に突入したのではないか?夏がどんどん近づく。そういえば、今年の4月ごろは、ちまたで今年は冷夏になると騒いでいたが、一体、その予報はどこに消えたのか?普通に暑い。

さて今回は、広告バナーGIFをつくる為の記事である。

今回制作したGIFアニメ

つながらないバンド

みんな、近所の至る所にようじを刺そう。

 

使用した素材

normal_elk1

引用元URL:http://www.adigitaldreamer.com/gallery/displayimage.php?album=3&pid=937#top_display_media

雄々しく猛々しいツノが、いかにも電波ビンビンにみえるという理由から鹿をチョイスした。

制作手順

1新規作成する。

2文章を書こう!文字の大きさを使い分けると、バナーっぽく仕上がる。

3新しくレイヤーを作り、動かす画像を配置しよう(私の場合は鹿にした。)

4先ほど配置したレイヤー(素材画像)を複製。次に、少しずらして配置しよう。

5複製してずらした画像を、レイヤーマスクで効果をつける。背景が黒いのでシルバーにした。

6タイムラインを開く

スクリーンショット_2014-07-07_20_18_30

7複製したレイヤー→元の画像、それぞれ表示されているタイムラインを二枚作ろう。

8トゥィーンパネルを表示させる。

20007

9トゥィーンを「次のフレーム」にして、追加するフレームを「5」にして→OK

10トゥイーンを使うと、二つのフレームの間の動作を補完してくれる。この機能を使い好きなだけフレームを足してしまおう。

11最終的に、「最後のフレーム」を選択→OKをクリックで、タイムライン作業を終えるとアニメーションが円滑な動きに見える。

12タイムラインが完成したら、「ファイル」→「WEB用に保存」をクリック。拡張子をGIFに選択して保存

完成したGIFアニメ

つながらないバンド

 

制作を終えて

みなさん、つまようじを電波が悪い所にさす活動をひとつよろしくお願いしたい。ようじバンド

 

執筆:Daily GIF89a編集部(ktaro)

 

【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