Après la création des templates pour un thème Wordpress et les tutoriels sur le référencement pendant l’été, il est temps d’aborder toute la partie design du blog. Comment réaliser son propre design de blog ?
Comment l’intégrer ensuite au code ? Ce sont tous les aspects que nous allons aborder dans les prochaines semaines avec cette nouvelle série de tutoriels largement tournés autour de Photoshop et de l’intégration XHTML et CSS. Ainsi, ces tutos vont s’organiser autour du schéma suivant:
1. Création d’une première maquette papier,
2. Création d’une première maquette sur Photoshop,
3. Elaboration du design en fonction des besoins, des envies, des possibilités et du rendu,
4. Validation finale de la maquette,
5. Découpage de la maquette en vue de l’intégration,
6. Intégration XHTML de la maquette dans les templates,
7. Intégration CSS de la maquette.
8. Ajustements et validation sur différents navigateurs.
9. Mise en ligne du nouveau design du blog.
Bien sûr, tous ces aspects vont représenter plus d’un tutoriel pour chaque point, mais ça vous donne déjà une trame afin de mieux comprendre les différentes étapes de la réalisation d’un design de blog.
Bien entendu, on partira d’un design que j’ai personnellement réalisé. Ce sera un design très simple pour commencer, et par la suite, une fois l’ensemble de ces points abordés, on reviendra sur différents aspects plus complexes mais très intéressants pour customiser un peu plus votre blog. Disons que ce que nous allons voir est la base, et qu’ensuite, on pourra aborder des sujets un peu plus “pointus”.
De quoi avez-vous besoin pour suivre ces tutoriels ? Tout d’abord, il est important que vous ayez suivi les tutoriels sur la création d’un thème pour Wordpress, et que vous ayez bien compris comment fonctionne un blog sous Wordpress. Il vous faut donc de bonnes bases en XHTML et CSS. D’ailleurs, à ce sujet, j’ai écrit un article la semaine dernière où je vous conseille plusieurs livres consacrés aux feuilles de style. Enfin, vous allez avoir besoin de Photoshop. Vous pouvez également utiliser Gimp mais la manière de travailler sous les deux logiciels reste tout de même assez différente.
Comme pour les précédents tutoriels, cette page sera mise à jour au fur et à mesure de la rédaction des articles. Ceux que vous verrez ci-dessous sont ceux qui seront déjà en ligne. Pour recevoir les suivants, rien de plus simple, vous pouvez vous abonner au blog de différentes manières.
OK ? Donc, je vous donne rendez-vous dans les prochains jours pour les premiers tutos. Attention, la créativité risque d’être au rendez-vous !! 
Tutoriel n°1: Tout commence avec un croquis !
![[]](http://m3.moostik.net/img/?pseudo=fran6art&option=invisible)
Très bonne nouvelle !
Est-ce que de très bonne compétences dans l’utilisation de Photoshop sont-elles obligatoirent à avoir, ou connaître la base suffit pour nous permettre de créer un design potable ?
Non non, pas besoin d’avoir de grandes compétences en Photoshop, tant que tu connais les bases, le système de calques et la palette, le reste suivra !
Je n’ai pas encore tout lu ta première série de tutoriaux pour créer son thème wordpress mais je suis déjà impatient de lire cette nouvelle série !
je dis bravo pour le formidable boulot fait précédemment avec les deux séries de tutoriels, et encore bravo pour ce qui va suivre
je suis impatient de lire la suite parce que c’est ce dont j’ai besoin en ce moment
Est ce que ça peut s’adapter aussi à Dotclear 2?
J’étais justement en train de finir un projet sous photoshop et je me posais la question de l’intégration sous wordpress …. Excellente nouvelle ! J’ai commencé le design , il est en ligne à cette adresse http://arthurmonnet.com/fw Peux-tu me dire si il sera possible de l’intégrer sous wordpress …
Merci d’avance et Félicitation pour tout ton travail !
JFMichaud > Toute la partie Photoshop ne posera, bien entendu, aucun problème. Ensuite, pour l’intégration, ce sera différent, puisqu’on n’est pas sur la même plateforme, mais pour avoir utilisé Dotclear, ce n’est pas si différent que ça. Il faudra placer les balises aux bons endroits, et ensuite les CSS seront les mêmes ou proches de celles de Wordpress. Donc, pas tant de différences que ça !!
Arthur > Il me semble que tu m’as contacté pour ce design c’est ça ? Désolé mais je n’ai pas encore eu le temps de te répondre…
Oui, ça ne posera pas de problème, sauf que les rayons ne feront pas très beaux… Je te conseillerais plutôt de les faire en dégradé pour qu’ils arrivent à la couleur du fond à leurs extrémités…
Oui j’y avais pensé ^^ En revanche en ce qui concerne la barre de recherche placée en haut à doite posera t’elle des problèmes ?
C’est Romain qui va être content ! Je me dit que je pourrais aussi m’y mettre. Bon on essayera de prendre je temps.
Felicitations,
Quelle bonne idée!!!
Je suis très impatient de voir ce tuto. Le sommaire est très sympa et je vais deja refléchir à ma maquette sur papier.
Bon courage pour la réalisations de tes futurs articles
Aaah génial !! ça va être vraiment sympa.
J’ai déjà pas mal d’idées de design.
Personnellement j’utilise fireworks 8, mais les possibilités sont quasi identiques.
allez - c’est dur d’attendre la suite avec tant d’envie
merci encore fran6
Toujours pas trouvé mon bonheur ailleurs (en tout cas pas en français) - Fran6 ne nous laisses pas tomber !
537718 > Désolé pour ce retard lamentable… Je suis bloqué depuis plusieurs mois sur un projet qui me prend trop de temps. Il devrait prendre fin rapidement… d’ici 2 à 3 semaines…
Allez Francis STP, la suiiiiite ! lol Cela fait 7 mois et demi que j’attends !!!!
Piixels > Ca vient !! Je crois que je vais en faire mes tutos de l’été !! ^^
Francis > Tu veux pas les faire avant lol ou n’aurais tu pas des sites comme de tutos ? Tu as bien le seul blog traitant en globalité de ce sujet et c’est tout en ton honneur !!!!
Piixel > En fait, j’avais prévu de sortir la nouvelle série de tutos il y a quelques semaines mais je termine en ce moment un projet pour un blog sous WordPress qui va reprendre pas mal de techniques très utiles. Je vais donc l’utiliser comme support. Le projet devrait voir le jour début Juillet, donc les tutos devraient suivre !!
Francis > Alors là ça me rassure !!! Content que tu n’oublies pas tes fidèles lecteurs !!! On l’attend tous !!! Bon courage en tout cas, tu dois être débordé !!!