BACKSTAGE技術部

群馬職業訓練短期大学校、ポリテクカレッジ群馬のデザイン科卒業生で行われる作品展
「BACKSTAGE」の技術的ブログです。
Adobe Illustrator、Photoshopを中心に手持ちのアプリケーション、デジモノの検証結果やTipsをお伝えしていきたいと思います。
リンクはご自由に。報告も不要です。
<< Aperture購入!したものの… | main | Photoshopで開いた時にツールパネルの背面になってしまう時の対処 >>
PhotoshopでGIFアニメーション作成
0

    JUGEMテーマ:Adobe CS5

    せっかくマニュアルモード付のカメラを買ったので、
    今回はストップモーションアニメを作ってみたいと思います。

    1コマ1コマ撮影して繋げてアニメーションにする技法です。

    学生時代グループ組んだ卒業制作で
    小麦粉粘土のクレイアニメーション作った経験がありますが、
    それももう20年以上前の事。
    デジカメもなく、カメラはビデオカメラ(これはかなり良い物だったらしい)
    コマ撮りできるデッキ(これも珍しい機材だったと思います)を接続、
    記録媒体はVHSビデオテープという
    当時としてはかなり恵まれた環境で作ることができました。
    楽しかったなぁ…


    さて、現在の機材で久々にコマ撮り開始!
    三脚使ってもちろんマニュアルモード
    写っている物の内容によって明るさやらフォーカスやら変化してしまうと困るので
    絞り、フォーカス、シャッタースピードを固定にしました。

    ソーラーオモチャの登場です。



    <途中省略>



    途中省略しましたが
    全部で47コマ撮影

    いよいよアニメーションにしていきます。
    GIFアニメが手軽でよいですね。
    これはPhotoshop使うと非常に簡単。

    まず1コマ目の画像をPhotoshopで開きます。
    スクリーンショット 2014-04-12 4月12日2.31.02 土.png
    スクリーンショット 2014-04-12 4月12日2.32.21 土.png
    開きました。

    そこへ残りのコマの画像を選択してドラッグ。


    配置場所を決めるアタリが出るので
    スクリーンショット 2014-04-12 4月12日2.35.29 土.png

    ズレがなければオプションバーの○をクリック。もしくはenterキー。
    全ての画像が配置し終わるまで続けます。(enterキーの方押しっぱなしに出来るので楽です)
    スクリーンショット 2014-04-12 4月12日2.35.52 土.png

    全てのコマがレイヤー別れてに順番通りに重なりました。

    アニメーションを作成するパネルを表示します。
    ウィンドウ>タイムライン
    CS5以前だと「アニメーション」
    もっと古くなるとPhotoshopではなくImageReadyとかになっちゃいますのでそれは省略。
    スクリーンショット 2014-04-12 4月12日2.37.38 土.png

    タイムラインパネルが開きました。(CS6)
    スクリーンショット 2014-04-12 4月12日2.38.25 土.png
    ※CS5以前だとこの時点でフレームアニメーションのパネルになっています。

    タイムラインのモードを▼部分からフレームアニメーションに変更
    スクリーンショット 2014-04-12 4月12日2.37.56 土.png

    「フレームアニメーションを作成」をクリック
    スクリーンショット 2014-04-12 4月12日2.38.53 土.png

    スクリーンショット 2014-04-12 4月12日2.39.14 土.png1コマ目が出ました。

    タイムラインパネルのメニューから
    「レイヤーからフレームを作成」
    スクリーンショット 2014-04-12 4月12日2.40.48 土.png
    スクリーンショット 2014-04-12 4月12日2.41.18 土.png
    全コマが順番通りにアニメーションフレームに割り当てられます。

    そして各コマの時間設定。
    今回は全コマ同じ秒数にします。
    全コマを選択して
    スクリーンショット 2014-04-12 4月12日2.42.08 土.png

    どのコマでも良いので秒数のところをクリックしてお好みの秒数に。
    スクリーンショット 2014-04-12 4月12日2.42.32 土.png
    もしちょうど良いのがなければ「その他」を選択。

    今回はかなり細かく撮影したので0.05秒に設定。
    スクリーンショット 2014-04-12 4月12日2.42.50 土.png

    全コマ0.05になりました。

    再生ボタンで動きを確認して
    必要に応じて時間を再調整。

    あとはWeb用に保存で
    スクリーンショット 2014-04-12 4月12日2.43.13 土.png

    形式を「GIF」に
    スクリーンショット 2014-04-12 4月12日2.44.06 土.png

    サイズを繰り返しを設定
    スクリーンショット 2014-04-12 4月12日2.45.10 土.png

    スクリーンショット 2014-04-12 4月12日2.45.33 土.png

    そして保存
    スクリーンショット 2014-04-12 4月12日2.48.57 土.png
    以上で完成です。

    anime.gif
    ↑クリックすると別ウィンドウで動きます。

    いやー簡単になりましたねぇ。
    ちゃんとした照明はあるに越したことはないですが
    カメラ側でかなり調節ききますのでちょっとしたものなら全然問題ないです。
    これだけお手軽だと何かもっと作りたくなってきちゃいますね。

    順番通りの撮影なので実際繋げて動きを見るまで
    意図通りのタイミングになっているか分からないのもほどよい緊張感があってよいです。
    ちょっとしたミスは「味」としてごまかしてしまえー

    ブログランキング・にほんブログ村へ
    にほんブログ村
    | タナカ | Photoshop | 06:38 | comments(0) | - | - |









    スマホ版
        123
    45678910
    11121314151617
    18192021222324
    252627282930 
    << June 2017 >>
    + SELECTED ENTRIES
    + RECENT COMMENTS
    • Illustratorの散布ブラシで鉛筆やクレヨン風の書き味を出そう
      タナカ (06/06)
    • Illustratorの散布ブラシで鉛筆やクレヨン風の書き味を出そう
      monday (06/06)
    • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
      タナカ (04/29)
    • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
      かわだ (04/29)
    • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
      タナカ (12/02)
    • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
      カール (12/01)
    • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
      タナカ (12/01)
    • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
      タナカ (11/30)
    • Macのカレンダー.appを使って定期的にアプリケーションを実行してみよう
      カール (11/30)
    • Illustratorでオブジェクトが重なっている部分のみの線分を抽出してみよう
      タナカ (06/30)
    + CATEGORIES
    + ARCHIVES
    + BACKSTAGE
    + Amazon
    + 広告

    + にほんブログ村ランキング
    + MOBILE
    qrcode
    + LINKS
    + PROFILE