Citation
Tout d'abord quelques notions sur le gif : ces principales atouts sont que ce format permet de faire des animations et permet de d'avoir des zones transparentes, par contre il ne permet pas de compresser l'image tel que le fait le jpg donc les fichiers sont tout de suite beaucoup plus lourd en gif de meme il ne permet d'afficher que 256 couleurs simultanément au maximum.
Donc n'utiliser le gif que lorsque cela s'avére nécessaire ( que si vous avez une animation ou lorsque vous avez des zones transparentes sur votre image ) et de préférence pas sur des images de grandes tailles.
--------------------------------------------------------------------------------
..::Le Détourage::..
-->Pour commencez nous allons voir comment faire un détourage propre, tout d'abord prendre une image ...
-->Si votre image est déja pixélisé sur votre psd avant l'enregistrement, (c'est que vous avez travaillé comme un cochon ) ce n'est pas la peine de continuer, le fait de l'enregistrer en gif n'arrangera pas les choses !
( le contour n'est pas transparent,j'ai mis un fond blanc pour que la pixélisation ressorte mieux )
-->Enregistrer votre image en faisant Fichier>>Enregistrer pour le web
! Il est préférable d'enregistrez votre gif en faisant Fichier>>Enregistrer pour le web que Fichier>>Enregistrer car dans ce cas là vous ne pourrez pas réglez les paramétres d'enregistrement.
-->Vous allez avoir cette fenetre qui va s'ouvrir ...
La j'ai cliquez sur l'onglet 2 vignettes qui affiche simultanément à gauche votre image d'origine ( votre psd ) et à droite votre image telle qu'elle sera aprés l'enregistrement. Dans les paramétres choisissez le format d'enregistrement que vous souhaitez, en l'occurence gif.
! Maintenant nous allons utiliser une option qu'il est intéréssant de connaitre détourage : pour résumer le gif permet d'avoir des zones transparentes mais ne gére pas l'opacités des pixels, par exemple sur l'avatar de l'exemple le bord de la partie ronde qui dépasse n'est pas complétement opaque, mais les 1 ou 2 pixels du bord sont en partie transparent ( cela permet de lisser les bords sur des formes dont les bords ne sont pas droits) et comme le gif ne gére pas ça il va falloir lui donner une couleur de détourage pour mélanger avec les pixels en partie transparent.
Par exemple le détourage par défaut de photoshop et blanc ...
! Si on enregistre une image pour Forum-Toshop cela ne posera aucun probléme car le fond ets trés clair ( proche du blanc ), mais par contre si on l'utilise sur un autre forum dont le fond est foncé ça fais tout de suite moins beau.
--> Donc pour le détourage le mieux c'est d'utiliser comme couleur la couleur du fond dans lequel va aller votre image, donc cliquer sur le rectangle de couleur à coté de détourage et choisissez votre couleur.
! Si votre image est un avatar ou une sign, faites attention car sur la plupart des forums ( comme Forum-Toshop ), les posts ne sont pas tous de la meme couleur, ils sont alternés un clair et un autre un peu plus foncé, donc choisissez comme couleur de détourage une couleur qui se situe entre le deux ( par exemple pour Forum-Toshop #e7e9ec ).
--------------------------------------------------------------------------------
..::L'Optimisation::..
! 2ème chose importante : Optimiser vos gif, pour un gif, la taille devient vite conséquente lorsqu'il y a une animation.
Dans Image Ready nous retrouvons la meme fenetre d'optimisation que dans Photoshop.
Si vous n'avez pas la fenetre optimisé dans Image Ready, faites Fenetre et cochez Optimisé.
Les 3 options intéréssantes pour réduire la taille d'un gif sont Perte de qualité, Couleurs et Tramage ... ( c'est valables aussi pour photoshop )
Perte de qualité : tout est dans le titre, un peu comme pour le jpg vous allez pouvoir compressez un peu la taille et perdre en qualité.
Couleur : un gif peu avoir au mamixum 256 couleurs, mais peu aussi en avoir moins.
Tramage : ajoute un motif de tramage pour réduire l'effet de bande.
Par exemple ...
sur cette image vous avez en haut à gauche l'image originale (psd) en haut à droite l'image avec les paramétres d'enregistrement par défaut ( qualité maximale) et en bas à gauche l'image qui m'intéresse, donc mon image de sortie optimisé. Comme vous pouvez le voir sur la capture en optimisant mon gif, j'ai réussi à baissé la taille de moitié (29,34 ko contre 62,65 ko avant) en perdant trés peu en qualité simplement en mettant 64 couleurs, 0% en tramage et 16% de perte de qualité.
--------------------------------------------------------------------------------
..::Les Traces::..
un probléme fréquemment rencontré et l'apparition de traces qui n'existe pas sur le psd, mais qu'on retrouve sur le gif.
Comme sur cette image.
Ces traces sont pour la plupart du temps des restes d'images qui ont été (mal) effacés avec la gomme, ou d'un détourage avec l'option "filtre >> extraire".
Pour mieux comprendre, voici une capture vue en zoom 1x et 1600 de la même trace.
En zoom 1x elle est limite visible, zoomé on la voit déjà mieux, mais c'est pas encore ça.
Par contre si on fait "enregistrer pour le web" en gif c'est plus flagrant.
( ici avec 2 vignettes : originale et optimisée )
L'explication est simple : ces traces sont les résidus d'un effaçage ou de l'extraction d'une image, ce qui fait que les pixels sont semi-transparent, sur le psd ça ne se verra pas forcément, mais lors de l'enregistrement en gif comme ce format ne gére que les pixels opaques, il va appliquer une couleur de détourage ( blanc par défaut dans photoshop ) (voir 1ére partie du tuto "Le Détourage" ), et comme le fond du forum n'est pas blanc cette trace va tout de suite ressortir.
---> Donc pour résumer, je vous conseille d'éviter d'extraire vos images avec l'option "filtre >> extraire" , quand vous voulez effacer quelque chose avec la gomme, travaillez sur une fenetre zoomé, vous verrez mieux ce que vous faites, ça vous évitera d'en oublier. Pour l'enregistrement, préférer "enregistrer pour le web" plutot que "enregistrer sous ..." vous pourrez voir votre image telle quelle sera lorsque qu'elle sera enregistrer, et de plus vous pourrez choisir la couleur de détourage.
Donc n'utiliser le gif que lorsque cela s'avére nécessaire ( que si vous avez une animation ou lorsque vous avez des zones transparentes sur votre image ) et de préférence pas sur des images de grandes tailles.
--------------------------------------------------------------------------------
..::Le Détourage::..
-->Pour commencez nous allons voir comment faire un détourage propre, tout d'abord prendre une image ...
-->Si votre image est déja pixélisé sur votre psd avant l'enregistrement, (c'est que vous avez travaillé comme un cochon ) ce n'est pas la peine de continuer, le fait de l'enregistrer en gif n'arrangera pas les choses !
( le contour n'est pas transparent,j'ai mis un fond blanc pour que la pixélisation ressorte mieux )
-->Enregistrer votre image en faisant Fichier>>Enregistrer pour le web
! Il est préférable d'enregistrez votre gif en faisant Fichier>>Enregistrer pour le web que Fichier>>Enregistrer car dans ce cas là vous ne pourrez pas réglez les paramétres d'enregistrement.
-->Vous allez avoir cette fenetre qui va s'ouvrir ...
La j'ai cliquez sur l'onglet 2 vignettes qui affiche simultanément à gauche votre image d'origine ( votre psd ) et à droite votre image telle qu'elle sera aprés l'enregistrement. Dans les paramétres choisissez le format d'enregistrement que vous souhaitez, en l'occurence gif.
! Maintenant nous allons utiliser une option qu'il est intéréssant de connaitre détourage : pour résumer le gif permet d'avoir des zones transparentes mais ne gére pas l'opacités des pixels, par exemple sur l'avatar de l'exemple le bord de la partie ronde qui dépasse n'est pas complétement opaque, mais les 1 ou 2 pixels du bord sont en partie transparent ( cela permet de lisser les bords sur des formes dont les bords ne sont pas droits) et comme le gif ne gére pas ça il va falloir lui donner une couleur de détourage pour mélanger avec les pixels en partie transparent.
Par exemple le détourage par défaut de photoshop et blanc ...
! Si on enregistre une image pour Forum-Toshop cela ne posera aucun probléme car le fond ets trés clair ( proche du blanc ), mais par contre si on l'utilise sur un autre forum dont le fond est foncé ça fais tout de suite moins beau.
--> Donc pour le détourage le mieux c'est d'utiliser comme couleur la couleur du fond dans lequel va aller votre image, donc cliquer sur le rectangle de couleur à coté de détourage et choisissez votre couleur.
! Si votre image est un avatar ou une sign, faites attention car sur la plupart des forums ( comme Forum-Toshop ), les posts ne sont pas tous de la meme couleur, ils sont alternés un clair et un autre un peu plus foncé, donc choisissez comme couleur de détourage une couleur qui se situe entre le deux ( par exemple pour Forum-Toshop #e7e9ec ).
--------------------------------------------------------------------------------
..::L'Optimisation::..
! 2ème chose importante : Optimiser vos gif, pour un gif, la taille devient vite conséquente lorsqu'il y a une animation.
Dans Image Ready nous retrouvons la meme fenetre d'optimisation que dans Photoshop.
Si vous n'avez pas la fenetre optimisé dans Image Ready, faites Fenetre et cochez Optimisé.
Les 3 options intéréssantes pour réduire la taille d'un gif sont Perte de qualité, Couleurs et Tramage ... ( c'est valables aussi pour photoshop )
Perte de qualité : tout est dans le titre, un peu comme pour le jpg vous allez pouvoir compressez un peu la taille et perdre en qualité.
Couleur : un gif peu avoir au mamixum 256 couleurs, mais peu aussi en avoir moins.
Tramage : ajoute un motif de tramage pour réduire l'effet de bande.
Par exemple ...
sur cette image vous avez en haut à gauche l'image originale (psd) en haut à droite l'image avec les paramétres d'enregistrement par défaut ( qualité maximale) et en bas à gauche l'image qui m'intéresse, donc mon image de sortie optimisé. Comme vous pouvez le voir sur la capture en optimisant mon gif, j'ai réussi à baissé la taille de moitié (29,34 ko contre 62,65 ko avant) en perdant trés peu en qualité simplement en mettant 64 couleurs, 0% en tramage et 16% de perte de qualité.
--------------------------------------------------------------------------------
..::Les Traces::..
un probléme fréquemment rencontré et l'apparition de traces qui n'existe pas sur le psd, mais qu'on retrouve sur le gif.
Comme sur cette image.
Ces traces sont pour la plupart du temps des restes d'images qui ont été (mal) effacés avec la gomme, ou d'un détourage avec l'option "filtre >> extraire".
Pour mieux comprendre, voici une capture vue en zoom 1x et 1600 de la même trace.
En zoom 1x elle est limite visible, zoomé on la voit déjà mieux, mais c'est pas encore ça.
Par contre si on fait "enregistrer pour le web" en gif c'est plus flagrant.
( ici avec 2 vignettes : originale et optimisée )
L'explication est simple : ces traces sont les résidus d'un effaçage ou de l'extraction d'une image, ce qui fait que les pixels sont semi-transparent, sur le psd ça ne se verra pas forcément, mais lors de l'enregistrement en gif comme ce format ne gére que les pixels opaques, il va appliquer une couleur de détourage ( blanc par défaut dans photoshop ) (voir 1ére partie du tuto "Le Détourage" ), et comme le fond du forum n'est pas blanc cette trace va tout de suite ressortir.
---> Donc pour résumer, je vous conseille d'éviter d'extraire vos images avec l'option "filtre >> extraire" , quand vous voulez effacer quelque chose avec la gomme, travaillez sur une fenetre zoomé, vous verrez mieux ce que vous faites, ça vous évitera d'en oublier. Pour l'enregistrement, préférer "enregistrer pour le web" plutot que "enregistrer sous ..." vous pourrez voir votre image telle quelle sera lorsque qu'elle sera enregistrer, et de plus vous pourrez choisir la couleur de détourage.
TUTORIAL REALISE PAR LUPOLOCO POUR WWW.FORUM-TOSHOP.COM