雷

Photoshopで稲妻・雷を超簡単に作る方法。【GIFアニメの作り方。】

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

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

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

・写真素材を使わずPhotoshopの機能だけで「落雷の様子」を表現する。

 

今回制作したGIFアニメ

雷の表現

フィルターの「雲模様2」、そして色調補正の「レベル補正」を用いて非常に簡単に雷を表現できる。

 

使用した素材

雲_小

PAKUTASO/ぱくたそ 様(フリー写真素材)

引用元URL:http://www.pakutaso.com/20140125023post-3740.html

 

制作手順

1.雲画像を読み込み、「雲レイヤー」と名前を変更した

10103 class=

2,雲から雷が落ちるようにするため、「編集」「変形」「垂直方向に反転」を選択する。

10104 class=

3.新規レイヤーを作り、「雷1」と名前を変更する。

10105 class=

4.「グラデーションツール」を選択して、「黒から白」にグラデーションするようにする。

10106 class=

5.左から右にグラデーションをかけた。

10107 class=

6.「フィルター」「描画」「雲模様2」を選択する。

10108 class=

7.「イメージ」「色調補正」「レベル補正」を選択する。

10109 class=

8.チャンネルの「入力レベル」の黒、灰色、白のスライダーを任意に動かして雷のような描写を作る。

10110 class=

9.「イメージ」「色調補正」「階調の反転」を選択する。

10111 class=

10.レイヤーの描画モードを「スクリーン」に変更する。

10112 class=

11.「イメージ」「色調補正」「色相・彩度」を選択する。

10113 class=

12.「色相」、「彩度」のスライダーを左右に動かして、お好みの雷の色に変更する。「色彩の統一」にチェックを入れる。

10114 class=

13−1.雷のバリエーションを増やすため、完成した「雷1」レイヤーを3回コピーして、「雷2」「雷3」「雷4」と名前を変更する。

10115 class=

13−2.「雷2」レイヤーと「雷4」レイヤーに「垂直方向に反転」をかける。

10116 class=

13−3.「雷3」レイヤーと「雷4」レイヤーに「水平方向に反転」をかける。

10117 class=

14.4つのレイヤーがバラバラな雷を表現している。

10118 class=

15.雷が落ちた時の光を表現するため、レイヤーを新規作成し、「白画面」と名前を変更した。

10119 class=

16.「塗りつぶしツール」を選択し、描画色を白にして、レイヤーを塗りつぶす

10120 class=

17.フレーム1は「雲レイヤー」のみを表示する。

10121 class=

18.フレーム2は任意の雷レイヤーを表示する。

10122 class=

19.フレーム3は「白画面」レイヤーを表示する。

10123 class=

20.フレーム4は、雷が消える様子を表現するため任意の雷レイヤーの不透明度を「60%」にする。

10124 class=

21.フレーム5は、任意の雷レイヤーの不透明度を「0%」にする。

10126 class=

22.今回制作した例では、雷の数とタイミングを調整し、20フレーム分のアニメーションとなった。

10128 class=

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

10129

24.保存形式を「GIF」にして、「保存」をクリックする。

10130

完成したGIFアニメ

雷の表現

 

制作を終えて

今回は、雷の画像素材を用いずに、Photoshopの機能のみで雷のGIFアニメーションを制作した。非常に短時間で制作できるので、是非挑戦してみていただきたい。

 

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