Comment insérer son logo sur un fond dégradé ?

Vous voulez intégrer votre logo sur la charte graphique WiziShop que vous avez choisi mais le fond du template est coloré et vous ne savez pas comment faire ? Cette aide va vous montrer comment l’intégrer facilement grâce au logiciel d’édition d’image Gimp.

Dans un premier temps essayons de comprendre pourquoi il est difficile d’intégrer un logo avec une transparence.

Pour naviguer sur Internet on utilise un navigateur (Internet Explorer, Firefox, Safari…), il y en a plusieurs et ils n’affichent pas tous les sites de la même façon. Certains sont plus en avance sur d’autres, et sont mis à jour plus souvent. Contrairement à ce que l’on peut croire le navigateur Internet Explorer, qui est par défaut sur votre système, est loin d’être le meilleur, surtout dans sa version 6. C’est justement cette version qui est encore aujourd’hui par défaut sur beaucoup d’ordinateur et qui nous pose problème car Internet Explorer 6 ne sait pas gérer la transparence des fichiers images PNG-24.

Vous l’avez compris on ne peut pas négliger les utilisateurs d’Internet Explorer sur un site de e-commerce il est donc capital d’avoir un résultat équivalent de votre site sur tous les navigateurs.

Pour celà nous allons donc tricher. Nous n’utiliserons pas du PNG mais du GIF. Le GIF est un format qui gère la transparence mais seulement partiellement. Il ne sait faire qu’un état transparent ou coloré alors que le PNG-24 peut faire un pixel avec 50% de transparence par exemple.

Cette intégration fonctionne seulement si on a une couleur unie en fond ou des nuances de couleurs proches.

Pour faire notre logo nous utiliserons Gimp qui est un logiciel libre et gratuit. Vous pouvez trouver la dernière version sur le site officiel, il est disponible pour WindowsMac et Linux.

Ce tutoriel ne vous apprend pas à vous servir de Gimp, cependant l’aide de Gimp est très utile.

Pour l’exemple nous intégrerons le logo de WiziShop sur le template PinkShop.

Pour commencer il faut ouvrir votre logo qui doit être sur fond transparent.

Fichier > Ouvrir

Il va falloir le redimensionner afin qu’il puisse rentrer dans votre template. Sur PinkShop nous pouvons avoir un logo qui fait 200px de largeur et 80px de hauteur.

Image > Échelle et taille de l’image

Indiquer les tailles de votre choix, pour notre exemple je choisis une largeur de 200px et je valide sur le bouton Échelle, automatiquement Gimp redimensionne en gardant la même homothétie.

Comme je le disais tout à l’heure, nous allons tricher. Comme le Gif ne gère la transparence que partiellement, nous allons entourer notre logo d’une couleur moyenne au fond.

Pour celà nous allons récupérer la couleur du fond de notre template. Faites unImprim Écran en appuyant sur la touche de votre clavier, puis dans Gimp :

Edition > Coller comme > Nouvelle image

Sélectionnez la pipette  et Ctrl + clic gauche de la souris sur le rose comme ci-desous pour choisir la couleur d’arrière-plan.

Vous devriez avoir en couleur d’arrière-plan de votre boîte à outils un rose.

Maintenant appliquons autour de notre logo le contour rose qui permettra de simuler la transparence.

Filtres > Web > Aplatir à moitié

Enregistrez votre image en gif :

Fichier > Enregistrer une copie

Maintenant dans votre administration WiziShop Onglet « Mon compte » > Informations de la boutique : Logo ajoutez le Logo.

Voilà le résultat, le logo est intégré et on a vraiment l’impression d’une transparence.

Cette intégration fonctionne seulement si on a une couleur unie en fond ou des nuances de couleurs proches.


Ne perdez plus de temps ! Testez WiziShop dès aujourd'hui...

L'essai est gratuit pendant 15 jours, sans engagement et vous donne accès à l'ensemble des fonctionnalités.

TESTER WIZISHOP