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

Extraire une image JPG de la maquette

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous allez réaliser le code HTML de la zone de titre de votre page. Pour ce faire, vous allez avoir besoin d'extraire une image de la maquette Photoshop.

Transcription

La deuxième grande zone suivante dans notre site, eh bien, c'est celle qui sera consacrée au titre de l'article du blog qui sera affiché sur cette page. Alors là, rien de compliqué, j'ai simplement une image et puis un texte, c'est le texte en lui-même, qui sera donc supperposé à cette image. Ce qui est intéressant ici, c'est que je vais devoir exporter cette image, en jpeg depuis mon fichier photoshop. Je vais vous montrer une autre technique que celle qu'on a utilisé tout à l'heure. Et pourquoi une autre technique dans ce cas-ci ? Parce que quand je regarde le calque associé à cette image, eh bien, je remarque que le designer a apporté un traitement à cette image. Regardez ici, vous avez deux petites vignettes, et la petite vignette noire que vous avez ici signifie qu'il y a un masque, qui est appliqué sur cette image. Cette image, quand elle a été importée dans Photoshop, elle était beaucoup plus grande que ça, et notre designer a choisi via un masque, de ne prendre qu'une petite partie de cette image. Donc moi, ce que j'ai envie d'exporter ici eh bien, c'est cette image avec son traitement. Et non pas l'image originale telle qu'importée dans le fichier photoshop. C'est pour ça que je vais utiliser une autre technique, alors ça commence de la même façon, c'est un clique droit que le calque, toujours bien sur le nom du calque, et non pas sur les vignettes ici. Donc, clic droit. Et cette fois-ci, je vais choisir exporter sous. Vous voyez que vous avez également la possibilité d'une exportation rapide au format png, moi j'ai pas besoin du format png dans ce cas-ci, ce sera du jpeg, vous allez voir. Donc je vais cliquer sur exporter sous, et là, j'ai cette boîte qui va s'ouvrir, exporter en tant que, et au milieu de cette boîte, eh bien j'ai mon image qui apparaît. Dans le coin supérieur droit, je peux choisir ici le format, auquel je veux exporter mon image. Et voous voyez que par défaut, photoshop me propose png, ici. Alors si j'expose cette photo en png, eh bien elle pèsera 1 méga 1 sur le disque dur. Alors je vais regarder ce qu'il se passe au niveau du jpeg, donc je vais changer de format ici. Et en exportant cette image au format jpeg, eh bien je descend à 539 kilos, donc visiblement, cette image est mieux servie par le format jpeg, que par le format png. Remarquez également la qualité du jpeg est ici à 100%, alors, je vais baisser un petit peu cela, puisqu'en général, sur le web, entre 70 et 80 ça marche plutôt bien, je vais prendre 80 ici, par exemple. Vous voyez qu'au niveau de l'aperçu ici, je n'ai pas perdu beaucoup de qualité, je ne vois même pas, moi, la différence ici. Par contre, au niveau du poids de l'image, je suis descendu à 258 kilos, à comparer, bien sûr, au plus d'un méga qu'on avait avec le format png. Je vais donc exporter cette image, remarquez au passage la taille ici de l'image, qui est 1280 pixels par 400 pixels de haut. Je vais garder la taille naturelle de cette image, mais je pourrais si je le voulais, modifier la taille de l'image ici à l'exportation. Je vais cliquer sur le bouton tout exporter, et je vais exporter ceci au niveau du dossier images de mon site, je vais appeler ça title.jpeg, voilà qui est fait. Et donc je retourne au niveau de Brackets, alors, je vais aller ici fermer ma barre de navigation, ce qui me permet de me concentrer sur la zone de titre, alors ça, ça va être très, très facile. Donc, j'ai besoin d'une image. La source de cette image donc dans le dossier images, c'est l'image qu'on vient d'exporter, donc titre.jpeg. N'oubliez pas, bien sûr, le petit texte alternatif, pour rendre cette image conforme aux standards d'accessibilité. Titre de l'article. Et puis j'ai le titre en lui-même, alors le titre en lui-même, ça sera une balise H1, bien sûr, et là je vais retourner sur internet, je vais vous montrer un autre site, c'est un site qui s'appelle lipsum.com. Et je vais demander à ce site de générer du texte, ici cinq paragraphes de texte, ce qui va me permettre ici de copier les quelques premiers mots. Voilà, retourner dans Brackets, et de les coller au niveau de mon titre de niveau un. Donc rien de bien compliqué ici au niveau de mon code HTML, simplement une image et un titre dans une balise div.

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 !