ＩＣＴメディア編集Ⅱ 2025年10月10日
写真を用いたアニメーションの作成
この演習については、ソフトウエアの関係で、Photoshopを用いたものであるため、大学の教室や自習室での作業となります
ここでは、アニメーション作成の一例として，写真をアニメーション画像として使う簡単な方法について説明します．アニメーションは，動画ですので，写真をアニメーション化することは，ビデオに近づくことができるとも考えられます．
今回は，以下に用意した写真の画像ファイルを使って簡単な写真の切換によるアニメーションを作成してみましょう．
画像集１）
hand01.jpg 
hand02.jpg
画像集２）
左から，myu101.jpg，myu102.jpg，myu103.jpg．
（画像の上にマウスのカーソルをもってきて，右ボタンを押して，画像を，名前を付けて保存する．ここでは，ディスクトップ上に既に与えられた名前のままで保存します）
取り込んだ画像を，Photoshop で編集し，アニメーションを作成します．
画像集１）の画像を例に，説明します．
１）
まず，Photoshopを立ち上げます．
２）
先ほど保存したhand01.jpgのファイルを開きます．また，hand02.jpgのファイルも開きます．
３）
アニメーション作成の手順は，先週と同じです．まずhand01.jpgのファイル画面で，新しいレイヤーを作成します．
４）
そのレイヤーに，hand02.jpgの画像のコピーをペーストします．
５）
タイムラインのウインドウを開き、フレームアニメーションを、作成を選択します。タイムライン上でのコピーとなります。
６）
2つの画像に対して，レイヤーの表示で，不透明度を調整します．それぞれ，違う画像が表示されるようにします．
７）
２つの画像でアニメーションを再生してみます．
８）
また，２つの画像を選択し，トゥイーン機能を使い，5枚程度の補間画像を作成します．
９）
最後の画像から1枚目の画像へ繰り返して戻るときのために7枚目の画像をコピーし，レイヤーの不透明度を調整し，8枚目を1枚目と同じ画像にします．
１０） アニメーションを再生して動きを確認してみましょう．
１１）
最後にメニューバーの「ファイル」から「書き出し」を選択し、「Webおよびデバイス用に保存」を選択し，アニメーションGIF形式のファイルを作成します．
１２） 出来上がったファイルをブラウザなどで再生してみましょう．また，プロパティでファイルサイズを確認します．
１３） 写真は，何枚でも可能であるし，加工を施しても，手を加えることも可能で，背景として利用することもできます．
１４） また，写真ばかりでなく，同じ方法で図や絵（ＣＧ）等，Photo ShopやPaint Shop Pro等で書いた画像も簡単に取り込むことができ，アニメーションにすることが可能です．
１５） 保存にあたっては，今回は，Ｗｅｂページに掲載用のアニメーションとして「アニメーションGIF」のファイル形式で，保存してみます．この形式は，ｇｉｆ形式と同じで，表現できる色の数が２５６色（透過色が1色）以下です．写真を用いるとファイルサイズはおおきくなりますので，注意が必要です．写真を用いる場合は，元々の写真のサイズを小さくしておくと良いでしょう．
このような写真を使ったアニメーションファイルが表現できます．
実習練習：
上記の画像集２）を用いて，写真を使ったアニメーションを作成してみましょう．
絵の描き方やコピーについてもいろいろと試してみましょう．
［補足説明］
効果などの挿入を試してフレームを何枚か（２０フレーム以上）作りましたら、実際にアニメーションGIFのファイルを、１つは高画質で、サイズは元の画像のままのものを作成し、さらに、もう１つを高画質であるが、アニメーションのサイズを５０％（保存時に画像サイズは変更できます）としたものを作成し、それぞれ違う名前で保存して、Internet Explorerでアニメーション表示を比べてみましょう。アニメーション再生の画面切り替わりの時間が、ファイルサイズによって影響を受け、変化することが分かると思います。このことからも、アニメーションの場合にも、画像のサイズ、ファイルサイズには注意が必要といえます。
加藤のページへ | ＩＣＴメディア編集Ⅱ | フレームアニメーションとバナーの作成課題と提出