TROUVER LES BONNES COULEURS AVEC PALETTON.COM

Transcription

1 AVEC PALETTON.COM (Mis à jour le 11/08/2014) Page 1 / 14

2 Paletton.com est un outil en ligne pour graphiste qui permet de trouver les bonnes combinaisons de couleurs à adopter pour son Web Design. Il s'agit de la nouvelle version de Color Scheme Designer. Étape 1 : Accédez au site en cliquant sur le lien suivant : Étape 2 : Choisissez une couleur en déplaçant le curseur «rond» situé dans la palette de couleurs. Page 2 / 14

3 Si vous souhaitez travailler à partir d'une couleur précise, vous avez la possibilité de paramétrer celleci dans le logiciel, en cliquant sur le code couleur comme ci-dessous et en saisissant le code hexadécimal de la couleur. Étape 3 : En cliquant sur les différentes icônes, vous avez la possibilité de choisir entre plusieurs tonalités de couleurs (monochrome, etc...). Page 3 / 14

4 Étape 4 : A tout moment vous avez la possibilité de visualiser le rendu et de vérifier que les couleurs se marient bien. Pour cela, cliquez sur «Examples». L'aperçu du site peut se faire en fond clair, en utilisant «Positive design» ou en fond foncé, en utilisant «Negative design». Étape 5 : Si vous êtes satisfait des tonalités de couleurs qui ont été générées sur les aperçus, cliquez sur «Color tables». Page 4 / 14

5 Pour avoir les codes hexadécimaux des couleurs utilisées, cliquez ensuite sur «Color swatches». Page 5 / 14

6 Pour visualiser ces informations en HTML, cliquez sur «Color text» puis sur HTML. Vous pouvez répéter la manipulation pour afficher le CSS mais en cliquant cette fois-ci sur CSS. Page 6 / 14

7 Comment appliquer ces couleurs sur mon site? Maintenant que vous avez les informations HTML et CSS correspondantes, vous pouvez mettre en place ces couleurs sur votre site PowerBoutique. Nous avons choisi pour exemple un thème par défaut, parmi ceux accessibles dans la bibliothèque de modèles. Rendez-vous dans le menu Apparence > Modèles de site > Mode visuel : Personnaliser. Cliquez sur le petit crayon de la première barre de navigation horizontale. Cliquez ensuite sur l'onglet Apparence et modifiez les couleurs comme ci-dessous : Page 7 / 14

8 1 ) Cadre principal : Cliquez sur «Cadre principal» pour faire apparaître les informations. Si une image de fond est présente, cochez la case «Supprimer l'image?» puis validez afin de la supprimer. Copiez ensuite le code couleur dans le champ «Fond». 2 ) Liens au survol premier niveau : Effectuez la même opération pour le code couleur. Page 8 / 14

9 3 ) Liens premier niveau : Appliquez le code couleur correspondant au texte. Cliquez ensuite sur le petit crayon de la barre de navigation horizontale 2. Comme pour la première, il est nécessaire de modifier certaines couleurs. 1 ) Cadre principal : 2 ) Liens au survol premier niveau : Page 9 / 14

10 3 ) Liens premier niveau : La dernière étape consiste à modifier les éléments principaux de votre site. Pour cela cliquez sur «Modifier les principales couleurs et polices». 1 ) Cadres titres de blocs : 2 ) Cadres blocs : 3 ) Cadres titres de page : Page 10 / 14

11 4 ) Boutons : Aperçu du site : Utilisation avancée : Attention, les éléments qui suivent nécessitent des compétences en retouche d'image. Vous avez la possibilité de mettre en place une bannière qui se marie avec les couleurs déterminées pour le site. Si vous avez déjà votre bannière, effectuez un clic droit sur l'image puis choisissez «Afficher l'image de fond». Page 11 / 14

12 Effectuez ensuite un nouveau clic droit sur l'image et sélectionnez «Enregistrer sous» pour la télécharger sur votre ordinateur. En utilisant les calques des logiciels de retouche d'images 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é. Page 12 / 14

13 Une fois enregistrée, importez votre bannière en vous rendant dans Apparence > Modèles de site > Mode visuel : Personnaliser. Cliquez sur le petit crayon de la zone où vous vous souhaitez introduire votre bannière (ou la remplacer) puis rajoutez-y votre image. Pour rajouter une couleur de fond à votre site, cliquez sur «Modifier les principales couleurs et polices» et dans la zone «Fond général» modifiez la couleur comme ci-dessous : Si vous avez choisi la version négative à la base, votre présentera un autre aspect mais les couleurs seront unifiées. Comparaison du site : AVANT : Page 13 / 14

14 APRES : Page 14 / 14