Photoshopcs6でフレームごとのアニメーションを作成する方法。 Photoshopのフレームごとのアニメーション。 静止画像のアニメーション
GIFファイルはいたるところにあります。 かつては謙虚だったアニメーション画像が、今ではインターネットの非公式言語になっています。 GIFアニメーションが一番 速い方法 Twitterで感情を表現し、VK、Facebook、またはOdnoklassnikiのニュースフィードをスクロールしてそれを見るのに何時間も費やすことができます。
十分あります たくさんのさまざまなトピックに関する既製のGIFを見つけることができるサイト。 しかし、自分の手で作成されたGIFアニメーションに匹敵するものはありません。 難しいプロセスだと思いますか？ あなたは間違っています、それは非常に簡単です。 Photoshopで既存のビデオを変換するか、一連の静止画像を使用して、GIFアニメーションをすばやく作成できます。 これがどのように行われるかを詳しく見てみましょう。
ノート：この記事のすべての例では、Photoshop CC2017を使用しています。
まず、Photoshopを起動し、[ファイル]> [インポート]> [レイヤーへのビデオフレーム]に移動して、目的のビデオを選択します。
開いたダイアログボックスで、ビデオ録画全体をインポートすることも、特定の部分のみを選択することもできます。 2番目のオプションを選択した場合は、プレビューウィンドウの下にあるハンドルをドラッグして、開始点と終了点を設定します。 これらのノブの間のビデオの部分がインポートされます。
ノート：インポートするビデオが大きいほど、GIFも大きくなることに注意してください。 また、長すぎるビデオをインポートする場合は、[2フレームごとに保持]（またはそれ以上）を選択すると、品質にあまり影響を与えずにサイズを小さくする簡単な方法です。
[フレームアニメーションの作成]チェックボックスがオンになっていることを確認してから、[OK]をクリックします。 ビデオのインポートプロセスが開始されます。 クリップのサイズによっては、時間がかかる場合があります。 インポートが完了すると、ビデオの各フレームが独自のレイヤーに配置されるワークスペースが開きます。
画面の下部にはタイムラインパレットがあります。 GIFアニメーションを構成するすべてのフレームが表示されます。
必要に応じてフレームを追加および削除したり、他の画像のレイヤーを編集するのと同じように既存のレイヤーを編集したりできます。 GIFアニメーションをプレビューするには、タイムラインの下部にある[再生]ボタンをクリックするだけです。
最終結果は次のようになります。
一連の静止画像からGIFアニメーションを作成する
GIFアニメーションのベースとして使用するビデオ映像がない場合は、一連の静止画像から手動で作成できます。 特にクールなものを作りたい場合は少し複雑ですが、基本的なプロセスは単純です。
複数のレイヤーを含む単一の画像ファイルからGIFを作成します。 各レイヤーは、将来のアニメーションの個別のフレームです。 開始するには2つの方法があります。
- アニメーション用の画像をすでに作成している場合は、[ファイル]> [スクリプト]> [ファイルをスタックにロード...]を選択して画像をインポートします。 [参照]をクリックして画像を選択し、[OK]をクリックします。 各画像は、同じファイル内の別々のレイヤーに配置されます。
- まだイメージを作成していない場合は、ここで作成してください。 個々の画像は将来のアニメーションの一部であることを忘れないでください。
これで、アニメーションの作成を開始する準備が整いました。
静止画像のアニメーション
仕組みは次のとおりです。 アニメーションフレームを手動で作成すると、表示されているすべてのレイヤーがそのフレームに含まれます。 無効になっているレイヤーは、作成されたフレームに参加しません。
最初のフレームを作成するには、最初のレイヤーを表示し、他のすべてのレイヤーをオフにします。 次に、2番目のフレームを作成し、2番目のレイヤーを表示してから、3番目のフレームの3番目のレイヤーを表示します。 始めると、物事はより明確になります。
アニメーションの作成を開始するには、タイムラインが自動的に開かない場合はタイムラインを開きます。 これを行うには、トップパネルの[ウィンドウ]をクリックし、開いたメニューで[タイムライン]を選択します。 開いたパネルの中央で、[フレームアニメーションの作成]をクリックします。 このアクションにより、アニメーションの最初のフレームが作成されます。 レイヤーパレットで、フレームの一部にしたくないレイヤーを非表示にします。
次に、[新しいフレーム]ボタンをクリックします。これにより、前のフレームが複製されます。 もう一度、余分なレイヤーを非表示にして、フレーム内にあるはずのレイヤーを表示します。
アニメーション化する必要のあるすべてのフレームを追加するまで、このプロセスを繰り返します。
完了
最後に、各フレームの表示時間を設定します。 最初のフレームを選択してから、Shiftキーを押しながら最後のフレームをクリックしてすべてを選択します。 次に、フレームの1つの下にある下向き矢印をクリックして、遅延を選択します。 遅延がないということは、アニメーションが高速に実行されることを意味しますが、設定された秒数により、フレームは設定された時間画面に表示されたままになります。
最後に、タイムラインパネルの下部にあるループオプションを設定します。 この設定は、アニメーションを再生する回数を制御します。 ほとんどの場合、「常に」オプションを選択します。
次に、画面の下部にある[再生]ボタンをクリックして、結果のアニメーションをプレビューします。 次のように表示されます。
フレームを選択してレイヤーの表示を変更するだけで、フレームを編集できます（不透明度を変更したり、その他のより高度な設定を行ったりすることもできます）。 必要に応じてレイヤーを追加するか、ゴミ箱アイコンをクリックしてレイヤーを削除します。
結果に満足したら、[アニメーションの保存]セクションに進むか、読み進めて結果のアニメーションを改善することができます。
中間フレームを追加してアニメーションを改善する
Photoshopは、強力なトゥイーンアニメーション機能をサポートしています。 これにより、既存の2つのフレーム間にトランジションフレームを自動的に生成することで、よりスムーズなアニメーションを作成できます。 この例では、すべてのフレームをステップスルーして、星空にきらめく効果を与えます。
開始するには、最初のフレームを選択し、タイムラインの下部にあるTweenツールバーボタンをクリックします。
開いたダイアログボックスで、項目「中間フレーム」を「次のフレーム」に設定し、項目「フレームの追加」に任意の値を指定します。 値が大きいほど、遷移はスムーズですが遅くなります。 「OK」をクリックして中間フレームを作成します。
ここで、追加した他のソースフレームに対してこのプロセスを繰り返します。 最後のフレームに到達したら、「中間フレーム」を「最初のフレーム」に設定します。 これは、アニメーションループの開始へのスムーズな移行を作成するのに役立ちます。
Photoshop CS6のアニメーション：クリスタルボールのチュートリアルで、愛する人を驚かせる方法を紹介することにしました。 Photoshopでアニメーションがどのように機能するかをもう一度確認し、お気に入りの写真で水晶玉を作成します。
画像を用意しました 水晶球、私たちが一緒に仕事をし、恋をしているカップルの写真を使って、代わりにあなたの写真を使うことができます。
レッスンを始めましょう
基礎を準備します
クリスタルボールの写真を開きます-Ctrl + Oを押し、写真が配置されているコンピューター上の場所を選択し、[開く]をクリックします。
レイヤーパレットに移動します-F7キー。
これで、パレットには水晶玉をイメージしたレイヤーが1つだけ表示されます。 右側のレイヤーの反対側にはロックがあります。これは、レイヤーがロックされており、自由に編集できないことを意味します。 レイヤーをダブルクリックしてロックを解除します。 便宜上、表示されたウィンドウでレイヤーの名前をすぐに変更できます。たとえば、「クリスタルボール」という名前を付けることができます。 次に、[OK]をクリックします
次に、ボールのガラス部分を選択して新しいレイヤーに切り抜く必要があります。これにより、将来、交換可能なボールの上部を直接操作する方が便利になります。
左側のツールバーからペンツール（P）を選択します。
輪郭に沿ってボールの結晶部分の輪郭を描き、マウスを押したまま、各アンカーポイントのガイドを引き出します。これにより、後で輪郭を編集しやすくなります。 すぐに完璧な輪郭を作成できなかった場合は、直接選択ツール（A）（明るい矢印）を選択し、修正するポイントを一度に1つずつ選択して、接線を使用して輪郭の位置を調整します。
アウトラインの作成が完了したら、選択範囲を右クリックして、ドロップダウンメニューの[選択範囲を作成]（選択した領域を形成）で選択し、半径を0に設定します。その後、アウトラインが点滅する点線に変わります。 、これは、画像の一部を選択し、選択を操作できることを意味します。
次に、なげなわツール（L）や長方形マーキーツール（M）など、ツールバーから任意の選択ツールを選択します。
選択範囲を右クリックし、表示されるメニューで[レイヤーをカット]（新しいレイヤーにカット）を選択します。
レイヤーパネル（F7）に注目すると、ボールのベースを持つソースとボールのクリスタルトップを持つレイヤーの2つのレイヤーがすでに含まれています。
写真を追加する
次に、写真を開きます-Ctrl + O-「開く」。
水晶玉の入った窓と写真の入った窓を並べて配置し、両方の窓が見えるようにします。
ツールバーの最上部で、黒い矢印の移動ツール（V）を選択します。
写真ウィンドウをクリックしてアクティブにします。 写真を水晶玉のあるウィンドウにドラッグします。
これで、写真がボールと写真に重なります。
写真を水晶玉に正確に合わせるには、写真のあるレイヤー（3番目のレイヤー）とボールの上部のあるレイヤー（2番目のレイヤー）の間のレイヤーパレットにカーソルを置き、Altキーを押しながらカーソルを変更します。外観、レイヤー間をクリックします。
すべてを正しく行うと、ボールの上部が写真のマスクになりますが、写真はそのマスクであるレイヤーを超えることはありません。 レイヤーパレットの上部にある不透明度の値を80％に設定して、写真レイヤーの不透明度を少し下げましょう。
消しゴムツール（E）を使用して、大径のぼやけたエッジを持つ標準の丸いブラシを選択します。これにより、作業が便利になり（70pxを使用）、写真のエッジに沿って少し移動して、写真をより有機的にフィットさせます。ボール。
雪を引く
新しいレイヤーを作成する-Ctrl + Shift + N、またはレイヤーパネルの下部にある新しいレイヤーアイコンをクリックします。
新しいレイヤーに、特別なブラシツール（B）を使用して白い雪をペイントします。
顔や重要な要素に雪が多すぎる場合は、これらの場所で同じブラシを使用して消しゴムツール（E）に目を通します。 また、消しゴムでボールの端を越えます。
雪がボールを超えないようにするには、レイヤーパレットで、雪レイヤーと写真レイヤーの間にカーソルを置き、Altキーを押しながらクリックします。
雪のレイヤーを複製します-Ctrl + J、複製したレイヤーにマスクを適用します-Altキーを押しながらレイヤー間をクリックします。
ボールの雪が簡単に渦巻くようにしたいのですが、複製の雪をわずかに回転させることでこの効果を作成できます。
Ctrl + Tを押して、マウスをコーナーマーカーに近づけます。矢印が丸い両面に見えたら、雪を任意の方向に少し回転させます。
雪を回転させた後、雪が再び顔に落ちる可能性があります。その後、消しゴム（E）で余分な雪を消します。
すべての準備が整いました。
雪のアニメーション
それでは、PhotoshopCS6のアニメーションに直接進みましょう。
アニメーションウィンドウを開きます-メニュー[ウィンドウ]-[タイムライン]（ウィンドウ-タイムライン）に移動します。
現在、タイムラインには1つのフレームがあり、現在表示されているすべてのレイヤーが含まれています。
最後の雪の複製レイヤーの表示を一時的にオフにします（レイヤーパレットのレイヤーサムネイルの左側にある目をクリックします）。
したがって、最初のフレームでは次のようになります。
1層-ボールのベース、
2層-ボールの上部、
3層-写真、
そして第4層-雪。
タイムラインの下部にあるアイコンをクリックして、新しいフレームを作成します。 新しいフレームには、最初のフレームと同じレイヤーが含まれています。
雪のある最初のレイヤーの表示をオフにし、回転した複製をオンにします。
次に、同じフレームシーケンスをもう一度繰り返す必要があります。
概略的には、次のようになります。AB A B、ここでAは雪のあるフレーム、Bは雪の複製が回転したフレームです。
タイムラインの最初のフレームを選択し、新しいフレームアイコンをクリックします。 新しいフレームは最初のフレームの隣に表示され、2番目のフレーム（A A B）になります。異なるフレームが交互になるように、3番目の場所に移動する必要があります（A B A）。
次に、2番目のフレームを選択し、新しいフレームアイコン（A B B A）をクリックしてその複製を作成します。 新しく作成したフレームを最後の4位に転送します。 これで、フレームがインターリーブされます。
次に、フレームの長さとアニメーションの繰り返しを設定し、中間フレームも作成しましょう。
スケールの最初のフレームを選択し、Shiftキーを押しながら最後のフレームをクリックすると、すべてのフレームが選択されます。
各フレームの長さを0.2秒に設定しました。これは、アニメーションの繰り返し回数である「一定」（永遠）です。
アニメーションがスムーズに再生され、キーフレーム間の遷移がスムーズになるように、中間フレームを追加します。
タイムラインの最初のフレームを選択し、タイムラインの下部にある右から3番目のアイコンをクリックします。 中間フレームの数を2に設定します。最後のキーフレームを除くすべてのキーフレームで、値を「次のフレーム」に設定し、最後の「最初のフレーム」でアニメーションを閉じます。 これはすべてのキーフレームで行います。 キーフレームの直後に中間フレームが表示されることに注意してください。つまり、次のキーフレームが前のキーフレームから2フレーム移動します。
中間フレームの作成が完了したら、再生三角形をクリックしてPhotoshopで作成したアニメーションを開始します。
レッスンの結果は次のとおりです。
GIFを保存するファイル形式を選択し、[保存...]をクリックして、保存するディレクトリを選択し、もう一度[保存]をクリックします。
このチュートリアルでは、Photoshopで写真を使用して水晶玉アニメーションを作成する方法について説明しました。
こんばんは、親愛なる購読者と私のブログの読者だけです！ あなたはあなたの写真を生き生きとさせる方法を学ぶ準備ができていますか？ そして、魔法の助けを借りてではなく、私たちのお気に入りのフォトショップの助けを借りて！ 理由がわからないまま、このレッスンをどのくらい延期してきましたか。 結局のところ、これがPhotoshopの基本です！ しかし今、私は変えることにしました。
そして、ビデオの最後にあなたのビデオレッスンもあるように、大幅に改善してください。 Photoshopでアニメーションを作成する.
私は長い間Photoshopのチュートリアルを書いていません、そして私には理由がありました。 結局、私は自分の話を「」で終えました。 ぜひお読みいただき、コメント欄に直接ご意見をお聞かせください。
それでは、直接レッスンに進みましょう。 以下のビデオでは、徐々に追加されるテキストの作成方法を紹介しますが、テキストレッスンでは、作業が少し難しくなります。
私たちはCipollinoを持っています、そして私たちは彼に彼の手を私たちに振らせる必要があります。
ステップ1。まず、Photoshopでアニメーションを「有効化」する必要があります。 このために私たちは行きます 「ウィンドウ」->「アニメーション」。 まだ書くことができます "タイムライン".
ステップ2腕を動かすには、腕を切り取って別の位置に置く必要があります。 手切りには個人的に使っています 「マグネティックラッソ」。 メインのコピーを作成する Ctrl + J）そしてコピーを操作します。 原作には触れません。
手を厳選して切り抜いてください！
ステップ3そして今、どんなにひどい音でも手を挿入し、別の位置に置きます。 手は新しいレイヤーに挿入されます、それは私たちにも合います。
ステップ4この手順はオプションですが、消しゴムツールを使用して手を少しタッチアップすることをお勧めします。これにより、より自然になります。 もちろん、言葉で説明するのは難しいです。 消しゴムを使用する理由を理解している場合は、この手順に従ってください。それでも理解できない場合は、スキップできます。 これは重要ではありません。私たちにとって最も重要なことは、簡単なアニメーションの作成方法を学ぶことだからです。
ステップ5現在、担当者と協力しています。 各フレームには、必要なレイヤーのみが含まれています。 たとえば、フレーム1にはオリジナルが必要で、この場合は 「レイヤー0」.
次に、新しいフレームを作成します。
そして、すでに新しいフレームで他のレイヤーをオンにします。 つまり、私たちの 「レイヤー0コピー」と 「レイヤー1」、つまり、手の位置が異なります。 読者の皆様、アルゴリズムが明確であることを願っています。
ステップ6フレーム遅延を設定します。 つまり、どの期間が経過すると次のフレームが表示されます。
ステップ7私たちは私たちのものを保ちます。 GIFアニメーションの保存は単なる画像とは少し異なるため、この手順をチュートリアルに含めたことは何の意味もありません。
フォーマット（デフォルトはGIF）を選択して保存します。
アニメーションGIFがどのように作成されるのか疑問に思ったことはありませんか？ レッスンの作者は、このレッスンの助けを借りて、アニメーションの秘密のいくつかを一晩で習得することを提案します。 また、PhotoshopCS6で使用できるタイムラインの使用方法についても学習します。 そして今から始めましょう！
レッスン結果。
ステップ1
新しいドキュメントを作成します（ Ctrl + N）ファイルサイズが800 x500ピクセルの場合。 背景を好きな色で塗りつぶします。 それではメニューに行きましょう レイヤー- スタイル層- かぶせる勾配（[レイヤー]> [レイヤースタイル]> [グラデーションオーバーレイ]）。 次の設定を適用します。スタイル 放射状の（ラジアル）、中央に使用する黒（＃000000）から青（＃54799b）までの色。
ステップ2
新しいレイヤーを作成し、名前を付けます ノイズレイヤー。 ツールを選択してください 塗りつぶし（ペイントバケットツール）作成したレイヤーを暗い色（＃231f20）で塗りつぶします。 アクティブレイヤーを残す ノイズレイヤーメニューに移動します フィルタ-ノイズ-ノイズの追加（[フィルター]> [ノイズ]> [ノイズの追加]）。 フィルタ設定ダイアログで、次の値を設定します。 の効果（金額）3％、分配 ユニフォーム（均一）そして[OK]をクリックします。
ステップ3
キーの組み合わせを押す (ctrl +U）表示される修正設定ダイアログで、値を入力します 飽和（彩度）100％：このレイヤーのブレンドモードをに変更します 柔らかな光（柔らかな光）。
翻訳者のメモ： スクリーンショットの作者と同じ色を実現するために、色相/彩度（色相/彩度）を修正するときに色相値を-140に設定できます。
ステップ4
必要なテキストを追加します。 ここでは、123RFWebサイトのロゴテキストを使用します。 レイヤースタイルで使用 脳卒中（脳卒中）。 好みに応じてストロークサイズを選択してください。
翻訳者のメモ： 著者のスクリーンショットでは、テキストはすでにストロークスタイルとともにラスタライズされています。 同じにするために、ストロークを適用した後、塗りを削除します（塗りつぶし）テキストレイヤーの0％で、このレイヤーをスマートオブジェクトに変換してから、ラスタライズします。
ステップ5
このステップでは、レイヤースタイルを使用して光るテキスト効果を作成します。 レイヤーをダブルクリックして、スタイル設定ウィンドウを表示します。 以下のスクリーンショットを使用して、レイヤースタイルをカスタマイズします。
エンボス加工（斜角とエンボス）
内側の影（インナーシャドウ）
内側の輝き（インナーグロー）
カラーオーバーレイ（カラーオーバーレイ）
外部グロー（光彩（外側）
風邪（影を落とす）
ステップ6
レイヤースタイルを使用して照明効果を作成し終えたら、レイヤーパレットに移動して、このレイヤーの値を減らします。 塗りつぶし（塗りつぶし）0％まで。
ステップ7
手順5で作成したレイヤーを複製し、このコピーからすべてのレイヤースタイルをオフにします。 次に、次のようなスタイルを設定します。
内側の影（インナーシャドウ）
内側の輝き（インナーグロー）
ステップ8
以下は、レイヤースタイルを適用した後の結果です。
ステップ9
次に、動く光のスポットを作成します。 既存のレイヤーの上に5つのレイヤーを作成し、名前を1、2、3、R、Fに変更します。独自のテキストがある場合は、文字に従ってレイヤーを作成します。 これらのレイヤーをフォルダーにグループ化し、名前を付けます。 ライトスポットブレンドモードをに変更します ベースライトニング（カラードッジ）。
ツールをアクティブにします みがきます（ブラシツール）、柔らかいブラシを選択し、設定します 不透明度（不透明度）95％で、白い色で、テキストの上に斑点を描きます。 各文字には、独自のレイヤーに個別の光点があります。 下のスクリーンショットでは、作成者のレイヤーがレイヤーパレットでどのように表示されるかを確認できます。
ステップ10
それではメニューに行きましょう ウィンドウ-タイムライン（ウィンドウ>タイムライン）。 レイヤーは、左側のこのパレットにすでに組み込まれていることがわかります。 グループに含まれる5つのライトスポットレイヤーをそれぞれ選択します ライトスポット現在の時間インジケーター（青いスライダー）がフレームゼロにあることを確認します。 グループ内の各レイヤーで、アクティブになっている状態で、オプションをクリックします。 ポジション（位置）キーフレームを作成します。
翻訳者のメモ： タイムスケールをアクティブにするには、ボタンを押します ビデオタイムラインを作成する（ビデオタイムラインを作成）そしてすべてのレイヤーがタイムラインにロードされます。 レイヤーパレットと同じレイヤーまたはグループが選択されます。
ステップ11
現在の時刻インジケーター（青いスライダー）を 01:00 F文字の輪郭を基準にして、移動経路に沿って光点のあるレイヤーを移動します。
ステップ12
これは、文字上の光点の初期位置がどのようになるかを示しています。 目盛りの現在時刻インジケーターを移動し、光点のあるレイヤーを移動して、キーフレームを作成します。 各テキストレイヤーの文字全体に斑点を移動し終えるまで、それらをドラッグし続けます。 手順については、以下のスクリーンショットを参照してください。
Adobe Photoshop CS3でビデオインポートツールを使用するには、Quick TimePlayerバージョン7.1以降をインストールする必要があります。
ビデオからフレームをインポートするには、[ファイル]> [インポート]> [レイヤーにビデオフレーム...]をクリックして、コンピューター上のファイルを選択します。
インポート中にフォーマットがサポートされていないというメッセージを受け取った場合は、ビデオを「.mp4」フォーマットに変換する必要があります。 無料のコンバーターを使用することをお勧めします。 その中で、ファイル全体を変換しないように、ビデオの目的のフラグメントをすぐにカットできます。 Photoshop CS3を使用している場合は、変換後に「.mp4」拡張子を「.mov」に変更します。
コンピューターでファイルを選択すると、インポートダイアログが表示されます。 ビデオの一部のみをアニメーション化する場合は、スイッチを「選択した範囲のみ」の位置にします。
Photoshop CS3を使用している場合は、スライダーをフラグメントの先頭に設定し、「Shift」キーを押しながらスライダーを目的のフラグメントの末尾にドラッグします。
Photoshop CS6がインストールされている場合は、黒いスライダーを使用してフラグメントの開始と終了を示します。
[それぞれを保持する]の横のチェックボックスをオンにして、ビデオのフレームレートを指定します。 例：ビデオが30フレーム/秒で、値「5」を入力した場合、アニメーションのフレームレートは30/5 = 6フレーム/秒になります。つまり、数値が大きいほど、フレーム数は少なくなります（アニメーションサイズ）。
PhotoshopCS3では[ウィンドウ]> [アニメーション]メニューコマンドをクリックするか、PhotoshopCS6では[ウィンドウ]> [タイムライン]をクリックして、タイムラインをオンにします。
アニメーションのタイムラインで、最初のフレームをクリックし、「Shift」キーを押しながら最後のフレームをクリックします。 リストから希望のフレーム遅延時間を選択して、アニメーションの再生速度を設定します。 プレーヤーボタンを使用して結果を表示します。
[ファイル]> [Web用に保存...]（Photoshop CS6）または[ファイル]> [Webとデバイス用に保存...]（Photoshop CS3）をクリックします。 「GIF」形式を選択します。 必要に応じて、ピクセル単位または元のサイズのパーセンテージとして値を変更することにより、画像のサイズを縮小または拡大できます。
