Tutorial web n° 1 Photoshop / Image ready : Utilisation des tranches et création d'un rollover sur un bouton

Le but de ce tutorial est de vous apprendre à créer des tranches dans Photoshop , et les utiliser dans image ready pour créer un rollover sur un bouton. Les tranches ont la particularité de découper une image , et ainsi délimiter les zones intéractives d'un site internet ( boutons , gif animés etc .... ).

Dans ce tutorial , on va prendre le menu de ce site , que j'ai réalisé avec cette technique

 

Sélectionnez l'outil tranche dans la palette outils : ( notez que vous pouvez masquer toutes les tranches en faisant CTRL + H , très pratique parfois pour y voir plus clair )

Découpez votre image , en faisant des cliqué / glissé :

 

En enfonçant la touche CTRL , vous avez accès à l'outil sélection de tranche , qui vous permet de déplacer et redimentionner une tranche. Ajustez les à chacun de vos boutons , bannière etc ... Notez qu'il est préférable de créer des tranches sur toute l'image ...

 

Toujours avec l'outil sélection de tranche , double cliquez sur vos tranches pour les renommer ( cette opération est facultative , mais ça permet de mieux s'y retrouver , surtout quand il y a un grand nombre de boutons ). Vous remarquerez qu'il est possible d'entrer directement dans photoshop l'url du bouton , le target , et l'alt tag , mais personnellement , je fais tout ça à la fin dans dreamweaver , au montage final de la page. ( c'est plus logique selon moi )

 

Maintenant , nous allons préparer le fichier pour faire un rollover sur le bouton " news " du site. Notez que les noms de calques que j'utilise sont à titre indicatif , vous n'êtes pas obligé de les renommer mais c'est beaucoup plus simple par la suite pour s'y retrouver.

On va créer un nouveau dossier dans la palette des calques , nommez le bt news ( pour le bouton news ... ). A l'intérieur , on va y placer le calque texte " news ".

 

Dupliquez le calque " news " ( CTRL + J ) et renommez le news over.

 

Ensuite créez un sous - dossier " over " , dans lequel vous placez le calque texte " news over "

 

Maintenant , on va créer un style de calque sur " news over " ( double cliquez sur le calque ). Cochez lueur externe et appliquez les réglages suivants :

 

Appliquez tous les effets que vous souhaitez pour votre rollover ( style de calque , calque de réglage etc ... ). Tous les effets sont à placer dans le sous-dossier " over " , pour faciliter les choses.

Dans cet exemple , j'ai mis un calque de réglages " luminosité / contraste ". Faites une sélection de la taille de votre tranche :

 

Puis créez un style de calque " luminosité / contraste " :

 

Avec les réglages suivants par exemple :

 

Voilà ou vous devez en être si vous masquez le sous-dossier " over " :

 

Et si vous l'affichez :

 

C'est un bon moyen de contrôler si tout fonctionne. Nous sommes sur la bonne voie ...

Ouvrez votre fichier dans image ready avec cet icone en bas de la palette outils ( notez que image ready n'existe plus à partir de la version CS3 de photoshop , si comme moi vous bossez sous CS3 , installez une version antérieure d'image ready. )

Dans image ready nous allons créer un rollover animé. Affichez les palettes " contenu web ", " animation " et les calques ( dans le menu " fenetre " ) ... on va en avoir besoin.

Dans contenu web , sélectionnez la tranche " news " et masquez le dossier " over " dans la palette des calques. Cette opération est très importante , elle définit l'état initial du bouton.

 

Maintenant , nous allons créer le rollover. Dans la palette " contenu web " , sélectionnez votre tranche " news " , faites click droit dessus et sélectionnez " ajoutez un état de transformation par souris "

 

Veillez à ce que votre état " over " soit bien sélectionné , c'est très important , sinon ça ne va pas marcher. Dans la palette animation , créez 3 frames ( soit 4 frames en tout ).

 

Avant de poursuivre , vérifiez que votre tranche " news " est bien sélectionnée dans " contenu web " comme ci dessous :

 

Ensuite , sur la première frame , affichez le dossier " over " et mettez lui une opacité de 25 %

 

Sur la 2 ème frame , mettez lui une opacité de 50 %

 

Sur la 3 ème frame 75 %

 

Sur la 4 ème frame 100 %

 

Ensuite , choisissez " Once " dans le menu , pour jouer l'animation une seule fois. Vous pouvez appuyer sur play pour visualiser votre animation. A ce stade , le rollover est terminé.

 

Maintenant , nous allons créer un état " sélectionné ". C'est à dire , une fois que l'utilisateur a clické sur le bouton , ce dernier reste allumé ou enfoncé par exemple ... Comme pour le rollover , clik droit sur votre tranche , " ajoutez un état de transformation par souris " ...

 

Image ready vous crée par défaut un deuxième état " down ". Faites click droit sur cet état , et choisissez " selected " comme ci dessous ( vous pouvez varier les états , par exemple " out " définit l'état quand la souris sors du bouton , clik quand on click dessus , " down " quand on appui dessus etc ... )

 

Votre état " sélected " est bien sélectionné dans " contenu web ", vous pouvez afficher le dossier " over " , sur la seule et unique frame de cet état :

 

Nous y sommes , votre bouton est enfin configuré , vous pouvez faire un aperçu dans un navigateur web histoire de voir ce que ça donne ( en bas de la palette outils ) :

 

Il ne vous reste plus qu'à optimiser vos images , c'est à dire générer les fichiers images des différents états , ainsi qu'une page html.

Les tranches dans lesquelles il y a de l'animation devront être optimisées en gif , car c'est le seul format image supportant l'animation. Sélectionnez toutes vos tranches animées , et dans la palette animation choisissez gif avec les options suivantes :

 

Toutes les autres images peuvent être optimisées en jgp ou gif , mais préférez le jpg si les images sont complexes ( photo ou nombreux dégradés ). Préférez le gif pour les aplats de couleurs sans dégradés ( fichiers plus légers ). Vous pouvez également choisir le png 24 bits qui possède les même propriétés que le jpg , et qui a l'avantage de gérer la transparence. Dans cet exemple , j'ai choisi jpg pour toutes les tranches non animées , avec ces options :

 

Ensuite , faites fichier / enregistrer une copie optimisée sous , vérifiez que " html et images " est bien activé ainsi que " all slices " :

 

Allez voir ou vous avez enregistré le fichier , Image ready génère automatiquement un fichier html + un dossier qui contient toutes les images !

 

On remarque également que Image ready a bien découpé chaque image en fonction de sa tranche , et qu'il nomme les fichiers exactement comme vous avez nommé vos tranches.

Tutorial by SnowAddict