|
|
Après avoir terminé tous les changements sur votre kit graphique dans adobe Photoshop vous devez mettre à jour ces changements dans vos fichiers HTML.
D'abord vous devez connaître quelques fonctions de base dans Photoshop tel que les tranches. Chaque tranche dans un fichier de PSD est représentée par un rectangle bleu. Les tranches dans PSD classent marqué par des rectangles bleus. Si vous ne pouvez pas voir les tranches, sélectionnez dans le menu déroulant du haut Affichage/Afficher/Tranches... Pour contrôler les tranches vous devez utiliser l'outil de tranche du panneau outils (touche "K"). En fait il y a deux outils de tranche:
Outil Tranche  et outil sélection de tranche  . Utilisez "Shift+K" pour passer d’un outil à l’autre. Toutes les tranches ont déjà été placées dans le fichier de PSD de votre kit graphique. Ainsi vous n’aurez besoin que de l'outil sélection de tranche.
Avant de mettre à jour des images en employant la fonction Sauvegarder pour le web assurez vous qu’aucune des tranches que vous voulez sauver n'en recouvre une autre. Par exemple une grande tranche contenant l’image du fond d’écran peut cacher une plus petite tranche contenant une partie de l'image d’un bouton. Donc avant de sauver cette tranche vous devez la faire passer au premier plan. Pour ce faire vous devez choisir cette tranche à l'aide de l'outil sélection de tranche.
Allez alors sur le panneau d'options au haut de votre écran. Si vous ne pouvez pas voir ce panneau, sélectionnez Fenêtre/Options dans le menu déroulant en haut de votre écran. Sur la gauche du panneau vous verrez quatre boutons qui permettent d’organiser les tranches:
Premier plan, En Avant, En Arrière et Arrière plan. Cliquez sur premier plan pour mettre la tranche au premier plan. Si à l'avenir vous devez mettre à jour une petite tranche d'image de bouton vous devrez déplacer au dernier plan les grandes tranches pour avoir accès aux petites tranches.
Bouton de déplacement de tranche
Car vous le savez une partie de texte présent dans le fichier PSD, n’est la qu’à titre d’exemple (il sera remplacé par du texte en html dans le kit graphique). Ainsi avant de sauvegarder les images contenant de tel texte vous devez les cacher. Pour ce faire vous devez choisir la couche contenant ce(s) texte(s).
La méthode la plus simple est de cliquer sur l’image en appuyant sur la touche "Ctrl". Mais si quelques calque transparent se trouve au-dessus du calque d'image le calque supérieur sera sélectionné au lieu du calque d'image que vous désirez atteindre.
Sélectionnez le panneau calques, si pour une raison quelconque le panneau n’était pas apparent, choisissez le menu déroulant Fenêtre/Calques en haut de votre écran. Le calque avec la partie droite assombrie est le calque courant.
Sur la gauche du nom de calque vous pouvez voir une icône en forme d’"oeil". Cliquez dessus pour que le calque apparaisse ou disparaisse et constatez dans la fenêtre principale quel élément d'image apparaît ou disparaît. Si c'est l’image que vous voulez cacher - vous avez donc choisi le bon calque. Si le calque sélectionné n’est pas le bon vous trouverez ci-dessous une autre manière.
Cliquez avec le bouton droit sur l'image. La liste des calques contenant des images apparaîtra sous le pointeur. Choisissez l’un des calques de cette liste. Employez la procédure décrite ci-dessus pour vous assurer que vous avez choisi le bon calque
Vous avez donc choisi le calque avec l'image que vous voulez supprimer. Pour la cacher, cliquez sur l'icône en forme d’"oeil" à la gauche du nom du calque.
Maintenant il est temps de mettre à jour vos images en utilisant la fonction Enregistrer pour le Web.
Choisissez Fichier/Enregistrer pour le Web....
Dans le menu déroulant en haut de votre écran ou en pressant les touches "Ctrl+Alt+Shift+S". La fenêtre de d’enregistrement pour le Web apparaîtra.
Dans cette fenêtre vous pouvez changer des options pour optimiser le poids des images. En fait nos Webmasters ont déjà placé des options d'optimisation pour un meilleur équilibre entre la qualité et le poids. Mais si vous voulez que votre site se charge plus rapidement vous pouvez diminuer la qualité d'image.
Sélectionnez la tranche avec l'outil de sélection de tranche. Sur la droite vous verrez une panneau avec des options d'image. Vous pouvez changer qualité des fichiers images JPEG ou de couleurs pour les fichier GIF et png.
Choisissez maintenant la tranche que vous voulez mettre à jour en cliquant dessus avec l'outil sélection de tranche. Si vous voulez mettre à jour plusieurs tranches immédiatement vous devez les choisirs pressant la touche "Shift".
Enregistrer une copie optimisée sous..
Quand vous avez choisi toutes les tranches vous voulez mettre à jour cliquez sur le bouton enregistrer dans le coin supérieur droit. La fenêtre Enregistrer une copie optimisée sous.. apparaîtra.
Naviguez jusqu'à au répertoire contenant les images de votre kit graphique. Changez L’option "Type" en images et l’option tranches en "Tranches sélectionnées". Les autres options peuvent endommager la structure originale de votre kit graphique.
Enregistrer une copie optimisée sous..(2)
Si tout est en ordre vous verrez apparaître une fenêtre demandant la confirmation que vous demandez le remplacement des images. Confirmez cette demande.
Remplacement des fichiers modifiés..
Si une telle fenêtre n'apparaissait pas assurez-vous que vous tentez de sauvegardez les images dans le bon répertoire. Vérifiez en outre le nom des tranches en double cliquant dessus. Le nom et le type d'image doivent correspondre aux images dans votre kit graphique.
Maintenant il est temps de vérifier des modifications que vous avez fait. Allez dans le répertoire contenant votre kit graphique et lancer une pages pour voir les modifications en double cliquant sur un des fichier html contenant les images que vous venez de modifier.
Retour vers notre liste de tutoriels pour Photoshop
|
|
