Comment créer et utiliser des arrière-plans texturés avec les options de conception de Divi

Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment créer des arrière-plans texturés simples et les utiliser comme arrière-plans pour vos sections afin de rendre votre site Web un peu plus authentique. Si vous consultez notre récente mise en page de gestion de l'apprentissage gratuite, vous verrez que nous avons également utilisé un arrière-plan texturé sur toutes les pages.

Maintenant, nous allons commencer par vous montrer deux types de textures que nous allons recréer avec Photoshop ; textures faites avec des formes et textures faites avec des pinceaux. Une fois que vous savez comment le faire, vous pouvez être aussi créatif que vous le souhaitez et créer des arrière-plans texturés authentiques. Après cela, nous vous montrerons comment créer des résultats époustouflants en combinant les arrière-plans texturés et les options de conception de Divi.

Résultat d'image créé avec des formes

La première image que nous allons vous montrer comment créer avec Photoshop ressemble à ceci :

Résultat avec les options de conception de Divi

Et une fois intégré à Divi, vous pouvez obtenir des résultats bluffants comme celui-ci :

Résultat d'image réalisé avec des pinceaux

La deuxième image que nous allons créer ressemble à ceci :

Résultat avec les options de conception de Divi

Et peut fournir le beau résultat suivant lorsque vous l'utilisez sur votre site Web :

Comment créer et utiliser des arrière-plans texturés avec les options de conception de Divi

Abonnez-vous à notre chaîne Youtube

Créer un arrière-plan texturé avec Photoshop

Fait avec des formes

Le premier fond texturé que nous allons vous montrer comment recréer contient principalement des formes créées avec l'outil Lasso polygonal et l'outil Gomme. Nous vous guiderons étape par étape sur la façon de créer le résultat suivant :

Nouveau fichier

Ouvrez Photoshop et commencez par ajouter un nouveau fichier. Ce fichier aura besoin d'une largeur de 1920px et d'une hauteur de 847px.

Ajouter une couleur d'arrière-plan

Ensuite, ajoutez une couleur d'arrière-plan au fichier que vous venez de créer. Assurez-vous d'utiliser des couleurs grises légèrement plus foncées tout au long du processus. Il est essentiel d'utiliser une couleur un peu plus foncée car cela vous aidera plus tard dans cet article lors de l'ajout d'options de conception Divi. Dans cet exemple, nous avons utilisé '#626262' comme couleur d'arrière-plan et nous avons utilisé l'outil Pot de peinture pour ajouter la couleur au calque.

Ajouter la couche 2

Continuez en ajoutant un nouveau calque juste au-dessus du premier calque.

Ajouter la première forme au calque 2

Ensuite, sélectionnez l'outil Lasso polygonal et commencez à créer une forme tout en sélectionnant le calque 2.

Une fois cela fait, sélectionnez l'outil Pot de peinture et utilisez '#747474' pour colorer la pièce sélectionnée.

Ajouter la couche 3

Ensuite, ajoutez un autre calque juste au-dessus du calque 2.

Ajouter le deuxième calque de forme 3

Continuez en créant une autre forme, comme celle de l'écran d'impression ci-dessous, en utilisant l'outil Lasso polygonal.

Sélectionnez l'outil Pot de peinture et utilisez '#6a6a6a' cette fois.

Jusqu'à présent, votre image devrait ressembler à ceci :

Utiliser l'outil Gomme sur le calque 3

En continuant, sélectionnez l'outil Gomme tout en ayant sélectionné le calque 3.

Utilisez l'outil Gomme avec un pinceau qui a une dureté de 0% et une taille de 338px.

Ensuite, allez-y et effacez la zone que vous souhaitez supprimer. Nous n'avons délibérément laissé qu'une petite partie de la couche 3 où vous pouvez voir une transition entre la couche 2 et la couche 3.

Dupliquer, transformer, faire pivoter et placer des calques sur le côté opposé

Maintenant que nous avons créé le côté gauche, l'autre côté ira beaucoup plus vite. Nous voulons que ce soit exactement le même, c'est pourquoi nous allons sélectionner à la fois le calque 2 et le calque 3. Ensuite, nous allons dupliquer les calques.

Une fois dupliqués, vous les verrez apparaître dans votre liste de calques.

Tout en ayant sélectionné les deux calques dupliqués, accédez à Édition> Transformer> Faire pivoter à 180 ° et faites glisser les calques de l'autre côté de l'image.

Enregistrer pour le Web

Il ne reste plus qu'à sauvegarder l'image. Pour ce faire, cliquez sur Fichier > Exporter > Enregistrer pour le Web .

Enfin, assurez-vous que le fichier est un fichier JPG ou PNG et enregistrez-le.

Fabriqué avec des pinceaux

Ensuite, nous allons vous montrer comment créer des arrière-plans texturés à l'aide de pinceaux. Le fond texturé que nous allons vous montrer comment recréer ressemble dans ce cas à ceci :

Nouveau fichier

Recommencez en créant un nouveau document en utilisant une largeur de 1920px et une hauteur de 847px.

Ajouter une couleur d'arrière-plan

Une fois cela fait, ajoutez un arrière-plan au premier calque avec le code de couleur '#8f8f8f'.

Rechercher une brosse assortie en ligne

La prochaine étape consiste à trouver un pinceau qui correspond au style de votre section de héros. Il existe de nombreux pinceaux Photoshop gratuits qui sont époustouflants et gratuits également. Vous pouvez trouver et télécharger celui que nous utiliserons dans ce tutoriel en vous rendant sur la page suivante.

Télécharger le pinceau

Localisez le fichier ABR sur votre ordinateur et accédez à Photoshop pour charger les pinceaux. Sélectionnez Edition > Préréglages > Gestionnaire de préréglages > Pinceaux > Charger et sélectionnez le fichier ABR que vous avez enregistré sur votre ordinateur.

Ajouter la couche 2

Une fois cela fait, ajoutez un autre calque juste au-dessus du calque 1.

Utilisez le pinceau avec la couleur la plus claire

Ensuite, vous pouvez commencer à utiliser votre pinceau pour créer l'arrière-plan texturé que vous souhaitez en sélectionnant l'outil Pinceau.

Choisissez le pinceau que vous voulez avec une taille de 600px et utilisez une opacité de 60%.

'

La première couleur que nous utiliserons est '#a0a0a0'. Allez-y et créez le premier calque de pinceau sur votre image.

Utilisez le même pinceau avec une couleur plus foncée

Ensuite, remplacez la couleur précédente par '#ababab' et faites la même chose.

Utilisez le même pinceau avec la couleur la plus foncée

Enfin, vous devrez utiliser la couleur '#686868' pour finir votre arrière-plan texturé.

Enregistrer pour le Web

Maintenant que votre arrière-plan texturé est terminé, il ne vous reste plus qu'à enregistrer l'image. Pour ce faire, sélectionnez Fichier > Exporter > Enregistrer pour le Web .

Encore une fois, choisissez si vous souhaitez enregistrer votre image au format JPG ou PNG.

Ajouter des arrière-plans texturés aux sections

Fond texturé fait avec des formes

Vous pouvez jouer avec les paramètres d'arrière-plan de Divi pour obtenir le résultat exact que vous souhaitez une fois que vous avez créé les images. Pour le fond texturé fait avec des formes, nous allons choisir un type de dégradé radial pour avoir l'une des couleurs du dégradé au milieu et l'autre en harmonie avec notre image de fond.

Fond dégradé

Utilisez l'arrière-plan dégradé suivant pour votre section :

• Première couleur : 474ab6
• Deuxième couleur : #9271f6
• Type de dégradé : Radial
• Direction radiale : Centre
• Position de départ : 41 %
• Position finale : 100 %

Options de fusion d'images

Ensuite, téléchargez l'image et utilisez les paramètres suivants :

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange d'images d'arrière-plan : superposition

Fond texturé fait avec des pinceaux

Le fond dégradé que nous allons utiliser pour le fond texturé réalisé avec des pinceaux est linéaire. Nous allons faire une transition subtile qui séparera encore légèrement la couleur utilisée en harmonie avec l'image d'arrière-plan.

Fond dégradé

Ouvrez les paramètres de la section et utilisez les paramètres suivants pour la sous-catégorie Arrière-plan :

• Première couleur : 474ab6
• Deuxième couleur : #9271f6
• Type de dégradé : Linéaire
• Direction du gradient : 270 degrés
• Position de départ : 70 %
• Position finale : 100 %

Options de fusion d'images

Ensuite, téléchargez l'image d'arrière-plan et utilisez les paramètres suivants avec elle :

• Position de l'image d'arrière-plan : Centre
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange d'images d'arrière-plan : superposition

Résultat

Maintenant que nous avons parcouru toutes les étapes, examinons à nouveau le résultat final.

Résultat d'image créé avec des formes

Résultat avec les options de conception de Divi

Résultat d'image réalisé avec des pinceaux

Résultat avec les options de conception de Divi

Dernières pensées

Dans cet article, nous vous avons montré comment utiliser des arrière-plans texturés pour rendre votre site Web plus authentique. Nous vous avons montré comment créer deux types de textures avec Photoshop et avons suivi en vous montrant comment vous pouvez les utiliser dans vos sections avec les options de conception de Divi. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette par WEB-DESIGN / shutterstock.com