Diviのグラデーションビルダーで画像を形作る方法

画像マスクは、画像に興味深い形状を追加するためによく使用されます。 それらは画像が形を通して覗くのを許し、ページにユニークなデザイン要素を与えます。 Diviのグラデーションビルダーを使用すると、シェイプを作成するために必ずしもマスクを使用する必要はありません。 代わりに、グラデーションストップと設定を使用して作成できます。 この投稿では、Diviのグラデーションビルダーを使用して画像を整形し、画像に独自のデザインを追加する方法について説明します。

始めましょう。

プレビュー

まず、このチュートリアルで作成するものを見てみましょう。

最初の例–円形の画像形状

デスクトップ

タブレット

電話

2番目の例–線形画像の形状

デスクトップ

タブレット

電話

3番目の例–楕円形の画像形状

デスクトップ

タブレット

電話

4番目の例–円錐形の画像

デスクトップ

タブレット

電話

レイアウトを作成する

まず、すべての例で使用するレイアウトを作成しましょう。 このレイアウトはヒーローセクションとして使用できます。 片面にタイトルと説明、もう片面に画像が含まれます。 次に、そのレイアウトと画像を例に使用します。

セクションをカスタマイズする

まず、新しいDiviページを作成し、セクションをカスタマイズします。 セクションの設定を開き、背景色を＃f0f3fbに変更します。

• 背景色：＃f0f3fb

次に、[デザイン]タブに移動し、上部と下部に10％のパディングを追加します。 設定を閉じます。

• パディング：10％上、下

行を追加する

次に、2/3列と1/3列の行を追加します。

• 2 / 3、1/3行

[デザイン]タブに移動します。 [カスタムガター幅を使用]を有効にし、[最大幅]を1480pxに設定します。

• カスタムガター幅を使用：はい
• 最大幅：1480px

最初の列の設定

[行のコンテンツ]タブで、行の最初の列の設定を開き、[デザイン]タブに移動して、左右に9％のパディングを追加します。 列と行の設定を閉じます。

• パディング：9％左、右

最初のテキストモジュール設定

次に、左側の列にテキストモジュールを追加します。

コンテンツテキストの見出し4を選択し、本文のコンテンツを追加します。

• 見出し：4
• 本文：Diviへようこそ

次に、[デザイン]タブに移動します。 H4フォントをモントセラトに、ウェイトを太字に、スタイルをTTに、カラーを＃1d4effに設定します。

• 見出し4フォント：Montserrat
• 重量：太字
• スタイル：TT
• 色：＃1d4eff

デスクトップのフォントサイズを16ピクセル、タブレットのサイズを14ピクセル、電話のサイズを12ピクセルに設定します。 文字間隔を0.3emに、行の高さを1.6emに変更します。

• サイズ：16pxデスクトップ、14pxタブレット、12px電話
• 文字間隔：0.3em
• 線の高さ：1.6em

[間隔]まで下にスクロールして、[下マージン]を0pxに変更します。 モジュールを閉じます。

• マージン：0px下

2番目のテキストモジュール設定

次に、最初のモジュールの下にテキストモジュールを追加します。

テキストタイプを見出し1に設定し、本文のコンテンツを追加します。

• 見出し：1
• 本文：あなたの経済的未来を計画する

次に、[デザイン]タブを選択します。 見出しのフォントをMontserratに、重みを太字に、色を＃0f1154に変更します。

• 見出し1フォント：Montserrat
• 重量：太字
• 色：＃0f1154

フォントサイズをデスクトップの場合は80ピクセル、タブレットの場合は40ピクセル、電話の場合は24ピクセルに設定します。 線の高さを110％に変更します。 モジュールを閉じます。

• サイズ：80pxデスクトップ、40pxタブレット、24px電話
• 線の高さ：110％

3番目のテキストモジュール設定

次に、2番目のモジュールの下にテキストモジュールを追加します。

テキストタイプは段落のままにして、本文のコンテンツを追加します。

• 見出し：段落
• 本文：コンテンツ

次に、[デザイン]タブに移動します。 テキストフォントをRobotoに変更し、WeightをMediumに、Colorをblackに設定します。

• テキストフォント：Roboto
• 重量：中
• 色：＃000000

デスクトップとタブレットのサイズを18ピクセルに、電話のサイズを14ピクセルに変更します。 線の高さを180％に設定します。

• サイズ：18pxデスクトップ、18pxタブレット、14px電話
• 線の高さ：180％

最後に、[間隔]まで下にスクロールして、[下マージン]を0％に設定します。 モジュールの設定を閉じます。

• マージン：0px下

画像モジュールの設定

次に、右側の列に画像モジュールを追加します。

まず、画像の上にあるゴミ箱またはリセットアイコンをクリックして、ダミー画像を削除します。

次に、[背景]を下にスクロールし、[画像]タブを選択して、画像を追加します。 すべての画像設定をデフォルトのままにします。 最初は画像があまり表示されません。 これは修正していきます。

次に、[デザイン]タブを選択し、[間隔]まで下にスクロールします。 デスクトップの場合、-10％上、-30％左、10％右マージンを追加します。 300pxの上部と下部のパディングを追加します。 これらはデスクトップ設定です。 タブレットと携帯電話の調整を行います。

• マージン（デスクトップ）：-10％上、-30％左、10％右
• パディング：上300px、下300px

次に、画像の形状がレスポンシブであることを確認します。 タブレットアイコンを選択して、タブレットと電話の設定を開きます。 マージン設定にカーソルを合わせ、表示されるタブレットアイコンを選択します。 これにより、デバイスタイプごとのタブを含む一連のタブが開きます。 [タブレット]タブを選択し、マージンを0％上、0％左、0％右マージンに変更します。 [電話]タブはタブレットの設定に従うため、マージンに合わせて調整する必要はありません。

• マージン（タブレット/電話）：0％上、0％左、0％右

次に、パディング設定にカーソルを合わせると表示されるタブレットアイコンを選択します。 [電話]タブを選択し、パディングを150px上と150px下に変更します。 タブレットのパディングはデスクトップの設定に従います。 モジュールの設定を閉じます。

• パディング：150px上、150px下

Diviのグラデーションビルダーの例で画像を形作る

次に、これらの設定を使用して、Diviのグラデーションビルダーで画像を整形します。 後で説明するように、いくつかの設定は、Diviのグラデーションビルダーを使用して興味深い画像形状を作成するのに役立ちます。

覚えておくべきいくつかの重要な設定には、グラデーションストップのスタックとパターンを繰り返すように設定することが含まれます。 すべての画面サイズでパターンをテストして、形状が気に入っていることを確認してください。

DiviのGradientBuilderの使用の詳細については、ElegantThemesブログで「GradientBuilder」を検索してください。 コントロールと設定を順を追って説明する詳細なチュートリアルを含むいくつかの投稿があります。

最初の例–円形グラデーションビルダーの画像形状

最初の例では、中央に穴のある円形の画像を示しています。

画像モジュールの設定を開き、[背景]まで下にスクロールします。 [背景グラデーション]タブを選択し、6つのグラデーションストップを設定します。

• 最初の停止：0％、＃f0f3fb
• 2番目：45％、＃f0f3fb
• 3番目（2番目の上）：45％、rgba（41,196,169,0）
• 4番目：69％、rgba（250,255,214,0）
• 5番目（4番目の上）：69％、＃f0f3fb
• 6番目：100％、＃f0f3fb

次に、グラデーションの種類として[円形]を選択し、[位置]を[中央]に設定し、[単位]に[パーセント]を使用して、[グラデーションを背景画像の上に配置]を有効にします。

• タイプ：サーキュラー
• 位置：中央
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

2番目の例–線形勾配ビルダーの画像形状

2番目の画像形状の例を見てみましょう。 この例では、画像全体に対角線を配置します。

設定を開き、ダウルを[背景]までスクロールして、[背景のグラデーション]タブを選択します。 4つの勾配ストップを追加します。

• 最初の停止：0％、＃f0f3fb
• 2番目：5％、＃f0f3fb
• 3番目（2番目の上）：5％、rgba（175,175,175,0）
• 4番目：13％、rgba（41,196,169,0）

勾配タイプを150度の方向で線形に設定します。 繰り返しに設定します。 単位にパーセントを使用し、背景画像の上にグラデーションを配置を有効にします。

• タイプ：線形
• 方向：150度
• 繰り返し：はい
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

3番目の例–楕円形グラデーションビルダーの画像形状

これが3番目の画像形状の例です。 これは楕円形を使用しています。

画像モジュールの設定を開き、[背景]まで下にスクロールします。 [背景グラデーション]タブを選択し、4つのグラデーションストップを作成します。

• 最初の停止：0％、＃f0f3fb
• 2番目：9％、＃f0f3fb
• 3番目（2番目の上）：9％、rgba（175,175,175,0）
• 4番目：21％、rgba（41,196,169,0）

次に、グラデーションの種類を楕円形に変更し、位置を左上に設定します。 [グラデーションを繰り返す]を選択し、単位としてパーセンテージを使用して、[グラデーションを背景画像の上に配置]を有効にします。

• タイプ：楕円形
• 位置：左上
• リピートグラジエント：はい
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

4番目の例–円錐グラデーションビルダーの画像形状

4番目の例では、円錐形を使用して独自の画像形状を作成します。

画像モジュールの設定を開き、[背景]まで下にスクロールして、[背景のグラデーション]タブを選択します。 これには5つのグラデーションストップがあります。

• ファーストストップ：23％、＃f0f3fb
• 2番目：35％、＃f0f3fb
• 3番目（2番目の上）：35％、rgba（41,196,169,0）
• 4番目：65％、rgba（250,255,214,0）
• 5番目（4番目の上）：65％、＃f0f3fb

グラデーションタイプを円錐に設定し、方向をデフォルト設定のままにします。 位置を下に設定し、単位にパーセントを使用して、背景画像の上にグラデーションを配置を有効にします。

• タイプ：コニカル
• 方向：180度
• 位置：下
• 単位：パーセント
• 背景画像の上にグラデーションを配置：はい

グラデーションバルダー形状の結果

すべてのレイアウトはうまくいきました。 画像の形が目立ち、画像もわかりやすいです。 すべてがレスポンシブなので、どのデバイスでも見栄えがします。

最初の例–円形の画像形状

デスクトップ

タブレット

電話

2番目の例–線形画像の形状

デスクトップ

タブレット

電話

3番目の例–楕円形の画像形状

デスクトップ

タブレット

電話

4番目の例–円錐形の画像

デスクトップ

タブレット

電話

終わりの考え

これが、Diviのグラデーションビルダーを使用して画像を整形する方法についての説明です。 グラデーションビルダーは、いくつかの興味深い画像形状を作成できます。 グラデーションストップをいじったり、さまざまなグラデーションタイプを試したり、グラデーションリピートを有効にしたりすることは、新しいデザインを作成するための優れた方法です。 必ずすべての画面サイズでデザインを確認し、必要に応じて調整してください。

私たちはあなたから聞きたい。 Diviのグラデーションビルダーを使用して画像を形成しましたか？ コメントであなたの経験について教えてください。