David Geneix Eric Fontes.  Image Ready est le complément de Photoshop pour le traitement d’images pour le web  Fonctionnalités ◦ Optimiser une image.

Présentation au sujet: "David Geneix Eric Fontes.  Image Ready est le complément de Photoshop pour le traitement d’images pour le web  Fonctionnalités ◦ Optimiser une image."— Transcription de la présentation:

1 David Geneix Eric Fontes

2  Image Ready est le complément de Photoshop pour le traitement d’images pour le web  Fonctionnalités ◦ Optimiser une image ◦ Redimensionner une image ◦ Cartes images ◦ Animations GIF

3  JPEG ◦ Compression avec perte d’information ◦ Pas de transparence  Gif ◦ Transparence ◦ Animations ◦ Compression sans perte

4  Redimensionner une image permet de réduire le poids d’un fichier.  Utilisation sur le web ou il existe parfois de forte contraintes pour le poids des images. ◦ Exemples  Avatars sur les forums  Photos à envoyer par mail, ou à publier sur un site.

5  L’ optimisation d’image permet de réduire le poids (en octets) d’une image.  L’optimisation malgré son nom est une réduction de la qualité d’une image  L’optimisation est à utiliser conjointement avec la redimension d’image lorsque le poids n’a pas suffisament baissé.

6

7  Permet de générer une page web avec comme fond une image, et dont des extraits de l’image sont des liens vers d’autres pages.

8

9

10  Télécharger l’image golf.jpg  Ouvrez Image Ready et ouvrez l'image.  Ensuite, créer 3 nouveaux calques en faisant CTRL+MAJ+N

11  Ensuite remplissez de noir les 3 nouveaux calques.

12  Sur chaque calque que vous venez de colorier Faites Filtre ->Bruit ->Ajout de bruit.  Faites les manipulations suivantes sur les 3 calques en faisant bien attention au calque sélectionné.

13  Ensuite retournez sur le Calque 2 et faites comme sur l'image ci-dessous:

14  Ensuite faites Filtres -> Atténuation -> Flou directionnel  Entrez les paramètres suivants: Angle: 60° Distance: 20  Refaites la même manip pour le calque 3 et 4 avec le même angle (60°). Distance: 22 pour le calque 3 Distance: 24 pour le calque 4

15  Ensuite sur le calque 2,3 et 4 mettre l'opacité a 30% pour chaque.  Maintenant on va s’occuper de l’animation.  Sélectionnez le calque 1 et 2 puis recliquer sur l'endroit désigné

16  Sélectionnez le calque 1 et 3 puis recliquer sur l'endroit désigné  Sélectionnez le calque 1 et 4 puis recliquer sur l'endroit désigné On obtient donc 3 images dans le cadre animation comme dans le screen précédent.  Ensuite, enregistrez une copie optimisée pour le Web ( Fichier -> Enregistrer copie optimisée ou ctrl+alt+s) au format.GIF  Testez votre réalisation.

17

18  Télécharger l’image fond.bmp  Ouvrez Image Ready et ouvrez l'image.  Ensuite, créer 1 nouveaux calque en faisant CTRL+MAJ+N

19  Utilisez l’outil texte et écrivez quelque chose par exemple SI28

20  Ensuite dupliquez 2 fois votre image comme suit:

21  Pour faire disparaitre et réapparaitre le texte il faut commencer par enlever le calque texte sur la 1ère et la 3ème image :

22  Maintenant on va progressivement faire apparaitre et disparaitre le texte. pour cela, allez sur la 2ème image et cliquez sur trajectoire :

23  Pour finir recliquez sur trajectoire en changeant "trajectoire avec", mettez "image suivante" faites ok et c'est bon, vous avez un texte qui apparait et disparait.

24  Ensuite, enregistrez une copie optimisée pour le Web ( Fichier -> Enregistrer copie optimisée ou ctrl+alt+s) au format.GIF  Testez votre réalisation.

25

26  Télécharger l’image fond.bmp  Ouvrez Image Ready et ouvrez l'image.  Ensuite, créer 1 nouveaux calque en faisant CTRL+MAJ+N

27  Utilisez l’outil texte et écrivez quelque chose par exemple SI28

28  Ensuite dupliquez 1 fois votre image comme suit:

29  Sur l’image 1, sélectionnez l'outil déplacement et faites bouger votre texte à gauche de l'image avec les touches de déplacement du clavier.

30  Sur l’image 2, faites la même chose que sur l’image 1 sauf que votre texte vous le déplacez à droite.

31  Maintenant cliquez sur trajectoire et gardez les mêmes paramètres :

32  Ensuite vous pouvez changer délai si vous trouvez que c'est trop rapide, changez la vitesse de défilement, moi je mets à 0,2.

33  Ensuite, enregistrez une copie optimisée pour le Web ( Fichier -> Enregistrer copie optimisée ou ctrl+alt+s) au format.GIF  Testez votre réalisation.