Gimp – Party flyer !

gimp-flyer

Niveau alchimiste
C’est long mais c’est bon: voici comment élaborer un flyer attractif en partant d’une photo suggestive.
Gimp 2.4-RC3 sous Ubuntu Gutsy Gibbon
Publié dans PulseARTS n°10

La charge vous échoit (qui s’en plaindrait?) de créer le flyer d’une soirée sur le thème « reine de la nuit ». Une légère contrainte textuelle vous est imposée: le thème de la soirée, le lieu et l’heure. Pour le reste, vous êtes libre.
Ce genre d’exercice permet de rester classique dans le montage (une fille et une typo toutes deux bien balancées), tout en autorisant quelques recherches sur les effets visuels. Trois étapes ponctueront ce tutorial: la retouche du modèle, sa mise en valeur dans une atmosphère colorée, puis la typo.

ÉTAPE 1
Le sujet

Ouvrez l’image qui sera votre élément principal d’attractivité. Vous pouvez télécharger, pour mieux suivre cet exercice, l’image libre qui lui a servi de support à cette adresse. C’est une image publiée par Nara Vieira da Silva Osga (naraosga).

Commencez par détourer votre sujet, par exemple à la plume. Pour détourer ses cheveux, ne vous arrachez pas les vôtres! Vous pourrez à tout moment, une fois la sélection transformée en masque, retoucher cette tignasse. Notre modèle étant de toute façon destiné à un fond sombre, c’est aussi le genre de retouche que vous pourrez faire en tenant compte de ce fond.

Une fois votre tracé effectué, rendez-vous dans la fenêtre/onglet des tracés, et à l’aide d’un clic droit, tranformez-le en sélection.

Revenez sur votre calque actif, inversez la sélection (ctrl+I) et ajoutez un masque de calque par un clic droit sur le calque, et en choisissant la fonction Ajouter un masque de calque.

Puis dans la fenêtre qui s’ouvre, choisissez d’appliquer le masque depuis la sélection.

Le principe du masque de calque permet, comme introduit plus haut, de retoucher votre détourage à l’aide de l’outil pinceau et en alternant les couleurs noire (pour masquer) et blanche (pour dévoiler). Un principe indispensable pour détourer correctement des cheveux, grâce aux propriétés des brosses utilisables avec le pinceau: diamètre, espacement, opacité, dureté.

Votre sujet maintenant détouré, la retouche se fera en deux temps: la peau et les vêtements. Commencez donc par isoler, sur un nouveau calque, les vêtements et bijoux de votre modèle.

Une fois ces vêtements détourés sur un nouveau calque, rendez-vous dans Couleurs > Désaturer.

Puis dans la fenêtre de l’outil, sélectionnez Luminosité, qui va respecter la luminosité de notre élément, puis validez.

Faites un clic droit sur ce calque, et cliquez sur Alpha vers sélection. Avec cette sélection active, dupliquez le calque contenant la danseuse. Sur cette duplication, faites un clic droit puis choisissez Appliquer le masque de calque.

Puis supprimez la sélection sur ce nouveau calque: voilà la peau et les cheveux de votre danseuses sur un calque à part. De cette façon, vous conservez un calque de sauvegarde, accompagné de son masque. Une double sécurité pour corriger d’éventuelles erreurs.

La retouche de la peau commence par les courbes. Ouvrez donc la fenêtre Couleurs > Courbes.

Puis corrigez votre sujet à l’aide des captures suivantes.

L’objectif est de donner à la peau une teinte bronzée qui contraste bien avec le blanc du t-shirt.

Certaines zones sont saturées de magenta, notamment l’épaule droite, une partie du nez et des doigts. Dupliquez votre calque, et à l’aide du tampon, retouchez ces zones. La duplication permet de conserver une sauvegarde de vos étapes. Elle est à répéter à chaque retouche destructrice de l’image.

Les ongles sont beaucoup trop vifs! Sélectionnez-lez, copiez-les sur un nouveau calque et ouvrez la fenêtre Couleurs > Teinte/Saturation.

En baissant la saturation et en modifiant la teinte, cherchez une couleur qui se rapproche de celle de la chair.

Regroupez à présent en un seul les calques contenant la peau, les vêtements et les ongles pour revenir à un sujet complet (pensez à conserver des sauvegardes!) Pour cela, masquez les calques de sauvegarde, puis faites un clic droit sur un des calques de votre fenêtre et sélectionnez Fusionner les calques visibles. Dans la fenêtre qui s’ouvre, laissez par défaut Etendu autant que nécessaire.

ÉTAPE 2
L’ambiance

Créez un arrière-plan noir, puis, sur un nouveau calque juste au-dessus de cet arrière-plan, tracez une forme au lasso. Ajoutez à cette sélection un contour progressif important via la commande Sélection > Adoucir.

Remplissez cette sélection avec une couleur foncée tirant vers le rouge, par exemple #5a2c2c.

Revenez sur votre calque avec la danseuse, et appliquez-lui un masque de calque. Cette fois, choisissez une opacité complète (remplissage blanc).

Saisissez-vous de l’outil Dégradés, remettez les couleurs par défaut (D) et vérifiez que votre dégradé est bien du premier plan vers l’arrière-plan. Créez sur votre masque un dégradé de façon à cacher le bas de votre modèle.

Créez un motif de stries dorées (#d2b952) de 3 pixels de large, séparées par un espace de 2 pixels, et remplissez-en un nouveau calque.

Puis appliquez un Filtre > Distorsions > Coordonnées polaires.

Laissez les valeurs par défaut pour obtenir des rayons.

Appliquez à ces rayons un masque de calque, soit avec le lasso et une sélection adoucie, soit directement au pinceau.

Dupliquez ce calque avec son masque, et faites lui opérer une rotation avec l’outil du même nom (shift+R) de -5° environ.

Sur un nouveau calque, appliquez le dégradé Abstract2 (dans la bibliothèque de dégradés).

Puis passez ce calque en mode Couleur.

Et appliquez-lui un masque, que vous retoucherez directement au pinceau pour laisser apparaître les nuances en arrière-plan.

Sélectionnez l’alpha de votre danseuse via un clic droit > Alpha vers sélection.

Et sur un nouveau calque, remplissez cette sélection de noir. Déselectionnez et appliquez un Filtres > Flou > Flou gaussien de 25.

Ensuite, à l’aide d’un pinceau aux bords doux, peignez, en noir et sur ce même calque, le bas du corps de votre modèle.

L’ambiance se dessine, mais est beaucoup trop sombre. Apportons de la lumière et de la couleur à cette scène. Créez un nouveau calque en mode Superposer, et peignez une zone lumineuse comme ci-dessous.

Puis créez deux nouveaux calques en mode Ecran. Sur chacun d’eux, appliquez des couleurs vives, par exemple rose et jaune.

Continuez sur cette lancée en remplissant un nouveau calque avec le Filtre > Rendu > Nuages > Brouillage uni avec les valeurs ci-dessous (approximativement).

Appliquez à ce calque un réglage via Couleurs > Luminosité/Contraste de façon à obtenir des formes hautes en contraste. Pour cela, baissez la luminosité et augmentez le contraste.

Créez un nouveau calque en mode Couleur, que vous remplissez avec un dégradé de type Full saturation spectrum (par défaut dans les nuances de dégradés de Gimp) en spirale.

Faites autant d’essais que nécessaire pour obtenir un résultat qui vous paraisse satisfaisant, puis fusionnez le calque du dégradé avec le calque de nuages qui lui est inférieur. Passez le tout en mode Ecran, et appliquez un masque de calque pour ne faire apparaître que les zones qui vous intéressent. Dupliquez ce calque et son masque pour renforcer l’effet.

A présent, ouvrez un nouveau document de 5×5mm. Il va nous permettre de créer une brosse animée. Créez au moins une dizaine de calques blancs, sur lesquels vous disposez des ellipses noires de différentes tailles et duretés.

N’oubliez pas de passer votre document en niveaux de gris via la commande Image > Mode > Niveaux de gris pour pouvoir lui appliquer des couleurs lorsqu’il sera transformé en brosse. Enregistrez votre document en .gih (format des brosses animées de Gimp) dans le répertoire .gimp-2.4/brushes, avec les options suivantes:

Pour mieux comprendre le fonctionnement d’une brosse animée simple, et ainsi personnaliser ou améliorer cette brosse, vous pouvez vous appuyer sur ce tutorial.

Revenez à votre flyer, et actualisez les brosses (1). Sélectionnez votre brosse animée, et appliquez-lui un espacement d’environ 50 (2).

Et dans les options de l’outil, appliquez une fluctuation importante.

Armé de votre brosse, créez un nouveau calque en mode Ecran, et appliquez-y votre fluctuation par touches succesives. Faites correspondre la couleur de votre brosse et celle de votre calque de lumières.

Répétez l’opération au besoin.

ÉTAPE 3
La typographie

La typographie fait autant partie du visuel que le modèle et sa mise en valeur. C’est elle qui délivre l’information, elle doit donc coller à l’ambiance tout en restant lisible. Composez votre titre avec différentes tailles de caractère (pourquoi pas différentes polices, mais attention à ce qu’elles soient contrastées, p. ex. une Antique et une Didot) et agencez les mots de sorte qu’ils introduisent une dynamique de lecture et mettent en valeur les informations principales (généralement des substantifs).

Dupliquez votre calque, et appliquez au calque de référence (celui du dessous) un Filtres > Flou > Flou gaussien important.

Activez votre calque dupliqué et passez-le en mode Superposé, puis appliquez-lui un masque de calque, que vous remplissez avec un Filtres > Rendu > Nuages > Brouillage uni.

Sélectionnez la transparence de votre texte avec un clic droit sur le calque texte > Alpha vers sélection.

Etendez cette sélection via la commande Sélection > Agrandir. Ajustez à 15.

Sur un nouveau calque en mode Teinte, remplissez cette sélection avec un dégradé de type Full saturation spectrum. L’utilisation d’une sélection étendue permet d’éviter de couper notre remplissage notre nettement au bord de la typo. En revanche, cette manipulation provoque un gros pâté noir autour de notre remplissage arc-en-ciel.

Pour y remédier, Resélectionnez la transparence de votre calque texte, et adoucissez sa sélection de 25.

Avec cette sélection active, créez un masque à votre calque arc-en-ciel à partir de votre sélection.

Dupliquez ce calque pour rehausser la saturation.
Faites de même avec le texte contenant les informations de date et lieu, et adaptez ces différents effets si vous utilisez, comme dans cet exemple, une police différente, plus petite et moins grasse. Pensez aussi à laisser de la place en bas de votre flyer pour les infos diverses.

Commentaires

33 réponses à “Gimp – Party flyer !”

  1. Pierre le 9 juillet 2008 9:51

    Très bon didacticiel !

    Comme quoi on peut en faire des choses avec Gimp…

    Par contre je ne suis pas fan de la mise en avant du texte : imprimé, je ne suis pas sûr que ce soit bien lisible (même si j’aime bien le rendu à l’écran)…

    Merci et bonne continuation !

  2. MikaelKA le 9 juillet 2008 11:22

    Bon résultat en tout cas ;)

    Je suis assez frustré pour l’instant par l’interface assez austère de Gimp, comparé à Inkscape c’est un peu le jour et la nuit notamment pour la gestion des fenêtres je pense que c’est une habitude à prendre ^^

  3. Zigomar le 9 juillet 2008 18:56

    Effectivement, c’est long mais c’est bon, ça fait plaisir de revoir des tutos Gimp en français de ce niveau.

  4. FeIZocE le 9 juillet 2008 22:53

    Merci pour vos encouragements.

    Pierre: effectivement, lorsque j’ai mis en page le numéro de Pulse ARTS dans lequel le tuto est paru, nous avons rencontré un petit conflit de profils qui faisait ressortir une zone de flou carrément dégueu autour de la typo. Mais je pense a contrario qu’en print le résultat passe bien (même si je ne l’ai pas testé) car les profils intégrés et la prévisu étaient optimisés pour une version imprimée. Donc le résultat imprimé de l’opération dépendra beaucoup de la gestion des couleurs de son auteur.

    MikaelKA: personnellement, j’ai beau utiliser les produits Adobe toute la journée dans le cadre de mon travail, il m’arrive régulièrement de regretter cette interface à 3 fenêtres pour un vrai plein écran quand j’en ai besoin (et pour laisser reposer mes touches tab et F :D ). Ca viendra, comme tu dis c’est une habitude à prendre.

    Zigomar: si tu veux du vraiment lourd, un tuto publié dans l’actuel numéro de Créanum permet de recréer le travail d’un RIP pour la sérigraphie sur CD. Il sera en ligne dans le courant du mois d’août :)

  5. myself le 19 août 2008 10:20

    très long mais super tuto. bravo

  6. FeIZocE le 19 août 2008 11:41

    Oui il est très long, et du coup mieux adapté au format magazine pour lequel il a été prévu à la base ;-) Merci pour tes encouragements!

  7. Coralie le 25 août 2008 11:18

    Vraiment très bon tuto, le rendu est super! C’est la première fois que je tombe sur un tuto pour gimp qui donne de bon effets! Je vais suirvre votre site de près ^^ J’ai une question, comment faire pour rendre une image un peu dans le style de ça, la fille en particulier ? http://images4.hiboox.com/images/3208/a0e517c2bcf852296ff2e67ddc3a90aa.png J’aime beaucoup cette effet mais avec Gimp je ne vois pas comment faire! Merci d’avance et bonne continuation ^_^

    
    			
  8. FeIZocE le 26 août 2008 21:52

    Merci pour ton commentaire.

    S’agissant de ta question, je ne saisis pas vraiment. Il n’y a pas d’ »effet » dans ce que tu montres, mais un montage de plusieurs visuels à l’aide des masques de calques.

  9. Coralie le 27 août 2008 17:47

    Ok je vais voir ce que je peux faire avec les masques de calques. En attendant voici ce que j’ai fait grâce à ton tuto http://b.imagehost.org/view/0055/annaoliviaban2.png Bon il n’y a pas tous les effets que tu as fait, mais ça s’en rapproche, et je suis plutôt contente du résultat ^^ Merci encore !

  10. FeIZocE le 27 août 2008 23:14

    C’est plutôt une bonne application de ce tuto je trouve. Bravo ;)

  11. Smon le 28 août 2008 14:32

    Rien à voir mais … Avez vous remarqué ce bug sous Gimp ? : http://forum.ubuntu-fr.org/viewtopic.php?pid=2028408#p2028408

  12. FeIZocE le 29 août 2008 11:59

    Effectivement, j’avais noté le bug pour l’outil de rétrécissement. On dirait qu’il gère comme s’il y avait une interpolation, alors qu’au rétrécissement il n’y en a évidemment pas. En revanche, pour la taille de l’image, c’est très net chez moi (enfin j’ai testé que sous Windows puisque c’est là que ton problème se situe). Es-tu sûr d’être en rapport 1:1 pour l’affichage? Sinon ça n’a aucun intérêt. Et aussi: la qualité de ton image est déjà très mauvaise à la base, en quelle résolution es-tu? Car la résolution joue.

    A noter: appliquer une interpolation cubique ou sinc ne devrait normalement pas avoir d’effet, puisqu’il n’y en a pas, d’interpolation. C’est sans doute là que se situe le bug. Enfin chez moi ça marche très bien. A noter aussi que l’interpolation n’existe pas avec l’outil rétrécissement, je sais vraiment pas où tu es allée la trouver celle-là :p

    Pour finir, ça fait quelques temps que les devs Gimp parlent d’améliorer l’outil de rétrécissement, qui doit par ailleurs permettre la transparence « objet en redimensionnement sur objet à redimensionner ».

  13. -dCx- le 3 novembre 2008 13:43

    Salut ,
    J’ai un petit probléme avec le début du tuto. Je suis un novice et je manie pas encore bien Gimp . Je voulais savoir comment on créez un motif de stries dorées ?
    A par sa j’ai réusis le rendue n’est pas le même sans sa mais bon . Si tu pouvais m’aider !

  14. FeIZocE le 4 novembre 2008 12:05

    Salut.
    Attention de bien vérifier à quel niveau s’adressent les exercices, il y a des prérequis selon le niveau.
    Pour créer un motif en bandes, tu crées, dans un document de 5 pixels de large et 1 pixel de haut, une forme de 3 pixels de large sur 1 pixel de haut.
    Pour finir, tu enregistres le document avec l’extension .pat dans ton répertoire des brosses (dont le chemin est accessible depuis les préférences).

  15. bdsprod le 2 janvier 2009 2:41

    vraiment pas assez clair ton explication ! plus de descriptions par étapes seraient nécessaire

  16. FeIZocE le 2 janvier 2009 22:20

    Bonjour aussi, et patati.
    Encore une fois – mais on ne le répétera jamais assez – vérifiez le niveau en entête de l’exercice!

  17. maya le 4 janvier 2009 14:10

    wawouuuuuuuuuuuu c magnifike, moi jarive pa a faire sa, ki voudrai me faire un pti montage de couleur?????????????? snif je suis trp degouté detre pa a la hauteur de vous lé pro

  18. damian² le 1 février 2009 1:06

    Excellent tuto , je me suis regalé a le lire , bonne continuation..

  19. FeIZocE le 1 février 2009 14:26

    Merci pour ce compliment!

  20. BFK Sexapile le 8 avril 2009 8:00

    Le rendu est fantastique … Haaaa si je pouvais en faire autant !
    La juxtaposition des calques est géniale, et je me rends compte qu’il faut connaitre tous les outils dans Gimp pour pouvoir imaginer et concevoir de tels résultats.

    Bravo !!!

  21. [gimp]creer un flyer de boite de nuit - InfographiK - Communauté Graphique le 27 mai 2009 15:40

    [...] un flyer de boite de nuit Gimp – Party flyer ! | Calcyum – Infographie open source Voila comment faire pour creer un flyer pour les boites de nuits ciao [...]

  22. Anthony (apteno) 's status on Tuesday, 14-Jul-09 08:09:32 UTC - Identi.ca le 14 juillet 2009 10:09

    [...] : http://www.calcyum.org/gimp-party-flyer/ (avec gimp) [...]

  23. Lostinthesea le 13 août 2009 10:28

    Hello,

    Je dois rendre un projet créatif pour mon travail et j’essaye de m’auto-former sur the Gimp mais je ne dois pas être très douée!!! J’ai dû mal avec ton exemple à détourer 2 éléments distincts pour en finalité créer 2 calques. Est-il possible d’avoir des détails plus précis pour une novice comme moi. Ou stp as-tu un tuto sur Gimp 2.6 qui soit pratique, compréhensible et qui fasse le travail tout seul aussi…lol!!!
    Parce que tout ce que je trouve sur internet et vraiment barbare et mal expliqué. Thanks

  24. FeIZocE le 14 août 2009 18:19

    Hello!
    Pour détourer, tu peux t’orienter vers ces exercices:
    http://www.calcyum.org/?s=gimp+d%C3%A9tourer

    Bon courage :)

  25. Blade le 26 août 2009 18:42

    Salut,

    Résultat impeccable ! Je débute totalement pour ma part et ai besoin de faire un flyer rapidement pour lancer mon affaire. Quand je vois ta base de travaille et le résultat obtenu je suis vraiment sur le c.l. En même temps, n’étant pas un brin créatif/artistique mon jugement n’est peut être pas objectif ! =)

  26. pachurka le 16 février 2010 11:50

    bonjour à tous,

    ce tuto est génial mais je n’arrive pas du tout a crée le motif de stries dorées.
    Merci…

  27. FeIZocE le 22 février 2010 11:56

    Hello!
    Précise où tu bloques.

  28. pachurka le 22 février 2010 12:22

    je bloque au niveau de la création du motif de base pour les stries dorées. J’arrive a créer un cercle pratiquement equivalent avec un degradé mais pas aussi espacé.
    Merci

  29. FeIZocE le 23 février 2010 21:13

    Peut-être que les dimensions de ton document sont différentes des miennes, par exemple si tu as utilisé une autre image que celle proposée en exemple ou si tu l’as réduite.
    Les valeurs proposées pour la création du motif doivent être adaptées à d’autres dimensions.

  30. linconnu13 le 28 août 2010 13:51

    bonjour je trouve cela magnifique mais je bloque bizarrement sur la première étape de l’ambiance je n’arrive pas a colorié l’intérieur du lasso =/
    pouvait vous m’aidez s’il vous plait

  31. FeIZocE le 22 septembre 2010 8:19

    Bonjour,
    Pensez bien à adoucir la sélection, puis à sélectionner une couleur de premier plan qui ne soit pas noire.

  32. NuteLLa. le 21 janvier 2011 17:05

    Super tutoriel , vraiment génial mais je bug au niveau des stries dorés , je ne comprend pas cette partie : Appliquez à ces rayons un masque de calque, soit avec le lasso et une sélection adoucie, soit directement au pinceau.
    Un p’tit coup de main siouplait :)

  33. FeIZocE le 31 janvier 2011 15:23

    Bonjour,

    L’action a pour but d’atténuer les stries en s’éloignant du centre. Soit en créant une sélection, appliquant un contour progressif à cette sélection et en appliquant un masque à partir de cette sélection, soit en utilisant un pinceau doux et large avec la couleur noire pour effacer en douceur les parties indésirables.

Déposez un commentaire