Pour créer l’effet de dégradé ci-dessus…
(1) Je pars de l’image d’origine (celle-ci n’est pas très grande, je préfère si possible travailler avec des images de 2400 pixels de large, pour couvrir les besoins d’un écran haute définition de type iPad) :
(2) Dans mon logiciel de dessin, je déterminer (avec des règles bleues ici) comment découper mon image :
– La partie supérieure du ciel sera ici supprimée.
– La partie centrale sera la partie qui apparaîtra au-dessus de la zone de texte : on n’écrira donc pas sur cette partie (par choix graphique, et parce que c’est une image trop contrastée pour que du texte qui soit lisible).
– La partie inférieure sera la partie sur laquelle on commencera le bloc de texte : on écrira donc « par dessus » cette partie, qui devrait être faiblement contrastée.
(3) Étape particulièrement importante : j’applique un dégradé vers une couleur d’aplat (qui correspondra à la couleur de mon fond d’article) sur la partie basse de l’image :
(4) Je découpe l’image en deux parties :
Je sauvegarde ces deux images (img_haut.jpg
et fond_haut.jpg
par exemple) sur mon disque dur.
(5) Je me rends dans l’espace privé de mon site, sur l’article qui convient, et je trouve en colonne de droite, l’encadré suivant :
Les deux intitulés qui m’intéressent sont : « Image du haut », où je vais installer img_haut.jpg
, et « Dégradé du haut » où j’installe fond_haut.jpg
. Je peux uploader via « Enregistrer », mais ici, je vais cliquer plutôt sur la pipette.
Et hop… Cela donne directement une vue réduite de la page :
La pipette a indiqué que je voulais extraire automatiquement la couleur en bordure bas de l’image. Si le résultat automatique ne convient pas, je peux évidemment renseigner le code de la couleur à la main. (Et à l’inverse, si j’ai oublié de passer par la pipette pour uploader les images, je peux simplement cliquer sur la pipette une fois les images déjà chargées, ça fonctionnera aussi.)
Si nécessaire, j’effectue la même opération pour le bas de l’article.