PhotoshopでアニメーションGIFファイルを作成する方法

GIF アニメーション ファイルは、Web ページ上の画像やアバターに配置できます。 Photoshop CS3 Enhanced (現在は CS6) を使用すると、ビデオを作成および編集し、簡単に GIF ファイルに変換できます。ここでは、最新バージョンの Photoshop と以前のバージョンを使用して GIF ファイルを作成する方法を説明します。

ステップ

方法 1: Photoshop CS6

1. 1Photoshopを開きます。バージョンは少なくとも CS3 Enhanced 以上である必要があります。 CS3 Enhanced から CS6 までのバージョンには、必要な機能がすべて含まれています。
2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/66\/Import-video-frames.jpg\/460px-Import-video-frames.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/66\/Import-video-frames.jpg\/550px-Import-video-frames.jpg","smallWidth":460,"smallHeight":320,"bigWidth":550,"bigHeight":383,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2ビデオを開きます。 [ファイル] メニューから、[インポート] > [ビデオ フレームをレイヤーに] を選択します。
   • ビデオ ファイルを選択します。Photoshop は最大フレーム レートが 500 のビデオのみをサポートすることに注意してください。ビデオが 500 フレームより長い場合は、まずトリミングしてください。
3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Import-Video-To-Layers.jpg\/460px-Import-Video-To-Layers.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Import-Video-To-Layers.jpg\/550px-Import-Video-To-Layers.jpg","smallWidth":460,"smallHeight":212,"bigWidth":550,"bigHeight":254,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3インポート設定を調整します。ポップアップウィンドウで設定を調整します
   • インポート範囲:
   • 「最初から最後まで」が最も簡単なインポート方法です。 Photoshop はすべてのフレームをインポートします。フレームが 500 を超える場合は、500 フレームより前のコンテンツがインポートされます。
   • 「選択範囲のみインポート」では、インポートする開始フレームから終了フレームまでの範囲を選択し、下の調整バーで範囲を調整することができます。スクロール ポインターを使用してムービー クリップをすばやく参照し、間隔ボタンをドラッグして範囲を設定します。
   • 制限が N フレームごとである場合、フレームは少なくとも半分にカットされますが、結果は滑らかでない画像になります。
   • フレームアニメーションを作成すると、ムービーアニメーションとフレーム画像間の変換が可能になります。選択を解除すると、画像はフレームごとにインポートされますが、アニメーションとしては作成されません。このガイドでは、このオプションを確認します。
   • 設定が完了したら、「確認」をクリックしてビデオをインポートします。数秒待つと、すべての個別のフレームがレイヤー インターフェイスに表示され、すべてのフレームがタイムラインにリストされます。
4. 4画像を調整します。 Photoshop の調整レイヤーを使用して、効果を追加したり、色、明るさ、コントラストなどを変更できます。デフォルトでは、レイヤー調整はすべてのレイヤーに適用されます。
   • さまざまな組み込みの調整ツールを使用したり、新しいレイヤーを重ねてすべての画像をカバーしたり、アニメーション画像全体を変更したり、アニメーションの背景として使用する背景レイヤーを作成したりすることができます。
   • たとえば、人が立ってあたりを見回しているビデオがある場合、下部に都市と田舎のレイヤーを追加して人物を背景に配置し、次にオーバーレイ レイヤーを追加して茶色と黒の色調を追加し、ハリー ポッターの動く新聞のような効果になるようにスタイルを調整することもできます。
5. 5各レイヤーを編集します。タイムラインのフレームをクリックすると、関連するレイヤーが表示されます。デフォルトでは、フレーム数とレイヤー数は等しく、たとえば、18 フレームは 18 番目のレイヤーになります。
   • 個々のフレームを変更したり、効果を追加したり、小さな欠陥などを削除したりできます。複数のレイヤーの効果を変更すると、アニメーションの効果を変更するのと同じになります。
   • たとえば、あるフレームにレンズフレアを追加する場合は、Control + Alt + F (Mac の場合は Command + Option + F) を押して、同じフィルターを次のフレームに適用します。フィルター効果を 10% 減らし、次のフレームで同じ手順を繰り返し、フィルター効果が 0% になるまで続けます。すると、アニメーション化されたレンズフレアのように見えます。
6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a2\/GIF-export-settings.jpg\/460px-GIF-export-settings.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a2\/GIF-export-settings.jpg\/550px-GIF-export-settings.jpg","smallWidth":460,"smallHeight":335,"bigWidth":550,"bigHeight":400,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6 GIF ファイルを保存します。 「ファイル」をクリックし、「Web 用に保存」を選択して、GIF ファイルをエクスポートするためのサイズと出力オプションを選択します。 広告する

方法2: Photoshop CS3、4、5 Enhanced

1. 1ドキュメントを作成します。各フレームを独自のレイヤーに配置します。
   • または、既存のビデオを開きます。 [ファイル] メニューから、[インポート] > [ビデオ フレームをレイヤーに] を選択します。
2. 2ウィンドウで、アニメーションで使用するフレームを選択します。
   • 注: 複数のフレームを選択するには、最初のフレームを選択し、Shift キーを押しながら最後のフレームをクリックして、その間のすべてのフレームを選択します。
3. 3アニメーションウィンドウを開きます。ウィンドウメニューからアニメーションを選択します。開けてみると写真のような感じでした。このように見えない場合は、タイムライン ビューポートで開いています。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/e\/e7\/Project3pics2_475.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/e\/e7\/Project3pics2_475.jpg","smallWidth":460,"smallHeight":125,"bigWidth":550,"bigHeight":150,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
4. 4フレームアニメーションに変更しました。アニメーションウィンドウの右上隅にある「ポップアップ」メニューをクリックし、「フレームアニメーションに変換」を選択します。
   • 独立したレイヤーごとにフレームを作成します。ポップアップ メニューをクリックし、「レイヤーからフレームを作成」を選択します。
   • 注意: すべてのレイヤーを選択する必要はありません。一部のレイヤーを選択するには、アニメーション設定ウィンドウの右下にある [レイヤーのコピー] ボタンを使用してレイヤーを追加します。
5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/34\/Project3pics5_974.jpg\/460px-Project3pics5_974.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/34\/Project3pics5_974.jpg\/624px-Project3pics5_974.jpg","smallWidth":460,"smallHeight":60,"bigWidth":624,"bigHeight":82,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5各フレームを必要に応じて調整します。アニメーション文字列内のフレームを選択し、Photoshop のメイン ウィンドウで目的のスタイルに応じてフレーム イメージを変更します。
   • 注: フレームを表示または非表示にするには、アニメーション設定ウィンドウの目のアイコンをクリックして、フレームを表示するかどうかを選択します。
6. 6「各フレーム」の下の矢印ボタンをクリックしてタイミング メニューを表示します。各フレームの再生時間を選択します。 {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/e\/ec\/Project3pics6_252.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/e\/ec\/Project3pics6_252.jpg","smallWidth":460,"smallHeight":243,"bigWidth":550,"bigHeight":291,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
7. 7GIFファイルを保存します。 [ファイル] メニューから [Web またはデバイス用に保存] を選択し、ドロップダウン メニューから [GIF] を選択します。
   • ビデオ クリップとして保存するには、[ファイル] - [エクスポート] - [ビデオとして保存] を選択します。
   広告する

ヒント

• Adobe ImageReady は開発者によって開発されなくなったため、ImageReady の機能のほとんどは Photoshop CS3 に移植されています。 Adobe Fireworks には CS3 にはない機能がいくつかあります。
• 注意: アニメーション ファイルを連続的にループさせるには、[保存] メニューで [Web またはデバイス用に保存] を選択し、[ループ設定] で [無限] を選択してアニメーションを保存します。 「その他」を選択して、アニメーションをループする回数を選択することもできます。
• Photoshop CS3 を使用してアニメーション GIF を保存すると、フレーム ファイルが失われます。この問題を解決するには、Adobe Fireworks で GIF ファイルを開き、GIF の個々のレイヤーとタイムラインを編集します。

警告する

• 何時間もかけて一生懸命に作業した結果が無駄にならないように、作業を頻繁に保存してください。