pechpech Entraide Graphique : fifig Windows : Darth Vader Bar / Espace détente : MasterCloud, Iensis et 105 utilisateurs inconnus

 Mot :   Pseudo :  
 
Bas de page
Auteur
 Sujet :

[Tuto TheGimp] Design "Typographique"

 
n°23388
Vermine
Profil : Penguin
Avatar
profil
Posté le 02-07-2009 à 01:05:18  
 

Salut à tous ^^
 
Je vous propose aujourd'hui une adaptation pour THE GIMP d'un tutorial pour Photoshop que j'ai beaucoup aimé.
 
Voici le lien du tutorial original : Tuto PhotoShop du site Tutoriaux Photoshop . com(J'ai évidement eu l'accord par e mail de l'auteur ^^)
 
Je vais l'adapter à THE GIMP pour essayer de reproduire le plus fidèlement l'effet final :
 
http://img407.imageshack.us/img407/3200/image13ftq.jpg
_________________________________________________________________________________________________
 
1) Créez un Nouveau document - Taille : 1400 x 1400 px - Fond : Noir.
 
http://img142.imageshack.us/img142/2919/image1kiv.th.jpg
 
2) Sélectionnez l'outil Texte http://img11.imageshack.us/img11/9595/iconetexte.jpg et créez une zone de sélection plus grande que votre document.
 
http://img11.imageshack.us/img11/3578/image2dfa.th.jpg
 
3) Dans la Boite de dialogue de Texte suivante :
 
http://img11.imageshack.us/img11/6066/image3zje.jpg
 
Tapez votre texte - Taille : Au choix (dans le tuto j'ai pris 18 px) - Couleur : 323131.
 
Ensuite copiez votre texte, et collez le jusqu'à ce qui remplisse votre document (comme ci-dessous) :
 
http://img11.imageshack.us/img11/2034/image4etn.th.jpg
 
4) Sélectionnez votre calque Texte dans la Zone des Calques :
 
http://img195.imageshack.us/img195/1534/zonedescalques.jpg
 
5) Allez dans le menu Calque puis Transformer puis Rotation Arbitraire...
 
Rentrz la valeur -25 dans l'angle de rotation puis Validez en cliquant sur Rotation
 
http://img195.imageshack.us/img195/6017/rotationbox.jpg
 
Vous devez obtenir ceci :
 
http://img195.imageshack.us/img195/4628/image5agq.th.jpg
 
6) Sélectionnez à nouveau votre outil Texte puis créez une Zone de Texte sur votre document, une Boite de dialogue devrait apparaitre :
 
http://img443.imageshack.us/img443/2382/confirmedbox.jpg
 
Cliquez sur Créer un nouveau calque.
 
7) Tapez ensuite votre texte principale dans la Boite de dialogue de Texte - Taille : Grande ( 460 px pour mon tuto) - Couleur : Blanc - Police : Arial Heavy pour le tuto.
 
http://img26.imageshack.us/img26/231/image6fwz.th.jpg
 
J'ai modifé l'interligne à -220 car le THE et GIMP étaient trop écartés =) (pour cela il suffit d'allez dans les Options du Texte :
 
http://img443.imageshack.us/img443/175/textoptions.jpg
 
8) Répétez l'étape 5  
 
http://img26.imageshack.us/img26/3408/image7uso.th.jpg
 
9) Passez le Calque en mode Lumière Douce puis dupliquez le calque
 
http://img509.imageshack.us/img509/8660/layeroptions.jpg
 
Vous devez optenir ceci :
 
http://img509.imageshack.us/img509/8924/image8m.th.jpg
 
10) Créez un Nouveau Calque, et sélectionnez l'Outil de Dégradé http://img195.imageshack.us/img195/73/outildgrad.jpg
 
http://img195.imageshack.us/img195/2500/optionsdedgrad.jpg
 
Choisissez un dégradé radial, du blanc vers le noir et appliquez le sur votre calque :
 
http://img195.imageshack.us/img195/4084/image9oac.th.jpg
 
Passez ensuite ce dernier calque en mode Multiplier avec une opacité de 70 % (ou moins... ) et vous obtenez ceci :
 
http://img197.imageshack.us/img197/5007/image10ica.th.jpg
Etapes bonus
 
11) Sélectionnez le deuxième calque en partant du haut (comme ceci) :
 
http://img136.imageshack.us/img136/9956/layers.jpg
 
Allez dans le menu Calque puis Transparence puis Alpha vers sélection
 
http://img197.imageshack.us/img197/7103/image11j.th.jpg
 
12) Créez un nouveau calque (celui ci devrait se retrouvez au dessous du dégradé radial).
 
http://img136.imageshack.us/img136/8568/newlayer.jpg
 
13) Sélectionez votre nouveau calque et remplissez la sélection avec une couleur ou bien un dégradé ^^
 
http://img197.imageshack.us/img197/4695/image12b.th.jpg
 
J'ai utilisé le dégradé Blue Green
 
14) Passez le mode du calque sur Superposer
 
http://img407.imageshack.us/img407/3200/image13ftq.th.jpg
 
Le tutorial est terminé, et voici l'image final en taille réelle :  
 
http://img407.imageshack.us/img407/383/rsultat.th.jpg
 
Voici à nouveau le lien vers le tutorial PhotoShop : Tuto PhotoShop du site Tutoriaux Photoshop . com
 
Ps : Toutes les images du tuto ont été prise avec un zoom à 33,3 % d'où la mauvaise qualité des détails...
 
Amicalement, Vermine.


Message édité par Fagoon le 03-07-2009 à 17:05:16

---------------
http://img524.imageshack.us/img524/1348/fenetrevistadevil.png
answer
mood
GoogleAds
profil
Posté le 02-07-2009 à 01:05:18  
 

answer
n°23405
Ano Nyme
Bavarder. Bouquiner. Créer.
Profil : Big Penguin
Avatar
profil
Posté le 03-07-2009 à 13:06:46  
 

Très bon tuto, bravo  :great:  
Excellent rendu également, je suis fan :loveit: !!
Voici le mien (je me suis contenté de tout copier bêtement :tongue: ) :
http://www.crystalxp.net/forum/mesimages/327855/Design typographique.png1..png
Seul bémol, à 1400px Gimp rame énormément (j'ai mis 10 minutes à faire les  étapes 3 à 5... :frown: )
 
Encore bravo :great:  :great: !!!!


---------------
http://www.crystalxp.net/forum/mesimages/327855/signature naheulbeuk.png
"Je suis niveau 2, tralatatatala ! Je suis niveau 2, tralatatatala !!" by le Nain, Le Donjon de Naheulbeuk
answer
n°23406
Vermine
Profil : Penguin
Avatar
profil
Posté le 03-07-2009 à 14:34:36  
 

Salut ^^  
 
Bon si tu as tout suivi et que tu es arrivé à ce résultat, c'est que j'ai rien oublié =) hihi.
 
Oui pour un ordinateur un peu "lent" travailler en grande résolution dans un logiciel de graphisme, c'est long ^^
 
J'ai pris 1400 px parce que le tuto original utilisé ça mais on peut aussi diminuer la résolution ^^
 
Merci Ano
 
Amicalement, Vermine.


---------------
http://img524.imageshack.us/img524/1348/fenetrevistadevil.png
answer
n°23407
CRYSTAL-C
Profil : Big Penguin
Avatar
profil
Posté le 03-07-2009 à 16:35:46  
 

Super tuto Vermine ;) et très bien expliquer :).


---------------
http://nsa05.casimages.com/img/2009/02/08/090208034012962152.jpg
http://nsa05.casimages.com/img/2009/02/06/090206045810562030.gif
answer
n°23408
Fagoon
CrystalXP Fan
Profil : God of Penguins
Avatar
profil
Posté le 03-07-2009 à 17:04:46  
 

Très sympathique ce tuto, joli résultat. :)
Je valide. ;)


---------------
http://img297.imageshack.us/img297/1736/signaturediablo.jpg
..::Site::..::DeviantArt::...::Les très belles photos de Christian Consoli::.
answer
n°23413
Vermine
Profil : Penguin
Avatar
profil
Posté le 03-07-2009 à 18:15:01  
 

Merci à tous pour le commentaire et encouragements =)
 
Amicalement, Vermine.


---------------
http://img524.imageshack.us/img524/1348/fenetrevistadevil.png
answer
n°24060
MabIce
Profil : New Penguin
Avatar
profil
Posté le 03-09-2009 à 09:32:08  
 

voila le miens peut etre pas au gout de tout le monde  :smile:  felicitation pour le tuto  :great:  
 
http://img338.imageshack.us/img338/7255/psgs.jpg


Message édité par MabIce le 03-09-2009 à 09:32:28

---------------
http://img140.imageshack.us/img140/1863/signaturemodifi1.jpg
 
http://igloo.crystalxp.net/MabIce
answer
n°24064
Vermine
Profil : Penguin
Avatar
profil
Posté le 03-09-2009 à 18:53:18  
 

Ah bien adapté, beau travail =) et merci du compliment mais j'ai juste fait une transposition Photoshop vers The Gimp ^^
 
Amicalement, Vermine.


---------------
http://img524.imageshack.us/img524/1348/fenetrevistadevil.png
answer
n°24065
WhiteSpoon
Profil : Big Penguin
Avatar
profil
Posté le 03-09-2009 à 23:27:26  
 

Merci Vermine, de m'avoir montré ce tuto (mais sur Toshop) :D
J'adore ce style, et le tuto est super bien expliqué :great:


---------------
http://img691.imageshack.us/img691/2752/sign2.png
answer
n°24066
Vermine
Profil : Penguin
Avatar
profil
Posté le 04-09-2009 à 00:13:05  
 

Oh mais y a pas de soucis lol, je l'avais aimé sur photoshop, donc maintenant que j'ai The Gimp, j'ai fait le partage.
 
Amicalement, Vermine.


---------------
http://img524.imageshack.us/img524/1348/fenetrevistadevil.png
answer
n°24132
Rofelos
Profil : New Penguin
Avatar
profil
Posté le 15-09-2009 à 18:12:16  
 

surement un gros up de ce topic mais personnellement , je n'arrive pas a comprendre la fin de la partie  3 (je dois être autiste sa doit être cela) je bloque donc car je n'arrive jamais a ce résultat , avez vous une petite idée? , c'est le fait de copier/coller que je ne comprends pas :/.
 
Certes j'ai tapé mon texte dans l'éditeur et sélectionner un espace de texte plus grand que celui de l'arrière plan mais je ne comprends guère comment copier/coller dans le même éditeur ce texte :'(.
 
en clair je n'arrive jamais avec suffisament de texte pour combler tout l'espace une fois la rotation faite ^^", quelqu'un aurait il une idée pour m'aiguiller  ^^'?
 
 
EDIT: J'ai compris enfin je pense :p, merci quand même :p


Message édité par Rofelos le 15-09-2009 à 18:26:31
answer
n°24133
Vermine
Profil : Penguin
Avatar
profil
Posté le 15-09-2009 à 18:32:36  
 

Je voulais savoir si tu avais bien réussi finalement ?  
 
En fait, on copie/colle, le texte que tu tapes dans l'éditeur.
 
Dis moi si tu as réussi finalement ?
 
Amicalement, Vermine.


---------------
http://img524.imageshack.us/img524/1348/fenetrevistadevil.png
answer
n°24137
Rofelos
Profil : New Penguin
Avatar
profil
Posté le 17-09-2009 à 20:49:51  
 

Vermine a écrit :

Je voulais savoir si tu avais bien réussi finalement ?  
 
En fait, on copie/colle, le texte que tu tapes dans l'éditeur.
 
Dis moi si tu as réussi finalement ?
 
Amicalement, Vermine.


 
On peut dire que j'ai réussi d'une manière plutot..disons...détournée ^^'.
Je créer mes 2 lignes de texte dans l'éditeur et les places sur l'image puis je duplique le calque texte et tente d'aligner car je crains hélas ne pas comprendre le fait de copier/coller a partir de l'éditeur :/.
 
On lance l'éditeur : ok
On écrit le texte : ok
on copier/coller le texte a partir de l'éditeur directement sur l'image : ???
 
Voila je pense que je dois tourner autour du pot mais bon ^^'.
 
Merci de ton aide ^^.
Rofelos.

answer
n°24138
Vermine
Profil : Penguin
Avatar
profil
Posté le 17-09-2009 à 22:52:44  
 

Je t'explique en image, ça sera mieux je pense.
 
Dans ton éditeur de texte du tape le texte que tu veux en fond ici : crystalxp.net :
 
http://img185.imageshack.us/img185/5901/56099537.jpg
 
Puis tu copies le texte de l'éditeur : crystalxp.net et tu le recolles DANS léditeur, jusqu'à que ça remplisse ton document (donc en même temps tu jettes un coup d'oeil à ta création :
 
http://img185.imageshack.us/img185/6662/51784703.jpg
 
http://img11.imageshack.us/img11/2034/image4etn.th.jpg
 
Donc en faite le texte est copier collé dans l'éditeur.
 
Voilà j'espère que c'est plus clair.
 
Amicalement, Vermine.


---------------
http://img524.imageshack.us/img524/1348/fenetrevistadevil.png
answer
n°24140
Wizzer
Troll Linuxien
Profil : Top Penguin
Avatar
profil
Posté le 18-09-2009 à 10:15:59  
 

Rofelos a écrit :


 
On peut dire que j'ai réussi d'une manière plutot..disons...détournée ^^'.
Je créer mes 2 lignes de texte dans l'éditeur et les places sur l'image puis je duplique le calque texte et tente d'aligner car je crains hélas ne pas comprendre le fait de copier/coller a partir de l'éditeur :/.
 
On lance l'éditeur : ok
On écrit le texte : ok
on copier/coller le texte a partir de l'éditeur directement sur l'image : ???
 
Voila je pense que je dois tourner autour du pot mais bon ^^'.
 
Merci de ton aide ^^.
Rofelos.


 
Dans ce cas particulier, il est clair que la méthode de Vermine ci-dessus est la meilleure, mais si ce n'est pas un texte que tu veux utiliser, tu as deux solutions :
- créer un motif, et ensuite remplir le calque/sélection du motif
- ou alors faire comme tu as fait : tu fais par exemple deux lignes. L'astuce pour aligner, c'est que si le motif/ligne se répète à l'identique, tu superposes la première ligne du calque dupliqué au la dernière ligne du calque d'origine. Ensuite, tu les fusionnes, et tu re-dupliques, tu réalignes, tu re-fusionnes, etc... jusqu'à obtenir la longueur souhaitée ;)
 

answer
n°24200
Kootoon
Profil : Penguin
Avatar
profil
Posté le 29-09-2009 à 20:18:49  
 

J'ai fais ce tuto en rajoutant d'autres effets, et voici ce que j'obtiens. :whistle:  
Regardez de 2 ou 3 mètres, ça rends mieux. :oui:  :biggrin:  
 
J'apprécie le résultat, merci pour ce tutoriel. :wink:

answer
n°24201
Vermine
Profil : Penguin
Avatar
profil
Posté le 29-09-2009 à 20:32:17  
 

Jolie l'effet de nuage/fumé en fond ! avec l'écriture "Coca Cola" :)
 
Ca donne un beau rendu :p  
 
Amicalement, Vermine.


---------------
http://img524.imageshack.us/img524/1348/fenetrevistadevil.png
answer
n°24216
loulou2332
Profil : New Penguin
Avatar
profil
Posté le 03-10-2009 à 17:47:11  
 

ju

answer

Aller à :
Ajouter une réponse