After Effects - Animations UI/UX | Karim Balaa | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

After Effects - Animations UI/UX

teacher avatar Karim Balaa, UI/UX & Product Designer

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Intro

      0:37

    • 2.

      Raccourcis essentiels

      8:16

    • 3.

      Planification de l'animation

      2:02

    • 4.

      Importer le design et le début

      9:38

    • 5.

      Interaction des cartes coulisantes

      8:16

    • 6.

      Transition au mode de détail

      20:31

    • 7.

      Maquettes pour une démo

      6:06

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

1 212

apprenants

2

projets

À propos de ce cours

Dans ce cours, vous apprendrez à importer vos conceptions UI et à animer les animer avec After Effects et à créer de magnifiques interactions pour montrer votre prochain démonstration de produits.

Rencontrez votre enseignant·e

Teacher Profile Image

Karim Balaa

UI/UX & Product Designer

Enseignant·e

Sup Skillshare dudes and dudettes! My name is Karim Balaa, I'm a freelance Creative Director from Ottawa Canada. Focusing on all thing digital. I like to think of myself as a problem solver that implements the right strategy, design and interaction. I love working with startups and help create a special experience for the digital world.

I've been fortunate to work for some amazing clients on amazing projects. Here are some of the peeps I've had the pleasure to work with:





Voir le profil complet

Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Intro: , Ici Green, Bella, Bella, je fais partie de designer d'Ottawa, Canada. Ce sera une classe rapide qui couvrira un tas de trucs que j'utilise pour créer de nombreuses démonstrations de produits en utilisant Adobe après que les effets allaient créer une belle transition en douceur entre deux écrans. Et je vais vous montrer mes techniques et astuces qui pourraient être disponibles pour votre flux de travail. La possibilité de montrer comment il est vert se déplace dans le brouillon est une partie cruciale du processus, et cette classe est destinée à vous aider à passer ce jeu au niveau supérieur. 2. Raccourcis essentiels: avant de commencer, je voulais avoir une vidéo dédiée. Ce sera un aperçu rapide de mes effets après mis en place et des raccourcis clés et plug-ins que je vais utiliser tout au long de ce cours. Tout d'abord, peu mon, um mon espace de travail global que j'ai personnellement utilisé ressemble à ceci, qui, pour la plupart, ressemble probablement à la plupart d'entre vous. Mais, euh, c'est comme ça que je l'ai mis en place comme ça peut affecter certains projets en haut. Évidemment, tous mes fichiers seront ici dans 1000 compositions et mes calques et timeline ici. Et j'aime avoir mes effets et préréglages panneau facilement accessibles ici. Donc, si je veux trouver rapidement un certain effet,par exemple, par exemple, ils veulent un flou gaussien. Je peux juste le rechercher et, euh, cliquer sur cliquer et faire glisser dessus pour clair spécifique, juste un moyen rapide d'ajouter des effets spécifiques. Une prise de clé que j'utilise est appelée Motion V to. Vous n'avez pas besoin de ce sang pour suivre dans ce tutoriel, mais c'est assez pratique, surtout pour faciliter et avoir un contrôle complet de l'assouplissement. Et d'une certaine façon, c'est nous plus facile à utiliser que l'éditeur de graphiques ici est cette motion v 2. Il est également livré avec un tas d'autres effets qui sont assez cool, pour être honnête et pourraient ajouter beaucoup de valeur à vos projets. Je vais passer par ça très bientôt, mais laissez-moi continuer avec ces gars. En outre, le modèle d'alignement aime évidemment l'avoir vraiment facile d'accès, car il est très utilisé et des trucs de typographie rapide ici, un autre plug in qui utilise des auxiliaires et c'est un plug in pour si vous utilisez catch, qui ce que je fais. Et cela permet d'importer vos conceptions de l'esquisse aux effets après. Ah, beaucoup plus facile. Au lieu d'exporter manuellement des choses à partir de l'esquisse et de les amener ici, cela ne fait pas tout pour vous, et il garde tout positionné au bon endroit. Il garde les choses comestibles. Les formes restent des formes et le type reste le type et tout ça. Je veux aussi passer en revue mon genre de raccourcis essentiels que je vais utiliser tout au long de ce cours. Andi, j'ai pensé qu'on pouvait les traverser maintenant. Eso n'était pas une sorte de brosser sur eux à chaque fois. Appliquez-les tout au long du cours. Donc je vais juste créer une nouvelle composition et je vais dessiner un cercle. Euh, une chose. J' aime aussi un bateau. Ce mouvement V à brancher est qu'il me permet de contrôler rapidement mon point d'ancrage. Vous remarquerez que mon point d'ancrage n'est pas centré ou ses nœuds dans le bas juste après n'importe où. C' est juste dans un endroit bizarre. Cela me donne le contrôle de le positionner rapidement là où je le veux. Je vais avoir un centré ici, et je vais aussi avoir tout mon cercle centré dans ma composition sur je vais juste faire une animation rapide et juste quelques raccourcis clés qui sont assez basiques ou comme, le P r S t. Et tu sais ce qu'ils sont ? Est p rapide. C' est la position après être ici, transparence T est les actifs de rotation pour l'échelle et vous ne montre que les images clés actives de la façon dont je voudrais typiquement animer quelque chose. Dites, je voulais faire ça d'ici à ici. Je cliquerais rapidement sur p drop dans un, euh, une image clé Scrub à travers ma chronologie un peu ici. D' habitude, je garderais mon œil sur ce qui me dira exactement où je suis en termes de temps. Et si je veux le contrôle, disons que je voulais être exactement une seconde et que je pars ici, je ne le laisserais pas ici à notre soute. Commande impressionner mon héros deux fois, ce qui me donne le contrôle de déplacer exactement 11 encadré. Maintenant que je l'ai laissé ici, je sais que mon cadre est juste là. Maintenant, je sais que je suis exactement une seconde, je vais déplacer cette balle là-haut. Et ça a pris exactement une seconde pour passer d'ici à ici. Je voulais aussi changer l'échelle. Je voudrais appuyer sur s pour la compétence et laisser tomber un cadre clé, puis avec l'habituel pourrait entrer dans. Si je clique sur vous, il ne me montre que les images clés actives, ce qui est super pratique pour garder vos couches ici à l'air tout propre. Donc je vais aussi utiliser J et K, qui saute entre les images clés. K monte une image clé, et Jake le soutenait. C' est un excellent moyen de naviguer rapidement dans la chronologie jusqu'à un moment clé . Et, vous savez, vous êtes exactement au bon endroit. Alors je vais prendre ça. Je vais faire la balance ici. 50 eso. Maintenant, on passe du grand au petit en une seconde. Hum, et c'est là que l'assouplissement intervient. Maintenant, si je voulais que cela ait un mot à dire, comme l'assouplissement plutôt que la facilité, je pourrais sélectionner toutes mes images clés et je peux utiliser mon mouvement V pour brancher ici. Donc cela contrôle qu'il est dans ce contrôle qui est en fin de compte, et cela contrôle qu'il est sorti. Dis que je veux avoir un Il est dans et dehors quelque part par ici. Et maintenant, si j'appuie sur avis d'espace, il a, genre, un joli facile à elle, j'aurais pu aller plus extrême. C' est, genre, maintenant très fort n'est pas très fort. Il est dehors, ou quelque part au milieu ou encore vous pourriez avoir le contrôle complet en jouant avec cela exactement à votre goût. Une autre chose rapide dont je veux parler est l'effet parental ici ou deux. Ou je devrais dire, euh ce que ça fait qui donne le contrôle sur, hum, sur faire animer deux choses de la même manière exacte. Donc je vais juste tomber dans un carré ici. Je vais réparer ses points d'ancrage. Et maintenant, bien sûr, si je reviens à ma chronologie sur Lee, mon cercle bouge. Mais disons, je voulais prendre cette position bizarre ici. Dites que je voulais que ce carré fasse exactement ce que fait le cercle. Je pourrais prendre ma place, prendre ce fouet ici et le glisser et le déposer sur la couche. Je voulais faire exactement ce qu'il fait. Donc maintenant que je l'ai fait, vous pouvez dire ici que c'est la couche apparente est cette couche. Maintenant, ils font exactement la même chose, ce qui est super pratique. Nous allons utiliser cet outil dans ce cours, cela fait aussi d'autres choses comme, disons, disons, je voulais que la rotation dise que j'ai un peu tourné et maintenant vous remarquerez que les deux ont tourné. C' est un outil très pratique, surtout pour vous. Vous travaillez X ? Où chemin ? Une sorte de vouloir minimiser la quantité d'images clés utilisées. Donc en ce moment, même si tous ces air se déplacent de cette façon si les seules images clés qui sont utilisées sont seulement ces deux sur cette seule couche, cela facilite simplement la maintenance et la gestion de toutes ces images clés. Et ça fait qu'après les effets doivent travailler un peu moins dur pour ne pas gérer, vous savez, toutes ces images clés différentes. Donc encore une fois, moins commencer à utiliser les images clés avant vous. Je travaille là où nos compositions pourraient devenir assez compliquées assez rapidement parce qu'il y a beaucoup de choses, plus nous pouvons utiliser certains outils qui le rendent plus facile, mieux c' est. 3. Planification de l'animation: Donc, nous avons ici un design qu'il a créé et son strict pour le but de ce cours . Et c'est juste un moyen pour nous, euh, de montrer. Certaines de nos micro-interactions sont des transitions, euh, d'entre nous allant de cet écran d'exploration où nous sommes sur l'écran des écouteurs sans fil et nous allons cliquer sur l'un de ces éléments et nous allons passer dans ce page. On va prendre quelques choses en considération ici. Par exemple, la façon dont les écouteurs vont venir d'ici à là, ça va grandir. Ce désespoir arrive, va venir au centre de l'écran, ils vont grandir, on va glisser dehors. Le reste des objets allait glisser dans les arcs juste ici. Donc c'est un peu plus haut, et ça va se transformer en blanc, et tout le fond va passer de cette couleur gris clair à cette couleur sombre. Um, tout va arriver assez vite. Probablement une seconde environ, mais ça va avoir l'air super lisse. Hum, donc c'est tout ça dans le croquis, bien sûr. Et je vais utiliser un outil appelé U X, qui va nous aider à importer ça du croquis aux effets secondaires. Il est important que nos articles soient des termes assez propres de la façon dont leur autre organisé, mais il n'a pas besoin d'être 100%. Vous allez probablement avoir un design A pourrait être similaire à ça. Cela pourrait être différent si vous voulez marquer quelque chose de similaire à cela qui est aussi cool. Mais oui, tant qu'ils sont organisés d'une manière où il est facile de comprendre comment ils sont organisés et structurés, je pense que ça va juste vous rendre plus facile pour vous d'en comprendre et après les effets une fois que c'est là-dedans. 4. Importer le design et le début: maintenant pour la partie amusante. Mettons ces conceptions dans les effets après et commençons les ennemis. Comme je l'ai dit, je vais utiliser ce connecteur appelé un X. Si tu veux Teoh, téléchargez-le, c'est gratuit. C' est juste à un e u ex dot io Vous pouvez le télécharger gratuitement, installer, et je vais vous dire comment cela fonctionne. Une fois que tu l'as installé, , tu vas vouloir aller à tes, euh, euh, brancher et aller à un U X et cliquer sur le modèle ouvert. Et ça ressemble à ça. C' est super petit. Euh, mais, euh, très utile eso quand vous cliquez sur quoi que ce soit. Mais pour l'instant, nous allons cliquer sur le tableau d'art global ici. Nous avons donc notre premier écran. Une première sont pauvres sélectionnés. Je vais cliquer, Envoyer la sélection à A et ce que ça va faire, c'est qu'il va copier tous les attributs ici dans leurs bonnes positions, et ça va les préparer pour qu'on les colle dans les effets après. Maintenant, certaines choses sont des images. Par exemple, ces quatre pour les écouteurs et les taureaux abaissent l'image de ceux qu'ils vont devoir exporter. Mais cet outil fait tout pour nous. Alors je vais cliquer. Envoyer la sélection T e. Ça va me demander où est-ce que je veux exporter ces images ? J' ai ici un dossier appelé Assets, qui est juste à côté de mon fichier aftereffects et je vais cliquer sur select. Donc, ce que cela a fait en ce moment, c'est qu'il a exporté ces images et les a prêtes à importer. Donc je vais retourner aux séquelles et tu le remarqueras dans ma prise auxiliaire ici. Il est déjà il sait que j'ai déjà copié cette planche d'art casque sans fil. Et ça me demande si je veux que Teoh l'exporte dans une nouvelle composition ou occurrence maintenant, parce que je n'ai pas accompli créé, je vais cliquer nouveau je vais le faire au double de la taille. Hum, et je vais cliquer sur ce bouton ici et maintenant il fait son truc qui a importé ces images. Le nom est un peu funky, mais je pense que c'est bon. On n'a pas besoin de vous en inquiéter et regarder ça. Il a tout exporté aux droits, taille et dans la bonne position, et tout est superposé, qui est assez cool. Maintenant, il y en a quelques-uns que vous remarquerez sont des couches ici. Il y a quelques éléments ici, qui sont les groupes que nous pouvons supprimer, et celui qui peut le faire est juste en sélectionnant tout ici, puis cliquez sur Supprimer les couches de groupe . Doit-on attendre rapidement pour diriger tous ces groupes ? Um, ouais. Donc ça a l'air plutôt bien. Et nous avons tout ici beau et superposé. Maintenant, c'est un peu désordonné. Il y a quelques-unes de ces choses, mais vous remarquerez que tout est superposé et que le texte est toujours du texte. Hum, donc ça va être facile et amusant de travailler avec. Donc, l'écran initial ici, nous voulons le faire entrer rapidement, mais d'une manière agréable interactive qui suscite un peu d'excitation des utilisateurs. Après tout, ce sont des taureaux là une compagnie assez cool. Ils sont assez innovants. Et je pense que cette application devrait se sentir assez interactif, assez engageant, et peut-être pas super statique. Alors, euh, réfléchissons à la façon dont on veut faire ça. Tout d'abord, je vais choisir ces gars juste pour les voir ici. Une chose que je fais habituellement juste pour rendre cela facile pour moi de garder une trace, je changerais les couleurs. Donc, par exemple, vais sélectionner tous ces, et je vais cliquer sur la couleur ici. Je vais leur donner une couleur de rouge. Je veux dire, donnons-lui une couleur différente. C' est quelque chose qui se distingue. On y va. Et je vais faire la même chose pour ça. Et je vais donner aux groupes comme tous et leur donner une couleur, disons, bleu. Et puis je vais faire la même chose pour ça. Et une pêche et ceux-là. D' accord. Euh, Ugo. Donc ce que j'aime à ce sujet, c'est que je peux facilement les regarder et dire quoi ? Quelle section ils sont. Tu sais quelle partie de la carte là-bas ? Euh, une chose. Je change le plus ce type. Je vais lui donner une couleur différente, donc ce n'est pas déroutant. Ok, c'est juste un repère visuel que j'utilise personnellement. Ça m'aide juste à regrouper ces choses rapidement. Donc on va commencer ici avec un écran vide et cet air va entrer très vite et, hum, hum, façon intéressante. Donc je vais d'abord prendre, euh je vais prendre tout ça. Je vais bouger un peu mon curseur et faire le carré ouvert qui a bougé tous ces morceaux et la seule raison pour laquelle j'ai fait ça juste pour ne pas les voir tout de suite . Maintenant, c'est propre. Et Aiken, je m'inquiète juste pour ces gars et pour les faire entrer. On va les faire disparaître très rapidement. Donc c'est mon icône de recherche et ma flèche arrière quelque chose à la fois Presti et moi allons cliquer sur la capacité, faire ce zéro et le faire à la, euh, une demi-seconde. Je vais faire en sorte que ça soit 100. Juste un fondu rapide pour ces gars et je vais faire en sorte que l'arc arrive du côté. Appuyez sur le p pour la position sur déposer une touche pour lui ici et déposer une autre image clé ici. J' appuie sur J et K en sautant entre mes cadres clés et le premier tee d'ici. Je vais le faire sortir, et maintenant ça s'anime comme ça. Euh, évidemment, c'est très linéaire. Très ennuyeux. Mais prenons ces deux images clés et laisse-moi lui donner une belle qu'il est dans. Il est détenu à environ 60%. Rejouez ça. Ok pour ce type, laisse-moi aussi, hum, laisse-moi faire la même chose pour lui. Cette chute en position juste ici et ensuite une autre position. Tout droit là. Et je vais prendre les deux cadres Volsky et cliquer ici, ce qui va appliquer le même assouplissement exact que les taureaux. Donc, ils viennent et juste comme ça, et, hum, faisons qu'ils soient un peu plus longs. On n'en a pas une demi-seconde. Faisons en sorte qu'il soit exactement une seconde. Maintenant, si je veux faire glisser ces deux images clés pour être exactement à la seconde que vous allez tenir avec ma chronologie étant juste là, je vais tenir Shift et les chiffrer et maintenant ils sont exactement cette seconde. Donc c'est juste un peu, euh, euh, c'est Brenda Explosive replay. Ça a l'air bien, mais je pense que je veux qu'il soit un peu plus fort à la fin. Que ceux bon pour l'instant. Nous allons revisiter les inhibe. Une fois que nous voyons, c'était le plein écran. Donc ça se tenait toujours et puis ces gars, on a besoin qu'ils entrent rapidement, et, hum, d'une manière intéressante, une chose que je vais faire ici, donc je n'anime pas chacun des ceux-là. Je vais faire en sorte que chacune de ces cartes ait une couche de parents qui va être la base sur le reste sera parler à ce calque parent. Donc tout ce dont je dois m'inquiéter, c'est l'humeur. Donc je vais prendre ces gars, et je sais que le rectangle ici est ma base. Donc je vais sélectionner tous ces types, et je vais prendre ce fouet ici et le faire glisser vers le rectangle. Et je vais faire la même chose pour ça et sélectionner tous ces types traînés rectangle. La même chose pour cette boisson. Et maintenant ce que cela fait est si je sélectionne juste ce calque et je le déplace. Tout bouge avec ça, ce qui va rendre plus facile de garder ces gars ensemble. 5. Interaction des cartes coulisantes: Maintenant, faisons entrer ces quatre parties et d'une manière intéressante. Ce que je vais faire, c'est que je vais tous les faire glisser de leurs côtés. Donc celui-ci va le faire glisser de ce côté. Celui-ci était comme ça de ce côté-ci dans celui-ci d'ici dans celui-ci d'ici. Ce que je vais faire, c'est que je vais sélectionner ça et je vais le déplacer au bord de, euh, l'extérieur de l'aéroport. La même chose avec ça. Et vu avec ça et ça, en fait, laisse-moi défaire ça avant que je fasse ça. Laisse-moi tomber dans la bonne image clé. Laisse-moi prendre ces quatre rectangles ici et appuyer sur le P et déposer une clé pour lui. Donc ils finissent ici et ça va faire glisser cette image clé juste ici. Et puis faisons ça. Refaisons-le encore. Prenons ça. Déplace-le de côté. Ce côté, Voir, qui crée instantanément l'animation pour nous. Au moins, ils entrent comme ce canal. Si je fais ça, ils entrent comme ça, ce qui est évidemment linéaire. On veut donner à ça un peu le bon assouplissement, donc je vais prendre ces quatre et leur donner la même facilité qu'on a fait. Donc ils entrent tous comme ça un peu plus lentement ici juste parce que c'est le rendu. Donc, évidemment, semble plutôt robotique, le tout arrive à, hum, en même temps exact. Et, euh, une vitesse ennuyeuse, mais donnons-nous un peu plus de vie. Laisse-moi revenir à ce cadre clé et laisse-moi prendre ce type et appuyer. En fait, laissez-moi aller à cette clé d'ici et appuyez sur, euh, sélectionnez tous ces trois. Désolé. Tout d'abord et la presse sont pour la rotation dans cette chute dans une rotation en gardant ici. Donc, à ce stade, nous voulons qu'ils soient tous une rotation de 0%. Zéro degrés, c'est dire eso qu'il est bien aligné. Mais quand ça va vite, tu vas ramener Jay dans le cadre d'une clé ici, et je vais les rendre tous légèrement réels, donc ça leur donne un peu plus d'une sensation organique quand je clique dessus et que je reçois faire tourner ce gars un peu comme ça, et puis je vais le bouger un peu. Donc il est en dehors du campus, la même chose pour celui-ci. Je vais le faire tourner comme ça et bouger un peu d'aide. Et puis ce type, même chose. Et puis prenons tous ces et s'applique également. Je suis facile à ça. Donc maintenant, vous remarquerez qu'ils ont une sorte de royauté et léger dans. Et puis donnons-leur un peu de rebond pour eux avec motion v 2. Il y a une fonctionnalité excitante ici. Ce genre de leur donne un petit rebond. Donc la semaine où on va faire ça c'est qu'on va sélectionner toutes ces images clés de fin ici, et je vais appuyer, maintenir la commande et cliquer dessus. Et ça va tuer l'assouplissement qu'il avait. La raison en est que lorsque nous cliquons sur cet outil Excite, il fait sa propre chose, et c'est l'assouplissement ne peut pas interférer avec cela. On va cliquer dessus. Il fait son truc en ce moment. Et permettez-moi également de cliquer sur toutes les images clés initiales. Laissez-moi changer leur façon d'entrer. Je vais cliquer sur ce gars, qui nous donne un autre jeu d'assouplissement, juste si nous voulons avoir quelques réglages différents. Affaiblir. Fais ça. Je vais le faire. Celui-ci est vraiment haut, n'est-ce pas ? Est sorti. Alors maintenant, ils viennent et ont grandi dans une grande facilité dans l'aisance. Et puis ils ont un petit rebond et voient à quoi ça ressemble. Ok, c'est cool. Le rebond est probablement un peu trop fort. Voyons voir que rebondit un peu trop fort. Allons réparer ça. Nous pouvons sélectionner ces gars et ensuite aller à nos effets ici, et vous remarquerez qu'il y en a. Il y a quelques paramètres ici. Il y a dépassement, équilibre et frottement sur la raison pour laquelle il y en a deux, parce que l'un d'eux est pour la position et l'autre pour la rotation. Je vais faire en sorte que le dépassement ne soit que 10 et le solde sur le beat 10 et je vais le faire pour tout ça. Alors prenons une minute. Mais ça vaut le coup, et j'ai remarqué que j'avais oublié de le faire sur le 2ème 1 ici. C' est une autre chose cool à propos de cette motion. V deux est qu'il est livré avec un tas de réglages faciles, et ils sont assez hautement configurables pour certains effets qui sont assez communs, comme ça l'excite, son outil de saut et juste un rapide d'ajouter quelques effets. Dans ce cas, je suis comme un peu d'effet de printemps, ce qui est assez commun. Donc, il est beaucoup plus facile de travailler avec ces trucs. Alors nous allons en prévisualiser maintenant. Un peu lent en ce moment. Est-ce que c'est un rendu ? Mais ça a l'air bien. Ce n'est pas un dépassement fou comme avant, donc il n'y a pas beaucoup de rebond à ce moment, donc ça a l'air bien. Maintenant, la seule chose dans laquelle ils entrent tous à la même seconde exacte, ce qui est un peu bizarre. Donc je vais les faire entrer tous d'abord. Donc maintenant, ils arrivent tous au début, même avec les trucs d'en-tête, et ensuite on va les rendre tous un peu décalés. Je vais cliquer sur le 2e 1 ici. Appuyez sur Commande qui a compressé la flèche droite dire, pour le crime, c'est 1234 Puis appuyez sur le crochet carré ouvert 234 et la même chose pour celui-ci. Faites-le avant ce que cela a fait est là et les a rendus un peu décalés. Ils entrent donc à des moments légèrement différents. Ça a l'air plutôt cool. Maintenant, ça peut être un peu par-dessus bord. Si nous faisions cela pour une application vraiment, il n'a pas besoin d'être ce funky. Mais l'objectif principal ici est d'apprendre un tas de techniques pour certaines micro-interactions de haute fidélité . Donc, cela semble assez cool pour cet écran initial. Eso tout cela se passe en une seconde exactement un peu plus avec parce que nous les compensons . Donc, même si cela nous a pris un peu de temps pour faire tout ça, c'est vraiment offrir une seconde. Mais le diable est dans les détails. Je pense qu'une fois que vous faites ces petites choses avec le timing, ça fait une grande différence. Prochaine vidéo, on va voir comment on va passer au second écran. 6. Transition au mode de détail: maintenant que nous avons mis en place ici où ces gars entrent comme alors réfléchissons à ce qui se passe exactement quand nous allons cliquer sur ce confort tranquille 35. On va vouloir une transition dans cet écran, et on veut le faire d'une manière lisse où cette paire d'écouteurs grandit pour être comme ça et on s'estompe, les autres, les autres objets restants. On va vouloir une transition dans cet écran, et on veut le faire d'une manière lisse où cette paire d'écouteurs grandit pour être comme ça et on s'estompe, les autres, Nous apportons le fond noir sur ce genre de choses. Laisse-moi revenir à après les effets. J' ai donc un major que cette image ici est en fait uneimage haute résolution de cette paire d'écouteurs. J' ai donc un major que cette image ici est en fait une Eso quand je veux mettre à l'échelle son, il peut évoluer et rester et steak assez bonne qualité. Donc, si vous voulez faire un effet similaire juste pour vous assurer que vous avez une version haute résolution de cet actif et qu'il est juste réduit, donc quand il grandit et reste de bonne qualité. Donc, une fois que ça arrivera, je pense peut-être aux quatre secondes, on va taper sur ce gars. Donc, hum, prenons ça en considération et faisons disparaître ces gars à ce moment-là, je vais sélectionner toutes ces couches. Euh, tous ces leaders ont impressionné avant la capacité et tomber dans un cadre clé juste ici. Et on va faire les pieds à une ceinture pour, disons, 15 ici, faites-les tous B zéro. Sauf pour la paire d'écouteurs. Comme vous remarquez MBS parce qu'on va vouloir que ça grandisse. Donc ça va disparaître comme ça, et une paire d'écouteurs va grandir. Laisse-moi revenir ici et que je dépose la balance pour les écouteurs et en dépose un ici et aussi la position Déposez un cadre clé là, puis allez juste ici. On va faire appuyer sur l'arme, voir les deux images clés. Je vais les prendre et vous presser pour qu'on n'ait pas à les regarder. Hum, et rendons les écouteurs beaux et grands ici et lissons ce Teoh ici , qui semble assez proche de la façon dont nous l'avons mis en place dans notre design. Euh, ok, ça a l'air cool. Laisse-moi lui donner la même chose. Facile rapidement. Va probablement donner à cela un peu d'équilibre aussi bien. Pour l'instant, ce genre de filles comme ça, faisons en sorte que ça prenne un peu plus de temps. Cool. Hum, laissez-nous le destin qui fait sortir ce type. Laisse-moi déposer un cadre clé de position pour ce type, et comme une paire d'écouteurs grandit, on va le faire sortir. Et donnons-lui aussi qui utilise. Donc quand tu taperas dessus, ce genre de choses arrive, qui est plutôt cool, OK ? Et puis nous allons aussi faire disparaître larecherche. larecherche la Laissez-moi cliquer sur cette recherche depuis la transparence. Et, euh, allons ici et déposer une image clé, puis aller ici et déposer une image clé. Comme vous le remarquez. J' utilise des lots J et K, ce qui est juste un moyen rapide pour moi de sauter entre les images clés. Maintenant, je sais qu'à cette image clé, c'est l'opacité 100 et cette image clé à zéro. Donc ça disparaît. Et jusqu' présent, ça ressemble à ça. On va rendre ça plus cool. Prenons vite comme vous le remarquez quand je suis sur mon casque. Laisse-moi renommer ça en écouteurs euh, tu remarqueras que je peux voir mes petits points juste ici. Laisse-moi renommer ça en écouteurs euh, Que je peux attraper ce noeud ici et le déplacer comme ça. Ce que ça va faire, c'est que ça va le faire animer cette semaine. Donc maintenant, c'est un peu de, ah, d'une courbe à elle. Et donnons aussi à cela un peu d'équilibre. Donc je vais garder le commandement et tuer le facile sur ces dernières images clés et exciter et faire vraiment ici. Je crois que j'en ai déjà eu. Laissez-moi les supprimer et cliquez sur cela et cliquez sur Excite et laissez-moi donner ceci. Gardions le dépassement un an 20 mais fera le rebond 20 aussi bien. Et prenons les premières images clés. Faisons que ceux ont un très fort facile et facile à maintenant ressembler à quelque chose comme ça assez cool. Regardez, quelque chose comme ce véhicule. Alors faisons aussi ça l'arrière-plan. Maintenant, changez les couleurs. Laissez-moi revenir à mon dossier de croquis et laissez-moi, hum, laissez-moi prendre quelques choses ici, alors laissez-moi prendre cette couleur de fond, donc je vais venir ici, prendre cette copie couleur d'arrière-plan. Et ce que je vais faire, c'est que je vais créer un cercle qui va grandir et remplir l'écran au fur et à mesure que ça grandit. Laisse-moi, euh, juste aller, droite Vous créez un cercle et allons-y cette taille et laissez-moi lui donner la couleur que je viens de copier et laissez-moi faire son point d'ancrage B écrit au milieu et laissez-moi centrer. C' est juste là, et je vais faire le support ouvert. Amenez-le ici. Et ce que je vais faire d'autre, c'est que je vais faire de l'acier zéro la scène, et je vais rendre la balance vraiment grande quand elle remplit tout l'écran. Euh, juste là et je vais donner la même facilité. Et bien sûr, je vais le déplacer jusqu'à l'arrière. Faites ceci et c'est déplacer une couche de plus en arrière. Ça s'appelle ce fond noir. Alors maintenant, je vais appuyer sur la barre oblique avant. Et maintenant, quand je cliquerai dessus, vous remarquerez que tout s'est passé. Donc ça arrive trop vite. Mais réparons ça. Donc, nous allons faire en sorte que ça arrive. Venez juste ici. Donc, comme ces pieds dehors, ça fait ça. Donc ça arrive un peu trop vite. Laisse-moi le ralentir. Boum. Qui ? Et je pense que je ne suis pas un grand fan de la soirée est sur moi. Permettez-moi de changer ce genre de bits plus doux sur la facilité dans l'aisance. D' accord. Et aussi, ce que je pense faire, c'est le faire apparaître avec les écouteurs. Laisse-moi aller ici et cliquer sur la position et garder la position juste là. Mais permettez-moi de revenir au cadre clé initial où il a commencé et de le faire venir dans le prochain Aujourd'hui était formé ici, donc il s'ouvre en quelque sorte avec eux. Et gardons ce même assouplissement. Et rendons ça un peu plus fort que facile dans un peu plus vite. D' accord ? C' est l'heure. Aie l'air cool. , En fait, je pense que j'aime la façon dont ça vient de leur lemming. Ramenez-le au milieu. Je vais supprimer cette première position. Continuez que ça arrive du milieu. Quelque chose comme ça. Aussi, ce que je vais faire, c'est qu'on va revenir à notre design ici. Les rouleaux de tête sont en fait un peu plus gros. Laisse-moi les agrandir, laisse-moi les amener en premier. Donc je vais prendre, hum et ça, et je vais envoyer une sélection à un E. Et ça ne m'a pas demandé d'exporter des photos, parce que ce sont toutes des formes et des couleurs. Eso, laisse-moi aller ici. Et je vais vraiment importer ça comme une nouvelle composition. Parce que je vais les animer tous ensemble. Et ils vont venir par ici. Je ne cuisine pas une nouvelle composition et dépose ces gars dans de sorte que Gil, il est également sélectionner tous ces et aller supprimer les joueurs de groupe. On n'a pas besoin de voir tous ces Googlers. Et, euh, je vais te montrer une technique que j'ai utilisée pour regrouper tout ensemble. Donc je cliquais sur le nouveau, pas d'objets et je prendrais toutes ces autres couches et je vais les parents pour entendre ou avoir ceci des parents. Et puis je vais prendre ça Maintenant, les moteurs qui ont gagné tous les objets ici. Donc, si je prends ça et le déplace autour du tout avec, ce qui est cool, ça le rend super pratique. Oups. On y va. Donc, laissons tomber dans un cadre clé de position juste ici et que l'autre cadre clé de position ici, tout le chemin vers le bas. Tu vois ? Et donnons à cela un peu d'assouplissement. Donc ça se glisse. Maintenant, vous remarquez ça. Mettez ceci dans sa propre composition. Revenons à notre composition principale et voyons comment nous allons laisser tomber ces petits projets. Donc c'est mon autre accomplissement appelé détails des écouteurs sans fil. Et je vais faire tomber ça ici. Donc quand ça grandit, ça arrive, je vais le bouger un peu, quelque chose comme ça. Donc maintenant ça ressemble à ça. Donc c'est beaucoup trop lent comme on le voit. Voyons, euh, moment, vous pouvez remarquer que ça commence à zéro et que c'est 15 h 46. C'est presque deux secondes, ce qui est beaucoup trop long. Laisse-moi faire ça beaucoup plus vite. Elle prend probablement environ une demi-seconde. Alors que je déplace ça à environ 35 et puis revenir ici, c'est probablement mieux. Cool. , Pour ce que je vais faire,c'est que j'ai l'impression que l'animation arrive un peu trop ici. Donc je vais le faire ne va pas le faire venir tout le chemin depuis le bas. Ça va venir juste d'ici. Ça va glisser dans un peu comme ça, mais ça a l'air bizarre. Donc on va faire, c'est que je vais les rendre tous et, euh, complètement invisibles au début, et ensuite, euh, ils apparaissent donc ça va ressembler à ça. Très subtil, un peu moins d'animation, en fait va faire encore moins. Je vais le faire bouger juste d'ici. C' est un très maintenant, il bouge un peu moins. C' est beaucoup plus gentil. D' accord ? Et rendons nos écouteurs un peu plus gros. Retournez ici à notre échelle et faisons ça autour de cette taille et juste ici. Donc ils vont grandir un peu plus gros. Et faisons que Bo glisse un peu. Je vais prendre cet alcool et ça va glisser. course va commencer à glisser. Je ne suis pas pressé sur cette position P et je laisse tomber un mouvement clé ici et ça va glisser jusqu'ici, et ça va devenir blanc. Laisse-moi venir ici et aller à la tente, qui est ma tente de couleur et glisser-déposer ça juste après le logo de Bo et je vais aller Teoh , déposer un, euh, je vais le faire attendre, mais Je vais faire le montant zéro et laisser tomber une trame clé, puis passer et faire 100 %. Donc maintenant ça va ressembler à ça. Donc, glisser, Donc tranche d'un peu trop vite. Laisse-moi ralentir ça maintenant. Ça a l'air sympa, je pense. Glisser un peu trop. Laisse-moi déplacer ça un peu. Donc maintenant fait cela Très subtil, mais c'est assez cool façon. Vous voulez aussi le temps ici pour changer de couleur. Donc je vais prendre cet effet de teintes que je viens de faire une copie, et je vais le coller sur ce gars juste ici, pâte d' orteils. Et si je te presse maintenant, je peux voir que, euh, ne l'a pas appliqué. Laisse-moi vérifier pourquoi ? Oh, parce qu'on n'a pas remorqué Attendez. Laisse-moi changer ça en blanc. On y va. Alors maintenant que le temps change aussi en blanc et ensuite la même chose pour cette flèche. Voici sélectionner cette flèche et appuyez simplement sur les frais de commande. Et il est aussi de s'assurer que c'est ce que c'est Alors maintenant quand cette fille a été le changement, je pense que les écouteurs sont un peu trop gros. Prétendons que vous faites un peu plus petit, steak ces gars et rendre la balance un peu plus petite. Beaucoup mieux. Et remontons-le juste un peu ici. Ok, alors voyons à quoi ça ressemble. On va cliquer dessus, et ça grandit et ces transitions. Mais laisse-moi réparer ça. Ça a l'air plutôt cool. C' est donc la transition de base allant de ceci à ces animations, puis en cliquant dessus et il s'ouvre. Une chose que je vais essayer, c'est pour l'arrière-plan au lieu de ce cercle. Laissez-moi voir si elle a l'air bien avec elle, juste changer les couleurs et sans le cercle croissant cause peut-être que c'est un peu exagéré. Laisse-moi venir ici et prendre mon cercle. Et au lieu d'avoir l'échelle grandir, laissez-moi la garder grande et puis laissez-moi la faire se nourrir à partir de zéro 200 qui a aussi l'air assez cool. Il a aussi l'air assez cool. Je vais faire en sorte que les écouteurs soient un peu moins forts, faciles à claquer le crabe, mes écouteurs ici et me laisser prendre l'assouplissement initial. Et faisons que ça ressemble plus à ça ? Peut-être un peu plus. Faisons ça. Regardons ça à pleine vitesse. C' est plutôt cool. Rendons ça un peu plus vite aussi. Sélectionnez ces gars. Allons tout au long de la saison et oui, ça va l'école. Donc c'est à peu près tout pour la transition ici. Prochaine vidéo, on va regarder ajouter quelques petits gestes. Donc juste le tapotement dessus, ainsi que le mettre dans une maquette dans un téléphone et juste le préparer pour la démo. 7. Maquettes pour une démo: Préparez-vous pour une démonstration. Mettons un petit geste sur ce gars et mettez-le à l'intérieur et le balisage iPhone. Juste pour que ça soit sympa pour la date limite, je vais créer une nouvelle composition. Et, euh, allons que j'allais y arriver. Square va en faire 2000 d'ici 2000 et appelons-ça Demel. Et puis je vais tomber dans ma composition, euh je veux dire . Et évidemment, c'est assez grand, ce qui est bien, parce que c'est toujours mieux de l'avoir. Une grosse oie qu'on peut faire. On peut le rendre plus petit. Eso école. Alors maintenant c'est Ah, c'est juste là. Et avant que nous le fassions, cela durera réellement. Même moi. Laisse-moi tomber dans le balisage de l'iPhone. Je vais juste double-cliquer quelque part ici. Et j'ai une marque de téléphone qui allait la déposer, et je vais la déposer en bas ici et en fait me laisser la déplacer en haut, et je vais faire tomber la balance juste ici. Dis peut-être autour de 73 pour mon peut-être 73. 25. On y va. Um, ouais. Et tu sais quoi ? Je vais aussi les attacher ensemble, donc je vais faire en sorte que le cadre de l'iPhone soit apparent. Donc si je déplace ces groupes ensemble, c' est cool. Pour qu'on ait ça se passe ici. Je vais faire un geste de claquage juste ici. Donc, hum c'est créer un cercle et laisser ses points d'ancrage centrés. Je vais zoomer dessus. Tu sais quoi ? Je vais le rendre blanc. Je vais lui donner, euh, je vais réduire un peu sa transparence et je vais lui donner une ombre portée. Allons prendre la distance un peu et ça a été de la douceur comme ça. Et maintenant, nous avons ce petit curseur de pieds. Donc on va faire entrer ce curseur ici. Je vais la rendre invisible au début, puis être visible et je vais rendre la position peu légère et un peu pour que ton oeil l' attrape. Allons un peu doucement, ça arrive comme ça et on va taper sur ce type. Donc je vais faire la balance juste pour faire l'illusion d'un robinet Je vais faire l'échelle B 100, puis je vais faire de l'échelle 70, puis revenir à 100 et ensuite je vais prendre ça et les déplacer à Ah, la police a été, Peut-être que ça a l'air juste, et je vais aussi le faire disparaître. Une fois que j'ai cliqué dessus, je vais cliquer sur la capacité, laisser tomber une image clé, bouger un peu et faire de l'image clé le zéro. La seule chose que je ferais pour garder mon dossier aussi propre que possible. Je couperais ça ici, donc je, euh j'ai ça, donc je n'ai pas besoin de voir le reste de la chronologie. Donc ça arrive. Il s'appuie sur cela et sur ses dépenses. Ah, je crois que j'ai fait mon téléphone un peu trop gros. Laissez-moi me dissocier. Ces gars font mon téléphone. Peut-être que 73 était le bon numéro. 70 ans. Donc maintenant mes démos comme ça, ça arrive et j'ai cette fausse pression qui vient et ça tape dessus et puis ça s'ouvre. Je vais rendre ça un peu plus grand. Faisons en sorte que le curseur soit encore 1 20 et il en veut un. Je pense que les médias plus 1 50 Non, vous. Cela vient dans le robinet sur ce dans l'étendue. Ça a l'air plutôt cool. Rendre ce petit peu plus petit. Prenons ça un peu plus petit. Tout ce qui était cool. C' est si simple. J' espère que vous apprécierez ce petit cours. J' espère qu'il prend quelques techniques que j'utilise personnellement. Hum et j'espère que ça aide avec vos effets et vous êtes après. J' ai des interactions avec vous. Si vous avez des questions, hésitez pas à m'envoyer un message. Et je serai heureux de vous aider. Et s'il a apprécié la classe, s'il vous plaît donner un avis sur vraiment apprécier cela et vous remercier beaucoup et avoir une merveilleuse journée.