Blog de veille technologique sur le webdesign, le graphisme, l’art digital …

abonnement au flux rssAbonnement au flux RSS

27.05.08 Gimp: barres colorées

Rubrique Infographie

vignette d'illustration de l'article

Pour apprendre à réaliser certains rendus graphiques, je consulte souvent des tutoriels Photoshop sur internet qui, il faut bien l’avouer, sont plus nombreux que ceux destinés à Gimp. Je cherche ensuite à les adapter pour les reproduire sous Gimp.

Voici un tutoriel qui va vous expliquer comment réaliser un fond composé de barres colorées. Ce tutoriel est une adaptation pour Gimp de l’article “Quickly Build an Abstract Background of Colored Bars” provenant de l’excellent site PSDTuts.

Cet exemple est réalisé avec la version Gimp 2.4 sous Ubuntu Gutsy Gibbon. La valeur des paramètres utilisés sont proposés à titre indicatif, vous pouvez les modifier à titre expérimental.

Application

Réalisation des barres

Ouvrez un nouveau document avec la palette de couleur par défaut (blanc/noir)

Appliquez le filtre Rendu > Nuage > Nuage par différence avec les paramètres suivant :
X=5 / Y=5 / Détail=6
Vous obtenez un fond nuageux en valeur de gris.
Essayez d’obtenir quelque chose d’homogène avec une répartition à peu près égale des zones sombres et des zones claires.

blog_030408_1.png

Appliquez le filtre Distorsion > Déplacer
Cochez le bouton radio “horizontalement” et fixez la quantité à 100.

Ensuite rendez-vous au menu Couleurs > Seuil
Faites varier les deux curseurs pour obtenir quelque chose qui ressemble à ça :

blog_030408_2.png

Essayez d’équilibrer la quantité de noir et de blanc sur l’image.
Les masses noires pleines ne doivent pas être trop larges mais lacérées par des hachures blanches.

Ensuite appliquez un flou cinétique : Filtres > Flou cinétique
Choisissez un type de flou linéaire et fixez la Longueur à 200 et l’Angle à 90.
Répétez l’application de ce filtre plusieurs fois (Crtl+F) jusqu’à obtenir quelque chose qui ressemble à cela :

blog_030408_3.png

Vous pouvez atténuer les différences de contraste entre les valeurs de gris des barres à l’aide de l’outil courbe.

blog_030408_4.png

Colorisation des barres

Ajouter un nouveau claque que j’ai appelé “dégradé de couleurs” au dessus votre calque initial.

Sélectionnez l’outil dégradé et appliquer un dégradé horizontalement. Ici j’ai choisis le dégradé “Full saturation spectrum CCW” mais rien ne vous empêche d’en choisir un autre où d’en fabriquer un qui correspond à une palette de couleurs personnalisée. Puis passez le calque “dégradé de couleurs” en mode “Multiplié” (vous pouvez tester d’autres modes comme Superposé, Assombrir …).

blog_030408_5.png

Avec l’outil Courbes : Couleurs > Courbes, vous pouvez faire varier le contraste ou la luminosité de l’image selon vos gouts.

Vignétage

Aplatissez les calques : Image > Aplatir l’image.
Dupliquez le calque obtenu et nommez le “vignetage”.
Sélectionnez le calque “vignetage”, faites un clique droit dessus et sélectionnez “Ajouter un masque de calque …”.
Choisissez “blanc (opacité complète)”.

Activez les couleurs par défaut (noir PP / blanc AP).
Activez le masque (pas le calque !) en cliquant sur le carré de droite dans la barre symbolisant votre calque.
Sélectionnez l’outil “dégradé” et choisissez les options “Dégradé : PP vers AP” et “Forme : radial”.
Tracez votre dégradé en partant du centre vers un des quatre coins de la photographie.

Maintenant, activez le calque “vignetage” (de ce fait vous désactivez le masque) en cliquant sur le carré de gauche dans la barre symbolisant votre calque.

Rendez-vous dans le menu Couleurs > Niveaux et déplacez vers la droite le curseur du milieu jusqu’à obtenir l’effet qui vous convient. Plus vous déplacez le curseur vers la droite plus les coins s’assombrissent.
Aplatissez l’image : Image > Aplatir l’image.

Lueur centrale

Effectuez la même manipulation que précédemment mais en inversant la palette de couleur (blanc en PP et noir en AP) et en déplaçant le curseur du milieu vers la gauche pour éclaircir le centre de l’image.
Aplatissez l’image : Image > Aplatir l’image.

blog_030408_6.png

Le fond est terminé. Vous pouvez maintenant rajouter du texte, un logo où ce que vous voulez pour habiller ce fond :

blog_030408_7.png

4 commentaires - S'abonner aux commentaires via RSS - (URL de trackback)

  • 1. Gilles
    le 27.05.08 (19:10)

    Salut Gilles,

    Excellent tutorial (comme d’habitude). Je pensais que ça demandait un peu plus d’étapes et puis finalement, c’est assez simple et efficace (et du plus bel effet sur certains designs).

    Tiens, une petite question : comment réalises-tu des effets de lueurs externes / internes avec Gimp en un minimum d’étapes (sans devoir créer plusieurs calques avec sélection réduite / étendue ou utiliser un script-fu pas des plus sexy) ? Avec Photoshop et ses effets de calques, c’est ultra simple et pratique mais avec Gimp, ça me semble bien moins pratique (ça me prends trois fois plus de calques, trois fois plus de temps et c’est trois plus galère à gérer pour des positionnements complexes - mais peut-être que je m’y prends comme un manche :p).

    Bonne soirée à toi.

  • 2. pixenjoy
    le 28.05.08 (11:11)

    Salut Gilles,

    Peux-tu me donner des exemples (liens, images) illustrant “des effets de lueurs externes / internes” pour que j’ai une idée plus précise de l’aspect de l’effet en question.

  • 3. Gilles
    le 28.05.08 (19:06)

    Re Gilles,

    Pour la lueur externe, c’est une légère ombre portée tout autour d’un élément (pas seulement dans une direction donnée) et la lueur interne, idem mais vers l’intérieur. En rajoutant un fin contour d’1 ou 2 px et en combinant avec subtilité lueur externe et interne, on obtient des effets sympa. C’est ce que j’ai utilisé pour le misérable splash de mon site.

    Un exemple qui parle bien plus : http://mancub.net/blog/ (notamment : http://www.mancub.net/wp-content/themes/ribbons/images/main_top2.png)

    C’est complètement faisable sous Gimp en jouant avec les sélections / dégradés mais je n’ai rien trouvé d’aussi pratique que ce qui se fait sous Photoshop avec les effets de calques (combinaison d’effets rattachés au calque).

  • 4. pixenjoy
    le 28.05.08 (23:21)

    @Gilles

    Ok je vois mieux de quoi tu veux parler. En fait il s’agit de la mise en place d’ombres pour donner du volume.

    L’ombre externe détache la surface du fond sur lequel elle est posée et l’ombre interne donne l’impression que les bords sont concaves.

    C’est clair que Photoshop est plus avancé en fonctionnalité et facilite beaucoup plus le travail des designer car tous les effets sont prémachés en un seul clic de souris. Avec Gimp, il faut chercher un peu mais en général on arrive à reproduire les mêmes effets que sous Photoshop.

    Sous Gimp il existe un package de scripts Fu nommé FX-Foundry dans lequel tu peux construire des ombres.

    Personnellement pour une ombre externe, je duplique le calque de la forme, le place dessous la forme, le remplie de la couleur de l’ombre (pas forcément gris, plus souvent de la même teinte que la forme mais en augmentant la valeur et en désaturant un peu). En suite j’applique un floue gaussien et je joue sur l’opacité.

    Pour l’ombre interne, je fais des essais demain et reviens vers toi.

    PS: moi je le trouve très sympa ton Splash Screen




Votre e-mail ne sera pas publié.

Articles similaires :