Adobe Photoshop CS6 Classroom in a Book

1. Les tranches définissent la structure des pages web et la fonctionnalité des liens.

Lorsque vous définissez des tranches dans une image, Photoshop crée un tableau HTML ou des couches de feuilles de style en cascade (CSS) pour contenir et aligner les tranches.

Diviser pour mieux régner. Les tranches sont des régions rectangulaires découpées dans une image Photoshop, chacune agissant comme un élément distinct au sein de la structure d'une page web. Ces tranches sont essentielles pour créer des mises en page complexes à partir d'un seul fichier image, permettant à différentes zones de renvoyer à différentes URL ou d'avoir des comportements uniques. Photoshop utilise des tableaux HTML ou des couches CSS pour disposer et aligner ces tranches de manière fluide, garantissant ainsi que la page web s'affiche correctement dans un navigateur.

Tranches manuelles vs. automatiques :

• Tranches manuelles : Créées manuellement, offrant un contrôle précis sur des zones spécifiques.
• Tranches automatiques : Générées automatiquement pour remplir l'espace restant, garantissant que l'image entière est couverte.

Éléments interactifs. Les tranches transforment des images statiques en pages web interactives en permettant l'attribution d'URL, de texte alternatif et d'autres attributs HTML à des régions spécifiques. Cela permet de créer des menus de navigation, des cartes d'images et d'autres éléments interactifs directement dans Photoshop, simplifiant ainsi le processus de conception web.

2. Optimisez les images pour une diffusion web afin d'équilibrer qualité et rapidité.

Le format JPEG est conçu pour préserver la large gamme de couleurs et les subtiles variations de luminosité des images à tonalité continue telles que les photographies.

Un acte d'équilibre. L'optimisation des images pour le web est une étape cruciale dans la conception web, impliquant un compromis soigneux entre la qualité de l'image et la taille du fichier. Des tailles de fichiers plus petites se traduisent par des temps de chargement plus rapides, améliorant l'expérience utilisateur et réduisant la consommation de bande passante. Photoshop fournit des outils pour ajuster les paramètres de compression, les palettes de couleurs et d'autres paramètres afin d'atteindre l'équilibre optimal.

Choix de formats :

• JPEG : Idéal pour les photographies et les images complexes avec des tons continus, offrant des niveaux de compression ajustables.
• GIF : Mieux adapté aux graphiques avec des palettes de couleurs limitées, tels que les logos, les icônes et les animations simples, prenant en charge la transparence.

Outils de Photoshop. La fonction "Enregistrer pour le web" de Photoshop permet des comparaisons côte à côte de différents paramètres d'optimisation, permettant aux concepteurs d'évaluer visuellement l'impact de la compression sur la qualité de l'image. Ce processus itératif garantit que les images sont optimisées pour le web sans sacrifier les détails visuels essentiels.

3. Zoomify crée des images web interactives et haute résolution.

Avec la fonction Zoomify, vous pouvez publier des images haute résolution sur le web que les utilisateurs peuvent faire défiler et zoomer pour voir plus de détails.

Plongée en profondeur. Zoomify est une fonctionnalité de Photoshop qui vous permet d'exporter des images haute résolution pour le web d'une manière qui permet un défilement et un zoom interactifs. Cela est particulièrement utile pour mettre en valeur des œuvres d'art détaillées, des cartes ou des photographies où les utilisateurs doivent explorer des zones spécifiques de près. Zoomify génère automatiquement le HTML, le JavaScript et les tuiles d'image nécessaires pour créer une expérience de zoom fluide.

Détails techniques :

• Tuilage : L'image originale est découpée en plus petites tuiles, qui sont chargées dynamiquement à mesure que l'utilisateur zoome.
• Image de base : Une version basse résolution de l'image est initialement chargée, fournissant un aperçu rapide.
• Contrôles interactifs : Les utilisateurs peuvent faire défiler, zoomer et naviguer dans l'image à l'aide de contrôles intuitifs.

Expérience utilisateur. Zoomify améliore l'engagement des utilisateurs en leur permettant d'explorer les images à leur propre rythme et de se concentrer sur les zones d'intérêt. Cette fonctionnalité est particulièrement précieuse pour les applications éducatives, artistiques et commerciales où une visualisation détaillée est essentielle.

4. Les galeries web présentent des images avec des mises en page personnalisables.

En utilisant Bridge, vous pouvez facilement présenter vos images dans une galerie en ligne, permettant aux visiteurs de voir des images individuelles ou un diaporama de votre travail.

Récit visuel. Les galeries web offrent un moyen structuré et visuellement attrayant de présenter des collections d'images en ligne. Adobe Bridge propose des outils intégrés pour créer des galeries web personnalisables, complètes avec des vignettes, des légendes et une fonctionnalité de diaporama. Ces galeries sont idéales pour les photographes, les artistes et les designers qui souhaitent présenter leur travail de manière professionnelle et engageante.

Options de personnalisation :

• Modèles de mise en page : Choisissez parmi divers modèles préconçus pour convenir à vos préférences esthétiques.
• Intégration de métadonnées : Affichez des légendes d'images, des descriptions et d'autres métadonnées.
• Fonctionnalité de diaporama : Activez la lecture automatique ou manuelle du diaporama.

Flux de travail simplifié. Bridge simplifie le processus de création de galeries web en automatisant la génération de code HTML, CSS et JavaScript. Cela permet aux utilisateurs de se concentrer sur la sélection de leurs images et la personnalisation de l'apparence de la galerie sans avoir besoin d'écrire du code manuellement.

5. Les tranches sont créées à l'aide de l'outil Tranche ou à partir de calques existants.

Vous pouvez créer des tranches d'image avec l'outil Tranche ou en convertissant des calques en tranches à l'aide du menu Calque.

Deux chemins vers la découpe. Les tranches, les éléments constitutifs des mises en page web dans Photoshop, peuvent être créées de deux manières principales : en utilisant l'outil Tranche pour une précision manuelle ou en convertissant des calques existants en tranches pour une approche plus automatisée. Chaque méthode offre des avantages distincts selon les exigences de conception et les préférences de flux de travail.

Découpe manuelle :

• Outil Tranche : Permet de dessiner librement des tranches rectangulaires, offrant un contrôle maximal sur les dimensions et le placement des tranches.
• Outil de sélection de tranche : Utilisé pour sélectionner, modifier et aligner les tranches existantes.

Découpe automatisée :

• Tranches basées sur les calques : Génère automatiquement des tranches en fonction des limites des calques, simplifiant le processus pour les conceptions déjà organisées en calques.

Flexibilité. Que vous préfériez la précision de la découpe manuelle ou l'efficacité de la découpe basée sur les calques, Photoshop offre les outils nécessaires pour créer une mise en page web bien structurée à partir d'un seul fichier image.

6. L'optimisation des images équilibre la taille du fichier et la qualité visuelle.

En termes simples, il s'agit d'équilibrer la taille du fichier avec un bon rendu visuel.

L'équation de l'optimisation. L'optimisation des images est l'art de trouver le juste milieu entre la taille du fichier et l'attrait visuel. Des tailles de fichiers plus petites garantissent des temps de chargement plus rapides et une expérience utilisateur plus fluide, tandis que le maintien d'une qualité d'image acceptable est crucial pour l'impact visuel. Photoshop fournit une gamme d'outils et de techniques pour atteindre cet équilibre délicat.

Techniques clés d'optimisation :

• Sélection du format de fichier : Choisir le format approprié (JPEG, GIF, PNG) en fonction du contenu de l'image.
• Paramètres de compression : Ajuster les niveaux de compression pour réduire la taille du fichier tout en minimisant les artefacts visuels.
• Réduction de la palette de couleurs : Limiter le nombre de couleurs dans une image pour réduire la taille du fichier (particulièrement efficace pour les images GIF).

Processus itératif. L'optimisation des images est souvent un processus itératif, impliquant des expérimentations avec différents paramètres et une évaluation visuelle des résultats. La boîte de dialogue "Enregistrer pour le web" de Photoshop permet des comparaisons côte à côte de différents paramètres d'optimisation, permettant aux concepteurs de prendre des décisions éclairées.

7. Zoomify permet l'exploration interactive d'images haute résolution.

L'image de taille de base se télécharge dans le même temps qu'un fichier JPEG de taille équivalente.

Zoom et défilement. Zoomify est une fonctionnalité puissante de Photoshop qui vous permet d'exporter des images haute résolution pour le web d'une manière qui permet un défilement et un zoom interactifs. Cela est particulièrement utile pour mettre en valeur des œuvres d'art détaillées, des cartes ou des photographies où les utilisateurs doivent explorer des zones spécifiques de près. Zoomify génère automatiquement le HTML, le JavaScript et les tuiles d'image nécessaires pour créer une expérience de zoom fluide.

Aspects techniques :

• Tuilage d'image : L'image originale est divisée en plus petites tuiles, qui sont chargées dynamiquement à mesure que l'utilisateur zoome.
• Image de base : Une version basse résolution de l'image est initialement chargée, fournissant un aperçu rapide.
• Contrôles interactifs : Les utilisateurs peuvent faire défiler, zoomer et naviguer dans l'image à l'aide de contrôles intuitifs.

Engagement accru. Zoomify améliore l'engagement des utilisateurs en leur permettant d'explorer les images à leur propre rythme et de se concentrer sur les zones d'intérêt. Cette fonctionnalité est particulièrement précieuse pour les applications éducatives, artistiques et commerciales où une visualisation détaillée est essentielle.

8. Les galeries web offrent une présentation d'images personnalisable.

Adobe Bridge propose des outils intégrés pour créer des galeries web personnalisables, complètes avec des vignettes, des légendes et une fonctionnalité de diaporama.

Mettez en valeur votre travail. Les galeries web offrent un moyen structuré et visuellement attrayant de présenter des collections d'images en ligne. Adobe Bridge propose des outils intégrés pour créer des galeries web personnalisables, complètes avec des vignettes, des légendes et une fonctionnalité de diaporama. Ces galeries sont idéales pour les photographes, les artistes et les designers qui souhaitent présenter leur travail de manière professionnelle et engageante.

Fonctionnalités clés :

• Modèles de mise en page : Choisissez parmi divers modèles préconçus pour convenir à vos préférences esthétiques.
• Intégration de métadonnées : Affichez des légendes d'images, des descriptions et d'autres métadonnées.
• Fonctionnalité de diaporama : Activez la lecture automatique ou manuelle du diaporama.

Création simplifiée. Bridge simplifie le processus de création de galeries web en automatisant la génération de code HTML, CSS et JavaScript. Cela permet aux utilisateurs de se concentrer sur la sélection de leurs images et la personnalisation de l'apparence de la galerie sans avoir besoin d'écrire du code manuellement.

Dernière mise à jour: March 20, 2025