32
Créer une barre de notation pour son site internet
On voit souvent sur les sites des barres de rating pour noter un article ou une image, si celle-ci n’est pas 100% CSS, le webmaster utilise Photoshop pour la créer. Voici une méthode simple pour créer une de ces barres 
- Fichier source Photoshop 1
- Cliques pour télécharger le fichier source photoshop utilisé dans ce tutorial.
- Fichier source Photoshop 2
- Cliques pour télécharger le fichier source photoshop utilisé dans ce tutorial.
ETAPE 1
J’ouvre Photoshop (évidemment) et je crée un nouveau document. Avec l’outil sélection je crée une barre en deux parties : chaque partie sur un nouveau calque et sur chacune des formes je place des styles de calques : contour + incrustation de dégradé.
ETAPE 2
Je crée un nouveau calque et j’ajoute des bordures tous les X pixels. Marron pour la partie marron et grise pour la partie grise.
ETAPE 3
Je crée un nouveau calque, je récupère la sélection de mes rectangles et sur un nouveau calque je remplis de blanc. Je coupe la moitié en bas et déplace ma forme blanche de 2 pixels vers le bas (pour laisser une bordure en haut). Avec un masque de fusion (calque > masque de fusion > tout faire apparaître) je cacher légèrement le bas.
++++
Cet article a été transféré vers notre site cousin grafpedia.fr, cliquez ici pour lire l’article complet.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 12 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
20 juin 2008 18:07, par henry
Super tuto comme d’habitude Au passage j’ai une petite question Comment je fais pour faire apparaitre cette petite fenêtre
Vive WonKaStudio
Répondre -
21 juin 2008 00:21, par xhok
Bonsoir Wonka,
Il faudrait que je vous parle impérativement s’il vous plait.Auriez vous une adresse MSN ou autre pour vous joindre ?
Merci
Répondre-
22 juin 2008 12:41, par Nvid
Xhok, tu est la personne qui participe à Tigh High ?
Sinon jolie tuto
Répondre
-
22 juin 2008 13:44, par wonka
Vous pouvez m’envoyer un mail sur wonka @ wks.fr
Sans les espaces bien sur, si effectivement nous avons des choses à nous dire je vous donnerai mon msn
Je suis disponible qu’a partir de demain !
Répondre
-
-
27 juin 2008 09:14, par romano
bonjour je voudrais le code pour l’intégrer a mon site c’est un très bon tuto mais il manque le code.
merci d’avance. ROFFI Romain
Répondre-
-
6 juillet 2008 18:26, par Monkey
Il ne faut pas de code... Tu parles sans doute du code pour mettre en place un système de notation ? Mais ça par contre ce n’est plus du ressort du tutoriel !
Ici, on explique juste comment faire la partie graphique. Pour le code, une recherche Google ou sur un site spécialisé t’aideras surement ! ^^
Répondre
-
-
12 juillet 2009 12:17, par BlackAlex
Pour mettre en place ce système, il faut connaitre le php, si tu veux l’apprendre tu fais une recherche google ou tu vas sur
http://www.siteduzero.com
Répondre
-
-
11 août 2008 05:49, par Alea
tu clique sous tes calques et tous sur le petit rond noir et blanc et tu choisi dégradé
Répondre -
9 mai 2009 15:55, par Cypher
Super tuto, très beau résultat ^^ Par contre, je préfère utiliser deux images, dont une qui a une taille variable pour pouvoir gérer les chiffre qui ne sont pas rond. Par ce que avec tes barres, ca gère 1/9, 2/9 ... 9/9 mais si on veut sur 20, ca demanderais de faire 20 barres différentes... Mais très belle réalisation quand même
Répondre -
8 juin 2011 14:30, par Chris
Bah perso j’ai aggrandi ses barres comme ça j’ai un résultat sur 10 ou dans mon cas je voulais un résultat sur 100 ^^
Merci en tous cas
Répondre
