Share
Les fichiers Gif animés ont été la cible de nombreuses blagues au sein de la communauté des concepteurs. C’est parce que les gifs animés sont célèbres pour être un peu ringards et connus pour encombrer une page. Bien utilisée, l’animation peut toutefois intéresser une zone de la page par ailleurs négligée. Aujourd'hui, nous allons montrer comment utiliser Photoshop pour créer un gif animé dans Photoshop CS5. Commençons!
Créez un nouveau document 250 x 250 px et définissez la résolution sur 70 px avec la couleur d'arrière-plan définie sur # f2f2f2..
Placez un logo en haut au centre de la toile.
Écrivez un slogan sous le logo.
Dessinez un rectangle et définissez la couleur sur # 90909.
Ouvrez la boîte de dialogue Styles de calque et cochez Ombre portée. Réduisez la distance et la taille à 2px.
Ajoutez maintenant un calque dégradé et définissez le mode de fusion sur Multiplier avec une opacité de 28%..
Ajouter un trait et réduire la taille à 1 px. Définissez la couleur sur # a31b1b.
Ajouter des points de balle. Dans notre cas, nous avons ajouté le texte suivant: tutoriels, articles, astuces, cadeaux, Basix, vidéos, Premuim, comme indiqué.
. Rasteriser les calques de texte et créer un masque de découpage.
Placez maintenant une image accrocheuse. Dans notre cas, nous avons utilisé l'icône du programme Premium pour Psdtuts, mais n'hésitez pas à utiliser ce que vous voulez.
Rédigez un texte complémentaire, comme indiqué sous l'image que vous avez placée à l'étape 6..
Créez une boîte ovale et définissez la couleur sur #fdfcfc.
Ouvrez la boîte de dialogue styles de calque et appliquez une ombre portée. Réduisez la distance et la taille à 1 px.
Vérifiez Inner Glow et laissez-le comme il est.
Ajouter une superposition de dégradé avec l'opacité définie sur 6%.
Maintenant que nous avons fini de créer toutes nos couches, nous sommes maintenant prêts à commencer à travailler sur l'animation. Tout d’abord, ouvrez le panneau Animation (Fenêtre> Animation). J'utiliserai le panneau Timeline Animation (et non l'animation d'image). Remarque: cette fonctionnalité est uniquement disponible dans Photoshop Extended. Définissez maintenant tous vos calques sur visible, mais réduisez leur opacité à 0%.
Reportez-vous à l'image ci-dessous pour savoir comment insérer des images clés et comment augmenter l'opacité..
Votre chronologie devrait ressembler à l'exemple ci-dessous.
Nous avons maintenant terminé notre animation. Appuyez sur play pour voir le résultat. N'hésitez pas à le modifier si nécessaire. Pour enregistrer votre bannière, sélectionnez Fichier> Enregistrer pour le Web et les périphériques. Ensuite, utilisez les paramètres de l'image suivante et cliquez sur Enregistrer.
C'est tout! Vous avez fini!
Accentsconagua