GIMP - Création de vignettes homogènes grâce aux calques

1- Introduction

L'homogénéité et la cohérence ergonomiques dans un site est essentielle. SQLPAC propose des vignettes lors des parutions d'articles ou de nouvelles, vignettes créées avec l'outil de manipulation d'images libre GIMP 2.6.

Initialement enregistrée dans un document Office, la méthode de conception des vignettes pour SQLPAC grâce aux calques de GIMP est finalement transposée ici dans cet article afin d'aider éventuellement les néophytes du graphisme avec GIMP (comme l'auteur de cet article) qui souhaitent homogénéiser ergonomiquement leurs sites avec des vignettes.

3 étapes sont nécessaires à la création des vignettes.

• Étape 1 : création du calque d'arrière plan. Cette étape est réalisée une fois pour toutes.

• Étape 2 : récupération du logo, suppression de la couleur d'arrière plan et transformation en calque.
• Étape 3 : incorporation du calque du logo sur le calque d'arrière plan.

Les vignettes ont toutes pour dimension 86x44 (86 pixels de largeur et 44 pixels de hauteur) et dans cet exemple, la vignette pour Google Androïd est élaborée.

2- Création du calque de l'arrière plan des vignettes (background-86x44.xcf)

Cette étape est réalisée une fois pour toutes. Elle consiste à créer le calque de l'arrière plan, calque qui est enregistré dans un fichier GIMP (background-86x44.xcf) et réutilisé pour toutes les futures vignettes.

Pour préparer ce rectangle aux coins arrondis avec un dégradé Gris Blanc dans le sens vertical :

1. Créer un nouveau fichier GIMP avec un fond transparent et 4 pixels de plus pour la largeur et la hauteur par rapport à la future taille des vignettes, soit 90x48. Enregistrer ce fichier sous le nom background-90x48.xcf par exemple.
2. Sélectionner un rectangle ayant les dimensions de la future vignette (86x44)
3. Arrondir les coins du rectangle grâce au menu Sélection > Rectange Arrondi. Sélectionner par exemple un rayon de 20.
4. Définir comme couleur de première plan la couleur du haut de la vignette (e5e5e6 ici) puis remplir le rectangle arrondi avec cette couleur.
5. Effectuer une réduction de 1 pixel de la sélection rectangulaire à partir du menu : Sélection > Réduire
6. Vérifier que les couleurs de premier plan (gris e5e5e6) et d'arrière plan (blanc ffffff) sont les bonnes. Le dégradé est ensuite réalisé de bas en haut de la nouvelle sélection rectangulaire avec l'outil de dégradé dans la barre d'outils.
7. Effectuer une nouvelle sélection rectangulaire au format de la future vignette (86x44) et contenant uniquement l'arrière plan de la future vignette. Copier cette sélection rectangulaire
8. Créer un nouveau fichier GIMP avec un fond transparent et au format de la vignette : 86x44. Coller la sélection rectangulaire précédemment copiée dans ce nouveau fichier. Enregistrer ce fichier sous le nom background-86x44.xcf par exemple.

Le calque de l'arrière plan des vignettes est désormais prêt et réutilisable à volonté dans le fichier background-86x44.xcf.

3- Préparation du calque du logo Google Android (google-android.svg.xcf)

Avec Google Images, une image de Google Android, au format PNG de préférence avec la qualité la plus haute possible est téléchargée. Pour Google Android une image au format PNG 500x500 est récupérée (google-android-logo-white.png), image ayant un fond blanc.

Si l'image a une couleur de fond, comme c'est le cas ici, la première étape consiste à supprimer ce fond blanc.

• Créer un nouveau fichier GIMP google-android.svg.xcf au format de l'image à traiter (500x500) et avec un arrière plan transparent.
• Dans ce nouveau fichier, ouvrir en tant que calques l'image originale google-android-logo-white.png (Fichier > Ouvrir en tant que calques... Ctrl+Alt+O).
• Supprimer l'arrière plan blanc. Pour supprimer la couleur d'arrière plan dans une image : GIMP 2.6 - Supprimer une couleur de fond dans une image »
• Enregistrer le fichier : le calque du logo sans couleur d'arrière plan est prêt.

4- Création de la vignette Google Android

Les 2 calques sont prêts :

• Le calque de l'arrière plan.
• Le calque du logo sans couleur de fond.

La vignette peut être préparée.

1. Créer un nouveau fichier GIMP avec un fond transparent et ayant la taille de la vignette 86x44.. Enregistrer ce fichier sous le nom background-logo-google-android.xcf par exemple.
2. Ouvrir en tant que calques dans ce nouveau fichier le calque de l'arrière plan background-86x44.xcf (Fichier > Ouvrir en tant que calques... Ctrl+Alt+O).
3. Ouvrir en tant que calques dans ce même fichier le calque du logo google-android.svg.xcf (Fichier > Ouvrir en tant que calques... Ctrl+Alt+O). Le calque du logo étant nettement plus grand que la vignette, celui-ci recouvre intégralement la vignette.
4. Sélectionner toujours le calque google-android.svg.xcf et à partir du menu Calque > Echelle et taille du calque..., redimensionner ce calque afin qu'il puisse s'incorporer dans la vignette 86x44 sans être trop près des bords. La taille 42x42 est ici la plus adaptée pour le redimensionnement. Le redimensionnement dépendra largement des dimensions du calque du logo.
5. La vignette source est prête.

La vignette background-logo-google-android.xcf au format GIMP pour Google Android est prête et elle pourra être réutilisée à volonté pour générer l'image au format gif, jpg ou png (Fichier > Enregistrer sous). Voici le résultat de la vignette au format png.

Annexe