Créer un background dégradé vertical

Publié : Le 06 Janvier 2014 à 10:14
Écrit par Sardegna-Bosa
Publié par : Admin - Corrigé par : Admin
Article vu : 4 382 fois
Vous désirez faire un dégradé vertical pour le fond de votre site mais vous ne savez pas comment faire ? Ce tutoriel est donc fait pour vous !!

Pré-requis

Ce tutoriel ne nécessite aucune compétence particulière notamment avec photoshop ou tout autre logiciel de créations graphiques.

 

Pour commencer il faut choisir les deux couleurs qui vont composer votre dégradé vertical la première pour le haut et la deuxième pour le bas pour mon exemple j'ai pris le bleu ciel pour la première couleur (code #0096ff) et le blanc pour la deuxième (code #ffffff).

La génération du dégradé

Pour commencer il faut se rendre sur ce site : http://www.supportduweb.com/generateur-degrades-gradient-couleurs-design-fondu-lineaire-image-degrade-enligne-outil-gratuit.html (il en existe d'autres mais celui la permet de le faire et j'ai pas le temps de tous les tester).

 

Ensuite comme sur l'image 1, il faut renseigner les options (largeur, longueur, couleurs), je vous conseille de faire plusieurs essais et de regarder le résultat en cliquant sur le bouton aperçu visible sur l'image 2, dès que le résultat vous satisfait vous pouvez télécharger l'image grâce au bouton visible sur l'image 2, le résultat donne une image comme l'image 3. (pour les réglages d'options je vous conseille de mettre au moins 4000 en largeur pour que les écrans affichants la résolution 4k puisse voir intégralement votre dégradé, pour la hauteur ça dépend de la vitesse où vous voulez que ça dégrade plus le nombre est grand et plus le dégradé est "doux").

Mise en place du dégradé sur votre site

Pour mettre en place le dégradé sur votre site, rendez vous sur votre site dans le menu d'actions puis dans l'onglet site, allez dans la partie design, dans la partie image de fond :

  • Cochez "Afficher l'image de fond du site"
  • Cliquez sur le bouton "ajouter" pour ajouter votre image générée précédemment
  • Si vous souhaitez que le degradé soit fixé à l'écran (si vous voulez que la première couleur soit toujours en haut de l'écran), il faudra cocher la case "Fixer l'image de fond" (optionnel)

Voici le résultat que ça donne sur mon site (à titre d'exemple personnellement j'ai opté pour une texture de sable fin répétée) :

Publicité de nos partenaires e-commerce :

34,90 €
49,96 €
19,90 €

LDLC : LG DP132H

Loading...

Articles en rapport