Photoshop でこれらのチュートリアルをお試しください
写真を編集して新しい画像やグラフィックを作成
動きのあるグラデーションを作成する方法
このチュートリアルでは、Adobe Photoshopを使用して、グラデーションがループして動くアニメーションを作成するテクニックを紹介します。Webサイトのタイポグラフィや動画のオープニングタイトルで使用すると、よりクリエイティブの印象を高めることができます。
必要なもの
アプリ内で使ってみる
本チュートリアル内で使用する主な機能
べた塗り、カラーピッカー、ブラシツール、色相・彩度、スマートオブジェクト、クリッピングマスク、ビデオタイムライン、自由変形、ループ再生
以下が大まかな流れです。
背景とグラデーションを作成
青色の背景にピンクと水色で描画しグラデーションレイヤーを作成します。
ブラシの硬さを0にすることで色の境目をぼかします。レイヤーの調整
グラデーションの彩度を上げて鮮やかにします。
クリッピングマスクを使用して、グラデーションをテキストに反映させます。アニメーションを作成
タイムライン上にキーフレームを追加します。
グラデーションが動くようなアニメーションにするために、各キーフレームのグラデーションョンレイヤーを変形および移動させます。ループを作成
最初のキーフレームを最後のキーフレームにペーストしてアニメーションをループさせます。「ループ再生」を設定して再生し、アニメーションを確認します。
1. 背景とグラデーションを作成
手順 1/3
練習用サンプルファイル
を開くPhotoshopを起動し、「ファイル」-「開く」から練習用サンプルファイル「animated-gradient.psd」を選択して開きます。
黒い背景と「LightLut」のテキストの画像が開きました。
手順 2/3
背景を作成
レイヤーパネル下部の「塗りつぶしまたは調整レイヤーを新規作成」「べた塗り」を選択します。
画面にレイヤーパネルが表示されない場合は、ウィンドウメニューから「レイヤー」を選択すると表示されます。
「カラーピッカー」で色を青（#2727D5）に設定し「OK」をクリックして確定します。
手順 3/3
グラデーションを作成
レイヤーパネル下部の「新規レイヤー作成」をクリックします。
レイヤーが追加されました。
ツールバーの「ブラシツール」-「ソフト円ブラシ」を選択し、ブラシを以下に設定します。
直径：2700px
硬さ：0%
ツールバーで「描画色の設定」をクリックして、カラーピッカーを開きます。
カラーピッカーでピンク（#ff25de）を選択して「OK」で確定後、ブラシで上部を描画します。
ツールバーで「描画色の設定」をクリックして、カラーピッカーを開きます。
カラーピッカーで水色4befffを選択して「OK」で確定後、ブラシで下部を描画します。
2. レイヤーの調整
手順 1/3
彩度の調整
レイヤーパネル下部の「塗りつぶしまたは調整レイヤーを新規作成」「色相・彩度」を選択します。
色相・彩度調整レイヤーが追加されました。属性パネルで「彩度」を+100に設定します。
グラデーションが鮮やかに変化しました。
手順 2/3
スマートオブジェクトに変換
Shiftキーを押しながらクリックし、べた塗りレイヤー、グラデーションレイヤー、調整レイヤーを選択します。右クリックをしてメニューから「スマートオブジェクトに変換」を選択します。
スマートオブジェクト に変換されました。
手順 3/3
クリッピングマスクでテキストをグラデーション化
スマートオブジェクトを右クリックして「クリッピングマスクを作成」を選択します。
クリッピングマスクによってテキストにグラデーションが適用されました。
3. アニメーションを作成
手順 1/2
タイムラインを表示
メニューバーから「ウィンドウ」-「タイムライン」を選択し、タイムラインパネルの「ビデオタイムラインを作成」をクリックします。
手順 2/2
キーフレームの追加
command（Windowsの場合はCtrl）+Tを押して自由変形ツールを呼び出します。
レイヤーの周囲についたハンドルをドラッグして、グラデーションを拡大および移動し、Enter / Returnキーで確定します。
タイムラインパネルの「色相・彩度1」レイヤーの矢印をクリックで展開し、「変形」の横のストップウォッチのアイコンをクリックします。
アニメーションの最初のキーフレームが作成されました。
再生ヘッドを進めます。command（Windowsの場合はCtrl）+Tを押して自由変形ツールを呼び出し、グラデーションを回転および移動し、Enter / Returnキーで確定します。
キーフレームが追加されました。
同様の手順で、再生ヘッドを進めながらグラデーションのサイズ、向き、回転を調整し、さらに 2 つのキーフレームを追加します。
4. ループの作成
手順 1/2
キーフレームの設定
再生ヘッドをアニメーション終了位置に移動してキーフレームアイコンをクリックします。
最初のキーフレームを右クリックし「コピー」を選択します。
最後のキーフレームを右クリックし「ペースト」を選択します。
手順 2/2
ループを再生
最後のキーフレームで右クリックし「ワークエリア終了時間を設定」を選択します。
「再生オプションを設定」を展開し、「ループ再生」をオンにします。
「再生」をクリックしてアニメーションのループを確認します。
以上で今回のチュートリアルは終了です。
作成したアニメーションはビデオやGIFアニメとして書き出すことができます。ビデオ作品に組み込んで使用したいときはタイムラインパネルのパネルメニューから、「ビデオをレンダリング」を選択して、ビデオとして書き出します。Webで使用したい場合はGIFアニメとして書き出すのが良いでしょう。GIFアニメとしての書き出し方法は、以下のヒントをご参照ください。
ヒント
Photoshopでグラデーションがループするアニメーションを作成することができました。これをGIFアニメとして書き出したい場合は、「ファイル」-「書き出し」-「Web用に保存（従来）」を選択します。
「Web用に保存」で、最適化形式を「GIF」にして保存します。
