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

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

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

関連記事

【Stinger8】固定ページを自由にデザインしてみた

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか?? Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …

GulpでWordPressのCI 〜設計編〜

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

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

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

【WordPress】画像URLをショートコード化する

imgタグなどでsrc属性を指定する際の、画像uriをショートコード化して環境差異を無くします。 目次 作業の目的 メディア設定の変更 functions.phpにuploadsディレクトリを返すショ …

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

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