La réalisation d’une maquette de site Internet pour un projet nécessite une certaine rigueur, avec le souci du détail. Nous allons voir ici comment utiliser une grille comme point de repère pour aboutir à un Webdesign clair et détaillé.

Objectif du tutoriel
Apprendre à réaliser une maquette de site Internet corporate.

 

Temps nécessaire
4-5 heures

Ce tutoriel explique la réalisation de la page d’accueil du site Internet de mon agence Web. Il s’agit ici d’un style plutôt simple, clair et aéré. Beaucoup de sites aujourd’hui ont un esprit minimaliste, souvent basé sur une grille. J’aime assez ce style, mais il faut savoir trouver le juste milieu pour réussir un Webdesign minimaliste et sobre.

Pour revenir à la grille, je pense qu’elle reste un outil très utile, même si certains diront que cela limite la créativité. J’utilise ici le “960 Grid System”, mais j’aime aussi générer une grille avec un outil en ligne très pratique : “Gridulator”. Au préalable, pensez à définir sur papier (utilisez le fichier “DS1panel_w_notes.pdf”) le placement de vos éléments (menus, textes, photos, boutons), c’est une première étape essentielle. Autre ressource qu’il m’arrive d’utiliser, notamment pour 4w.fr, est le site IconFinder (www.iconfinder.net), qui regorge d’icônes gratuites de toutes les tailles.

Place maintenant aux étapes de ce tutoriel, où vous serez à même d’utiliser Illustrator pour importer des éléments dans Photoshop. C’est parti !

Notre expert
Julien Lavallée est directeur artistique junior en agence depuis maintenant plus de trois ans. Son expérience l’amène principalement à élaborer et à créer des sites Internet clairs et fonctionnels pour répondre à l’attente de ses clients. Pour en savoir plus, visitez son portfolio : www.julienlavallee.com.

01 Nouveau document
Créez un nouveau document dans Photoshop de 1280 x 1600 pixels. Gardez en mémoire que le contenu du site sera approprié pour une résolution de 1024 pixels de largeur, la résolution la plus répandue chez les utilisateurs. Mais n’oubliez pas d’élargir le fond du site pour les résolutions d’écran supérieures.

02 Grille et repères
Importez le fichier “grille.png”, qui vous aidera dans la réalisation de la maquette. Ici, la grille fait 940 pixels de large, avec seize colonnes de 40 pixels de large et 20 pixels pour les gouttières. Affichez les règles en faisant Ctrl/Cmd+R et créez chaque repère en fonction de la grille. Vous pouvez aussi ouvrir directement le fichier “960.psd”.

03 Header
Créez un groupe de calques “Header”. Avec l’outil Rectangle (U), tracez un rectangle blanc de 1280 x 118 pixels. Cela constituera le fond du Header. Importez le fichier “logo.eps” comme Objet dynamique, placez-le en haut à gauche selon les repères et redimensionnez-le comme vous le souhaitez (ici, 300 pixels de large). Ajoutez le numéro de téléphone (Police Walkway Rounded, Taille 30 points, Couleur #9D9D9D), aligné à droite du document.

04 Dégradé de séparation
Ajoutez un nouveau calque en faisant Ctrl/Cmd+Maj+N, nommez-le “Séparation”. Avec l’outil Ellipse (U), dessinez une ellipse de couleur noire (#000000). Ajoutez un Flou gaussien de 25 pixels (Filtre> Atténuation> Flou gaussien). Muni de l’outil Rectangle de sélection (M), dessinez un rectangle ne sélectionnant que la moitié du flou. Cliquez ensuite sur la petite icône de masque vectoriel en bas du panneau Calques. Réglez l’Opacité du calque à 10 %.

05 Menus
Pour le fond du menu, tracez un rectangle de 1280 x 45 pixels. Double-cliquez sur le calque et ajoutez une Incrustation en dégradé (style Linéaire, Angle 90°, Couleur du #000000 vers le #2D2D2D). Dessinez une zone de texte (T), centrez-la sur la page et écrivez vos menus, séparés par des espaces. Distinguez les différents textes par des lignes verticales de 1 pixel ayant une Ombre portée (Couleur #FFFFFF, Opacité 10 %, Angle 180°, Distance 1, Grossi 0, Taille 0) dans le Style de calque.

06 Bannière
Tracez un rectangle de couleur #F6F6F6 en dessous de l’image aplatie du Flash, pour créer un contraste avec le fond blanc. Ajoutez votre texte centré sur la page et le fond gris, ainsi qu’une Ombre portée (Couleur #000000, Opacité 100 %, Angle 90°, Distance 1, Grossi 0, Taille 0). Tracez un rectangle de sélection (1280 x 20 pixels) en dessous du fond gris et créez un calque de réglage Fond dégradé (Linéaire, 90°, du #E3E4E4 100 % au #E3E4E4 0 %). Descendez ce calque de 1 pixel.

07 Placer le personnage
Ouvrir le fichier “personnage.eps” sous Illustrator. Copiez d’abord les mains, collez-les comme Objet dynamique et placez-les bien dans Photoshop. Faites la même chose avec la tête. Dupliquez votre Fond dégradé gris et inversez l’angle, puis placez-le au niveau de la tête en mode de fusion Produit. Astuce : créez un masque d’écrêtage en cliquant entre le calque “Dégradé copie” et “Tête” avec la touche Alt/Opt maintenue. Le dégradé ne sera visible que sur la tête, pour créer un effet de profondeur.

08 Footer/Social
Nous allons créer la première partie foncée du footer. Tracez un rectangle de couleur #242424 (97 pixels de hauteur). Ouvrez “social.eps” dans Illustrator. Copiez le logo de Facebook et collez-le comme calque de forme dans Photoshop, vous pourrez donc changer facilement sa couleur par la suite ; même chose pour Twitter. Modifiez leur couleur pour faire une version active et une version inactive.

09 Footer/Menus
Importez et placez “personnage.png” à gauche en fonction des repères. Ajoutez vos menus dans un calque texte, puis le texte de copyright et celui des mentions légales (30 pixels de marge entre les deux). Muni de l’outil Rectangle (U), séparez-les maintenant avec une ligne foncée de 1 pixel et de couleur #1D1D1D. Dans le style de calque ajoutez une Ombre portée (Couleur #FFFFFF, Opacité 8 %, Distance 1, Grossi 0, Taille 0).

10 Footer/Contact
Tracez un rectangle de couleur #F6F6D6 de 170 pixels de hauteur. Placez un titre appelé Contact (Couleur #2F9FE1, Police Museo 500, Taille 26 pts), mettez en capitales (bouton “TT” dans le panneau Caractère) et alignez à droite (dans le panneau Paragraphe). Ajoutez le premier titre “L’agence” et le texte en dessous (en Arial 11 pts, taille minimum conseillée pour la lisibilité). Même chose pour le titre, Projet, et pour Newsletter. Faites attention à bien vous aider des repères pour aligner ces textes.

11 Ombre portée
Sélectionnez le calque “Contact” et ajoutez une Ombre portée (Couleur #000000, Opacité 100 %, Angle 90°, Distance 1, Grossi 0, Taille 0) pour mettre en valeur le texte, comme pour le texte de la bannière. Cela permet de faire ressortir le texte sur le fond gris et sera, par la suite, faisable aussi en CSS, avec la propriété “text-shadow”.

12 Bouton Inscription
Tracez un rectangle de 110 x 23 pixels de couleur #18B3FB. Dans le style de calque, ajoutez un Contour intérieur de 1 pixel en #1097E9, une Incrustation en dégradé linéaire (Couleur #18B3FB 100 % vers #18B3FB 0 %) en mode de fusion Produit de 35 % d’opacité puis une Ombre interne (Couleur #FFFFFF, mode de fusion Incrustation, Opacité 35 %, Angle 90°, Distance 2, Maigri 0, Taille 0). Ajoutez le texte centré avec une Ombre portée de -90° en #1296D5, mode de fusion Normal à 100 %.

13 Vignette des projets
Après avoir ajouté le texte “Nos Projets” aligné à droite, créez un groupe (Ctrl/Cmd+G) nommé “Projet1” et tracez un rectangle (U) de 178 x 100 pixels. Astuce : pour que vos formes soient nettes, dans les Options de rectangle (barre d’outils en haut), cochez la case Magnétisme des pixels. Appliquez un Contour intérieur blanc de 3 pixels au rectangle. Importez une image pour le projet, redimensionnez-la et créez un masque d’écrêtage (Ctrl/Cmd+Alt ou Opt+G). Cela fonctionne comme un masque de fusion.

14 Ombre des vignettes
Avec l’outil Plume (P), dessinez un petit triangle large et noir sous la vignette. Appliquez Filtre> Atténuation> Flou gaussien de 5 pixels. Placez correctement le flou en guise d’ombre et réduisez l’Opacité à 50 %. Ajoutez le titre du projet (en Arial bold, 14 points, #3E3D40), centré par rapport à l’image, et la description (Georgia Italic, 11 points, #A7A8AA). Dupliquez le groupe pour faire les deux autres projets, puis modifiez l’image et les textes.

15 Services
Ajoutez une ligne de 3 pixels pour séparer les projets et les services. Il y aura trois colonnes de texte de 180 pixels de large. Ajoutez votre titre et vos textes en fonction des repères. Ajoutez la liste des services et importez une icône en guise de puce. Dupliquez-la quatre fois. Placez les cinq calques, puis sélectionnez-les et fusionnez-les (Ctrl/Cmd+E). Faites Calque> Nouveau calque> Teinte/Saturation et, pour modifier la couleur des puces, Ctrl/ Cmd+Alt/Opt+G.

16 Édito
Ajoutez un fond pour l’édito, avec l’outil Rectangle arrondi (Couleur #9C9E9F, Rayon 10 pixels, Taille 170 x 460 pixels), puis une légère Incrustation en dégradé (mode Superposition, Opacité 5 %, Couleur du noir au blanc, Angle 90°). Placez une photo en dessous du titre (Édito). Avec l’outil Texte (T), tracez une zone de la même largeur que le fond. Réglez les marges à gauche et à droite à 18 points dans le panneau Paragraphe et ajoutez votre contenu.

17 Agence & News
Sur le même principe, faites trois colonnes : un texte de présentation, une partie Actualités et une partie Twitter, qui chargera vos derniers tweets avec l’API de Twitter. Pour cette partie, ajoutez l’icône Twitter d’un oiseau puis, en dessous, deux tweets. Différenciez les liens en les passant dans la couleur #18B3FB. Enfin, rajoutez le texte “Suivez-nous” et, à côté, le logo version texte de Twitter que vous avez utilisé dans l’étape 08.

18 Finaliser le fichier
Organisez correctement vos groupes, sous-groupes et calques, pourquoi pas avec des couleurs pour différencier les éléments du site. Faites un clic droit sur l’œil à côté du calque et sélectionnez une couleur. Nettoyez votre fichier en supprimant les calques invisibles (Calques> Supprimer> Calques masqués). Et voilà : la page d’accueil de votre PSD est prête à être intégrée !