Quand on a quelques travaux à faire sur des photographies, on n’a pas forcément le besoin ou l’envie d’investir plusieurs centaines d’euros dans un logiciel de retouche photo comme Photoshop.
Il peut être judicieux de se tourner vers le logiciel Open Source The Gimp qui permet de retoucher ses photographies.
Durant mes formations, j’ai été confronté au problème du détourage de photos de produits.
Dans ce petit tutoriel, je vais donc vous indiquer la démarche à suivre pour détourer (isoler) un produit afin de pouvoir l’insérer sur une plaquette ou un site web.
Après avoir ouvert la photo que vous voulez travailler, la première chose à faire est d’ouvrir la fenêtre « Boite à Outils » si elle ne s’est pas affichée.
Ajouter la barre d’outil
Outils – Nouvelle Boite à outils (ou CTRL + B)
On remarque sur ce type d’image que l’objet que l’on veut détourer à des contours nets.
Dans ce type de configuration, on va utiliser l’outil « Chemin » symbolisé par une plume.
L’outil « Chemin » symbolisé par une plume.
En double cliquant sur l’icône « Outil plume », vous pourrez afficher les options.
Ici, nous avons les touches :
CTRL qui permet de modifier le tracé et les points d’ancrage
ALT qui permet de déplacer le tracé.
Commençons le tracé.
Avec l’outil « Plume » vous pourrez sans trop de difficulté et un peu d’entrainement tracer les contours de votre objet. Pour les courbes, cliquez sur le point d’arrivée puis sans relâcher la souris déplacer le pointeur. Vous verrez alors le chemin changer de forme en fonction de vos mouvements. Ajustez-le correctement à votre courbe.
Dans certain cas, vous verrez le tracé réaliser une courbe non voulue.
Courbe non voulue.
Pour remédier à ce problème, vous cliquerez sur le point blanc du tracé, cela fera apparaitre des segments de droite que vous pourrez déplacer pour claquer votre tracé à la forme de l’objet.
Courbe non voulue.
Déplacez les droites pour claquer votre tracé à la forme de l’objet
Une fois, le tracé réalisé, rendez-vous dans le menu « Sélection » et cliquez sur « Depuis le chemin (MAJ+V). Un chemin de chenille apparait délimitant votre nouvelle sélection.
Le tracé fini
Cliquez ensuite toujours dans le menu « Sélection » sur « Inverser » : le chemin de chenille fait maintenant le tour de votre objet et du cadre de l’image.
Maintenant, nous allons pouvoir appliquer un effet de transparence.
Dans le menu « Calque », il faut cliquer sur « Transparence » puis « ajouter un canal alpha ».
« Ajouter un canal alpha
Maintenant, en supprimant votre sélection (Touche Suppr.), vous verrez apparaitre des carrés gris clair et gris foncé. L’effet de transparence a été créée.
Effet de transparence réalisé
Vous n’avez plus qu’a enregistrer votre image au format PNG avec la commande « Exporter comme… » ou « Export as… ».
Enregistrer au format PNG
C’est vrai qu’au début l’outil plume est parfois un peu difficile à prendre en main mais avec un peu d’habitude, il se révèle redoutablement efficace
Nous verrons ici comment insérer une galerie photo ou un diaporama dans un article ou une page statique.
Dans ces exemples, on utilisera l’extension NextGEN Gallery
Rendez-vous sur la page de votre article dans la zone de l’administration.
Cliquez ensuite, dans votre article, là où vous voulez mettre votre galerie.
Puis cliquez sur l’icône « Next-Gen Galery » en haut à droite dans votre éditeur.
Puis cliquez sur l’icône « Next-Gen Galery » en haut à droite dans votre éditeur.
Une fenêtre surgissante (Pop Up) s’ouvre. Vous devez indiquer la galerie à insérer et le type de présentation.
Vous avez trois type de présentation :
Image List : c’est une liste d’image
SlideShow : c’est un diaporama. Notez que vous pouvez modifier les options du diaporama dans le menu de Galery -> Options -> Slideshow.
Image browser : pour afficher les images en cliquant sur suivant et précédant. Mais cela recharche à chaque fois la page ce qui entraine une certaine lenteur.
Cliquez ensuite sur « Insert »
Une fenêtre surgissante (Pop Up) s’ouvre. Vous devez indiquer la galerie à insérer et le type de présentation.
Vous retournez sur votre page d’édition d’article et vous remarquez un code qui définit la présentation et la galerie concernée.
Donc en fait, vous n’êtes pas obligé de faire toutes ces étapes pour insérer une galerie, vous pouvez aussi tout simplement écrire le code en modifiant le numéro final pour préciser la galerie concernée.
Remarquez un code qui définit la présentation et la galerie concernée
Ensuite vous cliquez sur « mettre à jour » et afficher l’article pour voir le résultat.
Ou comment créer des galeries dans WordPress pour afficher des diaporama ou des listes d’images dans des artciles ou dans des pages statiques.
Dans ces exemples, on utilisera l’extension NextGEN Gallery
Tout d’abord, voyons à quoi ressemble le menu de cette extension.
Bon, il est en anglais, mais tout cela est relativement simple.
Menu de l’extension NextGEN Gallery
Overview : page d’accueil du module avec un petit récapitulatif (nombre d’images, de galerie, d’album)
Add Gallery /Images : pour ajouter des galeries et des images
Manage Gallery : pour organiser les galeries et les images dans ces dernières
Album : un album est une réunion de galeries donc vous pouvez créer des albums et y intégrer des galeries. Cela permet d’afficher des listes d’images sur des pages spécifiques.
Tags : définir des « mots-clefs » pour vos images »
Option : permet de jouer avec toutes les options du modules : taille des miniatures, option du slideshow… A essayer sur un site de test.
Style : pour modifier les style CSS des galeries. Il faut mettre les mains dans les codes. A essayer sur un site de test.
Roles : quand vous avez plusieurs groupes d’utilisateurs, vous pouvez donner des droits à certains groupes pour gérer les galeries
About : les auteurs de l’extension
Reset / Uninstall : tout effacer et désinstaller le modules. Ne cliquez ici que lorsque que vous savez ce quevous faites.
Voici la page d’accueil de l’extension
Pour l’instant c’est un peu vide, mais cela va s’arranger.
Accueil de l’extension NextGEN Gallery
La première chose est de créer une galerie.
Donc, on clique sur « Add Gallery /Images ».
Vous lui donnez un nom et vous cliquez sur « Add Gallery »
Créer une galerie
La galerie a été créée avec succès (ouf). Et maintenant, on peut y ajouter des images grâce à l’explorateur de fichier en cliquant sur « Browse ».
N’oubliez pas que vous pouvez sélectionner plusieurs images à la fois en cliquant sur les images et la touche contrôle (CTRL).
Ensuite, vous choisissez la galerie dans laquelle vous voulez placer les images en cliquant sur « Choose Gallery ».
Vous aurez toujours la possibilité de modifier la positions des images en vous rendant dans « Manage Gallery »
Galerie créee avec succès
Si vous n’avez pas choisi de galerie pour importer vos images vous obtiendrez ce message :
Message d’erreur
Cet écran apparait quand vos images seront en train d’être transférées. En fonction de la taille et du nombre d’images cela peut prendre un certain temps.
Soyez donc patient
Vos images sont en train d’être transférées
Quand le téléchargement est fini, vous reviendrez sur cet écran.
Le message en jaune, vous indique tout c’est bien déroulé. Ici, trois images ont été ajoutées avec succès.
Images ajoutées avec succès.
Maintenant, il faut donner un nom et une description à vos images. Cela est mieux pour l’internaute et le référencement.
Rendez-vous donc dans « Manage Gallery »
Choisissez la galerie à gérer en cliquant dessus. Ici, « statue-menhir ».
Page de gestion des galeries
Voici la page de gestion de votre galerie. Vous avez de multiples options.
Page de modification des photos
Pour l’instant, donner un titre et une description à vos images puis cliquer sur « Save change »
Voilà, vous avez paramétré votre galerie. Il n’y a plus qu’a l’insérer dans une page ou un article.
Si vous avez l’intention d’utiliser plusieurs fois la même image sur votre site, vous devez la transférer sur votre site via le gestionnaire de média de WordPress puis l’insérer dans votre article ou votre page statique.
Sur votre page d’accueil de l’administration, cliquez sur « Média ». Les images déjà présentes sur votre site s’affiche. Pour ajouter une image, cliquez sur… « Ajouter »
Pour ajouter une image, cliquez sur… « Ajouter »
Une fenêtre s’ouvre, vous devez cliquez sur « Parcourir » pour télécharger votre image.
Cliquez sur « Parcourir » pour télécharger votre image
Là, l’explorateur de fichier s’ouvre et vous devez suivre le même protocole que pour insérer une image dans un article.
L’explorateur de fichier s’ouvre
Une fois votre image téléchargée (cela peut prendre quelques secondes, soyez patient), une nouvelle fenêtre s’ouvre afin que vous renseigniez certain éléments.
Titre: le nom de votre image
Texte alternatif : description de l’image à l’attention des malvoyant et des non-voyant. Ceci est très important à renseigner pour que vous ne fassiez pas de discrimination sur votre site
Légende : petit texte qui apparaitra sous l’image afin de l’expliquer
Description : description de l’image à l’attention des moteurs de recherche. En effet ceux-ci ne sont pas (encore) en mesure d’analyser les images donc vous devez leurs indiquer ce qu’elles représentent.
Renseignez les champs
Voilà votre image est présente sur votre site, il n’y plus qu’a indiquer là où elle doit être positionnée. Pour ce faire, retourner sur la page édition d’un de vos articles et cliquez là où vous voulez mettre votre image. Dans notre exemple, nous la placerons en bas de page.
Positionnez votre image
Puis cliquez sur « ajouter une image ».
Puis cliquez sur « ajouter une image ».
Une fenêtre s’ouvre, cliquez sur « Bibliothèque« . Vos images déjà présentes sur votre site s’affiche.
Choisir son image
Choisissez votre image. Normalement les champs que vous avez remplis précédemment sont pré-remplis mais vous pouvez les modifier comme bon vous semble.
N’oubliez pas de choisir l’alignement et la taille. Nous avons choisi la taille originale et centré.
Choisir les options et remplir les champs
Cliquez sur « Insérer dans l’article » puis mettre à jour. Puis « Afficher »pour voir ce que cela donne.
Cliquez sur « Insérer dans l’article » puis mettre à jour
Dans ce petit tutoriel, nous verrons comment insérer une nouvelle image dans un article (ou dans une page statique). Nous partons du principe que votre image n’est pas encore présente sur votre site.
Tout d’abord, il faut être dans votre administration et sur votre page d’édition de votre article.
Ensuite cliquez dans votre zone texte là où vous voulez insérer votre image.
Ensuite, vous cliquez sur l’icône « Ajouter une image »
Cliquez sur l’icône « Ajouter une image »
Une fenêtre s’ouvre pour vous demander quelle image vous voulez insérer. Nous partons du principe que votre image n’est pas encore présente sur votre site. Sinon, jetez un coup d’œil à notre autre tutoriel (insérer une image déjà présente sur le site).
Cliquez sur « Parcourir »
Explorateur de fichiers
Un explorateur de fichier s’ouvre. Naviguez grâce à lui pour récupérer votre image sur votre ordinateur. Cliquez dessus et ensuite cliquez sur « Ouvrir »
Naviguez grâce à lui pour récupérer votre image sur votre ordinateur
Une fois votre image téléchargée (cela peut prendre quelques secondes, soyez patient), une nouvelle fenêtre s’ouvre afin que renseigniez certain éléments.
Titre: le nom de votre image
Texte alternatif : description de l’image à l’attention des malvoyant et des non-voyant. Ceci est très important à renseigner pour que vous ne fassiez pas de discrimination sur votre site
Légende : petit texte qui apparaitra sous l’image afin de l’expliquer
Description : description de l’image à l’attention des moteurs de recherche. En effet ceux-ci ne sont pas (encore) en mesure d’analyser les images donc vous devez leurs indiquer ce qu’elles représentent.
Ensuite, vous choisissez l’alignement par rapport au texte puis la taille de l’image.
Renseignez certain éléments ; titre, texte alternatif, légende et description
Puis cliquez sur « Insérer dans l’article. Voilà ce que cela donne dans votre éditeur.
Résultat dans l’éditeur
Ensuite, pour valider , cliquez sur « Mettre à jour » puis sur « Afficher l’article »
Ce tutoriel vous apprendra à recadrer une photographie.
Ouvrir une photo avec Photofiltre;
Choisir l’outil « Sélection » puis « Sélection rectangulaire »
Choisir l’outil « Sélection » puis « Sélection rectangulaire »
Sélectionner ensuite la zone qui vous intéresse avec la souris.
Si vous voulez conserver un format standard 4:3 (format photo), cliquez sur l’option 4:3 en bas des options de sélection. Recadrer ensuite votre image en déplaçant la zone de sélection (glisser). Vous pouvez aussi modifier la sélection en plaçant votre souris dans un coin de la sélection (elle se transforme en double flèche de couleur noire).
Pour conserver les proportions de votre sélection, appuyer sur la touche « Shift » (majuscule ponctuelle), votre sélection gardera alors ses proportions. Si votre sélection ne vous convient pas vous pouvez l’effacer en faisant clic droit « masquer la sélection » ou menu « sélection » : masquer la sélection Ensuite, clic droit sur la sélection puis copier.
Clic droit : Copier
Ensuite, rendez vous sur la partie grise de la fenêtre et faire un clic droit coller en tant qu’image.
Coller en tant qu’image
Votre image apparaît alors comme une nouvelle image. Vous n’avez plus qu’à l’enregistrer.
Voici un petit tutorial qui vous apprendra à ouvrir une photo avec le logiciel Photofiltre et de la redimensionner.
Ouvrir une photo avec Photofiltre
Faire un clic droit et choisir : Ouvrir avec : Photofiltre
Ouvrir avec : Photofiltre
Redimensionner une photo
Dans PhotoFiltre sur l’image. Faire un clic droit : Taille de l’image.
Faire un clic droit : Taille de l’image
Une fenêtre s’ouvre
Redimensionnement
Redimension de l’image
Puis cliquer sur OK pour valider.
Si vous vous êtes trompé vous avez toujours la possibilité d’annuler le redimensionnement en annulant l’opération :
Edition : défaire taille de l’image ou CTRL-Z
Enregistrer son image pour un site web.
Votre image doit avoir un poids (un taille en Ko) le plus faible possible afin de rendre le chargement de la page le plus rapide possible. Pour ce faire il existe deux formats d’imagepour le web :
jpeg
png
Si vous faites des effets de transparence, utilisez le format png sinon préférezle format jpeg.
Pour enregistrer, faites
Fichier : enregistrer sous
Fichier : enregistrer sous Une fenêtre s’ouvre. Vous devez choisir le nom et le format de votre image. Choisir jpeg. Pour le nom, si vous l’insérez dans un site web, vous ne devez utiliser que des minuscules, des chiffres et des lettres (a à z et 0 à 9) sans accent ni caractères spéciaux. Vous ne devez pas utiliser non plus d’espace. Pour séparer les mots afin de rendre le nom du fichier plus compréhensible, utilisez le – (touche 6) ou _ (touche 8).
Choisissez le format de l’image
Une nouvelle fenêtre s’ouvre. Vous devez choisir votre degré de compression : pour une image de meilleure qualité choisir 100. Pour une image plus légère mais de moins bonne qualité, choisir un une valeur moindre.
