カー用品店タイヤボーイ

Photoshopでタイヤを回転させる方法。「止まりすぎてやばいタイヤ」【GIFアニメの作り方】

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

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

・作業時間15ほどで、Photoshopを用いてバナー広告用のGIFアニメを作ることができる。

 

今回制作したGIFアニメ

カー用品店タイヤボーイ

今回は、Photoshopの「ぼかし(放射状)」を活用して、回転するタイヤの疾走感を表現した。もちろんカーライフサポーター「TYREBOY next」は架空のメーカーである。

 

使用した素材

タイヤ

引用元URL:http://www.pakutaso.com/20140254044post-3823.html

 

 

制作手順

0.今回、タイヤの回転のアニメーションのみを解説する。その他コメントは任意で配置をして欲しい。

10131 class=

1.新規作成で幅を336px、高さを246pxに設定し「OK」を選択する。

10132 class=

2.画像素材をドラッグアンドドロップで読み込み、レイヤーの名前を「タイヤ」に変更した。

10133 class=

3.「タイヤ」レイヤーをコピーして「タイヤ回転1」レイヤーをと名前を変更した。

10134 class=

4.「タイヤ回転1」レイヤーのタイヤ部分を「選択ツール」などで選択し、切り取る。

10135 class=

5.綺麗にタイヤ部分を切り取った「タイヤ回転1」レイヤー3回コピーして、「タイヤ回転2」「タイヤ回転3」「タイヤ回転4」と名前を変更する。その後、全てのレイヤーをグループにまとめる。グループ名は「車」とした。

10136 class=

6.「タイヤ回転1~4」のレイヤーを回転させ疾走感をだしていく。

10137 class=

7.「タイヤ回転4」レイヤーは、「ぼかし(放射状)」の量を「80」として「OK」を選択する。

10138 class=

8.「タイヤ回転3」レイヤーは、「ぼかし(放射状)」の量を「60」として「OK」を選択する。

10139 class=

9.「タイヤ回転2」レイヤーは、「ぼかし(放射状)」の量を「40」として「OK」を選択する。

10140 class=

10.「タイヤ回転1」レイヤーは、「ぼかし(放射状)」の量を「10」として「OK」を選択する。

10141 class=

11.「ウィンドウ」「アニメーション」を選択する。

10142 class=

12.フレーム1をコピーする。フレーム1は、車グループをまるごと右に「移動ツール」で移動させる。

10143 class=

13.フレーム2は、車グループをまるごと左に「移動ツール」で移動させる。

10144 class=

14.「トゥイーン」をクリックし、追加するフレームを「3」にして「OK」を選択する。

10145 class=

15.フレーム1を選択し、「タイヤ回転4」レイヤーを表示させる。

10146 class=

16.フレーム2を選択し、「タイヤ回転3」レイヤーを表示させる。

10147 class=

17.フレーム3を選択し、「タイヤ回転2」レイヤーを表示させる。

10148 class=

18.フレーム4を選択し、「タイヤ回転1」レイヤーを表示させる。

10149 class=

19.フレーム5を選択し、「タイヤ」レイヤーをのみを表示させる。

10150 class=

20.今回文字を表示させたりすることで最終的に20フレームのGIFアニメーションとなった。

10151 class=

完成したGIFアニメ

カー用品店タイヤボーイ

 

制作を終えて

今回は、Photoshopのぼかし(放射状)を活用して、回転の躍動感を描写した。TYREBOY nextで今年の冬は安心である。

 

 

執筆: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

コーヒー

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

more

国内外の自主制作映画・アニメ・映像制作やGIF画像・情報を配信する、クリエイターのためのアート系メディア