Francis Chouquet Graphiste Lettering

Tutoriels: Créez le design de votre blog WordPress avec Photoshop!

0

photoshop tutos wordpressAprè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 !

43 Commentaires

  • Stoody

    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

  • Thomas

    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…

  • Piixel

    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é !! ^^

  • Piixel

    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 !! 😉

  • Piixel

    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é !!!

  • Très pertinent, mrci pour ce billet 😉 au pasage, qui a dessiné ce super design de blog ?vj’adore 🙂

  • mrbark > Tu veux dire le design de ce blog ?

  • hola francis
    j’ai une question limite hors sujet dans ce post mais bon je tente quand même
    et merci par avance :
    saurais-tu comment faire pour exclure une catégorie de lien de ma sidebar (widgétisée)
    en gros j’ai 3 catégories de liens sur un site wordpress, et je souhaite en afficher uniquement deux dans la liste normale des liens – la 3e sera affiché seule de manière aléatoire (uniquement 5 ou 10 liens sur 50) via le plugin (widget) better-blogroll
    merci merci et encore merci

  • Salut 537 718 oO, (t’es en prison ?)

    Pour exclure des catégories il faut utiliser ce type de fonctions

    wp_list_categories étant lié au « Catégorie » d’articles, peut-être cela existe-t-il pour les catégorie de liens ?

  • Mince, mon code a sauté, je recommence sans les marquages php :

    wp_list_categories(‘exclude=3,12,30,34,35,41,91,82,133′.’sort_column=menu_order&title_li=’);

  • Bonsoir et merci Gilles
    j’ai eu la réponse par maigret (http://www.maigretsblog.com/)
    ça fonctionne avec ça dans un widget texte :
    wp_list_bookmarks(‘exclude_category=9’);
    et non je ne suis pas en prison
    c’est comme ça que je m’appelle

  • Rodolphe

    Salut Francis,

    Tout d’abord >> BRAVO ;o) pour tes superbes tutos sur la création d’un thème WordPress. Moi qui ne comprends pas le php et bien grâce a toi, je commence a le découvrir : Je te remercie.

    J’ai vu que tu a commencé quelques tutos pour la création sous Photoshop : Le reste de ces tutos vont-ils être mis en ligne ou tu es trop débordé pour y consacrer du temps ? (ce que je comprendrais vu le temps que tu dois y passer !!!)

    Merci. A bientôt.

  • Salut

    Dans le prochain numéro du magazine « Web Design », numéro 4 à paraitre fin janvier, il y sera question de WordPress :
    « Comment créer des templates et les mettre en forme pour les utiliser avec WordPress ».

    Sachant qu’un mag ne peut pas se permettre de ne parler que d’un thème unique, ils feront sans doute un dossier de quelques pages et je suis curieux de voir comment (avec les captures qu’ils ne manqueront pas de placer), dans ces quelques pages, ils feront tenir ce que Fran6 à décrit dans un dossier épais comme une cuisse.

    Rdv à la fin du mois.

  • nina

    Auriez vous définitivement abandonné la suite ? la bonne nouvelle c’est que grâce aux tutos précédents, les bases sont solides.

  • Je conseil à ceux qui attende les tuto de photoshop et de la mise en place du design dans wp de regarder déjà plus en avant le coding CSS qui permet déjà de mettre en place 50% de la structure du site : cad : contour, séparation, alignement …

    ensuite je pense que alsacreation est un bon site pour ce qui est de l’intégration de design photoshop, j’ignore si la communauté est encore aussi active que quand j’avais le nez dedans mais c’est du solide , détaillé et surtout expliqué : bouton qui se modifie en css, mise en page d’un design par le CSS … par contre il ne se base pas sur WP mais sur des site lambda.
    C’est toujours une connaissance bonne à savoir et qui est également valable dans WP.

  • Nina > Non, je n’ai pas abandonné, mais je travaille beaucoup et je n’ai pas le temps d’avancer très vite sur la suite des tutos… C’est en cours en tout cas, mais je préfère ne plus donner de dates parce que je ne sais pas quand j’aurai terminé… désolé ! 😉

  • J’ai testé Artisteer et franchement photoshop save My life !

Success, your comment is awaiting moderation.