境界線と背景画像は、Web サイトを構築する際に引き続き人気のあるデザイン要素です。 適切な背景画像を使用すると、カスタム グラフィックに時間と費用をかけずに、サイトに個性とスタイルを追加できます。 枠線は、構造を追加するのに役立ちます。 コンテンツ.
今日は、背景画像をボーダーとしてデザインすることで、これら XNUMX つを結び付けます。 Divi には、背景画像をカスタマイズするための便利なオプションが用意されており、ユニークなボーダー デザインの背景画像を簡単にデザインできます。 これにより、あらゆる種類の創造的な方法で、色、グラデーション、ボックス シャドウ、ブレンド モードを組み合わせることができます。
のは、始めましょう。
始めるために必要なもの
開始するには、次のものが必要です。
その後、デザインを開始するための空白のキャンバスが作成されます。 Divi.
背景画像の境界パターンを作成するための一般的なヒント
構築を開始する前に、背景画像の境界パターンを作成する際に留意すべき一般的なヒントをいくつか紹介します。
＃1テクスチャの多い画像を選択
ほとんどの場合、境界線を狭くする必要があります。 これは、画像の多くを見ることができないことを意味します。 したがって、テクスチャの多い画像を使用すると便利です。 たとえば、風景の写真、花の花束、または高い塔を使用できます。 これが私がこのチュートリアルに使用しているいくつかの画像です。
＃2背景画像の境界線にグラデーションと透明度を使用する
背景画像は、それ自体が素晴らしい境界線になることがあります。 コンテンツ。 ただし、ほとんどの場合、背景画像にオーバーレイを追加して、色を調整したり、背景を暗くしたり明るくしたりすることが必要になります。 背景のグラデーションは、背景画像にレイヤーを追加し、ユニークな境界線のデザインを作成するのに最適な方法です。
＃3マージモードを使用する
背景画像にブレンドモードを使用すると、境界パターンに独自の色とテクスチャを適用できます。 背景画像に背景色またはグラデーションを追加してから、背景画像のブレンドモードを選択するだけです。 色、明るさ、乗算、および画面は、背景画像の境界線に最適なブレンドモードです。
ユニークな形状の角丸オプションを使用
すべての境界線が直線のエッジを持つ必要があるわけではありません。 ちょっと混ぜてね！ 角丸オプション Divi これらの角を創造的に形作ることができます。
視差の背景画像を境界線として使用する
パララックスの素晴らしいところは、動きのあるデザインに命を吹き込むことです。 さらに、ボーダーデザインに視差のある背景画像を使用すると、目立つ微妙な動きを作成して、コンテンツを目立たせることができます。
Diviの背景画像のボーダーデザイン
背景画像の境界パターンの作成の基礎となる一般的な考え方を理解したので、いくつかを一緒に想像してみましょう。 2の異なるモデルを構築します。 それぞれに架空のコンテンツとして機能する基本的なプレゼンテーションモジュールがあります。 そして、列パラメーターを使用して、モジュールの背景画像の境界線を追加します。
最初の設計から始めましょう。
#1境界線の背景画像
この最初のデザインは、コンテンツのフレームのように見えるように、エリアシャドウ付きの狭い背景画像の境界線を備えています。
設計方法は次のとおりです。
まず、通常のセクションにXNUMX列の行を追加します。
要約モジュールを追加
次に、左側の列にblurbモジュールを追加します。
ぼかしを配置したら、ぼかし設定を開き、デフォルトの画像を抽出して、タイトルと本文のコンテンツのみが表示されるようにします。
次に、テキストの背景を白にします。
次に、プレゼンテーションのデザインパラメーターを次のように更新します。
- テキストタイトル：オズワルド
- ボディポリス：ラト
- 上部のマージン5％、下部の5％、左側の5％、右側の5％
- 室内装飾品：上部に7％、下部に7％、左側に10％、右側に10％
- 丸い角：右上の20px、左下の20px
- ボックスシャドウ：スクリーンショットを参照
列に背景画像を追加する
これにより、プレゼンテーションモジュールが処理されます。 次に、背景画像の境界線を追加しましょう。 これを行うには、Blurbモジュールを含む列に背景画像を追加します。 行の設定を開き、次に列1の設定を開き、次の背景を追加します。
- 背景画像：[お好みの画像をアップロード]
- 背景色：#303a7a
- 混合背景画像：明るさ
次に、丸みを帯びた角とボックスの影を次のように更新します。
- 丸い角：右上の20px、左下の20px
- ボックスシャドウ：スクリーンショットを参照
最終結果
次に、最終設計を確認します。
境界線の背景画像＃2
この次のデザインは、特に画像ブレンドモードと組み合わせると、テクスチャの高い画像を使用すると美しい境界線を作成できるという事実を強調しています。
設計方法は次のとおりです。
Blurbモジュールを追加する
デザインを作成するには、デザイン＃2を含む同じ行の列1にぼかしテキストを追加します。先に進み、デザインレイアウトモジュール＃1をコピーして、列2に貼り付けます。プレゼンテーションモジュールの設定を次のように更新します。
- 角丸：デフォルト設定に戻す
- マージン：上部に10％、下部に10％、左側に10％、右側に10％
- 室内装飾品：上部に15％、下部に15％、左側に10％、右側に10％
- ボーダーの幅：1px
- 枠の色：#ffffff
列に背景画像を追加する
モジュールを配置したら、ライン設定を開き、2列に背景グラデーションを追加します。
- 左背景のグラデーション：#f7e0a5
- 右背景のグラデーションカラー：rgba（237,240,0,0.79）
- グラデーション方向：90deg
- 開始位置：50％
- 最終ポジション：0％
次に、素敵なグラデーション効果を持つ背景画像を追加します。
- 背景画像：[画像をダウンロード]
- 背景画像ミックス：カラー
ご覧のとおり、カラーブレンドモードでは、画像の背後にあるXNUMXつの色のグラデーションの明るさが維持され、柔らかな色の素敵な画像境界パターンが作成されます。
最終結果
設計の最終結果を発見します。
最新の考え
写真で境界線を作成することは、デザインに美しさと個性を加える簡単な方法です。 このチュートリアルで強調表示されているデザインは、ユニークなボーダーのデザインでDiviで利用できる可能性を強調するために作られています。 したがって、さまざまな色の組み合わせで、デザインは無限です。 だから、いくつかの画像をつかんで、Diviの画像で境界線のデザインをもっと調べてください。
あなたの健康に。
