今回はphotoshopを使い５分でローディングGIFを作成する。ローディングGIFとは画像の読込時間での離脱を防ぐ。UXを研究しつくした先人の知恵である。グルグル回る画像を見るだけで数秒の時を忘れることができる。

 

今回はあえて読込時間をイライラさせるローディングGIFを作成する。時代逆行の革新的なUXである。挑戦的なその試みは新たな芸術を確立する人間の営みのそれと何ら変わりはないのである。時代が早すぎてついていけない挑戦的なその試みは死んでから認められる芸術家さながらである。近代芸術家に入るゴッホはきっと、評価されようがされまいが関係なかったのである。「芸術家」は自分が描きたいから、自分のために描く。貴族や教会に評価されることが至高ではない。高尚で利己的な精神がそこにある。他人の評価は副産物でしかない。そんな深い意味がこのGIFにあったかは定かではない。

 

【使用した素材】

以前、ぜんぶ雪のせいだ。Photoshopで10分、簡単GIFアニメの作り方【位置&透明度テクニック】こちらの記事で使用したバカ猫を用いる。

 

 

これでもかとイライラさせる表情である。

 

 

【作成手順】

１．「ファイル」「新規作成」でキャンパスサイズを2000px　* 2000pxで作成した。そう、サイズがでかいのである。読込時間をあえてたっぷりとる。それがイライラの源泉である。

 

 

２．キャンバスにバカ猫をドロップする。むき出しの白目。すでにイラっとしたのではなかろうか。

 

３．レイヤーをコピーした。２匹のバカ猫が見つめるその先は……白目だから見つめてはいないのである。

 

 

４．下側のバカ猫を「編集」「変形」「１８０°回転」で回転させる。そう、仮に逆立ちをして閲覧するユーザーのため、きちんと逆さまにも対応するのである。素晴らしきUXである。

 

 

５．２つのレイヤーを結合する。そう、バカ猫２匹を融合するのである。

 

 

６．結合完了である。

 

 

７．バカ猫×２レイヤーを３回コピーする。

 

 

８．移動ツール(v)でレイヤーの角をつかんで回転させる。さながら分身の術である。伊賀の忍者気取りだ。

 

 

９．コピーしたレイヤーを全て回転させて、８方向全てにバカ猫を配置した。どこから来ても安心のイライラ度である。

 

 

１０．背景を削除した。この作業は単純に忘れていただけである。

 

 

１１．全てのバカ猫レイヤーを結合する。魔法陣の完成である。

 

 

１２．「レイヤー効果」をクリックする。

 

 

１３．「グラデーションオーバーレイ」「グラデーション」をクリックする。バカ猫が見えなくなるひとときである。

 

 

１４．「描画色から透明に」をクリックする。８匹のバカ猫が見え隠れする絶妙な演出である。

 

 

１５．黒よりも白である。

 

 

１６．このバカ猫魔法陣レイヤーを７回コピーする。

 

 

１７．全てのレイヤーのグラデーションの角度を変更する。レイヤーごとに４５°ずつ角度を変えることで、全てのバカ猫に平等に閲覧者をイライラさせるのである。「０°、４５°、９０°、１３５°、１８０°、２２５°、２７０°、３１５°、３６０°」

 

 

１８．「ウィンドウ」「アニメーション」でアニメーションウィンドウを表示させる。

 

 

１９．一番下のレイヤーだけを残してそれ以外を「非表示」にする。目玉のボタンをクリックすればいい。

 

 

 

２０．アニメーションウィンドウでフレームをコピーする。

 

 

２１．今度は２番めのレイヤーを「表示」させ、１番目のレイヤーを「非表示」にする。

 

 

２２．それを７回繰り返す。そう７回である。

 

 

２３．これで平等にチャンスがやってくる。むき出しの白目は乾燥しっぱなしである。

 

 

２４．完成。 

 

 

いかがだったろうか？今回はあえて読込時間をイライラさせるローディングGIFを作成した。読者の皆様も独自のローディングGIFの作成に勤しんでみてはいかがだろうか。さらなるイライラに今後も挑戦をしていく。ご期待を。

 

　今回は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を作成する。ぜひお待ちいただきたい。