Déroulement de la formation

Transcription

1 Notes de cours Traitement de l image Marc Bernier Déroulement de la formation 1. Les différents formats d image. 2. Présentation de quelques applications Adobe Air. 3. Redimensionnement d une ou plusieurs images avec l application Caldera. 4. Traitement de l image à l aide du logiciel web Pixlr. a. Redimensionner et recadrer une image. b. Ajustement du contraste, de la luminosité, des niveaux et de la saturation. c. Ajout de texte dans une image. d. Utilisation des calques. e. Utilisation des styles de calque. f. Correction des yeux rouges. g. Mix de photo. 5. Présentation de quelques autres outils en ligne. 6. Période de question et d échange. Notes de cours Traitement de l image Marc Bernier 1

2 Les différents formats d image Il existe 3 formats pour l internet soit, le GIF, le PNG et le JPG. L important avec ces formats est de savoir quand les utiliser. GIF Ce format n est presque plus utilisé si ce n est que pour faire des animations. Il peut servir aussi à faire des images transparentes. Finalement on peut l oublier! PNG Le format de l heure sur la toile. Il permet de générer des transparences de qualité à 16 millions de couleurs. Les meilleures conditions d utilisation sont : pour de la transparence (texte, titre, dessin); pour une image de type illustration (logos, symboles, histogrammes, schémas, icônes, boutons); pour une capture d écran; images 2 couleurs (noir et blanc); images contenant un nombre réduit de couleurs. JPG Spécialement conçu pour les photographies. Adobe Air «Grâce à l'environnement d'exécution Adobe AIR, vous disposez en permanence de vos applications web préférées. Les applications créées pour Adobe AIR s'exécutant sur votre poste de travail sans navigateur web, elles vous procurent la commodité des applications bureautiques. Des sociétés comme ebay et AOL se servent d'adobe AIR pour créer des applications inédites dont vous utilisez les services à partir de votre poste de travail. En résumé, Adobe AIR propose des applications résolument plus simples, performantes et ludiques.» Source : Adobe Notes de cours Traitement de l image Marc Bernier 2

3 Redimensionnement d une ou plusieurs images avec l application Caldera Au préalable vous devez avoir installé l application Adobe Air et ensuite Caldera.air. L application Caldera est très simple car elle ne fait que redimensionner les images. Voici comment procéder : 1. Lancez l application Caldera. 2. Ouvrez le dossier qui contient vos images. 3. Choisissez les paramètres (dimensions, format, etc.). 4. Glisser vos photos à droite. Vous pourriez aussi choisir un dossier complet. Notes de cours Traitement de l image Marc Bernier 3

4 Traitement de l image à l aide du logiciel web Pixlr Il existe plusieurs éditeurs d images sur internet. Vous en trouverez quelques uns dans le dossier du cours. Ces éditeurs fonctionnent sous deux principes, soit, un fonctionnement semblable à Photoshop et l autre qui propose des fonctions paramétrées. L application Pixlr fonctionne comme Photoshop. Les exercices qui suivent vous donneront une base en matière de traitement, d ajustement et de composition d images. Allez à la page web : Redimensionner et recadrer une image 1- Ouvrez l image «paysage.jpg» située dans le dossier image. Nous allons maintenant recadrer l image de manière à créer un aspect paysage (plus large que haut). À cette étape vous pouvez choisir la langue du logiciel. 2- Sélectionnez l outil recadrage dans les options de gauche. Notes de cours Traitement de l image Marc Bernier 4

5 3- Tracez un rectangle de la zone que vous voulez conserver. Vous pourrez ajuster par la suite. 4- Appuyez sur la touche entrée pour approuver. Si vous n aimez pas, appuyez sur ctrl + z (undo). Nous allons maintenant redimensionner l image pour que celle-ci ne dépasse pas 600 pixels de large. 5- Dans le menu image, sélectionnez le sous-menu «Taille de l image». 6- Entrez les valeurs sans oublier de cocher «Conserver les proportions» Notes de cours Traitement de l image Marc Bernier 5

6 Voilà, vous avez maintenant une image prête à être intégrée à un site web. Il ne vous reste qu à sauvegarder au format..? Ajustement du contraste, de la luminosité, des niveaux et de la saturation 1- Ouvrez l image «surrealiste_01.jpg» située dans le dossier image. Vous remarquerez que l image est très sombre. Nous allons l ajuster en utilisant la luminosité / contraste et les niveaux. Ces ajustements permettent d ajuster les blancs et les noirs d une image. 2- Dans le menu ajustement choisissez «Luminosité & contraste». 3- Augmentez les deux de manière à ce que l image soit plus claire. Il n y à pas de chiffre magique. Tout dépend de la photo. Nous allons maintenant ajuster les niveaux de noirs de l image. Ce qui nous donnera un meilleur contraste. 4- Dans le menu ajustement choisissez «Niveaux». Ce graphique nous indique le niveau de blanc et de noir dans l image. Les noirs doivent commencer au début du graphique. 5- Déplacez la boîte noire pour que celle-ci arrive juste avant la grosse pente. Notes de cours Traitement de l image Marc Bernier 6

7 Ajout de texte dans une image 1- Conservez l image «surrealiste_01.jpg». 2- Sélectionnez l outil texte à gauche. 3- Choisissez les options de typographie. 4- Cliquez dans l image à l endroit où vous voulez insérer le texte et écrivez. 5- Pour le déplacer, sélectionnez l outil déplacement à gauche. Notes de cours Traitement de l image Marc Bernier 7

8 Utilisation des calques 1- Conservez l image «surrealiste_01.jpg». Les calques sont des couches superposées qui servent à incorporer du texte ou une autre image dans l image de base (arrière plan). Vous pouvez les déplacer en glissant le calque. Une ligne plus grasse apparaît pour vous indiquer que vous êtes au bon endroit. Notes de cours Traitement de l image Marc Bernier 8

9 Utilisation des styles de calque 1- Conservez l image «surrealiste_01.jpg». Nous allons ajouter une ombre portée sur le calque du texte. 2- Si vous avez plusieurs calques, assurez-vous de sélectionner le bon calque. Dans ce cas-ci le calque du texte. Vous pouvez renommer le calque en double cliquant sur le nom. 3- Dans le bas de la boîte calque, cliquez sur le bouton «Style de calque». 4- Dans la fenêtre, cliquez et sélectionnez «Ombre portée». Ensuite vous pouvez ajuster les paramètres. Idéalement l ombre ne doit pas être trop foncée. Juste une légère présence suffit. Vous pouvez utiliser l ombrage pour augmenter la lisibilité d un texte. Exemple : lettres blanches sur un fond pâle. Notes de cours Traitement de l image Marc Bernier 9

10 Correction des yeux rouges 1- Ouvrez l image «yeux_rouges.jpg» dans le dossier d images. 2- Cliquez sur l outil «Réduction des yeux rouges» dans la boîte de gauche. Voilà un outil simple et efficace! 3- Cliquez dans la zone rouge de l œil. Mix de photo 1- Ouvrez l image «mix01.jpg» dans le dossier d images. Comme je l ai mentionné plus haut, vous pouvez utiliser les calques pour avoir plusieurs couches d images. Dans ce cas-ci, nous allons mixer 2 photos et ajouter un effet de transparence sur le calque du haut. Pour mixer les photos, le principe est de faire les opérations copier et coller. 2- Dans le menu du haut, cliquez sur fichier et «Ouvrir» ensuite choisissez l image «mix02.jpg» dans le dossier d images. 3- Une fois l image ouverte, appuyez sur les touches ctrl + a pour sélectionner l image au complet. 4- Dans le menu du haut sélectionnez édition et «Copier» ou bien appuyez sur ctrl + c. 5- Une fois l image 2 copiée, vous pouvez la fermer. 6- Dans le menu du haut sélectionnez édition et «Coller» ou bien appuyez sur ctrl + v. Ceci devrait coller l image 2 dans l image 1 et créer un nouveau calque. Notes de cours Traitement de l image Marc Bernier 10

11 L image 2 est plus petite que l image 1. Nous allons donc l agrandir. 7- Dans le menu du haut sélectionnez édition et «Modification libre» ou bien appuyez sur ctrl + t. 8- Avec les points sur le côté de l image, étirez jusqu à ce que l image 2 couvre entièrement l image Appuyez sur la touche «Entrée» pour approuver la transformation. Maintenant pour la transparence, il en existe plusieurs types. À vous de choisir dans la boîte calque. N oubliez pas de sélectionner le bon calque! Notes de cours Traitement de l image Marc Bernier 11

12 Notes de cours Traitement de l image Marc Bernier 12