TROUVER LES BONNES COULEURS POUR LE DESIGN DE VOTRE SITE INTERNET POWERBOUTIQUE

Transcription

1 TROUVER LES BONNES COULEURS POUR LE DESIGN DE VOTRE SITE INTERNET POWERBOUTIQUE

2 Color Scheme Designer est un outil en ligne pour designer, qui permet de trouver les bonnes combinaisons de couleurs à adopter pour son Webdesign. Pour accéder au site cliquez sur le lien suivant : Choisissez une couleur en déplaçant le curseur «rond», situé dans la palette de couleur. Si vous connaissez une couleur précise, vous avez la possibilité de la renseigner dans le logiciel, en cliquant sur le code couleur comme ci-dessous puis tapez ensuite le code :

3 En cliquant sur les différentes icônes, vous avez la possibilité de choisir entre plusieurs tonalités de couleurs : Mono Triad Complement Tetrad Analogic Accented analogic

4 En cliquant sur l onglet «Ajust scheme» (1), vous avez la possibilité de modifier le contraste et la saturation/luminosité en déplaçant le petit cercle situé dans chaque palette comme ci dessous: Pour voir un aperçu des tonalités et se rendre compte si les couleurs se marient bien ensemble, cliquez sur «Light page example» (2) pour prévisualisation sur un fond blanc, ou bien cliquez sur «Dark page example» (3) pour un fond plus sombre.

5 Aperçu avec light page example : Aperçu avec dark page example :

6 Si vous êtes satisfait des tonalités de couleurs qui on été générées sur les aperçus, cliquez sur «Sheme Info» (1) pour voir les codes couleurs hexadécimaux représentés par 6 chiffres. (2) Vous avez la possibilité d exporter ces couleurs sur plusieurs formats de fichiers : HTML + CSS XML TEXT ACO GPL Export dans un fichier html Export dans un fichier XML Export dans un fichier Texte (bloc note) Export de la palette dans un fichier photoshop pour pourvoir les utiliser directement dans le logiciel Export de la palette dans un fichier Gimp pour pourvoir les utiliser directement dans le logiciel

7 Afin de voir les couleurs avec leurs codes, exportez la palette en cliquant sur HTML + CSS et rendez-vous sur le tableau de bord de votre site PowerBoutique, sans fermer la fenêtre de la palette de couleurs exportée, ou bien alors enregistrez celle-ci dans vos favoris de votre navigateur afin de pouvoir y accéder facilement. Sur PowerBoutique : Voici un exemple par défaut choisi dans la bibliothèque de modèles. Avec les couleurs que nous avons générées depuis le logiciel précédent, nous allons voir comment les mettre en place sur votre site PowerBoutique.

8 1) Rendez-vous dans Paramétrages>Modèles couleurs et textes > mode visuel et cliquez sur Personnaliser. Cliquez sur le petit crayon de la barre de navigation horizontale. Cliquez ensuite sur le l onglet Apparence modifiez les couleurs comme ci-dessous : Cadre principal : Cliquez sur image de fond. Si le lien «Supprimer?» est présent, cliquez dessus afin de pouvoir supprimer l image actuelle. Lien au survol premier niveau : Puis cliquez sur «valider» afin de pouvoir enregistrer les modifications.

9 Aperçu de la 1 ère modification : 2) Ensuite cliquez sur le petit crayon de la 2 ème barre de navigation horizontale afin de pouvoir modifier les couleurs comme pour la barre de navigation horizontale 1. Cadre principal : Lien au survol premier niveau :

10 Aperçu après la 2 ème modification : 3) Pour modifier les liserets de bas de pages, cliquez sur «modifier les principales couleurs et polices», modifiez les couleurs comme ci-dessous : Liseret 1 et liseret 2 :

11 4) Ensuite, pour modifier et harmoniser les cadres, cliquez sur «modifier les principales couleurs et polices» et changez les couleurs comme ci-dessous Cadres titres de blocs : Cadres blocs : Cadres titre de pages : Boutons :

12 Aperçu des autres modifications : 5 ) Niveau d utilisation avancé (compétences en retouche d'images requises) : Vous avez la possibilité de retoucher la bannière afin qu elle puisse se marier avec les couleurs que l on a paramétrées. Pour cela faites un clic droit sur la bannière pour afficher l image et cliquez ensuite sur «Afficher l image de fond».

13 Ensuite faites un clic droit et cliquez sur «Enregistrer l image sous» pour pouvoir enregistrer l image sur votre ordinateur. En utilisant les calques des logiciels de retouches tels que «gimp» ou «photoshop», vous pouvez obtenir le résultat ci-dessous, en rajoutant par exemple un calque de couleur sur l image de fond, sur lequel vous diminuez l opacité.

14 Une fois enregistrée, importez votre bannière en vous rendant dans Paramétrages > Modèles couleurs et textes > mode visuel et cliquez sur Personnaliser. Cliquez sur «modifier les principales couleurs et polices» et dans le cadre visuel rajouter votre image comme cidessous : Ensuite, pour ajouter une couleur de fond, rendez-vous Paramétrages > Modèles couleurs et textes > mode visuel et cliquez sur Personnaliser. Cliquez sur «modifier les principales couleurs et polices» et dans le bloc «fond général modifiez la couleur de fond comme ci-dessous.

15 Aperçu des dernières modifications : Voici une comparaison entre l aperçu light de colorshemedesigner et les modifications réalisées sur un site internet PowerBoutique.

16 AVANT APRES