今回は Adobe Photoshop を使ってグラデーションが経時的に変化するアニメーションGifを作成する方法について図解します。前に作成したパターンとはまた別パターンです。作成しておくと背景などに利用出来て便利です。簡単ですのでぜひ挑戦してみてください。

アニメーションGifのカラーグラデーション動画の作成 Photoshop利用

1)ファイルを新規作成する

上記メニュー>「ファイル」>「新規作成」をクリックして、下記の新規ドキュメントのパネルを呼び出して、

まず好きなサイズで新規ドキュメントを作成します。

2)グラデーションを作成する

「グラデーションツール」をクリックします。
線形変化で色は虹色に変化するものを選びます。
マウスでクリックドラッグして、線形グラデーションを作成します。Shiftキーを押していると角度が制限されて直角をとりやすいです。

3)グラデーションを拡大する

グラデーションを縦方向に拡大し伸ばします。

4)表示範囲を最終的に作りたいサイズに変更する

トリミングして表示範囲を一番下に移動します。

5)フレームアニメーションを作成する

フレームアニメーションを作成するには、上部メニューの「ウィンドウ」>「タイムライン」をクリックしてタイムラインのパネルを表示します。

フレームアニメーションを作成をクリックします。

6)フレームを複製する

「選択したフレームを複製」をクリックします。

7)最後のフレームの画像表示範囲を移動する

フレームを追加したら最後のフレームの表示範囲を移動します。

8)フレームディレイを設定する

「✔(チェックマーク)」をクリックして承認します。

9)トゥイーンを使って移動を補間させる

「トゥイーン」を使ってフレームを補間し作成します。 前のフレームとの間で、すべてのレイヤーを、位置の点で補間させます。
今回は50枚追加して作成してみました。

10)アニメーションGifとして保存する

アニメーションGifとして保存するには、

上部メニューの「ファイル」>「書き出し」>「Web用に保存」をクリックします。

Web用に保存のパネルが表示されるので、プリセットに「Gif 128 ディザ」を選択し、画像のサイズを選択し、「保存」をクリックします。

11)作成したアニメーションGif

下記のようにカラーが移動しながら変化していくグラデーションアニメーションGifが作成できます。

ワードプレス(WordPress)の写真関連情報 画像表示情報

ワードプレスで写真サイトを構築する際に役に立ちそうな設定や情報をまとめています。こちらはワードプレスの写真設定や画像表示に関連する情報の目次ページとしています。なるべく図を用いて簡単に解説するようにしようと思っています。参考にどうぞ。

WebM動画に変換する方法 Internet Friendly Media Encoder

今回は無料のアプリを利用して簡単に 次世代フォーマットの WebM に動画を変換する方法について図解します。「 Internet Friendly Media Encoder...
photo-gallery-top5-logo-01

表示の綺麗な写真ギャラリー 無料プラグイン Top 5 2019 ワードプレス

今回は2019年春現在で、WordPress(ワードプレス)の無料の写真ギャラリープラグインのうちから、表示が綺麗で設定管理の簡単なプラグインを5つご紹介します。全てレスポンシブ対応のギャラリーを作成...

サイトの高速化 写真のWebP化の方法 Photoshop利用

サイトの高速化の方法のひとつに、表示させる写真や画像に次世代フォーマットを利用するというものがあります。次世代フォーマットにはいくつか案があるのですが、今回はGoogleが開発している WebP...

ワードプレスで次世代フォーマットでの画像の配信 WebPの画質比較

PageSpeed Insights でのスピードアップの提案に「次世代フォーマットでの画像の配信」というものがあります。次世代画像フォーマットのうち、今回はGoogleが開発している「 WebP...
divi-lesson5-2-movie

ワードプレス Diviの動画利用方法 Diviレッスン5-2

今回は Divi で作成しているサイトに動画を設定する方法について図解します。Divi...

ワードプレスで WebP を簡単に作成する方法 EWWW Image

WordPress(ワードプレス)初心者向けに、今回はワードプレスで次世代フォーマットでの画像配信を簡単に行う方法、「EWWW Image...

Pin It on Pinterest