Editer une image

Vous souhaitez faire une petite mise en page de plusieurs photos, faire un petit montage, ou encore faire sortir votre image de son cadre avant de la mettre sur votre site web, mais vous ne savez pas du tout comment vous y prendre ? Alors ce tutoriel est pour vous.
Avec ce qui suit, je vais essayer de vous apprendre à embellir vos images vous-même en créant un petit arrangement de vos photos favorites. Je vais également vous apprendre à rendre invisible une partie de vos images afin de donner un aspect un peu plus convivial à votre site. Je vais vous apprendre à faire un petit montage photo afin de changer le paysage de vos photos par exemple. Et enfin pour finir, je vais vous montrer comment donner l'impression que vos photos sortent de leurs cadre.

Voici donc ci-dessous ce que vous serrez capable de faire après avoir lu cette page :

Paint.NET

Types de fichier

Avant de commencer, il faut que je vous parle des différents types de fichier, et quel(s) types de fichier sont les mieux adaptés.

Le .jpg : C'est le format le mieux adaptés pour la plupart de vos photos. Il compresse les images, tout en conservant une très bonne qualité. Cependant, ce format ne gère pas la transparence. Vous ne pouvez donc pas créer d'image transparente avec du jpg.

Le .png : C'est un format de très bonne qualité, mais plus lourd que le jpg. Il convient très bien pour des petits logos ou des smileys. Il gère la transparence, mais les visiteurs utilisant Microsoft Internet Explorer 6.0 ou antérieure, ne pourront pas bénéficier de la transparence de ces images. Faute à eux qui n'utilisent pas Mozilla Firefox, ou qui n'ont pas mis à jour leurs navigateurs internet. C'est dommage...

Le .gif : Il convient très bien pour des images contenant du transparent. C'est un format très léger, et qui est compatible avec toutes les versions d'Internet Explorer. Le principal désavantage est qu'il n'est pas de très bonne qualité. Note : ce format permet également d'afficher des images animées.

Le .bmp : Ce format est à bannir du web ! Il ne compresse pas les images, c'est donc un format extrêmement lourd. En plus, il ne gère pas la transparence. Ce format n'est pas conforme au standard de la W3C, et est refusé par mon programme.

Ajouter de la transparence

Vous avez sans doute remarqué que la plupart des images que j'ajoute à mes news (http://www.kinformatique.ch/page_25-news.html) sont en partie transparentes. Je vais donc vous expliquer comment faire pour créer également vos propres images transparentes.

Certains me diront que je raconte n'importe quoi, que mes images sont sur un fonds grisé ou bleuté et qu'il n'y a pas de transparence. Ils n'ont pas complètement tors. Mes images sont au format .png, et ce format n'était pas supporté par Microsoft Internet Explorer jusqu'à ce qu'ils sortent la version 7 de leurs navigateurs. Les visiteurs qui ne voient pas mes images en transparents ne sont simplement pas à jour. Vous pouvez télécharger la dernière version d'internet explorer, sur le site de Microsoft.

Assez bavarder, passons à l'action !!!

On va prendre pour exemple l'image ci-dessous, et rendre le tour transparent.
Enregistrez cette image sur votre disque dur. (Clique droite / enregistrer l'image sous...)

Ensuite ouvrez Paint.NET, puis cliquez dans le menu "fichier / ouvrir", et sélectionnez l'image enregistrée précédemment.
Vous pouvez effectuer un zoom plus ou moins grands sur votre photos en cliquant dans le menu "affichage / Zoom avant ou Zoom arrière".

Maintenant, nous allons utiliser l'outil "baguette magique". Cet outil permet de sélectionner une zone de la même couleur.
Cliquez sur la baguette magique, dans la boite d'outils, à gauche. Si vous l'avez fermé sans faire exprès, vous pouvez la réafficher depuis la barre des menu "fenêtre / outils".



Cliquez ensuite dans la zone blanche, autour de votre dessin. Toute la zone blanche serra donc sélectionnée.



Cliquez ensuite dans le menu "Edition / Effacer la sélection".



La zone de damier blanc et gris correspond à la zone transparente de votre image.
Vous n'avez plus qu'à enregistrer votre nouvelle image au format .png ou .gif.
Pour se faire, cliquez dans le menu "Fichier / Enregistrer sous...", puis sélectionnez le type .png ou .gif.

Maintenant vous avez votre logo en transparent :

Arrangement de photos

Vous avez plusieurs photos, et vous souhaitez faire un petit arrangement sympa afin de les mettre sur votre site web. Pas de problème, je vais vous montrer comment faire.
Tout d'abord il nous faut les photos. Pour cet exemple, on va prendre des photos de Paris. Le Musé du Louvre, l'arc de Triumph et la tour Eiffel !

Maintenant qu'on a les images, ouvrez Paint.NET.

Pour cette partie, nous allons utiliser des calques. Le concept des calques va peut-être vous paraître un peu flou au début, mais vous allez vite vous rendre compte que c'est beaucoup plus facile de travailler avec que sans...

Cliquez maintenant dans le menu "Calques / Importer à partir d'un fichier...". Sélectionnez ensuite l'une de vos 3 photos. Renouvelez l'opération pour toutes vos photos. Même si Vos photos sont les unes par dessus les autres, ce n'est pas grave. Nous arrangerons cela tout bientôt.

Maintenant que toutes vos images sont importées dans votre document, nous allons voir ce que nous pouvons faire avec les calques. Dans la fenêtre calques, vous pouvez afficher ou non un calque, ajouter / copier / supprimer un calque, définir l'ordre dans lesquels les calques se superposent ou encore fusionner deux calques ensembles.



Essayez de modifier l'ordre grâce aux flèches haut, et flèche bas (monter / descendre le calque). Par exemple sélectionnez le premier calque ajouté, et montez-le en première position. Il serra devant tous les autres calques.

Maintenant que vous avez vu un peu comment ça se passe, sélectionnez un des calques.
Cliquez ensuite dans le menu "Edition / sélectionner tout", ou sélectionnez l'outil "Rectangle de sélection" (L'icône d'en haut à gauche dans la fenêtre d'outils) puis tracez un rectangle autour de votre image.

Ensuite, sélectionnez l'outil "Déplacer les pixels sélectionnez" (la petite flèche en haut à droite, dans la fenêtre d'outils.) Déplacez ensuite votre image plus au centre de la page.

Sélectionnez le calque suivant, puis renouvelez l'expérience sans oublier de sélectionner à nouveau votre image. Sinon le déplacement des pixels se ferra sur la zone sélectionnée actuellement, et qui n'est probablement pas celle de votre image.

Faite cela pour toutes vos images afin de trouver un arrangement qui vous convient. Vous pouvez également agrandir ou rétrécir vos images, en cliquant sur l'un des ronds aux quatre coins de votre image. Pour conservez le rapport "hauteur - largeur" et ne pas déformer votre image, vous pouvez maintenir la touche "majuscule" enfoncée pendant que vous redimensionnez votre image.
Déplacez également la position de vos calques comme vu plus haut pour mettre vos images dans l'ordre que vous le souhaitez.

Une fois que vos images sont dans l'ordre que vous souhaitez, nous pouvons leurs ajouter un cadre de couleur.

Pour se faire, commencez par désélectionnez l'image à l'aide du menu "Edition / désélectionnez" ou à l'aide de la touche <Esc>.

Sélectionnez le calque de l'une des trois images. Prenons l'arc de Triumph par exemple. Prenez ensuite le rectangle dans la fenêtre d'outils, puis choisissez une couleur dans la "fenêtre couleurs". Si vous avez fermé la fenêtre de couleur par erreur, vous pouvez la réafficher grâce au menu "Fenêtre / Couleurs".



Une fois chose faites, tracez un rectangle autour de votre image, pour la décorer. Vous pouvez choisir l'épaisseur de vos traits, grâce à l'élément largeur du pinceau de la barre d'outils. Si vous ne visez pas correctement le tour de l'image, vous pouvez annuler votre dernière action depuis le menu "Edition / annuler", puis réessayer.

Répétez l'opération pour chacun des calques, sans oublier de sélectionne le bon calque. Pour simplifier l'opération (pour la tour Eiffel par exemple), vous pouvez masquer temporairement les calques du dessus en décochant les cases se trouvant à côté des calques, dans la "fenêtre calques".

Une fois que les décorations de vos images sont faites, nous allons couper notre image pour éliminer tout le blanc inutile.
Sélectionnez donc l'outil "Rectangle de sélection", et dessinez un rectangle autour de vos images. Ensuite, conservez uniquement la zone sélectionnée à l'aide du menu "Image / Rogner selon la sélection".



Vos avez maintenant votre image finale, avec un fond blanc. Vous pouvez ajouter une couleur d'arrière plan en procédant comme suite :
Sélectionnez le calque "Arrière plan". Sélectionnez ensuite l'outil "Pot de peinture", dans la barre d'outils. Puis sélectionnez une couleur à choix. Cliquez ensuite dans l'espace blanc. Le fonds changera de couleur avec celle que vous avez choisi.

Vous pouvez également faire un dégradé en sélectionnant l'outil "Dégradé" de la fenêtre d'outils. Puis vous tirez un trait avec cet outil, dans le calque de l'arrière plan. Vous pouvez choisir le type de dégradé avec les outils adéquats, en haut à gauche de la barre d'outils. Vous pouvez choisir une deuxième couleur pour le dégradé en effectuant un clic sur la couleur de droite (la blanche actuellement), dans la "fenêtre couleurs".



Maintenant que vous avez votre image finale, il ne vous reste plus qu'à l'enregistrer. Pour se faire, cliquez dans le menu "Fichier / Enregistrer sous...". Enregistrez votre image au format Paint.NET (*.pdn) pour pouvoir la rééditer un jour. Vous conserverez ainsi les calques, et pourrez changer la couleur de fonds, et déplacer vos images sans problèmes.

Une fois chose faite, enregistrez une seconde fois votre image à l'aide du menu "Fichier / Enregistrer sous...", mais choisissez le format "JPEG (*.jpg)" cette fois-ci. A l'écran suivant, vous pouvez laissez les paramètres par défaut (qualité 96). Ensuite, vous aurez un message qui vous demande si vous souhaitez aplatir votre image, ce qui la réduirait à un seul calque. Ce n'est pas un problème, puisque nous avons enregistré notre projet une première fois dans un format qui permet de conserver nos calques. Vous pouvez donc cliquer sur "Aplatir". Vous avez ainsi votre image finale !!!

Changer le paysage d'une image

Maintenant, je vais vous montrer comment modifier un paysage d'une photo. On va prendre pour exemple, notre photo de l'arc de Triumph, et on va lui mettre un éclair juste derrière.
Voici les images que nous allons utiliser :



Maintenant, lancez Paint.NET, et ouvrez l'image de l'éclair. Puis importez l'arc de Triumph dans un nouveau calque (calque / importer à partir d'un fichier).

L'arc de Triumph se trouve au dessus de votre éclair. Maintenant, nous allons gommer le ciel à l'aide de l'outil gomme de la fenêtre d'outils. Vous pouvez augmenter la taille de votre gomme, à l'aide de l'option "Taille du pinceau[g]" de la barre d'outils.



Si vous gommez un morceau du monument par erreur, vous avez toujours la possibilité d'annuler votre dernière action depuis le menu "[g]Edition / Annuler".

Une fois que votre gommage est parfait, et qu'il ne reste plus que le monument, vous pouvez enregistrer votre document au format Paint.NET (*.pdn). Ainsi, si l'envie vous prend, vous pourrez toujours essayer de changer de paysage sans devoir tout recommencer.

Une fois chose faite, sélectionnez le calque de l'arc de Triumph, puis sélectionnez votre image (Edition / Sélectionner tout), et placez là a l'emplacement de votre choix, sur l'image de fonds, à l'aide de l'outil "Déplacer les pixels sélectionnés" (flèche en haut à droite de la fenêtre d'outils).

Une fois l'emplacement choisi, sélectionnez le morceau de l'image dont vous souhaitez conserver, à l'aide de l'outil "Rectangle de sélection" (carré en haut à gauche de la fenêtre d'outils).



Vous n'avez plus qu'à conserver uniquement la zone sélectionnée à l'aide du menu "Image / Rogner selon la sélection". Puis la sauver au format JPEG (*.jpg).

Et voilà, vous avez un éclair derrière votre arc de Triumph.



Libre court à votre imagination, et votre patience...

L'image qui sort du cadre

Vous avez sûrement déjà vu des photos ou l'image sort de son cadre, dans des articles de journaux par exemple...
Et bien je vais vous expliquer comment faire vos propres images qui sortent de leurs cadres. Ca donne un effet vraiment sympa, et vous verrez que ce n'est pas du tout difficile à réaliser...

Pour cet exemple, nous allons reprendre notre jolie Tour Eiffel.



Sélectionnez ensuite la zone que vous souhaitez conserver (Votre cadre. Le reste en sortira) à l'aide de l'outil "Rectangle de sélection"



Ensuite, coupez cette zone à l'aide du menu "Edition / Couper". Puis collez cet élément dans un nouveau calque à l'aide du menu "Edition / Coller dans un nouveau calque".

Désélectionnez votre image à l'aide du menu "Edition / Désélectionner" puis sélectionnez le deuxième calque. Maintenant, effacez tous le tour de la tour Eiffel à l'aide de l'outil Gomme.




Déplacez ensuite le cadre que vous venez de découper en première position, à l'aide de la flèche "monter le cadre" qui se trouve dans la fenêtre des calques.

Sélectionnez ensuite votre calque ou se trouve la photo de la tour Eiffel (celui qui n'est pas coupé), puis prenez l'outil Rectangle, choisissez la couleur de votre cadre, et encadrez votre image.

Veillez bien à ce que la ligne du haut passe bien derrière la zone découpée précédemment, de sorte qu'on ne voit pas la ligne qui passe derrière ce calque.

Faux :


Juste :


Voilà, vous n'avez plus qu'à enregistrer votre image au format png, et vous avez une belle image qui sort de son cadre !!!
_____________________________________