9.コピーしたレイヤーを全て回転させて、8方向全てにバカ猫を配置した。どこから来ても安心のイライラ度である。10.背景を削除した。この作業は単純に忘れていただけである。11.全てのバカ猫レイヤーを結合する。12.「レイヤー効果」をクリックする。13.「グラデーションオーバーレイ」「グラデーション」をクリックする。バカ猫が見えなくなるひとときである。14.「描画色から透明に」をクリックする。8匹のバカ猫が見え隠れする絶妙な演出である。15.黒よりも白である。16.このバカ猫魔法陣レイヤーを7回コピーする。17.全てのレイヤーのグラデーションの角度を変更する。レイヤーごとに45°ずつ角度を変えることで、全てのバカ猫に平等に閲覧者をイライラさせるのである。「0°、45°、90°、135°、180°、225°、270°、315°、360°」18.「ウィンドウ」「アニメーション」でアニメーションウィンドウを表示させる。19.一番下のレイヤーだけを残してそれ以外を「非表示」にする。目玉のボタンをクリックすればいい。20.アニメーションウィンドウでフレームをコピーする。21.今度は2番めのレイヤーを「表示」させ、1番目のレイヤーを「非表示」にする。22.それを7回繰り返す。23.これで平等にチャンスがやってくる。むき出しの白目は乾燥しっぱなしである。むき出しの白目はあなたの心をより一層イライラさせる。UXのイノベーションの誕生である。革新的なローディングGIFいかがだったろうか?今回はあえて読込時間をイライラさせるローディングGIFを作成した。読者の皆様も独自のローディングGIFの作成に勤しんでみてはいかがだろうか。さらなるイライラに今後も挑戦をしていく。コメントをどうぞ今回はphotoshopを使い5分でローディングGIFを作成する。画像読み込み中のくるくるする、あれである。ローディング画像を生成するジェネレーターなどのWEBサービスは改めてご紹介する。今回は可能な限り簡易で応用が聞くような解説になれば幸いである。WEBサービスのイメージを特徴つけるローディング中のグルグルで遊んでみてはいかがだろうか。今回作成したGIFはこちら。ローディングのイライラを軽減。今回、画像素材は用いなかった。1.「ファイル」「新規作成」でキャンパスを作成する。2.楕円形選択ツールで適当な位置に円を描いた。このとき「Shift」を押しながら正円を描いた。※作業がしやすいようにグリッドを引いてある。3.「塗りつぶしツール」で任意の色で塗りつぶす。4.現在のレイヤーをコピーし、「移動ツール(v)」で円形の反対側に配置する。5.作成したレイヤー2つを「下のレイヤーと結合」で結合する。7.レイヤーを3回コピーする。8.「移動ツール(v)」でレイヤーの端をクリックして回転させる。「Shift」を押しながら回転するときれいに配置できる。9.同様に次のレイヤーを回転させる。10.さらに次のレイヤーを移動させる。11.全てのレイヤーを「表示レイヤーを結合」で結合する。12.レイヤーを右クリックし、「レイヤー効果」を選択する。13.「グラデーションオーバーレイ」を選択し、「グラデーション」の項目をクリックする。14.「描画色から透明に」を選択し、「OK」をクリックする。15.それらしいものができた。後は回転させるだけである。16.レイヤーを7回コピーする。17,一番下のレイヤーを選択し、「レイヤー効果」「グラデーションオーバーレイ」の「角度」を「0°」にし「OK」を選択する。上のレイヤーを順々に選択し、残りの7枚のレイヤーそれぞれの「角度」を45,90,135,180,225,270,315,360にする。18.一番下のレイヤー以外を「非表示」にする。※目玉のマークをなくす。19.「ウィンドウ」「アニメーション」を選択する。20.アニメーションウィンドウが表示される。アニメーションウィンドウのフレームをコピーする。21.コピーしたフレームを選択し、表示するレイヤーを下から2番めにする。22.またフレームをコピーし、今度は3番目のレイヤーが表示になるようにする。23.8フレーム分それを繰り返す。24.「ファイル」「Webおよびデバイス用に保存」を選択する。25.「GIF」を選択し、「保存」をクリックする。26.完成ローディングのイライラを軽減。いかがだったろうか?ローディング画像はそのWEBサイトやサービスのキャラクターを色づけるものである。独自のローディング画像を作成してみてはいかがだろうか。次回はローディング画像本来の目的である「ロード中にイライラさせない」を根本から覆す、いらいらさせるローディングGIFを作成する。イライラさせる革新的なローディングGIFである。gifphotoshopぐるぐるローディング作り方Photoshopぜんぶ雪のせいだ。用いて10分でできる「位置&透明度」を操作した簡単なアニメーションGIFの作成方法について説明する。本内容は前回のPhotoshopで作るGIF作成方法のテクニックを用いたものになる。1.Photoshopで10分、ハイクオリティGIFアニメの作り方【不透明度テクニック】2.進捗どうですか?Photoshopで10分、GIFアニメの作り方【位置テクニック】ご一読頂ければ幸いである。川口春奈の透明感に吸い込まれてしまいそうだ。山手線に乗れば毎日、目にするであろう、この広告のイメージをお借りしながら、冬の切なさや雪の儚さ、そして、すべて雪のせいにしてしまうこの他責な姿勢。ゆとり世代とはよく言ったものだ。雪のせいにしてしまえばいいのだ。そんな淡い恋心をGIFで表現をしてみた。今回作成したGIFはこちら。ぜんぶ雪のせいにしてしまえばいいのだ。「バカねこ」、その表情からはワンナイトラブですら気にしない、大らかで広いこころを表現している。わずかに口元からのぞく真っ赤な舌は「てへぺろ」よろしく。いたずら子猫そのものである。だまされた貴方が悪いのである。