On va commencer par les petites images, utiles et faciles à faire : Les RANGS.
Ici je parle de l’utilisation de ces rangs dans les forums phpBB, mais ils peuvent être utilisés sur tous les forums et ce tutorial peut être utile pour créer d’autres images. C’est à vous de trouver d’autres utilisations.
Les rangs d’origine de SubSilver (création www.subblue.com) avait les dimensions 49x14px et 49x20pour les rangs spéciaux.
Voici les exemples :
La première image (A) utilise la police Triplex Bold de 5pt (commerciale), sur la seconde (B) j’ai remplacé cette police par Arial Narrow en 4,5pt. J’ai appliqué dessus un faux gras.
La valeur de la couleur : #f38918
Ces indications vont vous servir uniquement si vous voulez faire les images qui se rapprochent le plus (en rendu) de l’original (subSIlver).
DAZ (www.forumimages.com) fais les rangs plus cool en remplaçant les rond par des images. 74x18px et 74x28 (C)
Pour qu’une image soit reconnaissable il faut qu’elle ne présente pas trop de détails et on ne peut pas diminuer sa taille à l’infini.
Pour trouver la "bonne" taille de votre future icône il faut qu’elle soit en harmonie avec la taille de vos avatars, donc entre 70 et 100px. (légèrement plus petite que l’avatar)
Avec les images présentant plus de détails il faut augmenter encore la taille de l’icône et au besoin diminuer le nombre de rangs. Voici une image faite "sur commande" pour un des membres du Forum phpBB-fr (90x35px)
Maintenent au bouleau:
On va commencer par ouvrir l’image source.
Pour pouvoir transformer notre image à volonté il faut qu’elle soit en mode RVB.
Vous pouvez donc travailler directement avec les images TIFF, JPG, BMP, mais il faut convertir les GIF et les PNG.
Ensuite on va extraire l’image (la séparer du fond).
Pour délimiter le contours je me sers de l’outil "plume" dans Photoshop (les contours peuvent être ajustés avec une grande précision. Ceci n’a pas d’importance avec de petites images en basse résolution, mais c’est une habitude), et ensuite je convertis les tracés en sélection, mais avec PhotoshopElement vous pouvez utiliser p.ex. le "lasso" ou "lasso polygonal"
Ensuite double cliquez sur le fond de l’image (palette calques, arrière-plan) pour le convertir en calque.Ctrl+Maj+I (inversion de la séléction) et Suppr. Pour éliminer le pourtour.
Créez deux nouveaux calques et remplissez les : le premier de blanc, le second de noir.
Glissez ces calques sous celui de l’image.
De cette façon vous pouvez contrôler l’exactitude de votre travail et éliminer les pixels qui "bavent" et ne font pas partie de notre image. Si votre sélection a été exacte, vous n’aurez rien à faire.
Ctrl+N et faites une image de 92x45px de couleur du fond de votre Forum en mode RVB.
Je vais utiliser pour cet exemple le Template "Chronicles" et pour "prélever" la couleur avec la pipette (I) je vais ouvrir l’image ‘gen_background.jpg’.
Ensuite (X) pour inverser mes couleurs premier- arrière plan. De cette façon la nouvelle image aura automatiquement la couleur voulue.
Etirez un peu le cadre de votre image de façon à pouvoir travailler "large".
Avec l’outil déplacement (V) glissez – déposer le calque avec le sabre sur votre nouvelle image.
Cliquez sur ce nouveau calque tout en maintenant le bouton Ctrl enfoncé. Vous sélectionnez le contour de votre sabre.
Ensuite Ctrl+T (transformation manuelle) et en tirant sur les poignés ajustez la taille du sabre par rapport à la taille de l’image. (A) Pour déplacer les petits objets pendant la transformation n’utilisez pas votre stylet, mais les touches de direction. (B)
Pour finir désélectionnez le sabre Ctrl+D (C)
Pour créer les rangs on va dupliquer le calque avec le sabre (A). Disons cinq fois et ensuite les repartir de façon uniforme sur la surface de l’image. (tous les 14px) (B)
Maintenant dupliquez encore une fois le premier sabre et "éteignez" les calques sauf celui là et le fond.
Baissez l’opacité environ de moitié et re-dupliquez ce calque quatre fois.
Repartissez ces calques de façon à avoir un calque semi opaque sous un calque normal. (C)
Pour diminuer le nombre de calques, rendez seulement ces calques visibles et "fusionnez les calques visibles" (Maj+Ctrl+E) (ou par le menu de la palette des calques) (D)
Vous obtiendrais vos rangs en affichant les calques voulus et en les enregistrant pour le Web.
Vos rangs spéciaux peuvent être créés en rajoutant les textes voulus, soit en appliquant un style de calques à ceux-ci. Par exemple les lueurs de couleur différente.
Si vous voulez faire cet exercice vous trouverez ici un ZIP avec le GIF de départ et le fichier PSD avec tous les calques et un fichier PSD vide, ainsi q’un ZIP avec les rangs tout prêts pour le Template "Chronicles" ou un autre utilisant la couleur du fond similaire.
Accueil du site Forum
