Pitchoune
10/07/2005, 18h11
Bienvenue dans le kit de développement graphique. Ce document va vous conduire à travers les étapes pour pouvoir personnaliser vos boutons selon les couleurs de votre forum.
Toutes les images de ce kit sont sauvegardés en tant que fichiers Adobe Photoshop .psd, afin de garder les calques et de pouvoir les modifier facilement. Ils ont été crées sous Photoshop 6.0 et ImageReady 3.0.
Ce didacticiel montre ces étapes sous Photoshop CS et ImageReady CS.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-1.jpg
Les fichiers PSD inclus dans le Kit de développement graphique sont tout ce que vous avez besoin pour personnaliser entièrement tous les boutons vBulletin et les icônes.
Quand vous ouvrez un fichier dans Photoshop, vous verrez habituellement une seule image, mais le fichier que vous ouvrez peut contenir plusieurs images. Regardez dans THREAD CLOSED.PSD par exemple.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-2.jpg
Ce fichier est seulement utilisé pour une image (threadclosed.gif), mais le fichier PSD contient toujours des calques afin de faciliter la modification des couleurs.
Regardez dans la palette Calques dans Photoshop et vous pourrez voir les calques individuels qui ont été utilisés pour créer cette image.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-3.jpg
Comme vous pouvez le voir, les constituants principaux de l'image sont le fond d'image appelé Gradient (dégradé), le calque du texte et trois autres calques utilisés pour créer la petite icône sur le côté gauche de l'image.
Vous pouvez voir chaque calque en cliquant sur le bouton http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-4.jpg à côté de chaque calque, pour les cacher, et recliquer dessus pour revoir les calques souhaités.
Afin de recolorer ce bouton pour qu'il s'allie avec les couleurs de votre forum, vous devez recolorer le dégradé et la possibilité aussi de recolorer l'arrière-plan de l'icône. Ceci est ce que nous allons faire.
Cliquez sur le calque Gradient dans la palette des Calques, celui-ci sera surligné, comme sur l'image précédente. Vous devez maintenant choisir une couleur de début et de fin pour le dégradé. Pour faire ceci, cliquez sur les cases colorés dans la palette d'outils.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-5.jpg
La couleur dans la case en haut à gauche est la couleur de début du dégradé, et la couleur en bas à droite est celle de fin du dégradé.
Ensuite, vous devez sélectionner l'outil Dégradé de la palette d'outils. Pour faire ceci, appuyez plusieurs fois sur la lettre G jusqu'à ce que l'outil Dégradé soit sélectionné.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-6.jpg
Assurez-vous que le type de dégradé est linéaire en vérifiant dans les options de la palette d'outils.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-7.jpg
Maintenant, vous devez utiliser l'outil dégradé pour dessiner le nouveau dégradé.
Pour faire ceci, tirez un trait du haut de l'image vers le bas de l'image, puis relâchez le bouton de la souris, et votre dégradé sera dessiné. Ne vous inquiétez pas si les couleurs dépassent des contours de l'image - le fond est de couleur transparent verrouillé, le dégradé n'ira pas se balader ailleurs.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-8.jpg
Quand vous relâchez le bouton de la souris, le dégradé est dessiné.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-9.jpg
Si vous souhaitez que votre trait vertical soit bien vertical, restez appuyé sur la touche Majuscule pour que le trait soit bien droit.
Si vous souhaitez aussi recolorer l'icône, cliquez sur le calque appelé « icon bg » et verrouillez le fond transparent comme ceci :
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-10.jpg
Maintenant, sélectionnez l'outil Pinceau de la palette d'outils en pressant le bouton B sur le clavier jusqu'à ce que l'outil Pinceau soit sélectionné.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-11.jpg
Maintenant, choisissez la couleur que vous souhaitez utilisez, et recolorez toutte l'icône. Une fois encore, ne vous inquiétez pas des rebords, vous avez verrouillé le fond :
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-12.jpg
L'étape finale consiste à sauvegarder l'image au format GIF, à utiliser sur votre forum.
Pour faire ceci, choisissez « Enregistrer pour le Web » dans le menu « Fichier » (ou appuyez sur Alt + Ctrl + Maj + S sur votre clavier).
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-13.jpg
Probablement l'option la plus importante que vous devez définir est le nombre de couleurs. Ceci affectera directement la taille de l'image finale - plus de couleurs vous avez, plus la taille sera grande. La taille du fichier est affichée en bas à gauche de la fenêtre. Vous devez être expérimenté pour trouver le meilleur compromis entre la qualité de l'image et la taille du fichier final. Soixante-quatre couleurs est habituellement suffisant.
Quand vous êtes content de l'image, cliquez sur le bouton [Enregistrer] pour sauvegarder l'image. Une pop-up s'ouvrira pour vous demander le nom de fichier et le lieu de sauvegarde.
Comme mentionné précédemment, certains des fichiers PSD sont utilisés pour créer deux ou plus d'images GIF finales. Un exemple de ceci est le fichier SMILIES.PSD, qui est utilisé pour créer tous les smileys sauf le smiley confused.gif.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-14.jpg
La création de différents smileys variées vous demande de cacher certains calques et d'en afficher d'autres - par exemple, pour créer le smiley eek ( :eek: ), vous devez cacher tous les autres calques à l'exception de eek, du fond (background) et du cercle extérieur (outer circle). Pour créer le smiley tongue ( :p ), cachez le claque eek et affichez le calque tongue. Montrez et cachez les calques est possible en cliquant sur la petite icône à côté du calque approprié.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-15.jpg
Pour changer la couleur de fond des smileys, vous devez simplement double-cliquer sur l'effet « Incrustation couleur » appliqué sur le calque de fond (Layer 1), et de définir une nouvelle couleur.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-16.jpg
Quand vous avez fini de créer un smiley, faites « Fichier », puis « Enregistrer pour le Web » vu précédemment.
Toutes les images de ce kit sont sauvegardés en tant que fichiers Adobe Photoshop .psd, afin de garder les calques et de pouvoir les modifier facilement. Ils ont été crées sous Photoshop 6.0 et ImageReady 3.0.
Ce didacticiel montre ces étapes sous Photoshop CS et ImageReady CS.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-1.jpg
Les fichiers PSD inclus dans le Kit de développement graphique sont tout ce que vous avez besoin pour personnaliser entièrement tous les boutons vBulletin et les icônes.
Quand vous ouvrez un fichier dans Photoshop, vous verrez habituellement une seule image, mais le fichier que vous ouvrez peut contenir plusieurs images. Regardez dans THREAD CLOSED.PSD par exemple.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-2.jpg
Ce fichier est seulement utilisé pour une image (threadclosed.gif), mais le fichier PSD contient toujours des calques afin de faciliter la modification des couleurs.
Regardez dans la palette Calques dans Photoshop et vous pourrez voir les calques individuels qui ont été utilisés pour créer cette image.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-3.jpg
Comme vous pouvez le voir, les constituants principaux de l'image sont le fond d'image appelé Gradient (dégradé), le calque du texte et trois autres calques utilisés pour créer la petite icône sur le côté gauche de l'image.
Vous pouvez voir chaque calque en cliquant sur le bouton http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-4.jpg à côté de chaque calque, pour les cacher, et recliquer dessus pour revoir les calques souhaités.
Afin de recolorer ce bouton pour qu'il s'allie avec les couleurs de votre forum, vous devez recolorer le dégradé et la possibilité aussi de recolorer l'arrière-plan de l'icône. Ceci est ce que nous allons faire.
Cliquez sur le calque Gradient dans la palette des Calques, celui-ci sera surligné, comme sur l'image précédente. Vous devez maintenant choisir une couleur de début et de fin pour le dégradé. Pour faire ceci, cliquez sur les cases colorés dans la palette d'outils.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-5.jpg
La couleur dans la case en haut à gauche est la couleur de début du dégradé, et la couleur en bas à droite est celle de fin du dégradé.
Ensuite, vous devez sélectionner l'outil Dégradé de la palette d'outils. Pour faire ceci, appuyez plusieurs fois sur la lettre G jusqu'à ce que l'outil Dégradé soit sélectionné.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-6.jpg
Assurez-vous que le type de dégradé est linéaire en vérifiant dans les options de la palette d'outils.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-7.jpg
Maintenant, vous devez utiliser l'outil dégradé pour dessiner le nouveau dégradé.
Pour faire ceci, tirez un trait du haut de l'image vers le bas de l'image, puis relâchez le bouton de la souris, et votre dégradé sera dessiné. Ne vous inquiétez pas si les couleurs dépassent des contours de l'image - le fond est de couleur transparent verrouillé, le dégradé n'ira pas se balader ailleurs.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-8.jpg
Quand vous relâchez le bouton de la souris, le dégradé est dessiné.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-9.jpg
Si vous souhaitez que votre trait vertical soit bien vertical, restez appuyé sur la touche Majuscule pour que le trait soit bien droit.
Si vous souhaitez aussi recolorer l'icône, cliquez sur le calque appelé « icon bg » et verrouillez le fond transparent comme ceci :
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-10.jpg
Maintenant, sélectionnez l'outil Pinceau de la palette d'outils en pressant le bouton B sur le clavier jusqu'à ce que l'outil Pinceau soit sélectionné.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-11.jpg
Maintenant, choisissez la couleur que vous souhaitez utilisez, et recolorez toutte l'icône. Une fois encore, ne vous inquiétez pas des rebords, vous avez verrouillé le fond :
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-12.jpg
L'étape finale consiste à sauvegarder l'image au format GIF, à utiliser sur votre forum.
Pour faire ceci, choisissez « Enregistrer pour le Web » dans le menu « Fichier » (ou appuyez sur Alt + Ctrl + Maj + S sur votre clavier).
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-13.jpg
Probablement l'option la plus importante que vous devez définir est le nombre de couleurs. Ceci affectera directement la taille de l'image finale - plus de couleurs vous avez, plus la taille sera grande. La taille du fichier est affichée en bas à gauche de la fenêtre. Vous devez être expérimenté pour trouver le meilleur compromis entre la qualité de l'image et la taille du fichier final. Soixante-quatre couleurs est habituellement suffisant.
Quand vous êtes content de l'image, cliquez sur le bouton [Enregistrer] pour sauvegarder l'image. Une pop-up s'ouvrira pour vous demander le nom de fichier et le lieu de sauvegarde.
Comme mentionné précédemment, certains des fichiers PSD sont utilisés pour créer deux ou plus d'images GIF finales. Un exemple de ceci est le fichier SMILIES.PSD, qui est utilisé pour créer tous les smileys sauf le smiley confused.gif.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-14.jpg
La création de différents smileys variées vous demande de cacher certains calques et d'en afficher d'autres - par exemple, pour créer le smiley eek ( :eek: ), vous devez cacher tous les autres calques à l'exception de eek, du fond (background) et du cercle extérieur (outer circle). Pour créer le smiley tongue ( :p ), cachez le claque eek et affichez le calque tongue. Montrez et cachez les calques est possible en cliquant sur la petite icône à côté du calque approprié.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-15.jpg
Pour changer la couleur de fond des smileys, vous devez simplement double-cliquer sur l'effet « Incrustation couleur » appliqué sur le calque de fond (Layer 1), et de définir une nouvelle couleur.
http://forum.vbulletin-fr.org/tutorial/gfxkit2/graphics-16.jpg
Quand vous avez fini de créer un smiley, faites « Fichier », puis « Enregistrer pour le Web » vu précédemment.