Bannière animée
Il est toujours mieux de lire le tuto en entier avant de commencer !
Tel est le thème (Ames sensibles attention !) :
Roulement de tambours (là j’en fais trop:lol:) Je vais vous apprendre à faire une… Bannière ! (animée ou pas) ;
Le but ici est de vous présenter très globalement et très rapidement comment faire une bannière. Mon résultat final n’est donc pas la bannière de l’année.
Préface xD:
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: Tout sélectionner
<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 :
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 :
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à :
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.
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 » :
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) ;
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.
Voilà , je pense que c’est fini, disons qu’il n’y a rien de difficile la dedans ;
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 :
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é !
)
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à :
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 !
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 :
Ensuite, suivez le guide^^
Et voilà c’est fini !
Voilà ce que ça donne :
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: Tout sélectionner
<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>
