Fichier PSD pour prosilver

Description
» Fichier PSD de Prosilver

Voici une approche du psd de prosilver, qui peut être un point de départ ou un complément à la doc pour changer les couleurs de l'index et au décorticage de la feuille de style colours.css.
Ce tuto est destiné à celles et ceux qui seraient tentés de travailler à partir de photoshop pour modifier les couleurs du style, afin d'avoir un aperçu global avant de modifier le fichier colours.css.


Vous verrez en ouvrant le psd que les calques sont disposés dans deux groupes principaux: le groupe contenu et le groupe background et bordures.

» 1/ Le groupe contenu contient, comme son nom l'indique, tout ce qui rempli le forum.
Sa principale utilité est de meubler le psd pour avoir un aperçu plus réaliste lorsque vous ferez vos essais de couleurs sur les différents éléments du groupe background et bordures.
Il n'en demeure pas moins que vous pouvez aussi l'utiliser pour tester les couleurs des liens et des polices, à vous de voir.

» 2/ Le groupe background et bordures contient les calques de certains éléments déclarés dans la feuille de style colours.css.
Dans ce groupe background et bordures se trouve également un sous-groupe appelé corners avec les arrondis des éléments principaux. Il est là pour la déco. ;)

Les calques des éléments qui nous intéressent sont remarqués en vert et nommés par le sélecteur CSS et la propriété correspondants à la modification.
Ex: .headerbar et .forumbg { background-image
Ce qui correspond à ceci dans le fichier colours.css:
Code: Tout sélectionner
.headerbar { background-color: #12A3EB; ==>background-image: url("{T_THEME_PATH}/images/bg_header.gif"); color: #FFFFFF; }
Et:
Code: Tout sélectionner
.forumbg { background-color: #12A3EB; ==>background-image: url("{T_THEME_PATH}/images/bg_header.gif"); }

A chaque calque est appliqué un masque vectoriel comportant des options de fusion.
Ça ne veut peut-être rien dire pour certains mais c'est en fait un moyen très simple de coloriser nos calques sans utiliser l'outil pot de peinture ou l'outil dégradé.

Voici un exemple d'utilisation de ces masques pour le background des catégories et forum (.forabg):

Double-clic sur le calque
Image

Clic dans la fenêtre Dégradé
Image

Agir en 1/ pour voir immédiatement les modifications en 2/
Image


Si vous regardez le calque input.button2 { background-image, vous verrez qu'il comporte une vignette supplémentaire.
C'est un masque de fusion car le dégradé complet du bouton est plus grand que celui affiché sur le forum, ceci afin d'avoir un effet au survol.
Pour avoir un aperçu complet de ce dégradé lorsque vous le modifiez, il faut désactiver le masque de fusion puis agir comme précédemment.
Clic droit sur la vignette du masque, puis sélectionner "Désactiver le masque de fusion"
Image

Et voilà, amusez-vous avec les calques pour personnaliser votre style , puis appliquez les couleurs au fichier colours.css

Bonus.
Les tranches des trois images du psd sont déjà sélectionnées (bg_button.gif, bg_header.gif, bg_list.gif), nous allons récupérer les images:
- Cachez le groupe contenu en cliquant sur l'oeil juste à gauche du calque
- Cachez le sous-groupe corners de la même façon
- Désactivez le masque de fusion du claque input.button2 { background-image
- Fichier / Enregistrez pour le Web et les périphériques
- Dans la fenêtre suivante, cliquez sur Enregistrer
- Dans la dernière fenêtre, vérifiez que le format de sortie soit 1/ Images GIF et que soit sélectionné 2/ Toutes les tranches utilisateurs
Image

Vous avez désormais les trois images déjà nommées et aux dimensions souhaitées, il ne reste plus qu'à écraser celles existantes dans le dossier /theme/images/
  • Auteur cabot
  • Version 1.0.0
  • Version de phpBB
  • Licence GPL v2.0
  • Dernière mise à jour 25 Fév 2014 à 15:37
  • Contrôle MD5 1146a71f3b88e533557f2f47e0392547
  • Téléchargements 852
  • Sujet d’annonce Voir
  • Évaluation (0)
  • Catégories Divers
  • Révisions
    Version
    Version de phpBB

Connexion  •  M’enregistrer

cron