DECOUPE INTERFACE GRAPHIQUE
Réaliser l'interface d'un site n'est pas une chose facile. Une technique consisterait à créer séparément tous les éléments graphiques de l' interface dans différents fichiers puis de les positionner avec notre éditeur HTML. Cela peut rapidement s'avérer difficile à gérer voire même impossible. Nous allons donc apprendre ici la technique du tranchage. Non seulement nous aurons une vision globale de l'interface avant le découpage. Mais en plus il sera très facile par la suite de faire des modification sans avoir à tout refaire.
La technique consiste à définir différentes zones de notre fichier affin qu'elles soient chacune enregistrées sur des images différentes lors de la finalisation.
Lorsque vous avait terminé votre interface vous devez basculer sur ImageReady. Cliquez donc sur le bouton en bas de la barre d'outils de photoshop.
Vous devriez donc arriver sur ImageReady avec votre interface. Il faut à présent délimiter les zones que vous voulez voir se transformer en fichier. Sélectionnez l'outil tranche. Vous remarquerez aussi l'outil de sélection de tranche qui nous sera utile par la suite.
Pour définir les tranches il suffit de sélectionner l'espace à la façon d'une sélection de dossier. Il est possible de mettre des repères avant le découpage pour être plus précis. D'une façon générale il est bon de faire des tranches différentes quand les couleurs changent trop pour minimiser le poids des images lors de l'optimisation.
Un fois vos tranches déterminées vous devez leur donner un nom à partir de la fenêtre tranche. Ce nom correspond à celui du fichier qui sera créé. Il est très important de donner un nom à chaque tranche car lors du découpage il sera créé un grand nombre de fichiers parasites correspondant aux espaces entre les tranches que vous n'aurait pas définies. Vous pourrez donc rapidement localiser vos tranches des autres fichiers.
Ensuite il faut procéder a l'optimisation de chaque tranche. Il est important d'optimiser au mieux les réglages et types de chaque tranche pour avoir une interface la plus petite possible. Pour des détails sur l'optimisation reportez vous à cet article.
Sur l'image ci-dessous vous pouvez voir une interface avec toutes les tranches mises en place. La plupart du temps on ne définit que des petites tranches. Par exemple pour un cadre on ne prendra qu'une tranche de 1 pixel pour le bord, que l'on placera en fond de tableau lors de l'intégration dans la page HTML.
Une fois toutes les tranches paramètrées il ne vous reste plus qu'à lancer la découpe. Pour cela dans le menu fichier choisissez "Enregistrer une copie optimisée sous ...".
Imageready crée alors un fichier HTML avec la disposition de toutes vos tranches et un répertoire contenant toutes vos tranches.
Personnellement je n'utilise que les images ainsi créées que je place dans la page html de mon template.
Ido designer officiel de Cybersexe.biz pour AdultBizVoice.
