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

         

photoshop

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

2021年02月24日 8:00 

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

こんにちは、hgmです。

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

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



ボタンの素材を用意する

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

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

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

 

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

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

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

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



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

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

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

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

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

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

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

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

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

 

保存する

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

関連記事

この記事を書いた人

アバター

hgm

農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます!