このチュートリアルでは、Adobe Photoshopを使用して、ループするアニメーション GIF を作成する方法を紹介します。オニオンスキン表示を使用することで、各フレームのペイントがスムーズになります。
本チュートリアル内で使⽤する主な機能
タイムライン、カラーピッカー、カスタムブラシ、オニオンスキン、Web 用に保存(従来)
以下が大まかな流れです。
ビデオファイルを読み込んでタイムラインを作成します。
各フレームに Kyle のカスタムブラシで顔のペイントを作成します。
空白のレイヤーを作成し、各フレームに飾りとなるペイントを作成します。
作成したループアニメーションを GIF 形式で書き出します。
手順 1/2
練習用ファイルを開く
Photoshop を起動し、「ファイル」-「開く」から練習用サンプルファイル「BASE VIDEO TEXTURE.mp4」を選択して開きます。

ビデオファイルが読み込まれ、タイムラインが作成されました。

手順 2/2
ビデオをトリミング
終了位置のスライダーを「02:00f」の位置までドラッグしてワークエリアを縮めます。
ビデオがトリミングされ、再生時間が短縮されました。

手順 1/2
ビデオレイヤーを追加
メニューバーの「レイヤー」-「ビデオレイヤー」-「空白の新規ビデオレイヤーを追加」を選択します。

新規ビデオレイヤーが追加されました。

レイヤーパネルで新規レイヤーをダブルクリックし、レイヤー名を「FACE」に変更します。

手順 2/2
カスタムブラシで顔をペイント
カラーピッカーをクリックして描画色を水色「# 41d1e6」に設定し、「OK」で確定します。

ツールバーで「ブラシツール」を選択し、カスタムブラシを選択して以下のように設定しま す。
直径:「40px」
不透明度:「100%」
ブラシの種類:「megapack」-「Inkbox」-「Kyle's Inkbox-Rough Carver」
Hint 追加ブラシの入手方法
ここでは、「Kyle's Inkbox-Rough Carver」というブラシを使用しています。Photoshopで は製品にあらかじめ組み込まれたブラシの他に、お好みのブラシをダウンロードして追加することができます。Kyle's Inkbox-Rough Carverは、Kyle T.Webster 氏によるカスタムブラシで、Adobeのサイトから入手することができます。ダウンロードサイトは、 Photoshop から開くことができ、以下の手順で入手できます。

ブラシで顔をペイントし、タイムラインの「次のフレームに移動」をクリックします。

タイムラインの「次のフレームに移動」をクリックし、
タイムラインのパネルメニューから「オニオンスキン表示を使用」をクリックします。
オニオンスキンが表示されました。

タイムラインのパネルメニューから「オニオンスキン設定...」をクリックします。
オニオンスキンオプションで各メニューを以下に設定し、「OK」で確定します。
前のフレーム:1
後のフレーム:0
フレーム間隔:1
最大不透明度(%):20
最小不透明度(%):10
描画モード:通常

タイムラインの「次のフレームに移動」をクリックし、同様の手順で各フレームにブラシで顔をペイントしていきます。

手順 1/2
パターンペイントを追加
「最初のフレームに移動」をクリックします。 メニューバーの「レイヤー」-「ビデオレイヤー」-「空白の新規ビデオレイヤーを追加」を選択します。

追加されたレイヤーをドラッグして、FACE の下に移動します。

追加されたレイヤーの名前の部分をダブルクリックし、レイヤー名を「PATTERN」に変更します。

ブラシを好みのサイズ、種類、描画色に設定して各フレームの顔周りに自由な感覚でペイントを追加していきます。

手順 2/2
ディテールペイントを追加
最初のフレームに移動をクリックします。 メニューバーの「レイヤー」-「ビデオレイヤー」-「空白の新規ビデオレイヤーを追加」を選択します。

新規ビデオレイヤーが追加されました。

追加されたレイヤーをダブルクリックし、レイヤー名を「DETAILS」に変更します。

ブラシを好みのサイズ、種類、描画色に設定して各フレームの顔周りに自由な感覚でペイントを追加します。

手順 1/2
再生の設定
タイムラインで「再生オプションを設定」をクリックし、「ループ再生」を有効にします。

手順 2/2
アニメーションをレンダリング
メニューバーの「ファイル」-「書き出し」-「Web 用に保存(従来)...」を選択します。

ダイアログボックスが開きました。
各メニューを以下に設定し、「保存」をクリックして無限にループするアニメーションを書き出します。
ファイル形式:「GIF」
ループオプション:「無限」

以上で今回のチュートリアルは終了です。

今回の例では、Kyle のユニークなカスタムブラシと Photoshop のタイムライン機能を使用して、フレームバイフレームのペイントでアニメーションを作成しました。Gif アニメを作成するツールにはさまざまなものがありますが、Photoshop なら今回の作例のようなユニークなブラシを利用して自由な表現で作品をつくることができます。画像やペイントを柔軟に組み合わせ、豊かな発想で作品作りに挑戦してみてください。