Si vous cherchez un moyen de faire ressortir votre site Web, vous pouvez apprendre à créer des arrière-plans à double couche. La création d’arrière-plans à double couche vous aidera à donner vie à votre image d’arrière-plan grâce au mouvement. Dans le tutoriel d’aujourd’hui, nous allons vous montrer comment créer un arrière-plan à double couche avec Divi. Ce tutoriel comprend trois parties :

  1. Préparation de deux fichiers image dans Adobe Photoshop
  2. Création du design dans Divi
  3. Application des effets de défilement pour animer l’arrière-plan

Vous pourrez également télécharger gratuitement les fichiers JSON et les fichiers image !

Allons-y.

Prévisualisation de

Avant de nous plonger dans le tutoriel, jetons un coup d’œil rapide au résultat sur différentes tailles d’écran.

Bureau

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Mobile

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Téléchargez la mise en page gratuitement

Pour mettre la main sur la mise en page gratuite, vous devez d’abord la télécharger à l’aide du bouton ci-dessous. Pour avoir accès au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily à l’aide du formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus d’avantages de Divi et un pack de mises en page Divi gratuit chaque lundi ! Si vous êtes déjà sur la liste, il suffit d’entrer votre adresse e-mail ci-dessous et de cliquer sur télécharger. Vous ne serez pas « réinscrit » et ne recevrez pas d’e-mails supplémentaires.

1. Créer des fichiers image dans Photoshop

Choisir une image de produit avec un arrière-plan propre et l’ouvrir dans Photoshop

Dans la première partie de ce tutoriel, nous allons créer les fichiers image que nous utiliserons tout au long du tutoriel Divi. Pour les créer, nous utiliserons Adobe Photoshop, mais n’hésitez pas à utiliser tout autre logiciel de retouche d’image de votre choix. L’effet d’arrière-plan à double couche fonctionnera mieux si l’image avec laquelle vous travaillez présente les caractéristiques suivantes :

  1. Une mise au point claire sur un objet à l’intérieur de l’image
  2. Un arrière-plan net

L’image ci-dessous en est un parfait exemple. Vous pouvez trouver ce fichier image dans le dossier zippé partagé dans la zone de téléchargement de cet article.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Dupliquer le calque

Une fois que vous avez ouvert l’image dans Photoshop, clonez le calque original une fois. Nous allons travailler sur le calque dupliqué.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Cacher le calque original

Pour être sûr de voir le résultat au fur et à mesure que nous avançons dans le tutoriel, cachez le calque original.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Créer un PNG à partir d’une sélection d’objets dans l’image

Utiliser l’outil de sélection rapide sur la plaque

Au total, nous aurons besoin de deux fichiers image pour ce tutoriel :

  1. un PNG de l’objet, dans ce cas, l’assiette
  2. un JPEG de l’arrière-plan sans l’objet

Nous séparons l’objet de son arrière-plan, afin de pouvoir les manipuler individuellement une fois dans l’environnement Divi.

Pour commencer à sélectionner l’objet, choisissez l’outil « Sélection rapide » dans la barre d’outils et essayez de couvrir la plus grande partie possible de l’objet.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Sélection + Masquage de la sélection

Vous remarquerez que la sélection de l’objet n’est toujours pas suffisante. Vous pouvez affiner l’aspect de votre sélection en utilisant l’option « Sélectionner et masquer » lorsque vous cliquez avec le bouton droit de la souris sur la sélection. Vous pouvez alors jouer avec l’opacité, le lissage, etc.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Créer un masque de calque à partir de la sélection

Bien que nous ayons créé une sélection lisse, il reste des parties de l’objet qui ne sont pas encore sélectionnées. Nous allons ajouter manuellement ces parties à notre sélection en cliquant sur le bouton de masque de calque que vous pouvez voir dans l’écran d’impression ci-dessous :

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Affiner la sélection à l’intérieur du masque avec des pinceaux

Une fois que votre masque de calque a été créé, vous pouvez commencer à utiliser un pinceau pour modifier le masque de calque. Assurez-vous que votre masque de calque est sélectionné.

  • L’utilisation d’un pinceau noir (#000) supprimera des parties de votre masque de calque
  • En utilisant un pinceau blanc (#fff), vous ajouterez des parties de votre masque de calque

Utilisez un pinceau qui n’est pas trop dur, pour ne pas avoir à être trop précis.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Vérifiez deux fois le masque avec un calque coloré

Vous pouvez toujours vérifier votre masque de calque en plaçant un calque coloré en dessous. Les calques de couleur vous indiqueront plus facilement si vous avez oublié un endroit.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Enregistrez la sélection PNG dans un fichier image distinct

Créez un nouveau fichier

Maintenant que vous avez la sélection PNG de votre objet, vous pouvez cloner le calque entier, afin de pouvoir toujours y revenir. Dans la partie suivante, nous allons utiliser le calque dupliqué pour créer l’image d’arrière-plan sans l’objet.

La taille de notre objet est bien plus petite que la taille du fichier initial, nous allons donc créer un nouveau fichier pour notre objet et le transférer.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajuster la sélection dans le nouveau fichier

Copiez-collez le calque avec son masque de calque dans le nouveau fichier que vous avez créé.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Exportation pour le Web

Et exportez-le pour le Web au format PNG.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Compression du fichier image

Les PNG avec arrière-plan transparent ont tendance à avoir une taille de fichier plus importante, il est donc recommandé de compresser le fichier en utilisant l’outil de votre choix.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Supprimer un objet de l’image originale

Sélectionnez le masque de calque

Retour au fichier Photoshop initial ! Là, nous allons créer l’image d’arrière-plan sans l’objet. Pour ce faire, nous utilisons le calque supérieur de notre fichier. Tout d’abord, assurez-vous que votre masque de calque est sélectionné.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Inverser le masque

Ensuite, allez dans les propriétés de ce calque et cliquez sur « Inverser ».

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Appliquer le masque de calque

Vous remarquerez maintenant que l’objet est transparent dans le calque initial. Nous allons appliquer le masque de calque à notre calque en faisant un clic droit et en sélectionnant « Appliquer le masque de calque ».

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Remplir l’espace vide en utilisant l’outil Clone

Il nous reste un trou au milieu, que nous devons remplir. C’est là que l’outil de clonage est utile. Sélectionnez la taille de pinceau de votre choix et remplissez l’image. Vous n’avez pas besoin d’être très précis, car dans le tutoriel Divi, nous allons placer l’objet par-dessus.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Enregistrer l’image sans objet

Exportation pour le Web

Une fois que vous avez terminé l’image d’arrière-plan sans l’objet, vous pouvez l’enregistrer comme un fichier JPEG avec une qualité de 70%.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Compression du fichier image

Veillez à compresser également cette image.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

2. Créer un effet d’arrière-plan à double couche dans Divi

Ajouter une nouvelle section

Télécharger l’image d’arrière-plan

Une fois que vous avez les deux fichiers image à portée de main, il est temps de passer à Divi ! Ouvrez une nouvelle page et ajoutez une nouvelle section. Téléchargez l’image d’arrière-plan que vous avez créée dans la première partie du tutoriel.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Espacer

Passez à l’onglet de conception de la section et appliquez quelques valeurs d’espacement personnalisées. La marge inférieure que nous ajoutons nous aidera à voir l’effet se mettre en place. Normalement, cette marge sera remplacée par les sections suivantes de votre conception.

  • Marge inférieure : 100vh
  • Rembourrage supérieur :
    • Bureau : 100px
    • Tablette et téléphone : 50px
  • Rembourrage inférieur :
    • Bureau : 100px
    • Tablette : 600px
    • Téléphone : 500px

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajouter la rangée #1

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonne suivante :

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de la rangée et modifiez la largeur et la largeur maximale. Ces paramètres permettront à la rangée de toucher les côtés gauche et droit du conteneur de la section à tout moment. De cette façon, nous pouvons nous assurer que les images PNG et d’arrière-plan ont le même équilibre sur toutes les tailles d’écran.

  • Largeur : 100
  • Largeur maximale : 100

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Espacement

Passez ensuite aux paramètres d’espacement de la ligne et supprimez tous les renforts supérieurs et inférieurs par défaut.

  • Rembourrage supérieur : 0px
  • Rembourrage inférieur : 0px

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Positionnez

Ensuite, repositionnez la rangée entière.

  • Position : Absolue
  • Emplacement :
    • Bureau : Centre
    • Tablette et téléphone : Centre en bas
  • Décalage vertical :
    • Bureau : /
    • Tablette et téléphone : 30vh

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajouter un module image à la rangée

Télécharger l’image PNG

Une fois que vous avez terminé les paramètres de la ligne, ajoutez un module d’image à la ligne et téléchargez le fichier PNG que vous avez créé dans la première partie du tutoriel.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Alignement

Passez à l’onglet design et modifiez l’alignement de l’image.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

  • Largeur :
    • Bureau : 36%
    • Tablette et téléphone : 60%

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajouter la rangée n° 2

Structure des colonnes

Ensuite, ajoutez une autre ligne à la section en utilisant la structure de colonnes suivante :

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Couleur d’arrière-plan

Ouvrez les paramètres de la ligne et modifiez la couleur d’arrière-plan.

  • Couleur d’arrière-plan : #ffffff

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

  • Largeur : 90
  • Largeur maximale : 550px
  • Alignement des rangs :
    • Bureau : Gauche
    • Tablette et téléphone : Centre

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Espacement

Ensuite, appliquez des valeurs de rembourrage personnalisées.

  • Rembourrage en haut : 11%
  • Rembourrage inférieur : 11%
  • Rembourrage gauche : 5%
  • Remplissage droit : 5%

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Décalage horizontal

Nous ajoutons également un décalage horizontal aux paramètres de position.

  • Horizontal Offset :
    • Bureau : 5%
    • Tablette et téléphone : 0%

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajouter le module de texte #1 à la colonne 1

Ajouter du contenu H2

Il est temps d’ajouter des modules, en commençant par un premier module de texte contenant du contenu H2.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Paramètres du texte H2

Donnez au texte H2 le style suivant :

  • Titre 2 Police : Kumbh Sans
  • Heading 2 Taille du texte :
    • Bureau : 90px
    • Tablette : 60px
    • Téléphone : 45px

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajouter le module de texte n° 2 à la colonne 1

Ajouter du contenu de description

Ajoutez un autre module de texte juste en dessous du précédent et insérez une description de votre choix.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Paramètres du texte

Modifiez les paramètres du texte du module en conséquence :

  • Police du texte : Kumbh Sans
  • Hauteur de la ligne de texte : 2em

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ajouter le module bouton à la colonne 1

Ajouter la copie

Le dernier module dont nous avons besoin dans cette colonne est un module bouton. Ajoutez une copie de votre choix.

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Paramètres du bouton

Donnez un style au bouton en conséquence :

  • Utiliser des styles personnalisés pour le bouton : Oui
  • Taille du texte du bouton : 20px
  • Couleur du texte du bouton : #6b6443
  • Largeur de la bordure du bouton : 0px
  • Rayon de la bordure du bouton : 0px

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

  • Police du bouton : Kumbh Sans
  • Poids de la police du bouton : Bold
  • Afficher l’icône du bouton : Oui
  • Placement de l’icône du bouton : Gauche
  • Afficher l’icône au survol du bouton uniquement : Non

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Ombre de la boîte

Incluez également une ombre portée.

  • Position horizontale de l’ombre de la boîte : 0px
  • Position verticale de l’ombre de la boîte : 2px
  • Couleur de l’ombre : #6b6443

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

3. Ajouter des effets de défilement

Mouvement vertical de l’image

Dans la dernière partie de ce tutoriel, nous allons nous concentrer sur l’ajout des effets de défilement au module Image contenant le fichier image PNG. Ouvrez les paramètres du module, naviguez jusqu’à l’onglet avancé et appliquez les paramètres de mouvement vertical suivants :

  • Activer le mouvement vertical : Oui
  • Décalage de départ :
    • Bureau : 0
    • Tablette et téléphone : 4 (à 0%)
  • Décalage moyen :
    • Ordinateur de bureau : 0
    • Tablette et téléphone : 0 (à 97%)
  • Décalage final :
    • Ordinateur de bureau : 0
    • Tablette et téléphone : -2 (à 100%)

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Mouvement horizontal de l’image

Nous allons terminer notre conception en utilisant les paramètres de mouvement horizontal suivants :

  • Activer le mouvement horizontal : Oui
  • Offset de départ :
    • Bureau : 0 (à 0%)
    • Tablette et téléphone : 0
  • Décalage moyen :
    • Ordinateur de bureau : 0 (à 65%)
    • Tablette et téléphone : 0 (à 97%)
  • Décalage final :
    • Ordinateur de bureau : -10 (à 100%)
    • Tablette et téléphone : 0

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Aperçu

Maintenant que nous avons suivi toutes les étapes, jetons un dernier coup d’œil au résultat sur différentes tailles d’écran.

Bureau

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Mobile

double-layered background
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc
  • https://www.facebook.com/lafactoryworld
  • https://twitter.com/lafactory
  • Gmail
  • https://www.linkedin.com/company/lafactory-inc

Réflexions finales

Dans cet article, nous vous avons montré comment créer un arrière-plan à double couche et l’animer avec les effets de défilement intégrés de Divi. Dans la première partie du tutoriel, nous avons préparé les fichiers image dans Adobe Photoshop. Dans la deuxième partie du tutoriel, nous nous sommes concentrés sur l’utilisation des fichiers d’image dans Divi pour créer un design réactif. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n’hésitez pas à laisser un commentaire dans la section des commentaires ci-dessous.