Comment superposer deux images avec transparence ? Méthode et réglages

La méthode en quelques étapes

1. Ouvrez l’image qui servira de fond.
2. Importez la deuxième image comme nouveau calque.
3. Vérifiez qu’elle se trouve au-dessus de l’image de fond.
4. Redimensionnez-la et positionnez-la correctement.
5. Réglez son opacité pour laisser apparaître l’image inférieure.
6. Ajoutez éventuellement un mode de fusion ou un masque de calque.

Régler la transparence avec l’opacité

L’opacité contrôle la visibilité du calque supérieur. Dans Photoshop ou GIMP, sélectionnez le calque de l’image à superposer, puis modifiez la valeur d’opacité dans le panneau des calques.

• 100 % : l’image supérieure est opaque.
• 50 % : les deux images sont généralement visibles de manière équilibrée.
• 20 à 40 % : l’image supérieure devient une texture ou un effet léger.
• 0 % : l’image supérieure est invisible.

Commencez par une opacité de 50 %, puis ajustez selon la luminosité, les couleurs et le contraste des deux images. Une image claire placée sur un fond clair peut nécessiter une opacité plus élevée ou un mode de fusion différent.

Utiliser un mode de fusion

Le mode Normal est le meilleur point de départ : l’image du dessus se combine avec celle du dessous uniquement selon son opacité. Pour obtenir un effet plus marqué, testez ensuite d’autres modes de fusion.

Quelques modes utiles

• Produit (Multiply) : assombrit généralement le résultat et convient aux textures, ombres ou superpositions graphiques.
• Éclaircir : favorise les tons clairs.
• Obscurcir : conserve davantage les tons foncés.
• Différence : crée un effet basé sur l’écart entre les couleurs des deux images.

Le résultat dépend du contenu des images. Testez chaque mode avec plusieurs niveaux d’opacité plutôt que de conserver automatiquement le réglage par défaut.

Créer une transparence localisée avec un masque

Si vous souhaitez rendre transparente seulement une partie de l’image supérieure, ajoutez un masque de calque. Cette méthode est non destructive : vous pouvez modifier le masque sans supprimer définitivement l’image.

Fonctionnement d’un masque

• Blanc : la zone reste visible.
• Noir : la zone devient transparente.
• Gris : la zone devient partiellement transparente.

Procédure

1. Sélectionnez le calque supérieur.
2. Ajoutez un masque blanc.
3. Cliquez sur la vignette du masque, et non sur celle de l’image.
4. Peignez en noir sur les zones à masquer.
5. Peignez en blanc pour restaurer les zones masquées.
6. Utilisez un pinceau gris ou une faible opacité pour créer une transition progressive.

Le masque est préférable à la gomme lorsque vous prévoyez de retoucher le montage plus tard.

Superposer deux images dans Photoshop

1. Ouvrez l’image de fond.
2. Importez la seconde image dans un nouveau calque.
3. Placez-la au-dessus du fond et ajustez sa taille.
4. Laissez le mode de fusion sur Normal.
5. Réduisez l’opacité du calque supérieur.
6. Ajoutez un masque si la transparence doit être limitée à certaines zones.
7. Testez ensuite les modes Produit, Éclaircir ou Obscurcir.

Si les deux images doivent correspondre précisément, utilisez les fonctions d’alignement automatique. Enregistrez le fichier au format Photoshop afin de conserver les calques et le masque.

Superposer deux images dans GIMP

1. Ouvrez l’image de fond.
2. Ajoutez la seconde image comme calque.
3. Vérifiez l’ordre des calques.
4. Réglez l’opacité du calque supérieur entre 0 et 100.
5. Ajoutez un masque de calque.
6. Peignez en noir, blanc ou gris sur le masque selon le niveau de transparence voulu.

Si la transparence ne fonctionne pas correctement, vérifiez que le calque dispose d’un canal alpha. Celui-ci est nécessaire pour gérer la transparence lorsqu’elle n’est pas déjà disponible.

Superposer deux images en HTML et CSS

Pour afficher deux images l’une au-dessus de l’autre sur une page web, placez-les dans un conteneur positionné, puis positionnez la seconde en absolu.

<div class="superposition">
  <img src="image-fond.jpg" alt="Image de fond">
  <img class="image-dessus" src="image-dessus.png" alt="Image superposée">
</div>

.superposition {
  position: relative;
  width: 600px;
}

.superposition img {
  display: block;
  width: 100%;
}

.image-dessus {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}

En CSS, la propriété opacity accepte une valeur comprise entre 0 et 1 : 0 rend l’image invisible et 1 la rend opaque. Pour ajouter un effet de fusion, utilisez par exemple :

.image-dessus {
  opacity: 0.5;
  mix-blend-mode: multiply;
}

Vérifications avant l’export

• Vérifiez que l’image supérieure est bien au-dessus du fond.
• Contrôlez l’opacité du bon calque.
• Assurez-vous que la vignette du masque est sélectionnée avant de peindre.
• Observez le résultat sur des zones claires et foncées.
• Conservez une version avec les calques et les masques séparés.
• Créez une copie aplatie uniquement pour la livraison finale si nécessaire.