このチュートリアルでは、Adobe Photoshopを使用してアニメーションGIFを作成する方法を学びます。Photoshopを使えば、料理レシピや工作、クレイ(粘土)アニメ など、定点撮影した複数の写真を使っ てコマ撮りアニメを作ることができます。複数のレイヤーからアニメーションGIFで書き出すことができますので、 Webページやブログへ掲載することも、SNSで手軽にシェアすることもできます。まずは下の一分動画を確認して、操作を開始しましょう。

難易度2/5

 

本チュートリアル内で使用する主な機能
レイヤーマスク、タイムライン、フレームアニメーションの作成

 

以下が大まかな流れです。

 

  1. レイヤーマスクを作成
    Photoshopを起動して、popcornとkernelsの2枚のレイヤーが入ったドキュメントを開きます。popcornにレイヤーマスクを作成します。
  2. ブラシツールでペイント
    描画色と背景色を入れ替えます。
    ブラシツールでマスクの上にポップコーン1粒分のみをペイントします。
    できたレイヤーを複製し、複製したレイヤーをポップコーン数粒分ペイントします。下のレイヤーのすべてのポップコーンが見えるまで、これを繰り返します。
  3. フレームアニメーションを作成
    アニメーションの各フレームを作成します。
    レイヤーからフレームを作成し、カーネルレイヤーの表示をオンにして、アニメーションのすべてのフレームで表示できるようにします。
  4. ループを作成
    ループアニメーションを作成します。
    フレームを逆並びにしたアニメーションも作成し、ポップコーンが膨らんでから膨らむ前に戻る動きがループするアニメーションにします。
  5. アニメーションGIFの書き出し
    「Web 用に保存(従来)」を使用して、アニメーションGIFで書き出します。

1. レイヤーマスクを作成

手順 1/3
練習用サンプルファイルを開く

Photoshopを起動し、「ファイル」-「開く」から練習用サンプルファイル「stop-motion-photo-animation.psd」を選択して開きます。

コマ撮りアニメーションを作成する方法

 

popcornとkernelsの2枚のレイヤーが含まれるドキュメントが開きます。

コマ撮りアニメーションを作成する方法

手順 2/3
レイヤーマスクを作成

「popcorn」レイヤーを選択し、レイヤーパネルの「レイヤーマスクを追加」をクリックして、レイヤーマスクを作成します。

コマ撮りアニメーションを作成する方法

手順 3/3
レイヤーマスクを反転

作成したレイヤーマスクをWindowsならCtrl + I、macOSならCommand + Iを使用して選択範囲を反転します。

コマ撮りアニメーションを作成する方法
 
ドキュメント全面にマスクがかかりました。
コマ撮りアニメーションを作成する方法

2. ブラシツールでペイント

手順 1/3
描画色と背景色を入れ替え

レイヤーマスクのサムネールをクリックで選択して、ツールパネルで、「ブラシツール」を選択し、「描画色と背景色を入れ替え」をクリックし、描画色を白に設定します。

コマ撮りアニメーションを作成する方法

手順 2/3
ブラシの選択

オプションバーでブラシプリセットピッカーを開き、「汎用ブラシ」から「ハード円ブラシ」を選択し、直径を50px、硬さを100%に設定します。

コマ撮りアニメーションを作成する方法

手順 3/3
レイヤーマスクをペイント

左上端の1粒が表示されるように、レイヤーマスク上をペイントします。

コマ撮りアニメーションを作成する方法

 

その後、ペイントしたレイヤーをWindowsならCtrl + J、macOSならCommand + Jで複製します。

コマ撮りアニメーションを作成する方法

 

複製したレイヤーを、左上から順に数粒ずつペイントしていき、すべてのポップコーンが表示されるまでこの手順を繰り返します。

コマ撮りアニメーションを作成する方法

複数のレイヤーが作成されました。

3. フレームアニメーションを作成

手順 1/3
タイムラインの表示

「ウィンドウ」-「タイムライン」を選択します。

コマ撮りアニメーションを作成する方法

 

タイムラインが表示されました。

コマ撮りアニメーションを作成する方法

手順 2/3
フレームアニメーションの準備

タイムラインで「フレームアニメーションを作成」を選択します。

コマ撮りアニメーションを作成する方法

手順 3/3
フレームを作成

パネルメニューの「レイヤーからフレームを作成」を選択します。

コマ撮りアニメーションを作成する方法

 

「kernels」レイヤーの「レイヤーの表示 非表示」をオンにし、アニメーションのすべてのフレームで表示フレームで表示されされるようにします。

コマ撮りアニメーションを作成する方法

4. ループの作成

手順 1/2
フレームの複製

パネルメニューから「すべてのフレームを選択」を選択します。

コマ撮りアニメーションを作成する方法
 
パネルメニューから「フレームをコピー」を選択します。
コマ撮りアニメーションを作成する方法
 
パネルメニューから「フレームをペースト」-「選択範囲の後にペースト」-「OK」をクリックします。
コマ撮りアニメーションを作成する方法

アニメーションが複製されました。

手順 2/2
逆フレームの作成

パネルメニューから「フレームを入れ替え」を選択します。複製したフレームを逆にしたアニメーションが作成されました。

コマ撮りアニメーションを作成する方法

 

ポップコーンが1つずつ膨らんで、巻き戻しされる動きがループするアニメーションができました。

コマ撮りアニメーションを作成する方法

5. アニメーションGIF の書き出し

「ファイル」-「書き出し」-「Web用に保存(従来)」を選択します。

形式を「GIF」に変えて、アニメーショングループで、ループオプションを「無限」に設定します。アニメーションの再生を確認したら「保存」をクリックします。

コマ撮りアニメーションを作成する方法

 

以上のようにPhotoshopのレイヤーからストップモーションのアニメーションGIFを作成することができました。動画編集のソフトを使用せずに、手軽に静止画からアニメーションを作成することができます。料理の作り方や工作の手順など、時間の経過とともに状態が変化する様子を1つの画像ファイルで表現したいときなどに便利です。

01/16/2020

アーティスト:Aaron Bernstein

このページは役に立ちましたか。