Photoshopを使用してアニメーションGIFを作成する方法
その他 / / December 02, 2021
アニメーションGIFは、おそらくWeb全体で最も面白くて使用されているファイルの一部です。 それらは、ウェブサイトに多くのスペースをとることなく、楽しんだり、ポイントをすばやく教訓的な方法で家に帰したりするために等しく使用できます。
ただし、一見複雑に見えますが、GIFの作成は実際にはそれほど難しくありません。 実際には、 Photoshopをお持ちの場合、作成に必要なものはすべて揃っています。これが、このチュートリアルで紹介する内容です。
準備? 始めましょう。
ステップ1: すべてのGIFファイルは異なるフレームで構成されているため、最初に、GIFファイルを構成する画像ファイルを準備します。 つまり、GIFを構成するさまざまな「フレーム」がすでにあるはずです。 この例では、3つの単純な画像ファイル(以下に表示)で構成されるGIFを作成します。
ステップ2: Photoshopでファイルを開き(最初にPhotoshopで作成した場合を除く)、各ファイルが別々のレイヤーに属していることを確認します。 これを確認するには、最初のファイルを開いたら、をクリックします 新しいレイヤーを作成します。 右下のボタン レイヤー パネル(下に表示)と次を貼り付けます 画像ファイル 新しいレイヤーに。
すべての画像が独自のレイヤーに追加されると、Photoshopのレイヤーパネルでは次のようになります。
ステップ3: 今、Photoshopでに行きます 窓 メニューをクリックし、 アニメーション オプション。 これにより、Photoshopのアニメーションパレットが表示されます。 完了したら、右下のボタン(下に表示)をクリックして、 タイムライン を見る フレーム ビュー。これにより、作業が少し簡単になります。
ステップ4: デフォルトでは、アニメーションパレットには、使用している画像(または「フレーム」)の1つだけが表示されます。 また、各フレームの下部に、最終的なGIFファイルに表示される時刻も表示されます。 それを変更したい場合は、それをクリックして希望の時間を選択するだけです。 選択した時間は、残りのフレームにも適用されます。
ステップ5: 次に、他の画像が配置されるフレームをいくつか追加します。 これを行うには、アニメーションパレットでをクリックします。 フレームが重複しています ボタン。
これにより、GIFを構成する2番目のフレームが追加されます。 さて、ここに秘訣があります。追加されたフレームごとに、そのフレームに必要な画像を含む関連レイヤーのみが選択されていることを確認してください。 レイヤー パレット。 たとえば、以下の画像を確認してください。
レイヤー1とレイヤー2をそれぞれGIFファイルの2番目と3番目のコンポーネントにしたいので、2番目と3番目のフレームにはどちらか一方のみを選択します。 最後に、アニメーションパレットには、GIFファイルのすべてのフレームが表示される順序で表示され、それぞれが表示される時間も設定されている必要があります。
ステップ6: 間もなく作成されるGIFのフレームの準備ができたら、それを保存します。 これを行うには、 ファイル メニューをクリックします Webとデバイス用に保存… ポップアップ表示されるウィンドウで、必ず下のGIF形式を選択してください。 プリセット.
さらに、このウィンドウで画像の上にあるタブをクリックすると、GIFファイルのさまざまな出力品質(もちろんさまざまなサイズ)を選択できます。
GIFのサイズと品質を選択したら、をクリックします 保存する これで完了です。
GIFファイルをお楽しみください!