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

今回作成したGIFはこちら。

【使用した素材】 今回、画像素材は用いなかった。  

【作成手順】 １．「ファイル」「新規作成」でキャンパスを作成する。今回は200px * 200px　とした。

２．楕円形選択ツールで適当な位置に円を描いた。このとき「Shift」を押しながら正円を描いた。 ※作業がしやすいようにグリッドを引いてある。

３．「塗りつぶしツール」で任意の色で塗りつぶす。

４．現在のレイヤーをコピーし、「移動ツール(v)」で円形の反対側に配置する。

５．作成したレイヤー２つを「下のレイヤーと結合」で結合する。

６．結合が完了した。  

７．レイヤーを３回コピーする。

８．「移動ツール(v)」でレイヤーの端をクリックして回転させる。「Shift」を押しながら回転するときれいに配置できる。

９．同様に次のレイヤーを回転させる。

１０．さらに次のレイヤーを移動させる。

１１．全てのレイヤーを「表示レイヤーを結合」で結合する。

１２．レイヤーを右クリックし、「レイヤー効果」を選択する。

１３．「グラデーションオーバーレイ」を選択し、「グラデーション」の項目をクリックする。

１４．「描画色から透明に」を選択し、「OK」をクリックする。

１５．それらしいものができた。後は回転させるだけである。

１６．レイヤーを７回コピーする。

１７，一番下のレイヤーを選択し、「レイヤー効果」「グラデーションオーバーレイ」の「角度」を「0°」にし「OK」を選択する。 上のレイヤーを順々に選択し、残りの７枚のレイヤーそれぞれの「角度」を45,90,135,180,225,270,315,360にする。

１８．一番下のレイヤー以外を「非表示」にする。※目玉のマークをなくす。

１９．「ウィンドウ」「アニメーション」を選択する。

２０．アニメーションウィンドウが表示される。アニメーションウィンドウのフレームをコピーする。

２１．コピーしたフレームを選択し、表示するレイヤーを下から２番めにする。

２２．またフレームをコピーし、今度は３番目のレイヤーが表示になるようにする。

２３．８フレーム分それを繰り返す。

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

２５．「GIF」を選択し、「保存」をクリックする。

２６．完成

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