:: L'exemple TOURNESOL ::

J'ai créé le blogg TOURNESOL (cliquez ici pour voir le résultat final) pour l'application de ce qui a été expliqué précédemment.
Relooking du blogg à partir d'une seule image perso (photo en grand format à la base : 1280x960) dans laquelle j'ai re-cadré pour créer les 3 images qui composent le blogg.

:: PROCEDE (comme indiqué sur l'image) :

1) Recadrage de l'image du titre dans la photo initiale puis mise au format 740px de long sur 150px de haut. Modif de l'image en appliquant un contour plus net et en jouant sur les réglages de couleurs, contraste et luminosité.

2) Recadrage de l'image du sous-titre juste en dessous du cadre titre. Format 740px de long sur 24px de haut. Modif de l'image par ajout de flou.

3) Détourage (découpe) du tournesol du milieu et copie de la découpe dans un nouveau fichier à fond blanc d'une taille de 245px de long sur 150px de haut.
Mise à la taille de la fleur dans le nouveau fichier à fond blanc.
Désaturation de la fleur (noir et blanc) et mise à 50% d'opacité.

:: Enregistrement au format web (.jpg ou .gif) en vérifiant que la taille du fichier définitif ne soit pas trop lourde (jouez sur la compression à l'enregistrement). Pour l'exemple de tournesol, l'image du TITRE pèse 40ko – l'image du SOUS-TITRE pèse 6ko – l'image des THEMES pèse 8ko.

4) Mise en ligne des images puis recopie des url

5) Accès à la partie admin de mon blogg et modif de la CSS

6) Modif des parties #cadretitreblog - #titreblog - #soustitre - #themes

:: Le cadre qui contiendra l'image du haut

#cadretitreblog{
width:740px;
height:150px;
background-image: url('http://www.temca.net/images/titre_toursesol.jpg');
border: #FFFFFF; (bordure blanche)
border-style: groove;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
background-color : #ffffff; (fond blanc)
text-align:left;
}

:: Le cadre qui contiendra le tire texte TOURNESOL

#titreblog{
width:740px;
height:150px;
color: #ffffff;
font-size: 43px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding:5px;
}

#soustitre{
width:740px;
height :24px
background-image: url('http://www.temca.net/images/sous-titre_toursesol.jpg');
color: #FFFFFF;
font-size: 17px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: #FFFFFF;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
background-color : #333333;
text-align:left;
margin: 0;
}

:: Le cadre qui contiendra les Thèmes :

#themes{
width:245px;
height:150px;
background-image: url('http://www.temca.net/images/themes_toursesol.jpg');
color: #000000; (couleur du texte du sous-titre)
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
margin-bottom:3px;
border: #000000;
border-style: solid;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
text-align:left;

}

Et hop, voilà, c'est à vous ! Et votre TOURNESOL sera en ligne... Bonne chance.

Chris (FOTOTEK)