Préparer ses photos pour le web (galerie photos, forum, ...)

Documents pareils
Création de maquette web

Chapitre 22 Optimisation pour diffusion à l'écran, pour le web

"CREEZ VOTRE SITE WEB ET VOTRE BLOG AVEC WORDPRESS"

Catégories de format d'optimisation

Usage des photos pour Internet et pour la presse

Traitement numérique de l'image. Raphaël Isdant

Manuel d'utilisation de l'administration du site Japo.ch - 1

Sur trois couches, on obtient donc 2563 = de couleurs, soit 24bpp (Bit Per Pixel).

Initiation à linfographie

PHPWEBSITE -Tutoriel image

Proposition année universitaire-informatique ( )

Comment optimiser dans ImageReady?

JPEG, PNG, PDF, CMJN, HTML, Préparez-vous à communiquer!

Choisir entre le détourage plume et le détourage par les couches.

TP SIN Traitement d image

Plan d études. Traitement visuel 2D. Techniques d intégration multimédia HU. legault/2d/ 1-2-2

FORMATS DE FICHIERS. Quels sont les différents types d informations numériques dans un document multimédia?

INFO 2 : Traitement des images

Utiliser le logiciel Photofiltre Sommaire

nom : Collège Ste Clotilde

Voici quelques-unes des questions auxquelles répond cette présentation.

Plan. Avant de créer son site. Quelques logiciels complémentaires

Faire de la déformation interactive avec GIMP

PHOTOSHOP - L'AFFICHAGE

Préparation d un post (article) pour idweblogs

Fiches d aide à l utilisation

DÉCOUVERTE DE CAPTURE ONE

Adobe Photoshop. Bonnes pratiques pour une utilisation professionelle CHAPITRE 7

Pop-Art façon Roy Liechtenstein

Création d articles sur le site web du GSP

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

Les images numériques. 1. Le dessin vectoriel

Le poids et la taille des fichiers

THEME RESPONSIVE DESIGN

Merci de suivre les indications suivantes afin de créer votre compte membre :

PR OC E D U RE S D E B A S E

Les calques supplémentaires. avec Magix Designer 10 et autres versions

Une passion, une formation, un métier... pour votre avenir

Spécifications techniques

Spétechs Mobile. D e r n i è r e m i s e à j o u r : s e p t e m b r e

Réalisez votre propre carte de vœux Éléctronique

GESTION DU LOGO. 1. Comment gérer votre logo? Format de l image Dimensions de l image Taille de l image 9

Computer Link Software

Modules Multimédia PAO (Adobe)

Optimiser les s marketing Les points essentiels

Spétechs Mobile. D e r n i è r e m i s e à j o u r : a o û t 2014

Cours de numérisation sur Epson Perfection

LECON 2 : PROPRIETES DE L'AFFICHAGE Version aout 2011

Module Transférer/récupérer ses photos de son appareil vers son ordinateur

Formation > Développement > Internet > Réseaux > Matériel > Maintenance

Guide de correction et d optimisation des images en vue de leur publication sous Marcomedia Contribute. Logiciel utilisé : Adobe PhotoShop 7

Outils permettant la diffusion de l information. Un point sur le droit numérique

Les images et les animations sur le web. Guérineau Chloé BTS2 Année 2001/2012

Programme de formation Photoshop : Initiation 24 heures de formation (3 jours) 1/2

Optimiser les images pour l affichage sur votre site

Didacticiel de création de sa fiche antenne Portail Consomm action

TD : Codage des images

PLAN. Qui peut faire quoi? Présentation. L'internaute Consulte le site public

Spécifications Techniques - Tablettes

2013 Pearson France Photoshop Elements 12 pour les photographes du numérique Loïc Olive

«Atelier de retouche d image, améliorez et optimisez

La photo numérique et les logiciels libres. Asie Photos

Photoshop Séquence 4 - Créer une image de taille personnalisée taille

Tutoriel de FastStone Image Viewer

UTILISATION D'UN RADIOCHRONOMETRE POUR DATER DES GRANITES

Copyrights and Trademarks

Gordon Campey Novembre 2013

Traitement par lot redimensionner des images

Misez sur l efficacité d un site spécialisé

Intégrer des médias. Plateforme e-tourisme. demo.minisites.encharentemaritime.com

Google Adresses. Validez la fiche de votre entreprise ou organisation sur Google Maps

Xara Xtreme Pro 4 Edition Image & Photo

Prise en main du module Open office Impress / Présentation

Créez et envoyez une invitation et le mini-site de votre événement

EXEMPLE DE PAGE : FORMAT A4 (210X297)

Spécificités techniques JANVIER 2013

PHOTOSHOP INDESIGN ILLUSTRATOR

- Enlever les imperfections de la peau avec l'outil clonage. - Donner plus d'impact à la chevelure du personnage

Table des matières. 1 À propos de ce manuel Icônes utilisées dans ce manuel Public visé Commentaires...

Chapitre 3 : outil «Documents»

Utilisation de XnView

Réussir et traiter ses photos sous UV avec Photoshop

Supports. Images numériques. notions de base [1]

GROUPE CAHORS EXTRANET

Notice pour Visiteur du Site Perso

I. QU'EST-CE QU'UN ORDINATEUR? Un ordinateur est relié à plein de périphériques

Dans l Unité 3, nous avons parlé de la

Quel PC pour quels usages? 1) PC de Bureau ou Portable? Les différents types de portables. - Les ultra-portables. - Les portables généralistes

HTML5, CSS3 et JavaScript Développez vos sites pour les terminaux mobiles

Sommaire. 2. Utiliser la télécommande Télécommande Administrateur Télécommande Utilisateur Échanger une télécommande...

FORMATIONS ADHÉRENTS Page sur le catalogue des formations 2014/2015

Certificat Informatique et internet Niveau 1 TD D1. Domaine 1 : Travailler dans un environnement numérique évolutif. 1. Généralités : Filière

WORDPRESS : réaliser un site web

Support de formation pour l'installation d'un logiciel gratuit de retouche d'images et gestion de la qualité, taille et format des images :

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

Leçon N 5 PICASA Généralités

Amélioration des sélections

Concepteur réalisateur graphique

Transcription:

Préparer ses photos pour le web (galerie photos, forum, email...) I - Préparer, pourquoi? Taille et poids de l'image : Une photo qui sort d'un réflex numérique à 12 millions de pixels, par exemple, peut peser 72,8 Mo et faire 4368 x 2912 pixels. Un écran d'ordinateur, aujourd'hui, c'est environ 1024 x 768 pixels ou 1280 x 1024 pixels. Une photo qui excéderait ces dimensions et/ou qui ne tiendrait pas compte de la place prise par les différentes barres du navigateur sortirait de l'écran! La question du poids n'est plus un problème aujourd'hui avec l'adsl pour créer un site photo (en revanche, sur les forums, il convient de respecter les poids et les tailles imposés). Formats de sortie pour le web : Il n'existe que 3 formats d'image possible sur Internet : GIF (.gif) : adapté aux logos, schémas, croquis, gifs animés Correspond à une compression des couleurs (256 couleurs maximum). Gère les transparences sur une couche. JPEG (.jpg) : adapté aux photos Correspond à une compression des données : perte de petits détails +/- importante selon la compression. PNG-24 (.png) : adapté aux logos, schémas, croquis, images en transparence Alternative intéressante aux deux précédentes, mais non reconnue par tous les navigateurs. Gère les transparences sur plusieurs couches. II - Gérer les enregistrements Pour la préparation d'une photo destinée au Web, on utilise la commande : Fichier > Enregistrer pour le web > JPEG Par rapport à la commande Enregistrer sous > JPEG, elle offre quelques avantages : Qualité d'image variant de 0 à 100 au lieu de 0 à 12. Possibilité de voir l'effet de la compression avant/après (sur 1 ou 3 niveaux de compression) Possibilité d'intégrer le profil ICC pour seulement 3 ko en plus (inutile tant que les navigateurs ne sauront pas le lire) En GIF, la possibilité de voir le panel des couleurs transcrites.

III - Les étapes (commandes valables sous Photoshop CS21) 1. Préparer l'image originelle (0.psd) Recadrer si nécessaire Retirer les pétouilles Faire les niveaux Etc. Enregistrer une copie avec les calques (1.psd), pour pouvoir y revenir facilement Aplatir l'image Calque > Aplatir l'image et non : Calque > Fusionner les calques visibles, qui risque de laisser une bordure semitransparente et inesthétique sur la photo. 2. Redimensionner pour le web Image > Taille de l'image Cocher la case rééchantillonnage et entrer en largeur ou en hauteur le nombre de pixels désiré, sans toucher à la résolution et en respectant les proportions. 3. Accentuer Se mettre en Taille réelle des pixels pour appliquer une accentuation adaptée à la taille de l'image. Plus une image est grande, plus l'accentuation doit être importante. Filtre > Renforcement > Accentuation 4. Passer en 8 bits (éventuellement) Image > Mode > 8 bits 5. Convertir en profil srgb La conversion en srgb permet d'obtenir des couleurs plus fidèles sur tous les ordinateurs des différents internautes. Edition > Convertir en profil > Espace de destination > Profil srgb et non : Edition > Attribuer un profil > Espace de destination > Profil srgb (Note : Attribuer un profil s'utilise, par exemple, pour une photo faite avec un Compact numérique dont le profil n'est pas nécessairement intégré à l'image lorsque celle-ci est ouverte sous Photoshop. Après lui avoir attribué un profil srgb, il convient de la convertir en Adobe RVB pour la travailler.) 1 Sous Photoshop Element, les commandes existent mais n'ont pas nécessairement les mêmes noms et ne sont pas toujours rangées aux mêmes endroits.

Avec les options de conversion suivantes : Moteur : Adobe (ACE) - Détermine le logiciel faisant la conversion. Mode : Perceptive Les écarts entre les couleurs sont conservés ce qui rend mieux compte du contraste (En colorimétrie relative, toutes les valeurs hautes sont écrétées vers le même espace couleur supérieur du srgb). Compensation du point noir Crée la correspondance entre la couleur source la plus fonçée et la couleur cible la plus fonçée, et non avec le noir. 6. Enregistrer pour le Web : Commande créant automatiquement une copie du fichier en 72 ppp. 4 options sont disponibles : La qualité (compression) : option la plus importante! Réduit le poid en ôtant du détail. On détermine la qualité sur une échelle continue (de 0 à 100) ou discontinue (Faible, Elevée, Moyenne, Maximale). Pour chaque degré de qualité, le poid du fichier final s'affiche sous les images cibles. Une qualité de 100 ne sert à rien. A partir de 80, en général, on ne perçoit plus de différence avec l'original. Pour un site photo, on peut aisément monter à une qualité de 80. Pour un forum, il faut se conformer au poids maximal indiqué et faire varier la qualité en conséquence. Le flou Réduit le poid en créant un flou : Ne pas dépasser des valeurs de 0,1 à 0,4, mais le mieux est de ne pas utiliser cette option. Elle est devenue caduque avec l'évolution d'internet. Le détourage simulé Permet d'appliquer une couleur de fond à la transparence d'une image PSD que l'on souhaite enregistrer pour le web en jpeg. Les options d'affichage La fonction Progressif permet d'augmenter progressivement la qualité de l'image vue par l'internaute pour le faire patienter. Là encore, cette fonction n'a plus guère d'intérêt.