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

アニメーションGIFは非常に興味深いものであり、写真に埋め込まれたアニメーション写真や小さなビデオのようなものです。短い広告に最適で、ウェブサイトやリンクに追加できます。このチュートリアルでは、PhotoshopでアニメーションGIFを作成する方法を紹介します。

Adobe PhotoshopでアニメーションGIFを作成する

Photoshopを使用して独自のアニメーションGIFを作成するには、次の簡単な手順に従ってください:

  1. Photoshopを起動する
  2. Photoshopで画像を開く
  3. 最初のスライド以外のすべてのレイヤーの可視性をオフにする
  4. 次に、ウィンドウに移動し、タイムラインをクリックする
  5. ここで、すべてのフレームで新しいレイヤーを非表示にするをオフにする
  6. 新しいフレームを作成するには、選択したフレームを複製するをクリックする
  7. 開始するフレームを選択し、アニメーションフレームをトゥイーンをクリックする
  8. アニメーションGIFをさらにカスタマイズできる
  9. 次のフレームに切り替わる前に開いたままにする時間を変更できる
  10. 最後に、GIFをループさせたい回数を設定する
  11. アニメーションGIFをプレビューして保存する。

それでは詳しく見ていきましょう。

コンテンツの計画

プロジェクトを成功させる鍵は計画です。このアニメーションでは、アニメーションに何を入れたいかを計画することが重要です。これにより、アニメーションの見た目とパフォーマンスが決まります。アニメーションの目的は何ですか? 広告用ですか? ただ楽しむためですか? これらの質問に答えると、アニメーションGIFを作成するために必要なリソースがわかります。

リソースの収集

コンテンツを計画した後、アニメーションGIFの目的を決定しました。広告用であれば、必要な重要なアイテムがあります。宣伝するもの、ターゲットオーディエンス、情報です。アイテムやサービスの写真を撮り、必要なリソースであれば、電話番号、住所、時間、会場を手に入れます。ターゲットオーディエンスは、使用する色と派手さを決定します。

アニメーションを作成する

ここが楽しい部分です。アニメーションGIFを作成しましょう。ここで、すべての楽しいスキルを組み合わせて、すべての人が目にするGIFを作成します。GIFは通常小さく、動きが速いため、正確で要点を押さえている必要があります。GIFはすべてのデバイス、ネットワーク速度と互換性があり、面白く、他の人が何度も見て共有したくなる必要があります。

Photoshopを開き、新規を選択します。画像オプションでは、解像度72ピクセル、サイズ350 x 300ピクセル、カラーモードRGBを選択し、詳細オプションではカラープロファイルでsRGBを選択します。寸法は小さく見えるかもしれませんが、GIFは小さくする必要があるため、インターネット上のスペースを使用し、ほとんどのデバイスに収まります。ただし、必要に応じてスペースに制限がない場合は、GIFを大きくすることができます。これは、バナーやウェブサイトの大きな広告スペースを埋めるためです。

アニメーションGIFの一部にしたいすべてのコンテンツを追加します。これらは異なるレイヤーに追加されます。広告の場合は、オーディエンスを引き付けるために言葉を追加することを忘れないでください。各スライドに表示する必要があるものは、レイヤーの可視性によって制御されます。

すべてのコンテンツが追加されたら、最初のスライドに表示するものを除き、各レイヤーの可視性をオフにします。描画を選択することもできます。このアニメーションGIFは、アニメーションのページをめくるように機能します。また、ハウツー動画や写真ショーの一部をまとめた、ハウツーアニメーションのようにもできます。

作成を開始するには、ウィンドウに移動し、タイムラインをクリックします。これにより、タイムラインエリアが開き、コンテンツとアクションを追加できるようになります。

タイムラインウィンドウで、オプションすべてのフレームで新しいレイヤーを表示をオフにします

新しいフレームを作成するには、タイムフレームウィンドウの下部にある選択したフレームを複製をクリックします。このオプションは、最新のフレームであれば、新しいコンテンツを適切な場所に整列させることができるため、より簡単になります。特に、コンテンツを別の場所や角度に移動する必要がある場合に便利です。これにより、スライドの再生中に動きやすくなります。

スライド間にフェードトランジションを追加できます。これはトゥイーンと呼ばれます。開始するフレームを選択し、トゥイーンアニメーションフレームをクリックします。追加するフレームが多くなるほどファイルが大きくなるため、トゥイーンは賢く行います。

タイムフレームウィンドウの下には、アニメーションGIFをカスタマイズするためのいくつかのコントロールがあります。各フレームを希望の時間に合わせてカスタマイズできます。ただし、重要な情報はより長く表示されるようにしてください。アニメーションGIFを終了する前に、ループする回数を設定することもできます。3回が適切でしょう。これにより、コンテンツを適切に表示してからアニメーションGIFを終了できるため、退屈したり、視聴者のリソースを過剰に使用したりすることがありません。アニメーションをプレビューできるように再生するためのコントロールボタンがあります。すべてのフレームに同じ期間を与えるには、Ctrl + クリックを押しながらすべてを選択し、時間を選択します。

GIFとして保存するには、ファイルに移動し、Web用に保存すると、ダイアログボックスが表示されます。変更を加える必要がなければ、GIFをプレビューするか、OKを押すだけです。作成したアニメーションGIFを共有できるようになりました。アニメーションGIFはどのWebブラウザでも再生されます。Web用に保存ダイアログボックスにプレビューボタンがあり、これによりGIFをプレビューし、HTMLコードのコピーを表示できます。

上記は基本的な完成したGIFアニメーションです。一貫した速度で再生される様子を観察してください。重要な情報は、読めるだけの十分な長さで画面に表示されますが、退屈するほど長くはありません。

アニメーションGIFはなぜ重要ですか?

アニメーションGIFは、ウェブサイトに掲載できる楽しい広告として作成できるため重要です。アニメーションGIFは簡単に作成でき、ウェブサイトに掲載して、リンクを追加してユーザーのフィードバックをテストできます。それでも、広告としての画像はウェブサイトの閲覧者の目を引かない可能性があり、動画は大きすぎる可能性があるため、アニメーションGIFはリソースを犠牲にすることなく関心を引くのに最適です。

アニメーションGIFは多くのリソースを使用しますか?

アニメーションGIFは通常小さく、多くのスペースを取りません。それらを作成する際には、正確になり、メッセージを伝える少量のコンテンツを使用することが最善です。そうすれば、ウェブサイト上のスペースを少ししか使用しません。