執筆:Daily GIF89a編集部
この記事で理解できること(文章量:3分)
・作業時間15ほどで、Photoshopを用いてバナー広告用のGIFアニメを作ることができる。
今回制作したGIFアニメ
今回は、Photoshopの「ぼかし(放射状)」を活用して、回転するタイヤの疾走感を表現した。もちろんカーライフサポーター「TYREBOY next」は架空のメーカーである。
使用した素材
引用元URL:http://www.pakutaso.com/20140254044post-3823.html
制作手順
0.今回、タイヤの回転のアニメーションのみを解説する。その他コメントは任意で配置をして欲しい。
1.新規作成で幅を336px、高さを246pxに設定し「OK」を選択する。
2.画像素材をドラッグアンドドロップで読み込み、レイヤーの名前を「タイヤ」に変更した。
3.「タイヤ」レイヤーをコピーして「タイヤ回転1」レイヤーをと名前を変更した。
4.「タイヤ回転1」レイヤーのタイヤ部分を「選択ツール」などで選択し、切り取る。
5.綺麗にタイヤ部分を切り取った「タイヤ回転1」レイヤー3回コピーして、「タイヤ回転2」「タイヤ回転3」「タイヤ回転4」と名前を変更する。その後、全てのレイヤーをグループにまとめる。グループ名は「車」とした。
6.「タイヤ回転1~4」のレイヤーを回転させ疾走感をだしていく。
7.「タイヤ回転4」レイヤーは、「ぼかし(放射状)」の量を「80」として「OK」を選択する。
8.「タイヤ回転3」レイヤーは、「ぼかし(放射状)」の量を「60」として「OK」を選択する。
9.「タイヤ回転2」レイヤーは、「ぼかし(放射状)」の量を「40」として「OK」を選択する。
10.「タイヤ回転1」レイヤーは、「ぼかし(放射状)」の量を「10」として「OK」を選択する。
11.「ウィンドウ」「アニメーション」を選択する。
12.フレーム1をコピーする。フレーム1は、車グループをまるごと右に「移動ツール」で移動させる。
13.フレーム2は、車グループをまるごと左に「移動ツール」で移動させる。
14.「トゥイーン」をクリックし、追加するフレームを「3」にして「OK」を選択する。
15.フレーム1を選択し、「タイヤ回転4」レイヤーを表示させる。
16.フレーム2を選択し、「タイヤ回転3」レイヤーを表示させる。
17.フレーム3を選択し、「タイヤ回転2」レイヤーを表示させる。
18.フレーム4を選択し、「タイヤ回転1」レイヤーを表示させる。
19.フレーム5を選択し、「タイヤ」レイヤーをのみを表示させる。
20.今回文字を表示させたりすることで最終的に20フレームのGIFアニメーションとなった。
完成したGIFアニメ
制作を終えて
今回は、Photoshopのぼかし(放射状)を活用して、回転の躍動感を描写した。TYREBOY nextで今年の冬は安心である。
執筆: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