Share
Il y a de fortes chances que cela ne vous intéresse pas du tout (gif animé Ian? Etes-vous en train de rire?) Mais j'ai promis à quelqu'un d'écrire ceci. J'ai récemment réalisé des images de prévisualisation animées pour les articles de presse sur Activetuts +. Maintenant, je suis ici. Il est juste que je dise à Michael comment ça se passe..
Photoshop n'est pas vraiment un leader du secteur de l'animation, mais cela ne pose aucun problème pour des tâches simples comme celle-ci. Nous allons prendre une image de prévisualisation standard 200x200px Tuts + et ajouter un téléscript défilant au bas de celle-ci..
Prenons une photo appropriée. En voici un que j'ai pris lors du meeting Envato à Chicago l'an dernier, recadré à 200x200px. Ouvrez-le dans Photoshop.
Nous avons juste besoin de deux couches supplémentaires pour cela; un fond pour le ticker (rectangle coloré # 104333) et du texte avec notre phrase désirée répétée plusieurs fois.
La police s'appelle 04b_03 et est disponible gratuitement sur dafont.com. Il s'agit d'une police 8 bits, ce qui signifie que vous devez l'afficher à sa taille de base (ou un multiple de) avec l'anti-alias désactivé pour obtenir les meilleurs résultats en pixelisation. Dans ce cas, nous examinons 8px.
Il a un ton vert doux de # f0fcdf avec un trait semi-transparent de 1px de # 051a14 (pour l'aider à se démarquer de l'arrière-plan).
Ouvrez votre fenêtre d’animation (fenêtre> animation) et, à l’aide du bouton en bas à droite du panneau, passez en vue Image..
Vous pouvez voir la première image vignée pour vous, assurez-vous simplement que le délai est réglé sur 0 seconde (directement sous la vignette), car nous voulons que l'image soit lue dès qu'elle est rencontrée. Ce que vous pouvez voir dans la première miniature est l’animation dans son état actuel, les calques et les objets exactement tels que vous les avez disposés.
Cliquez sur l'icône "Dupliquer les images sélectionnées" pour créer une deuxième image. Ceci doit être notre état final. Lorsque la deuxième miniature est sélectionnée, tous les changements que nous apportons à nos calques sont appliqués à cette image uniquement..
Tween est dérivé du mot 'inbetweening' et fait référence aux étapes progressives entre deux états, suggérant un mouvement.
Avec le deuxième cadre sélectionné, déplacez le texte sur l'écran dans la direction dans laquelle vous souhaitez le faire défiler. Vous voudrez peut-être maintenir la touche Maj enfoncée pour l'empêcher de s'écarter de son cours horizontal. Déplacez-le complètement pour qu'il semble être exactement dans la même position qu'au début.
Dans ce cas, le "N" est appuyé contre le côté gauche, il est donc facile de voir où je vis.
Après avoir déplacé votre texte, sélectionnez les deux images et cliquez sur le bouton "Images d'animation Tweens". Cela révélera le dialogue suivant:
Comme vous pouvez le constater, j'ai opté pour 99 images supplémentaires pour les deux états. Je voulais que tous les calques de mon document soient sortis dans ces cadres et je souhaite uniquement animer la propriété "position" de mon calque de texte. Super. Hit OK.
Vous aurez maintenant une tonne d'images dans votre fenêtre d'animation et chacune d'elles ressemble probablement beaucoup à la suivante! Cependant, rassurez-vous en appuyant sur le bouton de lecture et en regardant votre texte s'animer sous vos yeux. Magic, mesdames et messieurs?
Juste pour nettoyer les choses, sélectionnez la 101ème image et supprimez-la. Comme vous vous en souvenez peut-être, elle est identique à la première image, donc la boucle les collera l'une contre l'autre, ce qui nous donne un petit problème dans notre animation par ailleurs fluide..
Le résultat est subtil, mais dans l'image ci-dessus, vous pouvez voir notre première image et notre image finale (numéro 100). Looping va les mélanger de manière transparente.
C'est tout! Animation complète. Il ne nous reste plus qu'à enregistrer notre fichier. Allez à Fichier> Enregistrer pour le Web et les périphériques. Choisissez GIF comme type de fichier, puis au bas de la section Animation, choisissez "Boucler pour toujours". Vous pouvez également prévisualiser l'animation, juste pour être sûr.
Si vous souhaitez modifier votre fichier tout en conservant l'animation (vous pouvez modifier le texte et permuter l'image d'arrière-plan, par exemple), il vous suffit alors de modifier la première image. Conservez la première image sélectionnée, sélectionnez le calque que vous souhaitez modifier et assurez-vous que l'option "Propager l'image 1" est cochée..
Toutes les modifications d'attributs apportées à cette couche seront propagées (reproduites) dans toutes les autres trames. Ajoutez une ombre portée au calque de texte de la première image et Hey Presto! il est juste en face de l'animation. Si vous ne cochez pas la case "Propager l'image 1", une seule image sera modifiée..
J'imagine que vous ne vous êtes pas réveillé ce matin en pensant "Il y a une véritable pénurie de gif tuts animés" et, à moins d'être éditeur de l'un des sites de Tuts +, il y a de fortes chances que vous ne l'utilisiez pas pour ça. Malgré tout, Michael, j'espère que vous avez trouvé cette information informative et que j'attends désormais des images de qualité supérieure pour les post-poster sur Activetuts + :)
Accentsconagua