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

Extraire une image à l'aide d'Extract

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Initiez-vous à Extract. Découvrez comment automatiser l'exportation d'images depuis votre document Photoshop.

Transcription

Il y a encore un élément dans la zone de contenu principale de notre site, dont nous n'avons pas parlé. Je veux bien sûr parler de cette image qui se trouve au milieu du texte. Alors dans cette vidéo, je vais vous montrer de nouvelles techniques, pour exporter vos fichiers images depuis votre fichier Photoshop. Alors avant de vous montrer ces nouvelles techniques, je vais faire un petit détour par mon explorateur de fichiers, c'est-à-dire par le finder, si je suis sur Makintosh. Ou bien, si vous êtes sur PC, eh bien vous utiliserez l'explorateur Windows. Alors, je vais vous montrer ceci. C'est le fichier Photoshop avec lequel nous sommes en train de travailler. Il s'appelle DDX_blog_copie.psd, puisque rappelez-vous, plus tôt dans cette formation, nous avions fait une copie de ce fichier. Alors, je vais retourner dans Photoshop pour activer une petite fonctionalité. Ça se trouve dans le menu fichiers, ça s'appelle générer. Et puis générer fichier d'images. Je vais cliquer là dessus. En apparence, rien ne passe. Mais en apparence seulement, puisque quand je retourne dans fichiers, générer, vous constatez que cette option fichier d'images est restée cochée. Donc, cette fonctionalité est bien active. Alors comment ça fonctionne ? Eh bien, avec mon outil déplacement, je vais aller cliquer sur l'image que je désire exporter. c'est-à-dire issue de cet ordinateur. Ça me permet de sélectionner le calque correspondant dans le panneau des calques. Alors, pour m'assurer que c'est bien le bon calque, je vais le faire clignoter. vous voyez, c'est bien cet élément là. Et puis, je vais tout simplement renommer ce calque, et donner à ce calque le nom du fichier que je souhaite générer. Donc, je vais double cliquer sur le nom du calque pour changer le nom. Et je vais l'appeler, par exemple, computer.jpeg, comme ceci. Alors, je valide le nouveau nom de mon calque. Et puis je vais retourner dans mon explorateur de fichiers, pour vous montrer maintenant qu'un dossier a été automatiquement généré, juste à côté du fichier Photoshop. Vous remarquez que ce dossier porte le même nom, d'ailleurs, que le fichier auquel il est relié. Et quand je rentre dans ce dossier, mon image a été exportée ici comme par magie. Alors c'est pas tout, je vais retourner dans Photoshop, vous montrer une autre partie de cette fonctionalité. donc qui s'appelle extract, en anglais. Alors, je vais vous montrer ce qui se passe avec un groupe de calques. Prenons, par exemple, cette section qui s'appelle à propos, qui est située, donc, dans la colonne de droite. Alors, je vais cliquer sur cette section, pour aller sélectionner dans le paneau des calques, le calque sur lequel j'ai cliqué. Mais là, vous vous rendez compte que cette section à propos, est en réalité composée de plusieurs calques, qui sont groupés dans un groupe de calques ici qui s'appelle metadata regardez si je le fais clignoter, c'est bien l'ensemble du panneau à propos, qui clignote ici. Alors, je peux faire la même chose avec un groupe de calques, c'est-à-dire que je vais renommer ici ce groupe de calques, et je vais l'appeler, par exemple, about.png. Je valide le nouveau nom de ce groupe de calques, puis regardez ce qui se passe, je retourne dans mon explorateur de fichiers, et j'ai bien un second fichier images qui a été généré. Alors ici, sur Makintosh, j'ai une petit fonctionnalité sympathique, c'est que quand j'appuie sur la barre d'espace, je peux avoir un aperçu de mon fichier sélectionné. Et vous voyez bien que cette image contient tous les éléments, tous les calques, qui étaient, donc, dans ce groupe de calques que j'ai renommé. Alors c'est pas fini puisque regardez, si je retourne dans Photoshop, je vais maintenant apporter un changement à l'un de ces éléments. par exemple, je vais sélectionner ici le titre. Et je vais aller changer la couleur de fond par exemple, de ce titre ici au dessus. Je vais le mettre en vert, admettons. Et donc, avec cette couleur qui est maintenant active, je vais retourner dans mon explorateur de fichiers, et regardez, une nouvelle image a été générée, donc l'image a été mise à jour. Donc, cette fonctionnalité qui s'appelle extract, eh bien elle va vous suivre, une fois qu'elle est active, elle va automatiquement générer des nouveaux fichiers images, à chaque fois que vous apporterez une modification dans votre fichier Photoshop, sans aucune intervention de votre part, une fois que c'est actif, tout est automatique. Alors pour ma part, je n'ai pas besoin de cette image about.png, c'était juste pour la démonstration. Par contre, computer.jpeg, je vais déplacer cette image dans mon site. Retourner dans mon éditeur de code. Et bien évidemment, je vais pouvoir ici, dans l'un de mes paragraphes, eh bien aller chercher ma nouvelle image. Elle se trouve dans le dossier image. Elle s'appelle computer.jpeg, un petit texte alternatif. Et computer, par exemple, comme ceci. Et voilà donc une façon simple, efficace et moderne, d'exporter des images depuis votre fichier Photoshop.

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 !