Diviで2層の背景スクロール効果を作成する方法
公開: 2021-06-17Webサイトを目立たせる方法を探している場合は、2層の背景を作成する方法を学びたいと思うかもしれません。 2層の背景を作成すると、動きによって背景画像に命を吹き込むことができます。 今日のチュートリアルでは、Diviを使用して2層の背景デザインを作成する方法を紹介します。 このチュートリアルには、次の3つの部分があります。
- AdobePhotoshopで2つの画像ファイルを準備する
- Divi内でデザインを作成する
- スクロール効果を適用して背景をアニメーション化する
JSONファイルと画像ファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
レイアウトを無料でダウンロード
無料のレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.Photoshopで画像ファイルを作成する
背景がきれいな商品画像を選び、Photoshopで開く
このチュートリアルの最初の部分では、Diviチュートリアル全体で使用する画像ファイルを作成します。 これらを作成するには、Adobe Photoshopを使用しますが、他の任意の画像編集ソフトウェアを自由に使用してください。 作業している画像に次のものがある場合、2層の背景画像効果が最適に機能します。
- 画像内のオブジェクトに明確に焦点を合わせる
- きれいな背景
下の画像は完璧な例です。 この画像ファイルは、この投稿のダウンロード領域で共有されているzipフォルダーにあります。
重複レイヤー
Photoshop内で画像を開いたら、元のレイヤーのクローンを1回作成します。 複製レイヤーで作業します。
元のレイヤーを非表示
チュートリアルを下に移動するときに結果が表示されることを確認するには、元のレイヤーを非表示にします。
画像内のオブジェクト選択からPNGを作成
プレート上のクイック選択ツールを使用する
チュートリアルには、合計で2つの画像ファイルが必要です。
- オブジェクトのPNG、この場合はプレート
- オブジェクトのない背景のJPEG
オブジェクトを背景から分離しているので、Divi環境内でオブジェクトを個別に操作できます。
オブジェクトの選択を開始するには、ツールバーの「クイック選択ツール」を選択し、できるだけ多くのオブジェクトをカバーするようにします。
選択+マスク選択
オブジェクトの選択がまだ十分ではないことに気付くでしょう。 選択範囲を右クリックしたときに[選択してマスク]オプションを使用すると、選択範囲の外観を微調整できます。 そこに着いたら、不透明度や滑らかさなどを試してみることができます。
選択範囲からレイヤーマスクを作成する
スムーズな選択を作成しましたが、オブジェクト内にはまだ選択されていない部分がまだあります。 以下の印刷画面に表示されているレイヤーマスクボタンをクリックして、これらのパーツを手動で選択範囲に追加します。
ブラシでマスク内の選択を微調整
レイヤーマスクが作成されたら、ブラシを使用してレイヤーマスクを変更できます。 レイヤーマスクが選択されていることを確認してください。
- 黒のブラシ（＃000）を使用すると、レイヤーマスクの一部が削除されます
- 白いブラシ（#fff）を使用すると、レイヤーマスクの一部が追加されます。
硬さがあまりないブラシを使用するので、超精密である必要はありません。
カラーレイヤー付きマスクをダブルチェック
レイヤーマスクの下に色付きのレイヤーを配置することで、いつでもレイヤーマスクを再確認できます。 あなたがスポットを逃した場合、色付きのレイヤーはそれをより簡単に与えるでしょう。
PNG選択を別の画像ファイルとして保存
新しいファイルを作成する
オブジェクトのPNG選択ができたので、レイヤー全体のクローンを作成できるので、いつでもそのレイヤーに戻ることができます。 次のパートでは、複製レイヤーを使用して、オブジェクトなしで背景画像を作成します。
オブジェクトのサイズは最初のファイルサイズよりもはるかに小さいので、オブジェクト用に新しいファイルを作成して持ち込みます。
選択範囲を新しいファイルに合わせる
作成した新しいファイル内に、レイヤーマスクを含むレイヤーをコピーして貼り付けます。
Web用にエクスポート
そしてそれをPNGとしてウェブ用にエクスポートします。
画像ファイルを圧縮する
背景が透明なPNGはファイルサイズが大きくなる傾向があるため、選択したツールを使用してファイルを圧縮することをお勧めします。
元の画像のオブジェクトを削除する
レイヤーマスクを選択
最初のPhotoshopファイルに戻ります！ そこで、オブジェクトなしで背景画像を作成します。 これを行うために、ファイル内の最上位レイヤーを使用しています。 まず、レイヤーマスクが選択されていることを確認します。
マスクを反転
次に、このレイヤーのプロパティに移動し、[反転]をクリックします。
レイヤーマスクを適用する
これで、オブジェクトが最初のレイヤー内で透明になっていることがわかります。 右クリックして「レイヤーマスクを適用」を選択して、レイヤーマスクをレイヤーに適用します。
クローンツールを使用して空のスペースを埋める
真ん中にまだ穴があり、それを埋める必要があります。 そこで、クローン作成ツールが役に立ちます。 お好みのブラシサイズを選択し、画像を塗りつぶします。 これを正確に行う必要はありません。Diviチュートリアルでは、オブジェクトをその上に配置します。
オブジェクトなしで画像を保存
Web用にエクスポート
オブジェクトなしで背景画像を完成させたら、70％の品質でJPEGファイルとして保存できます。
画像ファイルを圧縮する
この画像も必ず圧縮してください。
2.Diviで2層の背景効果を構築する
新しいセクションを追加
背景画像をアップロードする
両方の画像ファイルが届いたら、Diviに切り替えましょう。 新しいページを開き、新しいセクションを追加します。 チュートリアルの最初の部分で作成した背景画像をアップロードします。
間隔
セクションの[デザイン]タブに移動し、いくつかのカスタム間隔値を適用します。 追加する下マージンは、効果が適切に機能することを確認するのに役立ちます。 通常、このマージンはデザインの次のセクションに置き換えられます。
- 下マージン：100vh
- トップパディング：
- デスクトップ：100px
- タブレットと電話：50px
- ボトムパディング：
- デスクトップ：100px
- タブレット：600px
- 電話番号：500px
行＃1を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、幅と最大幅を変更します。 これらの設定により、行は常にセクションコンテナの左側と右側に触れることができます。 このようにして、PNG画像と背景画像のバランスがすべての画面サイズで同じになるようにすることができます。
- 幅：100％
- 最大幅：100％
間隔
次に行の間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
ポジション
次に、行全体を再配置します。
- 位置：絶対
- 位置：
- デスクトップ：センター
- タブレットと電話：中央下部
- 垂直オフセット：
- デスクトップ：/
- タブレットと電話：30vh
画像モジュールを行に追加
PNG画像をアップロードする
行の設定が完了したら、画像モジュールを行に追加し、チュートリアルの最初の部分で作成したPNGファイルをアップロードします。
配置
デザインタブに移動し、画像の配置を変更します。
- 画像の配置：中央
サイジング
次に、サイズ設定を変更します。
- 幅：
- デスクトップ：36％
- タブレットと電話：60％
行＃2を追加
カラム構造
次に、次の列構造を使用して、セクションに別の行を追加します。
背景色
行設定を開き、背景色を変更します。
- 背景色：#ffffff
サイジング
次に、サイズ設定を変更します。
- 幅：90％
- 最大幅：550px
- 行の配置：
- デスクトップ：左
- タブレットと電話：センター
間隔
次に、いくつかのカスタムパディング値を適用します。
- トップパディング：11％
- ボトムパディング：11％
- 左パディング：5％
- 右パディング：5％
水平オフセット
位置設定にも水平オフセットを追加しています。
- 水平オフセット：
- デスクトップ：5％
- タブレットと電話：0％
テキストモジュール＃1を列1に追加します
H2コンテンツを追加する
モジュールを追加するときは、H2コンテンツを含む最初のテキストモジュールから始めます。
H2テキスト設定
次のようにH2テキストのスタイルを設定します。
- 見出し2フォント：Kumbh Sans
- 見出し2テキストサイズ：
- デスクトップ：90px
- タブレット：60px
- 電話番号：45px
テキストモジュール＃2を列1に追加します
説明コンテンツを追加
前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、選択した説明コンテンツを挿入します。
テキスト設定
それに応じてモジュールのテキスト設定を変更します。
- テキストフォント：Kumbh Sans
- テキスト行の高さ：2em
ボタンモジュールを列1に追加
コピーを追加
この列で必要な最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。
ボタンの設定
それに応じてボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：20px
- ボタンのテキストの色：＃6b6443
- ボタンの境界線の幅：0px
- ボタンの境界線半径：0px
- ボタンフォント：Kumbh Sans
- ボタンのフォントの太さ：太字
- ボタンアイコンを表示：はい
- ボタンアイコンの配置：左
- ボタンのホバー時にアイコンのみを表示：いいえ
ボックスシャドウ
ボックスシャドウも含めます。
- ボックスシャドウの水平位置：0px
- ボックスシャドウの垂直位置：2px
- 影の色：＃6b6443
3.スクロール効果を追加します
画像の垂直方向の動き
このチュートリアルの最後の部分では、PNG画像ファイルを含む画像モジュールにスクロール効果を追加することに焦点を当てます。 モジュールの設定を開き、[詳細設定]タブに移動して、次の垂直モーション設定を適用します。
- 垂直モーションを有効にする：はい
- 開始オフセット：
- デスクトップ：0
- タブレットと電話：4（0％）
- ミッドオフセット：
- デスクトップ：0
- タブレットと電話：0（97％）
- 終了オフセット：
- デスクトップ：0
- タブレットと電話：-2（100％）
画像の水平方向の動き
次の水平モーション設定を使用して設計を完了しています。
- 水平方向の動きを有効にする：はい
- 開始オフセット：
- デスクトップ：0（0％）
- タブレットと電話：0
- ミッドオフセット：
- デスクトップ：0（65％）
- タブレットと電話：0（97％）
- 終了オフセット：
- デスクトップ：-10（100％）
- タブレットと電話：0
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、2層の背景を作成し、Diviの組み込みのスクロール効果を使用してアニメーション化する方法を示しました。 チュートリアルの最初の部分では、AdobePhotoshop内に画像ファイルを準備しました。 チュートリアルのパート2では、レスポンシブデザインを作成するためにDivi内の画像ファイルを使用することに焦点を当てました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。