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

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

ワードプレス画質比較 ImageMagick と Compress JPEG

WordPress(ワードプレス)の画像圧縮方法の違いによる写真画質の比較を行います。今回はワードプレス標準のGDと、プラグイン「Compress JPEG & PNG...
WP-Divi-elegant-themes-logo

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

今回はワードプレスの「Divi(by Elegant...
photoshop-animation-gif-logo01

Photoshopを使ってコマ送り動画 を作成する アニメーションGif

今回は Photoshop を使って複数の写真からコマ送り動画を作成する方法を図解します。最終的にアニメーション Gif として保存します。Photoshop を使ってコマ送り動画を作成する...

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

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

Pin It on Pinterest