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

Utiliser les compositions de calque

Testez gratuitement nos 1270 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Votre formateur vous explique comment utiliser des compositions de calque. Il s'agit de mieux analyser la construction de votre maquette.

Transcription

Durant votre travail d'intégration, vous allez souvent travailler par phase. Et en fonction de la phase de travail dans laquelle vous vous trouverez, vous n'aurez pas nécessairement besoin de voir en permanence, toutes les informations contenues dans votre fichier Photoshop. Alors je vais prendre un exemple, je vais passer ici dans mon panneau des calques, et je vais désactiver les claques qui correspondent à du contenu, donc je vais garder ici que les fonds, vous voyez ici, les background. Je fais la même chose au niveau de la zone de navigation, je vais supprimer tous les liens de navigation, et ne garder que les liens ici, gris foncé, je vais faire la même chose au niveau du titre. Je ne garde que le fond vert. Je vais prendre la zone de contenu, retirer le texte, les images, etc, ne garder que le fond. Et au niveau de la colonne de gauche, je vais faire la même chose, je vais garder ceci. Au niveau de la partie partage, je vais garder ceci. Et au niveau de la partie catégorie, je vais supprimer les différents items. Ainsi que le titre ici, donc je vais garder ceci. Je vais continuer avec le pied de page, qui se trouve ici dans le fond, donc je vais retirer la partie des langues. Sauf la ligne qui va avec. Là, les images. Le texte ici. Je vais supprimer les différents textes qui sont là. Et je vais également supprimer, alors le bouton mobile, je vais le supprimer aussi. Vous voyez donc que je vais retirer une série d'élements qui me gênent, que je n'ai pas envie de voir. Par contre, je vais garder le fond du footer, le fond du pied de page. C'est copyright. Voilà, donc j'ai ici eh bien, les grandes zones que je dois reproduire dans ma page HTML, les grandes zones de la mise en page. Vous avez vu que c'est assez fastidieux de passer l'ensemble des claques en revue, et d'aller modifier les petits yeux, de les ouvrir ou les fermer en fonction de ce que vous voulez voir. Eh bien, c'est ici que vont intervenir les compositions de calque. Alors, le panneau des compositions de calques, n'est pas présent par défaut sur l'interface de Photoshop. On va donc se rendre dans le menu fenêtre pour faire apparaître, le panneau des compositions des calques. Eh bien, le voici. Alors, je vais créer une première composition de calques, donc pour ça dans le panneau composition de calque que je viens d'afficher, j'ai cette petite icône dans le fond, qui s'appelle nouvelle composition de claques. Vous voyez, créer une nouvelle composition de calques. Je vais cliquer sur cette icône, donner un nom à ma composition de calques, par exemple Lavout_noContent, comme ceci. Et je vais stocker dans cette composition de calques, eh bien, la configuration des petits yeux fermés et ouverts, donc je vais stocker les paramètres de visibilité des calques. Je vais faire ok, comme ceci. Alors maintenant, je vais reparcourir mon panneau des calques, et je vais faire réapparaître ces différents éléments. Voilà, comme ceci. Donc, je suis dans le pied de page. Donc je vais faire réapparaître, un par un, tous ces éléments, vous voyez, c'est pas fastidieux, je vous le disais tout de suite. Vous n'avez pas envie de devoir faire ça régulièrement, pendant votre travail d'intégration. Donc je reviens, je vais faire réapparaître tous les éléments. On y arrive tout doucement. Voilà pour le titre, la barre de lien. Et on arrive au dessus avec la zone d'en-tête. Donc voilà, toutes les informations sont de nouveau visibiles. Et, je vais bien sûr m'empresser de faire une nouvelle composition de calques, Donc je clique ici sur nouvelle composition de calques, je l'appelle par exemple complete, pour dire que c'est l'ensemble de tous les éléments. Et je vais, de nouveau, stocker dans cette composition de calques, eh bien, les paramètres de visibilité de chacun de ces calques. Je vais faire ok, comme ceci. Alors, autre petit raccourci qui peut être intéressant, vous voyez ici le groupe de calques qui s'appelle header, donc qui correspond à l'en-tête du site. Eh bien, j''aurai envie de ne voir que cela. Alors, pour ne voir que un calque, ou un groupe de calques, eh bien vous allez cliquer sur le petit œil, en maintenant enfoncé le bouton ALT du clavier. Et ça, ça vous permet de fermer tous les petits yeux, sauf celui sur lequel vous avez cliqué. Et donc ici, je ne vois que l'en-tête de mon site, et je vais créer, de nouveau, une nouvelle composition de calques, que je vais appeler, par exemple, header, comme ceci. Et donc maintenant que j'ai plusieurs compositions de calques, eh bien, je vais très simplement pouvoir passer d'une vue à l'autre. Par exemple si je clique ici sur complete, tous les calques se remettent en route, donc je vois toutes les informations. Si je clique sur Layout_noContent, regardez, je cache le contenu. je vois donc les grandes zones du Layout, les grandes zones de la mise en page, que je vais devoir réproduire dans mon fichier HTML. Donc prenez le temps, également, dans votre fichier photoshop, de créer, comme ceci, des compositions de calques. Vous pouvez ajouter des compositions de calques en cours de route, bien évidemment. N'oubliez pas que vous travaillez ici sur une copie du fichier Photoshop, puisque ce que nous avons, c'est une copie reçue du designer, donc absolument aucun problème, vous pouvez faire toutes les bêtises que vous voulez dans ce fichier. Dans le cas échéant, donc dans le pire des cas, vous avez toujours une copie du fichier original, qui vous attend ailleurs sur votre disque dur. Voici donc un outil moins connu de Photoshop, mais que je trouve très pratique surtout quand on est intégrateur, L'outil composition de calques, qui vous permet donc de stocker dans le fichier, la disposition des petits yeux, la visibilité des différents calques.

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 !