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

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

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

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

今回制作したGIFアニメ

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

使用した素材

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

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

制作手順

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

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

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

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

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

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

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

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

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

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

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

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

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

１３−２．「雷2」レイヤーと「雷4」レイヤーに「垂直方向に反転」をかける。

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

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

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

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

１７．フレーム１は「雲レイヤー」のみを表示する。

１８．フレーム２は任意の雷レイヤーを表示する。

１９．フレーム３は「白画面」レイヤーを表示する。

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

２１．フレーム５は、任意の雷レイヤーの不透明度を「0%」にする。

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

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

２４．保存形式を「GIF」にして、「保存」をクリックする。

完成したGIFアニメ

制作を終えて

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

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