photoshop
Photoshopでキラッと光るボタンを作成する方法【GIFアニメーション】
2021年02月24日 8:00
こんにちは、hgmです。
今回は下記のような、キラッと反射して光るボタンをPhotoshopを使って作成する方法をご紹介します。
動きがあると目立たせることができるので、LPサイトなどで活躍できそうです！
ボタンの素材を用意する
まずはボタンの素材を作っていきます。
下記のように、ボタンの土台（背景）と文字を用意します。
ボタンの背景はグラデーションオーバーレイを使用し、少し立体的にしてみました。
続いて反射の光を作成します。
長方形ツールで塗りを白にして長方形を作成します。
作成した長方形にレイヤースタイルを追加し、下記のように光彩をつけます。
スタイルを設定したら、レイヤーの不透明度を50%にし、作成した長方形を斜めに角度をつけます。
今回は角度を30度にしてみました。
これで反射光が完成しました。反射光は一旦レイヤーを非表示にしておきましょう。
アニメーションを作成する
素材が完成したら、アニメーションをつけていきます。
Photoshopのメニューのウィンドウより「タイムライン」を選択すると、ワークスペース下にウィンドウが追加されるので「フレームアニメーションを作成」ボタンをクリックします（「ビデオタイムラインを作成」になっている場合は矢印ボタンより変更できます）。
自動的にコマが1つ作成されるので、①ディレイを2秒に設定し、②を押して③複製します。
さらにもう1つ複製し2番目のディレイを0.05秒に設定しレイヤーの反射光を表示させ、再度複製します。
下記の画面になっていればOKです。
反射光の位置を設定します。
反射光のレイヤーを選択し、タイムラインの2番目はボタンの左端に、3番目は右端に反射光の画像を持っていき、開始・終了位置を設定します。
位置が設定できたら、タイムラインの2、3番を選択し右下のアイコンをクリックします。
トゥイーンの設定画面が開くので、追加するフレームを5にしてOKボタンをクリックします。
タイムラインが下記のようになっていれば完成！
再生ボタンを押して動きを確認しましょう。
保存する
ファイル > 書き出し > Web用に保存で赤枠の①GIF、②無限にし、保存します。
関連記事
この記事を書いた人
hgm
農業高校出身フロントエンドエンジニアの社員hgmです。 猫センサー搭載済みの愛猫家。 広い視野を持って日々邁進していきます！
