module inscription newsletter haut de page forum mobile

Rejeter la notice

ateliers live resolve avec forest

Ateliers Live Resolve - Formez-vous en ligne tous les mois avec Forest !
Faites rapidement évoluer la qualité de vos étalonnage avec nos ateliers mensuels de 3h.
Toutes les infos
Rejeter la notice

Nouvelle Formation Prise de son : les inscriptions sont ouvertes !
Maîtrisez la qualité de vos prises de son avec notre formation théorique et pratique de 3 jours ! Du 14 au 16 mai 2024 à Paris.

Créer un GIF avec défilement horizontal des images dans un mockup d'iMac

Discussion dans 'Adobe After Effects' créé par Flora G., 19 Mai 2018.

  1. Flora G.

    Points Repaire:
    100
    Recos reçues:
    0
    Messages:
    5
    Appréciations:
    +0 / 0 / -0
    Bonjour,

    Je cherche désespérément à créer une animation au format GIF pour présenter deux sliders plein écran que j'ai créé pour un site.

    Je voudrais, sur un format de 1920x1080 px, disposer un Mac au centre de mon image et faire défiler mes deux sliders dans ce Mac. Mon problème : comment faire pour que les images défilent en se suivant mais en restant dans l'écran ? Je ne sais pas si c'est très clair... J'ai essayé avec Animate et After Effects, avec des effets prédéfinis ou par moi-même, mais ça reste du bricolage, c'est loin d'être propre et le fichier est beaucoup trop lourd... Je n'y arrive pas !

    Merci beaucoup d'avance pour votre aide !
     
  2. LiquidPro

    So

    Points Repaire:
    15 325
    Recos reçues:
    290
    Messages:
    2 697
    Appréciations:
    +277 / 849 / -3
    1/ Tu crées une image photoshop ou png de ton mac en laissant la zone écran "transparente"
    2/ Dans after effects, tu importes cette image
    3/ Tu importes tes 2 slides et tu les places sur la composition en dessous du calque de l'image du mac (qui sert alors de masque)
    4/ Tu positionnes des slides dans leur position de départ
    5/ Tu animes tes slides (avec des keyframes sur les propriétés transform->position) , ainsi tu ne verras qu'a travers la zone écran du mac

    Ça prend 2 minutes à faire.

    Mais le problème, c'est qu'un GIF est limité à 256 couleurs, le résultat ne va pas être folichon, et forcément un peu lourd en 1920x1080 (même s'il n'y a qu'une petite zone de l'image qui est modifiée)
     
  3. Flora G.

    Points Repaire:
    100
    Recos reçues:
    0
    Messages:
    5
    Appréciations:
    +0 / 0 / -0
    Un calque transparent, j'y ai même pas pensé... Merci, je vais tester ça. En effet ça devrait pas être long.

    Oui le souci c'est que je ne vois pas d'autres solutions que de faire un GIF : je vais poster ça dans mon portfolio en ligne et lorsque l'utilisateur va scroller je voudrais que l'animation démarre automatiquement (c'est juste une planche dans un projet). Avec une vidéo je ne sais pas si on faire ça... Il y a peut-être d'autres solutions mais je ne les connais pas :/
     
  4. LiquidPro

    So

    Points Repaire:
    15 325
    Recos reçues:
    290
    Messages:
    2 697
    Appréciations:
    +277 / 849 / -3
    C'est pour un site web ? Tu peux le faire avec une vidéo en HTML5, ou directement en code mais c'est plus compliqué.
     
  5. Flora G.

    Points Repaire:
    100
    Recos reçues:
    0
    Messages:
    5
    Appréciations:
    +0 / 0 / -0
    Oui tout à fait, c'est pour mon portfolio Adobe (thèmes prédéfinis personnalisables). J'ai effectivement essayé avec Animate CC mais pareil j'ai bricolé, je connais encore moins qu'After Effects et le défilement des images est moins fluide, mais l'avantage c'est que je peux directement exporter en GIF !
     
  6. giroudf

    So

    Points Repaire:
    15 400
    Recos reçues:
    452
    Messages:
    18 151
    Appréciations:
    +746 / 3 140 / -34
    en general on fait une table avec l'image complete decoupee pour remplir les case qui changent et celle qui ne changent pas. du coup on peut faire des animations legere en ne changeant que les zones necessaires.
    ca c'est la vieille ecole.
    maintenant on ferait un truc plus complique a base de <div>, de css et de html5 ou de java pour avoir le resultat.
    n'importe quel programme de paint un peu evoue permet de faire ca de nos jours.
     
Chargement...

Dernières occasions

 

Partager cette page

Dernières Occasions

 
Vous souhaitez annoncer sur le Repaire ? Contactez-nous