今回はphotoshopを使い5分でローディングGIFを作成する。そう、画像読み込み中のくるくるする、あれである。ローディング画像を生成するジェネレーターなどのWEBサービスは改めてご紹介する。今回は可能な限り簡易で応用が聞くような解説になれば幸いである。WEBサービスのイメージを特徴つけるローディング中のグルグルで遊んでみてはいかがだろうか。
今回作成したGIFはこちら。

【使用した素材】 今回、画像素材は用いなかった。
【作成手順】 1.「ファイル」「新規作成」でキャンパスを作成する。今回は200px * 200px とした。
2.楕円形選択ツールで適当な位置に円を描いた。このとき「Shift」を押しながら正円を描いた。 ※作業がしやすいようにグリッドを引いてある。
4.現在のレイヤーをコピーし、「移動ツール(v)」で円形の反対側に配置する。
5.作成したレイヤー2つを「下のレイヤーと結合」で結合する。
8.「移動ツール(v)」でレイヤーの端をクリックして回転させる。「Shift」を押しながら回転するときれいに配置できる。
13.「グラデーションオーバーレイ」を選択し、「グラデーション」の項目をクリックする。
14.「描画色から透明に」を選択し、「OK」をクリックする。
17,一番下のレイヤーを選択し、「レイヤー効果」「グラデーションオーバーレイ」の「角度」を「0°」にし「OK」を選択する。 上のレイヤーを順々に選択し、残りの7枚のレイヤーそれぞれの「角度」を45,90,135,180,225,270,315,360にする。
18.一番下のレイヤー以外を「非表示」にする。※目玉のマークをなくす。
19.「ウィンドウ」「アニメーション」を選択する。
20.アニメーションウィンドウが表示される。アニメーションウィンドウのフレームをコピーする。
21.コピーしたフレームを選択し、表示するレイヤーを下から2番めにする。
22.またフレームをコピーし、今度は3番目のレイヤーが表示になるようにする。
24.「ファイル」「Webおよびデバイス用に保存」を選択する。
26.完成

いかがだったろうか?ローディング画像はそのWEBサイトやサービスのキャラクターを色づけるものである。ぜひ独自のローディング画像を作成してみてはいかがだろうか。次回はローディング画像本来の目的である「ロード中にイライラさせない」を根本から覆す、いらいらさせるローディングGIFを作成する。ぜひお待ちいただきたい。
