creer une banniere avec gimp

voici comment creer une banniere avec gimp en video

 


 


 

ou

voici comment creer une banniere avec gimp en texte

Préface :
Une bannière, fait en general 468x60 pixels.
Vous devez la metre sur un hébergeur d’images (http://www.hiboox.com) ou sur votre serveur.
Pour les insérez sur un site web vous devrez faire le code suivant :

Code :

<a href="http://www.monsite.com"><img src="http://www.lesite.com/l_endroit_ou_se_trouve_la_baniere.gif" alt="ce qui apparaît quand la souris reste sur la bannière." width="468" height="60"></a>



La suite maintenant !


1.Bannière non animée ;

Etape 1 (il y a un commencement à tout !) Création d’un nouveau document :
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/un_creation_new_doc.gif

Etape 2 (Vous devez remplir le transparent) :
Donc, vous avez maintenant un fond transparent qu’il faut bien remplir par quelque chose. Vous pouvez mettre un fond d’une couleur unie (un fond bleu par exemple) ou remplir avec un motif, c’est vous qui choisissez. Personnellement, j’ai choisi de remplir simplement avec une zolie motif de fon (plus simple) ce qui me donne ceci :
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/deux_motif_de_fond.gif

Etape 3
Voilà vous avez maintenant votre fond, mais bon ce n’est pas super joli et on remarque bien la répétition ( Ca, je pourrais laisser votre imagination décider de la suite, mais je vais quand même vous aider =D ). Vous avez le choix, vous pouvez appliquer un filtre (essayez les tous, il y en a qui donnent de superbes rendus !) ou vous pouvez décider de continuer. C’est à vous de voir. Personnellement, je n’appliquerai pas de filtre car j’aime mon fond :-p.
J’en suis donc là :
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/deux_motif_de_fond.gif

Etape 4 (le texte)
Nous y sommes enfin, c’est le moment, c’est l’instant de marquer sur la bannière, ce qu’on veut ! Moi je marque « Cclleemm Graphic’s forever ! » (encore une fois vous choisissez la couleur :D)
Fusionnez le calque texte vers le bas.
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/3_cclleemm_forever.gif

Bon c’est déjà pas mal, disons que ca ressemble à quelque chose (vous avez surement remarqué que je suis débutant hihihi)

Etape 5 (il est temps de faire un peu de son malin) ;
Oui, nous allons créer un nouveau calque nommé « Reflet » :
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/quatre_creation_calque_reflet.gif
et faire une sélection ronde du dessus de la bannière et remplissez la de blanc (opacité ~30)(je ne suis pas clair donc un petit screenshot pour m’expliquer) ;
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/cinq_apres_reflet.gif

Etape 6 (ca en fait hein des étapes : p) ;
Sélectionnez la bannière, cliquez avec le bouton droit dessus => Edition => Tracer Sélection et faites +/- deux pixels dans la couleur de votre choix.
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/six_tracer_selection.gif
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/sept_tracage_du_contour.gif
Voilà, je pense que c’est fini, disons qu’il n’y a rien de difficile la dedans ;
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/fin_banniere_finie.gif
le tout est qu’il faut assez d’imagination pour arriver à faire un beau fond, et ensuite trouver une belle écriture etc. et la je ne suis pas super doué car j’ai malheureusement peu d’imagination. Je laisse donc la votre faire ce beau travail et je continue à la suite du tutorial ; les Bannières animées !

2.Bannières animées :
Bon nous allons essayer de commencer ce chapitre sur de bonnes bases.
Ce qu’il faut savoir :
_Votre bannière sera enregistrée en .gif
_Elle devra comporter plusieurs calques a la fin donc il ne faut surtout pas les fusionner (sauf certains où nous serons obligés car sinon ils apparaiteront alors qu’il ne faut pas !)

Outils :
_Un PC équipé du beau programme qu’est The Gimp !
_Une souris, (un clavier aussi si possible)
_Vous

Etape 1 (le commencement du début) ;
Créez, comme tantôt un nouveau document comme ceci :
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/un_creation_new_doc.gif

Ensuite, vous essayer de lui faire un fond. Personnellement, j’ai l’habitude de créer d’abord le nombre de calque qu’il me faut, et de les modifier par la suite. Créez donc par exemple, cinq calques transparents, de la taille de la bannière, et, vous mettez d’abord votre couleur/motif de fond au premier, puis au deuxième, et ainsi de suite pour qu’ils soient tous pareils (on aura juste le texte qui sera différent évidement o_O) (vous pouvez aussi appliquer un dégradé ! ;-))
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/ba_un_diff_calques.gif
Voilà, encore une fois, vos fantaisies sont ici les bienvenues, mais n’oubliez pas d’appliquer pour chaque calque (sauf si votre imagination n’est pas d’accord^^)
Continuons ;
Etape 2 ; le texte sur tout les calques
Ici, rien de bien bien difficile, nous allons un peu jongler avec les sélections dans la fenetere « Calques, canaux, chemins, annuler » et un changer les yeux qui sont à côté des calques pour pouvoir voir ce que l’on fait sur ceux-ci. Ca va vous paraître plus clair tout de suite.
Vous devriez en être là :
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/ba_deux_apres_textes.gif
Bon, maintenant, si on continue comme ça, la banniere affichera du rouge, puis le texte sur fond transparent, puis encore rien que du rouge, puis le seconde texte sur fond transparent etc…
Donc on doit fusionner vers le bas chaque texte avec le calque qui lui correspond. J’espère que vous me suivez !
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/ba_trois_apres_fusionnage.gif
Bon maintenant, vous pouvez faire des exantricités, des gros trucs de fou etc. mais je ne suis point la pour vous montrer ca, je dois juste vous montrer l’essentiel. Maintenant, reste plus qu’à enregistrer notre… hum … magnifique bannière à quel format ? pfff .gif bien sûr xD.

Voila comment faire.
Tout d’abord enregistrez au bon format :

http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/ba_quatre_sauver_un.gif

Ensuite, suivez le guide^^
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/ba_cinq_sauver_deux.gif

http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/ba_six_sauver_trois.gif

http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/ba_six_sauver_quatre.gif

Et voilà c’est fini !
Voilà ce que ça donne :
http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/banniere_de_cclleemm.gif
Voilà je sais que ce n’est absolument pas magnifique, je dirais même que c’est moche, mais avec le format .gif, il y a moyen de faire tout et n’importe quoi, à vous d’explorer un peu The Gimp, ses filtres, ses Scripts Fu, ces motifs, et à vous les belles bannières !
En espérant avoir été compréhensif,
Boulledogue
P.S. : C’est pas pour me la péter, loin de là, mais créer un tutorial prend du temps et je souhaiterais être prévenu avant toute reproduction de ce tuto, qui a été fait pour http://www.cclleemm.com. Reproduction= soit le même texte soit les mêmes images. Merci !
P.S.2: en appliquant le code:
Code :

<a><img src="http://stocks.monsitegratuit.com/tutoriaux/sauvegardes/39/banniere_de_cclleemm.gif" alt="Cclleemm Graphic's! Services 100% gratuits pour Webmasters!" width="468" height="60"></a>


ca donne une banniere "cliquable".

Présentation

Recherche

Calendrier

Juillet 2014
L M M J V S D
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
<< < > >>

Shootbox


Partager

Nombres de visiteurs

Compteur de visiteurs en lignes

 
Créer un blog gratuit sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus