Photoshop でシネマグラフを作成する方法

公開: 2023-03-03

シネマグラフは、ここ数年、私のお気に入りのデザイントレンドの 1 つです。写真とビデオの素晴らしい組み合わせであり、謎のヒントを追加するだけのエレガントな芸術作品をサイトにもたらします.

また、シネマグラフが優れている主な実用的な理由もあります。それは、ファイルサイズが小さいことです。動画ファイル全体を追加するよりも、動きのある瞬間をサイトに追加する方がはるかに簡単です。しかし、ロジスティクス以外にも、シネマグラフが非常に魔法のようなものである最後の 1 つの理由があります。

始める準備はできましたか？椅子を引き上げ、Photoshop を開き、次の 7 つの簡単な手順に従って、独自のシネマグラフを作成してください。

1. 動画ファイルを選択

シネマグラフを作成するには、基本的なビデオファイルから始めます。理想的には、ビデオを自分で撮影して、会社に固有でブランドに完全に一致させることができますが、実験だけの場合は、ストックビデオをダウンロードしても問題ありません。

このチュートリアルでは、無地の青色の背景に対して社内で撮影したジェンガツアーのビデオを使用しています。 (Design Trends コースにサインアップすると、同じファイルが得られます!)

シネマグラフに最適なビデオを選択するときは、次の点に注意してください。

カメラはずっと静止している必要があります。 自分でビデオを撮影する場合は、古い三脚を掘り出して、物をできるだけ安定させてください。ストックオプションを閲覧している場合は、できるだけ動きの少ないものを探してください。
維持したい動きは、簡単に分離できる必要があります。 オブジェクトが互いに交差したり、画面全体を移動している場合、背景を静止させたまま、実際に必要な動きを分離することは難しくなります。
ビデオがループします。シネマグラフをタイムレスに保つには、ループする必要があります。 Photoshop は確かに物事を滑らかにするのに役立ちますが、簡単にループできるビデオ、または開始と終了が反転可能なビデオを使用するのが最も簡単です。

ビデオファイルを取得したら、Photoshop にロードする準備が整いました。

2. ビデオファイルをインポートする

Photoshop を起動して、 File > Openに進みます。ファイルを選択すると、ビデオがレイヤーとして表示されます。自動的に表示されない場合は、 [ウィンドウ] > [タイムライン]に移動して、タイムラインも表示されることを確認してください。

ビデオファイルが自動的にグループ「Video Group 1」に配置されることに気付くでしょう。そのままにしておくこともできますが、グループ内のレイヤーが 1 つしかないのが気になる場合は、ビデオレイヤーを取り出して、グループを削除してください。それは必要はありません。

3. タイムラインをクリーンアップする

動画ファイルを数回再生します。全部必要ですか? シネマグラフで焦点を合わせたいセクションの前後に余分なフッテージがある場合は、邪魔にならないようにファイルをトリミングしてください。これを行うには、タイムラインでファイルの端をクリックし、目的のタイムスタンプにドラッグします。

ビデオファイルが長く、全体を表示したり、目的の場所に正確に移動したりできない場合は、[タイムライン] ウィンドウの下部にあるスケールを使用してズームインおよびズームアウトできます。

注: トリミングしたファイルの部分は引き続き保存されるため、ここでデータが失われる心配はありません。後で特定の部分が必要になった場合は、いつでもエッジをクリックしてドラッグして元に戻すことができます。

私の元のビデオファイルは、ジェンガタワーが倒れるシーンで終わりました。ループするのは簡単ではありません。だから私はその部分を切り取り、最初からいくつかトリミングしました.

タイムラインのクリーンアップが完了したら、不要な動きを非表示にします。

4.マスキングレイヤーを作成する

次に、シネマグラフの「写真」の側面を作成します。作成したい「画像」でビデオを一時停止し、領域全体を選択します。これをコピーして新しいレイヤーに貼り付けます。

再生を押すと、ビデオがまったく表示されないことに気付くでしょう。マスクを追加して、表示したい動きを正確に選択できるようにします。

レイヤーパネルの下部にあるオプションから、またはレイヤー>レイヤーマスク>すべてを表示に移動して、レイヤーマスクを追加してください。

5.ムーブメントを隔離する

（レイヤー自体ではなく）レイヤーマスクが選択されていることを確認してから、ブラシツールをつかみます。他のマスクと同様に、黒でブラッシングするとマスクが隠され（下のレイヤーのコンテンツが表示されます）、白でブラッシングするとマスクが表示されます（下のレイヤーからコンテンツが非表示になります）。

この例では、手は動かさずにジェンガタワーの動きを表示したいと考えました。それを達成するために、私は塔の上にマスクを黒く塗り、残りは白のままにしました.

これにより、動きを分離して、シネマグラフに表示させたい動きだけを表示し、残りを固定したままにすることができます。

6.Gifとしてエクスポート

シネマグラフに満足したら、それをエクスポートします。 [ファイル] > [エクスポート] > [Web 用に保存 (レガシー)]に移動するだけです。ここで試すことができるオプションはたくさんありますが、最も重要なものは次の 2 つです。

gif として保存 (ダイアログボックスの上部付近にあります)
ループオプションを [永遠に] に設定します (ダイアログボックスの下部にあります)。

ファイルサイズと品質の間には常に少しのバランスがあるので、設定を試して、必要なエクスポートが正確に得られることを確認することをお勧めします.

以上です！世界と共有する独自のシネマグラフを作成しました。それはどうなりましたか？コメントで知りたいです。

Photoshop ファイルの使用方法

このファイルを Photoshop で開くと、完成したシネマグラフが表示されます。必要に応じて使用することも、遊んでみて、すべての設定方法を確認することもできます。

「ベース映像」を除くすべてのレイヤーのマスクを解除することから始めます。これが、最初に作成した元のムービーファイルです。プレイを叩くと、ジェンガボードを振る手がどれだけ動いたかがわかります！

次に、動きを分離するためにマスキングレイヤーを追加しました。説明させてください。無地の背景の上にこのような幾何学的形状を選択すると、マスキングプロセスが非常に簡単になりました。動画ファイルによっては、もう少し正確にする必要があるかもしれませんが、それはあなた次第です。

次に、時代を超越した効果を生み出すために、一緒にループするビデオのセグメントだけに焦点を当てることにしました。ただし、ファイル全体をそこに残したので、全体を見ることができました!

最後に、カーブを変更して、ファイル内の一部の色を修正しました。ビデオによっては、これを行う必要がある場合とない場合がありますが、覚えておいてください: シネマグラフが作成されたら、いつでも編集を続けることができます。

以上です！サイトに表示する準備が整ったシネマグラフができました。以下のコメントで教えてください: このトレンドで何を作成しますか?