Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
1 mars 2006 3 01 /03 /mars /2006 17:37

BUG SERVEUR> ce tutorial est en maintenance.
Il n'est pas consultable pour l'instant, désolé..

 

Mettre un fond pour un blog ou pour des articles les agrémente souvent et leur donne de la "couleur"

Il y a 3 solutions :

     Mettre une couleur unique (par exemple le noir css=#000000)
     Mettre une "image" un peu comme un fond d'écran
ou créer une "architecture" graphique intégrée complètement  au blog pour qu'on ne distingue plus de différence entre les articles et le fond du blog..

Je visite cette solution grâce à PHOTOSHOP et vous livre ici un petit tuto facile mais qui peut vous créer un "tilt" pour votre esprit créatif.

EXEMPLE :
Créer un fond d'article de la même couleur
que le fond d'un blog (couleur gris clair du forum d'OB)
afin de donner un effet de toile déchirée et rivée directement sur le blog
.

Première chose -> acquérir les couleurs réelles du blog :
(ce procédé est inutile si vous connaissez les codes couleur css exacts
)

1) ouvrez votre blog et appuyez sur la touche [Impr écran] de votre clavier.
2) Dans votre css, notez la valeur de largeur des articles, vous en aurez besoin..
3) ouvrez PHOTOSHOP et ouvrez un nouveau document blanc
4) dans ce nouveau document, faites [Ctrl + V] pour coller votre "cliché" écran...

Et voilà, votre blog apparait sur photoshop en mode image !

Maintenant :

Une fois que c'est fait...

      

                

Note Importante : le nouveau document que vous ouvrez doit systématiquement avoir la taille en largeur égale au nombre de pixels définis dans le CSS.
 Ceci afin de "caler" parfaitement le fond de la façon dont vous le créez sous photoshop.

Une fois votre document "rempli" de la couleur de fond , vous pouvez commencer à vous "lacher" graphiquement :

Pensez au style css de votre article :

 si vous avez une marge gauche et droite définie en pixel (margin, padding etc.) tenez en compte pour, qu'une fois que le fond sera en place, votre texte ne chevauche pas des tracés ou des formes sombres génant la visibilité..

Ci dessous, deux petits montages pour que vous compreniez bien la manip :

 

 

 

 

 


 Ici, par exemple, la taille du blog est égale à 1024 px
mais mes articles font 600 px de large.
Mon fond doit donc faire 600 pixels pour être parfaitement centré sur l'article

 

 

 

 

Voilà, un visuel un peu différent : un fond graphique blanc d'article sur un fond gris du blog.. votre article est mis en valeur automatiquement !

si le fond était blanc, vous auriez un léger effet de relief qui serait trés sympa aussi !!

c'est à vous maintenant. si vous avez besoin d'autres éléments, laissez moi vos coms !

Partager cet article

Repost 0

commentaires

voyance par mail gratuite 31/03/2016 17:18

Merci pour ce très bon site, vraiment un panaché de bonnes et intéressantes idées. Surtout continuez ainsi. Bon courage
Cordialement .

sabine 26/03/2006 03:15

Coucou Dom,Ca fait longtemps? Comment vas tu ? Bien j'espère ! Dans l'attente de te lire je te dis à très bientôt.Sabine

:0007: fotoframboise 25/03/2006 22:56

Bonjour, je suis fachée après OB,
Vous avez eu l'extrême gentillesse de venir me rendre visite sur mon nouveau BLOG PHOTOS hébergé depuis hier sur la nouvelle plateforme Alice-Over-Blog.Comme vous l'avez sans doute constaté OB a eu encore des problèmes aujourd'hui et la plupart des photos ont disparu de nos blogs. Ce soir la majorité d'entre elles ont été récupérées, mais pas toutes.... et encore moins le seul blog de leur nouvelle plateforme : je crois qu'ils ont assez de travail avec l'ancienne pour se préoccuper de la nouvelle.Dans ces conditions j'ai pris mon courage à deux mains et viens de transporter ce nouveau blog sur notre plateforme OB habituelle. Heureusement j'avais des sauvegardes ...Voici l'adresse définitive : http://fotoframboise.over-blog.comMerci à vous et à bientôtFramboise

Jay 25/03/2006 16:45

Super ce tuto ^^ voila de quoi améliorer le design de mon blog (qui n'en a carrément pas ^^') C'est que je comprend rien au CSS mouaa XD XD XD !

Jay 25/03/2006 16:44

Ah super ce tuto ^^ voila de quoi améliorer le