créer une maquette de site internet créer … · la réalisation d’une maquette de site...
TRANSCRIPT
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 !