Divi用の9つの無料のシェイプドイメージオーバーレイをダウンロード

Webサイトで画像を表示する方法は、作成する全体的なデザインに大きな違いをもたらす可能性があります。 Diviの組み込みオプションを使用すると、さまざまなデザイン設定を適用して、たとえば境界線やボックスの影など、見事な方法で画像を表示することができます。 しかし、あなたがあなたの画像をよりユニークな形にすることを探しているなら、この投稿はあなたを助けるでしょう。 作成した任意のWebサイトでダウンロードして使用できる9つの無料の形状の画像オーバーレイを共有します。 これらの整形された画像オーバーレイを共有した後、DiviでWebサイトを構築する際にそれらを利用する方法も紹介します。 このチュートリアルが、独自の形状の画像オーバーレイを作成するきっかけになることを願っています。

それを手に入れよう！

プレビュー

チュートリアルに飛び込んでダウンロードする前に、さまざまな画面サイズで期待できる結果を簡単に見てみましょう。

デスクトップ

電話

シェイプドイメージオーバーレイを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

アプローチ

• ダウンロードフォルダにある整形された画像オーバーレイは、白い行やセクションの背景色と組み合わせるとすぐに使用できます
• 別の背景色に応じて整形画像オーバーレイを調整する場合は、上記のダウンロードに含まれているイラストレーターファイルを使用して、整形画像オーバーレイを別の色でエクスポートする必要があります。
• チュートリアルの最初の部分（Adobe Illustratorを使用）で、整形された画像オーバーレイの色を変更する方法を示します。
• 次に、Diviに移動し、整形された画像オーバーレイの1つを画像モジュールにアップロードします。
• また、画像モジュールに背景画像とグラデーションの背景を追加して、整形された画像オーバーレイを通して表示します

AdobeIllustratorを使用してシェイプされた画像オーバーレイをセクションの背景色に変更する

ダウンロードフォルダにあるIllustratorファイルを開きます

この投稿のアプローチセクションで述べたように、白い背景に画像の形をしたオーバーレイを使用する場合は、ダウンロードフォルダーにあるPNGファイルを使用するだけで準備が整います。 ただし、別の行やセクションの背景色で整形画像オーバーレイを使用する場合は、ダウンロードフォルダーにも含まれているAdobeIllustratorファイルを使用して手動で色を変更する必要があります。 色を変更するのにほとんどまたはまったく時間がかからず、文字通り作成するすべてのWebサイトで整形された画像オーバーレイを使用できるので、手順を実行してみましょう。 まず、AdobeIllustratorファイルを開く必要があります。

選択した画像形状オーバーレイを選択します

ファイルを開くと、あらゆる種類の目的に自由に使用できる、整形された画像オーバーレイを備えた9種類のアートボードが見つかります。 編集するものを選択します。

セクションの背景色に一致するように色を変更します

図形の色を、行やセクションに使用する予定の同じ背景色に変更して続行します。

アートボードを選択

色を変更したら、整形された画像オーバーレイを含むアートボード全体を選択できます。

PNGシェイプの画像オーバーレイをWeb用に保存

そして、 [ファイル]> [エクスポート]> [Web用に保存]に移動して、Web用のPNG画像ファイルとして保存します。

作り始めましょう！

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

新しいセクションを追加

Diviに切り替えて、結果を作成する時が来ました！ 新しいページを作成するか、既存のページを開いて、新しい通常のセクションを追加します。

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

列1に画像モジュールを追加

シェイプされた画像オーバーレイをアップロードする

列1に必要なモジュールは、画像モジュールのみです。 これはすべての魔法が起こる場所です。 まず、整形された画像オーバーレイをアップロードします。 画像の一部が完全に透明になっていることがわかります。 これにより、次の手順で背景画像とグラデーションの背景が透けて見えるようになります。

グラデーションの背景

次に、選択したグラデーションの背景を追加します。

• 色1：＃aa2bff
• カラー2：＃09f7eb

背景画像

また、PNGの背景画像をアップロードするか、グラデーションの背景を透けて見せたくない場合は通常の画像をアップロードします。 ホバー時にグラデーションの背景を変更する方法について作成した次の投稿にアクセスして、使用しているイラストをダウンロードすることもできます。

• 背景画像サイズ：カバー
• 背景画像の位置：中央下
• 背景画像の繰り返し：繰り返しなし

サイジング

このチュートリアルを機能させるためのもう1つの重要な手順は、イメージモジュールのサイズ設定で[全幅を強制]オプションを有効にすることです。 これにより、グラデーションの背景と背景画像が、整形された画像オーバーレイの透明な領域を通してのみ表示されるようになります。

• 全幅を強制：はい

タイトルテキストモジュールを列2に追加

コンテンツを追加する

2番目の列に移りましょう。 ここで、最初に必要なモジュールは、タイトルのテキストモジュールです。 選択したコンテンツをいくつか追加します。

テキスト設定

次に、見出しのテキスト設定に移動して、いくつかの変更を加えます。

• 見出し2フォント：Antic Didone
• 見出し2フォントの太さ：太字
• 見出し2テキストサイズ：45px
• 見出し2文字の間隔：-2px

間隔

カスタムの上部マージンも追加します。

• トップマージン：100px

説明テキストモジュールを列2に追加

コンテンツを追加する

必要な2番目のモジュールは、説明テキストモジュールです。 選択したコンテンツを入力します。

テキスト設定

次に、テキスト設定に移動し、モジュールのテキストの向きを変更します。

• テキストの向き：正当化

サイジング

サイズ設定でも幅を変更してください。

• 幅：63％

ボタンモジュールを列2に追加

コピーを追加

次に必要な最後のモジュールはボタンモジュールです。 選択したコンテンツを入力します。

ボタンの設定

ボタンの設定に移動し、ボタンの外観を変更して続行します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：17px
• ボタンのテキストの色：#ffffff
• グラデーションカラー1：＃aa2bff
• グラデーションカラー2：＃09f7eb
• グラデーション方向：111度

• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px
• ボタンの文字間隔：-2px
• フォントの太さ：超太字
• フォントスタイル：大文字

間隔

ボタンにもカスタムパディングを追加します。

• トップパディング：10px
• ボトムパディング：10px
• 左パディング：50px
• 右パディング：50px

ボックスシャドウ

最後になりましたが、ボタンに微妙な弓の影を追加してデザインを完成させます。

• ボックスシャドウブラー強度：50px
• ボックスシャドウスプレッド強度：-5px

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

電話

最終的な考え

この投稿では、構築中のあらゆる種類のWebサイトに使用できるDivi用の9つの無料の形状の画像オーバーレイを共有しました。 このチュートリアルが、常に再利用できる独自の形状の画像オーバーレイを作成するきっかけになったと思います。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！