Tutofaf

Un blog d'aide fait par les femmes au foyer pour les cyberquiches !

18 février 2007

Changer l'aspect de son blog 3- un peu de graphisme

Alors voici. Comment j'ai fait pour mettre une bannière comme ça ? Vous devez avoir quelques connaissances en graphisme.

tut4a

Non je n'ai pas fait une seule image car si vous regarder comme il faut ( en gros en cliquant sur l'image) vous verrez qu'il aurait fallu que je pense à mettre la ligne de la bordure égal avec la bordure du bas et plusieurs autres détails,  de plus, la façon que j'ai pris pour faire cette bannière, me permet de changer ma bannière central sans pour autant changer l'espèce de bordure "glacé" autour qui sera là jusqu'aux temps des sucre.... bientôt soit ( je suis canadienne hein ! et même québécoise)

Non c'est une superposition de bordure faite avec quelques calculs tout simple.  Premièrement, cela vous prend un logiciel de retouchage d'image un peu plus perfectionné que ceux utilisé de base. Moi je travaille sous paint shop pro mais c'est aussi aisé avec photoshop ou autre. Bref, vous utilisez celui que vous connaissez.  Là je vous donnerai pas un cours sur comment faire des beaux dessins ou utiliser des images pour en transformer l'apparence, ça vous n'avez qu'à taper "tut + photoshop" ou "tut + psp" dans google et vous en aurez une panoplie.

Non je vais vous expliquer comment faire pour centrer le tout et pour utiliser la superposition de bannière.  Vous devez avoir 2 images, une plus grande que l'autre naturellement. Mais comment plus grande ?

tut4b

Voici donc mes deux images et voici comment faire le calcul.  Vous pouvez voir que celle du haut est légèrement plus grande que celle du bas, en fait de 10 pixels chaque côté.

tut4d

En fait c'est simple. Vous pouvez voir ici que mon "container" donc la partie qui contient tous les tableaux est de 850 et de plus j'ai ajouté un "padding" de 10pix.  Ce qui veut dire 10 pixels de chaque côté pas en tout. Donc votre deuxième bannière doit avoir 870 ou 20 pixel en tout de plus que votre bannière.  Mais juste de chaque côté... pas nécessairement plus haut et plus bas, vous allez comprendre un peu plus loin.  Ensuite, si vous avez remarqué dans la première image, la bannière de derrière semble se fondre dans la couleur de ma page.  C'est naturel, c'est fait exprès.  Mais pour cela vous devez être capable d'utiliser les masques ou quelque chose de similaire pour fondre une image avec une autre ou avec une couleur. Vous devez donc :

tut4c

Voici donc à gauche ma couleur de fond et à droite, dans votre logiciel, vous devriez avoir la possibilité d'avoir votre code html de la couleur.  Vous devrez transférer ce code dans les places concernés dans vos codes de la page CSS, en particulier dans "container" et "contain" et aussi peut-être "right" ou "left" tout dépend de votre mise en page. Vous devez aussi fonde à l'aide d'un masque dégradé de noir et blanc ( le noir vers le bas naturellement) votre image sur la bannière arrière. Ensuite, il faut l'appliquer dans votre site. 

À l'aide de mon autre tutoriel, comment mettre une autre bannière sans mettre des images dans un autre site ( voir un peu plus avant) vous allez placer dans votre gestion de fichier cette nouvelle image.  Vous trouvez le nouvel url de cet image ( comme si vous vouliez changer de bannière) et vous la placer ainsi.

tut4d

Dans apparence, modifier le fichier, sélectionnez et "feuille de style" vous mettez en baground couleur la couleur de votre fond de page si ce n'est déjà fait et ensuite vous ajoutez le "url" de l'image.  Par la suite vous devez absolument écrire no-repeat sinon, votre image se répétera à l'infini tout le long de votre page.  Bien sûr, cela peut aussi donner un autre look, mais votre bannière ne devra pas de fondre dans votre couleur de fond mais bien être traité pour apparaître comme une tuile pour qu'on ne voit pas les raccords..

Voilà, j'espère que ce n'était pas trop ardu.  Si vous avez des question, n'hésitez pas à laisser un ou deux commentaire, j'y répondrai.

Ce tut est une gracieuseté de Frenchgirl

Posté par frenchgirl à 15:53 - 5- Mode avancé - Commentaires [0] - Permalien [#]

Commentaires

Poster un commentaire







Haut de Page