Tech Racho エンジニアの「?」を「!」に。
  • 開発

Photoshopでしましまアニメーションを作ろう

Webで背景透過を強調するために、こんな画像を使いたいことはありませんか?

しましま

しましま

これなら、デザインセンスが抜群の馬場でも作れそうです。

以下のようにやりました。

まずは、フィルタのハーフトーンパターンでしましまを描きます。

ハーフトーンパターンでしましまを描く

ハーフトーンパターンでしましまを描く

そして、アニメーションウィンドウを開きます。

アニメーションを開きます

アニメーションを開きます

背景をレイヤーにしたら、フレームアニメーション(タイムラインではない)に設定して、1コマずつ微妙にずらしていきます。

アニメーションを設定

アニメーションを設定

ハーフトーンの1マス分ずらしたら、後はループでスムーズに動いているように見えます。
透明部分ができないように、適当な大きさでスライスして、Web及びデバイス用に保存でGIFに書き出せばOKです。

これで格好いいアニメーションが作れますね!


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。