（画面表示を付加した説明のページ）

このページでは，写真を用いたアニメーションを作成する演習部分のみについて，手順にわかりやすいように画面表示を付加しています．ただし，PhotoShop CS４の画面であるため，現在のPhotoshop 2025と一致しない部分やメニューなどもあります．講義中に，説明します．

※明治大学12号館のメディア教室、自習室、教員用端末室でAdobe Creative Cloudを利用する場合、 AdobeIDが必須となります。以下のPDFをよく読んで、対応ください。

https://www.meiji.ac.jp/ksys/it/6t5h7p00000i4mht-att/a1641975028762.pdf

写真を用いたアニメーションの作成

§ 作業手順:画像集１の写真を例に作業を進めます。

§ 作業前に：HPにある画像を保存するためには、保存したい画像の上で右クリックし、[名前をつけて画像を保存]を選択し，ディスクトップ上に保存しておきます．

1. まず，PhotoShop を立ち上げます．

2. ドラッグ＆ドロップか，メニューバーの「ファイル」から「開く」を使って，先ほど，保存した画像のファイル（hand01.jpg）を開きます．

もう1枚の保存した画像のファイル（hand02.jpg）も開きます．ファイルが２つ開いた状態になります．

左上のファイル名の表示部分をクリックして，1枚目のファイルhand01.jpgに戻ります．

3. メニューバーの「レイヤー」から「新規」から「レイヤー」を選択します．背景のレイヤーの上に新しいレイヤーを作っておきます．このレイヤーに2枚目hand02.jpgの写真が入ることになります．

レイヤー名などはそのままでOKを選択します．

2枚目の画像にウィンドウを移ってメニューバーの「選択範囲」の中の「すべて選択」を選び，2枚目の画像全体を選択します．

メニューバーの「編集」から「コピー」を選択します。

1枚目のウィンドウ（hand01.jpg）に戻ります．

レイヤー１に先ほどのコピーをペーストします．

メニューバーの「編集」から「ペースト」を選択します．

レイヤー１の不透明度を右下のスライダで０％とするとhand02.jpgの画像が見えなくなります．

メニューバーの「ウィンドウ」から「アニメーション」を開き，そのウィンドウの下にあるコピーのコマンドボタンを押して，コピーを作成します．さらに，2枚の画像のレイヤーの不透明度を調整し，1枚目と，2枚目でhand01とhand02の画像を1枚目と2枚目で見られるようにしましょう．Photoshop 2025では，アニメーションフレームではなく，タイムラインを開き，ウィンドウ上のビデオタイムラインの作成から，フレームアニメーションタイムラインの作成に変更します．

アニメーションの再生ボタンで再生してみましょう．さらに アニメーションウインドウの2つの画像をShiftキーを押しながら選択します．Photoshop 2025では，タイムラインウィンドウになります．

トゥイーン機能（ウィンドウの下にあるトゥイーンボタン）で２つの画像を補間する画像を作成します．

さらに7枚目の画像をコピーして，７と8枚目の画像が異なったものとなるように8枚目の画像の不透明度を調整します．そのあと，2枚を選択します．

同じようにトゥイーン機能で補間する画像を作成します．

◎出来上がりましたら，再生ボタンで再生をしてみてください．速度などを調整したい場合には，各画像の０秒と書かれた部分から表示の時間を選択，もしくは入力します．

最後に作成した画像を「アニメーションGIF」のファイルとして，保存するようにします．

メニューバーの「ファイル」から「Webおよびデバイス用に保存」を選択します．Photoshop 2025では「書き出し」を選択後に「Web用に保存」となります．

Webおよびデバイス用に保存のウィンドウから保存を選択して，ディスクトップにアニメーションGIFでファイルを保存します．

保存後は，アイコンをクリックし，再生してみましょう．また，プロパティを開いて，ファイルのサイズを確認しましょう．

写真は，何枚でも可能であるし，加工を施しても，手を加えることも可能で，背景として利用することもできます．

また，写真ばかりでなく，同じ方法で図や絵（ＣＧ）等，Photo ShopやPaint Shop Pro等で書いた画像も簡単に取り込むことができ，アニメーションにすることが可能です．

保存にあたっては，今回は「アニメーションGIF」のファイル形式で，保存をしています．写真のような画像を用いた場合には，枚数に応じて，かなりファイル容量が大きくなりますので，注意が必要です．画像のサイズを小さくするなどの工夫が必要です．いろいろと試してみましょう。

画像集１を利用したアニメーション

　

ブラウザでは、上記のように表示されます。

---

戻る