Comment créer une bannière Web animée dans Photoshop
La création de bannières Web n'est pas le travail le plus glamour au monde, mais c'est quelque chose que chaque concepteur devra faire à un moment de sa carrière, probablement plusieurs fois. Bien qu'il n'y ait pas de règles strictes en matière de création de bannières Web, il va sans dire que le type doit être gros et le message percutant.
Comme nous l'animons également, je ne suggère pas plus de trois diapositives ou éléments animés, car les gens ne le regarderont tout simplement pas. Les éléments clignotants peuvent également aider à attirer l'attention du spectateur.
Au cours des prochaines étapes, je montrerai comment configurer et créer une simple bannière Web animée qui, une fois maîtrisée, sera un jeu d'enfant pour postuler à tout nouvel emploi à l'avenir.
01. Configurez votre document
Lancez Photoshop, accédez à fichier> nouveau et sélectionnez Web dans le menu déroulant Préréglage. Dans la liste déroulante de taille, sélectionnez le classement ou si vos dimensions varient, choisissez personnalisé et entrez manuellement les dimensions en pixels.
Avec l'alignement sur les limites du document sélectionné dans le menu Affichage, faites glisser les guides pour aligner sur toutes les limites du document.
02. Ajout d'éléments graphiques
Maintenant, pour placer nos éléments de conception essentiels. Dans l'exemple ci-dessus, j'ai collé le logo carré T3 et, au fur et à mesure de la création, les guides pouvaient le redimensionner et le faire s'aligner facilement sur les limites du document. Collez une flèche que nous utiliserons plus tard et à l’aide de l’outil de saisie, définissez votre message pour la première diapositive. Collez toutes les images dont vous avez besoin, puis assurez-vous que vous nommez tous vos calques de manière appropriée.
03. Création des diapositives secondaires
Maintenant, dupliquez simplement votre calque de texte, désactivez le calque de texte en dessous et saisissez l'étape suivante du message, dans ce cas «EN VENTE MAINTENANT». Une fois que vous êtes satisfait d'avoir tous les éléments en place, fusionnez autant de calques que possible. En tant qu'arrière-plan, le logo et l'image de couverture resteront statiques, nous pouvons le fusionner en nous laissant avec quatre couches, l'arrière-plan, les couches de caractères et la couche de flèches.
04. Créer l'animation d'image
Maintenant, cliquez simplement sur l'onglet chronologie en bas de la fenêtre ou accédez à fenêtre> Chronologie. Cliquez sur la petite flèche au milieu de la fenêtre et sélectionnez «Créer une animation d'image» puis cliquez sur le bouton. Désactivez maintenant tous les calques à l'exception du calque d'arrière-plan et du premier calque de message. Appliquez un délai d'une seconde à l'image à partir du menu déroulant sur la petite image d'animation. Maintenant, cliquez simplement sur le bouton 'dupliquer les images sélectionnées' dans la chronologie, mais désactivez le premier message et activez le deuxième message. Répétez ce processus pour toutes les couches, en terminant par la couche de flèche.
05. Faites clignoter la flèche et ajustez les horaires
Pour faire clignoter la flèche, appuyez simplement sur «Dupliquer les images sélectionnées» dans la chronologie et désactivez la flèche. Ajustez le temps à 0,5 seconde et répétez le processus en activant et désactivant la flèche dans le panneau des calques pour qu'elle apparaisse comme si elle clignote. Enfin, vous voudrez peut-être ajuster certains des horaires jusqu'à ce que vous soyez complètement satisfait. Les gens ont une durée d'attention très courte, il est donc inutile d'être lent avec la fréquence d'images, mais ils doivent tout de même pouvoir la lire.
06. Enregistrer pour le Web et les appareils
Enfin, accédez à «Enregistrer pour le Web» et sélectionnez GIF dans le menu déroulant. Vous pouvez également réduire légèrement la qualité ici afin de réduire la taille du fichier. Une fois que vous êtes satisfait, enregistrez le gif, puis faites-le simplement glisser dans un navigateur Web pour le tester.
