Détourer ses photos avec The Gimp

Détourer ses photos avec The Gimp

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.

Si ce n’est déjà fait, vous pouvez télécharger The Gimp sur le site officiel (https://www.gimp.org/downloads/)

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
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.
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.
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.

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
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
« 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é
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
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

Les logiciels indispensables sous Windows

Les logiciels indispensables sous Windows

Les logiciels libres

Les logiciels libres pour rester dans la légalité

Tous les logiciels présentés ici sont libres et gratuits.

 

Ils vous permettent donc de profiter pleinement de votre ordinateur tout en restant dans la légalité !

Bureautique

La suite bureautique Libre Office

La suite bureautique Libre Office est gratuite et compatible avec la suite bureautique de Microsoft :

  • Traitement de texte
  • Tableur
  • Diaporama
  • Dessin vectoriel

Indispensable

Thunderbird

Thunderbird est un logiciel de messagerie.
Une très bonne alternative à Outloock Express, Windows Mail et Outloock.

Il existe de nombreux  plug-in (programmes additionnels) qui vous permettent de rajouter des options (calendrier, suivi de conversation…)

Image – Photo numérique

PhotoFiltre Free

Logiciel gratuit de retouche photo.
Idéal pour débuter
Très simple d’utilisation
Uniquement pour un usage non commercial.

The Gimp

Logiciel de retouche photo très performant.
Une alternative efficace à Photoshop.

Design

Scribus

Scribus est un logiciel de PAO Open Source très facile à prendre en main

Sécurité – antivirus

Avast

Simple et performant

Antivir

Un logiciel antivirus simple et efficace.

Zone Alarm

Ce pare-feu gratuit surveille le trafic entrant/sortant et peut vous préserver contre les tentatives de piratages.

Internet – Création de site

Firefox

LE navigateur alternatif à Internet Explorer; De plus, il possède plusieurs option pour développeur indispensable.

Notepad++

Notepad++ est un éditeur de code source qui prend en charge plusieurs langages.

Brackets

Brackets est un éditeur de code source Libre de droit

Komodo Edit

Logiciel Open Source gérant plusieurs langages et possédant un correcteur syntaxique.

Kompozer

Un éditeur HTML gratuit pour créer des pages internet statiques.

Xoops

Xoops est un CMS qui vous permet de créer des sites internet. Idéal pour les sites communautaires et participatifs

Joomla!

Un CMS simple d’utilisation.
Idéal pour créer son site vitrine.

WordPress

Un CMS simple d’utilisation et très intuitifs.
Pour les sites blogs mais également pour les sites vitrines.

Drupal

Un CMS qui vous permet de réaliser tout type de site web du plus simple au plus complexe.

 

Insérer une galerie dans un article sous WP

Insérer une galerie dans un article sous WP

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.

 

Next-Gen Galery

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 »

 indiquer la galerie à insérer

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.

 

Code

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.

Gérer les galeries dans WP

Gérer les galeries dans WP

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

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

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

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

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

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

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.

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

Page de gestion des galeries

Voici la page de gestion de votre galerie. Vous avez de multiples options.

 

Page de modification des photos

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.

Rendez-vous dans un prochain tuto.

Insérer une image en utilisant l’option « Média »

Insérer une image en utilisant l’option « Média »

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 »

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

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

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

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

Positionnez votre image

Puis cliquez sur « ajouter une 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

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

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

Cliquez sur « Insérer dans l’article » puis mettre à jour

Insérer une nouvelle image dans un article sous WP

Insérer une nouvelle image dans un article sous WP

 

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"

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

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

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

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

Résultat dans l’éditeur

 

Ensuite, pour valider , cliquez sur « Mettre à jour » puis sur « Afficher  l’article »

Résultat sur la page

Résultat sur la page

 

Et voilà.

 

 

Recadrer une photo avec PhotoFiltre

Recadrer une photo avec PhotoFiltre

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 »
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
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
Coller en tant qu’image

Votre image apparaît alors comme une nouvelle image. Vous n’avez plus qu’à l’enregistrer.

Lien vers le site web officiel : http://photofiltre.free.fr/frames.htm

Redimensionnement d’une photographie avec Photofiltre Free

Redimensionnement d’une photographie avec Photofiltre Free

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
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
Faire un clic droit : Taille de l’image

Une fenêtre s’ouvre

Redimensionnement

Redimension de l'image
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

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
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.

Un bonne valeur de compression est 90
Un bonne valeur de compression est 90

Puis cliquer sur OK

Lien vers le site web officiel : http://photofiltre.free.fr/frames.htm

Insérer des images dans un texte dans Joomla !

Comment mettre des images dans un texte (article, section, catégorie) et les positionner sur la page.

[hana-flv-player video= »http://www.afi-aveyron.fr/wp-content/uploads/2011/09/insere-images.flv »
width= »400″
height= »330″
description= » »
player= »4″
autoload= »true » autoplay= »false »
loop= »false » autorewind= »true »
/]