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

Créer une maquette de site Internet

outils|tech|tendances Adobe Photoshop expert Julien Lavallée

e 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” (http://960.

gs), mais j’aime aussi générer une grille avec un outil

en ligne très pratique : “Gridulator” (gridulator.com). 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 !

C

102__________________________________________________________________ tutoriels

<tutoriels>Créer_une_maquette_de_site_Internet

• 960.psd• grille.png• logo.eps• social.eps• personnage.eps• personnage.png

NOTRE EXPERTJulien Lavalléeestdirecteurartistiquejuniorenagencedepuismaintenantplusdetroisans.Sonexpériencel’amèneprincipalementàélaboreretàcréerdessitesInternetclairsetfonctionnelspourrépondreàl’attentedesesclients.Pourensavoirplus,visitezsonportfolio:www.julienlavallee.com.

Objectif du tutorielApprendreàréaliserunemaquettedesiteInternetcorporate.

Tempsnécessaire4-5heures

Beaucoup de sites aujourd’hui ont un esprit minimaliste, souvent basé sur une grille.

Eléments du tutoriel

nouveau documentCré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.

tutoriels__________________________________________________________________ 103

dégradé de séparationAjoutez 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 %.

Grille et repèresImportez 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”.

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

BannièreTracez 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.

0302

04 05

06

HeaderCré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.

<tutoriels>Créer_une_maquette_de_site_Internet

01

Le contenu du site sera approprié pour une résolution de 1024 pixels de largeur mais n’oubliez pas d’élargir le fond du site pour les résolutions d’écran supérieures.

104__________________________________________________________________ tutoriels

Footer/menusImportez 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).

Footer/ContactTracez 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.

09

10 ombre portéeSé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”.

11

Bouton inscriptionTracez 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 %.

12

<tutoriels>Créer_une_maquette_de_site_Internet

Footer/SocialNous 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.

08Placer le personnageOuvrir 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.

07

Organisez vos groupes, sous-groupes et calques, pourquoi pas avec des couleurs pour différencier les éléments du site.

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

Agence & newsSur 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.

Finaliser le fichierOrganisez 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 !

tutoriels__________________________________________________________________ 105

Vignette des projetsAprè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.

13 ombre des vignettesAvec 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.

14

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

15

16

17 18

<tutoriels>Créer_une_maquette_de_site_Internet

uelle est votre formation ?

Après avoir obtenu

mon DUT Services

et réseaux de

communication,

j’ai poursuivi avec une

année de formation

“Spécialisation Graphiste

PAO” en alternance à

Efficom à Paris. J’ai étudié

de près et de loin les logiciels de PAO

avec des intervenants professionnels

et entre autres la typographie,

la communication....

Quel matériel utilisez-vous ?Je possède un iMac 27” combiné

à un disque externe LaCie 1 To.

En agence, je travaille avec deux

écrans, sous Windows 7. Je travaille

donc sous deux environnements

différents, ce qui a ses avantages

et ses inconvénients. Sans oublier

des “wireframes” pour élaborer

les maquettes !

Quels logiciels utilisez-vous le plus et pourquoi ?

Photoshop et Illustrator CS5 sont

les logiciels principalement utilisés.

Les outils dont ils disposent et les

mises à jour d’Adobe régulières

permettent de travailler plus

rapidement et plus efficacement.

Les possibilités en matière de création

restent aussi innombrables, on en

apprend tous les jours !

Q

ITW

Rencontre avec un jeune Webdesigner de 26 ans.

Julien Lavallée

Parlez-nous de vos premiers travaux…

Cela remonte à mes années lycée,

je m’amusais à créer des fonds d’écran,

des bannières sur le thème du foot,

pour des communautés. J’ai découvert

Photoshop de cette façon. Utiliser tous

les outils, des techniques encore et

encore, cela a été une bonne manière

d’explorer Photoshop. Suivre des

tutoriels m’a également aidé à

progresser.

Quels sont vos projets en cours ? À venir ?

Outre les projets de mon agence,

j’aimerais lancer une boutique en ligne

de T-shirts sur laquelle j’ai commencé

à travailler. J’espère aboutir à quelque

ITW

Julien Lavallée

Graphiste webdesignerÂge : 26 ans

106________________________________________________________________ interview

ITW

ITW

chose de concret rapidement, le

design du site Internet est en cours !

Êtes-vous freelance ou salarié ?Je suis en poste en tant que DA

Junior dans l’agence Web 4w.fr et

en parallèle j’ai acquis le statut

d’autoentrepreneur.

Quand avez-vous commencé à vous intéresser au Webdesign et pourquoi ?

Ma passion pour le Webdesign s’est

révélée après ma formation, où j’étais

plus orienté vers l’infographie, puis j’ai

commencé à réaliser les maquettes

de sites Internet en agence. Réfléchir

à l’ergonomie, la navigation, le style

des sites m’a plu. Le Web est aussi

en perpétuelle évolution, ce qui

nous permet de faire, d’inventer

de nouvelles choses sur chaque site

sur lequel on travaille. Cette diversité

me plaît beaucoup.

Faites-vous uniquement du design ou aussi de la programmation ?

Je m’attache uniquement à l’aspect

graphique, ergonomique des sites

Internet réalisés, avec quand même

des notions en CSS. Cela facilite la

relation entre mon travail et celui

des intégrateurs. Je prévois de me

mettre au CSS3 et à HTML5 peut-être !

Où puisez-vous vos idées, votre inspiration ?

Le Web est ma principale source

d’inspiration. Twitter notamment

me permet de suivre le lancement

de nouveaux sites. Les galeries de

Behance sont aussi des références

incontournables (Typography Served,

Web Design Served...). Sans oublier la

communauté mondiale de designers

Dribbble, où inspiration et échange

sont les mots d’ordre !

Quels sont vos coups de cœur du moment ?

J’ai particulièrement apprécié le site

Nike Better World et celui du studio

norvégien Unfold avec un effet de

scroll “Parallax” très innovant. Il y a

aussi les réalisations de l’agence

HelloHikimori, des sites graphiquement

superbes et interactifs, dont le dernier

interview________________________________________________________________ 107

en date pour la série “The Walking

Dead”. Dans un autre registre, j’aime

beaucoup la simplicité d’un site

comme celui du studio 80/20, en

“One Page”.

Si vous souhaitez ajouter quelque chose…

Je tiens à remercier mes collègues,

avec qui travailler est un plaisir au

quotidien, et mon amie pour qui ce

n’est sûrement pas tous les jours facile

(mais qui a ses bons côtés !) de

partager la vie d’un graphiste un peu

geek :).

À Vous De Jouer

Pour le site de l’association de théâtre À Vous De Jouer, les clients désiraient un site assez sobre, un peu “décalé”, axé sur les galeries de photos de spectacles et modifiable. Niveau fonctionnel, j’ai pensé à utiliser Flickr pour gérer les galeries de photos simplement. Graphiquement, le slider avec un arrière-plan “en diagonale” changeait un peu de l’ordinaire, tout comme la présentation textuelle de la page Spectacles. Il faudrait plus de lignes pour expliquer en détail, je vous invite à visiter le site pour juger la création !