Réaliser un header

Le résultat à obtenir :


Le but du tuto ci-dessous est  d'obtenir un header avec des formes géométriques afin de confectionner la skin  comme celle-ci.

Démarche :

La fenêtre des calques se lit de bas en haut. Commentaires : - L'arrière-plan blanc va être créé lors de l'ouverture de "The Gimp" après en avoir défini les dimensions. - Nous allons ensuite créer un nouveau calque "fond rayé" pour réaliser les lignes que l'on peut voir en "surimpression" - Le calque "zone menu" en vert nous servira à la fin du tuto pour créer la barre menu. - Le caque "bas header" en violet sera destiné à recevoir la citation si cette option est activée. - Le calque "triangle rouge" pour réaliser la figure du même nom en haut et gauche. - le dernier calque "demi trapèze" pour la surface restante en bleu. (toutes ces couleurs seront réalisées avec des dégradés)

Double cliquer sur l'icône « The Gimp ».

Veiller à avoir dans la "Boite à outils" le réglage :

Premier plan : noir Arrière plan : blanc

Créer ensuite une nouvelle image (Fichier>>Nouveau)

Dans la boîte "Créer une nouvelle image", régler les différents paramètres comme ci-contre : Largeur de l'image : 999 Hauteur : 400 Résolution : 72 Espace de couleurs : Couleurs RVB Remplir avec : Couleur d'arrière plan.

Les guides :
Placer ensuite les guides qui seront utiles pour délimiter les différentes zones.

NB : Dans "The Gimp" : pas de signe # avant le code couleur.

- Commencer par "détacher" les maillons suivant le largeur et l"Espacement" afin que les différents champs ne soient pas liés. - Cliquer sur le premier rectangle de gauche afin de fixer la valeur de la couleur à "blans" (FFFFFF) : le 2° rectangle prendre la même couleur car c'est 2 "valeur" sont liées. - Cliquer sur le dernier rectangle à droite et fixer la couleur à "gris" (9A9A9A) - Régler ensuite la valeur des largeur des traits horizontaux à 2px. - Régler l'Espacement vertical entre deux traits horizontaux à 6px. - Contrôler l'aperçu avant de valider.

Premier-plan	7A8A35
Arrière-plan	AED00E

Premier-plan	8D76EF
Arrière-plan	45358A

- Sélectionner l'outil dégradé en double-cliquant sur l'outil
- Positionner la souris dans la sélection rectangulaire sur le guide B, maintenir la touche Ctrl enfoncée et déplacer la souris juqu"au trait C tout en maintenant le bouton de la souris enfoncé.





Calque "triangle gauche"
- Créer un nouveau calque en le nommant "triangle gauche".
- Pour réaliser ce tracé, nous allons avoir besoin du guide F : pour que le rectangle violet que nous avons réalisé à l'étape précédente ne nous gêne pas, nous allons désactiver momentanément ce calque 'bas header" en cliquant sur "l'oeil".
- Pour pouvoir réaliser cette sélection triangulaire nous allons utiliser l'outil "chemins" (la plume de la "Boîte à outils".

Avec l'outil plume, cliquer sur le point "1", puis sur le point "2", puis le point "3", fermer enfin le triangle en cliquant une nouvelle fois sur le point "1" tout en maintenant la touche Cttrl enfoncée.

- Transformer ensuite le traçage réalisé en sélection, pour cela ouvrir le meni "Sélection" et cliquer sur la commande "Depuis le chemin" (le tracé réalisé précédemment doit devenir un trait pointillé scintillant).
- Sélectionner l'outil "dégradé" et choisir la couleur de premier-plan et d'arrière-plan.

Premier-plan	8A4535
Arrière-plan	E53A12

- Réaliser ensuite le dégradé de haut en bas


Calque " demi trapeze" :
- Créer un nouveau calque en le nommant "demi trapèze
- Ouvir le menu "Sélection" et cliquer sur la commande "Inverser" '(la sélection active est dorénavant la totalité de la surface de l'image à l'exclusion du triangle rouge)
Pour pouvoir sélectionner la surface restante :
- Choisir l'outil "Sélection rectangulaire" et cocher dans la boîte de dialogue l'option "Sélection par intersection.
- Tracer le rectangle entre les guides

Premier-plan	45858A
Arrière-plan	31D0DE

- Réactiver le calque "bas header" en cliquant sur l'oeil dans la boîte des calques.
- Faire monter ce calque en haut de la pile, afin de le rendre visible. (Pour savoir comment déplacer un calque en haut de la pile, une animation est à disposition ici)


 
Il faut encore "jouer" sur l'opacité des calques pour les rendre légèrement translucide afin de voir les rayures par transparence.
- Se positionner sur chaque calque et descendre leur opacité en fonction du résultat souhaité (placer le curseur à environ 70%).



Il faut maintenant découper l'image ci-dessus afin d'obtenir les images nécessaires à la constitution de la skin.