Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Comprendre le panneau des calques

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Explorez le panneau des calques ainsi que ses fonctionnalités principales. Vous allez mieux comprendre la structure de la maquette Photoshop.

Transcription

Un document Photoshop est en réalité une collection d'élements, superposés les uns au dessus des autres, chacun de ces éléments dans Photoshop est stocké dans ce qu'on appelle un calque. Alors, le panneau le plus important et le plus utilisé dans Photoshop, c'est probalement le panneau des calques, et pourtant, vous le voyez sur cet écran, il occupe un tout petit espace, ici, en bas à droite. Je vais donc double cliquer sur le mot couleur et sur le mot bibliothèque ici, pour fermer les panneaux correspondants, ce qui permet, vous le voyez, au panneau des calques d'avoir un peu plus d'espace. Alors, voici la liste de tous les calques qui composent ce documents, vous voyez qu'il y a énormément de calques dans ce document, mais heureusement, tous ces calques ont été organisés. Alors, qu'est-ce que je veux dire par là ? Eh bien, je veux dire que ces calques ont été renommés, et ont été également groupés dans des groupes de calques. Vous voyez également que les différents plans de travail, les trois plans de travail que nous avons ici, sont considérés dans le panneau des calques comme, quelque part, un groupe de calques, ici, en foncé. Donc je vais cliquer sur la petite flèche qui se trouve devant le mot Desktop wide, ça va fermer donc ce groupe de calques, ce plan de travail, je vais faire la même chose avec les autres. Je vais chercher le Desktop narrow qui est ici. Et tout en haut, Tablet portrait, voilà. Donc j'ai trois plans de travail, ici, dans ce fichier. Alors, si je prends le plan de travail Desktop wide, donc c'est celui qui est le plus à gauche, je vais zoomer un peu dessus, d'ailleurs, pour qu'on voit bien de quoi il s'agit. Eh bien, si vous regardez dans le panneau des calques, eh bien, il a été organisé, vous voyez que tous ces calques ont été groupés en groupes de calques, et renommés. À quoi correspond chaque élément ? Comment découvrir à quel calque correspond quel élément du document ? Eh bien pour ça, il y a une technique toute simple, il s'agit tout simplement d'utiliser le petit œiil que vous avez ici. Et ce petit œil, il contrôle la visibilité du calque, ou du groupe de calques. Par exemple, si je ferme le petit œil, eh bien vous voyez ici que l'entête de mon document disparaît, elle n'a pas disparue du document, rassurez-vous, elle est simplement masquée. Il suffit de recliquer sur le petit œil pour faire réapparaître ces éléments. Donc je sais que le groupe de calques header ici, eh bien ça correspond à ce qui est en train de clignoter ici sur votre document. Dans ce groupe de calques header, vous voyez que j'ai d'autres groupe de calques et des calques, Donc ici, par exemple, Header DKG, c'est un claque. Si je le fais clignoter avec son petit œil, vous voyez de quel calque il s'agit. C'est tout simplement le background, l'arrière plan bleu, ici, du header. Alors, j'ai également un autre sous groupe de calques, on va dire qu'ils s'appellent header buttons, il s'agit de trois boutons qui clignotent ici sur le côté. Et dans le groupe de calques Header buttons, eh bien, je retrouve trois sous sous groupes de calques, contact, sign, et search, qui correpsondent chacun, vous voyez, à l'un des trois boutons. Et puis de nouveau, ici à l'intérieur, j'ai les calques qui sont correctement rangés. Tous les designers ne prennent pas toujours la peine, d'organiser leur panneau des calques de manière aussi précise, et ne prennent pas, d'ailleurs, toujours la peine de renommer tous les calques et tous ces groupes de calques. Alors moi, je vous invite à faire cette démarche, c'est-à-dire à bien observer votre document, et à renommer des calques, à les regrouper en groupes de calques, d'une manière qui est logique pour vous. Puisqu'au final, les groupes de calques que vous retrouverez dans le panneau des calques de photoshop, eh bien vont souvent préfigurer les différents compeurs HTML, dont vous aurez besoin quand vous créerez votre code HTML. Comment faire pour renommer ces éléments et regrouper des calques entre eux? Eh bien pour renommer, c'est très simple, vous allez simplement choisir le calque à renommer, par exemple celui-ci, vous double cliquez sur son nom, et vous voyez que vous pouvez très facilement changer le nom du calque, et, comme ceci, valider par la touche enter. Je vais, pour ma part, appuyer sur la touche Escape, pour ne pas apporter de modifications à ce calque. Pour créer un groupe de calques, c'est très simple également. Vous allez tout simplement sélectionner plusieurs calques ici, dans le panneau. Alors, pour sélectionner plusieurs calques, il suffit d'en prendre un, et d'appuyer sur la touche commande, sur Mac, ou CRTL sur PC, et d'ajouter d'autres calques à la sélection. Quand vous avez plusieurs calques qui sont sélectionnés comme ceci, il vous suffit de cliquer sur l'icône du petit dossier, ici, dans le fond du panneau des calques, pour créer un groupe de calques, et double cliquer sur le nom du groupe, pour changer son nom et le renommer directement. Vous voyez que les deux calques qui étaient sélectionnés, font maintenant partie de ce groupe de calques. Imaginons que vous ayez envie d'ajouter un calque dans un groupe existant, il suffit pour ça de prendre le calque en question, de venir le glisser à l'intérieur du groupe, le glisser sur le nom du groupe, vous voyez que ce calque, maintenant, fait partie, ici, de ce groupe. Alors, si vous voulez sortir un calque du groupe, c'est la même chose. Vous allez prendre le calque et le glisser hors du groupe, comme ceci, vous voyez que le groupe header n'est maintenant plus dans le groupe noms, je vais le remettre bien en place, comme ceci. Et pour supprimer un groupe de calque, eh bien, vous allez le sélectionner, et cliquer sur la petite poubelle qui se trouve ici, dans le fond. Voilà, je clique dessus. Et là, photoshop vous demande : Que voulez-vous supprimer ? Uniquement le groupe, ou bien le groupe et son contenu ? Eh bien moi je ne vais supprimer que le groupe, comme ceci. De nouveau, je vous invite à faire ce travail, dans les fichiers photoshop que vous recevrez des différents designers. Tous les designers ne prennent pas la peine d'organiser leur panneau des calques comme ceci, bien qu'il s'agisse d'une meilleure pratique dans photoshop. Et ce travail d'observation, de regroupemment et de renommage, de calques et de groupes de calques que vous allez faire, eh bien, ça préfigure déjà les différents conteneurs HTML dont vous aurez besoin. Donc c'est pas du temps perdu, ça vous permet vraiemnt vraiement de vous imprégner de cette mise en page, et de savoir exactement ce que vous allez devoir faire plus tard, dans votre éditeur de code.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !