PhotoshopでアニメーションのWebバナーを作成する方法

Webバナーの作成は、世界で最も魅力的な仕事ではありませんが、すべてのデザイナーがキャリアのある時点で、おそらく何度も行う必要があることです。 Webバナーの作成に関しては、厳格なルールはありませんが、タイプが大きく、メッセージがパンチの効いたものでなければならないことは言うまでもありません。

これもアニメーション化しているので、スライドやアニメーション要素は3つ以下にすることをお勧めします。これは、人々が単にそれを見ないためです。点滅する要素は、視聴者の注意を引くのにも役立ちます。

以下のウェブサイト用にこのアニメーションバナーを作成してください…



以下のウェブサイト用にこのアニメーションバナーを作成してください…

次のいくつかの手順では、簡単なアニメーションWebバナーを設定および作成する方法を示します。このバナーを習得すると、将来の新しい仕事に簡単に適用できます。

キヤノンPowerShotに最適なSDカード

01.ドキュメントを設定します

Photoshopを起動し、[ファイル]> [新規]に移動して、[プリセット]ドロップダウンメニューから[Web]を選択します。サイズのプルダウンからリーダーボードを選択するか、サイズが異なる場合はカスタムを選択して、ピクセルのサイズを手動で入力します。

ウィンザー&ニュートンシリーズ7コリンスキーサブル

ビューメニューから[ドキュメントの境界にスナップ]を選択した状態で、ガイドをドラッグしてドキュメントのすべての境界にスナップします。

02.グラフィック要素の追加

次に、重要な設計要素を配置します。上記の例では、T3の正方形のロゴを貼り付けました。作成したときに、ガイドがサイズを変更して、ドキュメントの境界に簡単にスナップできるようにしました。後で使用する矢印のグラフィックを貼り付け、入力ツールを使用して最初のスライドのメッセージを設定します。必要な画像を貼り付けてから、すべてのレイヤーに適切な名前を付けてください。

03.セカンダリスライドの作成

オートフォーカスでカメラを撮る方法

次に、タイプレイヤーを複製し、その下のタイプレイヤーをオフにして、メッセージの次の段階(この場合は「ONSALENOW」)を入力します。すべての要素が整ったことに満足したら、できるだけ多くのレイヤーをマージします。背景、ロゴ、カバー画像は静的なままなので、これをマージして、背景、タイプレイヤー、矢印レイヤーの4つのレイヤーを残すことができます。

04.フレームアニメーションを作成します

次に、ウィンドウの下部にある[タイムライン]タブをクリックするか、[ウィンドウ]> [タイムライン]に移動します。ウィンドウ中央の小さな矢印をクリックし、「フレームアニメーションの作成」を選択して、ボタンをクリックします。次に、背景レイヤーと最初のメッセージレイヤーを除くすべてのレイヤーをオフにします。小さなアニメーションフレームのドロップダウンメニューからフレームに1秒の遅延を適用します。次に、タイムラインの[選択したフレームを複製]ボタンをクリックするだけですが、最初のメッセージをオフにして、2番目のメッセージをオンにします。すべてのレイヤーに対してこのプロセスを繰り返し、矢印レイヤーで終了します。

ベストバイポイントとカメラの撮影

05.矢印を点滅させ、タイミングを調整します

矢印を点滅させるには、タイムラインから「選択したフレームを複製」をクリックして、矢印をオフにします。時間を0.5秒に調整し、レイヤーパネルで矢印のオンとオフを切り替えるプロセスを繰り返して、点滅しているように見せます。最後に、完全に満足するまで、いくつかのタイミングを調整することをお勧めします。人々の注意力は非常に短いので、フレームレートが遅いことには意味がありませんが、それでも読むことができる必要があります。

06.Webおよびデバイス用に保存

最後に「Web用に保存」に移動し、ドロップダウンメニューからGIFを選択します。ファイルサイズを小さくするために、ここで品質を少し下げることもできます。満足したら、gifを保存し、それをWebブラウザにドラッグしてテストします。