Photoshop CCでアニメーションGIF制作しました。
知り合いからの依頼でスマホ用とPC用にバナー広告をアニメーションGIFで作成しました。下記がモバイル用で正面のメインメッセージが点滅、その上下のデンジャーマークが左右に動く、というタイプです。
後で紹介しますが、PC版は上下の蜂の巣のような模様が100％⇔50％にぼんやり暗くなってゆっくり明るくなる効果を追加しています。
こちらは、不透明度を使ったもので100％と0％を交互に設定しています。感覚は0.5秒ごとに100→0→100の繰り返しです。上下の工事現場にあるような模様は上が左から右、下が右から左へ動くように設定。
メインメッセージも上下の動くマークも、元画像の該当部分を範囲設定で新規のレイヤーを作って、さらにそれをコピー。最初に作成したレイヤーを真っ黒に塗りつぶして、背景の画像が見えないようにしてから、一番上のレイヤーの不透明度を0→100％に一定間隔で設定することで点滅を実現しています。
上下の動く模様は、上は同じように作成したレイヤーを3回コピーしてつなげ、つなぎ目がわからないように修正してからレイヤーを結合しています。
そして、レイヤーを左に動かして、ギリギリ右端がメッセージ列の右端にくるようにします。ここを開始点にして、右に動かし、一旦保存して、ちょうどいいスピードで表示されるまで調整します。下は逆に、右端からはじめて左に動かしつつ位置を決め、速度を確認しながら微調整します。これで出来上がりです。
基本的なやり方は同じですが、保存したPSDファイルの工程を削除し、最初からやり直したので、メッセージの点滅スピードと、上下の動きの方向が違います。
上下の蜂の巣の模様は100⇔50％になるように設定し、どのくらいのスピードでフェイドイン（だんだん明るくなる）してフェイドアウト（だんだん暗くなる）するのか、というのを調整しました。
以上久々に制作事例をアップしました。絶賛受付中です！＾＾ｗ
あわせて読む
ビジネスに活用できる情報収集のために英語猛勉中です＾＾英語とPCとネット関連で、日々やっている事や気になった事、忘備録のような感じで投稿していきます。