Utiliser le panneau des calques pour comprendre le travail à réaliser

Un document Photoshop, c'est en réalité un ensemble de calques superposés les uns aux autres. Et donc, parmi les nombreux panneaux de Photoshop, le plus populaire et probablement l'un des plus importants, c'est le panneau des calques. Alors sur notre écran, le panneau des calques se trouve ici tout à fait dans le fond à droite. On va lui donner un petit peu plus d'espace, à ce panneau des calques. Donc on va double-cliquer sur l'onglet Couleur pour fermer le panneau Couleur, On va double-cliquer sur l'onglet Propriétés pour fermer le panneau Propriétés. Et donc maintenant le panneau des calques prend tout l'espace et tous les calques sont bien visibles. Alors pour nous, les développeurs web, l'un des outils les plus utiles de ce panneau des calques, c'est le petit œil que l'on voit devant chacun des calques. Ce petit œil nous permet de contrôler la visibilité de ces calques et donc, en faisant clignoter ce petit œil, eh bien, vous savez très facilement repérer quels calques représentent quel élément de votre document. Ici, nous avons une série de calques qui représente le site tel que vu sur un smartphone. Ce sont tous les calques dont le nom commence par « Mobile ». Ensuite on a les calques qui représentent le site tel que vu sur une tablette que l'on tient en portrait. Ce sont ceux de la deuxième ligne. Ensuite, on a une série de calques qui représentent le site tel que vu sur une tablette quand on tient la tablette en format paysage. Et puis le dernier calque ici dans le fond, qui clignote pour le moment, c'est le site tel que vu sur les écrans les plus larges, ceux des ordinateurs de bureau et des ordinateurs portables. Donc on est bien ici dans un environnement responsive. Alors ce que nous avons ici, ce ne sont pas vraiment des calques, ce sont des groupes de calques, et même des espaces de travail. Comment je le sais ? Eh bien, parce que nous avons à côté du petit œil, nous avons ce petit triangle qui nous permet d'ouvrir ces espaces de travail et de voir alors ce que ces espaces de travail contiennent. Donc ici, c'est l'espace de travail qui clignote sur votre écran qui se trouve tout à fait en haut à gauche. On va faire un petit Contrôle ou Commande + pour zoomer vers l'avant. Et puis avec la barre d'espace, on va pouvoir utiliser l'outil Déplacement pour venir bien inspecter ici ce qui se passe au niveau de cet espace de travail. Donc dans cet espace de travail, nous avons tout d'abord un calque, le curseur qui clignote pour le moment, et puis nous avons l'en-tête et le menu qui est ouvert comme ceci. Vous voyez que l'en-tête et le menu ouvert sont également des groupes de calques, puisqu'on a de nouveau ici ce petit triangle. Donc, je vais ouvrir tous ces petits triangles pour accéder à chacun de ces calques de manière individuelle. Et donc nous avons au niveau du header, un bouton qui est composé de rectangles. Vous voyez ici les deux rectangles qui composent la croix. Nous avons le logo, nous avons le background de l'en-tête, et puis nous avons les différents éléments du menu, les différents boutons. Le bouton Accueil qui est sélectionné, donc ça c'est une manière pour le designer de nous montrer l'aspect de cet élément de menu quand on passe la souris dessus. Et puis nous avons le background du menu. Alors ici, on a de la chance. Vous voyez que le designer a pris la peine de renommer chacun de ces calques et de grouper ces calques et de renommer les groupes de calques. Donc notre travail d'observation et d'inspection s'en trouve facilité. Mais ce ne sera pas toujours le cas. Certains designers ne prennent pas la peine de renommer leurs calques et de les grouper, comme vous le voyez ici. Par exemple, allons voir ce qui se passe dans le groupe de calques d'à côté. Je vais l'ouvrir, puis avec barre d'espace, on va bien le mettre ici au centre de l'écran. Alors, dans ce groupe de calques, vous voyez qu'il y a plein de calques qui sont superposés les uns aux autres, mais ceux-là ne sont pas répartis dans différents groupes de calques. Ils sont simplement là dans cet espace de travail, et tous d'ailleurs n'ont pas été renommés. Donc dans ce cas-là, n'hésitez pas à faire ce travail vous-même. Par exemple, ici, nous avons trois calques qui représentent, vous le voyez, les trois barres de l'icône du menu. Donc ce que je vais faire, c'est que je vais sélectionner le premier de ces calques. Ensuite, je vais cliquer sur le bouton ici qui se trouve dans le fond du panneau des calques, le bouton Créer un groupe. Quand je clique sur ce bouton, eh bien je crée un groupe juste au- dessus du calque sélectionné. Donc c'est important de bien sélectionner un calque, parce que sinon votre groupe sera créé ailleurs dans votre document. Maintenant, je vais pouvoir placer les différents rectangles dans ce groupe, comme ceci. Vous voyez que je glisse le rectangle sur le nom du groupe pour faire cela. Et maintenant, je peux renommer le groupe en faisant un double-clic sur ce groupe et je vais appeler ce groupe « Hamburger Menu » comme ceci. Puis je valide par la touche Enter. Donc maintenant, ça me permet de refermer ce groupe, et donc d'y voir un peu plus clair. Ensuite, vous voyez que j'ai le logo de la société et le fond de l'en-tête. Donc ces trois éléments, le bouton, le logo et le fond de l'en-tête, ça représente l'en-tête du site. Je vais vous montrer maintenant une autre technique pour créer un groupe de calques. Je vais commencer par sélectionner les éléments qui feront partie de ce groupe de calques. Donc ici je clique sur le calque Header_bkg, et puis je maintiens enfoncé le bouton Commande sur Mac ou le bouton Contrôle sur Windows, et je sélectionne alors les autres éléments. Une fois que les éléments sont sélectionnés, je vais cliquer sur le bouton Créer un groupe, ici dans le fond, et alors je crée un groupe qui contient déjà les éléments qui étaient sélectionnés. Il ne me reste plus qu'à renommer ce groupe. Je vais l'appeler ici par exemple « Header », comme ceci. N'hésitez pas à faire ce travail vous-même. Ce travail, c'est votre première prise de contact avec le site à réaliser. Ça vous permet déjà d'observer les différents éléments de ce site. Et puis souvent, les différents groupes de calques que vous allez créer ainsi préfigurent finalement les différents conteneurs HTML que nous aurons dans la page web que nous allons réaliser. Dernière petite chose, vous veillerez à faire un fichier, Enregistrer sous. En effet, vous voulez faire ces modifications dans une copie du fichier original. Comme ça, si jamais vous faites une bêtise, eh bien vous pourrez toujours retourner sur le fichier original que le designer vous a envoyé, et ainsi retomber sur vos pattes. Voilà encore ici quelques outils de Photoshop qui vont vous permettre d'observer votre fichier, de prendre contact avec le travail à réaliser, et de déjà penser aux différentes structures HTML que vous allez mettre en place plus tard.