[Tutoriel] Gimp

Fondatrice Messages : 1271 Date d'inscription : 01/05/2017

Bonjour à tous !

Vous êtes nul en graphisme ? Vous en avez marre de toujours demander de l'aide ? Vous voulez créer vos propres bannières, avatars et signatures ? Ce topic est fait pour vous !

Je tâcherais de vous apprendre tout ce que je sais. Vous n'atteindrez pas un niveau extraordinaire, mais saurez vous débrouiller. J'espère que ce tutoriel vous sera utile ! Si vous avez d'autres techniques et astuces, n'hésitez pas à poster à la suite du message. En cas de questions, vous pouvez aussi poster. J'esaierai de vous répondre au mieux et clarifierai le topic.

Etape 0 : télécharger Gimp

Ce site propose un bon lien de téléchargement. A noter, gimp est gratuit ! Et oui, si vous n'avez pas le logiciel, je ne pourrais pas vous aider et ce topic vous sera d'aucune utilité.

Rien ne vaut mieux que la pratique pour comprendre ! Voici le programme.

Légende : Rédigé - Non rédigé

Rosalie a écrit:: 1.0 Faire un avatar simple
1.1 Avatar à deux images - bandeau
1.2 Avatar à deux images - fondu
1.3 Avatar travaillé : grille, texture, jouer sur les niveaux de couleurs, supperposition d'images

2. Différents cadres...
2.1 Double cadre (1)
2.2 Double cadre (2)
2.3 Cadre avec flou
2.4 Cadre damier
2.5 Cadre motif
2.6 Cadre dégradé
2.7 Cadre incrusté

3 Faire une bannière texte
3.1 Texte avec flou derrière
3.2 Texte avec contours
3.3 Texte en diagonal
3.4 Texte en relief
3.5 Texte avec contours damiers
3.6 Texte avec ombre portée
3.7 Texte avec image incrustée
3.8 Texte Courbé

4 Faire une signature
4.1 Signature simple rectangulaire
4.2 Icones fixes
4.3 Image avec transparence
Superposition d'images

5 Créer une bannière

5.3.1 Forme bulle
5.3.2 Forme nuage
5.3.3. Une image pour forme
5.3.4. Bannière vagues
5.3.5. Bannière aspirée
5.3.6. Bannière à bouts arrondi
5.3.7. Bannière multiples
5.4. Bannière avec plusieurs images

6 Travailler les gifs
3.1 Icone carré gif
3.2 Icone forme originale gif
3.3 Avatar mi fixe mi gif
3.4 Signature Gif complexe

Annexes :

- Télécharger une police
- Télécharger des brushs
- Héberger une image
- Chercher des images
- La boîte à Outil
- Le menu du haut

[Tutoriel] Gimp 17030506413722555414892490

1.0 Faire un avatar simple

Etape 1 : Ouvrir l'application Gimp. Screen

Etape 2 : Choisir une image. Elle doit avoir des dimensions supérieur à 200*320, taille de l'avatar sur Alohomora. Il ne faut jamais agrandir une image sinon elle est pixelisée. Dans l'exemple, j'utiliserai celle-ci

Etape 3 : Copier et coller l'image sur gimp. Clique droit sur la souris sur l'image, édition copier. Sur gimp, edition coller. Screen

Etape 4 : Redimensionner l'image. Dans la barre du haut ou en faisant un clique droit (c'est le même menu, utilisez celui que vous préférez) cliquez sur image, puis sur échelle et taille de l'image. Choisissez une hauteur de 320. Inutile de changer les deux données, la largeur s'adaptera automatiquement. Si l'image parait petite, rezoomer à 100% ou 200%. Screen

Etape 5 : Avec l'outil coupe de la boîte à outil : [Tutoriel] Gimp 17030506320122555414892486

[Tutoriel] Gimp 17030506320122555414892486

découper l'image pour avoir 200 px de largeur (la taille est marquée que la ligne horizontale en bas de l'écran).
Tu n'as pas de boîte à outil ? Dans ce cas tu cliques sur fenêtres sur la barre du haut, puis sur Boîte à outil.

Etape 6 : Rajouter un cadre. Cliquez sur la fenêtre calque. Si elle n’apparaît pas, cliquer sur la barre du haut sur fenêtre >> fenêtres ancrables >> calques. Clique droit sur le "calque copié" avec votre image >> alpha vers sélection. Clique droit sur l'écran/barre en haut >> sélection >> bordure. Régler à 1 px pour avoir un cadre fin ou 2px pour qu'il se voit bien. Clique droit/barre du haut >> Edition >> remplir avec la couleur d'arrière plan/de premier plan selon vos goût.

Etape 7 : Enregistrer votre image. Utiliser le raccourci Ctrl + E OU cliquez sur Fichier dans la barre du haut >> Export. Choisissez un nom en gardant bien le format .png

Etape 8 : Héberger votre image. Pour pouvoir la mettre sur internet, comme avatar par exemple, vous devez utilser un site d'hébergement. hostingpics et casimages vous permettent de créer des albums pour trier vos images, vous devez vous créer un compte et vous enregistrer. zupimages est le plus simple, ne nécessite aucune inscription et est rapide ; néanmoins, il vous sera difficile de retrouver vos images si vous perdez le lien...

Et voilà ! votre avatar est prêt ! Essayez vous aussi. Pourquoi ne pas partager vos créations dans la galerie d'avatars sorciers. Autant mêler l'exercice à l'utilité =)

2. Différents cadres...

[Tutoriel] Gimp 17030506582622555414892492

2.1 Double cadre (1)

Etape 1 : Faire le tutoriel 1 jusqu'à l'étape 5 Ici nous utilisons cette image

Etape 2 : Mettre un premier cadre noir. Dans la fenêtre calque : alpha vers sélection. Barre du haut/clique droit >> sélection >> bordure >> régler à 2px. barre du haut/clique droit édition >> remplir avec la couleur de PP.

Etape 3 : Maintenant on va faire un autre cadre par dessus ! Fenêtre des calques : clique droit >> nouveau calque, laisser les réglages : largeur 200 px, hauteur 320 px, type de remplissage de calque : transparence. >> valider. Clique droit sur notre calque de départ (calque copié avec l'image de la fille) >> alpha vers sélection. barre du haut/clique droit : selection >> bordure >> régler à 1px. Retourner sur notre nouveau calque en cliquant dessus dans la fenêtre des calque. barre du haut/clique droit edition >> remplir avec la couleur d'AP.

Etape 4 : Enregistrer et héberger (ctrl + E) puis utiliser un hébergeur. Votre avatar est prêt

[Tutoriel] Gimp 17030507214622555414892502

2.2 Double cadre (2)

1 : Faire le tutoriel 1 jusqu'à l'étape 6 Ici nous utiliserons cette image.
2 : Fenêtre des calques : clique droit >> nouveau calque.
3 : Dans le calque d'origine, Barre du haut : Selection >> bordure 5 px
4 : Dans le nouveau calque, Edition >> remplir avec la couleur d'AP
5 : Selection >> inverser
6 : Selection >> agrandir >> 1px
7 : Selection >> inverser
8 : Edition >> supprimer
9 : Enregistrer (Ctrl + E) et héberger l'image voilà votre avatar

[Tutoriel] Gimp 17030507114422555414892495

2.3 Cadre avec flou

Etape 1 : Faire le tutoriel 1 jusqu'à l'étape 5. Ici nous utiliserons cette image

Etape 2 : Faire le cadre blanc dans un nouveau calque RAPPEL : Fenêtre des calques : clique droit >> nouveau calque, laisser les réglages : largeur 200 px, hauteur 320 px, type de remplissage de calque : transparence. >> valider. Clique droit sur notre calque de départ (calque copié avec l'image de la fille) >> alpha vers sélection. barre du haut/clique droit : selection >> bordure >> régler à 1px. Retourner sur notre nouveau calque en cliquant dessus dans la fenêtre des calque. barre du haut/clique droit edition >> remplir avec la couleur d'AP. Dans notre cas il ne se voit pas beaucoup (pour l'instant).

Etape 3 : Faire un cadre noir. Sur le calque avec notre cadre : clique droit >> dupliquer le calque. Déplacer ce calque en dessous du premier pour être entre les deux ou cliquer sur la cadre du bas. Barre du haut/clique droit : édition >> remplir avec la couleur de PP.

Etape 4 : Flooter le cadre noir. Barre du haut : selection >> aucune. barre du haut : filtre >> flou >> flou gaussien. Régler entre 2 et 5 px le flou (horizontal/vertical : les deux s'ajustent. valider.

Etape 5 : Enregistrer et héberger (ctrl + E) puis utiliser un hébergeur. Votre avatar est prêt.

[Tutoriel] Gimp 17030507284522555414892504

2.4 Cadre damier

1 : Faire le tutoriel 1 jusqu'à l'étape 5 Ici nous utiliserons cette image.
2 : Fenêtre des calques : alpha vers sélection
3 : Sélection >> bordure 2 px (pour qu'il se voit bien)
4 : Barre du haut : Filtres>> rendu >> motif >> damier (ici j'ai laissé 10 px)
5 : Enregistrer (Ctrl + E) et héberger l'image voilà votre avatar

[Tutoriel] Gimp 17030507380122555414892509

2.5 Cadre motif

1 : Faire le tutoriel 1 jusqu'à l'étape 5 Ici nous utiliserons cette image.
2 : Fenêtre des calques : alpha vers selection
3 : Selection >> bordure 2 px (pour qu'il se voit bien)
4 : Cliquer sur la petite flèche ver la gauche en haut à droite de la fenêtre des calques >> ajouter un onglet >> Motif
5 : Choisir le motif qui vous plait
6 : Barre du haut : Edition >> remplir avec un motif
7 : Enregistrer (Ctrl + E) et héberger l'image voilà votre avatar (Moi j'ai fait mon cadre dans un nouveau calque et rajouté un flou dans un autre pour que ca fasse plus joli.

[Tutoriel] Gimp 17030507475422555414892511

2.6 Cadre dégradé

1 : Faire le tutoriel 1 jusqu'à l'étape 5 Ici nous utiliserons cette image.
2 : Fenêtre des calques : alpha vers selection
3 : Selection >> bordure 2 px (pour qu'il se voit bien)
4 : Cliquer sur la petite flèche ver la gauche en haut à droite de la fenêtre des calques >> ajouter un onglet >> dégradé
5 : Choisir/cliquer sur le dégradé qui vous plait.
6 : Avec l'outil dégradé [Tutoriel] Gimp 17030507475522555414892512

[Tutoriel] Gimp 17030507475522555414892512

cliquer sur un point, ne pas lâcher la souris et aller jusqu'à l'autre côté de l'avatar, le dégradé apparait. Ici j'ai cliqué en diagonale.
7 : Enregistrer (Ctrl + E) et héberger l'image. Voilà votre avatar (Moi j'ai fait mon cadre dans un nouveau calque et rajouté un flou dans un autre pour que ca fasse plus joli).

3. Une bannière texte

3.1

[Tutoriel] Gimp 17030508045822555414892515

1 : Barre du haut : ficher >> nouvelle image. Pour la largeur, je met 350 en général et la hauteur 90. Cliquer sur "option avancé">> remplir avec >> transparence. Un restangle cadrillé apparait, le cadrillage symbolie la transparence.
2 : Boîte à outil >> cliquer sur l'outil texte [Tutoriel] Gimp 17030508045722555414892513

[Tutoriel] Gimp 17030508045722555414892513

: comme sur word un rectangle texte apparait quand tu cliques à l'intérieur de ton rectangle.
3 : Tape le texte de ton choix
4 : Cliquer sur la petite flèche vers la gauche en haut à droite de la fenêtre des calques >> ajouter un onglet >> option de l'outil : là tu peux choisir ta police, la taille, la couleur. Moi j'ai pris French Script MT, taille 50, bleu/gris, centré
5 : Fenêtre de calque : clique sur ton calque de texte >> alpha vers sélection
6 : Clique sur le calque "arrière plan", edition remplir avec couleur de PP.
7 : Clique sur l'outil selection rectangulaire [Tutoriel] Gimp 17030508045822555414892514

[Tutoriel] Gimp 17030508045822555414892514

, puis n'importe où sur l'écran en dehors de l'image pour déselectionner le cadre.
8 : Filtre >> flou >> flou gaussien
9 : Enregistrer et héberger. La bannière est faite ! Note : tu peux déplacer le calque de flou avec l'outil de déplacement [Tutoriel] Gimp 17030508164022555414892522

[Tutoriel] Gimp 17030508164022555414892522

pour faire comme une ombre.

3.2

[Tutoriel] Gimp 17030508092522555414892520

1 : Suivre l'étape 1 à 4 du premier tuto texte (3.1)
2 : Fenêtre de calque : cliquer sur son claque >> alpha vers sélection
3 : Selection >> agrandir 2 px (tu peux varier evidemment !)
4 : Fenêtre de calque : clique sur le calque "arrière plan"
5 : Edition >> remplir avec la couleur d'AP
6 : Enregistrer et héberger ! ta bannière est prête =) Bien sûr tu peux surperposer les effets, en mettant plusieurs contours, ou un flou sous le contour.

3.3

[Tutoriel] Gimp 17030508164122555414892523

1 : Faire un texte en suivant le tutoriel 3.1 ou 3.2
2 : Fenêtre de calque : clique droit sur le calque de texte du haut >> fusionner vers le bas
3 : Avec l'outil rotation [Tutoriel] Gimp 17030508143722555414892521

[Tutoriel] Gimp 17030508143722555414892521

faire pivoter le texte selon vos souhaits.
4 : Peut être qu'après la rotation le texte n'est pas ben placé. Dans ce cas, utiliser l'outil de déplacement [Tutoriel] Gimp 17030508164022555414892522

pour mettre le texte où tu veux.
5 : Enregistrer et héberger ! ta bannière est prête =) Bien sûr tu peux surperposer les effets

3.4

[Tutoriel] Gimp 17030508201022555414892525

1 : Faire un texte basique à l'aide du tuto 3.1, choisir une police grosse pour que le relief soit visible
2 : Fenêtre de calque : alpha vers sélection
3 : Barre du haut : filtre >> décor >> ajouter un biseau >> régler entre 2 et 5. Décoche l'option créer une nouvelle image si tu veux rester sur la même image.
4 : Enregistrer et héberger. Cette technique te sera très utile pour les bannières plus complexes après !

3.5

1 : Faire un texte basique à l'aide des étapes 1, 2, 3 du tuto 3.1.
2 : Fenêtre de calque : clique droit sur le calque de texte >> alpha vers sélection

3 : Fenêtre de calque : Clique sur le calque "arrière plan"

4 : Barre du haut : selection >> agrandir >> régler entre 1 et 3, selon l'épaisseur du contour désirée.

5 : Barre du haut : Filtres >> rendu >> motif >> damier. Régler la taille des damier >> valider.
6 : Enregistrer et héberger. Cette technique te sera très utile pour les bannières plus complexes après !

3.6

[Tutoriel] Gimp 17082906423122555415245147

Le rendu est presque le même qu'avec le flou. Mais la technique est plus rapide.
1 : Faire un texte basique à l'aide des étapes 1, 2, 3 du tuto 3.1. Le calque du texte doit être sélectionné.
2 : Barre du haut : Filtres >> ombres et Lumière >> Ombre portée. Le décalage x et y permet de décaler directement l'ombre. Si vous la voulez directement sous le texte, il faut mettre 0. Valider.
3 : Enregistrer et héberger. Cette technique te sera très utile pour les bannières plus complexes après !

3.7

[Tutoriel] Gimp 17082906490122555415245151

1 : Faire un texte basique à l'aide du tuto 3.1, choisir une police grosse pour que le relief soit visible
2 : Choisir une image que vous voulez mettre dans le texte. J'ai pris [url=http://rootsandculture.net/wp-content/uploads/2013/04/ciel etoile cephee.jpg]cette image[/url]. Clique droit sur l'image >> copier l'image
3 : Clique droit sur le calque de texte >> alpha vers selection

4 : Barre du haut : édition >> coller dans. Utiliser l'outil de déplacement [Tutoriel] Gimp 17030508164022555414892522

pour mettre l'image à la place voulu.
5 : Enregistrer et héberger. Cette technique te sera très utile pour les bannières plus complexes après !

NB : Ici, j'ai cumulé les effets en rajoutant un contour d'1px blanc et une ombre portée. Jouez aussi avec les effets !

[Tutoriel] Gimp 17030509175722555414892545

Etape 1 : Choisir une image. Dans l'exemple nous prendront celle-ci.

Etape 2 : Ouvrir une nouvelle image sur gimp. Ficher, nouvelle image. Moi j'ai choisi 450*400, je préfère avoir trop que pas assez. je rogne à la fin avec l'outil découpage de la boîte à outil : [Tutoriel] Gimp 17030506320122555414892486

Etape 3 : Tracer la forme de son choix. Ici, nous allons faire une bannière ronde.
-> Clique sur l'outil sélection ovale.

Etape 4 : Coller l'image dedans
-> Quand tu es satisfait clique sur edition/clique droit >> coller dans.
-> Là, si l'image est énorme, on va voir un méga zoom, pas de panique ! Clique droit sur le calque de selection flottante >> échelle et taille du calque et redimensionne la largeur ou hauteur. Tu peux refaire ça autant de fois que tu veux, jusqu'à que tu aies le zoom qui te convienne.

Etape 5 : Fais un cadre.
-> Fenêtre des calques : clique droit >> Nouveau calque.
-> Mets le en dessous de l'image.
-> Fenêtre des calques : clique sur le calque de l'image
-> Clique droit >> apha vers sélection
-> Fenêtre des calques : clique sur ton calque vide
-> Selection >> agrandir >> 1 px ou plus selon l'épaisseur du cadre que tu veux
-> Edition >> remplir avec la couleur d'AP

Etape 6 : Rajoute un flou derrière la bannière
-> Fenêtre de calque : clique droit caque avec ton cadre le plus large >> dupliquer le cadre
-> Fenêtre de calque : clique sur le cadre du bas
-> edition >> remplir avec la couleur de PP
-> selection >> aucune OU un clique gauche en dehors de l'image
-> filtres >> flou >> flou gaussien

Etape 7 : Rajouter un texte. Suis les méthodes des cours 3 pour rajouter un texte travaillé.

Etape 8 : Rajoute quelques brushs.
-> Clique sur le pinceau de la boîte à outils [Tutoriel] Gimp 17030509113822555414892540

[Tutoriel] Gimp 17030509113822555414892540

-> Clique sur l'onglet option de l'outil dans la boîte des fenêtres ancrables.
-> En dessous de l'onglet Opacité, tu as un carré avec un rond, c'est la brosse. C'est un motif que tu peux ajouter à ton image. Clique dessus et choisis la brosse qui te conviens.
-> règle la taille et l'angle
-> ajoute ton motif. Dans la fenêtre des calques, tu peux choisir son positionnement, moi j'ai mis l'oiseau entre le texte et l'image.

Etape 9 : Enregistrer et héberger. et voilà ! Tu sais créer une bannière complexe !

5.3 Différentes formes de bannières

[Tutoriel] Gimp Formebulle

5.3.1 Forme bulle

--> Tu as suivi les étapes 1 et 2 du tuto Créer une bannière. On retourne à l'étape 3 du tutoriel 4, là où tu dois choisir la forme de tes bannières.
1 : Clique sur l'outil crayon [Tutoriel] Gimp 17030509192622555414892549

[Tutoriel] Gimp 17030509192622555414892549

2 : Dans la fenêtre option de l'outil, à côté de la fenêtre des calques, vérifie que la brosse sélectionnée est bien le rond plein
3 : Règle la taille de ton choix
4 : Fais des ronds un peu partout, en veillant à ce que ça soit plein à l'intérieur pour ne pas que la bannière ait de trou

5 : Clique droit sur le calque dans fenêtre des calques > alpha vers sélection

--> : Tu reprends à l'étape 4 du tuto de ban. A la fin vous obtiendrez quelque chose comme ça

5.3.2 Forme nuage

--> Tu as suivi les étapes 1 et 2 du tuto Créer une bannière. On retourne à l'étape 3 du tutoriel 4, là où tu dois choisir la forme de tes bannières

1 : Clique sur l'outil pinceau [Tutoriel] Gimp 17030509414222555414892567

2 : Dans la fenêtre option de l'outil, à côté de la fenêtre des calques, vérifie que la brosse sélectionnée est bien l'acrylic 01 ou 05
3 : Règle la taille de ton choix. Je te conseille de faire quelques nuages énormes (150) pour remplir le milieu et ensuite faire les contours avec la brosse plus petite (50)
4 : Clique un peu partout, en veillant à ce que ça soit plein à l'intérieur pour ne pas que la bannière ait de trou au milieu
5 : Clique droit sur le calque dans fenêtre des calques > alpha vers sélection

--> : Tu reprends à l'étape 4 du tuto de ban. A la fin vous obtiendrez quelque chose comme ça. Tu l'as compris, grâce à cette méthode, tu peux faire n'importe quelle sorte de bannière à partir de tes brushs. La seule limite est ton imagination !

5.3.3 Une image pour forme

1 : Cherche sur google "forme voulue png". Png est le format d'image avec transparence. La transparence est symbolisée par les carrés en damiers. Dans ce tuto j'ai cherché "couronne png". J'ai choisi cette image comme forme d'image.
2 : Clique droit, enregistrer sous. Je nomme toujours mes images de fond "poub.png" Ainsi quand j'enregistre une nouvelle image de fond, je supprime la dernière et cela m'évite d'avoir plein d'images inutiles sur mon ordinateur.
3 : Ouvre ton image sur Gimp.
4 : Dans la fenêtre des calques. Clique droit sur le calque > échelle et taille du calque > largeur : 400 px, hauteur 400px > valider.
5 : Dans la fenêtre des calques. Clique droit sur le calque > alpha vers sélection

--> : Tu reprends à l'étape 4 du tuto de ban. Tu l'as compris, grâce à cette méthode, tu peux faire n'importe quelle forme ! Utile pour les bannières et les signatures.

5.3.4.Bannière vagues

1 : Ouvre gimp > fichier > nouvelle image > largeur 500, hauteur 400. On pourra rogner les parties inutiles à la fin.
2 : Clique sur l'outil selection rectangulaire [Tutoriel] Gimp 17030508045822555414892514

. Trace un rectangle qui ne prend pas toute la place au milieu. Moi j'ai pris 400*220
3 : Edition -> remplir avec la couleur de PP.
4 : Clique en dehors de l'image ou sur sélection > aucune.
5 : Barre du haut : Filtre > distorsion > onduler. Tu règles la période et l'amplitude. Tu peux choisir des ondulations en dents de scie ou sinus. Joue avec les réglages pour te rendre compte toi-même des effets. > valider .
6 : Barre du haut : Filtre > distorsion > onduler Choisis cette fois-ci ondulation verticale si tu as pris horizontale juste avant. > valider
7 : Clique droit sur le calque dans fenêtre des calques > alpha vers sélection

--> : Tu reprends à l'étape 4 du tuto de ban.

5.3.5. Bannière aspirée

1 : Ouvre gimp > fichier > nouvelle image > largeur 500, hauteur 400. On pourra rogner les parties inutiles à la fin.
2 : Clique sur l'outil selection rectangulaire [Tutoriel] Gimp 17030508045822555414892514

. Trace un rectangle qui ne prend pas toute la place au milieu. Moi j'ai pris 400*220
3 : Edition -> remplir avec la couleur de PP.
4 : Clique en dehors de l'image ou sur sélection > aucune.
5 : Barre du haut : Filtre > distorsions > tourner et aspirer Joue sur l'angle de rotation, la force d'aspiration et le rayon. Une fois satisfait valide.
6 : Clique droit sur le calque dans fenêtre des calques > alpha vers sélection

--> : Tu reprends à l'étape 4 du tuto de ban. Joue sur les filtres toi aussi pour créer des formes uniques.

5.3.5. Bannière à bouts arrondis

1 : Ouvre gimp > fichier > nouvelle image > largeur 500, hauteur 400. On pourra rogner les parties inutiles à la fin.
2 : Clique sur l'outil selection rectangulaire [Tutoriel] Gimp 17030508045822555414892514

. Trace un rectangle qui ne prend pas toute la place au milieu. Moi j'ai pris 400*220
3 : Barre du haut : sélection > rectangle arrondi. Règle le rayon. > valider
4 : Edition -> remplir avec la couleur de PP.
5 : Clique droit sur le calque dans fenêtre des calques > alpha vers sélection

--> : Tu reprends à l'étape 4 du tuto de ban.

5.3.7. Bannière multiple

1 : Crées la forme de ton choix. Colles-y ton image. Fais le cadre ou non. Si tu as un cadre sur un autre calque, fais clique droit dans la fenêtre des calques, fusionner les calques visibles.
2 : Dans la fenêtre des calques : clique droit, duppliquer le calque. clique droit, duppliquer le calque. clique droit, duppliquer le calque
3 : Avec l'outil de déplacement [Tutoriel] Gimp 17030508164022555414892522

Tu peux déplacer tes calques.
4 : Avec l'outil rotation [Tutoriel] Gimp 17030508143722555414892521

, faire pivoter les images à ta convenance.
5 : Ensuite, dans la fenêtre des calques, fusionner les calques visibles. Tu pourras ainsi mettre un nouveau cadre, flou derrière général.

--> : Tu reprends à l'étape 5/6 du tuto de ban.

Annexes :

Télécharger une police

La police est très importante. Elle donne l'ambiance de l'image, le ton. Une jolie police embellira une bannière simple. Il t'en faut un certain nombre pour ne pas toujours utiliser les mêmes.

Pour télécharger une police, tu peux aller sur dafont où de nombreuses polices sont gratuites pour les usages personnels.

1 : Choisis ta police.

[b]2 :[/b] Clique sur télécharger.

[b]3 :[/b] Ouvre le dossier téléchargé de la police sur ton ordinateur.

4 : Ouvre le fichier de la police qui est au format ttf.

5 : Clique sur installer.

Pour avoir ta police sur gimp tu dois (re)lancer le logiciel de graphisme.

Télécharger des brushs

Les Brush sont des décors ajoutables à une bannières pour l'embellir. Il y en a de toutes formes. Par défaut, on a sur gimp des brush comme celui utilisé pour la bannière nuage.

Le fichier d'un brush est avec l'extension .gbr Il faut l'enregistrer à la bonne place :

Disque local (C:) => Program => GIMP 2 => share => gimp => 2.0 => brushes.

Tu peux trouver des brush à télécharger sur deviantart. Mais il y en a moins depuis quelques temps. Intéressons nous à google images

1 : Tape "brush fleur" par exemple.

[b]S'il est en transparence :[/b]

- Clique sur télécharger, format .gbr

- Range-le à la bonne place.

[b]S'il n'est pas en transparence :[/b] celui-ci par exemple n'est pas en transparence !

- Tu l'ouvres sur GIMP

- Mettre en mode RVB (barre du haut : Image => Mode => RVB).

- Barre du haut : Calque => Transparence => Couleur vers alpha. Comme le fond est blanc tu choisis la couleur blanche.

- Enregistre dans tes documents/image/ou tu veux en .gbr !

- Déplace le à la bonne place,

J'espère que ces tutos vous seront utiles ! N'hésitez pas à donner des retours !
Ca pourrait m'encourager à rédiger la suite des tutoriels =D

Fondatrice Messages : 1271 Date d'inscription : 01/05/2017

J'ai ajouté trois manière de travailler le texte au tutoriel !

3.5 Texte avec contours damiers
3.6 Texte avec ombre portée
3.7 Texte avec image incrustée

28/07/2017

Merci Rosalie pour ces superbe tutos *-*, grâce à toi, j'ai pu commencer à grapher et à apprendre très rapidement !
Merci pour tout ! :3
Sinon, je ne sais pas si ce topic est toujours d'actualité mais il serait bien -je trouve- d'ajouter de nouveaux tutoriels afin de compléter le topic.

*Je dis ça je dis rien (aa)... *

Fondatrice Messages : 1271 Date d'inscription : 01/05/2017

Bonjour Charlotte !

Ce sujet est toujours d'actualité puisque les explications sont toujours valables aujourd'hui.

Dis moi quels tutoriels tu aimerais et je les ferais en priorité ! Je suis heureuse que quelqu'un s'en serve.

28/07/2017

Super merci !

Alors, j'aimerai apprendre principalement les autres formes de bannières, les signatures, les avatars travaillés et les annexes 'chercher des images, télécharger des brushs'.

Encore une fois, merci [Tutoriel] Gimp 1816494761

Fondatrice Messages : 1271 Date d'inscription : 01/05/2017

Coucou !

Voilà donc des nouveaux tutoriels pour les formes ! j'ai mis à jour le premier message.

5.3.3. Une image pour forme
5.3.4. Bannière vagues
5.3.5. Bannière aspiré
5.3.6. Bannière à bouts arrondis
5.3.7. Bannière multiple

- Télécharger une police
- Télécharger des brushs

N'hésite pas à montrer ici tes progrès et à poser tes questions =)

28/07/2017

Coucou !

Alors, je testerai ces tutos dès que j'aurai un PC sous la main !
J'ai une question par rapport à la bannière en image comme forme, je tape 'forme voulue png' sur Google Images ? Car je ne crois pas que les images trouvées sont avec un fond transparent...

Sinon, pour mon progrès, y a mon avatar qui est réalisé par mes soins, j'ai bien maîtrisé le cadre blanc et avec flou ! :D

Il y a aussi cette bannière ronde avec une police téléchargée que j'ai fait il y a de cela environ une semaine, la voici :

[Tutoriel] Gimp M168

Elle est bien ?
Merci pour ta rapidité en rédaction de tutoriels ! :3

Fondatrice Messages : 1271 Date d'inscription : 01/05/2017

Bonjour !

Ta bannière est bien, mais j'aurais mis un flou derrière le ovale

Filtres >> ombres et Lumière >> Ombre portée.

Le décalage x : 0 décalage y : 0. Flou : 2 à 5 px

Ensuite tu peux rajouter un petit brush pour faire joli.

-> Clique sur le pinceau de la boîte à outils [Tutoriel] Gimp 17030509113822555414892540

-> Clique sur l'onglet option de l'outil dans la boîte des fenêtres ancrables. Si elle ne s'affiche pas, clique sur le petit triangle > ajouter un onglet > option de l'outil.
-> En dessous de l'onglet Opacité, tu as un carré avec un rond, c'est la brosse (brush en anglais). Clique dessus et choisis la brosse qui te conviens.

-> Choisis la taille.

-> Créer un nouveau calque en dessous des autres

-> Clique à l'endroit où tu veux mettre le dessin.

Enfin, je préfère quand le texte est plus près du ovale, c'est une question de goût.

Tu peux aussi le travailler grâce aux tutos de texte.

tu vois cette page ? Là tu as un cadrillage qui symbolise la transparence.
Enregistre l'image au format png. Puis fais fichier, ouvrir sur gimp.
Dis moi si tu arrives à ouvrir une image avec transparence.

Mettre une transparence sur une image à fond blanc/noir :

Ouvrir sur gimp
Coller l'image
Choisir la sélection baguette magique dans la boîte à outils
Clique sur le blanc/noir fond à supprimer
"Suppr" sur ton clavier ou Edition >> supprimer.
Sélection >> aucune ou alors clique en dehors de l'image.
Fenêtre des calques : clique droit sur le calque >> alpha vers sélection
Selection >> bordure >> 1 px
Edition >> supprimer
Sélection >> aucune ou alors clique en dehors de l'image.
Fenêtre des calques : clique droit sur le calque >> alpha vers sélection
Selection >> bordure >> 1 px
filtre >> flou >> flou gaussien >> 4 px

Et voilà, tu as une belle transparence. Cela paraît long à vu de ce tuto. Mais tu verras, c'est très rapide quand tu connais la technique. Tu l'utiliseras quand l'image que tu voudras sera ta bannière comme ici

Hâte de voir tes progrès !

28/07/2017

Coucou !

Merci pour ces conseils !
Alors, j'ai appris quelques nouveaux trucs avec les tutos et je poste donc ici mes nouvelles créations pour avoir des avis.
Sans plus tarder, voila ce que j'ai fait :

[Tutoriel] Gimp Gbwp

Et voila !

Fondatrice Messages : 1271 Date d'inscription : 01/05/2017

C'est trop chouette que tu sâches faire des bannières maintenant ! Cela va embellir le site et je prendrais une petite sieste ;)

Voilà mon avis !

- Hibou : très beau.
- Singe : j'aime pas trop le cadre. Tu aurais pu jouer sur l'opacité (fenêtre des calques) ou le mode (lumière douce, dure, toujours dans la fenêtre des calques.
- Elle est belle n'est ce pas l'image de courronne de fond ?
- Tigre : sympathique. Mais je trouve que tu détâches beaucoup le texte de l'image. N'est ce pas censé former un ensemble ?
- les télescopes : moi j'aurais mis un flou derrière comme toujours. Je trouve que ça fait plus travaillé. Après tu pourrais rajouter un brush pour essayer. Mais c'est joli.
- Impero/vérita : sympa. Mais pourquoi as tu fait trois images au lieu d'une seule ? Arrives-tu à jongler avec les calques ou souhaites-tu que je t'explique cela plus en détail ?
- Qui est-ce : Même question, tu n'as pas réussi à mettre le texte et l'image dans une image ? Je trouve le texte pas très travaillé. Pour l'améliorer, tu peux mettre une image de nature dedans (verte aussi, une autre ou la même mais zoomé différemment) pour avoir du vert plus nuancé.

j'espère que tu prépares les bannières pour aménager ta salle commune ! 1 (rien) et 2 (image de base seulement) sont en manque. D'ailleurs, si tu vois des sujets sans bannière sur le forum n'hésite pas !

Pour ta recherche d'images, si tu vas sur google, utilises de préférence les images libres de droit (réutilisation autorisée sans but commercial). Après quand il n'y a pas assez de ressource (fanart surtout), je prends quand même des images avec licence, mais j'évite.

Si tu as des questions, n'hésite pas !

Au passage, jolies signatures dans la galerie, bravo et merci.

Fondatrice Messages : 1271 Date d'inscription : 01/05/2017

Avatar mi-fixe mi-gif
Voici ce que Charlotte et moi avons fait.
prérequis : savoir faire les avatars mélangeant deux images fixes en fondu déjà (avatars doubles)



j'ouvre gimp


Je cherche d'abord un gif sur internet :
https://big.assets.huffingtonpost.com/juliannehoughharrypotter.gif
je l'enregistre sur mon ordi
je choisis aussi mon image fixe :
https://www.encyclopedie-hp.org/wp-content/uploads/sites/4/2016/08/gryf-team-big.jpg


Donc je fais mon avatar normal avec l'image fixe, avec la taille d'un avatar, en étant consciente que le bas ou le haut de l'image sera remplacé par le gif.

Tu fais clique droit dans la fenêtre des calques de ton image > ajouter un masque de calque
Ansuite tu prends l'outil dégradé et tu le mets à ta convenance. Il va déterminer les parties de ton image fixe invisibles où on collera le gif (Comme pour les avatars mixes 2 images)

Maintenant tu ouvres un nouveau groupe de calques
Clique droit sur la fenêtre des calques, nouveau groupe de calques


Après avec selectionné le groupe de calque vide : fichier >> ouvrir en tant que calques >> choisis le fichier gif. tous les fichiers gif doivent être dans le groupe de calques

ensuite : Sélectionnes l'outil de déplacement. Clique dans le sous menu des fenêtres de calques "option de l'outil". L'outil de l'option déplacement doit être en mode "déplacer le calque actif"
Clique sur le groupe de calques gifs. Avoir créé un groupe permet de déplacer tous les calques gif en même temps. Malin non ? (Tu as une autre méthode pour insérer un gif dans une image fixe)

Mets les gifs où tu le souhaites.

Fais ton cadre maintenant (si ce n'est pas déjà fait). Tu peux aussi mettre du texte. Les onglets gifs doivent être sous l'onglet fixe (déplace le fixe si ce n'est pas le cas) qui est lui même sous le calque cadre/texte/quadrillage.

Tu fais clique droit sur le premier de tes calques gif (tout en haut) -> nouveau depuis le visible -> clique droit sur le nouveau calque -> fusionner vers le bas
Ansuite tu cliques sur l’œil pour ne plus afficher ce calque.
tu répètes clique droit sur le plus haut visible de tes calques gif -> nouveau depuis le visible -> clique droit sur le nouveau calque -> fusionner vers le bas
Tu répètes cela pour tous les calques gif.



Ensuite tu déplaces tous les calques en dehors du groupe de calques.
Tu supprimes tous les calques qui ne sont pas des gifs (comme celui avec l'image fixe et le masque de calque et celui du cadre)


Clique sur fichier -> exporter as -> nomdufichier.gif
Tu coches la case "as animation" Ton vava est prêt ! Tu l'héberges et me le montres ?

Voici le mien :

Fondatrice Messages : 1271 Date d'inscription : 01/05/2017

Texte le long d'un chemin

Tu utilises l'outil chemin, tu crées ton chemin.
Ensuite tu crées ton texte, tu le sélectionnes.
Clic droit sur le calque du texte et "texte le long d'un chemin"
tu supprimes ton calque texte
tu cliques sur la fenêtre "chemin" à côté de calques et canaux
tu fais clic droit sur ton chemin
chemin vers sélection
et tu remplis avec la couleur que tu veux

» [Tutoriel] Qu'est-ce que le RPG ou JdR ?
» [Tutoriel] Utiliser la Chat Box
» [TUTORIEL] Que faire sur le site ?
» [TUTORIEL] Se faire des amis
» [TUTORIEL] Rédiger un bon cours !