ビデオからPhotoShopでGIFを作成する方法

公開: 2019-07-16

PhotoshopでGIFを作成する方法を考えてここに到着した場合は、Webサイトにアップロードしたビデオの読み込み時間が遅くなっている可能性があります。 さて、あなたは正しい場所に来ました。 このガイドでは、ビデオ映像からPhotoshopでGIFを作成する方法を紹介します。 それはあなたのサイトで見栄えが良く、ビデオファイルよりも速度がはるかに最適化されます！

GIFを使用すると、あらゆるタイプのビデオをWebサイトにループで表示できます。 販促資料のクリップ、チュートリアルのスクリーンレコーディング、または本当に必要なほとんどすべてのものにすることができます。

このチュートリアルでは、いくつかのビデオ映像とAdobePhotoshopが必要です。 Photoshopのサブスクリプションをお持ちでない場合は、無料トライアルを行うことができます。その結果、Photoshopを使用することがWebデザインの大きな助けになる場合があります。 ビデオが非常に長い場合は、iMovieやAdobePremiereなどのビデオエディタで最初にカットすることをお勧めします。 Photoshopには、インポート時にトリムオプションもありますが、元のフッテージが非常に長い場合は、ビデオエディタの方が適しています。

始めましょう。

最終結果のプレビュー

これは、このチュートリアル用に作成したGIFの最終結果であり、セクションまたはモジュールの背景に最適です。

青い色調のビーチのGIF

まず、ビデオをPhotoshopにインポートします

ビデオクリップをPhotoshopにインポートするには、最初にPhotoshopエディター内にいる必要があります。 そこから、[ファイル]> [インポート]> [ビデオフレームをレイヤーに]をクリックします。 使用するビデオを選択し、[開く]をクリックします。

ポップアップダイアログでは、2つの選択肢があります。 1.最初から最後まで–ビデオ全体を使用するか、2。選択した範囲のみ–トリミングオプションを使用し、ビデオの一部のみを使用します。

その下には、インポートを選択したフレーム数に制限する選択肢があります。 ビデオが短い場合は小さい数字を選択し、ビデオが長い場合は大きい数字を選択します。 適切なフローが得られるまで、これには試行錯誤が必要になる場合があります。 たとえば、変化が小さいか遅いフッテージには、ほぼ同じように見えるフレームがたくさんあります。 一方、フッテージが高速で視覚的な変更が多い場合、フレームを多く取り出しすぎると、ジャンプして見える可能性があります。

このチュートリアルでは、「最初から最後まで」と「3フレームごとに制限」を選択します。 [フレームアニメーションを作成]がクリックされていることを確認します。

GIFを作成するためのレイヤーとしてフレームを含むビデオをインポートすることに関するフォトショップアクションのスクリーンショット

フッテージを調整する

これは、サイズのトリミングからカラーレベルの調整まで、ビデオフッテージに必要なあらゆる種類の調整を行うのに最適な時期です。 たとえば、ビデオの隅に見苦しいオブジェクトがあるか、ビデオの高さがWebサイトのデザインのどこに配置するには大きすぎる可能性があります。 または、ビデオフッテージの彩度が高すぎる場合は、調整パネルを使用して、すべてのレイヤーの彩度を一度に調整できます。

クリエイティブなレイヤーの場合、さまざまなレイヤーを調整すると、GIFにさまざまな効果が生まれます。 できないのは、背景を削除するか、一度に1つのレイヤーでのみ機能するツールを使用することです。

上級者向けのヒント：どのような調整を行う場合でも、すべてのレイヤーが選択されていることを確認してください。

Photoshopのレイヤーパネルのスクリーンショット-Photoshopでビデオ付きのGIFを作成する方法

すべてのレイヤーを一度にトリミングする方法

レイヤー1をクリックしてすべてのレイヤーを選択し、Shiftキーを押しながら最上位のレイヤーをクリックします。 長方形マーキーツールを選択し、保持したいビデオの領域を選択します（取り出したいものではありません）。 [画像]> [切り抜き]をクリックすると、選択範囲外の領域が消えます。 私たちのビデオでは、ビデオ領域全体を選択し、上部のビットを選択しないままにします。 ビデオ全体の高さを低くし、地平線の白い端を削除したいと思います。

フォトショップアクションのスクリーンショット-選択してトリミング

Photoshopでトリミングされたビデオのスクリーンショット

GIFの色を調整する方法

すべてのレイヤーを選択した状態で、[パネル]メニューの[調整]タブをクリックします。 調整ツールのいずれかを使用して、GIFのレイヤーに適用できます。 たとえば、色を白黒に変えたり、デュオトーン効果を与えたりすることができます。 ビデオの色をもう少し芸術的にするために、色合いのある白黒調整を使用します。 これは、他のコンテンツの邪魔にならない背景に最適です。 好きな色合いを使用して、さまざまな色レベルを好きなように調整できます。 アドバイスの一言ですが、色調整を追加すると、最終的なファイルは追加しない場合よりも大きくなります。

このGIFは、カラーフィルターなしで211MB、カラー調整ありで312MBでダウンロードされました。 本当に色調整が必要な場合は、フレームを切り詰めて最終的なファイルを小さくする必要があります。 これについては、次のセクションで詳しく説明します。

ビデオの白黒と色合いのスクリーンショット

タイムラインを使用してフレームを編集する

タイムラインウィンドウを使用すると、フレームを編集してGIFファイルの最終的なサイズを小さくすることができます。 たとえば、クリップの最後にある余分なフレームは、遅れているか、静的なセクションを作成しているように見えます。 取り出せるフレームが多ければ多いほどいいです！ ただし、フレームの数が多すぎると最終的な効果が急激に変化することに注意してください。フレームをいくつか削除した後、ループがどのように見えるかを確認してください。

タイムラインウィンドウにアクセスして、GIFがループでどのように機能しているかを確認するには、[ウィンドウ]> [タイムライン]をクリックします。 画面の下部に長い水平パネルが開きます。 左下隅に、いくつかのコントロールがあります。 ループオプションを「永遠に」として選択し、再生ボタンを押してGIFがどのように見えるかを確認します。 私たちの場合、GIFはかなり見栄えがしますが、それでも長すぎます。 200フレーム以上で、色調整を行うと、最終的なファイルはなんと312mBになります。 以下の「GIFとして保存」セクションの手順に従って、最終ファイルのサイズを確認できます。 確認したら、保存する代わりにキャンセルを押してください。 [Web用にエクスポート]オプションを使用して、ファイルのサイズを小さくすることもできます。

タイムラインウィンドウを開くためのフォトショップアクションのスクリーンショット

フレームを削除してGIFファイルのサイズを小さくする方法

GIFをはるかに小さくするために、最後の200フレームを取り出します。 完全なビデオには、ドローンカメラが回転し、ビーチの後ろの公園に向かって左にパンするセクションがあります。 私たちはそれを必要としませんでした。 現在、GIFの重量は160MBです。 まだかなり大きいです。 ジャンプするため、これ以上フレームを取り出さないので、後で[Web用に保存]オプションを使用して最適化するためにそのままにしておきます。

フレームを削除するには、フレームを選択して、タイムラインウィンドウの再生機能の下にあるゴミ箱アイコンを押します。 同様に、1つをクリックしてフレームの連続グループを選択し、Shift + Clickを押して前後のフレームを選択できます。 GIFの最初または最後からフッテージを切り取りたくないが、短くしたい場合は、1つを押して代替フレームを削除し、コマンドを押しながら1つおきのフレームをクリックします。

Photoshopのタイムラインウィンドウのスクリーンショット

Photoshopでビデオ付きのGIFを作成するときに、インポート時とその後の両方でフッテージのセクションをカットできる方法が気に入っています。 とても実用的です。

GIFの速度を変更する方法

タイムラインウィンドウには、GIFを遅くしたり速くしたりするオプションもあります。 タイムラインの各フレームには、その下に速度コントロールがあります。 デフォルトの測定値は「遅延なし」または「0」ですが、使用したビデオにすでに速度調整が行われている可能性があります。 これは私たちのビデオの場合です。 フレームを削除する上記のスクリーンショットを見ると、フレームの遅延が0.04秒であることがわかります。 GIFをプレビューすると、高速化されているように見えます。 私たちはそれを望んでいません。

タイムラインウィンドウの左上隅にある3本の線をクリックしてタイムラインのすべてのフレームを選択し、[すべてのフレームを選択]をクリックします。 いずれかのフレームで、小さな下向き矢印をクリックして、[遅延なし]を選択します。 これにより、GIFが自然に流れるようになります。 スローモーションのように見えるGIFを作成するには、1秒を超える値を選択します。

フォトショップアクションのスクリーンショット-タイムラインを使用してGIFの速度を制御する

GIFとして保存して最適化する

すべてが終了したら、プロジェクトをGIFとして保存します。 [ファイル]> [エクスポート]> [Web用に保存（レガシー）]をクリックし、ポップアップダイアログで[GIF]オプションを選択します。 ファイルのサイズを確認し、出力を検討してください。 ファイルサイズを小さくするためにできることがいくつかあります。

  • 色数を減らします。
  • ディザを減らすか取り外します。
  • 高さと幅を減らします。

調整によってGIFがどのように変化するかを確認するには、[プレビュー]ボタンをクリックします。 さまざまなオプションを表示するには、[2-Up]タブと[4-Up]タブを使用します。 それでも大きすぎる場合は、戻ってフレームをさらに削除する必要がある場合があります。 20MB未満のファイルサイズを目指します。 全幅セクションのGIFを作成する場合は、Webに適したサイズで取得できるように、フレームを実際に縮小する必要があります。

Web4アップオプション用に保存のスクリーンショット

経験則として、GIFファイルを約20MB以下に保つことです。 それ以上は大きすぎます。 品質をあまり落とさずに10MB未満に縮小できれば、勝者になります。

GIFからさらにフレームを削除して、18MBに減らしました。 次に、それをGIFCompressorに通し、55％削減しました。 GIFCompressorは、品質を損なうことなくGIFサイズを縮小する無料のオンラインツールです。 最大50MBのGIFをアップロードできます。

結論

ご覧のとおり、Photoshopでビデオ映像からGIFを作成するのは非常に簡単です。 唯一の注意点は、開始するビデオの長さと削除するフレーム数です。 十分に削除しないと、最終的なファイルは本当に巨大になり、それはまったく役に立ちません。 最終的にあなたが望むように見えるGIFを取得するには、いくつかの試運転が必要になる場合があります。 このガイドのように、チュートリアル用のスクリーンショットのGIFを作成している場合は、そのコツをつかむことができ、毎回簡単になります。

emojoez /shutterstock.com経由の注目の画像