Photoshopでアニメーション制作

    こんにちは。制作部の橘野です。

    大学ではクレイアニメーションを作っていたので、
    今回はPhotoshopで簡単なアニメーションの作り方を説明しようかと思います。

    はじめにPhotoshopではフレームアニメーションとビデオタイムラインの2種類の作成方法があります。
    それぞれ下記のような違いがあるので作りたい動画に合わせて使い分けることができます。便利ですね!

    ーーーー
    フレームアニメーション…パラパラ漫画的な作り方。私が作っていたクレイアニメはコマ撮り撮影なのでこちらで作っていました。

    ビデオタイムライン…キーフレーム機能がありズームやフェードインなどのエフェクトを簡単につけられます。
    ーーーー

    今回はフレームアニメーションの方についてです!

    ①フレームアニメーションのタイムラインを作成する。

    ウィンドウ>タイムライン からタイムラインパネルを表示します。

     

    フレームアニメーションボタンを作成をクリックするとタイムラインパネルにフレームが表示されます。(ボタンがビデオタイムラインを作成ボタンになっている場合は 横の∨ボタンから変更できます。)

     

    ③アニメーション画像を書いていきます。

    次のコマをつくりたいときは別のレイヤーに書きます。(ほかのレイヤーは非表示にしておきます。

     

    ④アニメーションを並べる

    こんな感じで3コマ分書きました。

    今回は3コマなのでフレーム数は3つになりますが、ループをさせたいので真ん中のコマが最初と最後の間に入るよう4つフレームを作ります。

    タイムラインパネルの右から2番目のアイコンからフレームを作成します。

    設定によってはレイヤー枚にフレームが増えていく場合もあるため、多くつくりすぎた場合はゴミ箱のアイコンから余分なフレームを削除しておきます。

    ちなみにタイムラインパネル横のメニューから「レイヤーからフレームを作成」で一気にレイヤーからフレームをつくることができます。1フレームごとに1枚のレイヤーしか表示しない場合はこの機能を使用すると便利です。

    1フレームごとに見せたいレイヤーだけを表示する設定にします。

    そんな感じで並べたものがこちら

    このままだとめちゃめちゃはやく動いてしまうので秒数を調整していきます。

    真ん中あたりにあるプレビューボタン(▶︎)で確認しながら設定していきます。
    PCが重いとカクカクになってしまいますが。。

     

    ⑤書き出し

    ファイル>Web 用に保存 (従来)を開きます。(従来というのが不安になりますが^^;)

    保存形式からGIFを選択して保存します。ループさせたいときは下のほうにあるループオプションからループを選択しておきます。

     

    ⑥完成!

    (クリックで再生)

    ちなみにすでにアニメーション用の画像は書いてあって繋げたいだけという場合には、ファイル>スプリクト>ファイルをレイヤーとして読み込みで一気に画像からレイヤーにできます。連続写真などはこれを使用して簡単にGIF動画にすることができます。この場合「レイヤーからフレームを作成」機能を使用すると良いですね。

     

    私の作成したアニメーションはなんともいえないクオリティのものでしたがこんな感じで簡単にPhotoshopでアニメがつくれるので作ってみたい方はぜひ試してみてください!

    また時間があるときにビデオタイムライン機能を使用したアニメの作り方も書きたいです^^

     

     


    関連記事

    • 書籍レビュー:この一冊で全部わかるWeb技術の基本

      書籍レビューの2冊目はWeb技術全般に関する読み物です。内容的にはドットコムマスターなどを受験する際にも使えるのではないでしょうか。ITの枠の中に一応長年いる私にとって既知のものが多かったですが、その中でも「あ、これは知らなかった」となったものを数個ピックアップしたいと思います。
      ・マイクロフォーマット
      HTMLやXMLで記述されたWebページの中の記述1つ1つに意味を持たせて、外部のコンピュータが参照してきても自律的に意味がわかるようにしましょうという取り組みです。そういえばXMLという言葉を初めて聞いた時にそんな風になるという話を聞いたのを思い出します。ただマイクロフォーマットで検索しても古い記事ばかりが目につき、Google Trandsでも明らかに話題に上がらなくなってきています。
      ・クエリキャッシュサーバー
      データベースへの検索結果に対する応答をキャッシュするサーバー。メモリ上にそうした結果をキャッシュして応答を早くするという話は聞いたことがありますが、書籍では専用のサーバーを間に立てています。検索するとDNSキャッシュサーバーの事例ばかりが引っかかり、そうしたDB検索キャッシュ専用サーバーの存在についてはなかなか思ったものにたどり着けず。
      ・マッシュアップ
      既存のWebサービスを複数組み合わせて新たなサービスを提供すること。例えば位置情報から周辺のスーパーの特売情報をピックアップして提供したりなど。既存の楽曲から良いとこどりして新しい曲を作る音楽の世界でも使われている言葉だそうです。
      ・WAF(Web Application Firewall)
      アプリケーション通信の中身まで精査するFireWall。クライアントが投げてくるSQLコマンドの中身までチェック、とあったのですごいな!と最初は思いました。しかし、今時ほとんどの通信がSSLで暗号化されているのでどうやって中身を見るのだろう、と調べて見ると。。クライアントからのhttps通信をいったん全てWAFで受け取って内容を精査、その後WAF〜Webサーバー間で改めてhttpで通信するのだそうです。構築と運用が大変そうですね。。
      ・CAPTCHA
      Webサイトのアカウント作成時などに遭遇する、うねうねっと表示されたアルファベットを読み取って入力するあれ。入力者がボットやプログラムではなく人間であることを示すためのあれをCAPTCHAと言うのだそうです。最近だと分割された写真から道路標識/車に該当する枠をクリック選択せよ、というのによく出くわしますが標識ではなくお店の看板とかも混じっていて毎回ちょっと悩まされます。。
      まとめ
      広く浅く記載されており、IT業界に入って日が浅い方に適しているかもしれませんが、それなりに経験年数を積んだ方にも読み物として十分面白いと思います。分かっていたつもりで、間違った理解をしていたものなどが見つかるかもしれません。
      2018/09/02 技術 / デザイン / 制作
    • 音ゲーの話

      こんにちは。 やっと過ごしやすい気候になってきて、秋って感じがしますね。 食欲の秋、スポーツの秋、芸術の秋、、、、 芸術の秋  →  音楽  →  音ゲー  

      ということで、無理やり「芸術の秋」に繋げて音ゲーの話をさせていただきます。

        基本的に私はあまりアプリのゲームはしないのですが、そんな私がハマった数少ないアプリゲームを紹介いたします! ある日なにか音ゲーたるものをしてみたく思い、App Storeで探していました。   (余談ですが、幼少期はプレステ2でパラッパラッパー系のゲームをよくプレイしていました)   で、探しているとユルい画像(私好み)が目に入ったので早速インストールしてみることに・・・。 https://itunes.apple.com/jp/app/%E3%81%86%E3%81%97%E3%82%8D-%E3%81%86%E3%81%97%E3%82%8D/id1091569546?mt=8 このゲームはニコニコ動画の ”踊ってみた”をしている最中にお母さんが入ってきてしまう  という、本当にあった動画を元ネタとして作られており、かなりシュールなゲームです。 元ネタ(諸説あり) →https://www.youtube.com/watch?v=ZKVmNjJE4jA   音楽もクセになるようなものばかりですし、キャラクターも変えてプレイできます(お母さんも踊ります)   ゆるーくできるゲームなので、気分転換にでも試してみてはいかがでしょうか?  
      2018/09/14 デバイス・端末 技術 / デザイン / 制作 日常 / プライベート
    • 書籍レビュー:6ステップでマスターするHTML+CSSデザイン

      はじめに
      こちらのブログへの初投稿は諸事情もあり、やや固く書籍レビューからです。これまでHTMLとかCSSとタイトルについた本を買ってきては延々とタグの紹介とその実演が続き、途中で飽きてしまうのがパターンでした。でもこの書籍はモバイルファーストが叫ばれてから久しいですが、パソコンの他、画面の大きさや縦横比が異なるスマートフォンを意識したページをつくることを前提としており、実際にHTMLやCSSを書いてみても飽きが来ることなく最後まで通せました。(Amazonでの評価も高いようです ↓)
      この本のポイント
      ・最初にページ全体の構成を意識してから作成に入る。
      ・パーツ単位に作成を進めていき、繰り返し出て来るタグも多い。
      リファレンスを見ながら片っ端からタグを試すのではなく、より実践的にパーツ単位に作成を進め、HTML/CSS記述の際には何度も繰り返し出て来るパターンもあり、現場で実際に必要なパターンが頭に定着しやすかったと思います。
      実際にやってみる
      私自身が実際にやってみて体で覚えるタイプなので、気になったところと本書籍の肝と思われる部分だけ実際にやってみました。
      ・Webフォントの利用
      Webフォントについては概念だけは知っていましたが、自身で試したことがなかったのでやってみました。書籍ではGoogle Fontsの利用となっていたのでお手本通りにそのまま。日本語フォントが無いという話を過去に聞きましたがそんなことはなく、ぱっと見で良さげなものもいくつかありました。手順も簡単です。
      1. https://fonts.google.com/ にアクセス
      2. 使ってみたいフォント右上の+(プラス)をクリック
      3. '1 Family Selected'と表示される黒いバー部分をクリック
      4. 表示されるコードの1つ目(link href...)をHTMLファイルのheadタグの中に。2つ目(font-family..)をCSSファイルのフォントを適用したい箇所にそれぞれコピペ。
      手順は以上です。普段フォントの差を意識することのない私でも違いはわかりました。どんなデバイスでアクセスしても常に同じ感じで表示されるのは良いですね。
       
      ・Font Awesomeのアイコン利用
      私は巷のWebサイトにあるTwtitterやFacebookのアイコンはああした画像ファイルをどこからか入手して img で指定しているのかと思ってたらFont Awesomeといったものがあるのですね。仕組みはGoogle Fontsと同じでネットワーク経由でアイコンのデータを取ってきて自身のWebサイトに表示するようです。これも面白そうだったのでやってみました。
      1. https://fontawesome.com/ にアクセス
      2. 画面上部の[ How to Use ]をクリック
      3. 画面中央に表示される(link rel=..)で始まるコードをHTMLファイルのheadタグの中にコピペ
      4. 画面上部の[ Icons ]をクリック。表示されるアイコン一覧から使いたいアイコンをクリックします。(色が薄く表示されているアイコンは有償のProプランに入っている人だけが使えます)
      5. 画面左下の(i class..)で始まるコードをHTMKファイル内のアイコンを表示させたい箇所にコピペ
      手順は以上です。既にFont Awesomeからアイコンを読み込んで表示しているのが確認できますが、素の状態だと結構シンプルというか地味です。
       
      なので書籍に従って、CSSファイルで以下の装飾を施します。
       
      だいぶそれっぽくなった気がします。各自で好きに装飾できるようにシンプルな状態で配布しているのですね。
       
      ・フレキシブルボックスレイアウトを使った可変レイアウト
      おそらくこの書籍のもっとも肝の部分の1つとなる、サイトを閲覧するデバイスの画面解像度に応じて表示レイアウトを可変させる、というのも基本部分だけやってみました。よりわかりやすいようにChromeのデベロッパーツールを使って確認していきます。
      1. 書籍に従って、index.htmlとstyle.cssを仕上げます。sectionやdivで区切られた要素がいくつあり、入れ子状態になっているものを意識します。
      2. iPhone6/7/8で見た場合、3つの要素(divで区切ったブロック)が縦1列に並んで表示されます。パソコンや他のデバイスを選択して表示しても同じです。
      3. 書籍に従って画面の横解像度が768pxを超えた場合は、3つの要素(divで区切ったブロック)を画面の横幅を等分割して横一列で表示する、という指示をCSSに書き加えます。
      4. 画面の横幅がちょうど768pxあるiPadで見ると、3つの要素(divで区切ったブロック)が画面の横幅を等分割して横一列で表示されています。
      5. 試しに3つの要素(divで区切ったブロック)をコピペで6つに増やしてみると... うまいこと等分割表示してくれているようです。
      まとめ
      Chromeのデベロッパーツールを使って色々なデバイスを呼び出しながら、かつ縦横を変えて表示の変化を確認しながら進めていくと飽きずに行けると思います。デバイスに応じた可変レイアウトもWordPressのテーマによってはほぼ自動で出来たりするようですが、実際の仕組みを理解しておくという意味でも良い書籍だと思いました。どなたかの参考になりましたら幸いです。
      2018/08/30 技術 / デザイン / 制作