とあるエンジニアの作業ブログ

Web製作

ドローンが飛ぶGIFアニメーションを作ってみた

投稿日:2019年2月3日 更新日:

飛んでいるドローンアニメーション
 
上のようなドローンが飛ぶGIFアニメーションを作ったときの要点メモ。Photoshopのどのような機能を使ったかや注意すべきポイントに絞って記載。
(ドローン画像の作り方や飛んでいるように見せるアニメーションの作り方については記載していません。)
 
PhotoshopのバージョンはPhotoshop CC 2018 バージョン19.1.3。

人間カード
無料サンプル
菜々子さん的な日常DASH!!
無料サンプル
監獄実験―プリズンラボ―
無料サンプル
ノ・ゾ・キ・ア・ナ
無料サンプル

Photoshopでフレームアニメーションを作成

[ウィンドウ]→[タイムライン]を選択し、タイムラインビューを表示させる。
タイムラインビューの▼を押して「フレームアニメーションを作成」を選択。
フレームアニメーションを作成
 
「フレームアニメーションを作成」を押して1枚目のフレームを作成。
この時作成されるフレームは表示されているレイヤーの状態になることに注意。
1枚目のフレームを作成

トゥイーンで始点と終点をシームレスつなぐフレームを自動生成

1枚目のフレームを選択して、「選択したフレームを複製」でフレームをコピー。
フレームアニメーションを複製
 
続いて2枚目のフレーム内のオブジェクトをアニメーションさせる終点まで移動させる。
移動させたら2枚のフレームを選択して「アニメーションフレームをトゥイーン」を押して中間のフレームを自動生成。
今回は8枚で作成。
トゥイーンで中間フレームを自動生成
 
トゥイーンで中間フレームを自動生成(完了)
 
上記の作業を繰り返して全てのフレームを作成する。

フレームのディレイ設定

フレームのディレイはアニメーションの速度に影響する。
今回は0.1秒に設定。
Photoshop上で確認する速度と、実際に書き出してGIFアニメーションとして見える速度が異なるので、必ず作成途中で一度書き出して確認すること。

書き出し時の注意点(マットの指定)

書き出し時にマットの指定を必ず「なし」にすること。
なお、今回は[Web用に保存(従来)]を利用した。
 
GIF形式では透明にできるのは1色だけで、マットとは透過色を決める設定でデフォルトでは白になっている。
このマットの設定をデフォルトの白から「なし」に変更する。これをしないと書き出したGIF画像に白い枠線がついているように見えてしまう。
仕組みとしては、アンチエイリアスが効いている画像では透明部分と画像とのエッジの部分は段階的に変化していく。そのため、透明→透過色→透過しない色という風に色合いが変化するが、この透過色部分が白い枠線を生み出してしまうため。
マットの指定

-Web製作
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

MAMPを移行したらphpMyAdminが起動しなくなった

古いMacからMAMPを個別に移行したら、phpMyAdminが起動しなくなった。 どうやらMySQLのユーザー/パスワードが不一致になってしまったようだ。 関連して他のエラーも発生したため、一連で対 …

DMM電子書籍の広告を自動出し分けするショートコード

DMM電子書籍のアフィリエイト広告は、そのままだとiframe使ってたり味気なかったりで使い勝手が悪いので、自分でカスタマイズしてみました。 ついでに、前に作ったアフィリエイト自動出し分けショートコー …

【Stinger8】gulp-phtml-simple-compでheader.phpをうまく圧縮する

Stinger8のテーマファイルをgulpのgulp-phtml-simple-compを使ってphp圧縮にかけたら、バージョンベクタの圧縮がうまくいかなかったので自分用のメモ。 参考gulp-pht …

【WordPress】Google Search Consoleへのサイトマップ登録と確認方法

Google Search Consoleにサイトマップを登録するメモ。これをしないとクローラに記事を拾ってもらえない。 7,8年前に1回やったことあるんですが、昔とやり方がめっちゃ変わってて結構焦り …

SiTest入門 ~サイトへの導入とABテストの実施まで~

サイト分析・改善ツールのSiTestというツールをがすごいという噂を聞きました。サイト自体を改変することなく、各種スプリットテスト(ABテストやリダイレクトテスト、多変量テスト等)を実施できるほか、ヒ …