タグ別アーカイブ: ローディング

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

ローディングGIF画像作り方&商用ダウンロード&jQuery実装記事まとめ

執筆:Daily GIF89a編集部

ローディングGIF画像作り方&ダウンロードサイト全力まとめ
UXにおいて非常に重要なローディングGIF。ユーザーを待たせたくないものである。本記事はローディングGIF画像がダウンロードしたい方、ローディングGIFアニメを実装したい方、ローディングGIF画像を自作したい方のための記事である。本記事では以下の順にご説明する。筆者自身が実際に触ってみた感想も合わせて記載する。

 

  1. ローディングGIF画像生成サイト5選
  2. ローディングGIF画像の作り方紹介記事
  3. ローディングGIF画像の実装説明サイト
  4. ローディングGIF画像サンプルカタログ

 

1.ローディングGIF画像生成サイト5選

Loader Generator

http://loadergenerator.com/
自分で形、サイズ、速度、色、背景色などを変更しローディングGIFを生成できる。UIも非常にシンプルで、画像生成でもよいのであれば最も使いやすい。商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

みんなの知識

http://www.benricho.org/loading_images/
スピード・サイズ・人気度から一覧表示されたローディングGIFをダウンロードできる。自作しないならば、商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

Ajaxload

http://ajaxload.info/
一番目にご紹介したLoader Generatorに比べ自由度は無いが、ワンクリックでローディングGIFを生成できるので非常に簡単。商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

Load Info

http://www.loadinfo.net/
非常に小さいGIF画像を生成できる。余分なエフェクト等いらない方はこちらを利用してみてはいかがだろうか?。商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

Preloaders.net

http://preloaders.net/
用意されているGIFが非常にユニークなサイト。変わったローディングGIFを使いたいのであればこちらのサイトがよいだろう。商用利用も可能。

ローディングGIF画像作り方&ダウンロードサイト全力まとめ

 

 

2.ローディングGIF画像の作り方紹介記事

Photoshopで5分、ローディングGIFを自作する簡単な方法【GIFアニメ作り方】

http://gif89a.net/loading-gif/
当メディアでPhotoshopでローディングGIF画像を制作している。作業時間は5分ほど、オリジナルのローディングGIF画像を作成したいのなら一読いただくと良いだろう。

 

 

3.ローディングGIF画像の実装説明サイト

 

画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript

http://blog.livedoor.jp/tacshock-code14/archives/6760786.html
jqueryでローディングGIFを実装している。

 

画像の読込完了まで、ローディング画像を表示する方法

http://allabout.co.jp/gm/gc/431053/2/

html,cssで画像領域の背景にローディングGIFを表示する形で実装をしている。

 

 

4.ローディングGIFサンプル:どんなローディングGIF画像がいいか発想を広げよう。

1

via GIFMAGAZINE

2

via GIFMAGAZINE

3

via GIFMAGAZINE

4

via GIFMAGAZINE

5

via GIFMAGAZINE

6

via GIFMAGAZINE

7

via GIFMAGAZINE

8

via GIFMAGAZINE

9

via GIFMAGAZINE

10

via GIFMAGAZINE

11

via GIFMAGAZINE

12

via GIFMAGAZINE

13

via GIFMAGAZINE

14

via GIFMAGAZINE

15

via GIFMAGAZINE

16

via GIFMAGAZINE

17

via GIFMAGAZINE

18

via GIFMAGAZINE

執筆:Daily GIF89a編集部

 

かわいい&おもしろ猫GIF画像がお好きな方はこちらも合わせてご覧ください。

バカ猫

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト40第一弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト40第二弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト20第三弾

【ねこGIF特集】かわいい&おもしろ猫GIF画像ベスト20第四弾

【GIFまとめ】笑えるおもしろGIF画像ベスト20第1弾!!

バカ猫

【衝撃】あえて読込時間をイライラさせるローディングGIFを作成してみた。【GIFアニメの作り方】

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

ローディングのイライラを軽減。
ローディングのイライラを軽減。

 

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

 

【使用した素材】

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

JRのパロディ。ぜんぶ雪のせいだのGIF
そう、ぜんぶ雪のせいにしてしまえばいいのだ。

 

 

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

バカ猫
むき出しの目玉は乾燥を続ける。

 

 

【作成手順】

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

スクリーンショット 2014-02-22 8.27.18

 

 

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

 

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

3

 

 

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

 

 

5.2つのレイヤーを結合する。そう、バカ猫2匹を融合するのである。5

 

 

6.結合完了である。6

 

 

7.バカ猫×2レイヤーを3回コピーする。7

 

 

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

 

 

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

 

 

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

 

 

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

 

 

12.「レイヤー効果」をクリックする。

13

 

 

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

 

 

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

 

 

15.黒よりも白である。16

 

 

16.このバカ猫魔法陣レイヤーを7回コピーする。19

 

 

17.全てのレイヤーのグラデーションの角度を変更する。レイヤーごとに45°ずつ角度を変えることで、全てのバカ猫に平等に閲覧者をイライラさせるのである。「0°、45°、90°、135°、180°、225°、270°、315°、360°」18

 

 

18.「ウィンドウ」「アニメーション」でアニメーションウィンドウを表示させる。
22

 

 

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

 

 

 

20.アニメーションウィンドウでフレームをコピーする。
23

 

 

21.今度は2番めのレイヤーを「表示」させ、1番目のレイヤーを「非表示」にする。

24

 

 

22.それを7回繰り返す。そう7回である。
27

 

 

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

 

 

24.完成。 

イライラするローディング
むき出しの白目はあなたの心をより一層イライラさせる。そうUXのイノベーションの誕生である。革新的なローディングGIF

 

 

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

 

ローディングGIFの作り方photoshop

Photoshopで5分、ローディングGIFを自作する簡単な方法【GIFアニメ作り方】

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

 

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

ローディングのイライラを軽減。
ローディングのイライラを軽減。

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

 

 

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

 

 

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

 

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

 

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

 

5.作成したレイヤー2つを「下のレイヤーと結合」で結合する。 5

 

6.結合が完了した。   6

 

7.レイヤーを3回コピーする。7

 

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

 

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

 

10.さらに次のレイヤーを移動させる。10

 

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

 

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

 

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

 

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

 

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

 

16.レイヤーを7回コピーする。 18

 

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

16

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

17

19.「ウィンドウ」「アニメーション」を選択する。

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

20

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

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

22

23.8フレーム分それを繰り返す。24

24.「ファイル」「Webおよびデバイス用に保存」を選択する。25

25.「GIF」を選択し、「保存」をクリックする。26

26.完成

ローディングのイライラを軽減。
ローディングのイライラを軽減。

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

イライラするローディング
そう、イライラさせる革新的なローディングGIFである。