Débordement sous GIMP et Photoshop - Magic the Gathering

Débordement sous GIMP et Photoshop

Débordement sous GIMP et Photoshop

Petit tutoriel à destination des débutants sur les logiciels de retouche d'image que sont the GIMP et Photoshop pour créer un effet de débordement (graphique, pas la capacité) sur vos funcards.

  Débutant / Tutorial Fun cards

Petit tutoriel à destination des débutants sur les logiciels de retouche d'image que sont the GIMP et Photoshop pour créer un effet de débordement (graphique, pas la capacité) sur vos funcards.

  Débutant / Tutorial Fun cards



Articles

le , par Crosis
31359 | Louanges 11

Ce tutoriel s'adresse dans un premier temps aux débutants sur les logiciels de retouche d'image que sont the GIMP et Photoshop, avec tout d'abord une présentation très rapide et générale de l'interface pour s'attaquer a un cas précis, le débordement (graphique, pas la capacité) il s'agit sensiblement de la méthode décrite dans un autre tutoriel, bien que les fonctions utilisées soient différents. De plus en utilisant parallèlement les deux logiciels, j'espère mettre en avant leurs similitudes, pour habituer les utilisateur aux deux interfaces et créer des ponts qui pourrons être exploitées dans d'autres tutoriels.

Pour ce qui est de la configuration utilisée, ne soyez pas rebutés par l'aspect de mes fenêtres, bien que je sois sous Mac OS X, les fonctionnalisées de Photoshop et du GIMP restent identiques quelque soit la plateforme.

Bien, passons maintenant au tutoriel, pour réaliser cet effet, je partirait du principe que le fond de la funcard est déjà réalisé, soit avec le card maker proposé sur ce site http://www.smfcorp.net/funcards/smffcmonline/index.php soit avec Photoshop ou the GIMP grâce aux autres tutoriels proposés.

Enregistrez le fond sur votre disque et ouvrez-le sur votre logiciel d'édition d'image.

Vous devez obtenir l'un des résultats suivants à votre écran.

GIMP :

Image 1.jpg

Photoshop:

Image 2.tiff

Sur photoshop, si la fenêtre calque (ou une quelconque fenêtre) n'apparais pas, allez la retrouver dans le menu Fenêtre > (Calque).

Sur the GIMP les fenêtres manquantes se retrouvent dans le menu: Boite de dialogue > .

Passons maintenant a l'incrustation de l'image.

Trouver une image sur Internet à incruster, ne se révèle pas très difficile et pour cela je vous fais confiance ^^ en revanche veillez à ce qu'elle soit libre de droit, en la cherchant sur wikipedia par exemple...

Ce logo atteste que l'image est libre de droit, si vous êtes l'auteur de l'image, bien entendu le problème ne se pose pas :)

Pour mon exemple j'utiliserai le dragon statuette tel quel (le but étant juste une incrustation)

800px-Statuette_dragon.JPG

Cette photo a été prise par KoS et est sous Copyleft (ici: vous pouvez la bidouiller et l'utiliser autant que vous voulez et comme vous voulez ^^)

On peut remarquer que l'image est trop grande pour une carte, et les difficultés ne font que commencer.

Pour bien détourer l'image et bien la positionner, il faut tout d'abord préparer le fond qui va réceptionner l'image de la statuette. Voici la marche a suivre:

Photoshop : Double-cliquez sur votre calque d'arrière plan et laissez les réglages tels quels (vous pouvez changer le nom mais pas l'opacité ni le mode) dans la fenêtre qui apparat pour obtenir ceci:

Autre méthode : on obtient le même résultat avec un clic droit et: calque d'après l'arrière plan ou Calque > Nouveau > Calque d'après l'arrière plan

Image 3.tiff == >

Image 4.tiff == >

Image 5.tiff

GIMP : Faites un clic droit sur le calque et choisissez ajouter un canal alpha.

Sélectionnez ensuite l'outil

Image 6.tiff sur Photoshop (fenêtre Outils) ou

Image 3.jpg sur le GIMP, c'est l'outil de sélection rectangulaire. Sélectionnez la zone ou apparaît l'image (sans tenir compte du débordement que vous souhaitez créer)

Voilà ce que vous devez obtenir. (GIMP ou Photoshop)

Image 4.jpg

Les petits carreaux signifient que cette partie est transparente. Pour comprendre il fout se figurer que les calques sont hiérarchisés, et que les calques du dessus masquent ceux du dessous. Nous allons revenir a cette notion plus tard.

Maintenant il s'agit de copier l'image à incruster (ici le dragon).

Photoshop : Faites un copier en sélectionnant la fenêtre avec votre image (le dragon) (ctrl+c) en ayant préalablement tout sélectionné avec Edition > Tout sélectionner (ou ctrl+a); puis sélectionnez la fenêtre avec le fond et collez l'image dedans.

GIMP : : Sélectionnez la fenêtre avec votre image (Dragon) copiez le (ctrl+c) puis sélectionnez la fenêtre avec votre fond, créez un nouveau calque puis collez votre image (ctrl+v).

Voilà ce que l'on obtient : ce n'est pas du tout convainquant.

Image 5.jpg

Allez dans le menu calques et sélectionnez le calque du dragon.

Photoshop : Mettez votre calque en arrière plan, en le glissant en dessous du calque de fond, le dragon devrait maintenant être masqué par le fond, choisissez Edition > Transformation manuelle (ctrl+T) déplacez et redimentionez votre dragon. Pour cela sélectionnez les angles sur le cadre qui apparaît pour redimentioner et n'importe quelle partie de ce cadre pour le déplacer (astuce, pour le redimentioner et conserver les proportions, appuyiez sur Maj en même temps que vous sélectionnez un angle).

Astuce : baissez l'opacité de la carte, pour ce faire, sélectionnez le calque de la carte et changez son opacité (^^)

Image 13.tiff

GIMP : Là l'astuce est légèrement différente, pour redimensioner la photo du dragon il va vous falloir sélectionner l'outil et cliquer une première fois sur le dragon, dans la palette qui apparaît on peut voir une petite chaîne brisée, en cliquant dessus, elle se reforme. Lorsqu'elle est formée, cela indique que Largeur et Hauteur sont liés, donc que l'image se redimentioneras proportionnellement.

Vous pouvez sélectionner un quelconque mode dans le menu déroulant, ma préférence allant au pourcentage.

Image 8.jpg

Vous allez devoir ensuite redimensionner cette image, ainsi que la déplacer. Pour la redimensionner utilisez les coins de votre image et pour la déplacer utilisez le centre de l'image

Image 9.psd

Une fois votre image bien positionnée revenez sur la fenêtre Etirer ou rétrécir et cliquez sur Echelle (personnellement j'ai choisi une échelle de 52% pour ce dragon), une fois satisfait de ce résultat, il vois faut valider votre sélection flottante, pour ce faire, cliquez sur l'icône en forme d'ancre fenêtre

Image 10.jpg sur la fenêtre des calques vos calques doivent maintenant ressembler à ça:

Image 12.jpg

Faites maintenant passer le calque en dessous puis au dessus à nouveau pour être sur de votre positionnement, si ce n'est le cas, revenez en arrière avec la commande ctrl+z ou les différentes étapes d'historique dans l'onglet historique, les noms sont suffisamment parlants pour que vous ne vous perdiez pas. (Rappel: si vous ne retrouvez pas cet onglet, il seras accessible de puis le menu Boite de dialogue > :)

Image 13.jpg ou

Image 13'.tiff

Quelque soit le logiciel, vous devrez sûrement faire plusieurs retours en arrière pour être sûr du résultat de votre redimensionnement.

Bien passons maintenant au détourage. Tout d'abord il vous faut visualiser les parties que vous allez faire déborder, sans en faire trop et en veillant a ce que ce débordement soit utile à la carte.

Pour ma part je pense que la tête du dragon et son aile gauche sont un bon compromis.

Mettez tout d'abord votre image en bas de la pile de calques, et masquez le calque de fond voilas ce que vous devez obtenir (GIMP et Toshop)

Image 17.jpg .

Maintenant il va s'agir de créer un masque pour votre image de dragon, le masque est un canal alpha, dont la luminosité fait varier l'opacité du calque auquel il est attaché. Ca a l'air complexe mais c'est en réalité très simple, vous allez le voir.

Remettez le calque Fond visible, (à 100%), sélectionnez l'outil baguette magique

Image 20.jpg ou

Image 21.jpg , cette étape pourrait être réalisée avec l'outil sélection rectangulaire du début, mais ce serait trop facile ^^.

Image 19.jpg remarquez la présence de ce menu, voici ce que signifient les options : Tolérance : Lorsque vous cliquez sur une partie de l'image le logiciel vas sélectionner pour vous tout les pixels contenant la couleur sur laquelle vous avez cliqué, avec une certaine tolérance. (celle précisée ici)

La case pixels contigus indique au logiciel s'il doit effectuer cette recherche uniquement sur les pixels contigus et l'option Echantillonner tous les calques lui indique si cette recherche doit être faite sur tous les calques (^^).

Pour the GIMP, les options sont beaucoup plus poussées:

Image 22.jpg . Le lissage autorise le logiciel à rendre plus fluide la sélection et le seuil correspond à la tolérance, sélectionner par > permet d'affiner les critères de sélection, (composite est déjà très bien).

Bien, voilà pour la présentation de l'outil, il vous sera peut-être utile par la suite, mais toujours est-il que je ne vais m'en servir que pour sélectionner la zone transparente du fond (le rectangle transparent du début !!). Un clique sur la zone et le tour est joué.

Photoshop : Avec votre sélection cliquez sur le bouton

Image 23.jpg dans la palette des calques en ayant préalablement sélectionné le calque du dragon dans ladite palette.

GIMP : Faites clic droit sur le calque du dragon, puis Ajouter un masque de calque (pour les hostiles au clic droit on peut aussi faire Calque > Masque > Ajouter un masque de calque)

Image 24.jpg

Dans la fenêtre qui apparaît sélectionnez sélection (ha ha ha), puis cliquez sur add.

Image 25.jpg

Votre image de dragon doit maintenant apparaître comme tronquée. Un peu de patience, on y est presque.

Prenez un pinceau moyen (a peu prés 11px) puis sélectionnez votre masque de fusion dans la palette des calques, puis faites un détourage grossier des contours en couleur blanche et là miracle :

1__#$!@%!#__Image-1.jpg L'image apparaît progressivement.

Notez l'intérêt de cette technique, a aucun moment l'image n'est effacée. Elle est seulement masquée.

En zoomant et en choisissant des pinceaux plus fins on peut obtenir un résultat très satisfaisant. (NB il peut être intéressent d'adoucir les bords avec un flou Filtres > Flou > ou Effet > Atténuation > )

Image 2.jpg

Ensuite vous pouvez choisir d'ajouter un peu d'ombre. Deux choix (En réalité une bonne infinité mais je vous en propose deux ;)

Soit vous ajoutez sur un caque entre l'AP et le dragon manuellement et vous faites un filtre > flou > et choisissez en un.

Soit vous sélectionnez le masque via:

GIMP : Calque > masque > afficher le masque du calque puis Sélectionnez; copiez; et collez la sélection dans un nouveau calque que vous placerez sous le dragon.

Sélectionnez les pixels noirs; agrandissez la sélection; supprimez la sélection. Sélectionnez tous les pixels du calque.

Choisissez Couleur > inverser.

Déplacez la sélection de manière a créer une ombre. Supprimer ce qui ne doit pas apparaître ombré.

Et enfin ajoutez un flou.

1__#$!@%!#__Image-3.jpg

Photoshop : La marche à suivre est identique sauf pour la sélection du masque qui se fait simplement en cliquant sur le masque.

De plus pour inverser la couleur cela s'effectuera depuis Image > Réglages > Inverser.

Trucs et astuces:

Potoshop : Le menu Calque > Style de calque vous offre plein d'effets sur les calques faciles d'accès et permettant parfois de gagner un temps précieux.

Les effets sont intéressants a découvrir essayez ceux de rendu ceux-ci peuvent êtres parfois surprenant.

Dernière chose les méthodes d'incrustation

1__#$!@%!#__Image-4.jpg
N'hésitez pas à les expérimenter, quite à vous tromper ou obtenir des résultats délirants c'est ainsi que l'on progresse.

GIMP : N'hésitez surtout pas a essayer tous les effets du menu effet.

Dernière chose les méthodes d'incrustation

1__#$!@%!#__Image-5.jpg
N'hésitez pas à les expérimenter, quite à vous tromper ou obtenir des résultats délirants c'est ainsi que l'on progresse.

Alors c'était comment ?

11 Louange(s) chantée(s) en coeur


antho_fra Le 27/06/2018

Bonjour tout le monde, je n'arrive pas à crée le cadre de la carte et rien d'autre non plus sur Photoshop... quelqu'un pourrait elle m'aider svp ?!
A therme je voudrais arriver à sa :

https://youtu.be/NMxAEKTYCAM

Merci

Naomi Morinaga Le 18/04/2014

très bon tutoriel j'ai découvert sur un site internet un lien qui explique comment réalisé un débordement visuel avec Paint shop pro
le plus Hedge le musicien bleu (L'auteur) a réalisé le tutoriel en vidéo
voici le lien qui même a la partie tutoriel de son site de fun card
Cliquez ici

Note : 9/10

ElianShaar Le 14/06/2011

Bien que l'article soit clair, je rencontre quelques problèmes, que ce soit avec Gimp ou Photoshop, et ce dans la plupart des étapes à suivre (comme par exemple l'inefficacité apparente du canal alpha, où je suis obligé d'effacer à la main la partie blanche, ou encore les problèmes de masque sous Gimp, et la disparition de certains outils dans la dernière version de Photoshop).
Cet article reste, malgré mon cuisant échec, très intéressant et bien expliqué pour le noobs comme moi ^^"

Note : 9/10

clemounchassa45 Le 15/04/2010

euh pow-carow ce n'est pas la peine de mettre 1/10 si tu n'a pas comprit

super artcile merci beaucoup sa marche top!

Note : 10/10

pow-carow Le 12/02/2010

Euh gros probleme soit je suis idiote soit je ne sais pas pas réussi a faire ce qui est demander et pas réussi a faire de débordement

help !!

Note : 1/10

pow-carow Le 10/02/2010

Euh quelques confusion ce font, surtout que Gimp n'est pas évident mais je reconnais que les expliquations ne sont pas si mal que ca malgres tout

Note : 7/10

cortotom Le 10/03/2009

Eh ben je dois être débile avec the gimp parce que je comprend rien à tout ça, "descendez votre calque", "masquez le calque"... ben les débordements sur mes cartes c'est pas demain que vous les verrez :s

Note : 5/10

memnarch35 Le 28/01/2009

Super cet article, the gimp est plutôt compliqué à prendre en main pour les newbies tels que moi, et cet article permet d'apprendre des petits trucs sympas.

Bravo!!!

Note : 10/10

Crevette72 Le 19/01/2009

Super article.

J'aurai cependant apprécié d'avoir un premier article plus générique : Comment concevoir une fun card avec GIMP ou Photoshop ?

Ensuite j'aurai pu passer au débordement...
Je ne mets pas 10 à cause des petites fautes de frappe...

Note : 9/10

Skyion Le 17/01/2009

Tout simplement génial ! Moi qui rêvait de maîtriser le débordement, mon vœu est exaucé grâce à ce tuto.

10/10 :D

Note : 10/10

Thorgor Le 16/01/2009

Hehe
J'ai une toute autre technique (que je vais garder je pense, surtout parce que détourer à la plume, c'est plus propre qu'au pinceau), mais en tout cas le tuto me semble très clair et à le mérite d'être compatible avec les 2 logiciels.

Toi aussi, loue son œuvre !


Si vous êtes l'une ou l'un de celles et ceux qui ont choisi la rébellion contre le brouillard de la toile qui étouffe les esprits, identifiez-vous pour participer. Sinon vous avez encore une chance d'éveiller vos sens, en rejoignant notre communauté de Magiciens Fous.

L'auteur

Crosis
mdo

Adorateur | Corse-du-Sud
Yo

Voir le profil complet

Partage l'ami !

     


Le Dark Mogwaï

Retrouvez le Dark Mogwaï et la communauté des Magiciens Fous sur :

Et vous pensez qu'être une douzaine vous donne le droit d'empiéter sur mes terres ? En garde, maraudeurs !

Cadet impatient, dernières paroles

Proposé par Dark Mogwaï le 19/06/2012

Le sondage du bas d'en bas de la page
Votre véritable moment de post-apocalypse :

Résultats (déjà 112 votes)