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

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

しましま

しましま

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

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

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

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

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

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

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

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

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

アニメーションを設定

アニメーションを設定

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

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

デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

関連する記事

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ

BPSアドベントカレンダー