Webdesign : Créer un design bleu et aéré pour un blog

Webdesign : Créer un design bleu et aéré pour un blog

Programme : Photoshop

Difficulté : Débutant

Temps estimé : 2-3 heures

Télécharger les fichiers sources
Vous devez être logués ou enregistrés pour télécharger !

Pour ce nouveau tutoriel réalisé par Arnos (Arnaud Steckle), vous apprendrez à  créer un design de blog sous Photoshop.

Bonjour à  tous, le but cet exercice est de créer un design de blog à  deux colonnes. J`ai choisi le thème du webdesign comme sujet, libre à  vous d`adapter en fonction de vos besoins.

Design de blog clair et bleu

(Résultat final)


Étape 1 : Création du document

Avant toute chose, je crée un nouveau document Photoshop au format 1500×1500 pixel, RVB 72dpi. Je remplis le fond d`un gris très clair (#f2f2f2). Au fur et à  mesure de la conception je veillerai à  ranger les calques par groupe pour faciliter la compréhension.

Design de blog sous Photoshop


Étape 2 : le haut de page

Commençons le design en créant ce qui deviendra le header. Je trace un rectangle noir (#000000) haut de 96 pixels sur toute la largeur de document. Pour lui donner un peu de volume, je lui applique un dégradé (#000000 vers # 2b2b2b).

Design de blog sous Photoshop

En dessous de cette barre, je crée une seconde barre de 50 pixels de haut. Je lui applique trois effets différents :

Design de blog sous Photoshop

Design de blog sous Photoshop

Design de blog sous Photoshop

Je place des repères de la manière suivante pour fixer une largeur de 960 pixels au blog. Je me réserve des marges de 20 pixels entre les futures colonnes.

Design de blog sous Photoshop

Pour le logo j`utilise la police Museo 700 (disponible en téléchargement sur MyFonts), en couleur bleu (#2bdefe), en corps 60, avec une approche de lettre de -30. J`applique un léger dégradé à  la police ainsi qu`un fort contour noir. Pour compléter le header,   j`ajoute des icônes Facebook, Twitter et RSS, provenant de Iconfinder.

Design de blog sous Photoshop


Étape 3 : le menu

Je crée ensuite le menu du site dans la barre bleu dessinée précédemment. Pour le texte j`utilise une police simple et sans empâtements de couleur #389dc2 (par exemple Helvetica Neue ou Arial). J`applique une légère ombre portée pour donner un effet sympa. Pour l`indication du survol sur le lien j`utilise l`outil rectangle arrondi pour créer une sorte de gélule derrière le lien  « accueil. » Pour ranger le PSD, je sélectionne les calques visibles, puis en utilisant le raccourci Ctrl+G, je crée un groupe de calque que je renomme  « header  ».

Design de blog sous Photoshop


Étape 4 : conteneur et l’article à  la une

Il est temps à  présent de créer le conteneur central. Je dessine un rectangle blanc à  l`aide de l`outil rectangle (U), de 960 pixels de large que je place à  l`aide des repères. Je lui applique un contour de 1 pixel de couleur #d9d9d9. Votre document doit à  présent ressembler à  quelque chose de similaire :

Design de blog sous Photoshop

Très souvent les derniers articles d`un blog sont mis en exergue en haut de page. Utilisez à  nouveau l`outil rectangle pour créer un bloc de 575×275 pixel en utilisant un gris très clair (type # f2f2f2). Ce rectangle servira à  contenir l`image de l`article mis en avant. J`applique une très légère ombre portée noire et un large contour (en position intérieure) de 10px au rectangle. J`utilise ensuite une image que je place au dessus du rectangle dans la pile de calques. Je crée ensuite un masque d`écrêtage (clic droit sur le calque –> créer un masque d`écrêtage).

Design de blog sous Photoshop

Une fois ce bloc en place, je l`habille avec une barre horizontale de couleur noire avec une opacité de 80% pour laisser transparaître l`image de fond. Cette barre contiendra le titre de l`article ainsi qu`une petite description. Je dessine également un rectangle incliné bleu en haut à  droite pour signaler la nouveauté. Et voici le résultat final :

Design de blog sous Photoshop


Étape 5 : design d`un article

Résultat attendu à  la fin de cette étape :

Design de blog sous Photoshop

Dans la colonne de gauche du site, je place tous les éléments textuels nécessaires à  un article : un titre, une date, une catégorie, et un résumé. (Outil Texte, raccourci T) Pour le titre principal j`utilise la police Museo 700 en corps 26 et de couleur #0f7f7f. J`utilise ensuite l`outil de création de forme personnalisée de Photoshop pour dessiner une étoile devant mon titre. Je lui applique un très léger dégradé ainsi qu`une ombre portée. Pour garder une certaine cohérence par rapport à  l`image de l`article, j`utilise le même principe que l`image de l`étape précédent. C’est-à -dire que je trace un rectangle que je défini par la suite comme masque d`écrêtage.

Design de blog sous Photoshop

Histoire de  « fermer  » ce bloc je trace un rectangle qui contiendra le nombre de commentaires, ainsi qu`un lien pour lire la suite de l`article. J`utilise à  nouveau l`outil de création de forme personnalisée pour dessiner la  « bulle  » qui illustre les commentaires. Puis je lui applique une légère ombre interne.

Design de blog sous Photoshop

Pour finir je range tous les calques relatifs à  cet article dans un groupe. Je duplique ce groupe trois fois (clic droit -> dupliquer le groupe), et comme par magie nous avons à  présent trois articles. Je laisse un espace de 30 pixels entre les trois articles. Libre à  vous de changer les titres et les images.

NB : Un contenu différent donnera un côté plus réaliste à  votre maquette.

Design de blog sous Photoshop


Etape 6 : les derniers tweets

Premier élément de la sidebar, le bloc affichant les dernier tweets de votre compte Twitter. Pour gagner en efficacité je recherche une illustration Twitter libre de droit sur Icon Finder

Design de blog sous Photoshop

Sous le rectangle j`ajoute un lien bleu #22abf2 pour inviter les visiteurs à  vous suivre sur Twitter. De même qu`à  l`étape précédente, je sélectionne les calques pour en faire un groupe.


Étape 7 : le menu des catégories

Ce menu à  onglet est réellement très simple à  créer. Je démarre comme tout à  l`heure d`un rectangle arrondi mais ici de taille 315 x 150 pixels. à€ l`aide des effets j`applique un dégradé de #81d1e2 vers #92eceb. Pour créer les onglets, je dessine deux petits rectangles arrondis (132 x 28 pixels) que je place sous le précédent rectangle dans la pile de calques.

Design de blog sous Photoshop

L`onglet 2 plus clair indique à  l`utilisateur que celui-ci n`est pas actif. Je place du texte dans le menu puis je crée des séparatifs blancs à  l`aide de l`outil crayon. Nous voilà  avec un menu finalisé :

Design de blog sous Photoshop


Étape 8 : les articles les plus lus

Étape rapide, il s`agît ici de mettre en forme un petit lisiting des articles les plus lus. Vous savez à  présent où trouver l`icône du crayon (Icon Finder bien sûr !). Pour commencer j`utilise simplement l`outil texte (T) pour créer le listing. L`outil ellipse me permet de créer les puces devant les liens. Pour les pointillés j`utilise l`outil crayon (B) avec un pas de 200%. Rappel, pour régler le pas, j`ouvre le menu de forme (F5), puis je clique sur forme de la pointe.

Design de blog sous Photoshop

Je ne m`attarderai pas sur le reste de la sidebar, car elle ne comporte pas de zones nécessitant une explication détaillée. Elle est constituée d`une zone de pub et d`un encart Facebook. Rien de très intéressant niveau webdesign sachant que vous n`aurez pas à  créer ces éléments de toutes pièces, ils proviennent de modules déjà  existants.


Étape 9 : le pied de page

Dernière étape de ce tutoriel, la création du footer. Débutons avec la création d`un bloc en bas de page, sur toute la largeur du document et sur 250 pixels de haut avec la couleur #28c5fe. Je crée un autre bandeau de couleur #f2f2f2 de 40 pixels de haut, collé au bas du document. J`y ajoute du texte pour le copyright, en pensant à  bien rester sur ma largeur de 960 pixels. Pour l`instant nous obtenons ceci :

Design de blog sous Photoshop

Pour finaliser, j`ajoute trois colonnes de la manière suivante :

Design de blog sous Photoshop

Du côté technique, j`utilise les différentes méthodes vues dans les étapes précédentes (formes prédéfinies, masque d`écrêtage…). Et voilà  votre design terminé !

Design de blog sous Photoshop


Design de blog clair et bleu

(Résultat final)

N`hésitez pas à  laissez vos commentaires, vos questions et vos suggestions !

47 Comments to “Webdesign : Créer un design bleu et aéré pour un blog”

  • Excellent ce tutoriel !

    Serait-il possible de l’adapter à wordpress, vu que votre site est sous wordpress ?
    Car je sais le créer le thème, mais je ne sais pas comment le mettre sur wordpress :s

    • Merci à toi Aquax !
      Oui bien sûr quasiment n’importe quel design peut s’intégrer à WordPress, après il suffit de bien découper. Peut-être un futur tutoriel à venir pour expliquer tout ça…

  • [...] aussi des tutoriels web évidement ! Intitulé « Créer un design bleu et aéré pour un blog« , vous apprendrez étapes par étapes à construire ce design de blog sous Photoshop [...]

    [WORDPRESS HASHCASH] The comment’s server IP (212.227.29.166) doesn’t match the comment’s URL host IP (82.165.209.174) and so is spam.

  • bravo !

    [WORDPRESS HASHCASH] The poster sent us ’11124582 which is not a hashcash value.

  • Je trouve cela dommage, il y a beaucoup de tuto pour créer un template pour son site, mais on ne traite jamais de l’intégration.

    Pourtant c’est l’étape la plus difficile il me semble et la plus floue pour le commun des mortels, enfin j’imagine qu’il y a tellement de facteurs qui rentre en compte pour faire un tuto sur l’intégration, du genre, si celle ci est intégré à un CMS (et encore il faut choisir lequel !) ou sur un site codé à la main.

    Sinon bon tuto ! comme tout les autres d’ailleurs ^^

    Et j’en profite de poster mon premier commentaire pour dire félicitation à toute l’équipe et en particulier à Spartan, pour l’initiative et son excellentissime designspartan, que je suis assidument depuis pas mal de temps d’ailleurs ^^

    Bonne continuation !

    • L’auteur a dit en commentaire qu’il fera peut-être un tutoriel pour l’intégration du site… il faut croiser les doigts !

      Et pour la suite du message je te remercie. Ca fait plaisir, sans oublier Yoann, Samy (le développeur) et bien sûr tous les rédacteurs. :)

  • Oui, très bon tutoriel!
    Mais pourrait-on avoir l’intégration de celui-ci sur WordPress? Car c’est de plus en plus compliqué de trouver des tutoriels explicitent sur l’intégration des designs (.psd) sur les différents CMS.

    Merci d’avance.

  • magnifique tuto , c’est rare de voir des explications aussi complete sur le webdesign , un grand merci :D

  • [...] Webdesign : Créer un design bleu et aéré pour un blog [...]

  • C’est donc tout décidé, mon prochain tutoriel pour Living Tuts sera l’intégration du design sous WordPress. Il ne reste plus qu’à me mettre au boulot !

    • Il arrive bientôt ? =D

      • Héhé je préfère ne rien promettre mais c’est pour les semaines à venir ;)

        • Je suis en train de faire moi même la mise en page, mais j’éprouve quelques problèmes avec ce fameux navigateur qu’est IE, j’espère qu’avec ce futur tuto, je pourrais corriger mes erreurs :D
          *impatient*

          • 4 semaines plus tard.. et bientôt 5 : Toujours rien .
            Je vais criser tellement je suis impatient :D

  • Je me suis lancé dans la création de cette maquette on y modifiant plusieurs choses, j’attend avec impatience le tuto de mise en page de ce thème avec wordpress.
    Ps : pour voir ce que j’ai fait , c’est par ici ==> http://imagik.fr/view-rl/294348

    • Merci d’avoir partagé ton lien, content d’avoir pu servir de base pour ta créa.

  • [...] This post was Twitted by Eques_Design [...]

  • [...] This post was Twitted by Livingtuts_fr [...]

  • Super tuto et comme les autres je trouve que ce serait vraiment génial d’avoir un tuto pour savoir comment intégrer ce thème a wordpress. Tellement dur de nos jours de trouver des bon tutos de ce genre en français !

    Encore merci je croise les doigts pour le tuto et félicitation pour votre nouveau site !

  • Bravo pour se superbe tuto !
    Comme beaucoup on dit c’est vrai qu’un tuto pour intégrer son template avec les modules etc qu’il faut sont casi introuvable.
    Si Livingtuts en fait un c’est génial merci encore !

  • excusez moi mais jai une question le site living tuto est sur une base wordpress

    • Tout est marqué dans « A propos » ;)

  • Merci pour ce super tutoriel !

  • Petite question : Le projet du tutoriel de mise en page avance t’il ?

    • Je comprends ton impatience. J’en ai discuté avec le rédacteur Arnaud, qui est très occupé en ce moment. Néanmoins le tutoriel est bien avancé et devrait sortir très prochainement. Encore un peu de patience, sachant qu’au début il n’avait pas prévu de l’intégrer. ;)

      • J’imagine effectivement que ce n’est pas sa seule préoccupation que de faire ce tutoriel, j’espère quand même qu’il sortira bientôt… , ça fait maintenant presque 2 mois que le tutoriel sur la création du template est sorti ^^

        • Je ne sais pas si un +1 sera d’une grande utilité mais vivement ce tuto sur l’intégration ;)

          Sinon belle réalisation net et précise =)

          • J’ai reçu aujourd’hui un email d’Arnos, il m’a dit qu’il a terminé d’intégrer le thème. Il ne lui reste « plus qu’à » rédiger le tutoriel et à mettre en ligne la démo et les fichiers du thème.
            Il sait se faire attendre ! Mais on voit le bout du tunnel. ;)

          • Effectivement ça arrive très bientôt et c’est prévu pour fin de semaine :). Je le dis moi-même, c’est pas trop tôt… ;)

          • Arnaud STECKLE
            « Effectivement ça arrive très bientôt et c’est prévu pour fin de semaine . Je le dis moi-même, c’est pas trop tôt…  »

            On est le 5 novembre c’est la fin de semaine xD je l’attends tellement ce tuto depuis la sorti de celui-ci !!

          • Je te comprends Waym ! Mais patience, le tutoriel est quasiment terminé ! Chez Living Tuts on ne bâcle pas les choses, je préfère terminer correctement le tutoriel pour avoir quelque chose de bien. C’est mieux ainsi non ? :)

        • Oui bien sur c’est mieux comme ça mais bon ça n’empêche pas l’impatience !! C’est pour cette semaine ? xD ?

  • Joli tuto et +1 pour l’intégration ! :)

  • +infini pour le dernier commentaire d’arnaud =D
    J’adore, merci d’avance :)

  • Salut,
    merci pour le tuto, je pense le partager sur mon blog si cela est possible.

    • Tu peux en effet le « partager » sur ton blog, mais cela signifie ne pas copier/coller tout le contenu tel quel, mais juste un lien vers le site et éventuellement un court extrait, cela est plus correct pour Living Tuts et le rédacteur de ce tutoriel. ;)
      Merci.

  • [...] Creando un tema de WordPress [...]

  • [...] Illustrator et Photoshop mais bientôt aussi des tutoriels web évidement ! Intitulé « Créer un design bleu et aéré pour un blog« , vous apprendrez étapes par étapes à construire ce design de blog sous Photoshop [...]

  • [...] C’est ici [...]

    [WORDPRESS HASHCASH] The comment’s server IP (213.251.189.204) doesn’t match the comment’s URL host IP (213.186.33.19) and so is spam.

  • Pour ceux qui veulent voici un tuto pour intégrer son webdesign.
    http://www.grafikart.fr/tutoriels/coder-site-web-23

  • [...] livingtuts qui nous gâte encore une fois avec ce superbe tutoriel signé Arnos (Arnaud Steckle). Dès le [...]

  • Superbe tutoriel, vraiment bien expliqué. J’attends avec impatience le tutoriel sur l’intégration de ce design.

    A ce propos, est ce que c’est possible d’avoir des infos sur l’avancement du tutoriel sur l’intégration de ce design svp ?

  • Regardez ce tutoriel similaire que j’ai écrit :

    Design de sites web avec Photoshop (créer, découper, assembler) :
    http://www.protic.net/heritage/heritage2012/chevalierg/tutz2.html

  • [...] Photoshop About the AuthorSocial [...]

  • Très beau tutoriel, merci à vous! ;)

  • [...] Webdesign : Créer un design bleu et aéré pour un blog [...]

  • c genre de tuto nous la réflexion c très bien

Laisser un commentaire