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

É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.

É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).

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

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.

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.

É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’outilrectangle 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 ».

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

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).

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 :

Étape 5 : design d’un article

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

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.

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.

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.

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

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.

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

É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.

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 :

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

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

(Résultat final)

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

Aucun tutoriel en rapport avec celui-ci.