• :: Relook Rapide ::

    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.


    votre commentaire
  • :: On commence ::

    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 commentaire
  • :: Pré-requis ::

    :: 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

    </font />

    Suite dans :: On commence ::


    votre commentaire
  • :: BLOGG Design ::


    Préface de Chris :

    Je n'ai pas la prétention de vous apprendre à faire de beaux design au travers de ce blogg. Je vais juste vous expliquer comment modifier l'aspect de votre blogg avec vos créations. Ainsi peu importe que ce soit un drapeau à damier qui compose l'image du titre ou un truc hyper designé.
    En résumé vous ne trouverez ici que la façon de procéder et non pas un cours sur le design de site (il y a assez de tutoriaux sur le web concernant le design et/ou l'utilisation de vos programmes de retouche d'images pour ne pas en rajouter).

    :: Quelques exemples de blogg que j'ai revu :

    FOTOTEK – CoCoRoOM – Ange ou démon – BLOGG Design - TOURNESOL

    :: Ils ont relooké leur blogg :

    HEAVEN - ?? - Le votre -

    Inscrivez-vous par mail pour ajouter le votre : cliquez-ici

    Suite dans :: Pré-requis ::


    votre commentaire