終の棲家でのんびり暮らす田舎暮らし

リタイアして山の中に終の棲家を建てて、夫婦二人で自然すぎる環境での田舎暮らしは、どこまで続けられるかを綴る。

ギボウシをGIFアニメで遊ぶ

2017年07月06日 | 初めてのHTML

GIFアニメーションを表示してみたが

日陰自慢の我が家、めざせ!「ギボウシ園?」 が見どころになった。
どうやって紹介しようかと思案の結果、動くGIF アニメーションに挑戦してみたが。

基本的に、
私は画像を閲覧するとき「スライドショー」という画像を順送りする便利な機能があるのを知っているが使わない。私だけだと思うが、

観たい画像のとき、しっかり観れないからイライラするのだ。

この「スライドショー」の場合は、任意の画像を随時停止させることができるが、GIF アニメーションでは任意の箇所で停止させることはできない。

この動く画像を観て、さあ~あなたは何か『 違和感 』 を感じてきていませんか

掲載の画像をクリックすると別のアニメーション画像を別窓で表示しますよ。


GIFアニメーション画像が持つ特徴

HTMLimg 要素に指定する画像ファイルには通常 3 種類の形式が使われる。

画像形式 拡張子 特徴
JPEG形式 .jpg フルカラー(約1677万色)が使えるので、写真に使われる。写真画像を小さなファイルサイズに圧縮して、きれいに保存するのに向いている。圧縮率を上げると画質が落ちる。
GIF形式 .gif 使用できる色数が256色と限られ、イラストやロゴ画像を保存するのに向いている。写真画像の画質は劣る。ある色を透過させた透過画像やコマ送りアニメーションに使える。
PNG形式 .png フルカラーの色が使え、ある色を透過させた透過画像が使えるのでイラストやロゴ画像を保存するのに向いている。

理由は解らないが gooブログにおいて、GIF 形式の写真画像をアップロードして、img 要素でPNG 形式に置き換わることも知っておこう。GIF アニメーションはGIF 形式で落ちるようだ。( リンク付き画像にマウスを置くとWindows のアンダーフレームで拡張子を確認できる。 )

GIF アニメーションを作ってみて改めて思うことは、

  1. 写真の画質が落ち、鮮明さに欠けて表現が伝わらない。
  2. 変化して動く要素が多いと注視しづらく、なんとなく疲れる。
  3. フレームの静止時間が1秒だと短すぎて、ストレスを感じる。
  4. ファイルサイズの関係で、大きな画像サイズには向かない。
  5. 写真を見せるというより、インパクトイメージが先行しすぎる。
  6. 動く、変化するを生かす、イラストやボタンが最適だろう。
  7. GIF アニメーションの置き場所があり、やはり適材適所だね。
純粋に 写真画像を見せようというのであれば、GIF アニメーションではなく、
通常のimg 要素にJPEG 画像を配置すべきだと感じる。

また、Adobe の Flashplayer や YouTube を使うことも選択肢にあるようだ。


GIFアニメーションはこう作られる

作成したGIF( ギフ or ジフ )画像は、画像の切り抜きなどができる画像編集ソフトとGIF アニメーションを編集できるソフトがあれば、だれでも簡単に作成できる。

作成に使用した ソフトは、「Adobe photoshopLE」、「Ms photoDraw」、「IBM ウエブアニメータ」の三本を使った。

このGIF 画像は、6コマの静止画を1コマ1秒間表示して無限ループさせている。
1コマの静止画には、「背景」・「カメラ」・「撮影画像」・「赤点滅」・「手の指」 5つのレイヤー画像が重なってできている。

1コマに使われる素材に制限はなく、細かく素材を加工する技術とアイデアで面白いものが作れる。

1コマの静止画毎にレイヤー画像を入れ替えながら、1フレームを完成させている。

私の場合だが、下記「IBM ウエブアニメータ」 で6フレームの表示条件(1フレームの表示時間は最大1秒 )を指定して、GIF 形式の画像に圧縮している。

掲載の画像をクリックすると拡大画像を別窓で表示しますよ。

gibowsi1.GIF ギボウシ1.GIF ギボウシ2.GIF ギボウシ3.GIF ギボウシ4.GIF ギボウシ5.GIF ギボウシ6.GIF
gibowsi2.GIF ギボウシ7.GIF ギボウシ8.GIF ギボウシ9.GIF ギボウシ10.GIF ギボウシ11.GIF ギボウシ12.GIF

GIF アニメーションは縮小しても独特の持っている動きは変わらない。

高価な画像編集ソフトやGIF 編集ソフトを買わなくても、Windows にある「ペイント」やフリーソフトで対応することも可能だ。


ギボウシの庭を写真で見る

GIF アニメーションで使った画像を、JPEG 画像できれいに見れるようにしました。

b17070501.JPG b17070502.JPG b17070503.JPG b17070504.JPG
b17070505.JPG b17070506.JPG b17070507.JPG b17070508.JPG
b17070509.JPG b17070510.JPG b17070511.JPG b17070512.JPG

掲載のサムネイル画像をクリックすると拡大画像を別窓で表示しますよ。

『ガーデニング』 ジャンルのランキング
この記事についてブログを書く
この記事をはてなブックマークに追加
« 桜の木が真っ二つ折れたが | トップ | 小さな山百合の郷だよりH29 »
最近の画像もっと見る

あわせて読む