Vous avez lu le sujet Ajouter des bordures à votre forum prosilver, mais vous aimeriez avoir les bordures avec une autre couleur que le gris ?
Il n'est pas nécessaire d'avoir Photoshop pour réaliser ce cadrage, puisque dans ce tutoriel, je vais vous montrer à le faire avec GIMP 2.6, découpage inclus !
Niveau : Quelques bases en calques et en sélections sont requises.
Ce tutoriel se divise en ces parties suivantes :
- Création du cadre
- Découpage
- Intégration XHTML/CSS
» Création du cadre
Tout d'abord, choisissez votre couleur d'arrière-plan qui servira pour l'arrière-plan du cadrage. Pour l'exemple, je vais prendre un gris tirant sur la couleur café au lait. Assurez-vous aussi que la fenêtre des calques est ouverte. Sinon, faites Ctrl+L ou faites Fenêtres > Fenêtre ancrable > Calques pour l'afficher.
Ensuite, créez un nouveau document de 300*300 et laissez les autres options par défaut.
Voici votre nouveau document :
Placez des guides aux coordonnées 10 et 290, dans les deux sens. Pour faire apparaître un guide, cliquez sur la règle du haut pour un guide horizontal ou sur la règle de gauche pour un guide vertical et ensuite, avec un glisser-déposer, déposez ces guides sur votre image. N'hésitez pas à zoomer pour bien positionner les guides.
Créez un nouveau calque transparent puis prenez l'outil Sélection rectangulaire (
) et ensuite, cochez l'option Coins arrondis et réglez le rayon à 10 pixels.
Faites votre sélection en suivant les guides, et utilisez les coins au besoin pour corriger l'alignement des bords du rectangle avec les guides.
Vous devriez avoir ceci :
Réinitialisez vos couleurs avec l'icône
puis remplissez la sélection avec la couleur blanche (Ctrl+.).
Ensuite, créez un nouveau calque transparent et placez-le en dessous du fond blanc. Agrandissez ensuite votre sélection de 2 pixels (Sélection > Agrandir) et adoucissez-la de 5 pixels (Sélection > Adoucir). Remplissez la sélection avec la couleur noire (Ctrl+,) et mettez ce calque en mode Superposer pour avoir une ombre douce. Désactivez votre sélection (Maj+Ctrl+A).
(note : J'ai désactivé l'affichage des guides pour que vous puissiez mieux voir. On n'aura plus besoin des guides avant l'étape du découpage.)
Récupérez la sélection du calque du fond blanc (clic-droit sur le calque > Alpha vers sélection), puis créez un nouveau calque transparent et choisissez une couleur grise claire comme couleur de premier-plan.
Réduisez la sélection de 2 pixels (Sélection > Réduire), adoucissez-la de 2 pixels (Sélection > Adoucir) puis remplissez la sélection de la couleur grise (Ctrl+,).
Réduisez la sélection de 5 pixels (Sélection > Réduire) puis adoucissez-la de 10 pixels (Sélection > Adoucir) et effacez la sélection (Suppr), afin de n'avoir le gris clair que sur le bord pour donner une impression de relief, puis abaissez légèrement son opacité depuis la fenêtre des calques si besoin. Désactivez ensuite votre sélection (Maj+Ctrl+A).
Votre cadrage est maintenant prêt pour le découpage, mais tout d'abord, enregistrez-le au format .xcf avant de fusionner les calques.
» Découpage
Maintenant que nous avons sauvegardé une copie en .xcf, fusionnez vos calques avant de faire la suite. On va maintenant préparer notre cadrage pour le découpage.
Repositionnez vos guides aux coordonnées 25 et 275 de chaque sens, puis positionnez un troisième guide à 30 de chaque sens.
Mais avant, je vous informe qu'il existe deux manières de découper, et votre choix se fera si vous avez Python installé. Ceci est déjà le cas si vous êtes sous Linux. Par contre, si vous êtes sous Windows, vous devez l'avoir installé avant Gimp, mais ceci ne devrait plus être un problème dans la future branche 2.8 de GIMP. Néammoins, je vais vous détailler les deux méthodes.
Découpage avec le python-fu Slice
Si Python est installé, allez tout simplement dans Filtres > Web > Slice, choisissez le répertoire où vous voulez enregistrer les morceaux, puis mettez les paramètres suivants :
Validez ensuite. Le script découpera et enregistrera chacune des images dans le répertoire choisi. Il ne vous reste plus qu'à enlever les morceaux qui ne sont pas nécessaires pour l'intégration, ainsi que le fichier HTML généré pour n'en garder que ça :
Votre cadre est maintenant prêt à être codé !
Découpage avec Massicot
Si Python n'est pas installé, allez dans Image > Transformer > Massicot.
Vous aurez alors votre cadrage découpé en plusieurs morceaux comme ici. Fermez tout de suite les morceaux monimage-2-0.xcf, monimage-1-1.xcf, monimage-2-1.xcf, monimage-0-2.xcf, monimage-1-2.xcf, monimage-2-2.xcf, monimage-3-2.xcf, ainsi que monimage-2-3.xcf, sans les enregistrer pour n'en garder que les huit morceaux nécessaires à l'intégration. Enregistrez les morceaux restants au format .gif en choisissant les noms en fonction de la position des morceaux (ex : cadre-d-h pour le coin en haut à droite).
Votre cadre est maintenant prêt à être codé !
» Intégration XHTML/CSS
Cette technique fonctionne autant pour un design fixe que pour un design extensible. Puisque nos images ne sont pas transparentes, on peut les chevaucher sans problème et ce sera donc la méthode des imbrications que je vais vous montrer.
Code XHTML :
- Code: Tout sélectionner
<div id="global">
<div id="haut">
<div id="haut-gauche">
<div id="haut-droite">
</div>
</div>
</div>
<div id="milieu-gauche">
<div id="milieu-droite">
<!-- Contenu du bloc -->
</div>
</div>
<div id="bas">
<div id="bas-gauche">
<div id="bas-droite">
</div>
</div>
</div>
</div>
Et maintenant le CSS :
- Code: Tout sélectionner
/*Contient l'ensemble des blocs du cadre*/
#global {
width:1000px; /*peut aussi être en %*/
margin:auto; /*Pour le centrage. Utilisez les valeurs en pixels si vous n'utilisez pas width*/
padding:0;
}
/*Partie du haut*/
#haut, #haut-droite, #haut-gauche {
margin:0;
padding:0;
height:25px; /*Même hauteur que les coins*/
}
#haut {
background: url('cadre-h.gif') repeat-x top left;
}
#haut-droite {
background: url('cadre-h-d.gif') no-repeat top right;
}
#haut-gauche {
background: url('cadre-h-g.gif') no-repeat top left;
}
/*Partie centrale*/
#milieu-gauche {
margin:0;
padding:0;
backtround: url('cadre-m-g.gif') repeat-y top left;
}
#milieu-droite {
margin:0;
padding: 0 25px; /*ce bloc contient directement le contenu, donc on peut mettre des marges internes sur les côtés*/
background: url('cadre-m-d.gif') repeat-y top right;
}
/*Partie du bas*/
#bas, #bas-gauche, #bas-droite {
margin:0;
padding:0;
height:25px; /*Même hauteur que les coins*/
}
#bas {
background: url('cadre-b.gif') repeat-x bottom left;
}
#bas-gauche {
background: url('cadre-b-g.gif') no-repeat bottom left;
}
#bas-droite {
background: url('cadre-b-d.gif') no-repeat bottom right;
}
Quelques explications s'imposent :
- Un div global contient tout l'ensemble de notre cadre. De cette façon, on y définit la largeur ou les marges externes de la page et après, on a la paix, puisque les blocs contenus prendront automatiquement la largeur définie.
- Pour les images sans transparences, le fait d'imbriquer les blocs d'une même ligne évite le recours aux flottants et aux correctifs CSS pour Internet Explorer 6 en particulier.
- Pour le haut et le bas, le bloc le plus imbriqué n'a aucun contenu, donc il est nécessaire de définir une hauteur, car sinon, ces éléments ne seraient pas visibles.
- Quant au milieu, on n'a pas besoin de définir une hauteur, puisque le bloc le plus imbriqué contiendra l'ensemble du contenu de la page.
- Pour tous les blocs, les marges externes et internes ont été initialisés à zéro, afin de prévenir tout bug d'affichage sous certains navigateur, en particulier Internet Explorer. Seul le bloc imbriqué du milieu a des marges internes puisqu'il est destiné à contenir l'ensemble de la page.
Et voilà, le tutoriel est terminé et vous pouvez maintenant avoir un site avec des cadres non-transparents, qu'il soit de largeur fixe ou extensible !
Si par contre, vous devez intégrer un cadre avec des morceaux transparents, je vous recommande de lire ce tutoriel sur les cadres Aero pour Prosilver, vous n'avez qu'à l'adapter pour votre site.
Flux RSS
