Les outils Web de Photoshop facilitent la création d’éléments pour vos pages Web ou la sortie de pages Web complètes dans des formats prédéfinis ou personnalisés.
Utilisez des calques et des tranches pour créer des pages Web et des éléments d’interface de pages Web (voir les sections Calques et Découpage en tranches des pages Web).
Utilisez des compositions de calques pour tester différentes compositions de pages ou exporter des variantes d’une page. (Voir la section Compositions de calques.)
Créez des images survolées de texte ou de bouton pour les importer dans Dreamweaver ou Flash.
Créez des animations Web avec le panneau Animation, puis exportez-les en tant que fichiers QuickTime ou qu’images GIF animées (voir la section Création d’animations d’images).
Utilisez Adobe Bridge pour créer une galerie Web photo afin de transformer rapidement une série d’images en un site Web interactif à l’aide d’un large éventail de modèles de sites à l’aspect très professionnel.
Pour visionner une vidéo sur la conception de sites Web avec Photoshop et Dreamweaver, rendez-vous à l’adresse Accès à Photoshop depuis Dreamweaver pour améliorer l’image web.
Une transformation par souris est un bouton ou une image d’une page Web qui change d’apparence au passage du curseur de la souris. Pour créer une transformation par souris, vous devez disposer d’au moins deux images : une image principale pour l’état normal et une image secondaire pour l’état transformé.
Photoshop compte de nombreux outils permettant de créer des images de transformations par souris :
Utilisez des calques pour créer les images principales et secondaires. Créez du contenu sur un calque, puis dupliquez le calque et modifiez-le pour créer un contenu similaire tout en conservant l’alignement entre les calques. Lorsque vous créez un effet de transformation par souris, vous pouvez changer le style, la visibilité ou la position du calque, régler les couleurs et la tonalité ou appliquer des effets de filtre (voir la section Duplication de calques).
Vous pouvez également utiliser des styles de calques pour appliquer des effets, tels qu’un cache de couleur, une ombre portée, une lueur ou un estampage, au calque principal. Pour créer les deux images d’une transformation par souris, activez le style de calque, désactivez-le, puis enregistrez l’image dans chacun des états (voir la section Effets et styles de calque).
Utilisez les styles prédéfinis de boutons du panneau Styles pour créer rapidement des boutons à transformation par souris dans trois états possibles : normal, survolé et enfoncé. Dessinez une forme de base avec l’outil Rectangle, puis appliquez un style, tel que Biseau normal, pour transformer automatiquement le rectangle en bouton. Copiez ensuite le calque, puis appliquez d’autres styles prédéfinis, par exemple Biseau souris survolée, pour créer des états de bouton supplémentaires. Enregistrez chacun des calques comme une image distincte pour terminer la création d’un ensemble de transformations par souris.
Utilisez la boîte de dialogue Enregistrer pour le Web et les périphériques pour enregistrer les images de transformations par souris dans un format Web et dans une taille de fichier optimisée. Voir Optimisation des images.
Remarque :
Lorsque vous enregistrez des images de transformations par souris, utilisez une convention de dénomination permettant de distinguer l’image principale (état normal) de l’image secondaire (état transformé).
Une fois que vous avez créé un ensemble d’images de transformations par souris dans Photoshop, utilisez Dreamweaver pour placer les images sur une page Web et ajouter automatiquement le code Javascript pour l’opération de transformation.
Vous pouvez poster sur le Web des images haute résolution avec lesquelles les utilisateurs pourront effectuer un panoramique ou agrandir les vues pour afficher plus de détails. Le téléchargement d’une image de taille standard prend autant de temps que celui d’un fichier JPEG de même taille. Photoshop exporte les fichiers JPEG et le fichier HTML que vous pouvez télécharger vers votre serveur Web.
Photoshop peut afficher les valeurs hexadécimales des couleurs d’une image ou copier la valeur hexadécimale d’une couleur en vue de son utilisation dans un fichier HTML.
Photoshop copie couleurs soit comme un attribut HTMLCOLOR contenant la valeur hexadécimale (color=#xxyyzz) ou comme la valeur hexadécimale seule.
-
Avec l’outil Pipette, placez le pointeur sur la couleur à copier. Cliquez sur le bouton droit de la souris (Windows) ou cliquez en maintenant la touche Contrôle enfoncée (Mac OS), puis choisissez Copier la couleur en HTML ou Copier le code hexadécimal de la couleur.
Définissez la couleur de premier plan à l’aide du panneau Couleur, du panneau Nuancier ou du sélecteur de couleurs Adobe. Dans le menu du panneau Couleur, choisissez la commande Copier la couleur en HTML ou Copier le code hexadécimal de la couleur.
Dans la boîte de dialogue Enregistrer pour le Web, cliquez sur l’échantillon de couleur ou sélectionnez Cache > Autre. Dans le sélecteur de couleurs Adobe, cliquez avec le bouton droit sur la valeur hexadécimale, puis sélectionnez Copier.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.