今回は 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)の写真関連情報 画像表示情報

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

WP-Divi-elegant-themes-logo

写真サイトを作るのにワードプレスのDiviがおすすめな理由

今回はワードプレスの「Divi(by Elegant...

Responsive Photo Gallery 操作が簡単なワードプレスの無料写真ギャラリー

今回は操作がわかりやすくて使いやすいギャラリープラグインの「Responsive Photo Gallery – Images Gallery for...

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

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

簡単綺麗な写真ギャラリー Envira Photo Gallery 2019 ワードプレス

WordPress(ワードプレス)で写真を綺麗に魅せるサイトを作るには、ギャラリープラグインを使うのも有効です。今回は、数あるギャラリープラグインの中から「Gallery Plugin for...

ワードプレスの素敵なギャラリー Unite Gallery にできること

今回はWordpress(ワードプレス)のギャラリープラグイン「Unite Gallery」について図解説したいと思います。Unite Gallery には無料の「Unite Galley...
divi-lesson5-2-movie

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

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

Pin It on Pinterest