Accueil Formations Apprendre Photoshop CC pour le Web - Photoshop orienté Web et mobile

Guide pour Créer un Bouton Rollover en PSD et PNG

Retour à la formation
Chapitre 9 Leçon 2
Précédent
Suivant

Découvrez comment préparer un fichier PSD pour l’exportation au format PNG afin de créer un Rollover. Intégrez cet élément en HTML via Dreamweaver.

Détails de la leçon

Description de la leçon

Dans cette vidéo, nous vous guidons à travers les étapes nécessaires pour préparer et exporter un fichier PSD au format PNG, en mettant l'accent sur la création d'un Rollover. Tout d'abord, nous expliquerons l'importance de masquer le texte du bouton avant l'exportation, puisque celui-ci sera éditable dans Dreamweaver. Ensuite, nous vous montrerons comment utiliser l'option 'Enregistrer pour le Web' pour choisir le format PNG 24, garantissant ainsi la conservation de la transparence. Nous vérifierons aussi le poids du fichier pour s'assurer qu'il ne dépasse pas 3 Ko, rendant ainsi l'image légère et facile à charger sur les pages web. Pour finir, nous vous détaillerons le processus d'intégration du fichier PNG en HTML, nommant le fichier comme 'bouton.png' pour plus de clarté et de praticité.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :


  • Apprendre à masquer les textes d'un bouton dans un fichier PSD.
  • Savoir exporter une image au format PNG 24 en conservant la transparence.
  • Comprendre comment intégrer cette image en HTML à l'aide de Dreamweaver.

Prérequis pour cette leçon

Pour suivre cette vidéo, il est recommandé d'avoir des connaissances de base en Adobe Photoshop, en Dreamweaver ainsi qu'en langage HTML.

Métiers concernés

Les compétences abordées dans cette vidéo sont particulièrement pertinentes pour les métiers de web designer, front-end developer et graphiste digital.

Alternatives et ressources

Comme alternatives à Dreamweaver, vous pouvez utiliser d'autres éditeurs de code comme Visual Studio Code, Atom, ou encore Sublime Text. Photoshop peut aussi être remplacé par des logiciels comme GIMP ou Affinity Photo.

Questions & Réponses

Le texte du bouton doit être masqué avant l'exportation car il sera édité directement dans le code HTML/CSS avec Dreamweaver, ce qui permet de garder une flexibilité sur le contenu sans nécessiter de modifier l'image.
Le format PNG 24 est recommandé pour conserver la transparence lors de l'exportation, car il supporte les canaux alpha nécessaires pour des arrières-plans transparents.
Il est recommandé que le poids de l'image PNG soit inférieur à 3 Ko pour garantir une bonne performance et un chargement rapide sur les pages web.