Diviで背景画像の境界線デザインを作成する方法
公開: 2019-08-18境界線と背景画像は、ウェブサイトを構築する際に引き続き人気のあるデザイン資産です。 適切な背景画像を使用すると、カスタムグラフィックに時間とお金を費やすことなく、サイトに個性とスタイルを追加できます。 また、境界線はコンテンツに構造を追加するのに役立ちます。
今日は、背景画像を境界線としてデザインすることにより、これら2つのアセットをまとめます。 Diviには、背景画像をカスタマイズするための便利なオプションセットがあり、独自の境界線デザインの背景画像を簡単にデザインできます。 これにより、色、グラデーション、ボックスシャドウ、ブレンドモードをあらゆる種類のクリエイティブな方法で組み合わせることができます。
始めましょう。
スニークピーク
一緒に作成する背景画像の境界線のデザインは次のとおりです。
レイアウトを無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
始めるために必要なもの
開始するには、次のものが必要です。
- Diviテーマがインストールされ、アクティブになっています
- フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
- モックコンテンツに使用する画像
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
背景画像の境界線デザインを作成するための一般的なヒント
作成を開始する前に、背景画像の境界線デザインを作成するときに覚えておくべきいくつかの一般的なヒントを次に示します。
＃1テクスチャの多い画像を選択する
ほとんどの場合、境界線をより狭い側に配置する必要があります。 これは、画像の多くを見ることができないことを意味します。 そのため、テクスチャの多い画像を使用すると便利です。 たとえば、風景の写真、花の花束、または都市の高層ビルを使用できます。 これが私がこのチュートリアルに使用しているいくつかの画像です。
＃2背景画像の境界線でグラデーションと透明度を使用する
背景画像は、コンテンツの優れた境界線として独立している場合があります。 ただし、ほとんどの場合、背景画像にいくつかの色のオーバーレイを追加したり、背景を暗くしたり明るくしたりする必要があります。 背景のグラデーションは、背景画像にオーバーレイを追加し、独自の境界線デザインを作成するための優れた方法です。
＃3ブレンドモードを使用する
背景画像にブレンドモードを使用すると、境界線のデザインに独自の色とテクスチャを実装できます。 あなたがする必要があるのはあなたの背景画像と一緒に背景色またはグラデーションを追加し、次に背景画像のブレンドモードを選択することです。 背景画像の境界線の優れたブレンドモードには、色、明度、乗算、画面などがあります。
ユニークな形状に丸みを帯びたコーナーオプションを使用する
すべての境界線に直線のエッジがある必要はありません。 少し混ぜてください！ ディビの丸い角のオプションを使用すると、創造的な方法でそれらの角を形作ることができます。
視差の背景画像を境界線として使用する
視差の素晴らしいところは、動きのあるデザインを生き生きとさせることです。 さらに、ボーダーデザインに視差のある背景画像を使用すると、目立つ微妙な動きを作成してコンテンツをポップにすることができます。
Diviで背景画像の境界線をデザインする
背景画像の境界線デザインの作成の背後にある一般的な考え方を理解したので、いくつか一緒にデザインしましょう。 4つの異なるデザインを作成します。 それぞれに、モックコンテンツとして機能する基本的な宣伝文句モジュールがあります。 また、列設定を使用して、モジュールの背景画像の境界線を追加します。
最初のデザインから始めましょう。
背景画像ボーダーデザイン＃1
この最初のデザインは、コンテンツのフレームのように見えるようにボックスの影が付いた狭い背景画像の境界線を特徴としています。
設計方法は次のとおりです。
まず、通常のセクションに2列の行を追加します。
宣伝文モジュールを追加する
次に、左側の列に宣伝文モジュールを追加します。
宣伝文が配置されたら、宣伝文の設定を開き、デフォルトの画像を取り出して、タイトルと本文のコンテンツのみが表示されるようにします。
次に、宣伝文句に白い背景色を付けます。
次に、宣伝文のデザイン設定を次のように更新します。
- タイトルフォント：Oswald
- ボディフォント：ラト
- マージン5％上、5％下、5％左、5％右
- パディング：上7％、下7％、左10％、右10％
- 丸みを帯びた角：右上20px、左下20px
- ボックスシャドウ：スクリーンショットを参照
列に背景画像を追加する
それは私たちの宣伝文句の世話をします。 次に、背景画像の境界線を追加しましょう。 これを行うために、blurbモジュールを保持する列に背景画像を追加します。 行の設定を開き、次に列1の設定を開いて、次の背景を追加します。
- 背景画像：[お好みの画像をアップロード]
- 背景色：＃303a7a
- 背景画像のブレンド：明度
次に、丸みを帯びた角とボックスの影を次のように更新します。
- 丸みを帯びた角：右上20px、左下20px
- ボックスシャドウ：スクリーンショットを参照
最終結果
次に、最終的なデザインを確認します。
背景画像ボーダーデザイン＃2
この次のデザインは、特に画像ブレンドモードと組み合わせた場合に、テクスチャの多い画像を使用すると、実際に美しい境界線を作成できることを強調しています。
設計方法は次のとおりです。
宣伝文モジュールを追加する
デザインを作成するために、デザイン＃1を含む同じ行の列2に宣伝文を追加します。 先に進み、デザイン＃1から宣伝文モジュールをコピーして列2に貼り付けます。次に、宣伝文モジュールの設定を次のように更新します。
- 丸みを帯びた角：デフォルトに戻す
- マージン：上10％、下10％、左10％、右10％
- パディング：上15％、下15％、左10％、右10％
- ボーダー幅：1px
- ボーダーカラー：#ffffff
列に背景画像を追加する
モジュールを配置したら、行の設定を開き、列2に背景のグラデーションを追加します。
- 背景グラデーションの左の色：＃f7e0a5
- 背景グラデーションの右の色：rgba（237,240,0,0.79）
- グラデーション方向：90度
- 開始位置：50％
- 終了位置：0％
次に、素敵なカラーブレンド効果のある背景画像を追加します。
- 背景画像：[画像をアップロード]
- 背景画像のブレンド：色
ご覧のとおり、カラーブレンドモードでは、画像の背後にある2つのグラデーション色の明るさが維持され、柔らかな色の素敵な画像境界線デザインが作成されます。
最終結果
デザインの最終結果を確認してください。
背景画像ボーダーデザイン＃3
この次のデザインは、ボーダーデザインでの視差画像の使用を強調しています。 また、ボックスシャドウトリックを使用して、視差画像のカラーオーバーレイを作成します。
設計方法は次のとおりです。
手始めに、最初の行の下に新しい2列の行を追加し、一番上の行の列1の宣伝文から宣伝文モジュールをコピーして、新しい行の列1に貼り付けます。
次に、blurbモジュールを次のように更新します。
- 背景色：＃333344
- テキストの色：明るい
- マージン：上10％、下10％、左10％、右10％
- パディング：上10％、下10％
- 丸みを帯びた角：20px
- ボックスシャドウ：なし
宣伝文句が配置されたら、行の設定を開き、次のように列1の設定を更新します。
- 背景画像：[画像をアップロード]
- 視差効果を使用する：はい
- 視差法：真の視差
- 丸みを帯びた角：20px
- ボックスシャドウ：スクリーンショットを参照
現在、視差のある背景画像の境界線は、デフォルトでは少し威圧的であり、コンテンツの邪魔になる可能性があります。
視差のある背景画像を明るくするために、ライトオーバーレイとして機能する宣伝文にボックスシャドウを追加できます。
宣伝文の設定を再度開き、以下を追加します。
- ボックスシャドウ：スクリーンショットを参照
- ボックスシャドウブラー強度：0px
- ボックスシャドウスプレッド強度：200px
- 影の色：#ffffff
最終設計
それでは、最終的なデザインを確認しましょう。
背景画像ボーダーデザイン＃4
この次のデザインでは、背景画像とグラデーションを組み合わせて、宣伝文のコンテンツの上下の境界線として機能させます。
宣伝文モジュールを追加する
開始するには、一番上の行の列2にあるblurbモジュールをコピーして、2番目の行の列2に貼り付けます。
終了したら、次のように宣伝文モジュールの設定を更新します。
- 境界線：[境界線のデフォルトを復元して境界線を削除します]
- ボックスシャドウ：なし
- マージン：上5％、下5％、左0％、右0％
背景画像の境界線を追加する
このデザインの背景画像の境界線を追加するには、行の設定を開き、次のように列2の設定を更新します。
- 背景画像：[画像をアップロード]
- 背景グラデーションの左の色：＃141777
- 背景グラデーション右の色：＃ffb7eb
- グラデーション方向：90度
- 開始位置：50％
- 終了位置：0％
- 背景画像：[画像をアップロード]
- 背景画像のブレンド：明度
最終設計
最終的なデザインをチェックしてください。
最終的な考え
Diviで背景画像の境界線を作成することは、デザインに美しさと個性を追加する簡単な方法です。 このチュートリアルで取り上げるデザインは、ユニークなボーダーデザインを作成するためにDiviで利用できる主要なオプションを紹介することを目的としています。 ただし、さまざまな色の組み合わせとブレンドモードがすべて利用できるため、唯一の制限は想像力です。 だから、あなた自身のいくつかの画像をつかんで、あなたの次のプロジェクトのために新しくてエキサイティングなボーダーデザインを探検してください。
コメントでお返事をお待ちしております。
乾杯！