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

Web製作

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

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

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

絶頂欲求 デジタルモザイク版
無料サンプル
番台猫のタマさん
無料サンプル
センセ。
無料サンプル
彼女の雌顔 デジタルモザイク版
無料サンプル

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

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

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

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

フレームのディレイ設定

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

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

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

-Web製作
-,

執筆者:


comment

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

関連記事

GulpでWordPressのCI 〜設計編〜

WordPressのテーマファイルをローカルで開発してgithubにpush、そのままサーバーまでデプロイするCIを実現しようと考えています。自分の環境とか踏まえてまずはどうやって実現するか設計しまし …

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

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

STINGER8で初めての投稿の準備をする

WordPressのテーマ、STINGER8を利用した場合の、初めての投稿の準備をします。 目次 前提 アウトプットイメージの確認 投稿の基本形を考える ソースコードをブログ上に表示させるための準備 …

GulpでWordPressのCI 〜実装編〜

gulpを使ったWordPressのテーマファイルCIの実装編です。 設計編はこちらを参照ください。 目次 やりたいこと・動作環境・前提 やりたいこと・環境・バージョン ディレクトリ構成 利用モジュー …

【WordPress】サーバーのテーマファイルをFTPで自動バックアップ

私みたいに趣味でWordPressを使ってる人はレンタルサーバーを借りてサイトを公開していると思います。 最近のレンタルサーバーにはバックアップ機能が標準/オプションで用意されているものがほとんどです …