Diviの背景画像でパターンブレンドモードを使用する方法
公開: 2022-07-18Diviに組み込まれている背景パターン設定を使用すると、人目を引くデザインを作成し、Webサイトの背景画像にセンスを加えることができます。 ブレンドモード設定を使用して、パターンが背景画像とブレンドする方法を微調整できます。 背景画像、パターン、ブレンドモードを組み合わせて、レイアウトに固有の背景とデザイン要素を作成します。 24のパターンから選択でき、16のブレンドモードがあり、パターンの外観を微調整するために使用できる他のすべての設定は言うまでもなく、空が背景デザインの限界です。
このチュートリアルでは、ページの背景画像にパターンブレンドモードを追加する方法の例をいくつか示します。 これらの外観を自分で再現するか、独自のカスタムデザインを作成するためのインスピレーションとして使用してください。
始めましょう！
スニークピーク
これは、このチュートリアルで設計するもののプレビューです。
最初のレイアウト
2番目のレイアウト
3番目のレイアウト
始めるために必要なもの
始める前に、Diviテーマをインストールしてアクティブ化し、WebサイトにDiviの最新バージョンがあることを確認してください。
さあ、始めましょう！
Diviの背景画像でパターンブレンドモードを使用する方法
既成のレイアウトで新しいページを作成する
まず、Diviライブラリの既成のレイアウトを使用します。 このデザインでは、MarinaLayoutPackのMarinaLandingPageを使用します。
Webサイトに新しいページを追加してタイトルを付け、DiviBuilderを使用するオプションを選択します。
この例では、Diviライブラリから作成済みのレイアウトを使用するため、[レイアウトの参照]を選択します。
マリーナランディングページのレイアウトを検索して選択します。
[このレイアウトを使用]を選択して、ページにレイアウトを追加します。
これで、デザインを作成する準備が整いました。
最初のレイアウト
最初のデザインでは、最初のヘッダー画像にシェブロンパターンを追加します。 これにより、ヘッダーに視覚的な関心が追加されます。 適用するブレンドモードにより、パターンはより繊細になり、背景画像を表示できるようになります。
まず、セクション設定を開き、[背景]セクションに移動します。 [パターン]タブをクリックして、[背景パターンの追加]を選択します。
次に、パターンタイプを選択します。 ご覧のとおり、さまざまなパターンから選択できます。これらはすべて、以下のパターン設定によってさらにカスタマイズできます。
- パターンタイプ：逆シェブロン2
パターンブレンドモードの追加
最後に、パターンブレンドモードを設定します。 このヘッダーにはソフトライトブレンドモードを使用します。 このブレンドモードでは、パターンがより微妙になり、背景画像の邪魔になりません。
- パターンブレンドモード：ソフトライト
最終設計
これが最初のレイアウトの最終的なデザインです。
これがこのデザインのモバイルビューです。
2番目のレイアウト
2番目のレイアウトでは、Marinaランディングページレイアウトの「仕組み」セクションにパターンを追加します。 背景画像とグラデーションに波のパターンを重ねて使用します。これは、ページの航海のテーマによく合います。 始めましょう。
まず、[仕組み]セクションに移動し、[セクション設定]を開きます。 背景設定を開き、[パターン]タブを選択して、[背景パターンの追加]をクリックします。
このデザインでは、Wavesパターンタイプを使用します。
- パターンタイプ：波
次に、パターンの色を白に変更します。
- パターンカラー：#FFFFFF
パターンブレンドモードの追加
これで、パターンにブレンドモードを追加できます。 パターンブレンドモードをオーバーレイに設定します。 このブレンドモードでは、背景画像の暗い色が暗くなり、明るい色が明るくなります。 このセクションにブレンドモードを追加すると、白い波のパターンが青の色合いに変わり、このページのデザインによく似合う興味深いパターン効果が作成されます。
- パターンブレンドモード：オーバーレイ
最終設計
これが「仕組み」セクションの最終的な設計です。
そして、これがモバイルデザインです。
3番目のレイアウト
3番目のレイアウトから始めましょう。 このレイアウトでは、「一流のセキュリティと修理」セクションの背景に不透明な斜めのストライプを追加します。
セクション設定を開き、背景セクションに移動することから始めます。 [パターン]タブをクリックし、[背景パターンの追加]を選択します。
斜めのストライプパターンを選択します。
次に、パターンの色を設定します。
- パターンカラー：rgba（255,255,255,0.25）
パターン変換設定を使用して、パターンを水平方向に反転します。 これは、パターンを好みに合わせて微調整するのに役立つもう1つの設定です。
- パターン変換：水平
パターンブレンドモードの追加
最後に、パターンブレンドモードを設定します。 このデザインでは、明度ブレンドモードを使用します。 これをパターンカラーと組み合わせると、画像に明るい画面が追加されますが、それでも写真が透けて見えます。 このデザインでは、パターンが独特のコントラストを追加するため、ボートのイメージが背景からより際立ちます。
- パターンブレンドモード：明度
最終設計
これがこのセクションの最終的なデザインです。
そして、これがこのセクションのモバイルデザインです。
最終結果
次に、パターンブレンドモードを使用したページの完全なデザインを見てみましょう。
最終的な考え
パターンを追加することは、背景画像に視覚的な関心を追加するための優れた方法ですが、パターンが背景画像を圧倒する場合があります。 または、背後の画像に基づいてパターンの色を変更したい場合もあります。 ありがたいことに、Diviには多くのブレンドモードが付属しているため、パターンを好きなだけカスタマイズできます。 パターン、ブレンドモード、パターンカラー、パターンサイズ、その他多くのDivi設定のさまざまな組み合わせを試して、背景画像の完全にユニークなデザインを作成できます。
うまくいけば、このチュートリアルがあなたのウェブサイトのデザインにいくつかのパターンを取り入れ、ブレンドモードを使用するようにあなたを刺激しました！ パターンを使用した別のデザインチュートリアルについては、このチュートリアルをチェックして、微妙な背景パターンマスクの作成方法を学習してください。 また、Diviで使用できるさまざまなフィルター、エフェクト、ブレンドモードの概要については、パート1とパート2の記事をご覧ください。以前に背景画像でDiviのパターンとブレンドモードを使用したことがありますか。 コメントで教えてください！