Imaginons qu’un client vienne vous voir et vous commande un site. Si vous n’avez pas de compétences en graphisme, il vous sera assez difficile de créer une maquette de zéro. Or il existe pléthores de maquettes sur Intenet, payantes ou gratuites, prêtes à être utilisées et adaptées par vous !
Nous allons donc commencer par trouver une maquette qui s’approche de ce qui nous est demandé par notre client. Vous pouvez aisément en trouver en tapant “PSD web layouts” sur votre moteur de recherche préféré.
Je vais me baser sur la maquette de Blaz qu’il met à disposition gracieusement (vous pouvez lui envoyer un message pour le remercier !).
Bienvenue dans l’environnement de Photoshop !
Nous allons utiliser Photoshop pour ouvrir ses fichiers. La plupart des maquettes que vous trouverez utilisent ce logiciel. Vous pouvez également chercher des maquettes utilisant Illustrator ou Sketch mais elles sont plus rares.
Si vous ne l’avez pas déjà installé, cliquez sur ce lien. Photoshop est un logiciel payant mais vous pouvez l’utiliser gratuitement pendant une petite semaine. Un bon moyen de le tester !
Introduction à Photoshop : espace de travail
Photoshop est un logiciel de traitement d’image très utilisé par les graphistes pour créer des images ou des maquettes.
Et j’ai une bonne nouvelle : il reprend la même organisation que les autres logiciels Adobe. Donc une fois que vous savez en utiliser un, il est plus facile d’utiliser les autres !
Pour comprendre Photoshop, imaginez-vous dans un atelier d’artiste-peintre qui cohabiterait avec une imprimerie. Votre espace de travail est votre écran. À gauche, vous retrouvez les outils que vous pourriez utiliser, dans la vie réelle, avec vos mains. Nous rentrerons dans le détail plus tard, mais vous pouvez distinguer un pinceau, une pipette ou une plume.
À droite se trouvent des réglages plus généraux, qui ressembleraient dans la vie réelle à des tableaux en liège ou à des boîtes. Vous avez par exemple un nuancier de couleurs en haut à droite.
La barre du haut change en fonction de l’outil utilisé. Elle vous permet de sélectionner les options de cet outil. Par exemple, en utilisant l’outil Texte, vous pouvez changer la police de caractères.
Enfin, le centre de votre écran affiche votre création. Comme une feuille de papier, elle peut être de n'importe quelles dimensions mais elle sera toujours rectangulaire (ou carrée).
Zoom sur les grilles
En ouvrant la maquette, je peux observer un ensemble de lignes qui recouvrent toute la maquette. C’est ce que l’on appelle une grille.
Une grille est organisée en lignes horizontales (qui forment une rangée) et en lignes verticales (qui créent des colonnes).
Dans notre projet, les colonnes sont symbolisées par des languettes un peu transparentes qui courent à travers tout le document.
Pourquoi utiliser une grille ? Avant tout, elle rend vos contenus plus lisibles et plus structurés si vous en choisissez une organisée en colonnes parallèles. Elle vous permet également, en tant qu’intégrateur ou intégratrice, d’adapter vos contenus aux différentes tailles d’écran, donc de penser responsive.
Blaz, le graphiste de notre projet, a utilisé une grille composée de 12 colonnes. C’est parfait si vous désirez utiliser Bootstrap, la librairie CSS créée par Twitter (c’est d’ailleurs ce que nous ferons un peu plus tard !).
Les lignes horizontales (les rangées) sont créées grâce aux règles de Photoshop. On les utilise comme aide pour aligner les éléments horizontalement, comme une règle dans la vraie vie ! Pour en ajouter une, déplacez simplement votre curseur sur la règle en haut, cliquez et déplacez cette nouvelle règle à l’endroit souhaité.
Les calques
Vous observez également, sur la droite, un élément dont nous n’avons pas encore parlé : les calques. 
Un calque Photoshop fonctionne de la même manière qu’un calque dans la vraie vie, à la différence que vous pouvez en superposer autant que vous le souhaitez en voyant toujours à travers !
Chaque calque suit un principe de priorité : celui qui est tout en haut a priorité sur celui qui est tout en bas. Si, dans la vraie vie, vous empilez deux calques, vous verrez en priorité le contenu situé au-dessus. Il couvrirait le contenu de celui qui est en dessous. Il en est de même pour Photoshop !
Dans notre cas, les calques sont organisés par fichiers afin que ce soit plus lisible. Vous pouvez désactiver un calque, ou un fichier, en cliquant sur l’oeil (pour ne plus le voir !) et le réactiver en cliquant de nouveau sur l’oeil.
Pour zoomer sur un élément, cliquez sur la loupe ou sur Cmd + + (Cmd + – pour dézoomer).
