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

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

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

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

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

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

ImageMagick の設定方法と写真画質比較

さくらのレンタルサーバーを使い WordPress(ワードプレス)のクイックインストールを行うと、標準で ImageMagick Engine...
photo-gallery-top5-logo-01

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

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

ワードプレス無料ギャラリー Robo Gallery 設定と機能

Wordpress(ワードプレス)の無料ギャラリープラグインにはいろいろありますが、Robo Gallery...

Pin It on Pinterest