Pitchoune
10/07/2005, 17h26
Le kit graphique vBulletin 3 a commencé sa vie en tant qu'objets 3D et scènes crées sous Lightwave 3D (http://www.newtek.com/lightwave/). Le résultat des images finales ont été procédés par la suite avec Adobe Photoshop (http://www.adobe.fr/products/photoshop/main.html).
http://files.vbulletin.com/doc_images/gfxkit3/lightwave.png
En raison de la nature des graphiques 3D, les bords des images n'aboutissent pas à une bordure de pixel brusquement défini, mais ils sont plutôt détourés à une couleur spécifique de fond.
Les couleurs auxquelles les graphiques standards détourés sont basées sur les couleurs du style par défaut vBulletin, qui est principalement blanc et bleu pâle. Il se peut que ces couleurs ne conviennent pas à vos propres styles personnalisés, dans le cas où vous devrez utiliser le Kit de développement graphique vBulletin 3 pour produire un jeu de graphiques détouré à vos propres couleurs.
Deux kit graphiques sont disponibles depuis l'Espace Membres vBulletin (http://members.vbulletin.com/membersupport.php). Le premier contient les images qui sont entièrement préparées et demandent seulement que vous choisissiez la couleur mate et que vous sauvegardiez le résultat. La deuxième version contient les images plus grandes, qui vous permet de faire de nombreux changements sur l'apparence du graphisme avant de sauvegarder les versions détourées.
Ce document expliquera le processus de modification des images en utilisant la version « large, layered » du kit de développement graphique, comme les étapes le demandent pour réaliser le même résultat qu'avec la version « instant matte » qui est un sous-ensemble de celui-ci.
Après le téléchargement du kit de développement graphique « large, layered » depuis l'Espace Membres vBulletin (http://members.vbulletin.com/membersupport.php), vous devez extraire les fichiers de l'archive zippé. Ils sont extraits avec une certaine structure des répertoires qui est la structure miroir du répertoire « images » de votre installation vBulletin.
http://files.vbulletin.com/doc_images/gfxkit3/photoshop_cs.png
Les images stockées dans le répertoire extrait sont du format .psd, afin de retenir les informations des calques et de faciliter leur modification. Ouvrir une image dans Photoshop (ou un logiciel alternatif qui supporte le format PSD) vous permettra d'accéder pour modifier les calques graphiques individuelles pour que vous puissiez faire tous les changements nécessaires.
Vous constaterez que la plupart des images PSD sont en fait utilisées pour créer un certain nombre d'images finales. Par exemple, tous les graphiques des smileys sont générés seulement de 2 fichiers PSD.
http://files.vbulletin.com/doc_images/gfxkit3/layers_palette.png
Ici, vous pouvez voir un un nombre typique de calques d'images dans un des fichiers du kit de développement graphique. Ce fichier particulier (Forum Icons.psd) est utilisé pour concevoir les images statusicon/forum_new.gif, statusicon/forum_old.gif, statusicon/forum_new_lock.gif, statusicon/forum_old_lock.gif et statusicon/forum_link.gif.
En cliquant sur le bouton http://files.vbulletin.com/doc_images/gfxkit2/graphics-4.gif à côté de chaque calque et jeu de calques, vous pouvez changer la visibilité de chaque calque et concevoir de là chaque image individuelle.
Par exemple, pour concevoir l'image statusicon/forum_new.gif, vous devez masquer tous les calques à l'exception de :
New Posts
Top Note
Bottom Note
Cependant, pour concevoir l'image statusicon/forum_new_lock.gif, tous les calques doivent être masqués, sauf :
No New Posts
Bottom Note
Top Note
FORUM LINK ARROW
Afin de créer les versions emmêlées de vos graphiques, vous devez suivre les étapes suivantes :
1. Premièrement, redimensionnez l'image à la taille désirée pour le graphique final (regardez le tableau des tailles et des couleurs de détourage (http://forum.vbulletin-fr.org/showthread.php?t=8693) pour la taille correcte de chaque image). La commande de redimensionnement peut être trouvée en faisant « Image > Taille de l'image... » dans Photoshop.
http://files.vbulletin.com/doc_images/gfxkit3/resize.png
2. Deuxièmement, sélectionnez chaque calque visible, appliquant un filtre accentué. Nous vous recommandons d'utiliser le filtre « Filtre > Renforcement > Accentuation... » avec les paramètres suivants :
http://files.vbulletin.com/doc_images/gfxkit3/unsharp_mask.png
3. Finalement, après avoir accentué chaque calque, aller dans la boîte de dialogue « Fichier > Enregistrer pour le Web... ». Ici, définissez le nombre de couleurs à 256, le format GIF et la trasparence activé.
http://files.vbulletin.com/doc_images/gfxkit3/save_for_web.png
Vous devez maintenant cliquer sur le contrôle « Détourage », choisir une couleur à la pipette et sélectionner une couleur approprié à utiliser en tant que fond d'écran pour votre image.
Vous pouvez vous référer à la discussion « Tableau des tailles et des couleurs de détourage (http://forum.vbulletin-fr.org/showthread.php?t=8693) » pour trouver le nom de la classe CSS avec lequel chaque graphique sera localisé pour y faire correspondre la couleur approprié.
Les kits de développement graphiques peuvent êre téléchargés depuis la page de Support des Membres (http://members.vbulletin.com/membersupport.php).
http://files.vbulletin.com/doc_images/gfxkit3/lightwave.png
En raison de la nature des graphiques 3D, les bords des images n'aboutissent pas à une bordure de pixel brusquement défini, mais ils sont plutôt détourés à une couleur spécifique de fond.
Les couleurs auxquelles les graphiques standards détourés sont basées sur les couleurs du style par défaut vBulletin, qui est principalement blanc et bleu pâle. Il se peut que ces couleurs ne conviennent pas à vos propres styles personnalisés, dans le cas où vous devrez utiliser le Kit de développement graphique vBulletin 3 pour produire un jeu de graphiques détouré à vos propres couleurs.
Deux kit graphiques sont disponibles depuis l'Espace Membres vBulletin (http://members.vbulletin.com/membersupport.php). Le premier contient les images qui sont entièrement préparées et demandent seulement que vous choisissiez la couleur mate et que vous sauvegardiez le résultat. La deuxième version contient les images plus grandes, qui vous permet de faire de nombreux changements sur l'apparence du graphisme avant de sauvegarder les versions détourées.
Ce document expliquera le processus de modification des images en utilisant la version « large, layered » du kit de développement graphique, comme les étapes le demandent pour réaliser le même résultat qu'avec la version « instant matte » qui est un sous-ensemble de celui-ci.
Après le téléchargement du kit de développement graphique « large, layered » depuis l'Espace Membres vBulletin (http://members.vbulletin.com/membersupport.php), vous devez extraire les fichiers de l'archive zippé. Ils sont extraits avec une certaine structure des répertoires qui est la structure miroir du répertoire « images » de votre installation vBulletin.
http://files.vbulletin.com/doc_images/gfxkit3/photoshop_cs.png
Les images stockées dans le répertoire extrait sont du format .psd, afin de retenir les informations des calques et de faciliter leur modification. Ouvrir une image dans Photoshop (ou un logiciel alternatif qui supporte le format PSD) vous permettra d'accéder pour modifier les calques graphiques individuelles pour que vous puissiez faire tous les changements nécessaires.
Vous constaterez que la plupart des images PSD sont en fait utilisées pour créer un certain nombre d'images finales. Par exemple, tous les graphiques des smileys sont générés seulement de 2 fichiers PSD.
http://files.vbulletin.com/doc_images/gfxkit3/layers_palette.png
Ici, vous pouvez voir un un nombre typique de calques d'images dans un des fichiers du kit de développement graphique. Ce fichier particulier (Forum Icons.psd) est utilisé pour concevoir les images statusicon/forum_new.gif, statusicon/forum_old.gif, statusicon/forum_new_lock.gif, statusicon/forum_old_lock.gif et statusicon/forum_link.gif.
En cliquant sur le bouton http://files.vbulletin.com/doc_images/gfxkit2/graphics-4.gif à côté de chaque calque et jeu de calques, vous pouvez changer la visibilité de chaque calque et concevoir de là chaque image individuelle.
Par exemple, pour concevoir l'image statusicon/forum_new.gif, vous devez masquer tous les calques à l'exception de :
New Posts
Top Note
Bottom Note
Cependant, pour concevoir l'image statusicon/forum_new_lock.gif, tous les calques doivent être masqués, sauf :
No New Posts
Bottom Note
Top Note
FORUM LINK ARROW
Afin de créer les versions emmêlées de vos graphiques, vous devez suivre les étapes suivantes :
1. Premièrement, redimensionnez l'image à la taille désirée pour le graphique final (regardez le tableau des tailles et des couleurs de détourage (http://forum.vbulletin-fr.org/showthread.php?t=8693) pour la taille correcte de chaque image). La commande de redimensionnement peut être trouvée en faisant « Image > Taille de l'image... » dans Photoshop.
http://files.vbulletin.com/doc_images/gfxkit3/resize.png
2. Deuxièmement, sélectionnez chaque calque visible, appliquant un filtre accentué. Nous vous recommandons d'utiliser le filtre « Filtre > Renforcement > Accentuation... » avec les paramètres suivants :
http://files.vbulletin.com/doc_images/gfxkit3/unsharp_mask.png
3. Finalement, après avoir accentué chaque calque, aller dans la boîte de dialogue « Fichier > Enregistrer pour le Web... ». Ici, définissez le nombre de couleurs à 256, le format GIF et la trasparence activé.
http://files.vbulletin.com/doc_images/gfxkit3/save_for_web.png
Vous devez maintenant cliquer sur le contrôle « Détourage », choisir une couleur à la pipette et sélectionner une couleur approprié à utiliser en tant que fond d'écran pour votre image.
Vous pouvez vous référer à la discussion « Tableau des tailles et des couleurs de détourage (http://forum.vbulletin-fr.org/showthread.php?t=8693) » pour trouver le nom de la classe CSS avec lequel chaque graphique sera localisé pour y faire correspondre la couleur approprié.
Les kits de développement graphiques peuvent êre téléchargés depuis la page de Support des Membres (http://members.vbulletin.com/membersupport.php).