Diviで画像をブレンドしてカスタム背景デザインを作成する方法

複数の画像をブレンドすると、Webサイトのプロフェッショナルな背景デザインを作成するのに役立ちます。 アイデアは、2つまたは3つの別々の画像を撮影し、それらを互いに重ねることです。 次に、ブレンドモードを使用してレイヤーを混合し、統一された調和のとれたデザインを作成します。

すべてのDiviビルダー要素には、ブレンドモードとフィルターオプションが組み込まれているため、Diviビルダーで要素を簡単にブレンドできます。 もちろん、フォトショップ（または他のフォトエディター）で画像をブレンドすることもできますが、便利なDiviソリューションが必要な場合は、この投稿が役立つはずです。 Diviは実際これをかなり簡単にします。 適切な場所に画像を取得したら、数回クリックするだけですべての画像をブレンドできます。 そしてもちろん、これらの最終的な仕上げを行い、デザインを新しい創造的な高みに引き上げるためのDiviオプションの武器があります。

始めましょう。

スニークピーク

これが私たちが一緒に構築しようとしているデザインの概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

私たちのYoutubeチャンネルを購読する

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、インストールされているDiviテーマ（またはDiviテーマを使用していない場合はDivi Builderプラグイン）をインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. チュートリアルで使用するいくつかのモック画像をメディアライブラリにアップロードします。 Eye Doctor LayoutPackの画像を使用しています。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

複数の画像をブレンドしてDiviでカスタム背景デザインを作成する方法

セクションと行を作成する

物事を順調に進めるには、通常のセクションに1列の行を追加します。

画像モジュールを使用した画像の追加

画像＃1

行と列を設定したら、画像モジュールを行に追加します。

500px x700px程度のサイズの画像をアップロードします。 アイドクターレイアウトパックのものを使用しています。

画像をアップロードしたら、vwの長さの単位を使用して画像に最大幅を指定し、ブレンドする他の画像と適切に拡大縮小し、次のように左に揃えます。

• 最大幅：33vw
• モジュールの配置：左

追加する次の画像をこの画像の右側に揃えたいので、この画像を左側にフロートさせる必要があります。 これを行うには、次のCSSをメイン要素に追加します。

float: left;

画像＃2

次に、現在の画像の下に新しい画像モジュールを追加します。

その後、約1000px x667pxのサイズの新しい画像をアップロードします。

次に、画像に新しい最大幅と配置を指定します。

• 最大幅：40vw
• モジュールの配置：右

最初の画像は左に浮いているので、2番目の画像は右に隣接しているはずです。

これらの画像に最後の仕上げをするために戻ってきますが、とりあえずセクション設定にジャンプしましょう。

セクション設定

セクション設定を開き、次のように背景画像とグラデーションを追加します。

• 背景画像：[1920px x1280px付近の画像をアップロード]

• 背景グラデーション左色：rgba（1,16,63,0.64）
• 背景グラデーションの右の色：rgba（12,113,195,0.82）
• 背景画像の上にグラデーションを配置：はい

次に、パディングを少し調整します。

• パディング（デスクトップ）：0px上、0px下
• パディング（電話）：0px上、10vw下

行設定

セクションが完了したら、行設定を開き、以下を更新します。

• 幅：100％;
• 最大幅：100％;
• パディング：0px上、0px下

行にブレンドモードを追加する

これで、行はセクションの背景全体をカバーするはずです。 これにより、2つの画像をセクションの背景とブレンドするために、行にブレンドモードを追加できます。 これを行うには、次のブレンドモードを追加します。

• ブレンドモード：乗算

なぜ掛けるの？

乗算ブレンドモードは、基本的に現在のレイヤー/行（含まれている画像を含む）とその下のレイヤー（セクションの背景）を乗算します。 効果を考える簡単な方法は、スライドプロジェクターの2つのスライドが前後に積み重ねられていることを想像することです。 2つの画像を画面に投影すると、わずかに暗い2つの画像がブレンドされます。

画像を垂直方向に中央揃え

必須ではありませんが、行の2つの画像を垂直方向の中央に配置したい場合は、CSSのスニペットを列に追加できます。 これを行うには、行の設定を開き、列の設定をクリックします。 次に、次のCSSをメイン要素に追加します。

display: flex;
align-items: center;

上位2つの画像に最後の仕上げをする

現在、2つの上位の画像はうまくブレンドされていますが、いくつかのデザインの調整を使用して、もう少しプロフェッショナルな外観にすることができます。 ホワイトボックスシャドウを使用して画像のエッジを柔らかくし、変換変換を使用して、画像を残したい場所に正確に配置できます。

画像＃1最後の仕上げ

左側の画像モジュールの設定を開き、以下を更新します。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウブラー強度：6vw
• ボックスシャドウスプレッド強度：6vw
• 影の色：#ffffff

• 変換変換：5vw（X軸）、11vw（Y軸）

画像＃2最後の仕上げ

左側の画像＃1の修正が終了したら、右側の画像＃2の設定を開き、次の変更を加えます。

• ボックスシャドウ：スクリーンショットを参照
• ボックスシャドウブラー強度：3vw
• ボックスシャドウスプレッド強度：3vw
• 影の色：#ffffff

いくつかのフィルター効果を追加して、画像のブレンドをさらに改善することもできます。

• 飽和度：30％
• 不透明度：60％

テキストコンテンツの追加

3つの画像が美しくブレンドされたセクションが完成したので、セクションの上にコンテンツを追加できます。 これを行うには、現在のセクションの下に新しいセクションを追加します。

次に、通常のセクションに1列の行を追加します。

次に、テキストモジュールを行に追加します。

ボディコンテンツ

テキストモジュールのコンテンツを次の本文コンテンツで更新します。

<h1>Book a Free Eye Exam</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

テキストデザイン

ボディコンテンツが配置されたら、次のようにデザイン設定を更新します。

• テキストテキストの色：#ffffff
• 見出しフォント：ポピン
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：5vw
• 幅：60vw（デスクトップ）、100％（電話）
• マージン（デスクトップ）：-35％上、35％下
• マージン（電話）：-70％上、70％下

最終設計

これが最終的なデザインです。

さまざまなブラウザ幅に合わせてスケーリングする方法は次のとおりです。

より多くの設計オプションを探る

デザインが完成したら、より多くのブレンドモード、フィルター、色、およびより多くのデザインオプションを簡単に試すことができます。 たとえば、デザインを新しい配色に一致させたい場合は、セクションで使用される2つの背景グラデーションの色を変更するだけです。

または、画像の1つにフィルターを追加して、飽和状態の白黒にするか、不透明度を少し下げることができます。

最終的な考え

Diviのブレンドモードとフィルターオプションには、プロの背景デザインの画像をブレンドするために必要なすべてが揃っています。 秘訣は、vwの長さの単位を使用して画像を配置し、背景デザイン全体がモバイルでもレスポンシブになるようにすることです。 しかし、画像が配置されたら、あらゆる種類のブレンドモードやその他の無数のデザインオプションを試して、素晴らしいブレンドデザインを作成できます。

この投稿があなたに少しのインスピレーションを与えてくれたことを願っています。コメントであなたからの連絡を楽しみにしています。

乾杯！