Photoshop養成ギプス

【タイムライン】ドット絵のGIFアニメーションをつくる【フレーム】

-
psgips
【タイムライン】ドット絵のGIFアニメーションをつくる【フレーム】
【Photoshop講座】GIF アニメーションとは、静止画像をつなげて、Web 上でパラパラマンガのように動かすことができるファイル形式です。コマ送りの画像を、ひとつひとつ描いていくことは大変ですが、小さなドット絵ならカンタンに作成できます。あの懐かしい「スーパーマリオブラザーズ」を題材に、歩いてジャンンプする GIF アニメーションに挑戦してみましょう。
パターン化した動作をレイヤーにまとめる!
1コマ1コマを描いてアニメーションにするワケですが、オブジェクトのカタチを変えずに位置を動かしたり、2つのポーズを交互に繰り返す動作は、レイヤーの操作だけで効率的に行うことができます。アニメーションを構成するポーズをパターン化して、ひとつのドキュメントにレイヤーで保存することから始めましょう。
基本的な GIF アニメーションの作成
これから行う操作は、Photoshop を使って、基本的な GIF アニメーションを作成する方法です。16 x 16 ピクセルの小さな静止画を5種類作成し、それをつなぎ合わせて、ひとつのアニメーションを GIF 形式のファイルに出力するまでの操作をご紹介しましょう。
no509_00.gif
no509_01.png
このレッスンの動画を配信中!
【Photoshop講座】ドット絵のGIFアニメーションをつくる
サムネールをクリックすると、YouTube 動画にリンクします。
ひとつのドキュメントにまとめる
白地の新規画像を作成し、それぞれの使用する画像「Pose」をコピー&ペーストして、[Pose 1] 〜 [Pose 5] のレイヤーを作成します。
ひとつのドキュメントにまとめる
ひとつのドキュメントにまとめる
ドット絵の作成方法は?
作例は 16 x 16 pixel の小さなドット絵を使用しています。解説の便宜上、大半の画像は表示を拡大しています。ドット絵の作成方法は、以下のページを参考にしてください。
ひとつのドキュメントにまとめられたら、上にジャンプするスペースが必要なので、カンバスサイズを変更して、上にスペースを設けます。
カンバスサイズを変更
カンバスサイズを変更
[イメージ] メニューから、[カンバス] を選択し、[カンバスサイズ] ダイアログで、[高さ] に「20」pixel、[基準位置] のアンカーを下に設定して、[OK] をクリックします。
[カンバスサイズ] ダイアログを設定
[カンバスサイズ] ダイアログを設定
基本がわかる動画を配信中!
チャンネル登録をお願いします!
タイムラインを表示する
[ウィンドウ] メニューから、[タイムライン] を選択します。[タイムライン] パネルで、[フレームアニメーションを作成] をクリックします。すると、現在のドキュメントと同じ状態のフレーム (コマ) が作成されます。
[タイムライン] パネルを表示
[タイムライン] パネルを表示
[フレームアニメーションを作成] をクリック
[フレームアニメーションを作成] をクリック
[レイヤー] パネルで、[Pose 5] 〜 [Pose 2] を非表示にして、[Pose 1] を選択します。ひとつのフレームでは、いずれかの Pose と [背景] が表示されるように設定します。
[Pose 1] を選択
[Pose 1] を選択
ひとつのフレームを選択してレイヤーを設定
ひとつのフレームを選択してレイヤーを設定
基本がわかる動画を配信中!
チャンネル登録をお願いします!
基本ディレイを設定する
基本ディレイ (コマ送り秒) を設定します。[フレームのディレイを設定] をクリックして、メニューから [0.2] を選択します。[ループオプションを選択] をクリックし、メニューから [無限] を選択します。
基本ディレイに [無限] を選択
基本ディレイに [無限] を選択
フレーム複製で効率化!
1フレームめの設定ができたら、このフレームを複製して、後に続くフレームを編集していきます。
ファーストフレームを複製する
[選択したフレームを複製] をクリックし、Pose と同じ数のフレームを複製します。作例の Pose は全部で5種類なので、最初のフレームを含め、5フレームを複製しました。
[選択したフレームを複製] をクリック
[選択したフレームを複製] をクリック
レイヤーの表示/非表示を活用!
すべての Pose がドキュメントに含まれているので、レイヤーの表示 / 非表示で各フレームの表示を変えることができます。
フレームにポーズを割り当てる
それぞれのフレームと、Pose の表示を合わせていきます。2つめのフレームをクリックして、[レイヤー] パネルで、[Pose 1] を非表示にし、[Pose 2] を表示します。
フレームを選択してレイヤーを設定
フレームを選択してレイヤーを設定
no509_11.png
2つめのフレームをクリック
[レイヤー] パネルを設定
[レイヤー] パネルを設定
同じ要領で、その他のフレームを変更します。ひとつのフレームでは、いずれかの Pose と [背景] が表示されるように設定します。
4つめのフレームと5つめのフレームをそれぞれ選択
4つめのフレームと5つめのフレームをそれぞれ選択
絵柄の位置を移動!
[Pose 4] と [Pose 5] では、ジャンプする動きに変わるので、絵柄の位置を上 (垂直方向) へ移動しておきます。
[タイムライン] パネルで、4つめのフレームをクリックして選択します。[ツール] パネルで、[移動ツール] を選択して、[↑] キーを押して移動します。移動する距離は、ドキュメントの上端までです。
垂直方向に移動
垂直方向に移動
後の手順でフレームを追加!
ジャンプの動きは、後の手順でフレームを追加して、絵柄の位置を調整しながら滑らかにします。
[タイムライン] パネルで、5つめのフレームをクリックして選択し、[Pose 5] も同様にして、絵柄の位置を上 (垂直方向) へ移動しておきます。これで各フレームと、最初に作成した Pose の表示 (5種類) にすることができました。
垂直方向に移動
垂直方向に移動
繰り返し動作を複製でつくる
2つめのフレームをクリックし、[shift] キーを押しながら 3つめのフレームをクリックして選択します。[選択したフレームを複製] を2回クリックし、[Pose 2] と [Pose 3] を複製します。
2つのフレームを同時に複製
2つのフレームを同時に複製
繰り返し動作を複製で作成
繰り返し動作を複製で作成
2つの Pose を同時に複製して連続させると、歩く動きが表現できます。
2つの Pose を連続させて歩かせる
2つの Pose を連続させて歩かせる
フレームを増やして動きを滑らかに!
作例は最小限のフレーム数 (2コマ) で作成しています。滑らかな動きにするには、中間の動作の Pose を作成して追加し、たとえば、ひとつの動作が 5コマの場合は、5コマ分のフレームを選択して同時に複製し、繰り返し動作を作成します。
複製した範囲を [shift] キーを押しながらクリックして選択し、[選択したフレームを複製] をクリックして、繰り返し動作をさらに複製します。
選択した範囲のフレームを複製
選択した範囲のフレームを複製
オブジェクトの位置を変える
複製した境界 (中間点) に [Pose 4] のフレームをドラッグして移動します。
[Pose 4] のフレームをドラッグ
[Pose 4] のフレームをドラッグ
複製した境界 (中間点) に移動
複製した境界 (中間点) に移動
[選択したフレームを複製] をクリック
[選択したフレームを複製] をクリック
[Pose 4] を選択
[Pose 4] を選択
[選択したフレームを複製] をクリックして、[Pose 4] のフレームを複製し、ジャンプ後の動きを滑らかにするフレームを追加します。[レイヤー] パネルで、[Pose 4] を選択し、[↓] キーを押して移動します。
垂直方向に移動
垂直方向に移動
[Pose 4] は、歩く動作から勢いよくジャンプし、再び歩く動作に戻る役割があります。飛び出し速度が早く、着地速度を遅く見せるには、ジャンプ後にフレームを追加して、オブジェクトを着地までの中間の位置に移動します。同じ Pose を垂直に移動するだけで、ジャンプ後の動きを滑らかにすることができます。
ジャンプ後を滑らかにする
ジャンプ後を滑らかにする
最後の [Pose 5] のフレームをクリックし、[選択したフレームを複製] をクリックして複製します。
[選択したフレームを複製] をクリック
[選択したフレームを複製] をクリック
[Pose 5] の動きは、驚いて飛び上がったマリオが、下に落ちて見えなくなるゲームオーバーのアニメーションです。なので、いちばん最後は見えなくなるまで下に移動させます。[レイヤー] パネルで、[Pose 5] を選択し、[shift] キーを押しながら、絵柄を完全に見えなくなるまで下にドラッグします。
見えなくなるまで下にドラッグ
見えなくなるまで下にドラッグ
フレーム間を自動的に作成する
ひとつ前のフレームを [shift] キーを押しながらクリックします。2つのフレームが選択できたら、[アニメーションフレームをトゥイーン] をクリックします。
2つのフレームを選択
2つのフレームを選択
[アニメーションフレームをトゥイーン] をクリック
[アニメーションフレームをトゥイーン] をクリック
[トゥイーン] ダイアログで、[追加するフレーム] に「3」を設定して、[OK] をクリックします。選択したフレームの間に3つのフレームが追加され、アニメーションが自動的に作成されたことを確認します。これで、すべてのフレームが作成できました。
[トゥイーン] ダイアログを設定
[トゥイーン] ダイアログを設定
[トゥイーン] は、選択した最初のフレームと最後のフレームの間に、[追加するフレーム] で設定したフレーム数を追加し、それぞれの中間値が自動的に割り当てられます。
[トゥイーン] で自動的に作成
[トゥイーン] で自動的に作成
その他の効果も適用できる!
作例では、垂直方向に移動する [位置] のパラメーターが適用され、そのほか、[不透明度]、[効果] の変化も同時に適用することができます。
アニメーションの動きを確認する
[フレームのディレイを設定] をクリックし、ディレイの秒数を調整して、アニメーションの動きを確認してみましょう。[アニメーションを再生] をクリックします。すると、ウィンドウ内のドキュメントが動きだし、現在設定中のアニメーションがプレビューできます。
no509_30.png
[アニメーションを再生] をクリック
[アニメーションを再生] をクリック
GIF アニメーションで保存する
[ファイル] メニューから、[Web 用に保存] を選択します。[Web 用に保存] ダイアログで、[プリセット] に[GIF 64 ディザ] を選択して、[保存] をクリックします。
[Web 用に保存] ダイアログを設定
[Web 用に保存] ダイアログを設定
[Web 用に保存] ダイアログで保存した GIF ファイルを、「Safari」などの Web ブラウザで読み込むと、Web ブラウザで表示されたときの GIF アニメーションが確認できます。
16 x 16 pixel の GIF アニメーション
16 x 16 pixel の GIF アニメーション(1500%拡大)
関連記事
psgips
Posted bypsgips