Vous aurez besoin , pour suivre ce topic correctement de :
1.
Paint.NET (à télécharger gratuitement)
2. La capacité à lire des instructions
3. La capacité à me poser des questions si jamais vous avez un soucis
C'est plus facile qu'on veuille l'entendre
1. Trouvez une bonne image
Elle devra avoir les mêmes dimensions (200x200 par exemple) si vous ne voulez pas vous retrouver avec une image floue. Vous voudrez plutôt une image avec un fond blanc ou transparent plutôt qu'un décor plein d'arbres etc...
Bonne image
A
B
Mauvaise image
A
Si vous êtes débutant et que vous ne savez pas vérifier une dimension d'image, cliquez droit dessus, sélectionner Propriétés ou Voir les infos de l'image dans votre navigateur Internet.
Par exemple, je vais utiliser l'exemple A (bonne image) tout le long de ce guide. Sur Firefox cliquez dessus et sélectionnez Voir les infos de l'image. Je vois que les dimensions sont proches (surpassé en bleu sur l'image). Plus près, mieux c'est !
![]()
Enregistez l'image pour PAINT.NET
2. Ouvrir et redimensionner
Partie très facile
Sur PAINT.NET allez dans Fichier > Ouvrir et sélectionnez l'image que vous venez de télécharger
Une fois l'avoir ouverte, je réalise que ... oh non ! L'image n'a pas de fond transparent ! Vous pouvez parler d'une image qui n'a pas de fond transparent si le font n'est pas quadrillé en gris et blanc
![]()
Selectionnez l'outil "Baguette Magique"
![]()
Et cliquez sur le fond (ça ne marchera pas pour certaines images). Appuyez sur la touche Supprimer de votre clavier !
![]()
Maintenant qu'on a notre fond, nous devons redimensionner l'image afin qu'elle sois de même dimensions que la zone pour les icônes Karmiques sur un profil. Chaque carré mesure 35 pixels sur 35, donc on doit la redimensionner de la sorte. Allez dans Image -> Redimensionnez
![]()
Décochez Conserver les proportions, et vérifiez qu'il y ait marqué "En taille absolue" un peu plus en haut et rentrez 35 pour Largeur et Hauteur
![]()
Voilà, vous avez redimensionné votre image pour votre barre Karmique
Image redimensionnée :
![]()
Enregistrez cette image, c'est celle que j'appelle "de base"
Vous l'utiliserez pour remplacer les étoiles pleines rouges.
J'ai sauvegardé l'image avec comme nom : ImageKarmaDeBase.png
3A. Karma rempli
Conseil : Ctrl + Z = annuler l'action
Vous pouvez créer n'importe quel icône de Karma après l'étape n°2 mais certains dessins seront assez moches. Avoir 3 couleurs pour vos icônes Karmique est simple et est vraiment beau avec n'importe quelle image ! Vous avez juste à vous remémorer sur quelles images vous travaillez.
3AI. Feuilles remplies
Vos étoiles normales remplies seront simplement la bonne image A, je vais utiliser la même feuille redimensionnée. Au moins je serais sûr que vous saurez faire d'autres icônes par le futur.
3AII. Feuille noir et blanc ou négative
Pour obtenir la feuille en couleur négative, ce sera facile et vos aurez des choix tels que l'inversion de couleur ou tout simplement le noir et blanc
Comment procéder pour le noir et blanc :
C'est très facile, rendez vous dans Ajustements -> Noir et Blanc
![]()
![]()
Voila! C'était facile non
?
Comment procéder pour l'inversion des couleurs :
Si simple que pour le noir et blanc, votre icône aura exactement les couleurs inversées qu'initialement. Vraiment sympa pour une image appelée "négative" :p ?
Alors rendez vous dans Ajustements -> Inverser les couleurs
![]()
![]()
Voilà, les couleurs sont inversées désormais !
Vous ne ferez pas les choses les plus cools en inversant simplement les couleurs, tournez autour des ajustements, certains mixs sont sympas
!
Je milite pour l'inversement, c'est parfois surprenant !
Enregistrez l'icône de manière a reconnaître le négatif parmi vos icônes justement
3AIII. Les demies étoiles
Si on veut couper la feuille en deux, on va utiliser l'outil de sélection rectangulaire
Zoomez en 800 fois :
![]()
Sélectionnez l'outil de sélection rectangulaire :
![]()
Faîtes comme sur le screenshot et comptez 17 carreaux.
![]()
Pressez CTRL+X pour couper la partie sélectionnée. Remettez le zoom à 100%. Ouvrez l'image intitulée ImageKarmaDeBase.png. Et pressez CTRL + V pour coller
![]()
Vous avez réalisé votre icône de moitié !
Enregistrez cette image de manière a vous souvenir que c'est la moitié de l'icône
3AIV. Feuilles surlignées
Allez dans Ajustements -> Courbes -> RVB
Jouez avec cette courbe pour des résultats hauts en couleurs et très hasardeux !
![]()
Enregistrez cette image de manière a vous souvenir que c'est la feuille surlignée
Nous avons donc toutes nos images pour chaque icônes de Karma
4. Créer le code du profil
Vous avez toutes vos images en .png et en 35x35. La dernière étape est de les intégrer à votre profil !
Hébergez les feuilles surlignées, à moitié, pleines et négatives sur des sites tels que
Hapshack
Imageshack
| Code: |
|
<style text="text/css">#hasStars .hasStar, #hasStars.hasEmpty .hasStar {
background:url(Lien de la dernière étoile.PNG) !important;}.show1 #star1,.show2 #star1,.show3 #star1,.show4 #star1,.show5 #star1{background:url(Lien de l'étoile n°1 lorsque la souris est dessus.PNG) !important;}.show2 #star2,.show3 #star2,.show4 #star2,.show5 #star2{background:url(Lien de l'étoile n°2 lorsque la souris est dessus.PNG) !important;}.show3 #star3,.show4 #star3,.show5 #star3{background:url(Lien de l'étoile n°3 lorsque la souris est dessus.PNG) !important;}.show4 #star4,.show5 #star4{background:url(Lien de l'étoile n°4 lorsque la souris est dessus.PNG) !important;}.show5 #star5,.starvenuya e{background:url(Lien de l'étoile n°5 lorsque la souris est dessus.PNG) !important;}.has1 #hasStar1,.has15 #hasStar1,.has2 #hasStar1,.has2 #hasStar2,.has25 #hasStar1,.has25 #hasStar2,.has3 #hasStar1,.has3 #hasStar2,.has3 #hasStar3,.has35 #hasStar1,.has35 #hasStar2,.has35 #hasStar3,.has4
#hasStar1,.has4 #hasStar2,.has4 #hasStar3,.has4 #hasStar4,.has45 #hasStar1,.has45 #hasStar2,.has45 #hasStar3,.has45 #hasStar4,.has5 #hasStar1,.has5 #hasStar2,.has5 #hasStar3,.has5 #hasStar4,.has5 #hasStar5{background:url(Lien des trois premières étoile.PNG) !important;}.has05 #hasStar1,.has15 #hasStar2,.has25 #hasStar3,.has35 #hasStar4,.has45 #hasStar5{background:url(Lien de la quatrième étoile.PNG) !important;}</style>
|
Après avoir remplacé les liens vous obtiendrez ceci :
| Code: |
|
<style text="text/css">#hasStars .hasStar, #hasStars.hasEmpty .hasStar {
background:url(http://puu.sh/iMQs) !important;}.show1 #star1,.show2 #star1,.show3 #star1,.show4 #star1,.show5 #star1{background:url(http://puu.sh/iMQD) !important;}.show2 #star2,.show3 #star2,.show4 #star2,.show5 #star2{background:url(http://puu.sh/iMQD) !important;}.show3 #star3,.show4 #star3,.show5 #star3{background:url(http://puu.sh/iMQD) !important;}.show4 #star4,.show5 #star4{background:url(http://puu.sh/iMQD) !important;}.show5 #star5,.starvenuya e{background:url(http://puu.sh/iMQD) !important;}.has1 #hasStar1,.has15 #hasStar1,.has2 #hasStar1,.has2 #hasStar2,.has25 #hasStar1,.has25 #hasStar2,.has3 #hasStar1,.has3 #hasStar2,.has3 #hasStar3,.has35 #hasStar1,.has35 #hasStar2,.has35 #hasStar3,.has4
#hasStar1,.has4 #hasStar2,.has4 #hasStar3,.has4 #hasStar4,.has45 #hasStar1,.has45 #hasStar2,.has45 #hasStar3,.has45 #hasStar4,.has5 #hasStar1,.has5 #hasStar2,.has5 #hasStar3,.has5 #hasStar4,.has5 #hasStar5{background:url(http://puu.sh/iMQh) !important;}.has05 #hasStar1,.has15 #hasStar2,.has25 #hasStar3,.has35 #hasStar4,.has45 #hasStar5{background:url(http://puu.sh/iMQS) !important;}</style>
|
Insérez ce code dans la partie Flash/Média
Partie normale (sans la souris dessus) :
![]()
Partie lorsque la souris est dessus :
![]()
Et ça marche ! Si vous avez des questions, je serais honoré d'y répondre ♥
Ne demandez pas de barres de Karma persos ici
Source :
Ce thread[u]