Ce tutoriel vise à expliquer comment, avec l'outil gratuit XnView, on peut modifier une photo pour en faire un header dans un site Jimdo.

1. Le thème :
Jimdo
Modifier le header d'un site Jimdo avec une de ses
propres photos
TUTORIEL
© Nicolas Monseigne

2. Vous aurez besoin de…
Modifier le
header d'un
site Jimdo Il vous faudra retailler une photo.
avec sa On va ici utiliser l'outil gratuit "Xn View", disponible en
propre photo téléchargement sur la plateforme telecharger.com, à
télécharger et installer sur votre ordinateur.
TUTORIEL
© Nicolas Monseigne

3. Vous aurez besoin de…
Modifier le
header d'un
site Jimdo
Il faut aussi connaître les dimensions en pixels du visuel à
avec sa
intégrer dans l'en-tête de votre site Jimdo. RDV donc sur votre
propre photo site, et connectez-vous, en cliquant sur le lien en bas à droite
de votre site
© Nicolas Monseigne

4. Vous aurez besoin de…
Modifier le
header d'un
site Jimdo
Accéder ensuite au menu de modification de votre header. IL
avec sa
vous suffit de passer la souris sur l'illustration (ici le bateau),
propre photo puis cliquer sur "Modifier le header"
TUTORIEL
© Nicolas Monseigne

5. Vous aurez besoin de…
Modifier le
header d'un
site Jimdo
Dans l'onglet "Image
avec sa
personnelle"…
propre photo …vous trouverez les dimensions du
visuel à prévoir ! (attention dimensions
différentes d'un design à l'autre !)
TUTORIEL
© Nicolas Monseigne

6. Vous aurez besoin de…
Modifier le
header d'un
site Jimdo
Dans l'onglet "Image
avec sa
personnelle"…
propre photo …vous trouverez les dimensions du
visuel à prévoir ! (attention dimensions
différentes d'un design à l'autre !)
TUTORIEL
© Nicolas Monseigne

7. Modifier le
header d'un
site Jimdo
avec sa
propre photo
Modification de l'image dans xnview
TUTORIEL
© Nicolas Monseigne

8. Modification du visuel dans XnView
Modifier le
header d'un
site Jimdo
avec sa
propre photo
Quand vous avez
trouvé sur votre
ordinateur l'image
que vous souhaitez
TUTORIEL
intégrer sur votre
site web, faites un
clic droit sur ce
fichier et choisissez
© Nicolas Monseigne
"Ouvrir avec" >
"XnView"

9. Modification du visuel dans XnView
Modifier le
header d'un
site Jimdo Vous voici donc avec votre visuel prêt à être retoucher…
avec sa Nous avons vu que les dimensions devaient être 850x170 px.
propre photo Nous allons donc commencer par redimensionner la largeur du
cliché, à 850px…
Attention
à ce que la case
© Nicolas Monseigne
"garder les
proportions" soit
cochée !

10. Modification du visuel dans XnView
Modifier le
header d'un
On a donc une photo dont les dimensions ont changé… mais pas
site Jimdo
les proportions. Nous allons donc maintenant choisir la sélection
avec sa de 170px de haut qui nous intéresse, pour être conforme aux
propre photo dimensions du header de notre site web…
Voici ce que l'on
conservera du
cliché une fois notre
sélection de 170px
de haut effectuée
© Nicolas Monseigne
Notre sélection fait déjà 850px de large…

11. Modification du visuel dans XnView
Modifier le
header d'un On va maintenant sélectionner dans notre visuel une portion
site Jimdo d'image faisant 850px sur 170px
avec sa
propre photo
TUTORIEL
© Nicolas Monseigne

12. Modification du visuel dans XnView
Modifier le
header d'un
site Jimdo Un cadre blanc nous permet de visualiser la portion du cliché
avec sa qui sera conservée. Il suffit de choisir quelle partie de l'image
propre photo on conserve.
© Nicolas Monseigne
(Le fait d'avoir redimensionné le cliché à
850px dans un premier temps nous permet
de travailler sur le maximum de la largeur
du cliché)

13. Modification du visuel dans XnView
Modifier le
header d'un
site Jimdo Une fois la zone sélectionnée, il faut faire un clic droit sur cette zone
avec sa et sélectionner "Retailler".
propre photo Le visuel n'est plus constitué que de la zone que l'on a sélectionnée.
© Nicolas Monseigne

14. Modification du visuel dans XnView
Modifier le
header d'un
site Jimdo Vous avez la possibilité d'améliorer les contrastes et les niveaux de
avec sa couleur de l'image, en utilisant ces fonctionnalités
propre photo
TUTORIEL
Si vous n'êtes pas satisfait(e)
de la modification qui vous
est proposée, vous pouvez
© Nicolas Monseigne
l'annuler (Ctrl + Z)

15. Modification du visuel dans XnView
Modifier le
header d'un
site Jimdo Les modifications sont maintenant finies. Nous allons
avec sa enregistrer ce visuel sous un autre nom (on évitera ainsi de
propre photo perdre le cliché original !)
TUTORIEL
© Nicolas Monseigne
On choisira un format d'image
"PNG", plus qualitatif !

16. Modifier le
header d'un
site Jimdo
avec sa
propre photo
Montage du visuel sur Jimdo
TUTORIEL
© Nicolas Monseigne

17. Retour sur votre site Jimdo
Modifier le
header d'un
Accédez à nouveau à la modification du header, et
site Jimdo
allez dans l'onglet "Image personnelle" (si vous avez
avec sa laissé votre navigateur ouvert, vous devez encore être sur
propre photo cette page).
Allez chercher sur votre ordinateur le fichier .PNG
que vous venez de créer.
TUTORIEL
© Nicolas Monseigne

18. Retour sur votre site Jimdo
Modifier le
header d'un
site Jimdo
avec sa Votre visuel a été automatiquement mis en place.
propre photo Il ne vous reste plus qu'à modifier le titre, et votre header sera prêt…
© Nicolas Monseigne

19. Modifier le
header d'un
site Jimdo
avec sa
propre
photo
Fin du tutoriel
TUTORIEL
© Nicolas Monseigne
D'autres infos etourisme sur Twitter :
@mon_etourisme