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

Web製作

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

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

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

蜘蛛ですが、なにか?
無料サンプル
富士山さんは思春期
無料サンプル
MILKティーチャー
無料サンプル
ハレンチ
無料サンプル

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

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

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

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

フレームのディレイ設定

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

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

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

-Web製作
-,

執筆者:


comment

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

関連記事

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

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

【備忘】gitのglobal userとlocal user使い分け

Macで初めてgit commitした時に、「お前は誰だ?」的な感じで怒られた。

でユーザー名とメールアドレスを指定する必要があるらし …

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

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

GulpでWordPressのCI 〜実装編〜

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

CSSで背景(background-color)を斜めにする

本サイトの紹介ページのように、CSSだけで背景を斜めにします。 目次 やりたいこと HTMLとCSS ポイント やりたいこと 以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なること …