cours photo pour le web à partager
DESCRIPTION
Savoir prendre et retravailler des photos pour illustrer son site internetTRANSCRIPT
![Page 1: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/1.jpg)
Les bases pratiques de la photographie
Kristell [email protected]
09 53 44 34 34www.terrenourriciere.org
![Page 2: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/2.jpg)
Sommaire• Se présenter• La photographie et le web
– Importance pour le web– Quelles photographies?
• Comment faire une bonne image?– Les bases– Prises de vues– Commenter une image
• Mettre une image sur internet– Transférer son image– Réduire son image– La personnaliser
• A vous de jouer : après la théorie… la pratique
![Page 3: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/3.jpg)
La photographie et le web
![Page 4: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/4.jpg)
Importance de l’image sur le web
• Les internautes font + attention aux textes qu'aux images
• Une image aura + de chances d'être vue si elle est étroitement intégrée au contenu
• Un article avec une image est cependant plus lu
• En matière d'e-commerce, une photo vaut parfois mille mots.
![Page 5: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/5.jpg)
![Page 6: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/6.jpg)
![Page 7: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/7.jpg)
![Page 8: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/8.jpg)
Les différents rôles des images
Dans un ordre décroissant d'efficacité :– L'image comme élément d'information– L'image comme élément de navigation– L'image comme élément de mise en
page– L'image comme élément
d'ornementation
![Page 9: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/9.jpg)
Importance de l’image sur le web
• Prévoyez une légende, concise et donnant du sens
• Associer à ses images un texte alternatif (équivalent textuel, descriptif et concis, visible au survol de la souris)
• Privilégiez les images à caractère informatif
![Page 10: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/10.jpg)
Une photographie: pourquoi? pour qui?
• Définir le message que l’on veut passer
• Importance du ciblage :– Touristes– Locaux– Jeunes– Familles– Grand public
![Page 11: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/11.jpg)
Les bases pour faire une bonne image
![Page 12: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/12.jpg)
Cadrage
Vision humainePaysage / groupeCalme profondeur distance
Portrait / action dans la hauteurPlus de balayageDynamisme chaleur
Horizontal
VerticalSens de lecture
![Page 13: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/13.jpg)
Cadrage
Carré Panoramique
![Page 14: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/14.jpg)
Points de vue
Contre plongéepuissance et domination
PlongéeSolitude et détresse
À hauteurRespectAttention aux enfants!
![Page 15: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/15.jpg)
Plans
http://www.web-libre.org
Plan général
Plan d’ensemble
Plan moyen
Plan américain
Plan rapproché
Gros plan
Très gros plan
![Page 16: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/16.jpg)
Règle des tiers
![Page 17: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/17.jpg)
Règle des tiers
Les yeux sur une ligne
De l’espace devant le personnage
![Page 18: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/18.jpg)
Les lignes directrices
Lignes horizontale ou vertical = statique
Guider l’œil vers le sujet principal
![Page 19: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/19.jpg)
Exposition
Sous exposition Surexposition
![Page 20: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/20.jpg)
Flou/netFaible profondeur de
champsGrande profondeur
de champs
![Page 21: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/21.jpg)
Cadrage d’une image
Ne garder que la partie réellement efficace et informative.
• Recadrer une image = simplifier l’image– Recentrer sur son
sujet principal – Eliminer les
pourtours superflus
parfaitement recadrée, mais sa taille pourrait certainement être diminuée
Quelle est la partie de l'image dont je peux me passer ?... d'un point de vue informatif et non seulement ornemental ! Est-ce que tous les détails sont vraiment indispensables ? ...
![Page 22: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/22.jpg)
• Choisissez le format – JPEG pour les photographies– GIF pour les icônes, la typographie ou les
vignettes (thumbnails)
• Diminuer la taille et le poids d'une image : – Diminuer la résolution – Simplifier la palette de couleurs : postériserChaque kilobyte gagné améliore les
performances de votre site et la satisfaction des utilisateurs !
Poids d’une image
![Page 23: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/23.jpg)
Taille et poids
• Taille maximum : 600px de largeur (un site fait entre 800 et 1020)
• Poids : 200 ko (si plus petite beaucoup moins)
![Page 24: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/24.jpg)
Paysage
![Page 25: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/25.jpg)
Paysage
• Une grande netteté sur tous les plans• Un premier plan possible• Fuite du regard possible : suivre une
ligne
![Page 26: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/26.jpg)
Action
![Page 27: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/27.jpg)
Action
• Des images avec de l’espace autour de l’action
• Des lignes dynamiques• Des mouvements suspendus
![Page 28: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/28.jpg)
Lieux
![Page 29: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/29.jpg)
Lieux
• Agencer tous les éléments• Utiliser la lumière, jouer sur la
sérénité• Plusieurs images pour un même lieu :
une visite...
![Page 30: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/30.jpg)
Personnes
![Page 31: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/31.jpg)
Personnes
• Faites des portraits• Plans serrés• Soyez originaux• ...• Pour les groupes : plans rapprochés
![Page 32: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/32.jpg)
Règles
• Raconter quelque chose, elle doit faire passer un message, une émotion.
• Ne montrer qu’un seul sujet principal
• Choisir son heure, sa saison (Les Golden Hours correspondent à la première et à la dernière heure de soleil dans la journée, au moment où le soleil n’est pas trop haut dans le ciel)
• Ne pas hésiter à mettre en scène• Alterner les plans (de généraux à
gros)
![Page 33: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/33.jpg)
Autres éléments
• Veillez à conserver l'horizon horizontal. La mer qui penche, c'est rare...
• Un premier plan donne de la profondeur à une image.
• La gauche va représenter le passé et la droite le futur.
• Le bas d’une image représente la matérialité alors que le haut va plutôt rappeler la spiritualité.
• Veillez à laisser une zone neutre dans votre cadre.
![Page 34: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/34.jpg)
Un peu plus de technique
• Ouverture et diaphragme
![Page 35: Cours photo pour le web à partager](https://reader036.vdocuments.net/reader036/viewer/2022062703/554cb238b4c90536578b4e34/html5/thumbnails/35.jpg)
Un peu plus de techniquePriorité Ouverture | Vitesse
d'Obturation 1/25 | Valeur Ouverture 8 | Sensibilité ISO 50
Priorité Ouverture | Vitesse d'Obturation 1/1000 | Valeur
Ouverture 3.2 | Sensibilité ISO 50