Francis Chouquet Graphiste Lettering

de Photoshop à WordPress #1: le croquis, première partie

0

Update: plutôt que d’écrire un nouvel article sur le croquis, je préfère réactualiser celui que j’avais déjà écrit il y a pas mal de temps mais qui est toujours d’actualité. Qui plus est, je ne suis pas sur que beaucoup d’entre vous l’aient lu donc le voici mis à jour et republié à la date d’aujourd’hui avec les commentaires d’origine que je vous invite à venir compléter ! 😉

Nous allons donc commencer une nouvelle série de tutoriels pour apprendre à créer soi-même le design de son blog. Ces tutos vont être sensiblement différents de ceux que l’on a pu faire jusqu’à présent parce qu’ici, on va faire appel surtout à la créativité et à un brin de marketing. Donc, pendant plusieurs articles, on ne parlera que très peu technique, et quelque part, je dirais tant mieux, parce que le côté créatif de la chose est certes beaucoup plus subjectif, mais c’est aussi de là que vient tout l’inspiration et c’est à partir de ça que l’on créera un design qui nous ressemble.

Alors, bien sûr, on va suivre une trame que j’aurai défini. Cette trame est calquée sur ma manière de travailler et de voir les choses. Je viens d’un univers artistique et créatif. Je vous montrerai donc comment je perçois la créativité. Ca peut être vraiment différent d’une personne à une autre, et d’une compétence à une autre. Un designer pense souvent très différemment que le développeur. Et ce, parce que nous avons appris les choses également de manière différente. Donc, ce que j’exposerai ici n’est pas forcément à suivre à la lettre. A vous de trouver le terrain qui vous convient le mieux. Je ne dis pas que ce que j’expose ici est la meilleure méthode qui soit. Elle est juste celle qui, pour moi, permet le mieux à la créativité de s’exprimer. Et certaines étapes, comme celle du croquis, font parties de ce processus.

Commencer le design de son site web sur son ordinateur, c’est comme construire une maison en commençant par le toit !

Ce n’est pas moi qui le dit, mais le célèbre designer Jason Santa Maria. Ne touchez pas encore à Photoshop. C’est trop tôt. Photoshop est un formidable outil qui va vous aider à mettre en pratique vos idées, et vous permettre de les perfectionner, mais commencer directement va tout de suite vous mettre sous la contrainte. C’est pour ça qu’il est toujours mieux de commencer avec un morceau de papier et un crayon. Et comme l’a dit un jour un autre designer, Jeff Croft, « tools do not a designer make« . Je vous conseille d’ailleurs de lire son article. Je ne suis pas entièrement d’accord avec ce qu’il dit mais certaines vérités sont criantes !

Alors, comment va-t-on procéder ? Et bien, ce n’est pas très difficile. Réfléchissez déjà à ce que vous voulez faire. Voici quelques questions à se poser:

  • Je veux un blog pour faire quoi exactement ? Blog perso ? web 2.0 ? Politique peut-être ? Bien savoir ce que vous voulez faire va vous aider à savoir quel type de blog vous allez faire.
  • Ai-je besoin d’un blog 1 colonne ? 2 colonnes ? 3 colonnes ?
  • Placement de la ou des sidebars à gauche ? à droite ? de chaque côté ? 2 à droite ?
  • Largeur du contenu ? Large ? Etroit ? Idem pour la ou les sidebar.
  • Et mon header ? Haut ? Visible ? Lumineux ? Fin ? Idem pour le footer
  • Une barre de navigation ? Je la place où ? Et la fonction « recherche » ? Est-ce que j’en ai besoin ? En haut ? A gauche ? A droite ?

J’ai lu il y a quelques jours un excellent article qui parlait de l’orientation de la lecture d’un site web. Par exemple, et pour vous donner une « référence » artistique, une peinture se « lit » d’en bas à gauche, vers le haut à droite. Donc, en gros, si vous voulez impressionner ceux qui regardent vos peintures, créez un visuel de couleurs qui va aller graduellement d’une couleur à une autre, en suivant cette ligne.

Pour ce qui est des blogs, c’est plus simple et plus logique, puisqu’on suit le sens de l’écriture. Donc, on va lire d’en haut à gauche, vers le bas à droite. Donc l’information doit se « diluer » progressivement vers le bas et vers la droite.

C’est pour ça que l’on trouve le titre et la description du blog en haut à gauche. Ensuite, en descendant, on trouve le contenu et ainsi de suite. L’auteur donc de cet article propose une façon simple d’aborder cette organisation:

Identité du site > Sections > Header de la page > Contenu > liens

En ce qui concerne nos blogs, je dirais plutôt quelque chose de ce genre-là:

Identité du blog > Navigation (Sections) > Header > Contenu > Sidebar (Liens) > Footer

Donc, maintenant qu’on voit globalement comment devraient s’organiser notre blog, et si on commençait un peu à dessiner ?

Un papier, un crayon et une gomme, y a rien de mieux !

Finalement, la créativité ne tient à pas grand chose non ? Il va juste falloir réussir à faire les premières lignes. Les autres suivront sans aucun problème. Laissez votre inspiration vous guider. Ca n’a pas besoin d’être parfait, ce n’est qu’un croquis, qu’une première idée.

Ici, on est très loin de la technique et bon nombre de personne ont tendance à zapper ce côté « ludique » et créatif pour attaquer directement la maquette sur Photoshop. C’est pour moi une erreur. L’étape du croquis est libre de toute contrainte technique. Elle doit être prise comme une sorte de brainstorming. C’est le moment où l’on couche les premières ideés.

Pour commencer, vous allez dessiner une esquisse de la page d’accueil. Bien entendu, si vous n’y faîtes pas apparaître grand chose d’original, ce croquis n’aura pas grand intérêt. Essayez donc justement d’être un peu plus créatif sur certaines parties du blog comme l’entête, le fameux « header ». Pourquoi ne pas y prévoir une image ? Et vous allez placer votre barre de navigation à quel endroit ? Au dessus du titre du blog ? entre le titre et le contenu ? Vous verrez rapidement qu’un croquis n’est pas uniquement là pour faire un schéma d’ensemble du design de votre blog mais aussi et peut-être surtout pour en dessiner certains aspects. Donc, laissez vous aller à un peu de créativité !

Si vous arrivez à un truc comme ça, vous n’allez pas en tirer grand chose… 😀 :

croquis.JPG

L’inspiration est partout. Pensez à toujours avoir un carnet et un crayon avec vous, ça peut servir!

Là, je prêche un peu ma paroisse mais je vous jure que vous pouvez avoir des idées à n’importe quel moment, en voyant n’importe quoi, n’importe où. Donc, un stylo et un papier vous sera toujours utile. On peut avoir une idée à n’importe quel moment. Alors, « couchez-là » avant qu’elle ne disparaisse. L’inspiration peut donc être à chaque coin de rue…. mais aussi et surtout sur le web !

Passez un maximum de temps à gauche et à droite pour découvrir de nouveaux sites web. Pas forcément besoin que ce soient des blogs. N’importe quel design de site web peut vous inspirer. Et là encore, le carnet vous aidera, ainsi que Delicious !! 😉 Je vous donne donc quelques sites de référence qui ont justement pour but de référencer les plus belles réalisations sur le web:

  • We Love WP, galerie de blogs sous WordPress et aux designs uniques,
  • Logopond, si vous souhaitez créer un logo,
  • Most inspired, qui regroupe les meilleures galeries de design web,
  • Unmatched style, autre site proposant les plus beaux designs de sites web,
  • CSSleak, le petit français de la bande !

Déjà, avec ça et votre inspiration personnelle, vous devriez pouvoir vous amuser pour un petit moment…

Alors, bien sûr, vous allez me dire que tous ces designs sont superbes, mais que vos compétences en Photoshop ne vous permettront pas d’arriver à un tel résultat ! C’est pour ça que je vous ai dit plus haut de ne pas commencer en travaillant directement avec Photoshop. Si vous ne maîtrisez pas bien l’outil, vous allez freiner votre créativité. Ici, on cherche des idées, originales si possible. Restez ouvert à tout et laissez votre imagination s’exprimer, sans contraintes techniques.

Donc allez-y, griffonnez, surfez, explorez ! Exprimez-vous !

Il existe également des applications ou de sites web qui vous permettent de prendre des instantanés ( « screenshots » ) de pages web et de les garder dans un coin pour vous aider à trouver l’inspiration le jour où vous allez vouloir dessiner un site web. Comme site, il y a le très connu Scrnshots.com où vous pourrez stocker tous vos screenshots. En applications, il y a le très bon LittleSnapper sur Mac OSX qui vous permet aussi de partager vos découvertes via FlickR ou leur site propre, QuickSnapper.

Screenshot de mon LittleSnapper avec de jolis sites !

Screenshot de mon LittleSnapper avec de jolis sites !

Enfin, je vous conseille ces deux articles en anglais qui vous donneront quelques exemples de croquis mais qui aussi vous apprendront à mieux tirer profit de ce temps passé à griffonner:

Donc, cherchez l’inspiration partout où elle se trouve. Pour le moment, ne vous limitez pas techniquement, que ce soit par rapport à vos compétences en Photoshop ou en WordPress. Laissez votre créativité s’exprimer et trouvez une manière originale d’afficher votre header, votre footer, les titres de vos articles, ou encore vos commentaires !

Dans le prochain tutoriel, je vous montrerai des exemples précis de croquis que j’ai fait pour différents sites mais aussi pour le thème que l’on va réaliser ensemble ici ! Rendez-vous donc au prochain numéro et d’ici là, n’hésitez pas à poser vos questions, et à montrer vos croquis ! 😉

100 Commentaires

  • Hey Francis !
    T’as pas le droit de nous planter comme ça !
    Tes tutos sont excellents ! Je t’en prie, continue !
    A très vite.

  • … à moins, Francis, que ce long guide en ligne prenne fin « à cause » de la sortie de votre livre qui traite du même sujet, entre autre ?

  • Guillaume > Non, le fait que je n’ai pas continué les tutos n’a rien à voir avec le fait que le livre traite en autre du même sujet. Par contre, il est clair que la rédaction du livre a eu un impact sur la rédaction des tutos. Je l’ai déjà dit 10000 fois sur le blog, mais les tutos vont revenir prochainement, il faut juste que je trouve un peu plus de temps à y consacrer…

  • désolé Francis, je ne voulais pas paraître agressif 🙁 Je n’ai pas lu tous les commentaires des étapes précédents en plus.
    Il est évident que t’as pas que ça à faire 🙂 Me voilà rassuré !
    A très vite

  • Je reviens régulièrement sur ce site (bookmarké depuis bien longtemps) moi qui ne suis pas graphiste (mais je me soigne). Merci Francis pour tout ce temps passé à rédiger des billets qui nous sort de la face newbie de la force.
    Padawan en devenir Maître Jedi
    😉

  • Un plugin firefox pour créer son template à la mano : http://www.evolus.vn/Pencil/

  • Atmoz

    Tèrs bon tuto, j’avais hâte que cette série commence réellement.
    J’espère juste que tu trouveras le temps pour nous donner la suite 🙂

  • Atmoz > Disons que je ne vais pas me mettre de pression inutile, et tout sera plus simple… Je ne peux pas promettre que ce sera très rapide, mais je vais uniquement me focaliser sur ces tutos pendant quelques mois je pense… La première série avait duré plus de 3 mois et pourtant j’avais pas chômé… 😀

  • Merci pour cette série de tutoriels qui s’annoncent passionnante. Pour ce qui est du logiciel de traitement de l’image, personnellement j’utilise Paint Shop Pro Ultimate depuis des années et dans notre société nous faisons tout notre graphisme avec ce logiciel qui est beaucoup moins onéreux et largement suffisant (quitte à faire grincer les dents des puristes). Francis, vous faites allusion à un article sur le sens de lecture, avez-vous noté son adresse car je serais intéressé par les arguments utilisés (c’est pour un projet d’école) ? Merci beaucoup et bon courage pour faire face à toutes vos activités.

  • Pierre > Et bien justement, en mettant cet article à jour, j’ai recherché cet article dont je parle mais sans pouvoir remettre la main dessus… désolé… 😉 Et pour ce qui est du logiciel à utiliser, personnellement, je bosse sur photoshop mais je ne suis pas figé sur cette solution. Le principal est de trouver son bonheur, et celui-ci passe par PSP tant mieux !

  • Merci Francis pour cette nouvelle série de tutoriaux…

    Pour les macophiles, une solution moins onéreuse que PShop, c’est Pixelmator…

  • Jean-Pierre > J’ai pas pris le temps de l’essayer encore… Ca vaut le coup pour le webdesign ?

  • Très bonne idée cette série de tutoriels, bravo et bonne continuation 😉

  • Je viens rajouter à la longue lithanie. merci Fran6 pour tes tutos et moi aussi j’attends impatiemment la suite.

  • Hamic

    Merci Francis pour tous ces tuto. Je viens d’arriver à bout et j’ai appris énormement de choses et au passage je me suis fait plaisir 🙂
    J’attend la suite avec impatiente ^^

  • Merci pour ces quelques conseils qui permettent en effet l’approche « rassurante » d’un projet et un gain de temps futur …

  • Très bon tutoriel, mais pour moi, le problème vient toujours des couleurs, notamment l’harmonie entre les blocs et les différents titre et/ou texte du corps ou de la sidebar.
    Bonne chance pour l’article sur l’intégration =]

  • Hello Fran6,

    Ces deux dernières semaines, j’ai suivi tous tes tutos à la lettre et j’ai créé un zoli petit thème wordpress que voici http://www.takeyourtime.be. Mais voilà, une fois mis en ligne, j’ai quelques soucis sur lesquels tu pourras peut-être m’éclairer. En effet, dans mes comments le plugin @reply qui permet de répondre directement à la personne qui a posté le comment comme sur Twitter ne fonctionne plus(alors qu’elle est activée dans mes réglages).

    As-tu une solution?

    Merci beaucoup pour tous ces tutos ^^

  • Très bon début !!!

    Le crayon, il n’y a que ça de vrai… ce tutoriel est très bien pour commencer, il met l’eau à la bouche… je n’ai rien a ajouté, tout y est. bien sûr comme tu dis chacun peux y aller à sa manière.

    Tu es de très bon conseil, d’ailleurs je crois qu’il ne faut pas focaliser sur ses moyens techniques (experiences, photoshop, tablette…..) sur le papier on fait ce que l’on veut et ensuite on pense différement lors de la mise en oeuvre graphique…
    D’ailleurs faut pas oublier la partie découpe… mais je pense que tu y viendras.

    Moi pour mes screens shot j’utilise https://addons.mozilla.org/fr/firefox/addon/5648

    et pour les inspirations, je me permets d’en rajouter http://cssmania.com/ et les autres :http://www.google.fr/search?q=.....=firefox-a

    A+

  • Sam

    Sympa cet article. 🙂

  • Ca sent bon, très bon cette idée de tuto…

  • Pour ceux qui aurai pas photoshop ni gimp et qu’une instalation rebute un peut voici un site qui peut vous sauvez la vie et en plus c’est gratuit 😀
    http://www.sumo.fi/products/su.....x.php?id=0

  • Fandjo

    Bonsoir !

    J’ai mon design en poche, mais pour ce qui est de l’integrer a wordpress je rame :s
    La partie « intégration » du tuto est toujours prévu ?

    Merci 🙂

  • Oui j’aimerais pouvoir avoir la possibiliter de faire mon theme photoshop maintenant

    etant donnee que j’ai finis le tuto surla creation de A a Z

    j’ai besoin de la partie photoshop 🙂

    francis, si jai pu comprendre tu aurais fais un livre traitant du sujet?

    si oui ou puis-je me le procurer?

  • david

    Bonjour,

    Je viens de me mettre à wp, avec tous vos tutos pour créer un thème de AàZ.
    Je viens de m’inscrire pour recevoir la suite des tutos avec photoshop sa découpe et son intégration, mais je n’ai rien reçu alors je me demande si j’ai loupé des tutos ou si je vais les recevoir bientôt(j’attends avec impatience la suite..).
    D’autre part, j’aimerais mettre des bandes(image qui se répète dans sa longueur) de chaque côtés du site.
    Qui enfermerait le header la page la sidebar et le footer.
    Dans quelle partie dois-je l’insérer?
    J’ai créer un dossier images dans mon thèmes,et je veux le faire apparaitre avec la synthaxe suivante:background-image :url{images/nomdelimage.jpg};
    sans résultat

    Merci pour vos tutos et votre réponse
    Je vous met en lien sur le site dés qu’il sera fini .

    David

  • Bonjour,
    je suis à bloc sur le tuto mais je n’arrive pas à trouver le lien vers la prochaine étape…

  • Vivement la suite des tutos !!
    Bravo Fran6 pour tout ce beau boulot. C’est vraiment une aide formidable !

  • Elena

    Merci pour les tutos … jai un pe de mal sur certain truk mais c vraiment bien expliquer
    Ni a til pa de suite pour se tuto?
    Cordialement et merci encor!

  • APP

    Merci bcp pour tous les tutoriaux !

    Pas de suite ? 🙁

  • J’essaie d’avancer mais je n’y arrive pas vraiment, trop de travail pour le moment !! 😉

  • Bonjour, j’aurais aimé savoir s’il est possible de coder ce layout pour en faire un blog wordpress s’il vous plait :

    http://b0rdelique.free.fr/version3.png

  • FreEagle

    Ondeline > Salut Ondeline, il est bien sur possible de coder ton layout. Le mieux serait de disposer de l’original en format psd, ainsi que quelques explications sur l’organisation voulue de ton blog ! Si tu es toujours intéressée, je peux de donner un coup de main !

  • Merci de la réponse, j’ai abandonné, wordpress ne m’est finalement pas si utile, je reste sur cutenews qui me permets d’avoir n’importe quelle structure de layout sans me prendre la tete.

  • Greg

    extrêmement instructif !
    j’attends la suite avec impatience !

  • taro

    à quand la suite sur photoshop

  • Hiro

    Très bon tuto ! Merci 🙂
    La suite est prévue pour quand ?

  • Mikeshake

    Comme littlesnapper est payant pourquoi pas proposer aussi une alternative gratuite comme skitch qui fait la meme chose : http://skitch.com/

  • Aaaah mais oui mais non ! Bouh que c’est pas beau de nous laisser choir ! Vilain le Fran6 😀

    Excellente suite de tutos, vraiment. C’est clair, très bien expliqué et je me sens bien moins con à l’heure qu’il est. Ma question est donc la suivante: peut-on espérer une suite ?

    Merci encore 🙂

  • C’est clair que les tutos sont géniaux, mais où est là suite ???

    Vraiment besoin de la suite pour mener un projet à terme (le mien en tout cas …)

    LA SUITE !!! LA SUITE !!!

  • Bonjour,

    Voilà plus d’un an que je me suis inspiré de tes tutoriels, pour essayer de refaire le design du site de notre asso, et je t’en remercie d’ailleurs, ils sont vraiment très clair. Et comme beaucoup de monde j’attends la suite, mais comme elle ne vient pas j’ai commencé tranquillement a bosser sur le design. Étant Linuxien ubuntero, après avoir suivi tes conseils de faire un croquis, j’ai ouvert mon merveilleux GIMP, et j’y ai dessiné mon thème. et ce week-end je l’ai découpé en petits morceaux (c’est assez long a faire ça aussi). Pour exemple, j’ai téléchargé un thème qui se rapproche un peu de ce que je veux faire et je regarde dans le répertoire « images » comment est faite la découpe. Et je regarde comment ils sont intégrés dans la feuille de style et le thème. Reste plus qu’a essayer de faire pareil, bien qu’il y ai encore des points bloquants dans mon esprit (lié à l’intégration elle même des images dans le thème).
    A mon avis quelque soit le logiciel utilisé (Photoshop ou GIMP, ou autre), il faut commencer par le connaitre suffisamment à défaut de bien le maitriser (comment utiliser les calques, les sélections, les effets (pour faire des ombres portées ou des trucs comme ça), etc). Photoshop (que je ne connais pas) et GIMP sont des logiciels ultras performants, et donc ultra compliqués. Donc en attendant la suite ben faut lire des tutos ou des bouquins, tester, s’énerver, et essayer d’avancer.
    Mais, Francis, suis-je donc sur la bonne voie, ou fais-je fausse route avec ma petite méthode dans mon coin ?

    En tout cas re-merci a toi, car malgré tout, depuis longtemps que je voulais faire un thème qui ressemble plus à l’activité de mon asso (exploiter une salle de cinéma), ces merveilleux tutoriels m’ont fait faire un bon en avant.

    Rico

  • mork

    Bonjour

    Je tenais juste à poster un petit commentaire pour vous remercier de votre tuto.

    Depuis le temps que je navigue sur le web et que j en lit (que se soit pour l’iphone,install de serveur, la configuration de tel machin pour tel truc ), il met rarement arriver dans voir d’aussi bien fait, clair, abordable même avec peu de connaissance, et avec une rédaction qui va a l’essentiel tout en étant très agréable a lire avec les petite touche d humour deciminé par ci par la.
    A mon avis penser a une publication literaire du tutoriel que vous avez fais pour wordpress, cela en aiderais beaucoup, il est juste parfait 🙂 .

    Sur ce je passe a la suite avec votre série sur la partie graphique.

    En vous remerciant.

  • Hello! Merci de nous avoir amené jusqu’ici pour ton tutoriel! Dommage qu’il ne soit pas complet, mais je suppose qu’après 4 ans d’absence, nous n’en verrons jamais le bout… Cependant, bravo pour ton travail et merci de m’avoir aidé.

  • Patrice

    Je cherche un tuto de la même qualité que ceux de fran6bart pour intégrer En-tête et arrière-plan dans Apparence dans mon theme. hélas je ne trouve que des trucs alambiqués et qui intègrent du css dans le php.
    Si quelqu’un a une piste…
    Néanmoins merci à fran6bart pour l’excellence de ses tutos.

  • Patrice

    j’ai un petit probleme :
    quand je modifie un article ou une page dans le theme que j’ai créé, j’ai ce message

    Warning: Cannot modify header information – headers already sent by (output started at /mnt/156/sdb/5/5/mon_identifiant/blog/wp-content/themes/theme-pat1/functions.php:6) in /mnt/156/sdb/5/5/mon_identifiant/blog/wp-includes/pluggable.php on line 897

    avec wordpress 3.1.4 (je suis chez free et il ne supporte pas le php5)

  • Nicephore

    Merci pour cet article … vivement la suite

  • Bonjour Francis.

    Tout d’abord merci pour tous ces tutos.
    Moi qui voulais un design avec mes besoins pour un artiste connu français c’est tous simplement parfait =).
    Peut on esperer une suite au tuto photoshop? (je maitrise l’outils depuis 5ans mais une aide sur tes croquis, ton résultat final, etc… serait d’une grande aide :))
    Sur ce bon courage malgré ton peu de temps et continue ainsi.

  • Roger

    Bonjour Fran6,
    Merci pour cet article mais je voudrai savoir si les suivants sont sortis car je ne les trouves pas. Merci

  • remirez

    Bonjour, aucun avancement du blog en 2012 ?

    Snif, il est de loin le plus complet niveau etape des tutos, merci 😉

  • Une solution à tester, cela m’a l’air bien utile.

Success, your comment is awaiting moderation.