Créer des images pour le web avec PowerPoint

Le logiciel de présentation PowerPoint peut être utilisé pour créer des images pour le web de toutes tailles aux formats PNG et JPEG et même des GIFs animés.

Dimensions des images

Les images pour le Web utilisent le pixel comme unité de mesure. Une petite image peut par exemple avoir des dimensions de 300 pixels de large par 200 pixels de haut, alors qu’une image pour un écran haute définition aura minimalement une dimension de 1920 pixels de large par 1080 pixels de haut.

Définir la taille de l’image dans PowerPoint

Suis la procédure suivante pour définir les dimensions de tes images :

1. dans PowerPoint, vas à l’onglet Création;
2. à droite du ruban, clique sur Taille des diapositives;
3. clique sur Taille de diapositive personnalisée;
4. dans la boite de dialogue, entre les dimensions désirées en largeur et en hauteur, suivi du mot « pixels » en entier et au pluriel. Attention, la taille minimale en hauteur et en largeur est de 96 pixels.

PowerPoint convertira les dimensions entrées en pixels à l’unité de mesure de ton profil dans Windows, soit des pouces ou des centimètres. Cependant, lorsque tu exporteras tes images, elles auront les bonnes dimensions en pixels.

Dimensions des images pour la PFI

Dans le cadre de la production finale d’intégration, tu dois produire des images d’au moins trois dimensions différentes : celles pour les images mises en avant des pages et articles dans WordPress, celles des produits à vendre dans WooCommerce et celles que tu utiliseras comme figures ou éléments de décoration dans le contenu des pages et articles.

Pour les images mises en avant de WordPress

Les images mises en avant (ou « à la Une ») des pages et articles WordPress devraient avoir une dimension standard de 1920 pixels de large par 960 pixels de haut. La hauteur peut varier entre 500 et 960 pixels, mais toutes les images mises en avant doivent avoir des dimensions identiques pour assurer une constance visuelle à travers votre site. Nous avons préparé un modèle de présentation PowerPoint de 1920×500 (50,8 cm par 13,23 cm). Utilisez-le pour préparer vos images mises en avant, ou créez-en un de 1920×960. Vous devrez le remettre sur Moodle à la fin de votre travail.

Pour les produits à vendre dans WooCommerce

Les images de vos produits à vendre dans WooCommerce doivent avoir d’au moins 1 200 pixels de large par 1 200 pixels de hauteur. Cela peut varier, mais les images devraient être de dimensions égales pour tous les produits afin que les fiches produits s’affichent bien dans le catalogue de produits.

Pour les figures insérées dans les pages et articles

Les images à des fins purement décoratives peuvent être de n’importes quelles dimensions, selon la situation. Les images servant de figures pour supporter le propos (images avec légendes) devraient idéalement être standardisées à des dimensions identiques entre elles. L’idéal est de choisir un ratio uniforme pour les figures du site, ou du moins d’un article.

Par exemple :

(Clique sur cette image pour la voir en plein écran, touche Ctrl pour un nouvel onglet)

Les quatre exemples ci-dessus sont fait à partir de ratios d’images fréquents, en commençant par un format de 4 unités de large, par 3 de hauteur (4:3), pour un ratio de 1,333 (format des anciens écrans), un format 7:5, pour un ratio de 1,4 (format de photo fréquent), un format de 6:4 pour un ratio de 1,5 (ancien standard de format de photo) et finalement un format de 16:9 pour un ratio de 1,778 (la plupart des écrans HD, bien que certains utilisent un ratio 16:10).

Utiliser PowerPoint pour créer les images

Ci-dessous se trouvent deux fichiers PowerPoint.

Utiliser un modèle existant

Le premier contient une douzaine de dispositions différentes que tu peux utiliser pour créer les images à la Une (ou mises en avant) des articles et pages de ton site WordPress. Tu peuxmodifier les diapositives pour y insérer tes propres images, titres et couleurs, ou utiliser les dispositions pour créer de nouvelles diapositives :

Modèle-images-mises-en-avant.pptxTélécharger

Créer des images à partir d’une disposition vide

Le deuxième contient les images mises en avant de ce site créées directement sur une disposition Vide de PowerPoint :

Images-mises-en-avant-de-ce-site.pptxTélécharger

Créer tes propres dispositions

Si tu es familier avec le mode Masque des diapositives et avec les dispositions dans PowerPoint, utilise-les pour créer des modèles de diapositives uniformes entre eux. Voici comment procéder, chaque fois que tu veux utiliser PowerPoint pour créer des images rapidement, en utilisant les dispositions :

1. crée une nouvelle présentation (Ctrl+N);
2. à l’onglet Accueil, groupe Diapositives, clique sur Disposition et applique la disposition Vide;
3. passe au mode Masque des diapositives en cliquant sur l’onglet Affichage> Modes Masque> Masque des diapositives (raccourci : clique sur l’icône du mode Normal en bas à droite de l’écran en tenant la touche majuscule enfoncée);
4. sous le masque des diapositives à gauche, supprime toutes les dispositions, sauf la disposition Vide qui est appliquée à ta diapositive actuelle;
5. à droite du Ruban, clique sur Taille des diapositives et entre les dimensions de l’image désirée en écrivant « pixels » à la fin de la hauteur et de la largeur;
6. crée une ou plusieurs dispositions correspondant à tes besoins de création, en incluant le titre de la diapositive ou non, selon la situation;
7. renomme tes dispositions en cliquant sur Renommer en leur donnant des noms de modèles descriptifs (ex.: Photo et titre, Photo avec cadre, Trois Polaroid, …);
8. choisis la police du titre (s’il y a lieu) et la couleur d’arrière-plan désirée;
9. quitte le mode Masque des diapositives en cliquant sur le X à cet effet dans le Ruban ou en cliquant sur le mode Normal, au bas de l’écran;
10. utilise tes nouvelles dispositions pour créer de nouvelles diapositives qui deviendront tes figures et tes images mises en avant dans WordPress.

Exporter les images en PNG ou JPEG

Une image à la fois

Voici la procédure pour exporter la diapositive active aux formats PNG ou JPEG :

1. vas à l’onglet Fichier et clique sur Enregistrer-sous (ou clique sur la touche F12);
2. navigue au dossier de destination (crée-toi un dossier Images à cet effet);
3. dans la boite de dialogue, choisis Type : Format JPEG ou Format PNG;
   (le format JPEG est optimal pour les photos il réduira la taille du fichier, le format PNG pour des logos, illustrations, etc., les lignes seront plus nettes)
4. dans le champ Nom de fichier, écris un nom descriptif tout en minuscules, sans espace, ni accent ou caractère de ponctuation, à l’exception du trait d’union (ex.: pomme.jpg, fruits-des-champs.jpg, telephone-apple.jpg, logo.png, etc. Évite les noms vagues comme photo.jpg ou image.png) Les images sont une façon de plus de parler aux moteurs de recherche pour améliorer le référencement du site web;
5. clique sur Enregistrer, puis dans la boite de dialogue, sur Celle-ci uniquement.

Toutes les images à la fois

Lorsque tu as terminé toutes tes images sur une diapositive chacune, tu peux les exporter toutes à la fois en suivant cette procédure :

1. vas à l’onglet Fichier et clique sur Enregistrer-sous (ou sur la touche F12 du clavier);
2. navigue au dossier de destination (crée-toi un dossier Images à cet effet);
3. dans la boite de dialogue, choisis Type : Format JPEG ou Format PNG;
4. dans le champ Nom de fichier, écris un nom qui deviendra un nom de dossier temporaire dans lequel PowerPoint exportera toutes vos images avec le nom Diapositive1.jpg, Diapositive2.jpg, etc.;
5. clique sur Enregistrer, puis dans la boite de dialogue, sur Toutes les diapositives;
6. ouvre une fenêtre de l’Explorateur Windows (touche Windows+E);
7. navigue au nouveau dossier créé par PowerPoint;
8. dans ce dossier, renomme chaque image individuellement en faisant un clic-droit> Renommer ou en sélectionnant le fichier et en appuyant sur la touche F2;
9. écris un nom descriptif tout en minuscules pour chaque image, sans espace, ni accent ou caractère de ponctuation, à l’exception du trait d’union (ex.: pomme.jpg, fruits-des-champs.jpg, telephone-apple.jpg, logo.png, etc. Évite les noms vagues comme photo.jpg ou image.png);
10. Appuie sur la touche Entrée après avoir renommé chaque image.

Des questions?

Utilise la boite de commentaires ci-dessous pour m’en faire part. Il me fera plaisir de répondre et de clarifier les procédures en cas de besoin!