今回は 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に動画変換する方法 Convertioを利用

動画を次世代フォーマットの WebM に変換する方法はいろいろありますが、オンラインファイルコンバーターの「Convertio」を利用することで、オンライン上で簡単に WebM...

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

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

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

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

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

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

次世代フォーマットWebPの画質比較 Jpeg2000とJpeg

今回は次世代フォーマットでの画像配信のために、実際に次世代フォーマットとされる「WebP、Jpeg2000」の画像を作成し、Jpegでの保存画質とを比較をしてみようと思います。次世代フォーマット...

Pin It on Pinterest