Gimp - Vos blocks

Par où commencer, me diriez-vous ? Il faut tout d'abord se faire une idée d'ensemble.

Concept

- Ne touchez plus votre souris, ni même votre clavier : vous devez tout d'abord prendre le temps de visualiser votre fond dans votre esprit, ou d'en faire un croquis, en fonction des éléments de la page qui s'y trouveront. Le texte, les images, les liens, toutes ces choses peuvent être mises en valeur dans votre page, sur la qualité du fond, l'ensemble doit coller.


Ainsi, vous pouvez vous lancer dans la création de votre fond, même si vous ne possédez pas encore la structure et les éléments de votre page, votre qualité d'anticipation étant cependant mise à l'épreuve. Autrement, vous n'avez qu'à vous appuyer sur le visuel offert par votre page déjà en fonction.

La bordure

- Il va falloir anticiper une nouvelle fois, l'ajout d'une bordure au moment de la finalisation agrandissant la taille de votre image, sur l'utilisation du Script-Fu « Ajouter une bordure ». Testez ce Script-Fu dès maintenant si vous voulez, <Image> Script-Fu > Décor > Ajouter une bordure. Prévoyez de retirer la taille de la bordure (deux fois ) à celle de votre image de base lors de la détermination de la taille, pour que cela colle parfaitement avec votre block. Sinon, ne vous en souciez pas, et n'utilisez pas ce script, la bordure pouvant être faite manuellement à l'intérieur même de l'image.

Vous voilà décidés, l'image projetée de votre block resplendit en coin de vos méninges de zér0 : lancez-vous.

La base

- Créez une nouvelle image (Ctrl + N) de la taille de votre block. Ouvrez le menu déroulant des options avancées pour choisir de plus amples caractéristiques, mode RVB par défaut et fond transparent. Notez aussi que vous pouvez sélectionner la taille autrement qu'en unité pixel, pour les originaux.

Réalisons un remplissage par une couleur neutre, à choisir par la méthode qu'il vous plaira, sur la boîte de dialogue couleur, sur l'onglet que vous aurez judicieusement placé. Mettez donc la couleur de votre choix, <Image> Édition > Remplir avec la couleur de PP (Ctrl + ,) ou PP selon.



Maintenant on va s'exciter.

La lumière

- Pour l'exemple, la source d'éclairage sera arbitrairement définie à gauche de l'écran, c'est une vue de l'esprit servant à appliquer les effets d'ombre.

Créez un nouveau calque semblable au précédent, donc à fond transparent (Shift + Clic gauche sur l'icône dans le coin en bas à gauche de la structure principale (Toolbox), ou par menu, <Image> Calque > Nouveau Calque).
Choisissez l'outil dégradé (L) en gardant la couleur de base, et en sélectionnant une couleur plus claire pour l'arrière-plan ; appliquez un coup en maintenant le clic, d'orientation ici horizontale, testez jusqu'à obtenir ce qui vous plaît. Le dégradé est fortement appuyé sur l'exemple.



De nouveau, créez un nouveau calque, élargissez votre fenêtre d'image, faites une sélection ovale avec l'outil adéquat (E) englobant la majeure partie gauche. Inversez maintenant la sélection (Ctrl + I, ou <Image> Sélection > Inverser la sélection) afin d'avoir une sélection de la partie droite de votre fond, sélection concave en dedans. Remplissez maintenant avec une couleur plus sombre. Jouez un peu sur l'opacité de ce calque, pour plus ou moins marquer cet effet d'ombre.

Les cadres d'éléments

- Nous allons créer les espaces destinés à mettre en valeur les éléments du menu. Plutôt que d'utiliser un fond et des boutons images pour les éléments de votre menu, le fond servira de trompe-l'oeil, en créant une impression de bouton. L'inconvénient d'une telle astuce est de devoir modifier son fond dès qu'un élément du menu change, mais heureusement, ce n'est pas tous les jours, et l'on n'a pas à se soucier d'ajouter le moindre bouton en plus du fond. Chacun son point de vue sur le sujet : l'astuce vous est présentée, libre à vous de l'utiliser ou de l'oublier.


Créez un nouveau calque, faites une sélection avec l'outil de sélection rectangulaire (R) là où se placera l'élément ; ne vous formalisez pas de trop avec la précision, le code CSS peut aussi s'adapter. Sinon, placez des guides de façon régulière pour délimiter vos zones : l'appel aux guides se fait sur les bordures graduées, par un clic maintenu pour les faire glisser. L'abscisse et l'ordonnée sont visualisables dans le coin en bas à gauche de la fenêtre image. Vérifiez que la mise par défaut d'alignement sur guide est bien présente : <Image> Affichage > Aligner sur guide, votre sélection collera aux guides.



Voyez sur cette image les guides en place, formant un rectangle avec la sélection en chemin de fourmi. Maintenant adoucissons cette sélection, <Image> Sélection > Rectangle arrondi, le réglage du script doit être d'autant plus fort que la sélection est petite. Arrondissez-le comme il vous plaira.

Remplissez maintenant cette sélection de blanc ! Vous comprendrez ensuite pourquoi une telle couleur. Et reproduisez ce rectangle arrondi pour chaque élément, en faisant du copier-coller, ou en suivant vos guides, si vous avez la patience d'en placer pour chacun d'eux.



Faisons le point sur les calques :



Simplifions cela avant d'aller plus en avant : fusionnez le calque "ombre concave" vers le bas, avec celui du dégradé, le calque résultant gardera le nom dégradé. (Clic droit sur le calque + F, ou en cliquant sur Fusionner vers le bas.)

Sur votre calque des rectangles blancs, sélectionnez tous vos rectangles : l'outil le plus direct est ici la sélection par couleur Shift + O ; cliquez sur du blanc pour avoir tous vos rectangles en sélection. Gardez cette sélection et allez sur le calque dégradé, effacez la sélection (Ctrl + X ou menu Édition > Effacer).

Fusionnez maintenant le calque dégradé vers le bas sur la base, Passez le calque rectangle blanc sous le calque base, déplacez-le par un clic maintenu par exemple. On se retrouve donc avec deux calques.



Et notre image apparente :



Pour un aspect de relief, la couleur blanche de vos rectangles va vous permettre d'utiliser le prochain filtre, qui accorde une valeur importante à cette couleur, et moindre plus la couleur tend vers le noir. < Image > Filtres > Cartes > Repoussage d'après une carte. Une fenêtre de réglage s'affiche : sélectionnez le repoussage d'après carte de votre calque à rectangles blancs, type linéaire.

Compensez l'assombrissement. Vous pouvez cocher "inverser le relief", selon l'azimut, voyez l'effet que vous voulez y donner, et testez un peu les réglages pour vous familiariser avec. Voilà ce que l'on obtient pour l'exemple.



Voilà que ça commence à ressembler à quelque chose : et de votre côté, ça donne quoi ?

Vous pourriez vous contenter de ce résultat, si la finesse de votre menu donne une impression de fini. L'exemple ici fourni a été prévu un peu grossier, épais pour pouvoir travailler d'autres détails.

Trompe-l'oeil

- Il est possible d'adapter la couleur du fond des éléments pour l'adapter à la couleur de votre police d'ensemble. Sur vos calques de base, sélectionnez vos cadres avec la baguette magique (Z), en l'étirant d'un côté ou de l'autre pour avoir une sélection respectant les reliefs, adoucissez la sélection au besoin pour ne pas avoir de pixellisation (<Image> Sélection > Adoucir) : n'y allez pas trop fort. Modifiez la sélection par des dégradés, un quelconque remplissage de couleur, utilisez les techniques grappillées ailleurs... A vous de voir.

Plusieurs thèmes différents sur la même image pour exemple.

L'extérieur

- Vos éléments sont entourés par trop de vide, ajoutez des images ; des motifs, ce qu'il vous plaira autour, mais restez simples ! Les possibilités sont infinies, utilisez ce que vous avez appris ailleurs.

Finition

- Deux étapes peuvent se faire, et se font préférentiellement en fin de réalisation, les deux décrites ci-dessous font appel à des Script-Fu, ces tâches automatisés seront donc faciles à exécuter.

- Un effet de relief général, <Image> Script-Fu > Décor > Ajouter un biseau. Mais attention, ne forcez pas sur le biseau, c'est une option utile, mais une option de facilité, qui peut rendre le tout un peu lourd. Dosez-le comme vous le sentez.

La toute fin peut se faire par l'ajout d'une bordure, pour ceux qui souhaitent mieux démarquer leur block, vis-à-vis du fond général. <Image> Script-Fu > Décor > Ajouter une bordure. Régler cette bordure comme il vous plaira, pour la couleur, adaptez-la avec votre page. L'exemple prend une bordure noire de 2 px.

Évidence

- Votre fond doit maintenant être enregistré dans le répertoire adéquat, en spécifiant le type d'extension. Utilisez par exemple un format .jpg pour être tranquille, les calques présents seront empilés si vous ne l'avez fait manuellement, réglez la qualité sur 100.

Visuel final, avec une simulation d'un texte contenu dans une page, Zozor a été ajouté sur le fond...