PhotoScape で GIF アニメ http://www.tatunet.ddo.jp/eeko/anime

天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
１)
２)
３)
４)
５)
６）
バージョンアップの方法
● アプリケーションの削除
● ダウンロード＆インストロール
ＧＩＦアニメ作成（１枚の写真を動かす）
ＧＩＦアニメ作成（複数の写真をスライド式に動かす）
ＧＩＦアニメ作成（写真とイラストの合成）
● １枚目の作成
● ２枚目の作成
● ３枚目∼８枚目の作成
● ９枚目の作成
● アニメーションの設定（表示時間）
ＧＩＦアニメの保存
おまけ（複数のイラストを動かせる）
1頁
1頁
2頁
3頁
3頁
4頁
4頁
7頁
8頁
9頁
10 頁
11 頁
12 頁
PhotoScape 講習 3 回目。（今回作成のサンプル）
サンプル-①
サンプル-②
サンプル-③
サンプル-④
サンプル-⑤
サンプル-⑥
サンプル-⑦
↓イラスト５枚使用
↓イラスト３枚で・・・
↓写真２枚使用（フレーム付き）
↓写真１枚で･･･
↓写真とイラスト各１枚使用（フレーム付き）
↓写真と複数イラスト使用（フレーム付き）
↓写真と複数イラスト使用（フレーム付き）
PhotoScape で GIF アニメ
http://www.tatunet.ddo.jp/eeko/anime/090412-kousyu.htm
※ 動画のサンプルを紙面に表示出来ませんので、Web 上にＵＰしていますのでご覧下さい。
１)
バージョンアップの方法
● アプリケーションの削除
PhotoScape V3.2→V3.3 にバージョンＵＰする。
すでに旧バージョンをインストール済みという状況下で説明します。
※ 初めての場合は、ここは省いて下さい。
タスクバー左下のスタートボタンをクリック。
コントロールパネルをクリックし、
プログラムの追加と削除で、フォトスケープ V3.2 を削除する。
（もし、どこかに置いてあるショートカットがあれば忘れず削除すること。）
1
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
● ダウンロード＆インストロール
(1) PhotoScape 製作者サイト（http://www.photoscape.org/ps/main/index.php）を開けて、
左上二つ目のタブ Free Download をクリック。
出て来た画面上のどちらのリンクバナーから
ダウンロードしても同じです。画像-①
お家で一人でするときは分かりやすいように
画像-①
デスクトップへダウンロードしてからインストールして使って下さい。
今回はセットアップファイル（PhotoScapeSetup_V3.3.exe）をデスクトップへ用意して置きます。
やり方は、テキスト（その１）の２ページと同じですが、一応ここにもコピーして置きます。
(2) 以下の説明の V3.2 のところを V3.3 に置き換えて読んで下さい。
(3) ダウンロードした
ファイルを実行します。
画像-②
画像-②
(4) Welcome to the PhotoScape V3.3 Setup Wizard → [Next] 画像-③
Licence Agreement → [I Agree] 画像-④
Choose Components → [Next]
画像-⑤
Choose Install Location → [Install] 画像-⑥
Completing the PhotoScape V3.2 Setup Wizard → [Finish]
画像-⑦
画像-④
画像-③
→
→
画像-⑤
→
画像-⑥
画像-⑦
→
バージョンアップはしたものの、どこが更新されているのか？便利になったところが見付から
ないのですが、動きが早く改良されてることは間違いないようです♪
2
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
(5) ページを終了する。
デスクトップにアイコン
が出来ています。
アイコンをクリックして日本語化された→が開
けば完了です。 画像-⑧
アニメとは、アニメーションの略語で、画像の連続表示
のことです。
したがってアニメーションの作成とは、表示させる画像
の作成とそれを表示させる順序を決めることで作成で
画像-⑧
きます。
ここでは、「フォトスケープ (Photoscape)」というフリーソフトを活用して作成します。
２)
ＧＩＦアニメ作成 （１枚の写真を動かす）
先ずは、写真だけをスライドの様に簡単に動かせる方法。（参考：サンプル-④）
(1) フォトスケープ (Photoscape) を起動しメニューバーの「GIF アニメ」をクリックします。画像-⑨
画像-⑨
(2) 本日の素材画像は、デスクトップの「4 月 12 日講習用」に用意しています。
左フレームから呼び出して、ドラッグ＆ドロップして下さい。 画像-⑩
1 枚の写真だけでも効果を使えば動きます。 画像-⑪
画像-⑩
画像-⑪
３)
ＧＩＦアニメ作成 （複数枚の写真を動かす）
次は複数枚の写真で同じ様に効果を試してみましょう∼♪
アニメは静止画と比べると容量食いますので、画像サイズは小さくしましょう∼♪
ブログやメール、掲示板に使うなら長辺の上限を 400 ピクセルくらいが良いと思います。
容量は写真によって差がありますが、今回は 400 ピクセルの画像を用意しているので、色々試し
て見て下さい。（参考：サンプル-③）
3
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
４)
ＧＩＦアニメ作成 （写真とイラストの合成）
では、写真とイラストの合成で遊んでみましょう∼(*^_^*)
このテキストは、このサンプル-⑤に沿って作成しました。
動かす蝶をリアルか抽象的か迷ったけど、カラフルなイラストの方が作成中も楽しめるかな？
と抽象的イラスト選びました。（が、派手なだけで出来は今一でした。m(__)m）
複数枚の画像を作成し、それらを次々と表示することで、アニメーションのように見せます。
※ 完成品は Web ページで確認して下さい。 （サンプル-⑤）
● １枚目の作成
(1) フォトスケープ (Photoscape) を起動し、[編集] をクリックする。 画像-⑫
(2) 写真を読み込み、[リサイズ]をクリックして、[より長いほうを調整]を選択する。 画像-⑫、画像-⑬
画像-⑫
画像-⑬
(3) より長いほうを調整を指定して[OK] をクリックする。 画像-⑭
画像-⑭
(4) [オブジェクト]タブを選択し、[画像] [Photo]から
イラストを呼び出す選択 画像-⑮、画像-⑯
※ イラストはデスクトップ「4 月 12 日用」に
用意しています。
画像-⑮
4
画像-⑯
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
(5) イラスト（tyou-1.gif）を選択して、[OK]
画像-⑰
画像-⑰
↑
はみ出す
画像-⑱
(6) イラストの位置と大きさを調整する。この時、写真より左にはみ出す。 画像-⑱
(7) はみ出した部分をカットするために、[フォト+オブジェクト]をクリックし、 画像-⑲
画像-⑲
画像-⑳
(8) ◎フォトとオブジェクトを合成にチェックを入れ、[OK] をクリックする。 画像-⑳
(9) [ホーム]タブを選択し、[Patern 09] というフレームを挿入する。 画像-(21)
画像-(21)
(10) １枚目の完成 画像-(22)
画像-(22)
5
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
● アニメ GIF の作成
(1) 画面右上の[コピー]アイコンをクリックする。 画像-(23)
画像-(23)
(2) メニューから[GIF アニメ] をクリックする。画像-(24)
画像-(24)
(3) [追加] をクリックし、 [クリップボードからフォトを追加] を選択する。画像-(25)
画像-(25)
画像-(26)
(4) １枚目が登録された。画像-(26)
(5) メニューから、[編集] をクリックして、
編集モードに戻る。画像-(27)
画像-(27)
6
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
● ２枚目の作成
(1) [元に戻す] をクリックし、フォトとオブジェクトを合成する前まで戻す。画像-(28), 画像-(29)
画像-(29)
画像-(28)
(2) イラストを編集するために、[オブジェクト]タブを選択し、画像-(30)
[オブジェクト選択モード]をクリックする。画像-(31)
画像-(31)
画像-(30)
(3) イラストの大きさ、位置を変更する。 画像-(32)
画像-(32)
画像-(33)
(4) 先ほどと同様に、[コピー]→[GIF アニメ]→[追加]→[クリップボードからフォトを追加] を
実行し、２枚目を登録する。画像-(33)
(5) メニューから、[編集] をクリックして、編集モードに戻る。 画像-(34)
画像-(34)
7
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
● ３枚目∼８枚目
(1) ３枚目から８枚目まで２枚目と同様の作業を繰り返す。画像-(35)
画像-(35)
(2) ただし、8 枚目だけは、はみ出したイラストも表示させるために、
[ファイル+オブジェクト] をクリックし、画像-(36)
画像-(36)
(3) ◎オブジェクトはフォトまたはフレームの範囲外にあります。
全オブジェクトを反映する為、フォトの拡大が必要です。 にチェックを入れて、拡大エリアの背
景色を「白」に設定して、[OK] をクリックする。 画像-(37)
画像-(37)
8
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
● ９枚目
次の手順で、蝶のイラストのない画像を作成する。
(1) [元に戻す]で、フォトとオブジェクトを合成する前までもどす。画像-(38), 画像-(39)
画像-(38)
画像-(39)
(2) [オブジェクト]タブを選択し、[オブジェクト選択モード]をクリックし、[削除] を実行する。
画像-(40)
画像-(40)
(3) [コピー]、[GIF アニメ]、[追加]、[クリップボードからフォトを追加] で、９枚目を登録する。
画像-(41)
画像-(41)
9
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
● アニメーションの設定
(1) [時間変更]をクリックする。画像-(42)
画像-(42)
(2) 表示時間を入力（1/100 秒単位なので、50 ならば 0.5 秒）して、[OK] をクリックする。
画像-(43)
画像-(43)
(3) ８枚目だけサイズが違うので、[最大フォトサイズ]、◎画像全体（拡大しない）、
フォト位置[左] を選択する。 画像-(44)
画像-(44)
10
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
５)
ＧＩＦアニメの保存
(1) [保存] をクリックして、ファイル名を指定して保存する。 画像-(45)
画像-(45)
(2) 保存出来たら思ったように動いてるか確認しましょう∼(^O^)／
※ 本日も、長い時間拙い講習にお付き合いありがとうございました。m(__)m
お疲れのところ恐れ入りますが、デスクトップのフォルダー「4 月 12 日用」と他に何か個人
的に作られたデータがありましたら全てゴミ箱に入れてお掃除してから終了させて下さ
い。宜しくお願い致します。m(__)m
次回は、「一括編集」と「結合」など講習出来れば便利かなぁ∼と思います。
楽しみながら覚えられるようなテキストが作れたら良いのですが･･･頑張りま∼す♪。p(^^)q
ー
メモ
ー
11
天山パソコン自修室 4 月 12 日
講習用資料に付きコピー禁止
以下は、おまけです。
イラストを動かせると楽しいアニメになります。
ちょっとした小品でも、アイデア次第で楽しめると思います。
これから色々アニメをやってみようと思われる方、参考にして下さいねぇ∼♪
● ３枚の楽しいイラストで動かせました。 （参考 ： サンプル-②）
● ５枚のイラストを同じ方法で動かせました。
12