Rittyのサイト作成日記

< 新しい記事

新着記事一覧(全211件)

過去の記事 >

November 26, 2008

アニメーションGIF-画像を変化させて楽しませる-

カテゴリ：コンテンツ充実

動画レビューを作ったという記事を書きました。
今、動きのあるイメージを提供することに興味があります。
※また飽きると思うけれど。

あるレビューページでパラパラ漫画のように変化して、
動画みたいに表示される写真を見ました。

アニメーションGIF という昔からあるものだそうです。

動画だと、動画を撮影、編集して
eyevioやYouTubeにアップしなければならないので、
めんどうな時があります。

訪問者のワンクリックに委ねられている
（再生ボタンを押してくれるかどうか）
というのも心もとないです。

これに対して、アニメーションGIFは
●写真加工と同じ手間、画像と同じ表示（imageタグが使える）でよい
●フラッシュやJAVASCRIPT不要で、勝手に表示される（画像表示オフ以外）

もちろん短所もあります。

GIF画像をレイヤーとして複数重ねて、
順番に表示させる仕組みなので
GIFの短所がそのまま引き継がれます
（写真だと荒くなるなど？実はよくわからない・・・

でも、ちょこっと興味を引く何かを載せたいときには良さそうです。

編集ソフトと作り方

私はPhotoshop Elements3.0を使っています。

　※2008年10月17日より発売開始→ 最新：Photoshop Elements 7　日本語版

手順1.複数の写真を用意して１つのファイルにコピー。レイヤーを複数にする
（サイズを小さくしておくと保存するときのエラー「ファイルが大きすぎてできません」を避けられます）。
Photoshop Elements3.0でアニメーションGIFを作る１

手順2.ファイル＞web用に保存　を選択する。
Photoshop Elements3.0でアニメーションGIFを作る２

手順3.「GIF」形式を選び、アニメーションの左横のチェックボックスにチェックを入れる
Photoshop Elements3.0でアニメーションGIFを作る３

右下のフレームディレイの数値は秒数。一こまを何秒表示させるか選べます。

1順だけ表示させたい場合は、チェックを外します。

　※学ばせていただいたサイトは、超初心者向けフォトショップ・エレメンツ de ゴーゴー！::第13回透過GIF、アニメGIFの作り方です。

★出来上がった初・アニメーションGIF。
Photoshop Elements3.0で作ったアニメーションGIF