上のようなドローンが飛ぶGIFアニメーションを作ったときの要点メモ。Photoshopのどのような機能を使ったかや注意すべきポイントに絞って記載。
（ドローン画像の作り方や飛んでいるように見せるアニメーションの作り方については記載していません。）
PhotoshopのバージョンはPhotoshop CC 2018 バージョン19.1.3。
Photoshopでフレームアニメーションを作成
[ウィンドウ]→[タイムライン]を選択し、タイムラインビューを表示させる。
タイムラインビューの▼を押して「フレームアニメーションを作成」を選択。
「フレームアニメーションを作成」を押して１枚目のフレームを作成。
この時作成されるフレームは表示されているレイヤーの状態になることに注意。
トゥイーンで始点と終点をシームレスつなぐフレームを自動生成
１枚目のフレームを選択して、「選択したフレームを複製」でフレームをコピー。
続いて２枚目のフレーム内のオブジェクトをアニメーションさせる終点まで移動させる。
移動させたら２枚のフレームを選択して「アニメーションフレームをトゥイーン」を押して中間のフレームを自動生成。
今回は８枚で作成。
上記の作業を繰り返して全てのフレームを作成する。
フレームのディレイ設定
フレームのディレイはアニメーションの速度に影響する。
今回は0.1秒に設定。
Photoshop上で確認する速度と、実際に書き出してGIFアニメーションとして見える速度が異なるので、必ず作成途中で一度書き出して確認すること。
書き出し時の注意点（マットの指定）
書き出し時にマットの指定を必ず「なし」にすること。
なお、今回は[Web用に保存（従来）]を利用した。
GIF形式では透明にできるのは１色だけで、マットとは透過色を決める設定でデフォルトでは白になっている。
このマットの設定をデフォルトの白から「なし」に変更する。これをしないと書き出したGIF画像に白い枠線がついているように見えてしまう。
仕組みとしては、アンチエイリアスが効いている画像では透明部分と画像とのエッジの部分は段階的に変化していく。そのため、透明→透過色→透過しない色という風に色合いが変化するが、この透過色部分が白い枠線を生み出してしまうため。
