Encore CS3

Création de sous-images dans Photoshop

Les sous-images peuvent être difficiles à comprendre, en particulier si vous êtes habitué à créer des effets de survol (« rollovers ») pour des pages Web. Même si les sous-images et les effets de survol des pages Web semblent identiques à première vue - ils indiquent tous deux les sous-images de boutons - les sous-images sont très différentes en raison des exigences du DVD.

Voici les premiers concepts que vous devez comprendre :

  • La sous-image est similaire à une superposition transparente recouvrant le menu.

  • Le lecteur DVD ou Blu-ray utilise la même superposition pour les trois états de bouton (même l'état normal utilise la même sous-image).

  • C'est le jeu de couleurs, pas les couleurs de votre image d'origine, qui détermine finalement les couleurs affichées dans la sous-image. (D'un point de vue technique, la superposition de la sous-image est une image indexée à deux bits.)

  • La sous-image est limitée à trois couleurs (chacune représentée par un calque dans le jeu de boutons), mais il est possible de modifier ces trois couleurs et leur visibilité pour chaque état du jeu de couleurs. (La réglementation sur les DVD n'autorise qu'une largeur de bande limitée pour les sous-images de boutons et les sous-titres.)

    Considérez la sous-image comme une peinture par numéros avec des zones de couleur 1, 2 ou 3. Le jeu de couleurs est la clé de couleur qui détermine les couleurs 1, 2 et 3 (le cas échéant). En outre, les trois couleurs peuvent avoir des paramètres de définition et d'opacité différents pour chaque état de bouton. En modifiant les définitions de couleur pour chaque état, vous pouvez changer les couleurs de chaque zone ; en modifiant l'opacité des couleurs pour chaque état, vous déterminez si la zone est visible ou pas dans un état spécifique.

    Créez l'image utilisée pour la sous-image en créant des calques distincts pour chaque couleur. Les noms de calques doivent inclure les préfixes : (=1) pour les zones utilisant la couleur 1, (=2) pour les zones utilisant la couleur 2 et (=3) pour les zones utilisant la couleur 3.

    Afficher le graphique à sa taille d'origine
    Relation entre les calques de sous-images dans le jeu de boutons et les définitions de jeu de couleurs

    A.
    Calques distincts pour chaque couleur (1, 2 et 3)

    B.
    Les trois calques se combinent pour créer la superposition

    C.
    Couleurs et opacité spécifiées dans le jeu de couleurs de menu d'Encore.

    D.
    Même superposition utilisée, mais la définition de la surbrillance varie pour chaque état : Normal (au-dessus), Sélectionné (au milieu), Activé (en bas)

Directives pour la création de sous-images

Tenez compte des directives suivantes lors de la création de calques de sous-images :

Même superposition utilisée pour tous les états
La même image ou superposition est utilisée pour les trois états d'un bouton (normal, sélectionné et activé).

Calques aplatis en une seule superposition
Les calques de sous-image que vous créez sont aplatis en une seule image dans le processus de génération.

Priorité du calque supérieur
Si les calques de sous-image d'un groupe de calques de boutons se superposent, le calque supérieur a la priorité lorsque les calques sont aplatis en une superposition finale.

Les calques font partie d'un groupe de calques de boutons
Les calques de sous-image pour un bouton doivent être contenus dans le groupe de calques de ce bouton.

Uniquement des couleurs unies
Les éléments de ces calques doivent faire appel à des couleurs unies et des bords nets. Utilisez une couleur unie par calque. N'utilisez pas de dégradés, bavure ou de lissage pour les calques de sous-image. Les gradations de couleurs ne sont pas possibles dans les sous-images.

Les définitions de couleur déterminent l'aspect des états de bouton
Même si vous créez des calques pour chaque couleur, c'est le numéro de la couleur (1, 2 ou 3), pas la valeur de la couleur que vous utilisez, qui est enregistré dans la superposition. Le jeu de couleurs est la clé ou l'index de couleurs et comprend les valeurs de couleur. (Comme mentionné ci-dessous, Encore génère automatiquement un jeu de couleurs sur la base de la couleur de chaque calque.)

Visibilité des calques déterminée dans le jeu de couleurs
Utilisez le paramètre d'opacité dans le jeu de couleurs pour déterminer la visibilité des éléments dans chaque état. N'utilisez pas l'icône en forme d'oeil du panneau Calques de Photoshop.

Différentes définitions de couleur pour chaque état
Les couleurs sont définies dans la boîte de dialogue Jeu de couleurs de menu d'Encore. Vous pouvez spécifier pour chaque couleur un paramètre de couleur et d'opacité différent. En modifiant les couleurs et leur opacité dans chaque état, la mise en évidence peut sembler assez différente, même si elle utilise la même superposition. Par exemple, la couleur 1 peut être transparente pour l'état normal (opacité définie sur zéro), rouge pour l'état sélectionné et bleu pour l'état activé. Ainsi, tous les éléments des calques avec le préfixe (=1) n'apparaissent pas dans l'état normal, sont rouges dans l'état sélectionné et bleus dans l'état activé.

Jeu de couleurs automatique généré à partir des calques
Même si les couleurs que vous utilisez dans les calques ne sont pas intégrées à la superposition de la sous-image, Encore crée un jeu de couleurs sur la base de ces valeurs. En appliquant les couleurs de votre choix pour l'état du bouton sélectionné aux trois calques, vous pouvez définir la couleur de mise en évidence dans Photoshop et gagner du temps en modifiant le jeu de couleurs dans Encore. (Pour plus de détails, voir A propos des jeux de couleurs pour les menus.)

Les calques représentent des zones de couleur, pas des états
Il est important de comprendre que les calques de sous-image représentent des zones de couleur correspondant au jeu de couleurs. Ils ne représentent pas les états d'activation du bouton.

Par conséquent, même si la même superposition de sous-image est utilisée pour chaque état, il est possible de faire varier les éléments visibles dans la sous-image en modifiant la définition des couleurs et de l'opacité de chaque état.

Création d'une sous-image dans Photoshop

  1. Dans le panneau Projet ou Menus, sélectionnez le menu contenant les boutons nécessitant des sous-images.
  2. Choisissez Edition > Menu Modifier dans Photoshop ou cliquez sur l'outil Menu Modifier dans Photoshop  du panneau Outils.

    Photoshop démarre et affiche le menu sélectionné.

  3. Dans le panneau Calques de Photoshop, sélectionnez le groupe de calques de boutons pour lequel vous souhaitez créer une sous-image.
  4. Créez un calque et ajoutez le préfixe (=1) au début du nom.

    Sur ce calque, créez les éléments de sous-image que vous souhaitez afficher à l'aide de la couleur 1. Les éléments doivent afficher une couleur unie, sans dégradé, bavure ou lissage. Notez qu'il est possible de déterminer la visibilité de ces éléments dans chaque état du jeu de couleurs. Si nécessaire, vous pouvez créer plusieurs calques pour une couleur (par exemple, si vous souhaitez du texte et un contour de bouton dans cette couleur). Chaque calque de cette couleur doit avoir le même préfixe.

    Définissez la couleur et l'opacité de tous les éléments du calque comme vous souhaitez que le calque apparaisse dans l'état sélectionné. (Tous les éléments doivent utiliser les mêmes valeurs.) Lorsque vous importez le menu, Encore génère automatiquement un jeu de couleurs à l'aide de cette définition de couleurs et cette valeur d'opacité pour les états Sélectionné et Activé. (Voir Jeu de couleurs automatique.)
  5. Si vous souhaitez une sous-image multicolore, répétez les étapes trois et quatre pour les couleurs 2 et 3, en utilisant les préfixes de nom de calque (=2) pour la couleur 2 et (=3) pour la couleur 3.
  6. Si vous souhaitez créer des sous-images pour un autre bouton, répétez les étapes 3 à 5.
  7. Dans Photoshop, choisissez Fichier > Enregistrer, puis ensuite Fichier > Fermer.

    Photoshop enregistre le fichier dans le dossier du projet. Il ne remplace pas le fichier d'origine que vous avez importé dans votre projet.

    Remarque :  Lorsque vous importez un menu dans Encore, il crée une copie du menu. La commande Modifier dans Photoshop ouvre cette copie, pas le fichier d'origine. Photoshop enregistre toutes les modifications apportées à la copie. Si vous souhaitez également mettre à jour l'original, il est important d'enregistrer d'abord la copie pour que votre projet comprenne le menu révisé. Après l'enregistrement de la copie, il est également possible d'enregistrer les modifications dans le fichier original en utilisant la commande Fichier > Enregistrer sous dans Photoshop ou la commande Menu > Enregistrer le menu comme fichier dans Encore.
  8. Définissez les valeurs de couleurs et d'opacité utilisées pour chaque état de bouton et attribuez un groupe de tons clairs à chaque bouton selon vos besoins. Voir Création d'un jeu de couleurs à partir du jeu de couleurs automatique et Attribution des jeux de couleurs et des groupes de tons clairs.
Vous pouvez laisser Encore générer automatiquement une sous-image pour le texte d'un bouton. L'avantage que présente cette propriété de bouton est qu'elle régénère la sous-image automatiquement si vous modifiez le texte. Voir Mise à jour automatique du texte de sous-image.