FOTOTEK	CoCoRoOM	Ange ou démon
TOURNESOL	BLOGG Design	En Test
MCMGM	Bientôt !	J'y travaille

- - - -

HEAVEN	PANTHERE ROSE Junior	Petite Chose
Charmeur Matin	Mon Monde à Moi	zxcv288
Marylin	Le votre !?	Le leur !?
Inscrivez-vous par mail pour ajouter le votre : cliquez-ici

- - - -

:: "Poto" Blogues :

	::Un blog sur le village de "Saint-Tropez". Découvrez le village des corsaires ouvert sur la méditérannée. De belles photos, des articles sur les artistes et expos. Quelques belles vue du village. Je vous conseille également son site : www.saint-tropez.tv

	::Le blog de "Blueshit". Photos et infos web Des trouvailles, des infos, kits design gratuits (templates) pour vos blogs, des photos

	::Le blog de "MiThRa". La vie de Myrtha La belle Mithra vous fait partager ses points de vues, ses pensées, ses goûts, ...

NB : Je ne réponds pas aux questions d'ordre général sur vos bloggs.

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)

Tremblez pas comme ça, vous allez voir, c'est « aveugle » comme façon de procéder, mais efficace.
Je ne vais pas expliquer les CSS (cherchez des tutos sur le web – il y en a plein) mais juste ce qu'il faut modifier pour son design.

:: Allez dans la partie administration de votre blogg sur la partie modifier la mise en page et modifiez votre css.

On va prendre un exemple sur lequel j'ai laissé quelques erreurs de calage pour bien vous faire comprendre la suite. Donc ça sera CoCoRoOm.

Le fond :

Pour infos :
En gras = le contenu de la css
Width = largeur de l'élément contenant l'image et/ou les textes.
Height = hauteur de l'élément.

_________________________________________

body {
background-color : #336600;
}
_________________________________________

on aurait pu mettre une image en fond :
_________________________________________

body {
background-image: url('http://www.temca.net/images/bando.jpg');
}
_________________________________________
Le cadre titre :

#cadretitreblog{
width:740px; (vérifiez qu'il est bien de la taille en largeur de votre image)
height :140px ; (à la taille de la hauteur de votre image)
border: #00FF00; (couleur de la bordure)
border-style: dotted; (style du trait du bord du cadre : hachuré, plein, 3D, etc...)
border-top-width: 1px; (taille du trait « bas » du cadre)
border-right-width: 1px; (taille du trait « droite » du cadre)
border-bottom-width: 1px; (taille du trait « haut » du cadre)
border-left-width: 1px; (taille du trait « gauche » du cadre)
background-color : #003300; (couleur du fond du cadre, vous pouvez mettre une image, remplacez alors par background-image: url('http://www.temca.net/images/titre.jpg';)
text-align:left; (alignement left = à gauche, remplacer par center ou right selon vos critères)
}
_________________________________________

N.B. : Si 0 partout alors pas de cadre

Le cadre sous-titre :

_________________________________________

#titreblog{
width:740px; (= largeur de votre image)
height:140px; (= hauteur de votre image)
border: #00FF00; (couleur de la bordure)
border-style: dotted; (style du trait du bord du cadre : hachuré, plein, 3D, etc...)
border-top-width: 0px; (taille du trait « bas » du cadre 0 = pas de bordure)
border-right-width: 0px; (taille du trait « droite » du cadre 0 = pas de bordure)
border-bottom-width: 0px; (taille du trait « haut » du cadre 0 = pas de bordure)
border-left-width: 0px; (taille du trait « gauche » du cadre 0 = pas de bordure)
color: #333333; (= couleur du texte)
font-size: 47px; (= taille du texte)
font-family: Verdana, Arial, Helvetica, sans-serif; (= police du texte)
margin: 0; (=la marge du cadre par rapport à la fenêtre)
padding:5px; (= la marge entre le texte et le bord du cadre. Vous pouvez moduler en remplaçant par padding-bottom:5px; ou padding-left , etc... Si vous souhaitez plus d'espace à gauche ou à droite du cadre)
}
_________________________________________

En gros :

C'est le même mode opératoire pour tous les autres cadres (thèmes, moblog = Moi, archives, rechercher, etc...)
Retenez que pour mettre une image en fond de cadre il faut ajouter la ligne background-image: url('http://www.); ou remplacer la ligne background-color : #003300; par celle-ci.
Gardez également à l'esprit qu'il faut caler les width et height à la taille de vos images.

La base de travail :

:: Connectez-vous à votre blogg avec votre navigateur internet dans la partie administration.

:: Accédez à nouveau à votre blogg en mode consultation. Modifiez et différenciez par couleurs toutes les parties qui composent votre blogg (titre, sous-titre, moi, thèmes, archives...).
Affichez ensuite le résultat dans votre navigateur (Faites F11 avec internet explorer pour avoir le maximum de surface d'affichage).

:: Puis appuyez sur la touche « print screen » du clavier.
:: Ouvrez THE GIMP.
:: Faites nouveau fichier en 1024x768 (ou de la taille d'affichage de votre écran).
:: Puis faites édition coller.

Vous avez maintenant votre blogg comme image à l'écran.

:: Sauvegardez cette image sous le nom de « base ».jpg (maximum) ou dans le format propriétaire de votre THE GIMP.

:: Ensuite vous allez sélectionner (avec l'outil sélection) chacun des différents carrés que vous souhaitez modifier et les enregistrer sous le nom qui lui correspond (titre.jpg ou .gif pour le tire, sous-titre.jpg, moi.jpg. themes.jpg ET SURTOUT SANS ACCENT .

Dans ces carrés vous allez poser votre relooking dans l'espace de sa taille. Vous pouvez là laisser aller votre imagination en composant votre design, en jouant sur les formes et les couleurs comme sur les contrastes, dégradés, fondus et autre joyeusetés.

:: Après avoir modifié tous les carrés de différentes tailles et trouvé la bonne image pour illustrer votre thème, vous devez recomposer succintement les carrés modifiés en les replaçant sur la page « base » (ils doivent pouvoir recouvrir exactement les carrés de couleur). Vous aurez ainsi une première idée de ce que peux donner votre blogg.

Astuce :
Jouez sur la couleur du fond de la page base pour que ça reste joli à l'œil.

Sachez également que vous pouvez, ensuite, modifier la taille des carrés du blogg en ligne pour les caler à la taille de l'image.

Travaillez au moins le titre, les plus patients feront LA TOTALE.

Le fond :

Recherchez des images de fonds d'écrans sur le web et les récupérer (toujours ce fameux clic droit. Faire enregistrer l'arrière-plan sous... pour la récupération. La fonction enregistrer l'image-sous permet de ne récupérer que l'image.
Gardez à l'esprit qu'un fond se répète à l'infini par défaut (je vous expliquerai plus tard comment bloquer le repeat). Donc il faut que :
- soit l'image de fond a la taille du blogg (la taille 1024x768 est la mini). Mais là ça fait une très grande image bien lourde.
- Ou alors l'image .gif ou .jpg qui se répète ne pèse que quelques ko (comme le fond rayé de « BLOGG Design ») et là ça s'affiche tout de suite (c'est au choix).

EN LIGNE, LES IMAGES !!!

Mettre ses images sur le web :

1) J'ai un hébergement :

Vous devez vous rapprocher de votre fournisseur d'accès pour savoir comment et ou mettre vos images dans le répertoire qui vous est réservé en ligne (c'est souvent expliqué sur la page des abonnés ou en lien sur la page d'accueil). Créez un nouveau répertoire nommé "images"dans votre espace.
Les autres (qui ont déjà un espace web) je vous conseille également de créer un répertoire au nom de votre blogg.
Si votre hébergeur vous donne la possibilité de passer par du FTP (voir avec vos paramètres d'accès pour mettre à jour FILEZILLA ou consorts). Utilisez de préférence cette façon de procéder. Là aussi chacun a sa manière.

2) je n'ai pas d'hébergement :

:: Créez un nouveau thème ou un nouveau blogg dédié pour mettre ces images.
:: Dans l'ajout de texte d'un thème on peut mettre une image (bouton parcourir...), créez un theme par image.
:: Affichez chacunes des images de vos thèmes dans le navigateur. Faites un clic droit dessus et notez l'url dans l'onglet propriétés.

Mettez en ligne toutes vos images qui composent le blogg avant de modifier la CSS.

Les url des images :

Avant d'insérer les images dans votre blogg il faut connaître leur adresse sur le web.
Cette adresse sera de la forme

http://www.temca.net/images/titre.jpg ou .gif

ou

perso.wanadoo.fr/votre_nom/blogg/titre.jpg ou .gif

ou

http://www.blogg.org/afficher_image.php?id=21452&img_x=

(pour ceux qui auront leurs images hébergées par blogg.org)

:: Tapez dans votre navigateur l'adresse des images que vous avez mis en ligne.
:: Ouvrez le bloc-note de windows et copiez y toutes les adresses.

Exemple :
http://www.temca.net/images/titre.jpg
http://www.temca.net/images/sous-titre.jpg
http://www.temca.net/images/themes.gif

Ensuite tout ce passe dans la CSS

Suite dans :: LA CSS (Cascding Style Sheet – Feuilles de Style en Cascade) ::

Pour les rapides :
Voir le résultat final : cliquez-ici

LE TITRE :

Définissez dans THE GIMP une taille d'image de fond de 150px de haut maxi et toujours 740px de large (pour vous faire une idée de ce que donne un titre de 150x740 px cliquez ici).

Dans l'espace de l'image créez votre design : rajoutez des images, faites des fondus, des carrés de couleurs, jouez sur le n&b des différents éléments. Mettez des courbes, des caractères webdings agrandis, enfin, lâchez-vous quoi...Enregistrez votre travail graphique dans le répertoire dédié de votre disque dur.

:: Ouvrez la partie administration de votre blogg et dans la mise en page affichez la css

:: Modifiez la partie cadre du tire en adaptant les tailles widht et height à la taille de votre image et en changeant l'adresse (url:) vers votre image
NB : Si vous oubliez un ";" ou "{ et }" ça ne marchera pas.

#cadretitreblog{
width:740px; (taille en largeur)
height:92px; (taille en hauteur)
background-image: url('http://www.temca.net/images/titre.jpg'); (adresse de l'image)
border: #FFFFFF; (couleur de la bordure du cadre)
border-style: groove; (style de trait du cadre : hachuré, plein, 3D,...)
border-top-width: 0px; (épaisseur de la bordure du bas du cadre) -> NB : 0 = pas de cadre
border-right-width: 0px; (épaisseur de la bordure droite du cadre)
border-bottom-width: 0px; (épaisseur de la bordure du haut du cadre)
border-left-width: 0px; (épaisseur de la bordure gauche du cadre)
background-color : #999999; (couleur de fond du cadre)
text-align:left; (alignement du texte on peut mettre right ou center)
}

:: Modifiez également le titre pour le caler à la taille de votre image :

#titreblog{
width:740px;
height:92px;
color: #333333; (couleur des caractères)
font-size: 47px; (taille des caractères)
font-family: Verdana, Arial, Helvetica, sans-serif; (police de caractères)
margin: 0; (marge par rapport au bord de l'écran)
padding:5px; (marge à l'intérieur du calque on peut moduler en mettant padding-bottom:4px; ou padding-top:4px; ou padding-left:4px; etc...)
}

LE SOUS-TITRE :

Il doit également faire 740px de large, ne dépassez pas les 30px de haut.

Soyez créatifs dans l'espace de travail, mais souvent laissez-le assez neutre, ou mettez la partie qui manque à l'image du TITRE.

:: Modifier la css :

#soustitre{
width:740px;
height:92px;
background-image: url('http://www.temca.net/images/bando.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;
}

Toutes seront à modifier selon le même principe. Pour vous accompagner encore un peu (c'est l'heure d'aller ce coucher là...) on va en faire une qui servira de base aux autres :

LES THEMES :

Selon la taille (en largeur = width) de votre partie THEMES (info que vous trouverez dans la partie modifier css : faites défiler les lignes de codes jusqu'à trouver ça : #themes et en dessous il y width=245px par exemple qui vous dit que ça fait dont 245 px de large.

:: Soit vous modifiez pour caler à votre image de fond,
:: soit vous modifiez le fond pour le caler à la css.

Pensez qu'un fond se répète à l'infini (sauf si on lui dit de pas le faire « norepeat ») donc la hauteur (height=200px ;) est à caler aussi et le graphisme derrière également (si la liste s'allonge trop : l'image va se répeter). Si la partie THEMES est plus grande que l'image, cette image va se répéter à gauche ou à droite et peut-être en dessous.

#themes{
width:246px;
height:180px;
color: #000000;
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;

}

EN RESUME.
La taille des images doit être à la même taille que les parties qui les contiennent.

La base :

Vous avez défini les couleurs des différentes parties qui composent votre blogg, la couleur du texte, des liens etc, ou vous avez celles par défaut.
Le but premier est de délimiter à l'écran toutes les parties qui composent votre blogg (titre, sous-titre, moi, thèmes, archives,...). Pour ce faire donnez une couleur différente à chacune de ces parties à l'aide du panneau administration de blogg dans la section mise en page.

:: Comment ça marche au juste :
Vous avez certainement déjà fait du photo-montage à l'école. Ben là c'est pareil !. Imaginez des carrés de calques superposés et organisés à l'écran en plusieurs cadres. Il y a un calque pour chaque partie qui compose votre blogg.
Le principe est de mettre une image sous les textes du blogg. Le calque de fond des cadres sera donc une image sur laquelle viendra se superposer le calque des textes. Simple non (comment n'y avez-vous pas pensé plus tôt !?).
Pour ne pas saouler tout le monde on ne va modifier que les principaux (ça sera déjà pas mal). Vous allez donc modifier tous les cadres suivants :

:: 1) Le fond (l'arrière plan ou body)
:: 2) Le « titre »
:: 3) Le « sous-titre »
:: 4) Le « moi »
:: 5) Le « thèmes »
:: 6) Le « post » (c'est à dire la partie ou vous tapez tout le texte des thèmes)
:: 7) Les « archives »
:: 8) Le « blogg roll »

Vous n'êtes pas obligé de tous les modifier et de ne choisir que de mettre un cadre à jour (par exemple : Heaven qui a choisi de modifier seulement le cadre « titre ».

Allez on y va ? :
Ok mais me direz-vous je commence par quoi ?.

Par imaginer et définir le nouveau look de votre blogg.
Vous manquez d'idées : Le plus simple est de faire un tour sur le web des autres sites qui ont un look qui vous plait pour s'en inspirer (sans copier non plus) et les mettre dans vos favoris pour y revenir facilement quand vous commencerez à modeler votre design.

Astuce : Faites un print-screen pour récupérer les visuels ou un clic droit sur les images puis enregistrer sous... dans le répertoire dédié sur votre disque dur.

Si vous avez déjà votre idée (BRAVO ! vous avez gagné plusieurs heures à vous torturer l'esprit).

Allez on commence :

D'abord il faut créer les images de fond des cadres. Pour ça : y a pas tortiller du « u » pour iech droit ! Il vous faut un programme de retouche d'image. Ca commence mal pour certains, ils n'en ont pas. Soyez pas déçu, il en existe un super et GRATOS !!! pour les autres (ceux qui ont photoshop, paintshop pro, photo impact, etc...) lisez plus bas.
Vous pouvez télécharger ici le prog gratuit de retouche d'image THE GIMP. Je ne vais pas vous expliquer comment marche ce logiciel car ce n'est pas le but de ce blogg et de plus tout est expliqué dans le site vers lequel vous renvoie ce lien.

Ca y est, tout le monde a son prog de retouche d'image !? tout le monde sait à peu près ce qu'il veut faire !? Bien, allez on continue.

Un design pas à pas :

D'abord les sources. C'est quoi les sources ? ce sont les images (dessins, logos, photos, traits stylisés, barres, dégradés de couleurs, etc...) qui vont composer l'image. Ces sources on les trouve partout sur le web (attention aux droits d'auteurs !) ou alors vous les créez vous même. Mais il existe suffisament de sites avec des ressources gratuites (et à dispo) sur le net pour trouver ce que vous voulez.
Enregistrez sur votre disque dur les sources que vous aurez trouvé ou créé dans le répertoire « mon_blogg »

On va préparer l'image du cadre titre.

Pour faire simple je vais appeler THE GIMP tous les progs de retouche d'images quels qu'ils soient (photoshop, paintshop pro, photo impact, etc...), donc quand je parlerai de THE GIMP il faudra comprendre « votre programme de retouche». C clair 4 everyone ?

Les images :

Avant toute chose, veillez au poids. Soyez le weight watcher de votre blogg !. Formats .jpg et . gif (n'oubliez pas que le .gif peut être animé !). Mais gardez à l'esprit que plus l'image sera lourde (+50 ko) plus elles mettront du temps à s'afficher. Prévoyez de 25 à 40 ko pour l'image du titre. Et de +ou-5 à 15 Ko maxi pour les autres. Cela permettra un affichage rapide de votre blogg.

Suite dans :: RELOOK RAPIDE :: ou dans :: RELOOK MANUEL ::

:: 1) Ce qu'il vous faut avant toutes choses, bien évidemment, c'est créer un blogg ou en avoir déjà un. C'est fait ? Vous avez le blogg, c'est très bien ! on passe à la suite, sinon vous savez ce qu'il vous reste à faire... Mettez le blogg en largeur fixe de 740px.

:: 2) + Un logiciel de retouche d'image pour créer votre nouveau design (photoshop, paintshop pro, photo impact, etc... mais pas paintbrush !). Pour ceux qui n'en possèdent pas je vous conseilel THE GIMP (très performant et gratuit)

:: 3) + Créer un répertoire au nom de votre blogg sur votre disque dur (qui servira de récipient à tout ce qui concernet votre blogg.

4) + Mettre ses images en ligne : Soit dans votre blogg dans un thème dédié pour l'hébergement des images. Soit avoir un espace web (gratuit ou non ) pour mettre vos images en ligne. Sachez cependant que la plupart des fournisseurs d'accès vous offrent quelques mégas dans votre espace personnel.

:: 5) + (pour ceux qui peuvent passer par FTP pour poser leurs images en ligne) : Un logiciel de transfert FTP. Pour ceux qui n'en possèdent pas je vous conseille FILEZILLA (Ver 2.1.3.a par exemple, facile d'utilisation et gratuit)

:: 6) Modifier votre fichier CSS à partir du module d'adminstration de votre blogg dans la partie « modification de mise en page » en cliquant sur « modifier CSS »

:: 7) De l'imagination, du goût, du temps

Suite dans :: On commence ::