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

今回はあえて読込時間をイライラさせるローディングGIFを作成する。時代逆行の革新的なUXである。挑戦的なその試みは新たな芸術を確立する人間の営みのそれと何ら変わりはないのである。時代が早すぎてついていけない挑戦的なその試みは死んでから認められる芸術家さながらである。近代芸術家に入るゴッホはきっと、評価されようがされまいが関係なかったのである。「芸術家」は自分が描きたいから、自分のために描く。貴族や教会に評価されることが至高ではない。高尚で利己的な精神がそこにある。他人の評価は副産物でしかない。そんな深い意味がこのGIFにあったかは定かではない。
【使用した素材】
以前、ぜんぶ雪のせいだ。Photoshopで10分、簡単GIFアニメの作り方【位置&透明度テクニック】こちらの記事で使用したバカ猫を用いる。

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

【作成手順】
1.「ファイル」「新規作成」でキャンパスサイズを2000px * 2000pxで作成した。そう、サイズがでかいのである。読込時間をあえてたっぷりとる。それがイライラの源泉である。
2.キャンバスにバカ猫をドロップする。むき出しの白目。すでにイラっとしたのではなかろうか。
3.レイヤーをコピーした。2匹のバカ猫が見つめるその先は……白目だから見つめてはいないのである。
4.下側のバカ猫を「編集」「変形」「180°回転」で回転させる。そう、仮に逆立ちをして閲覧するユーザーのため、きちんと逆さまにも対応するのである。素晴らしきUXである。
5.2つのレイヤーを結合する。そう、バカ猫2匹を融合するのである。
8.移動ツール(v)でレイヤーの角をつかんで回転させる。さながら分身の術である。伊賀の忍者気取りだ。
9.コピーしたレイヤーを全て回転させて、8方向全てにバカ猫を配置した。どこから来ても安心のイライラ度である。
10.背景を削除した。この作業は単純に忘れていただけである。
12.「レイヤー効果」をクリックする。
13.「グラデーションオーバーレイ」「グラデーション」をクリックする。バカ猫が見えなくなるひとときである。
14.「描画色から透明に」をクリックする。8匹のバカ猫が見え隠れする絶妙な演出である。
17.全てのレイヤーのグラデーションの角度を変更する。レイヤーごとに45°ずつ角度を変えることで、全てのバカ猫に平等に閲覧者をイライラさせるのである。「0°、45°、90°、135°、180°、225°、270°、315°、360°」
18.「ウィンドウ」「アニメーション」でアニメーションウィンドウを表示させる。
19.一番下のレイヤーだけを残してそれ以外を「非表示」にする。目玉のボタンをクリックすればいい。
21.今度は2番めのレイヤーを「表示」させ、1番目のレイヤーを「非表示」にする。
23.これで平等にチャンスがやってくる。むき出しの白目は乾燥しっぱなしである。
24.完成。

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