Photoshopでキラッと光るボタンを作成する方法【GIFアニメーション】

こんにちは、hgmです。

今回は下記のような、キラッと反射して光るボタンをPhotoshopを使って作成する方法をご紹介します。

動きがあると目立たせることができるので、LPサイトなどで活躍できそうです！

ボタンの素材を用意する

まずはボタンの素材を作っていきます。

下記のように、ボタンの土台（背景）と文字を用意します。

ボタンの背景はグラデーションオーバーレイを使用し、少し立体的にしてみました。

続いて反射の光を作成します。

長方形ツールで塗りを白にして長方形を作成します。
作成した長方形にレイヤースタイルを追加し、下記のように光彩をつけます。

スタイルを設定したら、レイヤーの不透明度を50%にし、作成した長方形を斜めに角度をつけます。
今回は角度を30度にしてみました。

これで反射光が完成しました。反射光は一旦レイヤーを非表示にしておきましょう。

アニメーションを作成する

素材が完成したら、アニメーションをつけていきます。

Photoshopのメニューのウィンドウより「タイムライン」を選択すると、ワークスペース下にウィンドウが追加されるので「フレームアニメーションを作成」ボタンをクリックします（「ビデオタイムラインを作成」になっている場合は矢印ボタンより変更できます）。

自動的にコマが1つ作成されるので、①ディレイを2秒に設定し、②を押して③複製します。

さらにもう1つ複製し2番目のディレイを0.05秒に設定しレイヤーの反射光を表示させ、再度複製します。
下記の画面になっていればOKです。

反射光の位置を設定します。
反射光のレイヤーを選択し、タイムラインの2番目はボタンの左端に、3番目は右端に反射光の画像を持っていき、開始・終了位置を設定します。

位置が設定できたら、タイムラインの2、3番を選択し右下のアイコンをクリックします。

トゥイーンの設定画面が開くので、追加するフレームを5にしてOKボタンをクリックします。

タイムラインが下記のようになっていれば完成！
再生ボタンを押して動きを確認しましょう。

保存する

ファイル > 書き出し > Web用に保存で赤枠の①GIF、②無限にし、保存します。