Quand on possède un site, on est assez souvent amené à faire des partenariats avec d'autres sites. Malgré l'utilisation de simples liens texte, la bannière est devenue un outil indispensable de promotion pour tout webmaster qui se respecte. Nous allons donc appréhender dans cet article les bases de la création de bannières.

Commencez par créer une nouvelle image de taille 120 pixels par 60 de hauteur. Nous allons à présent faire le fond de la bannière. Par exemple appliquez un dégradé aux couleurs de votre choix. Ensuite créez un nouveau calque, avec l'outil crayon dessinez les contours de la bannière pour avoir un liseré noir.

Pour donner un effet plus fini, vous pouvez par exemple appliquer un effet de Scanline. Voici un bon didacticiel qui explique cette méthode. Il ne vous reste plus qu'à réduire l'opacité à environ 25% pour rendre l'effet plus discret. A ce moment-là, vous devriez avoir 3 calques différents. Le premier avec le cadre, le second avec l'effet Scanline et le dernier avec le fond dégradé de la bannière.

A présent nous allons créer un texte. Nous lui ajouterons aussi un effet sympathique d'apparition progressive. A l'aide de l'outil texte tapez par exemple le titre de votre site. Dans l'exemple, j'ai mis 2 mots différents sur 2 calques. Dupliquez ensuite chaque calque de texte. Sur les calques ainsi dupliqués appliquez un filtre de flou directionnel de 90°. (Menu : Filtre/atténuation/flou directionnel...) Vous allez avoir une boîte avertissant que le texte sera pixellisé. Cliquez sur oui.

Vous devez à présent avoir 4 calques supplémentaires. 2 avec le texte flouté et 2 avec le texte brut. Cachez pour le moment les calques avec les textes flous pour n'avoir plus que les textes bruts. Pour ce faire, utilisez les petits yeux sur le côté gauche des calques.

Il faut maintenant mettre en valeur le texte. Pour cela, nous allons faire un petit bord violet autour du texte. Cliquez sur le petit rond noir en bas de la fenêtre des calques et choisissez l'effet contour. Faites les réglages que vous souhaitez. Ici j'ai choisi un contour de taille 1.

Nous avons à présent préparé tous les calques qu'il nous faut. Il est temps de passer à l'animation de notre bannière. Il faut aller sur Image Ready. Pour cela, cliquez sur le bouton en bas de la barre d'outils. Image Ready va se lancer et vous allez vous retrouver avec le fichier de la bannière comme à présent, mais sous Image Ready.

La fenêtre qui nous intéresse est celle des animations. Le principe est de créer toutes les phases de notre animation. Pour ajouter des phases d'animation, utilisez le petit bouton que l'on voit tout à droite de l'image ci-dessous. Ensuite, dans chaque phase il faut afficher les calques qui nous intéressent. Dans l'exemple, j'ai dans un premier temps affiché le texte flou puis juste après le texte avec le contour. Ce qui donne un effet d'apparition sympathique.

Il faut ensuite temporiser l'animation de la bannière. Pour cela, cliquez sur le temps juste en dessous de chaque petite image. Vous pouvez alors choisir des temps prédéfinis ou le définir vous-même. Pour les images de transition avec les textes flous, on peut choisir soit 0 seconde soit 0.1 seconde selon le cas.

Une fois toutes les phases définies, il ne reste plus qu'à enregistrer la bannière. N'oubliez pas de choisir les réglages de façon à avoir une bannière la plus petite possible. Reportez-vous à l'article sur l'optimisation du mois dernier. A titre indicatif pour une bannière de 120x60, il est préférable de ne pas dépasser les 15Ko. Plus votre bannière sera légère, plus vite elle sera affichée sur les pages.

Voila la bannière finie :

Avec un peu d'entraînement et en ajoutant des phases supplémentaires, on peut par exemple arriver à ce genre de bannière :

Ido designer officiel de Cybersexe.biz pour AdultBizVoice.