Utilisation de GIMP pour la cr�ation d'une page Web

Am�lioration d'une image

Dans cet exemple, nous allons prendre une image et�:

• effectuer une correction de couleur automatique,

• corriger un probl�me fr�quent dans les photographies�; les reflets du flash dans les yeux,

• supprimer certaines portions ind�sirables de l'image.

Tout d'abord, il faut ouvrir une image num�ris�e dans GIMP en s�lectionnant File => Open�:

Comme vous pouvez le voir, l'original de la photo du chien Bonnie n'est pas excellent. Les couleurs sont ternes. Ses yeux sont r�ellement probl�matiques�; le flash s'y refl�te en leur donnant une couleur verte inqui�tante. De m�me, deux �l�ments parasites devraient �tre �limin�s�: la tache sombre sur sa patte et la main que l'on voit � proximit� de sa t�te.

Tout d'abord, nous allons utiliser GIMP pour proc�der � une correction automatique des couleurs. Cliquez avec le bouton droit sur l'image, puis s�lectionnez Image => Colors => Levels pour afficher la bo�te de dialogue Levels. Puisque nous cherchons � am�liorer la couleur, dans le menu d�roulant Modify Levels for Channel, s�lectionnez Red, comme illustr� � la Figure 9-10.

L'histogramme affiche les valeurs de rouge pour tous les pixels de l'image. La plage de valeurs de rouge dans l'image ne correspond pas � la totalit� de la plage tonale disponible (repr�sent�e par la barre inf�rieure qui pr�sente toutes les nuances du noir au rouge). Autrement dit, aucun des pixels de l'image n'a de valeurs de rouge dans la plage la plus sombre (l'histogramme est plat dans la zone tr�s sombre de la plage).

Si vous examinez les niveaux Blue, Green et Value (luminosit�), leurs histogrammes pr�sentent un aspect similaire. Dans l'ensemble, les couleurs les plus sombres de l'image ne sont pas aussi sombres qu'elles pourraient l'�tre, �tant donn� la plage de couleurs. L'image aura un meilleur aspect si la plage de valeurs est compress�e de mani�re � occuper la totalit� de la plage de valeurs disponibles.

Cela para�t compliqu� mais, avec GIMP, c'est tr�s simple. Cliquez simplement sur le bouton Auto dans la bo�te de dialogue Levels. Le choix d'Auto r�gle automatiquement toutes les plages de couleurs (rouge, bleu et vert). Si vous voulez �galement r�gler l'option Value (luminosit�) de l'image, s�lectionnez Value dans le menu d�roulant Modify Levels for Channel, puis cliquez de nouveau sur Auto.

Si la case � cocher Preview figurant dans la bo�te de dialogue Levels est activ�e, le syst�me affiche un aper�u de la correction sur l'image. Si le r�sultat vous convient, cliquez sur OK dans la bo�te de dialogue Levels afin de valider les modifications.

A pr�sent, l'image de Bonnie ressemble � la Figure 9-11.

Nous allons maintenant utiliser l'outil clone pour supprimer les �l�ments parasites de l'image. L'outil clone permet de saisir une partie de l'image, puis de peindre l'image avec cette partie. Vous pouvez ainsi remplacer des �l�ments ind�sirables de l'image par un motif au rendu r�aliste (qui provient de l'image).

Tout d'abord, vous allez utiliser la touche = pour faire un gros plan de la tache sombre sur la patte de Bonnie. Vous devrez ensuite s�lectionner la brosse appropri�e (pour s�lectionner une brosse, cliquez sur la brosse active dans la bo�te � outils, puis s�lectionnez-en une dans la bo�te de dialogue Brush Selection). Pour cet expos�, nous avons choisi Circle (07) (7 x 7).

S�lectionnez l'outil clone dans la bo�te � outils. En maintenant la touche Ctrl enfonc�e, cliquez sur la zone � gauche de la tache sombre pour s�lectionner une portion d'image � utiliser comme motif. Rel�chez la touche Ctrl. L'ic�ne de la mire se transforme en ic�ne de crayon, vous permettant de peindre � l'aide de la portion d'image s�lectionn�e comme motif.

Tandis que vous peignez � l'aide de l'outil clone, l'ic�ne de la mire suit le d�placement du curseur � distance de la brosse. L'ic�ne de la mire marque la zone d'o� provient le motif utilis� par la brosse.

La m�me technique permet de supprimer la petite portion de main � proximit� de la t�te de Bonnie. Utilisez la m�me brosse et s�lectionnez une portion du blue jeans proche de la main � cloner.

GIMP permet d'�liminer le reflet vert inqui�tant dans les yeux de Bonnie. Dans la bo�te de dialogue Brush Selection, s�lectionnez la brosse Circle Fuzzy (11) x 11). Utilisez l'outil s�lecteur de couleur pour s�lectionner une couleur noire � la p�riph�rie non-verte de l'oeil. Utilisez ensuite l'outil pinceau pour peindre la zone verte�; le plus difficile consiste � laisser un peu de blanc dans les yeux, afin qu'ils aient l'air plus naturels (au lieu d'�tre uniform�ment noirs).

Apr�s r�glage automatique des niveaux de couleur et �limination de la tache, de la main et du reflet vert, l'image ressemble � la Figure 9-12.

Enfin, nous allons estomper le bord de l'image pour obtenir un effet d�coratif.

Cr�ez une nouvelle image, plus grande que la photo de Bonnie, avec un arri�re-plan de couleur blanche. Coupez et collez l'image de Bonnie dans la nouvelle image. Utilisez l'outil de s�lection rectangulaire pour s�lectionner un rectangle l�g�rement plus petit que l'image de Bonnie. Cliquez ensuite avec le bouton droit sur l'image, puis s�lectionnez Select => Invert pour inverser la s�lection, de mani�re � s�lectionner un "cadre" rectangulaire autour de l'image, comme � la Figure 9-13.

Pour estomper le bord, cliquez avec le bouton droit, puis s�lectionnez Filters => Blur => Gaussian Blur (IIR). Les deux param�tres Blur Radius �tant r�gl�s sur 10, cliquez sur le bouton OK pour appliquer le filtre.

L'image est ensuite rogn�e pour ne laisser qu'une petite bordure blanche, comme illustr� � la Figure 9-14.

Enfin, l'image est enregistr�e comme fichier .jpg afin qu'il soit possible de l'utiliser sur notre page Web.

Cr�ation d'un fond pour page Web

Du fait que la page Web affiche l'image d'un chien, nous allons utiliser comme fond une empreinte de patte stylis�e.

La premi�re �tape consiste � cr�er une image d'empreinte de patte en noir et blanc. Ouvrez une nouvelle fen�tre d'image en s�lectionnant File => New. Dans la bo�te de dialogue New Image qui s'affiche, r�glez les options Width et Height sur 500 pixels, afin de disposer d'un espace de travail suffisant�; vous pourrez toujours rogner l'image lorsque vous aurez termin�. Param�trez Fill Type sur White, puis cliquez sur le bouton OK.

Pour composer l'image, cr�ez une s�lection ovale, puis utilisez l'outil seau pour remplir la s�lection de noir. Copiez la s�lection ovale (Ctrl-C) et collez-la (Ctrl-V) � deux reprises de mani�re � disposer les trois ovales de fa�on appropri�e. Utilisez ensuite l'outil pinceau avec une petite brosse pour dessiner le coussinet de la patte. Lorsque vous dessinez, il est toujours plus facile de dessiner une image de grande taille, puis de la r�duire � la fin. L'image originale en noir et blanc, d'une taille de 128 x 134 pixels, ressemble � la Figure 9-15.

L'image de l'empreinte servira de bloc structurel de base pour la cr�ation de l'image suivante, une s�rie de traces de pattes qui traversent la page, comme illustr� � la Figure 9-16. Pour cr�er l'image des traces de pattes, l'image de l'empreinte doit �tre�:

• Mise � �chelle -- cliquez avec le bouton droit sur l'image, puis cliquez sur Image => Scale Image afin d'afficher la bo�te de dialogue Scale Image. L'image a �t� r�duite � un Ratio de 0,85, parce qu'elle �tait un peut trop grande pour l'effet souhait�.

• Pivot�e -- s�lectionnez l'outil Transforms dans la bo�te � outils et faites pivoter l'image, � main lev�e, d'un angle d'environ 50 degr�s par rapport � l'horizontale.

• Copi�e et coll�e dans une nouvelle image de plus grande taille -- � l'aide de Ctrl-C, puis de Ctrl-V.

  La premi�re empreinte est coll�e dans la nouvelle image � l'aide de la combinaison de touches Ctrl-V. L'empreinte est ensuite d�plac�e vers l'emplacement souhait�. Une fois la premi�re empreinte plac�e correctement, une autre copie de l'empreinte est coll�e dans l'image. La seconde empreinte est � pr�sent l'image active, directement coll�e sur la premi�re image. La seconde empreinte est ensuite �cart�e de la premi�re vers l'emplacement appropri�. La m�me op�ration est r�p�t�e pour les troisi�me et quatri�me empreintes. Si vous d�placez quelque chose au mauvais endroit, mais avez d�j� s�lectionn� quelque chose d'autre, vous pourrez toujours utiliser la combinaison de touches Ctrl-Z pour revenir en arri�re et essayer � nouveau.

  Nous utiliserons ensuite un filtre pour cr�er un effet sp�cial. Les filtres conf�rent un aspect particulier � une image. Cliquez avec le bouton droit sur l'image, puis s�lectionnez Filters pour afficher la liste des filtres de GIMP. Pour cette image, nous allons commencer par utiliser le filtre Gaussian Blur (IIR), puis le filtre Bump Map.

  Une fois les empreintes plac�es au bon endroit, l'image est estomp�e en s�lectionnant Filters => Blur => Gaussian Blur (IIR), puis en d�finissant les valeurs de l'option Blur Radius, tant horizontale que verticale, sur 5 (valeurs par d�faut). L'image est estomp�e parce que le filtre suivant, Bump Map, agit sur les pixels clairs et sombres, de sorte que ses r�sultats semblent plus naturels avec un peu d'ombrage entre le noir et le blanc de l'image d'origine.

  L'image des traces en noir et blanc, l�g�rement estomp�e et remise � �chelle de 50 % de fa�on � obtenir une taille de 250 x 250 pixels, ressemble � la Figure 9-16.

  

  Figure 9-16. Traces en noir et blanc

Ensuite, le motif Cork board est ajout� � un nouveau calque de l'image. Utilisez Layers => Layers, Channels & Paths pour afficher la bo�te de dialogue Layers, Channels & Paths, comme illustr� � la Figure 9-17.

Les calques gardent des parties de l'image de travail s�par�es les unes des autres, de mani�re � ce que vous puissiez travailler sur un �l�ment de l'image sans que cela n'affecte les autres. Les calques sont un outil essentiel pour la manipulation d'images complexes.

La bo�te de dialogue Layers affiche la liste de tous les calques de l'image. Comme l'illustre la Figure 9-17, l'image ne comprend qu'un seul calque, renomm� Pawprints (cliquez avec le bouton droit sur le calque, puis s�lectionnez Edit layer attributes et tapez un nom descriptif).

Vous pouvez ensuite ajouter un nouveau calque au motif en cliquant sur l'ic�ne New layer �. Dans la bo�te de dialogue New Layer Options qui s'affiche, laissez les options Layer Width et Height param�tr�es sur leurs valeurs par d�faut (le calque aura la taille de l'image). R�glez Layer Fill Type sur White, puis cliquez sur le bouton OK.

Les nouveaux calques automatiquement cr��s viennent se superposer aux anciens, de sorte que vous ne voyez pas le calque original dans l'image.

Ensuite, le calque est rempli avec le motif Cork board (panneau en li�ge). Pour remplir un calque avec un motif, assurez-vous que le calque est "actif" (en surbrillance avec une barre color�e dans la bo�te de dialogue des calques�; les calques inactifs apparaissent en blanc). Reportez-vous � la Figure 9-18 pour obtenir un exemple�; le calque Cork board est actif. Ensuite, dans les Tool Options pour l'outil seau (double-cliquez sur l'outil seau pour afficher les Tool Options), s�lectionnez Pattern Fill. Cliquez sur le motif actif dans la bo�te � outils pour afficher la palette des motifs, puis s�lectionnez Cork board. Utilisez ensuite l'outil seau pour remplir le calque Cork board.

Dans la bo�te de dialogue Layers, faites du calque des empreintes le calque actif en cliquant dessus. Cliquez ensuite sur l'ic�ne en forme d'oeil ( ) afin de rendre le calque du panneau en li�ge invisible (un autre clic sur l'ic�ne en forme d'oeil rendra de nouveau le calque visible).

Sur l'image qui devrait uniquement montrer les empreintes comme � la Figure 9-16, utilisez l'outil baguette magique pour s�lectionner un pixel blanc. Cliquez ensuite avec le bouton droit sur l'image et s�lectionnez Select => Invert pour inverser la s�lection, de mani�re � ne s�lectionner que les pixels noirs et gris.

Maintenant, lorsque vous cliquez sur l'ic�ne de l'oeil dans la bo�te de dialogue des calques afin d'afficher le calque du panneau en li�ge, le syst�me affiche la s�lection de l'empreinte, comme illustr� � la Figure 9-19.

L'�tape suivante consiste � assombrir uniquement la zone des empreintes s�lectionn�e. Les empreintes doivent �tre assombries de mani�re � ce que le filtre Bump Map les affecte, ainsi que le reste du motif du panneau en li�ge. GIMP offre plusieurs m�thodes pour assombrir la zone s�lectionn�e. Une m�thode simple consiste � cliquer avec le bouton droit sur l'image (tandis que la s�lection est active), puis � s�lectionner Image => Colors => Brightness-Contrast. Dans la bo�te de dialogue Brightness-Contrast, le curseur Brightness doit �tre d�plac� vers -40, comme illustr� � la Figure 9-20.

Cliquez sur le bouton OK pour assombrir la zone s�lectionn�e. Cliquez ensuite avec le bouton droit sur l'image, puis s�lectionnez Select => None (ou utilisez le raccourci clavier Maj-Ctrl-A) pour annuler la s�lection, de mani�re � ce que le syst�me affiche quelque chose ressemblant � la Figure 9-21.

Pour appliquer le filtre, cliquez avec le bouton droit sur l'image, puis s�lectionnez Filters => Map => Bump map pour afficher la bo�te de dialogue Bump Map�:

Dans la bo�te de dialogue Bump Map, la case � cocher Compensate for Darkening est s�lectionn�e, et la valeur de l'option Depth r�gl�e sur 5 (ce qui accentue l'impression de profondeur de l'empreinte). Un aper�u de l'image apr�s application du filtre est fourni pour illustrer l'effet des diff�rents param�tres Bump Map sur l'aspect d'une image. Lorsque vous cliquez sur OK, le filtre Bump Map est appliqu� � l'image, comme illustr� � la Figure 9-23.

Les graphiques de fond pour les pages Web doivent pouvoir s'afficher en mosa�que, c'est-�-dire qu'il doit �tre possible de juxtaposer plusieurs fois le motif sur la page, de telle sorte que les ajustements bord � bord soient invisibles. Dans ce cas, �tant donn� que le motif du panneau en li�ge est d�j� une mosa�que, il est inutile de refaire l'op�ration. En revanche, si vous travaillez sur un graphique non mis en mosa�que, GIMP peut composer une mosa�que de fond � partir de ce graphique�; il suffit de s�lectionner le filtre Filters => Map => Tile.

Cr�ation d'images de titre pour pages Web

GIMP est tr�s pratique pour cr�er des logos (texte pour titres et liens), des boutons et d'autres �l�ments graphiques tels que des puces pour les pages Web.

Dans cet exemple, nous allons utiliser deux filtres GIMP afin de personnaliser l'aspect d'une partie du texte de notre page Web.

La premi�re �tape consiste � ouvrir un nouveau fichier, aux dimensions de 400 x 100 pixels, sur fond blanc. S�lectionnez File => New, d�finissez correctement les param�tres Width et Height, puis activez la case d'option Transparent.

Cliquez sur l'outil texte dans la bo�te � outils afin de le s�lectionner. Cliquez ensuite sur l'image�; la bo�te de dialogue Text Tool s'affiche comme � la Figure 9-24.

Tapez le texte de votre choix dans le champ Preview � proximit� du bas de la bo�te de dialogue. S�lectionnez ensuite Font, Font Style et Size dans les menus d�roulants de la bo�te de dialogue. Le texte tap� change pour vous permettre de pr�visualiser vos s�lections, comme illustr� � la Figure 9-25.

Ce texte sera l'ombre projet�e du texte "r�el". Remplacez la couleur d'avant-plan par une couleur pour l'ombre projet�e. Pour cet exemple, nous avons s�lectionn� un gris moyen, avec une valeur RVB de 153 153 153. Lorsque vous cliquez sur OK dans la bo�te de dialogue Text Tool, le texte s'affiche dans la fen�tre de travail, comme illustr� � la Figure 9-26.

Cliquez sur l'outil de s�lection rectangulaire, puis sur l'image afin d'ins�rer la s�lection de texte dans l'image. Pour cr�er une ombre projet�e, cliquez avec le bouton droit sur l'image, puis s�lectionnez Filters => Blur => Gaussian Blur (IIR). La bo�te de dialogue Gaussian Blur permet de param�trer l'option Blur Radius, r�gl�e sur la valeur par d�faut de 5 pixels, afin de produire l'effet estomp� illustr� � la Figure 9-27.

Il faut � pr�sent ajouter le texte "r�el" � l'image. Tout d'abord, il convient de modifier la couleur de l'avant-plan actif. Dans le cas pr�sent, nous choisissons un rouge pass� (RVB 204 051 051). Ensuite, apr�s avoir activ� l'outil texte, cliquez sur l'image. La bo�te de dialogue Text Tool s'affiche. Assurez-vous que les m�mes param�tres sont s�lectionn�s (ils le seront par d�faut, � moins que vous n'ayez entre-temps ferm� GIMP). Cliquez sur OK pour ajouter les mots "Hello World!" en rouge � l'image, puis positionnez correctement le texte comme illustr� � la Figure 9-28.

Peut-�tre le r�sultat vous semble-t-il un peu simpliste, et souhaitez-vous quelque chose de plus "voyant" pour votre page Web. Une option possible consiste � appliquer au texte l'un des d�grad�s de GIMP.

Tandis que le texte en rouge "Hello World!" est actif, double-cliquez sur l'outil de d�grad� pour l'activer et affichez la bo�te de dialogue Tool Options. A cet effet, l'option Custom Gradient est param�tr�e sur Blend et l'option Shapeburst (angular) sur Gradient, comme illustr� � la Figure 9-29.

L'�tape suivante consiste � s�lectionner le d�grad� de GIMP � utiliser. Cliquez sur le d�grad� actif dans la bo�te � outils pour afficher la palette des d�grad�s disponibles. Cliquez sur un d�grad� afin de l'activer. Pour appliquer un d�grad� � votre texte, assurez-vous que le texte est toujours la s�lection active. Cliquez ensuite sur une partie du texte et faites-la glisser (�tant donn� que nous avons s�lectionn� l'option Shapeburst (angular), la longueur du d�placement n'affecte pas l'aspect du d�grad� qui suit les bords de la s�lection). Par exemple, si vous appliquez ces param�tres avec le d�grad� Greens, l'image ressemble � la Figure 9-30.

En partant du rouge normal de "Hello World!" (utilisez simplement la combinaison de touches Ctrl-Z pour revenir en arri�re) et des m�mes param�tres de d�grad�, l'option Tube_Red produit cet effet qui sera utilis� dans la page Web finale, comme illustr� � la Figure 9-31.

Combinaison des graphiques que nous avons cr��s sur une page Web

L'arri�re-plan, le titre et la photographie �dit�e peuvent tous �tre utilis�s sur la m�me page Web�: Figure 9-33.