Diviのデザインオプションを使用してテクスチャ背景を作成および使用する方法

今日のDiviチュートリアルでは、単純なテクスチャ背景を作成し、それらをセクションの背景として使用して、Webサイトをもう少し本物らしく見せるための方法を紹介します。 最近の無料の学習管理レイアウトを確認すると、すべてのページでテクスチャ背景も使用されていることがわかります。

それでは、Photoshopで再現する2種類のテクスチャを紹介することから始めましょう。 形で作られたテクスチャーとブラシで作られたテクスチャー。 それを行う方法を知ったら、好きなだけクリエイティブになり、本物のテクスチャ背景を作成できます。 その後、テクスチャ背景とDiviのデザインオプションを組み合わせて、すばらしい結果を作成する方法を紹介します。

形状で作成された画像結果

Photoshopで作成する方法を示す最初の画像は次のようになります。

Diviの設計オプションによる結果

そして、Diviに統合すると、次のような驚くべき結果を得ることができます。

ブラシで作成した画像結果

作成する2番目の画像は次のようになります。

Diviの設計オプションによる結果

そしてあなたのウェブサイトでそれを使用するとき次の美しい結果を届けることができます：

Diviのデザインオプションを使用してテクスチャ背景を作成および使用する方法

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

Photoshopでテクスチャ背景を作成する

形で作られた

再作成する方法を示す最初のテクスチャ背景には、ほとんどの場合、多角形なげなわツールと消しゴムツールで作成された形状があります。 次の結果を作成する方法を段階的に説明します。

新しいファイル

Photoshopを開き、新しいファイルを追加することから始めます。 このファイルには、幅1920px、高さ847pxが必要です。

背景色を追加する

次に、作成したファイルに背景色を追加します。 プロセス全体を通して、少し暗い灰色を使用していることを確認してください。 この投稿の後半でDiviデザインオプションを追加するときにも役立つため、少し暗い色を使用することが不可欠です。 この例では、背景色として「＃626262」を使用し、ペイントバケットツールを使用してレイヤーに色を追加しました。

レイヤー2を追加

最初のレイヤーのすぐ上に新しいレイヤーを追加して続行します。

レイヤー2に最初のシェイプを追加します

次に、多角形なげなわツールを選択し、レイヤー2を選択した状態でシェイプの作成を開始します。

完了したら、バケットペイントツールを選択し、「＃747474」を使用して選択したパーツに色を付けます。

レイヤー3を追加

次に、レイヤー2のすぐ上に別のレイヤーを追加します。

2番目のシェイプレイヤー3を追加します

ポリゴンなげなわツールを使用して、下の印刷画面のような別の形状を作成します。

バケットペイントツールを選択し、今回は「＃6a6a6a」を使用します。

これまでのところ、画像は次のようになっているはずです。

レイヤー3で消しゴムツールを使用する

次に、レイヤー3を選択した状態で、消しゴムツールを選択します。

消しゴムツールを、硬度が0％でサイズが338pxのブラシと一緒に使用します。

次に、先に進んで、移動したい領域を消去します。 レイヤ2とレイヤ3の間の遷移を確認できる、レイヤ3のごく一部のみを意図的に残しました。

反対側にレイヤーを複製、変換、回転、配置します

左側を作成したので、反対側ははるかに速く進みます。 まったく同じにしたいので、レイヤー2とレイヤー3の両方を選択します。次に、レイヤーを複製します。

複製すると、レイヤーのリストに表示されます。

複製された両方のレイヤーを選択した状態で、 [編集]> [変換]> [180°回転]に移動し、レイヤーを画像の反対側にドラッグします。

Web用に保存

あとは画像を保存するだけです。 これを行うには、[ファイル] > [エクスポート] > [ Web用に保存]をクリックします。

最後に、ファイルがJPGまたはPNGファイルであることを確認して保存します。

ブラシで作られました

次に、ブラシを使用してテクスチャ背景を作成する方法を示します。 この場合、再作成する方法を示すテクスチャ背景は次のようになります。

新しいファイル

幅1920px、高さ847pxを使用して新しいドキュメントを作成することから始めます。

背景色を追加する

それが完了したら、「＃8f8f8f」カラーコードを使用して最初のレイヤーに背景を追加します。

マッチングブラシをオンラインで検索

次のステップは、ヒーローセクションのスタイルに一致するブラシを見つけることです。 見事で無料の無料のPhotoshopブラシがたくさんあります。 次のページに移動すると、このチュートリアルで使用するものを見つけてダウンロードできます。

ブラシをアップロード

コンピューターでABRファイルを見つけ、Photoshopに移動してブラシをロードします。 [編集]> [プリセット]> [プリセットマネージャー]> [ブラシ]> [ロード]を選択し、コンピューターに保存したABRファイルを選択します。

レイヤー2を追加

完了したら、レイヤー1のすぐ上に別のレイヤーを追加します。

最も明るい色のブラシを使用する

次に、ブラシツールを選択して、ブラシを使用して希望のテクスチャ背景を作成します。

サイズが600pxのブラシを選択し、不透明度を60％にします。

'

使用する最初の色は「＃a0a0a0」です。 先に進み、画像に最初のブラシレイヤーを作成します。

暗い色の同じブラシを使用する

次に、前の色を「#ababab」に置き換えて、同じことを行います。

最も暗い色で同じブラシを使用する

最後に、テクスチャ背景を仕上げるには、「＃686868」カラーを使用する必要があります。

Web用に保存

テクスチャ背景が完成したので、あとは画像を保存するだけです。 これを行うには、 [ファイル]> [エクスポート]> [Web用に保存]を選択します。

もう一度、画像をJPGまたはPNGファイルとして保存するかどうかを選択します。

セクションにテクスチャ背景を追加する

形で作られたテクスチャ背景

画像を作成したら、Diviの背景設定を試して、希望どおりの結果を得ることができます。 シェイプで作成されたテクスチャ背景の場合、放射状グラデーションタイプを選択して、一方のグラデーションカラーを中央に配置し、もう一方のグラデーションカラーを背景画像と調和させます。

グラデーションの背景

セクションには次のグラデーションの背景を使用します。

• ファーストカラー：＃474ab6
• セカンドカラー：＃9271f6
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：41％
• 終了位置：100％

画像ブレンドオプション

次に、画像をアップロードし、次の設定を使用します。

• 背景画像サイズ：カバー
• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返しなし
• 背景画像のブレンド：オーバーレイ

ブラシで作られたテクスチャ背景

ブラシで作成されたテクスチャ背景に使用するグラデーション背景は線形です。 背景画像と調和して使用されている色をわずかに分離する微妙な遷移を行います。

グラデーションの背景

セクション設定を開き、背景サブカテゴリに次の設定を使用します。

• ファーストカラー：＃474ab6
• セカンドカラー：＃9271f6
• グラデーションタイプ：線形
• 勾配方向：270度
• 開始位置：70％
• 終了位置：100％

画像ブレンドオプション

次に、背景画像をアップロードし、次の設定を一緒に使用します。

• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返しなし
• 背景画像のブレンド：オーバーレイ

結果

すべての手順を完了したので、もう一度、最終結果を見てみましょう。

形状で作成された画像結果

Diviの設計オプションによる結果

ブラシで作成した画像結果

Diviの設計オプションによる結果

最終的な考え

この投稿では、テクスチャ背景を使用してWebサイトをより本物らしく感じさせる方法を紹介しました。 Photoshopで2種類のテクスチャを作成する方法を示し、続いて、セクション内でそれらを使用する方法とDiviのデザインオプションを示しました。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

WEB-DESIGN /shutterstock.comによる注目の画像