Animation Adobe Xd - Guide complet des icônes à l'interface utilisateur

1. Introduction du cours: vous animer. Re design blanc est important car il montre que vous pensez processus mieux que juste une image statique montrant vos clients conception animée va les aider à mieux comprendre et accélérer le processus de façon spectaculaire. Animer dans Adobe X'd est simple parce que l'application est gratuite, facile à apprendre et tout dans 12 Salut là. Je m'appelle Alex et Discourse. Vous avez appris les différences entre les nations comment les orteils animent les icônes, les fonds , les formulaires, les curseurs de texte, les effets de Sharp et plus que d'appliquer cette connaissance pour planifier, dessiner et créer des cadres métalliques à des images, icônes et ombres. Pour créer un design. Utilisez les techniques que vous avez apprises pour créer des prototypes. Partagez le travail avec vos clients pour obtenir des commentaires et enfin, comment exportez vos actifs. Pour les développeurs, ce cours s'adresse à tout le monde, que vous débutiez ou que vous soyez un professionnel à la recherche de conseils supplémentaires dans Adobe X'd . J' espère que vous êtes prêt à apprendre Adobe X'd dans des fonctionnalités d'animation impressionnantes. Il a à offrir, et je te verrai en classe 2. Introduction au cours: Hé, là. Et bienvenue au cours. Je m'appelle Alex, et dans ce cours, vous apprendrez tout ce que vous devez savoir sur l'animation à l'intérieur d'Adobe X'd, ainsi que comment partager cette animation avec vos clients ainsi qu'avec les médias sociaux suivants. Ce que nous allons faire dans ce cours, c'est que nous allons parcourir 60 vidéos différentes avec 60 effets différents dans huit catégories différentes. Nous allons donc passer par des icônes, des fonds, destextes de formulaire, textes de formulaire, curseurs d' images, graphiques, effets et d'autres effets que vous pouvez facilement appliquer à notre travail de conception. Maintenant à quoi ça ressemble, laissez-moi vous montrer rapidement. Donc, nous allons passer par les icônes et vous allez obtenir un fichier séparé d'oeufs pour chacune de ces huit sections différentes. Donc, comme vous pouvez le voir ici, nous avons différentes icônes des plus simples aux plus complexes. Ensuite, nous allons aller et passer à différents boutons, donc nous allons passer par les boutons de base ainsi que cependant les boutons et ainsi de suite. Ensuite, nous allons passer par les formulaires. Donc, à partir des formulaires d'abonnement de base, deux formulaires d'email plus complexes et ainsi de suite allaient passer par quelques effets de texte des contre-effets de base à certains effets différents. superpositions et ainsi de suite allaient passer par les curseurs d'image des curseurs de base jusqu'aux plus complexes. Avec plus d'images à l'intérieur, nous allons passer par différents graphiques et comment ils s'animent ainsi qu'avec des effets différents. Donc, à partir des chargeurs, les effets de retournement des orteils tout le long des effets de parallaxe des orteils. Et enfin, on va passer par une autre chanson. Super, sûr, différents curseurs différents que les barres, l'image, l'image, menus pop à l'envers et quelqu'un. Et enfin, nous allons passer à travers notre projet où vous allez aux pieds, recevoir un mémoire de design. Nous allons passer par des projets. Exploration ainsi qu'avec certains dessins de cadres métalliques allaient passer par notre guide de style comment vous pouvez créer pourquoi c'est important et ce qui est contenu à l'intérieur des guides de style . Ensuite, nous allons concevoir des cadres métalliques en utilisant nos cadres de papier droit comme référence. Ensuite, nous allons passer à la conception à différentes images, ombres, couleurs différentes pour rendre le design pop. Comme les clients aiment à le dire, nous allons concevoir différents menus, écrans de profil et ainsi de suite. Et enfin, nous allons passer au prototype où nous allons orteil appliquer quelques animations sur ces différents designs allaient créer plusieurs états sur les mêmes écrans et ajouter différents effets qui vont faire de notre application conçu vraiment intéressant et vraiment moderne look ainsi que faire le client facilement comprendre notre design, Notre intention derrière tout ce qui est conçu dans le processus de conception ainsi que les développeurs qui vont orteils facilement comprendre ce qui ont -ils besoin d'appliquer plus tard dans le froid ? Et comment devraient-ils utiliser ces effets et comment devraient-ils utiliser une structure de fichier de dettes que vous avez créée à des fins de développement ? Donc, je suis vraiment excité de partager toutes ces informations avec vous. J' espère vraiment vous voir à l'intérieur du cours, et j'espère vraiment que vous allez appliquer tout ce que vous avez appris dans ce cours votre propre avenir. Toi, j'ai conçu le travail, donc je te verrai en classe 3. Pourquoi nous animons: raison principale étaient animés. Êtes-vous sage de faire connaître le point à notre spectateur afin qu'il puisse mieux comprendre notre concept lorsque vous travaillez avec le client simplement parce que vous l'avez dans la tête ? façon dont certains éléments se déplacent et interagissent les uns avec les autres ne signifie pas que le client comprendra cette conception de la même façon que vous le faites. Il est plus facile pour eux de comprendre ce que les animations CD plutôt que simplement l'image statique, parce que c'est à quoi l'application finira par ressembler. En outre, lorsque vous envoyez les fichiers aux développeurs, il est plus facile pour eux de comprendre ce qu'ils ont à animer citation quand ils ont les animations de référence, plutôt que de penser quelle animation irait bien sur laquelle et quelle interaction est la meilleure pour quel élément. Tout cela accélère le processus de conception dans Adobe X'd parce qu'à l'intérieur d'un haut, vous êtes capable de concevoir le partage de prototype, obtenir des commentaires et effacer rapidement sans avoir besoin de fusionner APS externe ou un autre logiciel 4. Différences d'animations d'interface utilisateur: plupart du temps, lorsque vous animez votre vous y vous rencontrerez différentes animations. Le 1er 1 est pour les grands éléments. Donc, pour les curseurs, par exemple, et si nous regardons cet exemple, vous pouvez voir à quoi cela ressemble. Si je clique ici quand il se charge, vous verrez ces exemples de ce beau grand curseur. Vous pouvez voir tous ces différents éléments et quelques éléments plus petits. Ainsi, par exemple, cette barre d'étape, c'est ce qu'on appelle micro interaction. Donc, vous vous concentrez juste sur une petite partie de l'ensemble de l'orteil U Y animé et de montrer aux porteurs potentiels d' orteils comment il va ressembler et les orteils montrent qu'il décline. Ainsi, ils peuvent mieux comprendre tous ces différents éléments. Parce que si vous venez de leur montrer cela comme une image esthétique, ils ne le sauront pas. Ils pourraient vous poser des questions. Par exemple, est-ce que je peux changer lorsque vous appuyez dessus ? À quoi cela ressemblera lorsque vous cliquez ici, que se passe-t-il ensuite ? Donc, par exemple, vous devrez alors créer je ne sais pas pour celui-ci peut-être 56 10 images différentes juste pour montrer cet effet. Il est donc beaucoup plus facile de créer une animation dès le début, puis d'envoyer cette animation à vos clients. Et ils peuvent ensuite itérer sur cette animation et vous dire, par exemple, que je n'aime pas comment cela tourne. Peut-être qu'on peut ajouter une ombre portée une fois qu'il est cliqué. Peut-être que vous pouvez changer un peu l'espacement et juste vous donner une bonne rétroaction. Ce sera beaucoup mieux pour vous afin que vous puissiez leur livrer un meilleur design. Remotez-les pour qu'ils puissent mieux comprendre leur concept, leurs dessins et leurs idées, et enfin, aux développeurs pour tout arrondir parce qu'ils seront en mesure de comprendre comment tous ces différents éléments vont interagir les uns avec les autres. Et que doivent-ils mettre à l'intérieur de leur manteau pour imiter cela afin qu'ils sachent quelle technologie ils doivent utiliser. Donc, par exemple, devrait utiliser JavaScript devrait utiliser une autre technologie juste pour qu'ils puissent obtenir animation à la recherche correcte, et ils peuvent mieux dépeindre ce concept hors du vôtre à l'intérieur du code. C' est pourquoi nous animons R u Y. Et c'est pourquoi il y a quelques différents hors de ces animations vous. Mais la plupart du temps. Vous travaillerez avec ces plus petites interactions, et vous montrerez ensuite comment les différents écrans sont en train de transiger les uns entre les autres. Peu importe si c'est une application mobile. Si c'est un site Web, si c'est, ah, sorte de conception de tableau de bord ou quelque chose comme ça, vous travaillerez toujours sur certaines de ces animations plus petites et ces micro-interactions. Donc, vous allez montrer cette coche et cela 'll, odeurs et bouteilles, qui sont en train de changer de couleur, ces éléments voler dans toutes les décisions et ainsi de suite. Donc c'est ce que vous ferez pour la majorité hors du temps. Et c'est pourquoi les oeufs est génial, parce que dans quelques-uns de nos ports, vous pouvez montrer tous ces concepts bien, et ensuite vous pouvez les envoyer aux développeurs, et ils peuvent voir à l'intérieur des conceptions en arrière, ce qui nous allons en parler un peu plus tard. Avec votre que doivent-ils utiliser ? Ils peuvent exporter CSS tout de suite. Ils ont également quelques plug-ins, et ils peuvent exporter du HTML si c'est quelque chose dont ils ont besoin et ils peuvent commencer tout de suite avec leur travail. Et c'est la chose la plus importante ici. Vous gagnez du temps pour vous-même parce que vous devrez faire, Ah, moins d'interactions comme ça. Vous gagnez du temps pour les clients, car ils comprendront plus rapidement votre concept que vous essayez de diffuser. Et c'est plus facile pour les développeurs aussi bien parce qu'ils savent à la fois ce qu'ils devraient essayer orteil atteindre à l'intérieur de la citation. Quelles technologies devraient-elles utiliser et comment devraient-elles mettre en œuvre cette conception dans le froid  ? Parce que maintenant ils savent comment tous ces différents éléments vont orteils interagissent les uns avec autres. 5. Les fonctionnalités de prototypage d'Adobe Xd, de prototypage: dans cette vidéo, je voulais couvrir les oeufs les caractéristiques de prototypage, mais pas dans les détails. C' est pour ça que nous avons le reste du cours. Je voulais juste vous montrer à quoi ressemble tout, où tout se trouve et ce que vous pouvez attendre de ces fonctionnalités de prototypage. Donc, ici en haut, nous avons conçu dans cette partie que vous concevez votre ey. Vous concevez tous les éléments de vos écrans, en mettant des images, des ombres et ainsi de suite. Et quand vous avez terminé avec ce design et que vous voulez y ajouter un peu de mouvement et quelques animations, alors vous cliquez sur cet onglet de prototypage et juste ici à droite, vous avez quelques options. Mais d'abord, vous voulez sélectionner ce que les utilisateurs vont cliquer, ce qui se passera et après chaque fois et ainsi de suite. Donc, si je clique sur celui-ci, vous avez cette poignée bleue et quand vous déplacez cette poignée bleue d'écran à écran, cela va apparaître et l'interaction va se produire. Donc, ici, vous pouvez sélectionner vos déclencheurs. Donc, que sera l'utilisateur en raison de déclenchement et ce comportement ensuite vous avez l'action. Alors quelle action va se produire une fois que ce déclencheur a été activé. Vous avez conservé la position de défilement. Si vous souhaitez conserver la position de défilement de l'écran à l'écran suivant, vous avez la destination. Imaginez que vous avez 200 ou 300 de ces différents ports. Ensuite, vous pouvez sélectionner ici facilement à partir de laquelle sont aussi, cette interaction va se produire. Nous avons l'animation ou juste ici, et vous pouvez choisir parmi la variété des différentes animations que nous avons facilité. Alors, comment l'effet va se produire entre ces deux ports va être le pied. La facilité va se produire immédiatement. Est-ce que les orteils s'estompent ou s'estompent et quelque chose comme ça. Et enfin, nous avons la durée. Alors, combien de temps cet effet va durer ? Et enfin, nous avons une position fixe lors du défilement. Nous avons donc des positions fixes, rampant par exemple pour certains éléments pour les en-têtes, pour les menus de bouteilles, quelque chose comme ça. Imaginez juste que vous avez le site Web juste ici, et vous avez le menu principal en haut, qui va rester fixe. Ensuite, vous cliquez ici. Et cet élément va rester fixe pendant que vous faites défiler le reste de votre U y. Alors passons rapidement à travers certains d'entre eux. On a un robinet. Donc, quand l'utilisateur tape, soit avec sa bouche, soit avec son doigt, c'est comme ça, et c'est là que l'interaction commence. Nous avons la traînée, donc fondamentalement la même chose, mais vous devez cliquer sur maintenir et puis faire glisser soit avec votre bouche ou votre doigt. Nous avons les clés et le jeu mauvais, qui est fondamentalement, si vous concevez et prototypage pour les jeux, vous pouvez inclure contrôleur X box, par exemple, ou contrôleur PS, puis en utilisant ces vous pouvez choisir quelles interactions se produisent uniquement les commandes. Vous pouvez donc inclure ces commandes en utilisant ces touches de portail et les pads de jeu. Et enfin, nous avons la voix. Ainsi, c'est, exemple, lorsque vous êtes par capture pour un Alexa musulman, ou pour Google ou quelque chose comme ça, et que vous utilisez votre voix pour émettre différentes commandes pour certaines interactions. orteils arrivent. Ensuite, nous avons des actions, donc nous avons une transition, juste une transition régulière. Nous avons l'animation automatique, qui est des oeufs, ces fonctionnalités étonnantes, et ils travaillaient beaucoup sur cette fonctionnalité, et ils utilisent l'intelligence artificielle et l'apprentissage automatique pour créer ces interactions parce qu'ils essaient de comprendre comment certains éléments vont interagir les uns avec autres et principal. Une caractéristique clé importante pour cette fonction d'animation automatique est de vous faire nommer correctement vos couches et d'avoir les mêmes couches essentiellement dans nos deux ports. C' est alors que Exit essaie de regarder la différence entre chacun de nos ports et quelles couches ont changé. Ils ont changé de taille ? Ont-ils changé de couleur dans un pâteux et ainsi de suite ? Et il va essayer orteil aussi animer. Fondamentalement, ces changements entre nos ports. Nous avons la superposition. Tout un est principalement utilisé en vous. J' ai surtout dans Adobe X'd pour les menus. Alors imaginez, avez ce menu latéral ou menu supérieur ou quelque chose comme ça, ou vous voulez superposer un orteil émergent ou de quelque chose que vous pouvez utiliser cette fonctionnalité et juste inclus, et il va superposer sur le dessus. Ce sont des ports. Nous avons la lecture de la parole. Ainsi, vous pouvez, par exemple, lorsque vous utilisez la voix d'ici, vous avez cette lecture vocale et elle lisera cette parole. Eso, par exemple. Vous pouvez lui poser une question. Vous pouvez lui donner une réponse, et quand vous le posez, c'est une question. Cela vous donnera cette réponse. Et c'est utile. Van que vous concevez comme un ensemble pour Amazon Alexa, par exemple. Et tu as dit Ok, Alexa, quel est le temps aujourd'hui ? Et vous lui donnez cette lecture vocale et il vous montrera et vous dira la lecture de la parole de dette . Et enfin, nous avons l'aéroport précédent, qui va juste passer à la précédente destination de notre port. Vous pouvez choisir quelle destination et va aller orteil. Et comme je l'ai dit, imaginez, avoir 100 ou 200 écrans. Ensuite, il sera transition orteil ces destinations que vous choisissez ici, nous avons des animations. Donc, nous avons juste quelques animations de base Nous avons dissous, ce qui est fondamentalement une décoloration ou fondu out. Nous avons glisser à gauche, à droite, droite, glisser vers le haut et vers le bas. Nous avons poussé, gauche, droite, droite, vers le haut et poussé vers le bas et nous n'en avons pas. Donc, vous pouvez même choisir de ne pas si vous ne voulez pas de transitions entre ces écrans et il va juste passer immédiatement d'un écran aux prochaines facilités que nous avons est dans l'assouplissement et est hors snap, remonter et rebondir. Et tout cela est un peu différent. Donc, il est hors volonté, évidemment est hors de l'animation est dans volonté faire en face. Facile. Maintenant, ça va faire. Boat Snap fera ce qu'il dit. Vind up va fondamentalement en être quelques-uns. Une sorte de combinaison entre Snap et le rebond et les limites est fondamentalement à peu près si. Il rebondit en place lorsque vous cliquez sur que finalement nous avons la durée, ce qui est vraiment important, et vous pouvez changer ces valeurs. Donc, par exemple, je peux taper trois percenter, et ça va durer trois secondes. Et c'est là que vous pouvez vraiment ajuster à quoi ressemblent tous ces différents éléments, Évidemment, si vous voulez la transition, Toby plus court, vous allez choisir forte le temps à partir d'ici. Si vous vouliez être plus long et plus long d'une seconde, vous pouvez choisir par exemple quatre. Et ça durera quatre secondes. Enfin, quand vous voulez orteil ajouté quelque chose, n'importe qui pour la première. Vous allez utiliser cet aperçu du Bureau et cette fenêtre va apparaître, et vous pouvez clairement voir à quoi ressembleront vos transitions à l'intérieur souvent de cet écran. Donc, en un clic juste ici, vous pouvez changer. Vous pouvez voir changé à ce port d'art. Mais quand je clique ici et ramène cette flèche en arrière, vous pouvez voir qu'elle conserve tout de même dans les directions dans tous les mêmes éléments que nous avons choisi d' aller d'ici à. Voici maintenant juste utiliser les mêmes interactions pour revenir à cet écran précédent. Et c'est pourquoi Adobe est génial car il se souvient de tous les différents éléments que vous avez choisis ici. Et c'est particulièrement important si vous avez, par exemple, 100 différents nos planches et que vous avez peu d'interactions, sorte que vous pouvez juste imaginer l'utilisateur peut cliquer sur cette image. Ils peuvent cliquer sur ce titre. Ils peuvent cliquer sur ce texte. Peut-être qu'il y a un fond juste ici. Peut-être qu'il y a un menu que j'appelle donc vous ne pouvez pas vous souvenir de toutes ces différentes transitions. Vous avez inclus 50 écrans dans, et vous devrez ensuite revenir en arrière, les copier et les coller. Mais si vous utilisez les mêmes interactions, vous pouvez simplement faire glisser cette petite poignée bleue vers l'écran suivant, et il conservera les mêmes interactions que vous avez choisies pour celle-ci et avec chaque mise à jour et ils essaient de publier chaque mois mises à jour, et jusqu'à présent ils ont fait un travail fantastique avec ces mises à jour. Avec chaque mise à jour, Ecstasy devient de plus en plus intelligente et intelligente. Donc, dans quelques années, ce sera tout simplement incroyable ce qu'il peut faire et ce qu'il peut apporter à la table quand il s'agit de vous. J' ai conçu une nouvelle animation, donc je l'aime vraiment parce qu'à l'intérieur de celui-ci, vous pouvez faire le partage de prototype de conception . Vous pouvez collaborer avec votre client et vos développeurs. Vous pouvez envoyer des conceptions, packs que vous pouvez envoyer des prototypes, recevoir des commentaires, tout empaqueter, exporter tout bien enregistrer tout est des vidéos. Donc ils ont vraiment pensé à tout. Et ils ont vraiment créé ce joli petit système égal pour nous. orteils apprécient vraiment notre processus de conception parce qu'il le rend beaucoup plus facile et, comme on dit, conçu à la vitesse de la pensée. 6. Icône 1: dans cette vidéo, nous allons créer cette coche, que vous pouvez utiliser sur les boutons de confirmation APS de votre site Web pour informer vos utilisateurs qu'ils ont terminé avec succès la tâche que vous leur demandez. Alors commençons. Donc on va commencer par un art quatre ou 500 par 500. Et si vous ne savez pas comment le créer, vous pouvez rentrer chez vous. Et ici, sur la taille personnalisée, vous pouvez entrer 500 avec 500 appuyez, entrer ou revenir, et vous aurez à entendre que nous allons utiliser le mental. Alors cliquez dessus. Cliquez ici, puis ici il s'est échappé pour échapper à cette élection et cliquez ici sur le tour gardé parce que nous voulons que nos bords soient autour, augmenter la taille de la course à 10 percenter et puis je vais simplement planer dessus ici et cliquez quelque part autour ici orteil Ajouter un point de plus et je vais orteil klik Quelque part en dehors sélectionné. Appuyez sur ce milieu, celui du milieu pour le placer en bas au milieu, cliquez et double-cliquez pour que vous puissiez aérer entrer dans ce mode d'édition. Cliquez sur celui-ci et déplacez-le simplement ici. Ensuite, cliquez sur celui-ci et déplacez-le vers certains autour d'ici afin que vous puissiez créer cette coche Marquer les endroits sélectionnés au milieu comme ça. Et maintenant ce que vous allez faire, c'est qu'on va faire des copies. Donc, zoomer un peu Hit contrôle D D et en D une fois de plus. Maintenant, nous allons utiliser ces copies orteil animer tout. Donc, nous allons commencer à partir du point sur celui-ci juste ici. Je vais doubler, cliquer, cliquer sur celui-ci, faire glisser tout le chemin jusqu'à ce qu'ils se rencontrent dans le centre juste ici, puis cliquer sur celui-ci et le déplacer jusqu'à ce que vous obtenez ce cercle comme ça et je vais baisser leur date de base jusqu'à zéro. Maintenant, sur ce deuxième état, nous voulons l'étendre jusqu'ici. Mais ne pas entendre. Alors DoubleClick une fois de plus, puis déplacez simplement cet orteil ici jusqu'à ce que vous obteniez ce cercle comme ça. Et sur le 3ème 1, ça va de l'étendue des orteils. Et enfin, sur le dernier, je vais cliquer dessus et appuyer sur 02 fois ou vous pouvez simplement utiliser le curseur. Il sera sur l'un pâté jusqu'à zéro. Et maintenant, animons tout. Alors cliquez ici, utilisez le prototype, puis faites simplement glisser cet orteil flèche ici. Le temps utilisé s'anime aussi, et nous allons utiliser est en dehors sur celui-ci. Cliquez sur celui-ci dragons, et au lieu de la facilité dans la sortie, nous allons utiliser Snap parce que nous voulions passer de la disposition à la disposition, puis cliquez ici, puis faites glisser cette flèche vers ce dernier. Et au lieu de snap, allons utiliser est sorti 0.3 secondes parce que nous voulions fondre à zéro. Et enfin, vous pouvez faire glisser cette ancienne façon ici et utiliser les mêmes paramètres maintenant pour l'afficher en prévisualiser. Cliquez sur ce premier jeu de 1 clic et cette belle coche est affichée, donc il est vraiment facile de le créer. Comme vous pouvez le voir, ce n'est qu'une seule ligne, mais jouer avec ces points et repositionner autour pour obtenir cette forme, puis simplement animée. Et c'est le résultat que vous allez obtenir, donc je vous verrai dans la prochaine vidéo 7. Icône 2: dans cette vidéo, je vais vous montrer comment vous pouvez animer cette icône du cœur. Donc, un nouveau robinet sur elle va orteil apparaissent comme vous avez aimé quelque chose. Donc, cela s'inspire d'Instagram, évidemment. Donc, lorsque vous cliquez sur ces rayons de lumière, sautez de ce cœur pour indiquer qu'il est léger. Et je vais aussi vous montrer dans cette vidéo comment vous pouvez changer la couleur. Donc c'est génial. Mais quand vous cliquez dessus, il deviendra rouge. Alors commençons. Donc, j'ai cette icône de cœur, je vais cliquer sur le Notre port une fois de plus est 500 par 500. Je vais cliquer ici sur le Grand et je vais choisir carré. Si vous avez une mise en page comme ça, il suffit de cliquer ici et de le changer en carré. Ce que je vais faire, c'est utiliser le crayon. Je vais zoomer un peu, cliquez ici et peut-être certains ici hit escape, cliquez ici pour arrondir le bouchon et peut-être augmenter en raison de 10 percenter et repositionnons un peu mieux, donc je vais pour l'avoir Peut-être que c'est bien. Donc nous allons avoir ces deux carrés vers le haut et peut-être avoir un carré vide, comme peut-être comme ça parce que le cœur occupe juste ici. Appuyez sur contrôler le clic dupliqué ici pour le faire pivoter et le positionner ici. Une fois de plus, nous voulons en avoir un. Eh bien, parce que l'icône est un peu plus blanche. Ça va être quelque part par ici. Non, sélectionnez. Les deux avaient un acte de contrôle dupliqué une fois de plus, puis cliquez ici pour les retourner verticalement. Maintenez votre touche Maj et Arrow le déplaçait vers le bas. Et avec votre touche Maj sélectionnée jusqu'à ce qu'ils s'accrochent comme ça, vous saurez que vous avez exactement le même espacement entre les anciens. Donc je vais frapper le contrôle D et contrôler la encore une fois. Et ce que nous allons faire maintenant, c'est que nous allons aller orteils, sélectionnez-les tous et cliquez un par un pour enlever et ces carrés parce que nous n'en avons plus besoin . Maintenant, sur ce 1er 1, nous allons faire double clic sur cette ligne, puis cliquez sur ce point et déplacez-le jusqu'à ce qu'il se rencontre ici. Cliquez ici, Faites de même. Alors cliquez ici et déplacez vers le haut vers le cœur. Comme ça. Et je vais cliquer sur le 1er quart de travail. Cliquez sur le dernier. Ils cliqueront sur mon zéro, ou vous pouvez abaisser votre Bay City juste ici. Maintenant, ce que nous allons faire dans ce 2ème 1 est de cliquer sur le cœur, maintenir la touche Maj, Ault et Left Click pour que vous puissiez l'agrandir. Donc quelque part par ici et puis enfin sur notre 3ème 1 allaient orteils. Faites-leur l'étendue orteil ici. Donc, je vais cliquer ici et faire fondamentalement le contraire. Donc normal avec dans cette direction jusqu'à ce qu'ils se rencontrent dans le cercle comme ça et finalement faire la même chose pour ce dernier. Comme ça. Ensuite, cliquez sur le premier décalage de trou, cliquez sur le dernier et abaissé votre base vers le bas à zéro. Maintenant, nous devons l'animer si vite. 1ère 1 et je vais cliquer sur mon cœur parce que nous voulons que les gens tapent sur ce cœur. Changez-le en prototype à partir de la conception, faites-le glisser jusqu'ici. Nous allons choisir Step Auto. Animate est dans 0.2 secondes, et puis nous allons cliquer sur celui-ci. Faites glisser l'orteil ici, et nous voulons utiliser le temps au lieu de taper. Donc, pour ce 1er 1, vous avez utilisé un robinet. Mais pour ce 2ème 1, nous allons utiliser le temps ou l'animation des orteils. Et peut-être qu'il est sorti avec un meilleur choix. Voyons donc ce que nous avons trouvé. Vous pouvez cliquer sur ce 1er 1 clic de lecture, et lorsque vous appuyez sur, vous pouvez voir à quoi il ressemble. Donc, si vous pensez que c'est trop, vous pouvez bien sûr faire la même chose. Mais nous allons sur l'esprit hors de ces lignes pour que vous puissiez le sélectionner d'ici et simplement partout sur eux jusqu'à ici. Donc peut-être cinq pour cent et faire la même chose pour celui-ci, sorte que vous pouvez tous les sélectionner. Cliquez sur cinq ici et vous pouvez voir que nous les abaissons et enfin faire la même chose pour le dernier . Alors sélectionnez-les tous Q 5, et ce que nous allons faire dans ce dernier exemple, c'est que nous voulons choisir le cœur si final notre port. Nous voulons le faire glisser pour commencer Choisir le temps est sorti 0.2 secondes parce que vous voulez qu'il vers ce 1er 1 alors cliquez quand celui-ci joue un clic et quand vous appuyez dessus C'est à quoi il ressemble maintenant Et est-ce que ça tourne à la 1ère 1 Maintenant enfin, permettez -moi de vous montrer comment vous pouvez changer les couleurs. Donc, quand les gens cliquent sur le cœur, il deviendra un rouge. Et vous pouvez le faire simplement en revenant à la zone. Choisir votre cœur, cliquez ici. Choisissez la bonne couleur, ce que nous voulons. Peut-être que celui-ci Choisissez ce dernier clic ici et puis juste ici orteil utiliser la même couleur saut retour au prototype et quand vous cliquez, il deviendra rouge Et parce qu'il tourne à ce 1er 1 Comme vous pouvez le voir, il est allé de rouge retour à grande. Et nous voulons aussi changer la couleur du rayon. Alors sélectionnons-les ici et cliquez ici pour appeler un sélecteur et faire la même chose pour tous . Donc, comme ça et vous pouvez savoir faire le tour de retour au prototype et voir à quoi il ressemble. Donc, comme vous pouvez le voir, il est maintenant rouge aussi. Et il passe du grand au rouge et de retour au gris à nouveau. Alors c'est tout pour celle-là. Et je te verrai dans la prochaine vidéo 8. Icône 3: dans cette vidéo, nous allons créer cette icône de point pulsante, qui peut être utilisée pour,par exemple, par exemple, lorsque quelque chose est en streaming ou quelqu'un est allé en direct et que vous pouvez utiliser cette icône correspondant à la couleur. Ainsi, par exemple, il peut être lu pour indiquer que la personne est la vie ou que le streaming est en direct. C' est donc ce que vous allez créer dans cette vidéo. Alors commençons. Donc j'utilise notre port ou 500 par 500. Comme sur toutes les autres vidéos. Je vais choisir le cercle. sec, Grand cerclesec, agonisé peut-être utilisé 100 par 100. Appuyez sur Entrée positionnée au milieu et au milieu. Cliquez ici, Contrôle. Voir pour copier cette couleur. Cliquez ici. Contrôle V appuyez sur Entrée, et je vais enlever la bordure pour ce cercle. Ensuite, je vais le sélectionner. Appuyez sur le contrôle D et je vais en faire une copie. Je vais aux orteils. Agrandissez-le un peu. Inclure la bordure. Retirez le film et pour la bordure. Peut-être que je peux inclure 60 de l'épaisseur et ensuite simplement le déplacer en dessous de notre premier cercle. Je vais frapper un vieux et un clic gauche pour que je puisse le positionner au centre et sur la taille, comme ça et parce qu'il est à l'arrière, ça n'a vraiment pas d'importance parce qu'il est caché par ce premier cercle. Je vais sélectionner l'aéroport, frapper le contrôle de à dupliqué, puis sélectionnez Eclipse deux et appuyez sur Shift vieux et gauche clic orteil Agrandir si certains autour d'ici et réduit la taille de la frontière orteil un appuyez sur Entrée. Et comme vous pouvez le voir, c'est à ça que ça ressemble. Et je vais aussi abaisser leur collé à zéro, et c'est fondamentalement tout. Maintenant, c'est animé. Cliquez sur ce coup prototype drag, et nous allons utiliser le temps. La transition va être l'animation automatique est en dehors, et la durée va être d'une seconde. Et utilisons le délai. Temps libre d'une seconde si bien, parce que ça va nous donner un peu de temps entre ces deux-là. Maintenant, nous allons cliquer sur le 2e 1 glisser tout le chemin du retour, et nous allons utiliser le temps une fois de plus. Mais en ce moment, nous ne supprimons pas ce délai et nous avons un zéro. Mais vous devez taper 0.0. Appuyez sur Entrée pour qu'il sache que vous voulez être nul. Cliquez ici, faites de même. Donc 0.0 appuyez sur Entrée, donc ça va être zéro. Mais au lieu de l'action ou d'animer, vous allez choisir la transition et il va être dissous comme par clic habituel ici , les enfants jouent. Et comme vous pouvez le voir, nous avons maintenant cette animation agréable et palpitante, et vous allez l'utiliser comme un ensemble de streaming pour quand quelqu'un va en direct. Ou si vous voulez attirer l'attention sur vos utilisateurs, orteil une chose particulière dans votre vous je travaille. Si vous pensez que ce cercle de fond sort un peu blanc, vous pouvez le réduire en réduisant la taille ici dans cette seconde notre port. Mais c'est essentiellement à vous aussi de décider. Vous pouvez changer les couleurs, donc si vous voulez être lu, vous pouvez changer la couleur de ce cercle ainsi que le cercle d'arrière-plan. Faites la même chose dans celui-ci, et c'est essentiellement tout pour cette vidéo. Je te verrai dans le prochain 9. Icône 4: dans cette vidéo, nous allons créer une icône de menu hamburger simple, donc quand vous cliquez dessus, il deviendra une ligne et puis changera orteil X pour que vous puissiez le fermer. Donc, lorsque vous cliquez sur X, il va revenir en arrière, orteil une ligne, puis changer au menu une fois de plus. Alors on y va. Une fois de plus, vous pouvez cliquer dessus. Il devient X clic sur le X, et il devient une icône de menu une fois de plus. Alors commençons. Commençons par créer notre ligne. Je vais utiliser le mental une fois de plus. Cliquez ici. Tout le quart de travail cliquez ici. Il s'est échappé pour s'en sortir. Cliquez ici en tapant 20. Donc c'est notre foule en colère épaisseur ici pour que nous avons autour de Gap. Positionnez-le au milieu. Donc sélectionné cliquez ici, puis juste ici et nous allons faire des doublons de celui-ci. Donc ça va être numéro deux Hit control D Hold shift une flèche vers le haut. 123456 Quelque chose comme ça. Puis cliquez sur 2ème 1 une fois de plus, appuyez sur Control D et ça va être notre 3ème 1 Et ça va être notre 1ère 1 Donc, double-cliquez sur le nom du centre de presse. Et sur le 3ème 1 maintenez le décalage et la flèche vers le bas. 123456 pour le positionner, Toby. Fondamentalement la même chose que le top un quart entier. Sélectionnez-les tous. Appuyez sur le contrôle G pour les regrouper ternes. Cliquez ici, en tapant le menu présentateur. Et puis cliquez ici, puis juste ici pour les positionner au milieu. Cliquez ici. Appuyez sur le contrôle de pour dupliquer l'ensemble de notre port. Et maintenant, ce que vous allez faire est que nous allons les déplacer vers le centre afin que vous puissiez appuyer contrôle et cliquer sur ce 1er 1 pour cliquer dessus. Maintenez votre touche Maj jusqu'à ce qu'elle s'enclenche comme ça. Faites de même pour ce 3ème 1 Maintenez votre touche Maj et avec votre souris, déplacez-la ici. Et puis enfin, ce que nous devons faire est de cliquer ici, Hit control D et cliquer ici sur ce 2ème 1 nous allons réduire Dupay City 20 Et sur ce 1er 1 nous allons faire pivoter pour que vous puissiez cliquer ici sur ces degrés. Tapez 1 35 comme ça, cliquez sur un perturbé et cliquez ici en tapant 45 comme ça et maintenant nous avons notre X. Donc ce que nous devons faire maintenant est de dupliquer ce contrôle D et enfin dupliquer celui-ci de contrôle parce que nous allons aller de la ligne de remorquage du menu , Toe X, retour à la ligne, puis retour à celle-ci une fois de plus. Alors commençons à les animer. Je vais frapper le contrôle zéro. Pour s'enclencher en place comme cela a changé le prototype cliquez sur ce menu, et c'est pourquoi nous l'avons regroupé afin que nous puissions cliquer dessus, fait glisser cette poignée pour entendre que vous allez à vous étape également animer. Et au lieu de claquer, nous allons utiliser est en dehors et peut-être 0.4 seconde. Maintenant cliquez sur ce que notre port a traîné ici, et nous allons utiliser le temps ou pour animer. Et au lieu de est en dehors. Nous allons utiliser Snap maintenant à nouveau. Nous allons utiliser ce même que nous allons utiliser pas ou animer est en dehors. Donc, cliquez sur le X glisser it toe ici afin de taper ou pour animer au lieu de vivanter. Quand utiliser est en dehors et utiliser le point zéro pour partout juste pour que nous puissions garder les choses simples et enfin faire la même chose pour ici. Cliquez ici pour voir ce que nous avons fait. Donc, nous avons fait le temps ou pour animer et accrocher. Cliquez ici pour sélectionner celui-ci. Faites glisser pour que nous ayons le temps ou pour animer et nous avons snap comme ainsi Et enfin, pour revenir à ici simplement traîné la poignée à ce 1er 1 Nous allons utiliser le temps au lieu de snap. Nous allons utiliser aucun parce que nous allons de cette icône à la même icône . Et on va baisser ce chiffre à 0,2. Ils attendent donc. Le temps est plus bas. Alors maintenant, nous allons en prévisualiser. Je vais cliquer ici, et vous pouvez taper sur votre icône et vous pouvez voir à quoi il ressemble. Cliquez ici pour le modifier et cliquez ici pour faire de même. Fondamentalement, encore une fois. Maintenant, une chose que nous avons ratée est de revenir au design. On va aller orteil Klik juste ici. Sélectionnez le numéro deux et partout dans l'obésité jusqu'à zéro et à la même, Celui-ci . Donc, sur le nombre pour vous abaisser fondamentalement vers le bas, et maintenant il est aperçu comme ainsi et maintenant vous ne pouvez pas le voir quand il disparaît, comme vous pouvez le voir, Donc c'est fondamentalement tout. Nous avons fini de créer notre icône de menu et vous pouvez voir que c'est vraiment facile et vraiment simple chose à faire, et je vous verrai dans la prochaine vidéo. 10. Icône 5: dans cette vidéo. Nous voulons créer cette icône de téléchargement afin que vous puissiez voir quand vous cliquez dessus. Cette flèche va descendre les orteils. Indiquez que le téléchargement a commencé et que vous pouvez l'incorporer dans vos boutons ou sur votre site Web ou sur votre application. Ainsi, lorsque les utilisateurs sont en train de télécharger, ils peuvent être sûrs que le NAL n'a commencé que. Vous pouvez également changer la couleur. Donc, quand ils cliquent dessus et que le téléchargement commence, cette icône suivante peut changer la couleur ainsi que cette ligne de fond. Alors commençons. Donc une fois de plus mon port à 500 par 500. Et j'ai aussi cette icône de flèche et créons la ligne en bas. Saw Ali était le clic mental quelque part ici et maintenez le décalage, Cliquez quelque part ici, frapper évasion une fois de plus frappé bouchon rond et frappé 15 comme, donc maintenant, nous allons zoomer un peu plus près. Sélectionnez les deux comme si frappé dans le cercle du milieu, positionnez-les au milieu et positionnez la flèche juste autour ici jusqu'à ce qu'elle rencontre la ligne supérieure de cette ligne de fond, fondamentalement comme ainsi et ce que nous allons faire maintenant est traîné son vers le bas. Appelez la ligne comme ça et nous allons les positionner alors appuyez sur le contrôle G pour les grouper, positionnez-les au centre comme si droit Cliquez sur le groupe et vous allez dupliquer notre flèche. Alors appuyez sur le contrôle de en position. C' est quelque part par ici. C' est bon. Maintenant, groupez les flèches frapper le contrôle G petit clic ici. Tapez des flèches de haricot comme ça et nous allons utiliser l'outil rectangle. Et vous allez dessiner un rectangle comme celui-ci et ruiner pour couvrir notre flèche inférieure et aller jusqu'au bord. Donc, vous le consommez beaucoup plus près pour le couvrir bien. Donc, comme ça et est allé enlever la frontière et vous allez appeler cette mosquée pour voir comment on a fait. Je pense que nous devons le déplacer un peu vers le haut pour que vous puissiez appuyer sur votre, euh, euh, touche fléchée supérieure lorsque votre clavier et que vous puissiez bouger dans cette brouette inférieure juste un pixel en haut comme ça. Et maintenant ce que nous allons faire, c'est que nous allons sélectionner la mosquée, maintenir le sélecteur de décalage, maintenir le sélecteur de décalage dossier des flèches et le clic droit et la mosquée juive avec la forme. Ou vous pouvez utiliser le contrôle de décalage em ou la glande de décalage. Et si vous êtes sur un Mac pour le masquer et que vous avez cette forme. Maintenant, cliquez ici, appuyez sur, contrôlé le pour le dupliquer. Et maintenant ce que nous devons faire est de sauter masque d'initié, cliquez sur nos flèches. Maintenez la touche Maj enfoncée, maintenez votre souris gauche, cliquez et positionnez ce groupe en place. Et vous pouvez aussi utiliser vos flèches pour que nous puissions le voir. Et quand vous cliquez dehors, c'est ce que vous allez obtenir. Donc c'est fondamentalement tout pour la partie design. Maintenant prototype et cliquez ici. Cliquez sur le prototype et ce que nous allons faire est que nous allons essentiellement taper ici pour que vous puissiez faire glisser la poignée hors. Le tout s'ennuie. Nous sommes donc allés choisir un robinet ou animer. assouplissement va être facile dans la sortie et la durée d'une seconde et maintenant sur le 2ème 1 glisser il orteil ici au lieu de taper quand utiliser le temps. Note facile et ici, nous allons taper dans 0.0 secondes et il va être est dans la même chose. Et assurez-vous que vous avez le délai hors zéro, et vous devriez l'avoir par défaut. Cliquez ici, Hit, joue. Et quand vous cliquez quelque part ici, c'est ce qui se passe. Et puis il va passer de ce 2ème 1 retour au 1er 1 Donc, quand vous cliquez dessus, il va ressembler fondamentalement exactement le même parce qu'il a le retard éteint. Zéro secondes du 2e 1 au 1er 1 va passer au 1er 1 immédiatement pour que vous puissiez continuer à cliquer, et il continuera à vous montrer ceci. Et enfin, je vais te montrer le deuxième tour, qui est ? Il est allé à la couleur fondamentalement cette deuxième flèche, qui est celle-ci à une couleur différente. Donc, par exemple, c'est juste bleu ou quelque chose comme ça. Peut-être que je ne sais pas quelque chose comme ça, peut-être un peu plus léger, comme ça, et quand vous cliquez ici, appuyez sur Aperçu. Comme vous pouvez le voir, la poupée due a commencé. Donc, si vous voulez, vous pouvez créer un autre notre port, puis assurez-vous que le bleu reste bleu sur ce 2ème 1 et puis revenir au 1er 1 Si vous voulez, mais je pense qu'il n'est pas nécessaire de le faire du tout parce que les gens sauront ce que vous avez fait parce que vous leur avez montré que cette deuxième flèche est en train de descendre. Donc, en gros, quand ils cliquent dessus et voient la seconde, ils sauront instantanément que le dollar a commencé. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine. 11. Icône 6: dans cette vidéo, nous allons créer cette icône de notification Bell, donc quand vous cliquez dessus, il va sonner deux fois, le cercle droit va apparaître et une notification de nombre de désactivation va rebondir de côté. Laissez-moi vous montrer rapidement une fois de plus. Donc, évidemment, ça n'arrivera pas. Ce déclencheur d'étape aura un déclencheur temporel lorsque vous implémentez dans votre application ou sur un site Web, car il va s'afficher après un certain temps que l'utilisateur a des notifications. Mais je voulais juste vous montrer quand il est implémenté sur le robinet, parce qu'il est plus facile de le montrer sur la vidéo. Donc, encore une fois, quand vous marchez dessus pour sonner deux fois, ce cercle rouge va apparaître et le numéro trois va venir de côté. Alors commençons. Donc ici, j'ai cette icône de notification de cloche, et je vais créer un cercle rapide pour que vous puissiez voir que nous avons la partie inférieure et supérieure. Donc, nous allons inclure un cercle sur aller juste pour tenir ma touche Maj et où il dit sentir que je vais cliquer juste là et frapper basé, et je vais utiliser cette couleur e b cinq f 67 appuyez sur Entrée et puis enlevé la bordure parce que je n'en ai pas besoin, vraiment. Et comme vous pouvez le voir, c'est une très belle couleur rouge. Ils vont augmenter cela à 50 faire autour agréable et propre, et je vais le positionner un peu plus beau orteil ici jusqu'à ce qu'il rencontre le bon contact du sort et jusqu'à ce qu'il rencontre avec le bord supérieur droit de cette ceinture ainsi. Marchez ici. Appelez-le Cercle comme ça et utilisez-moi l'outil de texte. Cliquez quelque part à l'intérieur des trois premiers , par exemple, parce que nous voulons utiliser les numéros off notification, vous pouvez utiliser n'importe quel nombre que vous voulez. Je vais utiliser ouvert Sense 24 position au milieu comme ça et comme ça Donc c'est une position correctement, et vous pouvez également cliquer sur le numéro de leur quart entier. Cliquez sur le cercle pour les sélectionner tous les deux. Cliquez ici qu'ici, et il va les positionner au centre à la fois horizontalement et verticalement. Donc je vais inclure ces deux à l'intérieur de notre cloche, comme ainsi et ensuite la position sont Bell comme Donc pour être parfaitement au milieu. Comme c'est le cas, j'utilise Art Board 500 par 500. Comme dans toutes les autres vidéos. Maintenant, nous pouvons commencer avec notre animation. Donc, les premières choses d'abord. Faisons quelques changements. Donc je vais orteils, sautez à l'intérieur et cliquez sur le numéro. Maintenez la touche Maj et positionnez-la juste ici. Donc, il n'est pas visible double pression pour le faire obéir à la ville à zéro parce que c'est notre première étape pour le cercle. Je veux juste en utiliser un avec un, donc c'est extrêmement petit. C' est quelque part par ici, et vous pouvez le laisser ici si vous voulez, ou vous pouvez positionner. C' est quelque part par ici. Si vous voulez sembler qu'ils viennent du centre, vous pouvez marcher zéro double fois et abaisser la ville d'Obey 20 Et fondamentalement c'est notre première étape. Donc, ce que nous voulons faire ensuite, c'est de sauter à l'intérieur et de regrouper la cloche par elle-même. Donc contrôler G avec les deux couches sélectionnées et ceinture de qualité parce que nous voulons le faire être séparé de ces deux éléments, et fondamentalement c'est notre première étape fait Hit contrôle D sur ce, notre port et il contrôlerait la fois de plus. Ce que vous voulez faire pour ce 1er 1 est de sélectionner la cloche comme ainsi et de frapper 10 ici où il est dit la rotation appuyez sur Entrée Puis cliquez sur le 2ème 1 sur la ceinture une fois de plus frappé moins 10 parce que nous voulions aller dans l'autre direction. Puis dupliquez cette touche de contrôle dans le et frapper sur la cloche une fois de plus et tapez zéro ici parce que nous voulions aller à la première étape. Maintenant, enfin, ce que nous voulons c'est contrôler une fois de plus pour le dupliquer une fois de plus. Et maintenant, nous voulons que le cercle apparaisse. Donc je vais sauter à l'intérieur, cliquer sur notre cercle, augmentation de l'orteil Dubay City 100 le changer à 50 et 50 ici. Et je vais le positionner là où il était si aligné avec le bord supérieur de la cloche ainsi qu'avec le bord droit de la ceinture. Comme ça. Et maintenant, enfin, nous pouvons sauter ici, localiser notre texte, augmenter votre salaire de la ville 100 et ensuite simplement le ramener au centre comme ça. Donc, il va orteil semble complet juste ici. Comme vous pouvez le voir, nous avons comment maney deux pour six différents nos ports pour celui-ci. Mais si vous voulez le rendre agréable et propre, alors nous avons besoin de beaucoup de planches d'art. Commençons donc avec notre prototypage. Non, pour ce 1er 1 en tant que spectacle, vous je vais utiliser l'étape. Donc je vais juste le traîner ici. Touchez pour l'assouplissement. Utilisons est dans parce qu'il va la facilité des orteils dans l'animation pour le 2ème 1, nous allons utiliser le temps et laisser tout tel qu'il est. Vous pouvez simplement avoir ce facile et sur pour le rendre agréable et simple est dans l'extérieur. Faites-le ressembler et croyez-le simplement comme ça. Et pour ce dernier, je voulais des arcs comme, donc parce que je veux ce numéro 32 bornes de droite à gauche quand il arrive à cet endroit. Alors testons ça. Cliquez ici. Regarde la logique méchante. Ceci un peu lorsque vous cliquez dessus, il va rebondir orteil gauche à droite cercle va apparaître. Et puis le numéro trois va orteils apparaissent une fois de plus, essayons-le une fois de plus. Comme vous pouvez le voir, le cercle gauche droit apparaît, puis le numéro trois rebonds et vous pouvez changer ce numéro trois Toby en haut afin qu'il puisse rebondir de haut en bas parce qu'il est blanc juste ici. Et toute cette icône est blanche. Il peut sauter de gauche. Il peut sauter de bas en utilisant le masque ou comme vous le souhaitez. Mais je pense que ça a l'air sympa pour qu'on puisse le laisser comme ça. Ou nous pouvons juste l'avoir souffrir de cette première notre port. Vous pouvez juste tirer cette poignée ici et aller d'ici à ici en utilisant le temps. Donc, maintenant, lorsque vous l'affichez un aperçu, il va sauter tout de suite et vous montrer cette notification, une animation de notification. Mais une fois de plus, comme je l'ai dit, j'aime utiliser le déclencheur de pression parce que cela va être très simple de montrer cela à vos clients parce que de cette façon ils peuvent voir l'animation comme il était prévu, mais pas seulement pour la finale produit. Donc, il a testé une fois de plus. Laissez-moi grand quand vous cliquez sur il va rebondir de gauche à droite nombre va orteil apparaître de la droite et rebondir en place. Alors c'est tout pour celle-là. Et je te verrai dans la prochaine vidéo. 12. Icône 7: dans cette vidéo, je vais vous montrer un jour. Trois points d'animation comme ceux que vous voyez sur les médias sociaux, en particulier sur le messager APS. Alors Facebook Messenger, si vous utilisez Viber, qu'est-ce qui se passe et ainsi de suite ? Vous pouvez les voir alors que les gens tapent et que vous attendez le début de l'appel. Voici ce que, fondamentalement, vous voyez. Donc ces trois points pour vous faire savoir que l'autre personne est en train de taper afin que vous puissiez attendre un peu pour recevoir leur message. Donc, sans plus tarder, commençons. Donc, une fois de plus, comme d'habitude, j'ai 500 par 500 notre port. Je vais utiliser le tabouret Ellipse tenir simplement ma touche de changement et dessiner un cercle. Et il peut être n'importe quelle taille que vous voulez. Utilisons-le. Par exemple 70 avec 70 et je vais cliquer ici. Appuyez sur le contrôle C afin que je puisse copier cette couleur. Cliquez ici. Contrôlez le second basé. Et enfin, je vais enlever la frontière. Cliquez ici pour que je puisse positionner mon cercle au milieu, puis appuyez sur le contrôle D. Vous pouvez également utiliser la répétition. Super, mais j'ai trouvé ça un peu plus facile. Je vais positionner les pixels vides à l'écart, Hit contrôle la encore une fois. Et enfin, nous en avons 30 ici aussi. Je vais faire un double clic ici et appeler ce cercle. Et c'est le numéro trois. C' est le Cercle numéro deux. Et enfin, c'est le Cercle numéro un. Il est important que vous nommez vos calques car également, entité animée ne fonctionne pas. Eh bien, si vous êtes les couches sont nommées différemment. Je vais donc les positionner un peu différemment. Donc le numéro un viendra en haut et le numéro trois en bas. Je vais à la maison une touche majuscule, appuyez sur le contrôle G afin que je puisse les regrouper et appelé ceci, par exemple les cercles. Je vais cliquer ici, puis juste ici, Toe. Positionnez-les parfaitement au milieu et ce sera essentiellement notre premier état pour notre deuxième état. Je vais cliquer sur cour, travailler il contrôle en raison de dupliqué et frapper contrôle. Cliquez pour que je puisse cliquer sur le cercle. Maintenez la touche Maj et la flèche vers le haut deux fois pour que je puisse bouger avec 20 pixels vers le haut. Cliquez ici. Toucher le contrôle de une fois de plus maintenant frapper le contrôle, cliquez sur le deuxième cercle et tient déplacer une flèche vers le haut quatre fois. Donc 1234 afin que vous puissiez vous déplacer avec 40 pixels vers le haut et cliquez sur le 1er 1 touche Maj vers le bas une flèche , aussi, afin que vous puissiez le ramener à la position d'origine. Cliquez ici, Touchez le contrôle D et nous allons déplacer le cercle vers le bas deux fois ou décaler la flèche vers le bas deux fois. Mais cette fois, on va bouger. Encerclé 3 40 pixels vers le haut. Donc déplacer 1234 et enfin frapper le contrôle D. Je vais faire tomber celui-ci. Donc décalage 12 et décalage 12 et c'est fondamentalement tout. Vous devriez avoir quatre tableaux d'art comme ça parce que c'est notre début d'état. Le point numéro un va remonter. Puis 2ème 1 puis tourné un. Et pendant que le 3ème 1 descend, tous sont déjà descendus. Alors animons ça. Je vais choisir le prototype, cliquer ici sur la poignée bleue, faire glisser ici, et nous allons utiliser le temps parce que tous seront basés sur le temps et pour l'action. Utilisons photo ennemis assouplissement. On n'en utilisera aucun. Et pour la durée, utilisons 0,2 seconde. Il suffit de faire glisser cette vieille façon jusqu'à ici et enfin sur ce dernier. allons le faire glisser jusqu'à l'avant et utiliser le délai de 0,2 secondes parce que nous voulons ce dernier orteil attende juste un peu avant qu'il aille jusqu'à l'état de départ . Alors, cliquez ici. Cliquez sur notre aperçu et vous pouvez voir à quoi il ressemble. Donc, fondamentalement, ce dernier est en train de tourner les pieds. Attendez juste un peu avant qu'il aille jusqu'à ce 1er 1 Mais je n'aime vraiment pas à quoi il ressemble, parce que nous allons cliquer ici que supprimer et retarder le temps. Donc, je vais cliquer sur 0.0. Appuyez sur Entrée parce que je voulais attendre de celui-ci à celui-ci, pas de celui-ci à celui-ci. Donc, nous allons cliquer sur ce 2ème 1 et dessus, utilisons le délai et appuyez à nouveau sur l'aperçu. Et maintenant, comme vous pouvez le voir, il semble beaucoup plus propre parce que quand il arrive à cela, premier état va poids des orteils 0,2 secondes, puis recommencer l'animation. Et maintenant, il est beaucoup plus logique que pour son poids de l'orteil à partir de ce premier orteil le 1er 1 plutôt, il va le poids des orteils du 1er 1 au 2ème 1 donc vous pouvez voir qu'il semble très lisse parce que nous avons choisi de ne pas soulager, parce que pour cette animation particulière, si vous choisissez une de ces facilités, ces points ne vont pas sembler naturels, et ils vont rebondir et se remonter et se mettre en position. Mais nous voulons qu'ils soient aussi naturels que possible. Donc, comme vous pouvez le voir, ils le sont dans ce cas. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 13. Icône 8: dans cette vidéo, je vais vous montrer cette icône de fermeture de recherche. Donc, lorsque vous cliquez sur l'icône de recherche, aligner les sauts à l'intérieur des tours de remorquage X, et lorsque vous appuyez sur, le X va fermer et revenir à la même position, puis vous donner la possibilité de faire l'animation une fois de plus. Donc, une fois de plus, quand vous cliquez dessus, ça va se transformer en vêtements. Quand tu seras proche, ça va revenir à la recherche, et ce cercle va se déformer un peu. Alors commençons. Donc, comme d'habitude, j'ai mes sont versés à 500 par 500. Je vais utiliser l'Ellipse. Toujours dessiner un beau grand cercle. Donnons-lui un 240 semaines, 200 pour la hauteur. Positionnez-le au centre comme ça et pour la frontière. Utilisons par exemple, cinq. Je pense que ça marche bien. Vous pouvez en utiliser plus si vous le souhaitez. Si vous voulez rendre l'icône un peu plus attrayante, peut-être, mais j'utilise habituellement cinq. Mais ce que vous êtes dans ce cas nous allons voir à quoi ça ressemble. Je vais appeler ce cercle. D' accord, donc je vais utiliser mon clic au crayon juste ici au milieu. Dessinez, aussi. Donc on est par ici, il s'évaderait. Cliquez ici pour arrondir le capuchon. Et si je tape 10 comme vous pouvez le voir va regarder exactement le même que ce cercle et vous pouvez le sélectionner, puis le positionner au milieu. Comme si on va appeler cette ligne un enfant contrôle D et appelé mais un aligné sur comme ça et je vais regrouper ces deux lignes. Donc, contrôlez G appelle il aligne et groupez la chose entière et appelez-le icône comme ça. Donc, pour ce 1er 1, créons notre icône de recherche. Donc je vais prendre les lignes et je vais planer ici. Tournez-les juste un peu vers quelqu'un ici et positionnez cet orteil ici. Ce cycle, il semble qu'il semble bon et vous pouvez positionner l'icône pour être au centre comme ça Et enfin, ce que je veux est de frapper le contrôle, cliquez à l'intérieur du cercle DoubleClick veut à nouveau et planer sur quelque part ici donc que je peux ajouter un point de plus. Alors refaisons-le. Utilisez le cercle, double-cliquez à l'intérieur et vous pouvez cliquer sur ces points, puis ajouter un point de plus à quelque part ici parce que c'est la zone qui va se déformer lorsque cette ligne va aller en vue de notre icône de recherche. Donc c'est tout pour les premiers États. Donc, l'état d'origine nous allons utiliser un 2ème 1 Donc il a contrôlé les deux dupliqués. Maintenant, nous allons sélectionner les lignes et nous allons les positionner juste aperçu quelque part par ici. Voyons voir. Et encore une fois, je suis allé au clic sur le cercle Cliquez sur ce nouveau point nouvellement créé que nous venons de créer et simplement déformé quelque part ici. Vous pouvez jouer avec cet angle si vous le souhaitez. Ainsi, par exemple, vous pouvez créer pour être un peu plus dramatique à quelque chose comme ça. Si tu veux. Ouais, ça a l'air bien. Je vais fermer ce clic ici. Touchez le contrôle D Maintenant, ce que vous allez faire avec les lignes, c'est que nous allons ouvrir cela, utiliser les lignes, maintenir notre décalage, garder, puis simplement les positionner pour être au centre de notre icône. Mais avant de le faire, nous devons sélectionner ce premier cercle simplement sélectionné à partir d'ici. Toucher contrôle C fermer ce saut en vue. Supprimez ce cercle et appuyez sur le contrôle V parce que cela va positionner pour cerner exactement la même position que ce 1er 1 Nous allons orteils, déplacez-le en arrière Donc les lignes sont au point et maintenant nous allons sélectionner les deux d'entre eux. Cliquez ici, puis juste ici pour positionner nos lignes au centre de cette icône. Donc c'est tout pour ce contrôle de scène de le dupliquer une fois de plus. Et maintenant, nous avons orteil tourner ces icônes pour faire une icône proche. Donc, nous allons utiliser ce jus d'orange 25 ou choisir 135 comme ça et sur le 2ème 1 Utilisons 45 et fondamentalement c'est tout pour la création que nous avons ou sommes tous nos états. Et maintenant, fondamentalement, ce que nous allons faire est de cliquer ici, appuyez sur control de pour dupliquer celui-ci. Cliquez ici, contrôlez DE pour le dupliquer, et ce sera un premier état. Cela va être notre état final parce que nous voulons créer un proche et enfin à partir de bout près de l'orteil arrière cette icône, nous allons avoir la boucle et nous pouvons être en mesure de cliquer sur cette icône une fois de plus et ensuite créer toutes ces icônes plus tard. Alors commençons le prototypage. Alors, cliquez ici. Sélectionnez. Nos premiers sont pauvres, mais nous allons sélectionner l'icône traîné une poignée bleue pour marcher pour les chaussures de transition ou orteil animer. Il est sorti d'ici et fait 0,2 seconde parce qu'on veut que tout soit beau, propre et rapide pour celui-ci. Nous allons utiliser le temps donc ne sont pas pauvres pour ici. Nous allons utiliser facile maintenant 0.2 et simplement aller d'ici sur celui-ci. Nous allons utiliser le robinet parce que nous voulons avoir exactement les mêmes paramètres que celui-ci pour celui-ci. Nous allons utiliser le temps et enfin, pour celui-ci, nous allons aussi utiliser le temps. Alors vérifions ça. Cliquez ici en grand un peu. Quand je clique dessus, vous pouvez voir que cette petite distorsion se produit. X va apparaître lorsque vous cliquez sur les vêtements et vous pouvez voir que le magasin il se produit à nouveau. Cliquez ici. Et comme vous pouvez le voir, c'est très subtil, mais il est joliment aussi, donc c'est fondamentalement votre icône. Vous pouvez utiliser cette icône pour animer vos champs de recherche, par exemple, si vous avez un champ de recherche sur votre site Web ou sur votre application mobile, vous pouvez l'utiliser de cette façon juste pour attirer un peu plus d'attention sur le champ et juste un un peu plus d'intérêt pour ce domaine. Ainsi, lorsque les utilisateurs cliquent dessus, ils peuvent être en mesure de remarquer la différence entre juste normal afin qu'il rempli et celui avec l'animation du site. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 14. Icône 9: dans cette vidéo, je vais vous montrer comment vous pouvez créer cette icône réactive, qui va du téléphone à la tablette au bureau et revenir au téléphone à nouveau. Vous pouvez l'utiliser sur votre site Web ou sur votre application mobile, juste pour montrer à vos utilisateurs que votre application ou site Web est réactif et qu'ils peuvent l'utiliser sur tous leurs appareils. Alors commençons. Donc, comme d'habitude, j'ai 500 par 500 notre port, et utilisons l'outil rectangle. Vous pouvez tenir votre touche Maj pour dessiner un rectangle et la laisser aller quelque part ici, faire le rayon de coin 20 et faire la bordure avec cinq juste pour que nous puissions avoir une belle grosse bordure orteil jouer autour avec. Vous pouvez le faire descendre et le rendre juste un peu plus petit parce que nous allons passer du téléphone jusqu'à la tablette. Et ce que nous voulons ici, c'est créer un petit bouton. Donc, utilisez l'orteil ellipse et créé comme si peut-être vous pouvez augmenter le coup de bordure avec à deux. Je pense que ça a l'air bien. Positionnez-le au milieu, assurez-vous que vous êtes sur la ligne avec cette forme inférieure. Appuyez sur Maj une fois et en haut, Pero pour que vous puissiez le déplacer de 10 pixels vers le haut. Et enfin, nous allons utiliser un outil rectangle une fois de plus et dessiner un joli grand rectangle. Je vais cliquer ici, contrôler, voir, voir, pour que je puisse copier cette couleur. Cliquez ici, contrôlez V et entrez pour que le poulet le coller dans et je vais orteil enlever la bordure, et si nous revenons rapidement sur le rectangle que nous avons créé, nous pouvons voir qu'il est à cinq. Donc, je vais cliquer sur cette forme que nous avons créée et pour la hauteur, utiliser cinq pour que nous puissions avoir la même hauteur que cette bordure est bâton et enfin cliquer sur cette forme d'arrière-plan et vous pouvez voir qu'il est 136 dans l'esprit, donc je peux cliquer sur celui-ci et tapez en 136 ligne centre appuyez ici pour être au milieu, aligné avec le cercle pour un décalage et l'ère supérieure une fois afin que nous puissions le positionner uniformément à partir du bas et le cercle. Maintenant, appelons-les. On va appeler celui-ci une ligne en bas et enfin celui-là qu'on va appeler forme maintenant. Ce que nous voulons également est de créer deux lignes supplémentaires pour aller ici vers le bas parce que nous allons utiliser auto animate et a expliqué plusieurs fois tout au long de ces vidéos que vous devez avoir exactement la même structure de couche pour que les orteils ennemis auto correctement Donc, vous pouvez dupliquer dans cette ligne deux fois en appuyant sur le contrôle D. Cela va être une ligne médiane et finalement, cela va être une ligne de fond pour notre bureau. Et nous allons déplacer ces deux lignes vers le bas jusqu'à ce qu'elles se rencontrent avec le bas de notre forme, les déplacer tous les deux sous la forme. Et pour l'esprit, nous pouvons utiliser quelque chose comme 50 et les positionner tous au milieu, comme ça. Et vous pouvez utiliser les trois et cliquer ici pour qu'il les positionne tous au milieu comme ça. Maintenant, vous pouvez les tâtonner tous. Toucher le contrôle, G contact Informer comme ainsi et une fois de plus, assurez-vous qu'il est au milieu. Comme si c'est pour que nous puissions appuyer sur le contrôle D pour créer une tablette donc Ce que vous allez faire dans ce cas est simplement l'agrandir. Donc, je vais désactiver réactif, très taille parce que nous n'en avons pas besoin et vous allez utiliser le boulon de changement de vitesse et le clic gauche dans l'un des coins. Allons l'augmenter à quelque part par ici. Je pense que c'est bon, et nous allons repositionner certains de ces éléments pour qu'il puisse sauter à l'intérieur. Cliquez sur le bas et positionnez-le orteil juste ici. Déplacez notre père une fois et enfin faire la même chose pour la ligne expédiée de l'héroïne une fois et maintenant, nous allons juste vérifier rapidement si quelque chose a changé en forme Quicken, vous pouvez voir les vues est toujours cinq, et je peux cliquer sur la ligne et voir que la hauteur de la ligne est maintenant de sept. Remettez-le à cinq et refaites le déménagement une fois de plus. Donc déplacer un canon veut, et c'est fondamentalement tout. Et nous pouvons faire la même chose pour ces deux-là. Si vous voulez frapper cinq et assurez-vous juste qu'ils sont dans le bord inférieur de cette forme. Mais parce que notre forme a une couleur blanche Whitefield, cela n'a vraiment pas d'importance car ils sont positionnés en dessous. Alors c'est tout. pour notre tablette et positionnons-le au milieu comme ça. Et enfin, créons un bureau pour qu'il contrôle en profondeur et ce que je veux faire. Ici vous pouvez cliquer sur perspicacité, et je veux cacher nos boutons. Il suffit de cliquer ici. Ou encore mieux, vous pouvez baisser. Vous le basez vers le bas. Donc, vous méprenez 02 fois ou déplacez le curseur tout le chemin vers la gauche, et ce que nous voulons dans ce cas, c'est orteil. Agrandissez cette forme ainsi que la ligne pour que vous puissiez maintenir votre touche de contrôle. Sélectionnez deux d'entre eux. Cliquez lorsque vous avez l'ancienne clé, puis cliquez sur l'un des sites. Alors allez quelque part par ici. Je pense que c'est bien. Et enfin déplacer ces deux lignes vers le bas. Donc Celik, tous les deux ont eu le décalage 12 et ont touché le décalage 12 pour cette première partie. Maintenant, cette partie d'une, parce que ça va être un stand, va être un peu plus grande. Donc, au lieu de 68, nous allons utiliser quelque chose comme 90 appuyez sur Entrée ou encore mieux, 120 juste pour le rendre beaucoup plus grand. Et enfin, vous pouvez le repositionner pour être au centre comme ça et il y en a. Nous avons notre bureau. Donc on va le positionner au centre comme ça. Et maintenant, nous avons toutes nos trois formes prêtes à partir. Maintenant, ce que nous pouvons faire est de cliquer ici, choisir le prototype. Il suffit de faire glisser et de choisir le délai. Nous pouvons choisir une seconde choisir auto animate et vous pouvez utiliser facile maintenant facile dans tout ce que vous voulez et faire la même chose pour celui-ci. Assurez-vous juste que vous devez retarder ici aussi. Donc, nous voulons qu'il pointe Attendez une seconde entre chaque animation afin que les utilisateurs puissent voir ce qu'il est réellement et ce qu'il fait réellement pour qu'il ait un aperçu pour voir à quoi cela ressemble. Et vous pouvez voir qu'il s'agrandit bien et ce bouton disparaît et le trait reste cohérent à travers ces icônes. Et comme vous pouvez le voir, tout a l'air très agréable et propre. Aucune dernière chose que nous pouvons faire. Comme vous pouvez le voir, ces icônes sont autour d'elle. Mais ces deux résultats ne le sont pas. Pour que nous puissions changer ça. Sélectionnez simplement les deux ou cliquez un par un, puis choisissez un trait, peut-être 20 ou peut-être même 50 juste pour le rendre un peu plus clair. Quelque chose comme ça. Cela fonctionne bien et vérifions une fois de plus. Comme vous pouvez le voir, il change de téléphone à tablette. Et comme vous pouvez le voir, ces deux lignes sont maintenant bien autour, donc c'est tout. Fondamentalement, pour cette vidéo, j'espère que vous l'avez aimé. Et comme vous pouvez le voir, il est vraiment facile de créer ces transitions. Il suffit de créer l'icône. Nous avons fait la transition à l'esprit. Ainsi, comme vous l'avez vu, vous devez garder tous vos noms de calque cohérents et vous devez les modifier en conséquence . Donc, ils s'adaptent entre chaque transition et assurez-vous de laisser le délai entre chaque animation en une seconde, afin que vous ayez un peu plus d'espace et que les utilisateurs puissent ensuite déterminer. Ok, donc c'est un téléphone. C' est une tablette, et enfin, c'est un ordinateur de bureau, donc c'est tout pour cette vidéo, et je vous verrai dans la prochaine 15. Icône 10: dans cette vidéo, je vais vous montrer comment vous pouvez créer cette icône de pause de lecture. Donc, lorsque vous appuyez sur, le jeu va basculer orteil une ligne, puis diviser en deux création icône opposée. Et lorsque vous cliquez sur l'icône Pose, il saute en arrière, bout d'une ligne, puis revient à l'icône de la plaque. Alors commençons. Donc, une fois de plus, nous sommes à 500 par 500 pour la taille de l'aéroport. Je vais utiliser l'Ellipse Tal dessiner un beau grand cercle. Utilisons 200 par 200. Même liquide. Dans certains des exemples précédents, analystes utilisent cinq pour le trait avec Now. Ce que vous allez faire, c'est que nous allons zoomer un peu plus près comme ça, et vous allez utiliser le crayon et nous allons dessiner une partie simple. Comme si il s'est échappé. Cliquez ici en tapant cinq et cliquez ici pour exécuter le camp et le rendre agréable et autour. Maintenant sélectionnez-le et positionnez-le au milieu comme ça, et je vais aussi le positionner un peu vers la droite. Comme ça. Si tu penses que ça va être trop haut. Il suffit de double-cliquer dessus. Cliquez ici pour l'abaisser juste un peu comme ça, puis repositionnez-le au milieu comme ça. Maintenant, ça va être notre première ligne pour qu'on puisse juste l'appeler ligne sur la ligne un coup de contrôle D et contrôler la dernière fois. Donc ça va mentir et finalement ça va mentir trois. Et enfin, nous allons faire deux copies de plus de cette première ligne. Donc, il a contrôlé le et contrôler la une fois de plus Cela va être la ligne à et vous pouvez regrouper ces deux coups de contrôle G et appelé Dispose. Et ces trois appels s'il vous plaît comme Donc maintenant vous pouvez cacher le poste ou simplement abaisser dessous plaque et utilisé une ligne et la ligne à, par exemple, et nous pouvons juste les faire tourner. Donc, lorsque vous survolez de près, vous pouvez voir ces deux flèches et vous pouvez simplement faire pivoter comme ainsi, et vous pouvez le positionner vers le haut comme cette extrémité de la même pour la ligne à mais dans l' autre direction. Donc quelque chose comme ça et positionnez-le juste pour s'assurer qu'il est dans le coin comme ça. Et maintenant, vous pouvez simplement repositionner ces deux afin que vous puissiez double-cliquer sur celui-ci et faire comme ça. Par exemple, vous conduisez affaibli celui-ci et connecté à la fin comme ainsi. Et on y va. Nous avons notre icône de jeu, et si elle ne semble pas comme vous le souhaitez, vous pouvez simplement baisser ces deux. Ou vous ne pouvez pas cliquer sur ce 1er 1 et peut-être le rendre beaucoup plus proche comme ça et une condition probable pour que vous puissiez vraiment jouer avec elle. Et aussi, une autre façon est de simplement sélectionner ceci. Alors sélectionnez le cercle et allons en cercles et tracez simplement une ligne directrice d'ici au milieu comme ceci, et vous allez voir que si c'est au milieu ou non. Donc, parce que ce n'est pas le cas, double-cliquez sur son analyste, positionnez-le comme ça, puis cliquez sur le 2ème 1 et positionnons-le comme ainsi jusqu'à ce qu'ils soient connectés. Et maintenant, vous pouvez être sûr que c'est bon triangle afin que vous puissiez supprimer cette ligne et laisser ce n'est vraiment à vous de décider. Mais c'est la première étape de notre conception. Fait. Vous pouvez cliquer ici. Le détail du contrôle a choisi notre port. Et maintenant, ce que nous allons faire, c'est faire quelques changements. Utilisez donc la ligne numéro un, double-cliquez dessus et vous pouvez déplacer ce point jusqu'à ce qu'il se rencontre ici. On dirait ici aussi. Déplacez cette ligne ici jusqu'à ce qu'elle se rencontre au milieu et assurez-vous qu'elle soit au milieu. Comme ça aussi. Assurez-vous qu'ils sont tous correctement alignés comme ainsi et simplement bouger juste un peu d'orteil droit comme ceci jusqu'à ce que vous ayez fondamentalement une ligne droite. Et maintenant, ce que vous allez faire, c'est déplacer, jouer et mettre en pause les icônes au milieu afin que nous puissions choisir. Le cercle est bien positionné, tout au milieu comme ça, et maintenant nous allons sauter et en créer un autre. Donc il contrôle D et saute rapidement sur celui-ci. Et quand vous frappez le jeu, vous pouvez abaisser votre Bay City comme ça, et vous pouvez cliquer sur la plaque ici aussi et abaisser votre Bay City aussi bien et maintenant non perturbé. Nous allons utiliser le post, et vous pouvez trier de les diviser afin que vous puissiez cliquer sur la ligne un touche Maj et la touche fléchée gauche un à la fin de la même pour la ligne à aussi un juste pour vous assurer que vous avez le même espacement lorsque vous avez créé ils supposons l'icône. Donc maintenant ce que nous devons faire est de dupliquer ce 11 fois de plus pour frapper le contrôle D, et c'est fondamentalement tout, parce que ça va aller d'ici à ici, puis ici, retour à ici. Alors testons ça. Et ce que nous allons faire, c'est que nous allons le prototype pour que vous puissiez cliquer sur le prototype ici. Nous allons choisir cela, comme le sont le début de l'étape. Donc, nous allons conduire cette poignée vous étape pour la transition. On n'utiliserait pas l'animation automatique. Quelle utilisation est en dehors et 0.3 secondes. C' est bon pour celle-là. Nous allons utiliser le temps au lieu de l'assouplissement du top 0.3. Et pour celui-ci, nous allons utiliser tap une fois de plus, alors appuyez ou pour animer, note facile. Et pour celui-ci, nous allons utiliser le temps parce qu'il va revenir au 1er 1 donc il est rapidement testé . Voyez à quoi ça ressemble. Donc, quand vous cliquez dessus, comme vous pouvez le voir, c'est agréable et lisse. Lorsque vous cliquez dessus à nouveau va sauter en avant dans la ligne médiane à deux lignes pour la pose et une fois de plus pour de la ligne médiane retour au triangle. Encore une fois, vous pouvez jouer avec différents paramètres. Vous pouvez choisir différentes facilités. Vous pouvez utiliser des bombes ici si vous le voulez, mais si vous ne le voulez pas, vous pouvez simplement le laisser comme il vient tellement de facilité dans deux dans différents états. Mais si vous le voulez, vous pouvez le faire aussi. En outre, si vous le souhaitez, vous pouvez changer les couleurs de ces traits. Donc, par exemple, cela devrait être une couleur, et quand vous cliquez dessus, il change pour mettre en pause et dans ce moment particulier, donc dans cette étape reste la même. Mais à ce stade est change de couleur de sorte qu'il peut être bleu, par exemple, et sur cette scène va revenir à la couleur d'origine et il va être la couleur d'origine à ce stade aussi bien. Donc, comme vous pouvez le voir, c'est vraiment sympa, simple, animation propre. Vraiment, il n'y a pas trop de choses qui se passent, mais ça va vraiment pimenter votre vous Pourquoi, surtout si vous partagez , par exemple, une application mobile avec votre client et qu'ils vont pouvoir pour voir, par exemple, vous pouvez créer une animation de la barre juste ici en haut de la barre de progression des animaux. Et quand ils cliquent dessus, la barre de progression va s'arrêter à ce moment particulier lorsqu'ils frappent. Jouer une fois de plus va continuer et aller à la fin afin que vous puissiez vraiment pimenter votre travail comme ça et créer un peu plus d'intérêt visuel pour vos utilisateurs. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 16. Fichier Xd d'icônes: dans cette vidéo. Je voulais juste vous montrer comment vous pouvez utiliser les icônes. Les œufs se souiller ici. Comme vous pouvez le voir, nous avons toutes nos icônes que j'ai déjà couvertes dans ces vidéos. Donc, vous pouvez suivre si vous voulez. Ou vous pouvez le vérifier plus tard ou avant de commencer juste pour que vous puissiez consulter certaines de ces animations. Et si vous le souhaitez, vous pouvez voir l'animation. Et si vous l'aimez, vous pouvez suivre la vidéo. Sinon, vous pouvez sauter cette vidéo et ainsi de suite. Vous pouvez aussi vérifier si vous avez manqué quelque chose parce que, souvent, les gens viennent me voir et me poser des questions. Mais ici, vous pouvez vérifier le fichier d'origine et voir si vous avez tout obtenu correctement. Si vous voulez prévisualiser certains d'entre eux, vous pouvez simplement cliquer sur le premier tableau d'art de l'un d'eux. Il jouait ici. L' animation va commencer et vous pouvez vérifier et voir par vous-même à l'intérieur du fichier Theodore B X D pour cette icône particulière que j'ai créé au cours des vidéos afin que vous puissiez les vérifier, vous pouvez revenir en arrière et en avant. Vous pouvez voir à quoi ils ressemblent, et vous pouvez les prévisualiser simplement pour voir ce que vous travaillez avec. En outre, une chose de plus, vous pouvez utiliser l'une de ces icônes que nous avons créées pour votre projet particulier. Vous pouvez les utiliser gratuitement pour des projets personnels ou commerciaux. Parce que, comme vous l'avez vu, nous les avons tous créés à partir de zéro. Et une fois que je ne l'ai pas créé, j'ai pris de Free. La ressource est que je vais lier dans la dernière vidéo hors discours, et vous allez pouvoir télécharger toutes ces icônes pour vos projets et les utiliser gratuitement pour des projets personnels et commerciaux. Alors c'est tout. Consultez ce fichier, jouez avec. Il jouait sur certaines de ces icônes et verrait à quoi ressemblait l'animation, et je vous encourage à le tester par vous-même et à les créer pour vous-même. À la suite de ces vidéos, 17. Bouton 1: dans cette vidéo, nous allons créer son menu du bas, que vous pouvez trouver dans la plupart des AP. Donc, nous avons ce fond au milieu, et quand vous cliquez dessus, il va tourner de plus. Pourtant, X va cracher toutes ces icônes vers le haut, et quand vous frappez près, il va se fermer et revenir à plus. Donc, une fois de plus, lorsque vous cliquez dessus ou X cracher toutes ces icônes que haut lorsque vous cliquez dessus à nouveau va rebondir vers le moulin, rebondir vieux chemin vers le bas et revenir à plus. Alors commençons. Donc voici ce que j'ai ici j'ai ces trois icônes du bas, donc si je clique sur certaines d'entre elles, vous pouvez voir que nous avons à la maison. Nous avons notre annonce et nos vêtements à l'intérieur. Nous avons ajouter ou fermer l'icône et aussi nous avons ce cercle de fond, et enfin nous avons cette icône de portefeuille tout le chemin. C' est bon et en haut, nous avons trois icônes, qui sont juste un peu plus petites que ces trois en bas, parce que ces icônes primaires d'air et ce sont des icônes secondaires et ils sont juste un peu plus petits pour qu'ils puissent accueillir d'être à l'intérieur de ce cercle. Donc, nous avons une icône de caméra, l'icône d'image ainsi que la vidéo. Je ne peux pas ici. Donc, ce que je veux faire en premier, s'il vous plaît sélectionner cet ent fermer. Je vais dupliquer ce cercle et vous allez obtenir ces fichiers afin que vous puissiez suivre toute cette vidéo et je vais dupliquer ce cercle et le positionner quelque part par ici. Je vais faire deux copies de plus. Donc il contrôlerait De control une fois de plus et je vais les séparer comme So Now, enfin, je vais aller aux pieds. Ajoutez toutes ces icônes orteils les cercles. Donc je vais faire glisser l'image juste au-dessus de ce cercle du milieu. Je vais cliquer dessus, assurer qu'il est au milieu. C' est le cas, et je vais tout simplement le déplacer ici. Sélectionnez l'image à l'aide de la touche de contrôle Hit contrôle G pour grouper Là. Non, vite ici. Taper l'image comme Alors je vais utiliser ce cercle pour la caméra. J' ai localisé la caméra. Ici, c'est. Glissez-le juste à propos du cercle frappé contrôle G et appelez cette caméra, et enfin nous avons la vidéo comme fin, et je vais la positionner juste ici. Il a contrôlé G appelé cette vidéo comme Donc maintenant, même si l'image est au milieu et qu'elle devrait être au milieu à droite entre la caméra et vidéo, je vais la laisser en haut parce qu'elle va sauter orteil d'abord puis de . Ces deux-là vont venir. Alors allons d'abord les regrouper tous, comme ça contrôlait G. Et je vais les appeler, par exemple, haut Aiken parce qu'ils vont aller au sommet de ces icônes du bas. Ensuite, je vais sélectionner toutes les icônes et changer leur couleur. Donc, en maintenant mon contrôle, G cliquez ici. Cliquez sur la couleur de fond blanc. Et maintenant, enfin, je passe aux pieds. Il suffit de les positionner Toby au milieu, comme si je vais faire la même chose pour cette caméra et enfin faire la même chose pour cette vidéo. Donc je les sélectionne tous les deux et je frappe ici pour les positionner Toby au milieu. Et c'est fondamentalement tout pour le processus de création de cette vidéo. Ce que je veux faire ensuite est d'ouvrir ce dossier, sélectionnez les trois en clic juste ici pour que je puisse les positionner au milieu. Ensuite, cliquez ici pour qu'il soit parfaitement au milieu comme cette icône et déplacez-le tout simplement jusqu'à ce qu'il se rencontre. Comme ça jusqu'à ce qu'il soit parfaitement derrière cette icône de fermeture publicitaire. Donc c'est fondamentalement tout pour notre partie design. Je vais cliquer ici sur l'aéroport, Hit control D, et vous pouvez les dupliquer au fur et à mesure. Donc, tout d'abord, ce que nous allons faire est de cliquer à l'intérieur de cette icône de clôture d'annonce, sélectionnez cette façon plus et fait pivoter le décalage à environ 90 degrés ou moins 90 degrés afin que nous puissions avoir ce X suivant. Je vais le fermer. Toucher le contrôle DE à dupliquer une fois de plus. Et ce que je veux faire maintenant est de déplacer ces icônes d'arrêt vers le haut afin que vous puissiez tenir un décalage dans notre risque pour les pousser au-dessus puis bosse alignée comme ce hit shift et vêtements sur 234 fois , par exemple, sorte que vous pouvez l'avoir à 40 pixels au-dessus de celui-ci. Ensuite, quoi ? Nous allons faire est de frapper le contrôle de une fois de plus, sauter à l'intérieur de ceux-ci et puis sélectionner la caméra. Maintenez la touche Maj sur la flèche gauche, sélectionnez la vidéo, tout le décalage et la flèche droite à quelques reprises, puis déplacez-les, par exemple. Amenons-les à 40 pixels. Donc quelque part ici et avec la même chose pour celui-ci. Donc, si nous zoomons un peu, appuyez sur le contrôle zéro pour voir ce que nous avons fait. Donc nous commençons par cet état. Ensuite, nous allons passer à cet état. Une fois qu'une personne clique ici , ces icônes vont sauter derrière cette icône X, et elles vont se diviser en trois et montrer cette icône. Maintenant, nous avons aussi besoin d'une couleur rouge pour que nous puissions indiquer que les gens peuvent fermer cette icône Mex . J' ai déjà une couleur. Je vais sauter la perspicacité et me frapper la touche Contrôle. Cliquez ici. Et au lieu de cette couleur bleue, je vais utiliser ce rouge. Donc c'est e 53 c 85 percenter, et je vais faire la même chose pour celui-là. Cliquez ici. Contrôle du blé basé exactement de la même couleur. Maintenant, ce que vous allez faire est de finir dans cet état. Donc nous devons copier celui-ci. Donc contrôler D et enfin copier ce 1er 1 donc contrôlé la encore une fois. Donc nous allons faire le tour complet d'ici jusqu'à ici, et nous pouvons ensuite cliquer sur les orteils, revenir à celui-ci. Maintenant, nous allons commencer le prototypage et ajouter un peu de mouvement. Donc, nous allons cliquer ici pour ce 1er 1 Nous allons cliquer sur le bouton, faites glisser cette poignée bleue que nous allons utiliser étape aussi animer. Nous allons les utiliser en dehors et 0,3 seconde, c'est bien. Ensuite, nous allons choisir l'heure pour celle-là parce que nous voulions comparaître pour, euh pour un certain temps. Donc nous allons utiliser le temps auto toute viande et au lieu de est en dehors. On va utiliser le vent parce qu'on veut que cet orteil remonte au sommet. Juste un peu pour celle-là. Nous allons utiliser le temps aussi, mais nous allons avoir un peu de retard, donc nous allons avoir 0,4 seconde, et au lieu de finir, nous allons utiliser le rebond. Donc, voici, juste en bas et nous allons l'étendre juste un peu à 0,6 parce que nous voulons orteils attendent juste un peu comme il arrive ici avant qu'il se divise en trois. Et nous voulions aussi rebondir, Donc ces deux icônes extérieures vont rebondir en place. Ensuite, on va y aller, mais on ne va pas utiliser le temps. Au contraire, nous allons utiliser l'étape. Donc, nous allons cliquer sur ce bouton parce qu'il va orteil fermer ceux pour utiliser leurs coups dessus. Même liquide avec ce 1er 1 pour l'ouvrir en premier lieu. Donc, nous allons à vous l'étape auto, animer. Et au lieu de rebondir, nous allons utiliser snap et 0.3 secondes afin que vous puissiez taper ici 0.3 percenter pour avoir le 0.3 parce que nous voulions revenir dans l'icône d'origine, pas rebondir ou remonter ou quelque chose comme ça parce que nous voulait se mettre en position dans cette position médiane. Et enfin, ce que nous avons ici, nous allons conduire. Cette poignée cassée et ce que nous allons faire est que nous allons utiliser le temps et pour le retard , nous allons utiliser 0,4 seconde parce que nous voulions avoir juste un peu de retard avant qu'il ne descende au X. , nous allons utiliser 0,4 seconde parce que nous voulions avoir juste un peu de retard avant qu'il nedescende au X. vont utiliser aussi animate et au lieu de snapper allé à utiliser est en dehors. Et au lieu de 0,3, nous allons utiliser 0,6 seconde. Et enfin, nous voulons aller de ce dernier jusqu'au 1er 1 Donc je vais sélectionner l' ensemble de la partie sont. Glissez-le ici. Nous allons utiliser le délai de 0,4 secondes et nous allons utiliser Snap. Enfin, vous pouvez l'avoir à 0.3 juste pour que nous puissions avoir un peu plus de cohérence. Alors frappons l'aperçu. Je vais cliquer sur son 1er clic ici. Je vais l'agrandir juste un peu, donc quand vous cliquez dessus, il va tourner, cracher tous ces trois en haut. Ils vont se diviser en trois limites en place lorsque vous cliquez sur X car vous pouvez voir qu'il y a juste un peu de retard avant qu'ils ne descendent. Et enfin, cela revient à la couleur bleue comme à l'origine. Waas. Alors faisons ça. Une fois de plus, vous pouvez cliquer dessus que vous pouvez voir les bombes en place quand il est proche et ils vont sauter à tour de rôle en retour à plus. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 18. Bouton 2: dans cette vidéo. Nous allons créer ce bas, et quand vous cliquez dessus, il va changer d'un texte à l'autre, et une légère réflexion va aller de gauche à droite juste pour pimenter les choses un peu . Donc, si je le remue une fois de plus lorsque vous cliquez dessus, vous pouvez voir à quoi il ressemble. Alors commençons. Alors voici Havenaar Portable 500 par 500. Comme dans tous les autres exemples, je vais utiliser mon texte. Ochlik juste là. Bean a envoyé un message. Assurez-vous que c'est au milieu. Je suis allé utiliser open sense free cool front quand le placer comme. Alors ensuite, je vais utiliser l'outil rectangle yeux dessinés. Grand rectangle Matthews 2 à 5 avec 70 et nous allons utiliser 50 pour les coins arrondis. Double-cliquez sur le nom de la couche et l'appeler VT et la position juste en dessous sont envoyer un message et assurez-vous qu'il est au milieu aussi bien. Ensuite, je vais utiliser sans frontière. Ah, sentez la couleur de trois e. C. Six ff présentateur, et je vais utiliser le blanc pour notre texte, va simplement cliquer ici, et je vais regrouper ces deux et appeler ce bouton comme si suivant. Ce que je veux faire est de dupliquer ce contrôle de texte D. Je vais me cacher et voyons une partie, et je vais taper le succès comme ça et juste m'assurer qu'il est au milieu comme il est en moment. Et pendant que je vais faire, c'est haut. Montrez ceci et je vais créer un rectangle de plus juste ici au milieu, quelque chose juste ici, par exemple, et appeler la mosquée du disque parce que ce sera notre mosquée pour le texte. Je vais le placer au milieu, comme si au milieu, comme si enlevé la frontière. Et ce que je veux aussi faire, c'est que vous pouvez simplement la laisser telle qu'elle est, ou vous pouvez abaisser votre ville salariale si vous le voulez, juste pour que vous puissiez voir votre texte. Mais non, non, non. Laissons-le à zéro et voyons comment ça marche. Et ce que je veux faire maintenant, car le succès est de la déplacer juste au-dessus de cette mosquée. Donc quelque part par ici, voyons. Oui, parce que si je survolais ici avec ma touche fléchée du bas. Vous pouvez voir qu'il frappe la marque supérieure de notre mosquée. Laissons-le là. Donc peut-être pas juste un pixel comme ça. Et ce que je veux faire, c'est sélectionner les trois et faire un clic droit et choisir la mosquée avec la forme. Ou vous pouvez utiliser shift, contrôler em ou shift, les commander mosquée avec forme. Et comme vous pouvez le voir, la mosquée a créé. Mais ce qui se passe, c'est que ce succès du haut va disparaître, et nous allons voir juste le texte du message envoyé. Alors ne regardons pas ici et appelons le disque, bureau, mosquée de texte comme ça et ce que je veux savoir c'est de créer un rectangle sur tout comme je vais le déplacer juste au-dessus de notre dossier, et nous allons appeler cette réflexion comme ça, et je vais réduire son poids à quelque part ici enlevé la frontière parce que nous n'en avons pas besoin, et je vais double-cliquer dessus. Je vais sélectionner ces deux points en haut, tenir ma touche Maj et simplement les déplacer orteil quelque part ici, et je vais cliquer sur celui-ci, maintenir Maj un pour juste l'affiner un peu. Cliquez sur ce quart de travail entier 12 pour l'affiner un peu plus, et c'est fondamentalement tout. Nous avons créé notre réflexion. Tu peux jouer autant que tu le veux, mais j'ai trouvé ça assez bien. Donc ce que je veux faire maintenant est de dupliquer ce bouton afin qu'il contrôle D et le place juste au-dessus de notre réflexion. Et ce que nous voulons aussi est de sélectionner ceux-ci à clic droit et mosquée avec forme et cela va mosquée sont réflexion. Donc, ce que vous pouvez faire à ce stade, c'est que vous pouvez réduire l'opacité de cette réflexion, ou vous pouvez le laisser à 100%. C' est vraiment à toi de décider. Et appelons cette mosquée comme ça Donc à ce premier état, ce que vous voulez, c'est que les orteils déplacent le reflet par le bas, donc je vais cliquer dessus, maintenir ma touche Maj et simplement le déplacer dehors quelque part par ici. Et puis ce que nous voulons est de dupliquer ceci notre circuit de commande D et pour celui-ci. Nous voulons que la réflexion aille tout le chemin à travers et aller à l'extérieur du bouton d'offre comme ça, et nous voulons également changer la couleur du bouton. Donc, je vais utiliser une belle couleur verte comme 55 d 466 Une fois de plus, vous aurez tous ces fichiers dans les fichiers d'entraînement, sorte que vous pouvez les utiliser autant que vous voulez. Et ce que nous voulons à ce stade est de supprimer ce message d'envoi à l'extérieur. Donc je vais tenir le quart dans le bas arabe. Je vais appuyer quelques fois jusqu'à ce qu'il vous soit caché, comme ça. Et je vais placer le succès ici au milieu de notre bouton pour que vous puissiez tenir , déplacer et positionner comme ça. Et quand vous cliquez à l'extérieur, vous pouvez voir sur Lee succès. Ensuite, nous devons l'animer. Donc c'est le cas. Vous pouvez voir que nous avons seulement à nos ports, donc je vais cliquer sur le prototype, cliquer sur un bouton et le faire glisser orteil ici et seulement un par étape. En outre, toute viande est en dehors. Et pour la durée, utilisons quelque chose comme 0,6 seconde, ou vous pouvez utiliser une seconde. C' est vraiment à toi de décider. Donc, quand vous cliquez ici, pouvez-vous Roger, juste un peu quand vous cliquez dessus. Comme vous pouvez le voir, une belle réflexion arrive, et ce succès vient du sommet. Alors nous allons vérifier une fois de plus et vous pouvez voir à quoi cela ressemble. Je pense qu'il semble vraiment propre et simple, et il montre vraiment le point parce qu'il va du bleu au vert et ainsi que de l'envoi du message au succès. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 19. Bouton 3: dans cette vidéo. Nous allons créer ce bouton. Donc, lorsque vous cliquez sur, il va changer le texte, cette icône et changer l'icône et le texte à nouveau et fondamentalement aller de l'orteil animé attente. Comme vous pouvez le voir, c'est le chargement et enfin l'activer. Alors commençons. Donc, ce que j'ai ici est le port d'art ou 500 par 500 même Michael dans toutes les autres vidéos jusqu' à présent, et je vais créer le bouton. J' ai aussi ces deux icônes parce qu'elles vont nous faire gagner juste un peu de temps libre. Donc, je vais utiliser la couleur de trois e c. six FF centre. Je vais enlever la frontière. Ce que je veux, c'est d'avoir des bords mis à la terre 50. Et pour la taille, utilisons 2 à 5 blé 70. Donc, je vais positionner ce bouton au centre, appeler juste ici dans Bt et au centre, aller le déplacer en dessous, et je vais utiliser mon textile et la frappe active comme, alors assurez-vous que c'est de la gauche. Je vais le positionner pour être au centre comme ça, et je vais le déplacer, par exemple. Mais voir 12345 allergies, 50 de ce bord, ou on peut peut-être même y aller 60. Je pense que c'est bien. Utilisons la couleur blanche pour cela. Contrôlé les deux dupliqués. Je vais cacher celui-là. Je vais appeler celui-là en attendant. Et enfin pour la tortue. Dupliquons celui-ci. Cachez-vous en attente. Et pour le 3ème 1 appelons ceci activé comme ça. Et je vais orteil sélectionner les trois et l'a déplacé en dessous, comme ça. Et je vais sélectionner tout ce contrôle de chaleur G et froid, ce bouton comme ça. Et maintenant, nous devons créer une mosquée. Donc, pour ce faire, je peux utiliser le rectangle pour, et je peux dessiner une belle grande mosquée à quelque chose comme ça, et je vais la positionner pour être au centre de notre bouton comme ça. Je vais enlever la frontière, charger une ville 20 Je vais appeler cette mosquée comme, alors déplacez-le à l'intérieur de notre dossier, Sélectionnez tous les quatre et cliquez droit et Mosquée Juifs avec la forme. Je vais appeler cette mosquée et enfin, nous allons déplacer ce texte, donc d'abord va être activé et le dernier va être actionné. Donc j'ai besoin d'un bout sur le groupe de la mosquée juste pour que je puisse le faire. Je vais déplacer activé vers le haut parce que l'activation va être un 1er 1 En attente va être un 2ème 1 et activé va être notre troisième et dernier. Alors sélectionnons-les maintenant. Mosquée Jules avec forme. Appelez cette mosquée comme ça et je vais rapidement éloigner ces deux-là. Alors déplacez-les vers le haut, par exemple, comme ça. Et comme vous pouvez le voir, nous avons maintenant seulement activé et nous allons maintenant créer ces autres éléments. Alors créons un cercle que je vais faire, c'est une lèvre volée avec quelque chose comme ici. C' est une bonne position pour être au centre, on l'appelle cercle, et on va avoir la frontière sur les blancs et trois comme ça, et je vais la positionner à quelque part comme 123 Donc le troisième choix est de la gauche. Ce sera notre cercle, et nous allons utiliser cette icône simplement le positionner ici. Je vais rendre cette icône bleue et nous allons la déplacer pour être au centre de tout ce genre . Je pense que ça a l'air bien. Et peut-être qu'on peut le rendre juste un peu plus petit. Donc quelque chose comme ici. Ensuite, je vais placer les orteils la coche juste au-dessus, et je vais le faire glisser à l'intérieur et nous allons nous assurer qu'ils sont à peu près de la même taille. Donc quelque chose comme ça, je pense, fonctionne bien. Ensuite, ce que nous allons faire est de positionner cette coche pour être au centre comme donc assurez-vous que la flèche est au centre aussi bien qu'elle l'est. Et cette coche va avoir une couleur différente. Donc je vais essayer rapidement cette couleur maintenant, donc nous allons avoir une belle couleur verte. Donc nous allons utiliser cette couleur, qui est 55 D 466 Appuyez sur Entrée et je suis allé cacher tout cela rapidement, et ce que je veux faire maintenant est d'avoir dans ces cercles être dans leurs groupes séparés. Donc ce que je veux est de dupliquer celui-là, donc contrôler D et nous allons regrouper cette coche Marquer si contrôlée G et appeler cette coche . Comme ça. Et je vais baisser. Vous payez City 20 ? On va avoir le 2e 1 pour la flèche. Donc contrôle G, ça va être notre arabe, et nous allons les positionner comme ils vont avec ça. Donc je vais dupliquer le cercle une fois de plus, et je vais positionner le cercle juste en dessous de notre flèche comme donc je vais rapidement cacher la flèche pour le moment parce que ce que nous voulons est de créer cette forme qui va aller autour. Donc ce que je veux, c'est peut-être que nous pouvons l'appeler forme comme ça et ce que je veux est d'enlever la couleur de remplissage et nous allons ajouter un tiret de 50 et un écart de 50 aussi bien. Comme ça. Et nous allons cliquer autour de Gap parce que nous voulons que ces bords soient autour essentiellement. Donc c'est tout pour le processus de création. Maintenant, il est temps de tout animer. Donc je vais inclure la flèche en arrière. Je vais cacher la forme que je vais cliquer ici, appuyez sur le contrôle D et pour le second état. Ce que je veux, c'est déplacer un peu la flèche vers le haut, sorte que cela créera l'illusion qu'elle monte. Et nous allons également aller à réduire vous payer ville de cette flèche et nous allons orteils inclure une forme fondamentalement, mais dans la première forme de l'état ne devrait pas être caché. C' est mon erreur que Shape devrait avoir sous une ville hors de zéro. Donc fondamentalement, comme cela se déplace vers le haut, cette forme va apparaître, et juste ici au lieu de désactiver activer. Nous allons le déplacer ci-dessous, mais nous allons inclure l'attente comme ça, assurez-vous qu'ils sont au même endroit comme ça et simplement déplacer, activer et descendre ci-dessous. Donc ça va être notre deuxième état. Et à cet état est fondamentalement aller orteil Attends, um, un peu. Et puis dans l'État de Sturtz, ça va commencer à tourner un peu. Nous allons donc utiliser cette forme et nous allons la faire pivoter afin que vous puissiez maintenir votre touche Maj et tourner vers quelque chose comme celui-ci, par exemple, et nous allons avoir un état de plus. Mais au lieu de dupliquer celui-ci, je vais dupliquer ce 1er 1 comme ça et enfin, ce dont nous avons besoin, c'est l'état final. Donc ici, nous allons avoir cette couleur verte. Donc 55 D 466 comme ça au lieu d'attendre, nous allons avoir activé. Alors assurez-vous de le déplacer en bas jusqu'à ce qu'il se rencontre au milieu. Comme ça, assurez-vous de bouger en attendant et ce que nous voulons pour celui-ci, c'est que nous voulons cacher la forme, mais nous voulons inclure la coche comme ça. Et comme vous pouvez le voir, nous avons cinq différentes nos planches comme vous le devriez, et il change d'attente activé orteil. Ça va aux orteils Attends un peu. Cela va tourner, et il va enfin montrer activé à la fin avec un bouton de couleur vert. Donc non, il est temps de l'animer, et je vais vous montrer comment vous pouvez le faire. Donc, c'est vraiment simple. Vous pouvez cliquer sur le prototype, même cliquer sur le bouton, traîné ces poignée bleue juste ici. On va avoir un robinet. Aussi animer pour la transition est en dehors et la durée de 0,6 seconde. Maintenant, pour le deuxième état, vous allez utiliser le temps, alors choisissez le temps et pour le délai, nous allons choisir 0,6 seconde. L' assouplissement va être facile et la durée va être de 0,6 seconde. Faites la même chose pour celui-ci et faites enfin la même chose pour celui-ci. Et vérifions ça. Voyons ce que nous avons créé. Donc, quand vous cliquez dessus, il va changer d'attente. Cela va tourner à gauche et à droite, et il va montrer actionné, donc c'est vraiment facile. C' est très simple. Vous pouvez en faire un peu plus. Donc, par exemple, nous pouvons Peut-être quand vous cliquez sur ce, il va se cacher orteil dans cette flèche lorsque vous créez une mosquée juste au-dessus du même liquide pour le texte. Donc ça va cacher la flèche, et puis vous pouvez changer ce cercle Togo de saleté, couleur à coup. Et puis cette forme va tourner vers le haut afin que vous puissiez ajouter un peu plus de variation à ce design . Mais je pense que c'est vraiment un bon point de départ pour vous. C' est vraiment agréable, propre, facile, simple à créer, et vous pouvez ensuite ajouter à partir d'ici vous pouvez même mosquer cette forme pour qu'elle puisse apparaître d'ici . Vous pouvez sauter en arrière, orteil Icahn section hors discours et vous pouvez voir que nous avons créé cette icône et vous pouvez inclure cette animation dans cette animation de bouton afin qu'il puisse vraiment construire dessus. Et vous pouvez créer quelque chose de complètement différent de ce que j'ai créé dans cette vidéo . C' est tout pour cette vidéo, et je te verrai dans la prochaine. 20. Bouton 4: dans cette vidéo. Nous allons créer ce menu déroulant et vous avez cette flèche à l'intérieur du cercle, et quand vous cliquez dessus, il va se développer et la flèche va tourner le pied X pour que vous puissiez le fermer. Et vous avez ces éléments de menu à l'intérieur de cette boîte. Donc, lorsque vous cliquez sur la boîte à vêtements va s'effondrer en cercle et le X va retourner orteil flèche vers le bas une fois de plus. Alors commençons. Donc, comme d'habitude, j'ai le tableau d'art à 500 par 500. Créons un cercle rapide. Je vais utiliser cette couleur frapper contrôle C poids de contrôle basé dans et je vais enlever la bordure parce que nous n'en avons pas besoin. Et nous allons utiliser la taille de 54 par 54. Je sais que ça marche bien, je vais le positionner ici et l'appeler cercle comme maintenant, créons notre homme X. Cliquez ici, puis juste ici en utilisant le mental. Je vais frapper un animal d'évasion pour cacher le cercle pour que vous puissiez voir à quoi ça ressemble. Voyons ce qu'on peut faire. Nous pouvons utiliser la taille de trois comme ça, et nous pouvons utiliser autour de Kip pour que nous puissions le contourner. Ça s'appelle cette ligne une comme si il contrôlait le et le bas. On va appeler une ligne pour le stock. Un. On peut tourner à 35 comme ça et qu'est-ce que tu veux ? Tournons à 45 comme ça, et nous pouvons avoir un beau X et nous pouvons frapper le contrôle G pour les regrouper et appeler ça comme ça . Et nous pouvons retourner le cercle en arrière et nous ne pouvons pas changer la couleur de ces lignes orteil blanc. Je le fais ? Et nous pouvons regrouper ça aussi. Mais avant que nous le fassions, nous pouvons cliquer ici sur cet orteil juste ici, faire qu'ils soient au centre. Vous pouvez même désoigner cela si vous le voulez. C' est vraiment à toi de décider. Mais gardons le groupe et appelons ça près comme ça. Et nous allons regrouper ces deux-là et l'appeler à nouveau. Voyons voir. Ouais, ça a l'air bien, maintenant ce qu'il faut créer, c'est un rectangle. Donc, ce que je vais faire est de dupliquer dans ce cercle ou encore mieux. Créons un nouveau rectangle de cerveau et utilisons la taille 235 avec 235 comme si je vais enlever la bordure. Inclure la même couleur de remplissage. Et pour ces rectangles arrondis, utilisons 30 pour le rayon de coin, et je vais passer sur ce rectangle C'est bon. se déplace ci-dessous, et ce que je vais faire est de l'aligner avec ce cercle afin que vous puissiez frapper trois, par exemple, juste pour que vous puissiez abaisser votre ville de paie de celui-ci et la positionner Toby, aligner avec le bord supérieur de la cercle ainsi qu'avec le bord droit. Donc, ce que je veux faire maintenant est orteil ajouter du texte. Donc ce qu'il y a,par exemple,au par exemple, contrôle à domicile, l'A. Utilisons la vieille princesse comme nous l'avons fait. Ce que vous pouvez faire, c'est que vous pouvez l'aligner avec le cercle comme si aligné jusqu'ici. 1234 et 1234 Peut-être que vous pouvez utiliser pour aimer ainsi contrôler D et déplacer ce dernier et appelons celui-ci boutique, par exemple, comme ça, et assurez-vous qu'il est à 40 pour si vous pensez que c'est trop. Utilisons 20 juste pour que les choses restent simples. Déplacez celui-ci vers le bas. Ça va battre Blawg comme ça, et assurez-vous que c'est un 20. C' est, Et ce que nous voulons faire maintenant est de déplacer tout cela ci-dessous, de frapper là sur votre clavier ou d'augmenter votre ville de paie. Bon, donc et ce que je veux faire et maintenant, c'est de frapper le contrôle. D et moi voulons appeler cette mosquée parce que ce sera la mosquée pour tout le truc. Donc, je vais cliquer dessus tout le quart. Cliquez sur le rectangle cliquez avec le bouton droit et la mosquée avec la forme. Donc, comme vous pouvez le voir, fondamentalement rien ne s'est passé. Je vais appeler cette mosquée, et sur cette mosquée, je pars de ta base un peu, et ça va être tout, essentiellement pour notre rôle de conception. Et comme vous pouvez le voir, nous avons maintenant cette mosquée et que vous voulez faire Enfin, est de changer la couleur de ce texte orteil blanc comme ça, et c'est fondamentalement tout pour le processus de création. Assurez-vous que tout est bien aligné tel quel, et ce que vous pouvez faire est de regrouper ces deux et simplement les déplacer au centre. De vos ports. Je vais aux orteils. Développez-les maintenant et ce sera notre état final, fondamentalement. Je vais frapper le contrôle de l'aéroport. Je vais laisser ça comme ça pour le second état. Et pour le premier état, tout ce que vous avez vraiment à faire est de prendre votre mosquée, tenir votre touche de changement de vitesse et simplement de la rendre beaucoup plus petite jusqu'à ce qu'elle s'insère ici dans ce cercle. Et puis vous cliquez quelque part à l'extérieur. Comme vous pouvez le voir, il a caché cette mosquée. Donc, ce que je veux faire est de double-cliquer à l'intérieur et ils cliqueront une fois de plus sur cette ligne . Un que je vais positionner. C' est quelque part par ici, disons, comme si pourquoi ai-je cliqué sur la ligne pour la positionner jusqu'à ce qu'ils se rencontrent au centre comme ça  ? Pour que vous puissiez avoir cette belle forme de flèche et enfin, ce que je veux est de la déplacer au centre du cercle comme ça, et c'est fondamentalement tout pour la partie création. Maintenant, c'est animé. Vous pouvez frapper prototype et vous pouvez cliquer dessus, faites glisser la poignée bleue que nous pouvons utiliser robinet grosses nouvelles. Auto anime ce que l'utilisation est en dehors et peut-être 0,6 seconde et utilise les mêmes propriétés pour le dos. Donc, nous allons cliquer ici, et quand vous cliquez dessus, comme vous pouvez le voir, il saute. Flèche tourne orteil X, et lorsque vous cliquez dessus en arrière, il saute à l'état d'origine. Donc c'est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 21. Bouton 5: dans cette vidéo, nous allons créer ce joli bouton flottant, donc quand vous cliquez dessus, il va tourner orteil X et ce menu va apparaître et quand vous cliquez dessus en arrière, il va revenir en arrière plus changer la couleur et aller au milieu. Et si je clique une fois de plus dessus, vous pouvez voir cette légère animation que les éléments sont à venir a eu lieu. Et quand vous la fermez, vous avez encore la même animation. Alors commençons. Donc, pour gagner un peu de temps sur cette vidéo, je ne vais pas vous montrer comment j'ai tout créé. Parce que vous pouvez vérifier cela dans la vidéo précédente parce que nous avons la même taille pour ce bas. Nous avons créé cet ex a t exactement de la même manière que nous l'avons fait dans la vidéo précédente. Nous avons cette expérience. Nous avons cette mosquée à l'intérieur, et ce rectangle est exactement de la même taille que dans la vidéo précédente. Je viens d'ajouter un élément de plus ici pour le contact, et j'ai inclus ces icônes ici. Et si je les sélectionne tous et vous montre l'espacement. Donc, si nous frappons Maj et flèche gauche 12, vous pouvez voir là à 20 pixels du bord gauche et pour le texte si elle avait décalé un à leurs 20 pixels de cette icône. Toutes ces icônes sont positionnées au milieu parce que la maison est la plus grande icône. Et tous ces éléments sont au milieu, à côté de l'icône de la maison. On a cette mosquée sur le dessus. Donc fondamentalement la même mosquée que nous avons utilisée dans la vidéo précédente. Donc, fondamentalement, j'ai dupliqué cette couche d'érection, placé sur le dessus, sélectionné tout droit, cliquez sur couche avec la mosquée et tout est maintenant à l'intérieur de cette mosquée. Et enfin, nous avons divulgué. Donc fondamentalement, comme je l'ai dit, exactement la même configuration que dans la vidéo précédente afin que vous puissiez le regarder et apprendre comment j'ai tout créé. Donc, fondamentalement, ce sera notre état final et nous devons créer notre premier état. Donc, pour ce faire, je vais frapper le contrôle. D. Donc, comme je l'ai dit, c'est notre état final. C' est notre premier état. Donc, je vais toucher les orteils et cliquez sur Insight. Je vais cliquer ici, tapant trois e donc trois e c six ff présentateur d'avoir cette belle couleur bleue et ce qui va faire avec cela est que je vais faire tourner. Donc je vais tenir au centre de presse moins 45 pour obtenir cette icône plus. Et ce que je vais aussi faire est de cliquer ici, puis juste ici, orteils positionnent juste au milieu de notre port. Ensuite, sur les orteils, cachez-le rapidement pour que je puisse vous montrer ce que j'ai fait avec ces articles. Donc, comme vous pouvez le voir, tous ces articles sont maintenant à l'endroit de notre port. Mais dans la première planche de départ, nous allons les espacer juste un peu pour que nous puissions avoir cette belle animation au fur et à mesure qu'ils entrent en place. Vous pouvez donc cliquer sur le 1er 1 qui est l'ensemble de Michael. Et une fois de plus, vous obtiendrez tous ces éléments dans les fichiers d'entraînement et vous pouvez jouer avec lui afin que vous puissiez tout sélectionner. Mais je ne vais pas sélectionner tous Michael et la maison bientôt aller orteils Tenez ma clé de contrôle. Cliquez et cliquez pour que je puisse les sélectionner et sur le reste d'entre eux je peux maintenir le décalage dans la flèche du bas 1234 par exemple. Comme tout un orteil contrôlé, les sélectionnés ces pour déplacer à la fois la moelle 1234 et contrôlé le sélectionner ces deux et enfin déplacer 1234 juste pour que je puisse avoir un peu plus d'espacement entre chacun de ces éléments. Et maintenant ce que je dois faire, c'est que je vais les sélectionner tous. Je vais donc cliquer sur l'icône d'accueil. Je vais cliquer sur le contact, et ce que je vais aussi faire est essentiellement les pousser tous vers le bas et la gravité hors. Votre effet dépend de combien vous les poussez vers le bas. Donc je ne vais pas les pousser jusqu'au bout. Je vais juste le placer, par exemple, ici et enfin pour la mosquée. Il y a les vêtements de retour. Je vais cliquer sur la mosquée. Je vais maintenir le décalage ancien et le clic gauche, et je vais juste aller sur les pieds, décide d'ici, et quand vous cliquez quelque part dehors, tout va être caché, comme vous pouvez le voir ici. Donc c'est fondamentalement tout pour notre design. Je vais fermer ça et passer au prototype. Je vais cliquer sur notre bouton et traîner l'orteil ici. Nous allons à votre pas ou orteil animer Facile une sortie et la durée 0.6 seconde. Si vous voulez que cet orteil dure plus longtemps, vous pouvez utiliser, par exemple, 0,8 ou une seconde. Quoi ? J' ai trouvé que cela fonctionnait bien et faites glisser la même poignée en arrière. Et si je clique ici pour l'afficher et que vous pouvez voir à quoi il ressemble pour que tous soient en place. Vous pouvez cliquer ici, et comme vous pouvez le voir, tous viennent au même endroit et vous avez cette belle animation, et ce plus tourne orteil X et change de couleur bien maintenant. Une dernière chose que j'ai oublié de mentionner est que j'ai ajouté une légère ombre. Donc, si je clique dans le cercle à l'intérieur de cette fermeture, vous avez cette ombre. Donc c'est à 036 et si je clique ici, il utilise ce 000 donc fondamentalement couleur noire à 16%. Ou payer ville, et pour réduire ou augmenter vos bases, vous pouvez simplement déplacer ce briquet, mais gardons le retour à 16%. Donc c'est fondamentalement tout pour cette vidéo. J' espère que ça vous a plu, et je vous verrai dans la prochaine. 22. Bouton 6: dans cette vidéo, nous allons créer ce commutateur à bascule afin que nous ayons le X juste ici, et quand vous cliquez dessus, il va changer la couleur et aller à cocher Mark. Comme vous pouvez le voir, il sorte de morphs en coche Mark, et quand vous cliquez dessus en arrière, il change l'orteil arrière X. Donc, une fois de plus de X à cocher de Jack Mark retour à ex, tout changement appelant ainsi. Alors commençons. Donc, comme d'habitude, j'ai mon port à 500 par 500 quand utiliser le clic mental juste ici et là , je vais frapper évasion. Il a utilisé trois pour la taille et cliquez ici pour ajouter le kep rond. Si nous zoomons un peu plus près, vous pouvez voir à quoi cela ressemble. Et je vais l'appeler Line 1 Control de et ça va être une ligne à la première fois. Utilisons 135 sur le 2ème 1 Utilisons 45 comme ça, et je vais orteil faire un beau cercle ou 54 par 54. Donc, comme ça, je vais l'appeler cercle comme ça, et je vais m'assurer que tout est au milieu comme ça. Je vais bouger les pieds sur ces deux lignes au milieu, comme ça. Et ce que je vais faire maintenant est de sélectionner cette couleur touche contrôle C clic sur le champ Contrôle V, et je vais supprimer la bordure des lignes. Je vais choisir la couleur blanche comme ça, et je vais les regrouper tous et les appeler cercle comme ça. Et ce que je veux faire maintenant, c'est m'assurer qu'il est au milieu, et je vais utiliser l'outil rectangle. Et pour la hauteur, nous allons utiliser 54 donc fondamentalement la même hauteur que le cercle. Donc, pour la hauteur comme celle-ci et pour l'esprit, utilisons le double. Donc ça utilise 108 comme ça et on va utiliser coin, rayon ou 50. Cela fonctionne bien, positionnez-le pour être au milieu et appelé celui-ci, mais pas biggie, comme ça. Et pour ce premier état, nous allons le déplacer sur ce bord gauche comme ça jusqu'à ce que la viande ici, donc c'est fondamentalement notre premier état. On va frapper le contrôle de Dion Yard pauvre pour créer un second état. Et pour celui-ci pour la couleur du cercle, utilisons trois pc six f f centre de presse et ce que je veux faire maintenant est tourné un peu comme ça, par exemple, comme ça. Et je vais le déplacer jusqu'au bord comme ça. Et ce que nous voulons faire maintenant, c'est mourir un peu plus profondément et créer une coche. Donc je vais double-cliquer sur cette ligne. Je vais le déplacer quelque part par ici. Je vais aussi l'étendre un peu. Donc quelque part par ici, voyons quelque chose comme ça d'une façon de parler de fuite quand cette autre ligne assurez-vous qu'ils se rencontrent au milieu comme ça, et je vais cliquer sur cette ligne et simplement la réduire à quelque part par ici. Je pense que ça a l'air bien, et je vais sélectionner ces deux formes. Assurez-vous qu'ils sont au milieu de notre cercle comme ça, et si ça ne vous plaît pas, vous pouvez le changer. Vous pouvez vous assurer que vous sélectionnez et la forme que vous voulez et que vous pouvez vous déplacer. Ces points sont à peu près autant que vous le souhaitez, mais je pense que ça a l'air bien. Maintenant. Allons animés. Je peux cliquer sur le prototype, cliquer sur mon commutateur total et faire glisser la poignée juste ici. Vous allez à vous étape ou à animer pour la transition. Facile maintenant, et nous pouvons utiliser 0,6 seconde, et nous pouvons utiliser la même action pour revenir en arrière et voir à quoi cela ressemble. Donc, quand vous cliquez dessus, il va changer la couleur et de se transformer en arrière, remorquer cette icône de coche, et quand vous cliquez dessus à nouveau, il va orteil plus de retour à la X. Maintenant, vous pouvez jouer avec différentes mosquées, et, par exemple, vous pouvez créer un orteil de mosquée d'arrière-plan ici, donc cela va changer au fur et à mesure que vous changez cela. Alors faisons vite ça. Et, par exemple, nous pouvons choisir la couleur Toby la couleur de ceci et pour le cercle. Nous pouvons utiliser la couleur de bordure blanc cassé , par exemple , et pour ce cercle, nous allons également utiliser la couleur de bordure blanc cassé. Mais pour celui-ci, utilisons cette couleur afin que vous puissiez l'échantillonner rapidement à partir d'ici et pour la bordure. Vous consommez aussi Plett, comme si vous aimez à quoi cela ressemble et maintenant nous allons rapidement prévisualiser les bois, donc quand vous cliquez dessus, vous pouvez voir les changements de couleur si c'est quelque chose que vous voulez. Sinon, vous pouvez même changer les couleurs d'arrière-plan. Ainsi, par exemple, vous pouvez changer ce Toby une couleur plus claire, puis il peut passer de couleur plus claire à cette couleur blanche. Mais c'est à toi de décider et tu condamnes l'expérience avec ça, donc c'est tout pour cette vidéo, et je te verrai dans la prochaine. 23. Bouton 7: dans cette vidéo, je vais vous montrer comment faire ce bouton, qui dit faire le paiement et a cette couleur bleue. Lorsque vous cliquez dessus, il change de couleur. Ce texte apparaît avec ces points changeant et change enfin de couleur une fois de plus pour réussir . Alors voyons ça une fois de plus. Donc, lorsque vous cliquez dessus, ces points changent. Comme vous pouvez le voir, il change de couleur une fois de plus, et il change les piles pour le succès. Alors commençons. Donc, une fois de plus, mes ports sont installés à 500 par 500. Créons un bouton. Je vais utiliser l'outil rectangle, rectangle de Dragon Eye et nous allons utiliser 2 à 5 poids 70 dire, comme dans tous les autres exemples. Et pour le coin se prépare, utilisons 50 Retirons la bordure et utilisons cette couleur. , Une fois qu'il veut,il veut une belle couleur grise, et on va l'appeler Bt et maintenant qu'on utilise le texte et pour le texte. Écrivons quelque chose comme faire des paiements, assurez-vous que ça va du milieu. C' est un sens ouvert 20 semblent comme dans nos autres exemples, nous allons changer la couleur du texte blanc, et vous allez le positionner au centre comme alors assurez-vous qu'ils sont ennuyés bateau au centre. Donc maintenant, en gros, nous avons ces deux-là. Nous avons le bouton et nous avons le texte. Maintenant, cachons le texte un instant et nous allons travailler sur notre fond pour que nous puissions en faire quelques copies. Donc, nous allons utiliser le contrôle D pour faire une copie méchante et j'appellerai cette mosquée bouton. Comme ça. Et pour ces deux-là. Appelons ce bouton bleu donc et je vais tenir ma vieille clé et l'agrandir un peu . Et ça va être notre bouton bleu. Donc, nous allons utiliser la couleur trois e c six f f centre de presse. Et comme vous pouvez le voir ici en arrière-plan, c'est maintenant bleu. Je vais en faire une autre copie et appeler ce bouton vert si vert. Et pour cette couleur verte, laissez-moi vérifier rapidement ma couleur. Nous allons utiliser cette couleur donc 55 D 466 Et une fois de plus vous aurez ceci dans vos fichiers d' entraînement. Mais comme vous pouvez le voir, c'est juste ici. Maintenant, je vais les sélectionner tous et ce que je vais faire est de sélectionner tout et de frapper le contrôle. G pour faire le groupe principal Donc bas no. Je vais sélectionner tous nos boutons. droite. Cliquez dans la mosquée juive avec la forme ou le décalage. Contrôlez les ou le décalage. Commandez-les comme vous le souhaitez. Et je vais appeler cette mosquée du fond comme ça. Et ce qu'on va faire, c'est qu'on va aller aux pieds, je crois que la couleur principale, Toby Blue. Laisse-le ici et je vais bouger la couleur verte juste ici en haut. Donc quelque part par ici, et puis il clique dehors. Vous pouvez voir que nous avons cette belle couleur bleue. Maintenant, nous allons travailler sur notre texte. Donc nous avons fait le paiement, je vais faire une autre copie de contrôle D et je vais appeler ce traitement comme ça et créons nos trois points. Donc, je vais faire juste beau grand cercle enlevé la frontière et appelé le cercle un contrôle de frappe . De a appelé ce cercle aussi, et a touché le contrôle. De a appelé ce Cercle trois comme Donc je vais déplacer ces deux et je vais les avoir à cinq ans, comme vous pouvez le voir et enfin faire la même chose avec le numéro trois. Donc, si nous déplaçons ce numéro trois avec ma touche fléchée gauche, donc 12345 Comme vous pouvez le voir, c'est cinq pixels de cette bordure, ainsi que cinq pixels de cette bordure. Donc, je vais déplacer tous ces cercles et juste en dessous du traitement. Sélectionnez le traitement ainsi que les cercles et assurez-vous qu'ils sont au milieu de notre fond, comme ils le sont, et assurez-vous qu'ils sont au milieu comme ça et assurez-vous que tous ces cercles sont au milieu comme Eh bien. Ou si vous ne le faites pas, vous pouvez les déplacer quelque part par ici. Donc fondamentalement juste au bord inférieur de notre texte, je pense que cela fonctionne un peu mieux. Et enfin, nous allons peut-être les déplacer à quelque chose comme 10 ou 20 pixels. Voyons ce qui fonctionne mieux. Ouais, bougeons-les. C' est 10. Sélectionnez, euh à nouveau et assurez-vous qu'il est au milieu comme si maintenant Enfin, cachons tout cela pour que nous puissions voir ce Make payment hit control de une fois de plus, positionnez-le tout le chemin vers le haut, cacher pour faire paiement et ce sera notre succès comme ainsi et assurez-vous que le succès est au milieu. Comme tous ces autres. Donc, ce que nous allons faire maintenant est d'inclure tout en arrière et nous allons en fait créer une nouvelle forme juste au-dessus de ce qui va être notre mosquée. Donc, vous pouvez appeler ça une mosquée comme ça et vous assurer que cette forme est au centre de notre cercle, comme ça. Donc ce que je vais faire avec la mosquée est haut la frontière cacher le champ parce qu' on n'en a pas besoin. Je vais sélectionner la mosquée, maintenir le décalage, sélectionner tout le reste ci-dessous, clic droit et mosquée avec forme. Je vais appeler cette mosquée de texte comme ça. Et ce qui va réellement faire est de tout supprimer sauf faire des paiements. Donc je vais tenir la touche Maj et la flèche vers le haut. Non, pas tout à l'extérieur de notre mosquée. Et quand je clique à l'extérieur, vous pouvez voir qu'il ne reste qu'avec ce texte de paiement. C' est exactement ce qu'on veut. Donc ce que nous allons faire maintenant est de dupliquer ce notre tableau donc je vais cliquer dessus, il contrôle et D, et maintenant nous allons commencer à faire ces changements. Donc, à l'intérieur de la mosquée de texte, nous devons positionner le traitement ainsi que ces cercles dans le cercle central en déplaçant flèche inférieure jusqu'à ce qu'ils se rencontrent au centre comme ceci et simplement se déplacer. Faites le paiement ci-dessous jusqu'à ce qu'il soit hors de vue. Et pour la mosquée du bas, utilisons la couleur bleue. On va l'enlever comme ça. Et si je clique dehors, il nous reste maintenant avec ce super bouton. Donc c'est tout pour cet état. Et on va en avoir un autre et un autre. Donc, dans ce 1er 1, nous allons faire tourner ces points. Donc je vais localiser le cercle numéro deux et le numéro trois, sélectionnez le bateau. curseur ici avec mon clic de souris appelé Ma touche Maj et faites-les pivoter comme ça, donc cercle complet. Vous pouvez fermer ceci et maintenant dans notre dernier ici, vous pouvez faire la même chose à nouveau. Donc, à l'intérieur de la mosquée de texte. Mais maintenant on encercle un et on encercle, aussi, donc je vais à la maison une touche majuscule, les fais tourner en plein cercle comme ça. Je vais fermer ça et enfin faire un état final. Donc ce sera notre bouton vert pour que vous puissiez ouvrir tout le texte ouvert, mosquée, cliquer sur le succès, le positionner au milieu comme ça Et maintenant je vais sélectionner les cercles de traitement et les déplacer hors de vue comme ça. Et enfin, je vais ouvrir la mosquée et cliquer sur le bouton vert et la positionner au milieu comme moi. Si je clique dehors, vous pouvez voir que nous avons maintenant cette couleur verte, et c'est fondamentalement tout. Donc maintenant, nous devons tout prototyper. Donc, ce que je vais faire est de cliquer sur notre bouton et de le faire glisser jusqu'ici. Et à partir d'ici, je veux utiliser des animates automatiques comme alors je vais choisir la facilité en 0.6 secondes. Comme ça maintenant pour les trois prochains états. Je veux dire, quatre états, en fait, on va utiliser le temps, alors traînez comme ça. Utilisez le temps maintenant pour le délai, quand utiliser 0,6 seconde. Facile à sortir. Donc tout est comme il se doit. Et pour la durée, vous pouvez le laisser à 0,6 seconde. Donc, vous pouvez cliquer ici, glisser la bougie bleue cliquez ici, glisser la bougie bleue une fois de plus dans ce dernier état. Et si nous frappons l'aperçu ici, si je l'agrandit et clique dessus, vous pouvez voir que nous avons cette belle animation et il montre maintenant le succès à la fin. Donc, si je clique une fois de plus, vous pouvez voir que nous avons cette belle animation et il a du succès à la fin. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 24. Bouton 8: dans cette vidéo, je vais vous montrer comment vous pouvez créer cette annonce en bas, et quand vous cliquez dessus, il va se diviser en quatre parties, et nous allons rester avec ce X au milieu. Et quand vous cliquez, quand le X tout va s'effondrer dans le remorquage, un bouton et le X va revenir à plus. Alors commençons. Donc, ce que j'ai ici, c'est que j'ai quatre icônes différentes, fondamentalement les mêmes que j'ai utilisées avant. Et j'ai ce plus au milieu, fondamentalement le même plus que nous avons utilisé auparavant dans la vidéo précédente. Donc, comme vous pouvez le voir, nous avons ces deux lignes et je vais les faire tourner un peu plus tard et nous avons le cercle. Et pour un cercle, nous avons 80 avec 80 et pour ces autres cercles il y a un peu plus petit. Donc 72 par 72. Alors ils vont aux orteils. Ajoutez cela un peu plus de cet intérêt visuel quand ils se séparent de ce cercle principal, donc je les ai positionnés 20 pixels vers le haut, alors décalez 12 Comme vous pouvez le voir dans toutes les directions et nous allons commencer à animer tout. Maintenant, comme d'habitude, vous avez ceci dans votre fichier d'exercices pratiques afin que vous puissiez ouvrir leur fichier d'exercices pratiques et utiliser ces icônes pour vos autres projets. Notre expérience avec un peu plus. Je vais cliquer ici, appuyer sur le contrôle et D pour ce second état. Et pour ce premier état, fondamentalement, je vais sélectionner toutes ces icônes. Alors cliquez sur le 1er 1 appelé Shift Cliquez sur le dernier et cliquez ici et puis ici pour les placer tous au milieu. Et ils sont tous derrière cette annonce, fondamentalement. Et dans ce second état, ils vont se développer jusqu'ici. Mais ce que nous allons faire maintenant, c'est que nous allons baisser l'opacité de ce cercle, et nous allons faire pivoter nos lignes comme alors assurez-vous que vous incluez l'opacité avant de passer de plus toe X donc, comme ceci et nous allons changer la couleur de la bordure de ce bleu supplémentaire comme ça. Et maintenant, nous allons baisser l'opacité de ceci, et c'est essentiellement tout pour la partie design. Et pour la pièce prototype, vous pouvez simplement cliquer ici, faites-le glisser vous pas. Utilisez l'animation automatique que vous pouvez utiliser est en dehors. Et, par exemple, 0,6 seconde fonctionne bien et enfin pour le dos. Utilisons le même bouton, et il va garder les mêmes paramètres. Donc, quand je clique ici, appuyez sur l'aperçu et cliquez à l'intérieur, vous pouvez voir qu'il se divise en quatre boutons différents que l'utilisateur contient cliquez, ou s'ils ne veulent pas cliquer, en prenant le clic ici, et c'est va sauter au fond d'origine. Vous pouvez jouer avec. Vous pouvez les faire pivoter si vous le souhaitez, donc quand ils viennent derrière ce bouton bleu, ils vont tourner un peu. Faites un cercle complet, par exemple, puis un terrain dans le même espace que celui-ci. Donc tu peux vraiment jouer avec lui. Vous pouvez faire plus d'effets. Ainsi, par exemple, vous pouvez laisser cet orteil, avoir une bordure, et ensuite vous pouvez augmenter cette bordure à, par exemple, cette attente juste ici, mais pas de tout le bouton mais hors du cercle lui-même. Donc, utilisez la bordure, utilisé la même couleur hors de ce exclu, rempli, puis augmenter la taille. Par exemple, comme si vous pouvez les combiner tous, par exemple, Et puis voyons à quoi cela ressemble. Alors peut-être que je peux tout positionner derrière, comme ça, et voyons comment ça marche. Donc, comme vous pouvez le voir, il se divise en quelque sorte dans le remorquage pour différentes icônes, puis s'effondre fondamentalement dans le remorquage. Une icône de sorte que vous pouvez faire ces types de changements hors si vous voulez, mais je pense que cela fonctionne assez bien sur fondamentalement, je pense que cela montre l'intention derrière ce bouton. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine. 25. Bouton 9: dans cette vidéo, je vais montrer comment vous pouvez créer est Donald Bottom. Et quand vous cliquez dessus, vous pouvez voir ce genre de progrès vert et la coche à la fin pour indiquer que le Donald est terminé. Et si un joueur revient une fois de plus, vous pouvez voir à quoi cela ressemble. Alors commençons. Donc, comme d'habitude, nous commençons par er port de 500 par 500 J'utilise cette icône. Je vais utiliser l'outil rectangle dragon que je parle rectangle, et nous allons utiliser comme nous l'avons fait pour tous les boutons précédents. Donc on va utiliser 5 avec 70 comme ça. Et je vais utiliser le rayon de coin de 50 et je vais le positionner dans le Dragon du milieu ci-dessous appelé son Bte Dan par ainsi et je vais faire un duplicate er er il. Donc, je vais frapper le contrôle d appeler cette couleur verte comme ainsi et frapper le contrôle de une fois de plus appelé cette mosquée et pour cette couleur verte, j'ai la couleur déjà sélectionnée, alors laissez-moi rapidement le copier. Donc ça va être cette couleur donc 55 D 466 Et si je vais de l'avant et cacher la mosquée, vous pouvez voir à quoi ça ressemble. Donc, sur cette mosquée, nous allons cacher la frontière et le champ aussi. Et pour cette couleur verte, nous allons cacher la frontière comme ça et nous allons les sélectionner pour faire un clic droit et une mosquée avec forme, comme ça va appeler cette mosquée. Et ce que je veux faire pour cette couleur verte est de frapper ma vieille clé et simplement étendre les côtés sont allés à tenir ma touche de changement dans le bas tout le chemin vers le bas comme ça. Et quand je clique quelque part dehors, vous pouvez voir que cette mosquée a été créée. Maintenant que le fond est terminé, ce que nous devons faire est de créer une coche. Donc, nous allons d'abord regrouper tous ces éléments pour qu'elle appelle ce bouton comme ça. Et je veux créer une belle grosse coche. Donc je vais peut-être simplement copier ces formes ou utiliser mon stylo tal quelque part par ici. Peut-être qu'il s'est échappé. Je vais orteil autour de kep pour la taille et réduit à, et c'est fondamentalement qu'il laisse appeler sa coche comme ça, et je vais le positionner pour être au centre. Alors, je vais faire comme ça. C' est élevé, cette charge maintenant. Donc, ce n'est pas déroutant pour nous. Positionnez-le au milieu comme ça. Et c'est fondamentalement tout pour votre design. Nous allons déplacer la coche juste en dessous pour télécharger. On va aller aux pieds, réduit l'opacité comme ça. Mais peut-être que nous pouvons inclure la frontière Toby White parce que cette coche va être blanche une fois révélée. Donc c'est fondamentalement tout pour 13 processus de conception. Maintenant, je vais fermer ce bouton et je vais faire une copie rapide. Et dans celui-ci, ce que je veux faire, c'est tout simplement de payer City sur cette icône Donald ? On peut frapper le contrôle de une fois de plus. Ce que je veux faire dans celui-ci, c'est ramener cette couleur, donc je vais l'inclure. Donc c'est cliquer dessus comme ça, et je vais le positionner pour être au centre comme ça. Comme vous pouvez le voir, le fond est maintenant vert, et ce que je veux aussi est de frapper le contrôle D Et maintenant nous allons travailler sur une coche Mark. Donc, à ce stade, nous allons double-cliquer à l'intérieur et nous allons peut-être même pas édité pour le moment . Alors faisons d'abord le dupliquer Control De. Donc, en gros, ça va être notre Etat Tante, et ça va être un Etat moyen. Alors maintenant, je vais savoir Cliquez dessus. Je vais aller aux pieds, amène cet orteil pointu ici. Et sur ce 1er 1, nous pouvons aussi le montrer pour l'instant, Double-cliquez, et nous allons amener ces deux points jusqu'au point de départ comme ça, jusqu' à ce que vous obteniez le cercle, je vais abaisser votre ville de paie à zéro. Et ce que je veux, c'est copier cette couche. Donc, je vais frapper le contrôle C. Je vais fermer ceci et je vais aller orteil fondamentalement basé sur toutes les autres couches afin que nous ayons la même couche. Donc, il passe en dessous du téléchargement de sorte que lorsque nous commençons à l'animer, il fonctionnera correctement dans tous les états trill d comme ça Et vérifions rapidement si nous avons tout obtenu correctement, vous devriez avoir cinq nos planches. Donc, comme vous pouvez le voir, nous en avons cinq. Alors maintenant, commençons le prototypage. Donc, je vais cliquer sur un prototype cliquez ici. Je vais le traîner jusqu'ici et pour celui-là. Ce qu'on veut, c'est qu'on va utiliser la gâchette. Il n'utiliserait pas de viande auto. Nous allons utiliser easy and out comme ça et nous allons utiliser 0.3 secondes maintenant pour ce second état. On va utiliser le temps. Et pour le temps ici, nous allons utiliser le délai de 0,6 seconde. Animer aussi. L' assouplissement et la direction vont prendre une seconde parce que nous voulons lui donner un peu de temps jusqu'à ce qu'il se remplisse. Et il révèle cette couleur verte. Maintenant, pour ce prochain état. Nous voulons également utiliser le temps 0.6 comme délai. Facile et décontracté. Mais ici, nous allons utiliser 0,4 seconde. Et enfin, pour notre moins état, ce que nous voulons, c'est aussi utiliser le temps pour le retard. On va utiliser 0,0 seconde. Donc, fondamentalement zéro seconde facile. Une sortie et la durée off 0.4. Alors nous allons obtenir un aperçu une suite. On dirait que, comme vous pouvez le voir, nous avons notre fond. Je vais cliquer dessus. Ça va disparaître. Ça va se remplir. Et maintenant, nous avons cette coche. Alors nous allons voir qu'une fois de plus va remplir. Et nous avons cette coche pour indiquer que la vieille poupée est terminée. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine. 26. Bouton 10: dans cette vidéo, nous allons créer ce fond de partage social, donc quand vous cliquez dessus, il va se développer et ces icônes vont apparaître. Et quand vous voulez le fermer en arrière, vous pouvez cliquer ici, et il va fermer en arrière et révéler à nouveau l'icône de partage. Alors commençons. Comme d'habitude, nous avons notre port ou 500 par 500. Et pour couper quelque chose de court, je l'ai basé. Certaines de ces icônes en remorquage augmentent notre vitesse. Tout d'abord, créons un cercle. Alors je vais choisir le tabouret Ellipse. Je vais aux orteils. Placez-le à 80 par 80. Assurez-vous qu'il est complètement au centre comme donc je vais enlever la bordure incluse couleur bleue remplie trois d six c six ff centre de presse et je vais essentiellement le déplacer ici. Je vais appeler ça un cercle, et je vais placer l'icône de partage en vue, et je vais m'assurer qu'ils sont au milieu comme si je vais changer la couleur de l' icône de partage à cette couleur blanche. Je vais les regrouper et appeler ce bouton comme ça Ou vous pourriez aller le bouton de partage comme vous voulez le prochain, nous allons créer le X. Donc quelque part par ici à quelque part par ici serait frapper évasion Ce serait un trois. Ou peut-être que c'est aussi. Oui, deux, c'est bon pour Kep. Je vais appeler cette ligne un Control De et sur ce fond me demander quand utiliser la ligne à tous les deux devrait être blanc et a accepté de cacher une part pour l'instant Quand ce 1er 1 Utilisons 135 Et le 2ème 1 Utilisons 45 comme ça Et je vais les positionner dans le centre comme ça et comme ça. Donc, pour être parfaitement au centre de ce cercle, je vais inclure la part que je reviens, mettre sur le dessus et je vais réduire votre ville de paie de cette hache pour l'instant. Ensuite, nous allons créer notre rectangle, qui va contourner toutes ces icônes. Et pour ce faire, nous allons utiliser l'outil rectangle et nous allons vérifier notre bouton et voir le cercle est 80 par 80. Donc, nous devons être 18 série de hauteur et pour laquelle nous pouvons vous essentiellement 3 20 ou quelque chose comme ça. Nous pouvons utiliser 50 pour le rayon de coin et pour la couleur, laissez-le rapidement choisir cette couleur déjà créée. Donc c'est beau, couleur gris doux et c'est B E B E B E B E E B E E E E B E E E B E E E B E E E B E E B E E B E E B E E B E E Ensuite je vais le placer quelque part ici jusqu'à ce qu'il rencontre le bord gauche ... , Il va l'appeler beachy comme si positionnez-le en dessous de tout, et ce que je veux faire maintenant est, par exemple, nous pouvons avec 40 pixels, alors sélectionnez toutes ces icônes de médias sociaux. Maintenez le décalage. 1234 Le D Select Facebook fait la même chose pour celui-ci. Donc 1234 ils sélectionnent Twitter et font enfin la même chose pour celui-ci. Donc 1234 et c'est fondamentalement tout. Maintenant, nous pouvons commencer notre deuxième état. Mais avant de faire son premier groupe, tous ces ensemble contrôlent G appelé ces icônes comme ça. Et si vous pensez que cette couleur est un peu trop sombre, vous pouvez abaisser votre pâteux. Mais ce que j'aime faire est simplement de choisir mes icônes pour être blanches, et maintenant tout fonctionne comme il se doit. Et bien sûr, vous pouvez tout positionner pour être au centre comme ça. Mais sur ce premier état, utilisons-le d'abord comme ça et changeons-le. Touchez le contrôle D Et maintenant, créons notre deuxième état. Donc entendre que c'est un second état. Mais assurez-vous que tout est au centre il est. Et assurez-vous de tout aligner correctement sur celui-ci. Et le 2ème 1, nous allons inclure les lignes de retour, et nous allons réduire votre ville de paie de notre icône de partage comme si c'est essentiellement notre état final . Et pour ce premier état, nous allons placer le fond au milieu comme ça. Et ce que nous voulons aussi, c'est de réduire l'opacité de ces icônes comme ça et de déplacer cette icône de BG pour être au centre de notre cercle quelque part ici, donc peu importe type de forme que vous avez, donc si je cache ça, vous pouvez voir que ce n'est pas un cercle complet. Ça n'a vraiment pas d'importance. Mais c'est important qu'il soit au centre caché par cette icône, fondamentalement. Alors maintenant, nous allons rapidement prototyper tout. Donc, ce que je vais faire est de cliquer sur un prototype, cliquer sur l'icône, faire glisser jusqu'ici. On va utiliser l'étape. Nous allons utiliser l'animation automatique, facile et à partir d'ici invigoration de 0,6 seconde. Et nous allons utiliser la même interaction pour ici. Donc Teppo pour animer Easy maintenant en 0.6 seconde. Alors maintenant, quand je saute ici, cliquez sur Aperçu, cliquez ici. Vous pouvez voir à quoi ça ressemble. Donc, il se révèle fondamentalement. Modifie l'orteil X, et lorsque vous cliquez pour fermer, il revient à partager. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 27. Boutons Xd File: dans cette vidéo, je voulais vous montrer les boutons. Exe le fichier. C' est le fichier où toutes les animations sont contenues. Donc, sur les émissions de toutes les vidéos dans cette section hors du cours, et vous pouvez rapidement sauter à l'intérieur. Vérifiez si vous avez tout obtenu correctement. Vous pouvez copier des icônes de ce fichier si vous ne les avez pas ou si vous ne voulez pas les télécharger ailleurs, vous pouvez les utiliser à partir d'ici pour des projets personnels et commerciaux. Vous pouvez copier et coller ces animations, puis apporter des modifications ultérieurement dans vos propres fichiers . Et vous pouvez également les utiliser dans votre travail U Y ou UX. C' est vraiment à toi de décider. Mais je donne. Je vous donnerai la pleine autorisation d'utiliser ce fichier comme vous le souhaitez, essentiellement pour votre travail personnel et commercial. Et ce que je veux aussi te montrer, c'est ça. J' ai donc créé ces actifs ici. Donc, ces vieilles couleurs d'air ont été utilisés tout au long de cette section hors du cours afin que vous puissiez rapidement accéder à ces couleurs et les copier à partir d'ici, les coller dans votre propre travail. Si vous voulez ces mêmes couleurs dans votre propre design et enfin ce que je veux partager avec vous, c'est que vous pouvez cliquer sur l'un de ces. Ainsi, par exemple, celui-ci et vous pouvez cliquer ici pour prévisualiser à quoi il ressemble afin que vous puissiez cliquer dessus et vous pouvez voir et être rappelé l'animation que nous avons créée dans cette section hors du cours. Donc, fondamentalement, pour n'importe lequel d'entre eux, vous pouvez rapidement accéder à ces animations et vérifier si vous avez tout obtenu correctement. Et si vous voulez les utiliser, vous pouvez le faire à partir d'ici. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 28. Formulaire 1: dans cette vidéo. Nous allons créer ce formulaire d'abonnement lorsque vous cliquez sur le champ e-mail va remplir l'e-mail et puis lorsque vous cliquez sur l'abonnement va dire abonné et changer la couleur en vert. Alors commençons. Donc, avez ici dans notre port de 800 avec 800, je vais créer rapidement l'entrée. Utilisons 300 avec 70 qui s'appelle ça entrée. Ça va être notre entrée pour l'email. Utilisons, disons, huit pour le rayon de coin. Il contrôlerait D et ça va être notre bouton et pour les bots. Et nous sommes habitués de 2 à 5 avec 70 et nous allons le déplacer rapidement jusqu'ici. Nous sommes allés utiliser la couleur de remplissage de trois E C. Six f pour le fond, et vous allez enlever la bordure pour les rendre un peu plus proches. Appuyez sur Shift. 1234 vers la droite, Sélectionnez les deux, regroupez-les puis positionnés au milieu Ici. Groupe haineux. Maintenant pour l'entrée. Nous allons taper votre email comme donc nous allons utiliser 20 et open sense, comme ça. Positionnez-le au milieu, déplacez son décalage vers la droite 20 pixels. Et nous allons utiliser le présentateur D d d parce que ça va être une sorte de couleur gris clair . Je vais le dupliquer, déplacer son vers ici, m' assurer qu'il va du centre et taper. S' abonner ? Je pense que oui. Et je suis allé utiliser la couleur blanche pour cela et la placer au centre. Sur ce bouton, appuyez une fois de plus sur le contrôle de. Et sur celui-ci, je vais juste ajouter de parce qu'il va dire abonné comme So. Alors, je vais aux orteils. Déplacez ces deux-là comme ça et faites un doublon hors de ce bouton. Je vais appeler ce bouton vert et le bouton du bas. Vous pouvez le laisser comme ça, ou vous pouvez l'appeler un bouton bulle. Et enfin, je vais les regrouper tous. Appelle ce bouton et on va créer une mosquée. Il suffit d'utiliser un rectangle normal. Dessinez une bordure retirée rectangle, et vous pouvez réduire votre pâté à zéro. Double-cliquez ici appelé cette mosquée comme ainsi et vous allez sélectionner le texte et la mosquée, clic droit et la mosquée avec la forme. Vous pouvez également utiliser le contrôle de changement de vitesse Amolsch si les recommander, et nous allons orteil nommé cette mosquée comme. Enfin, nous allons ouvrir la mosquée et déplacer le texte abonné, qui déplace une flèche vers le haut hors du chemin. Et nous allons juste être laissés avec ce texte d'abonnement et pour l'entrée. Fermons celui-ci rapidement. Je vais appuyer sur le contrôle DE pour dupliquer ce texte, et utilisons cette couleur pour cela. Donc, je vais juste copier et coller cette couleur double clic, et je vais taper, étant, par exemple, par exemple, concepteur à l'email dot com. Mis donc et nous allons créer une mosquée pour ça aussi. Je vais vite la mosquer quelque part par ici. Voyons, je vais appeler cette mosquée comme ça, et je vais enlever la frontière comme ça. Je vais sélectionner ces deux mosquées avec la forme du clic droit, et parce qu'elles n'ont rien fait comme ça, appelons vite cette mosquée comme ça. Ce que vous allez faire, c'est déplacer cette mosquée vers la gauche, donc à quelque part ici et déplacer le bord droit jusqu'ici. Et comme vous pouvez le voir, il cache maintenant le texte. Donc on va s'animer pour aller ici, et ensuite ça va révéler notre texte. Donc, quand vous cliquez à l'extérieur, il va cacher et envoyer du texte, et nous allons regrouper ce contrôle G et l'appeler e-mail comme ça. Et enfin, ce que tu vas faire, c'est arrêter d'être un texte ici. Donc il copie vraiment ce texte de mon autre port et vous allez le déplacer. Disons que vous voulez 34 60 pixels jusqu'au sommet, et ce sera un sens ouvert à 28. Donc ça va être juste un peu plus grand que notre texte original ici. Et c'est fondamentalement tout pour la partie design. Maintenant, faisons une première copie, Contrôle de la chaleur profonde et ce que vous allez faire dans cette copie. Nous allons cliquer sur votre email et nous allons baisser et vous payez la ville à zéro parce que cela va arriver quand quelqu'un cliquera ici va baisser Cher Bay City de celui-ci, et maintenant nous devons faire une autre copie, et dans cette copie, nous allons révéler l'e-mail. Donc, comme si quelqu'un avait des types dans son email. Alors déplacez cette mosquée vers la droite, comme, comme, orteil, révélez l'e-mail entier. Et enfin, dans cette dernière copie, ils vont cliquer sur ce bouton. Nous devons donc faire l'état final. Donc, dans celui-ci, nous allons ouvrir cette mosquée, déplacer le texte abonné ci-dessous jusqu'à ce qu'il rencontre notre texte d'abonnement original et abonnons. On va bouger jusqu'en bas, hors du chemin. Et enfin, nous allons les orteils inclure ce bouton vert dos. Mais ce que j'ai oublié de faire, c'est que j'ai oublié d'inclure la couleur de ce bouton vert. Donc je vais le faire maintenant. Rapidement. Donc, ce que je vais faire est de sélectionner ce bouton vert et je vais utiliser la couleur . Voyons voir, quelle est la couleur de l'écran. Donc c'est 55 D 466 Je vais appuyer sur Entrée et je vais baisser les pieds. Vous payez la ville ou ça ? Alors laissez-moi vite Droite, cliquez sur copie, et je vais abaisser votre ville de base vers le bas. Je vais garder mon contrôle et rapide à l'intérieur de l'apparence basée sur le clic droit, et je vais abaisser votre apparence basée sur le clic droit fondamentalement bas bas bas bas bas. Est-ce que vous baste vers le bas et l'apparence basée sur le clic droit et il va être à 100%. Donc tous ces trois, c'est à zéro. Et sur ce dernier, c'est à 100%. Vérifions rapidement si tout est correct. Je pense que c'est le cas. Alors fermons rapidement tout comme ça et maintenant il est temps de le prototyper, Donc je vais cliquer sur le prototype. Le premier utilisateur devra taper sur ce champ de messagerie car il souhaite entrer son adresse e-mail. Alors faisons-le sortir. Nous allons utiliser le robinet et pour la transition. Utilisons les ennemis automatiques assouplissant et 0.4 secondes maintenant sur le 2ème 1 Nous voulons utiliser le temps parce que nous voulons que quelque chose se passe après un certain temps, donc nous allons avoir un léger retard de 0.4 seconde. L' animation automatique est en dehors, et la durée va être à une seconde maintenant. Enfin, nous voulons que quelqu'un clique sur le bouton s'abonner parce qu'il entre son email et qu'il veut s' abonner. Donc, nous allons cliquer sur vous abonner pas ou orteil animate. Abonnez-vous. Il est sorti. Et enfin, ce que nous voulons pour le timing est de 0,4 seconde. Alors frappons l'aperçu et voyons à quoi tout ressemble. Donc, lorsque vous cliquez ici va attendre pour révéler l'e-mail, puis quand vous cliquez ,vous vous , abonner va changer la couleur et sur ce texte abonné sur l'abonnement. Alors voyons ça une fois de plus. Ainsi, lorsque vous cliquez ici, e-mail s'affiche lorsque vous cliquez sur. Abonnez-vous, il dit abonné. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 29. Formulaire 2: dans cette vidéo, nous allons créer ce formulaire de signature. Nous avons email et le mot de passe, et enfin un bouton ci-dessous. Lorsque vous cliquez sur l'e-mail, il va sentir l'e-mail et cette ligne va devenir verte. Nous avons le mot de passe va faire la même chose pour le mot de passe. Et enfin, lorsque vous cliquez, ce bouton de connexion va à la pointe. Ayez cette coche pour indiquer que vous avez le site dans, puis vous pouvez imaginer que la transition va se produire après l'écran vers le suivant . Alors commençons. Donc, nous avons dans notre port de 800 par 800. Et ajoutons du texte, quelqu'un à taper, connecté, utiliser le sens ouvert ici. Comme ça et pour la taille. Utilisons 28 i moi-même. Ou peut-être qu'on peut même en utiliser 30. C' est bon. Assurez-vous qu'il va de la gauche. Ensuite, nous allons frapper le contrôle profond, dupliqué et faites glisser cette copie inférieure ci-dessous, et maintenant nous allons créer un champ. Donc, nous allons d'abord créer du texte en écrivant votre e-mail sélectionné. Utilisons 20 pour cela et pour les colons utilisé présentateur DDT. Maintenant, nous devons créer notre ligne. Donc, créons une ligne ci-dessous. Allons-le à 400 pour la couleur qui a utilisé cette couleur, donc utilisé pour le film. Retirez la bordure. Et pour la hauteur, utilisons un pixel ou peut-être même deux. On est juste à 10 et nous pouvons tout sélectionner en ligne. Tout à gauche peut être utilisé comme ça. Ce sera une ligne, et nous allons la faire glisser juste en dessous de notre email. Et positionnons-le, par exemple, 40 20. Je pense que c'est assez bon. Maintenant, nous allons dupliquer votre email. Il contrôlerait D. Je vais cacher le top. Et sur ce 10.1, je vais taper dans designer une femelle à ne pas venir, par exemple, et vous allez utiliser cette couleur pour la couleur du champ comme ça. Et enfin, créons notre mosquée. Donc, nous allons utiliser une mosquée quelque chose comme ça, par exemple. Mais nous allons étendre ce rectangle juste un peu, ou nous pouvons l'avoir,par exemple, par exemple, il 10 pixels qui peuvent tenir shift et flèche gauche juste pour que nous sachions jusqu'où nous l'avons étendu . Maintenant ça va être notre mosquée, et nous pouvons enlever la frontière si nous ne voulons pas, et vous allez la placer juste ici. Ensuite, nous allons sélectionner le tabouret, le clic droit et la mosquée avec la forme. Et ça va être notre mosquée et on dirait que dans la vidéo précédente, nous allons juste déplacer cette mosquée vers l'orteil gauche, cacher le texte et nous allons positionner votre email sous cette mosquée et enfin affaiblir. Regroupez tout comme ça. Hit control G. Et vous allez appeler ce détail de contrôle pour obtenir ce dossier appelé Shift et Bottom Arrow, et nous pouvons le positionner ici 1234 pour qu'on puisse l'avoir à 40. Et ça. Nous allons le positionner à 60 pour avoir un peu plus d'espace ici. Appelez celui-ci un mot de passe comme ça et ouvrez. Et au lieu de votre type d'e-mail dans votre mot de passe, comme ainsi et enfin à l'intérieur de la mosquée, vous pouvez masquer votre mot de passe pour l'instant, vous Condell cliquez à l'intérieur et appuyez sur zéro. Laissez-moi juste sélectionné en premier, alors appuyez sur l'espace point que l'espace Seigneur espace, pas l'espace. Et je vais sélectionner tout Hit contrôle C parce que je suis paresseux Hit contrôle V de sorte que j' ai huit coups de suite. Patrouille E et moi allons sélectionner 44 ici. Et ça va être notre possible en gros. Vous pouvez donc cliquer quelque part à l'extérieur. Vous pouvez voir votre mot de passe. Et enfin, ce qu'il nous faut, c'est un bouton. Sélectionnez rapidement. Choisissez ceci. Votre possible texto contrôlé le dupliquer, et je vais le déplacer en dehors de ce dossier. dois le déplacer vers le bas et je vais taper à côté ici parce que ce sera notre texte pour le fond. Maintenant, pour la bouteille elle-même. Utilisons, voyons, peut-être 2 à 5 avec 70 comme ça, utilisez huit pour le rayon de coin et pour la couleur, nous pouvons enlever la bordure. On va utiliser la couleur de trois e c six ff orteils. Obtenez cette belle couleur bleue. Appelez ce bouton comme ça avec juste en dessous, et vous allez le positionner 60 à partir de cette ligne de fond. Donc, décalez 123456 Ils vont utiliser la signature. Sélectionnez la couleur blanche et positionnez-le pour être au milieu de notre bouton comme ça et nous allons le regrouper comme ça. C' est ce qu'on appelle ça, Botan comme ça. Et enfin, ce que nous devons créer, c'est une coche. Donc on va utiliser le crayon. Vous pouvez cliquer quelque part en dehors du décalage de maintien. Donc, il va à 45 degrés, cliquez, puis cliquez une fois de plus sur, échappez . Et pour la couleur hors de cette bordure, nous allons utiliser la taille blanche va être, aussi. Et enfin, le sol gardé. Donc on est sur nos bords et ça va être notre coche comme ça. Et enfin, ce que je veux c'est positionner ce Jack Mark quelque part au milieu de notre bouton pour que tu puisses cliquer. Cochez, cliquez sur un bouton cliquez ici que juste ici pour le positionner au milieu. Et enfin, vous pouvez cacher cette signature. Donc, cliquez sur la coche. Cliquez sur ces deux points comme pour que vous puissiez les sélectionner, puis les déplacer. Silver, ici et on va aux pieds. Fondamentalement, que ce soit à 0% alors double-cliquez sur votre touche zéro ou vous pouvez abaisser votre ville de paie ici , et c'est fondamentalement tout pour notre partie de conception. Rapidement, incluons simplement la signature. Et maintenant vient la partie amusante, qui est la partie prototypage et ce que nous voulons juste ici avant de commencer le prototype. Parlons tout, Kid control G, le groupe, tout ce qui est le milieu, ce milieu. Et nous allons simplement plus avec 10 pixels vers la droite, parce que si vous vous souvenez, notre mosquée s'étend à la gauche 10 pixels. Alors nous allons tout regrouper. Maintenant, nous avons notre formulaire et nous allons frapper le contrôle D Maintenant sur ce 1er 1, nous allons cacher notre email afin que vous puissiez cliquer sur votre email et plus bas vous le placer à zéro contrôle de frappe une fois de plus, et dans celui-ci, nous allons révéler notre email. Cliquez sur la mosquée et étendez la mosquée jusqu'ici. Et enfin, nous allons cliquer sur la ligne, et nous devons lui donner un peu de couleur. Donc, pour la couleur vous permet quelque chose de vert avec 55 d pour 66% et ce sera notre couleur verte pour cette ligne, et je peux simplement copier ceci parce que vous allez en avoir besoin un peu plus tard. Maintenant, lorsque l'e-mail est rempli, nous devons cliquer sur votre passeport. Donc, nous allons le laisser comme ça pour cet état frapper le contrôle profond parce que nous avons cliqué dessus dans l'écran précédent. On va le cacher dans celui-ci. Donc votre mot de passe tout simplement plus bas. Faites-le de base et appuyez une fois de plus sur le contrôle de. Et dans celui-ci, nous allons le révéler. Donc, pour localiser votre mosquée et étendre la mosquée à ici, par exemple. Et dans celui-ci, choisissez la couleur de cette ligne pour qu'il entre. Et enfin, lorsque les gens cliquent sur celui-ci, nous allons masquer la signature dans l'écran suivant. Donc localisé la signature. Nous allons orteil abaisser le basique Ici il et enfin inclut notre coche retour avec notre premier point et cliquez sur celui-ci une fois de plus dans celui-ci. Nous allons orteil étendre notre coche afin que vous puissiez sélectionner ce point Peut-être que nous pouvons même cacher la signature dans celui-ci, et il va être un peu difficile, mais vous devez cliquer dessus et vous devez essentiellement l'étendre comme si touche de changement à quelque part par ici. Vous pouvez zoomer un peu sur quelque part comme ça et assurez-vous juste que vous avez sélectionné tous sur votre point Donc quelque chose comme cette position il est ici et enfin il de contrôler la fois de plus parce que nous allons étendre notre dernier point orteil aller dehors. Donc, lorsque nous sélectionnons notre coche, nous pouvons la sélectionner comme ça et nous assurer qu'elle va à l'extérieur. Vous pouvez maintenir Shift, aligner juste un peu et juste zoomer et voir si cela a l'air bien. Ouais, je pense que ça a l'air bien. Alors maintenant, il vient de temps pour tout animer. Alors cliquez sur le prototype et nous pouvons zoomer un peu plus près. Nous pouvons cliquer sur ce premier champ. Ils vont utiliser le robinet automatique. Animate est en dehors et aération de 0,4 seconde. Quand celui-là, on aura le temps. Donc, utilisez le délai que nous allons avoir à 0,4 seconde, par exemple une animation de sortie ou d'orteil facile. Ensuite, nous avons le top pour celui-ci si habitué à taper ou à essayer de se rencontrer. Tout est pareil sur celui-ci. utilisé le temps comme ça. Donc, dans ce prochain, nous allons utiliser le robinet en bas parce que nous allons cliquer sur le bas et l' animation va se produire. Donc, appuyez ou pour animer est dans 0.4 seconde. Et sur celui-ci, nous allons utiliser le délai de temps. Nous n'allons pas avoir de retard, donc ça va être 0,0 durée zéro point étranger. C' est bon pour l'instant, mais nous allons vérifier et voir si ça a l'air bien. Contrôle de chaleur zéro et cliquez sur ce 1er 1 clic jouer. J' ai été grand un peu. Lorsque vous cliquez sur, votre e-mail est à la pointe. Tapez un e-mail, et cette ligne va devenir verte lorsque vous cliquez sur le passeport va faire fondamentalement la même chose. Et enfin, lorsque vous cliquez sur le bouton va montrer cette coche. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 30. Formulaire 3: dans cette vidéo, nous allons créer ce formulaire de signature lorsque vous cliquez sur votre email va sauter de et en haut. Tapez votre email, puis va faire la même chose lorsque vous cliquez sur votre mot de passe. Et enfin, lorsque vous cliquez sur ce bouton va sauter au milieu, étendre tout le chemin et dire, Bienvenue retour. Alors commençons. Donc, pour commencer, nous avons sur notre port de 800 par 800 aller utiliser le type dit et le signe de frappe dans le contrôle E. Je vais utiliser le sens ouvert comme ça, et je vais utiliser la taille de 30 comme ça, et nous allons le dupliquer pour qu'il contrôle la dernière fois. Et sur celui-ci, nous allons taper Welcome back. Alors assurez-vous qu'il va du milieu et assurez-vous que vous sélectionnez la couleur blanc cassé comme ça , et nous allons le positionner au milieu et au milieu comme ça et nous allons réduire le vous fondamentalement vers le bas à zéro parce que va être notre dernier écran pour la signature. Laissons-le ici pour l'instant. Maintenant, créons notre bouton. Et pour le bouton, allons voir 2 à 5 avec 70 présentateur et nous allons utiliser le bleu Donc trois E C six ff pour la couleur et nous allons utiliser, disons, sans bordure et disons, pour 50 pour le rayon de coin pour qu'il soit agréable et rond. Je vais juste taper rapidement le bouton ici et copier-coller dans une flèche que j'ai déjà utilisée dans l'exemple. Donc je vais les positionner pour être au milieu comme ça. Appuyez sur le contrôle G pour les regrouper, Appelez ce bouton comme ça, déplacez-le en bas et le bouton va aller au-dessus de notre formulaire. Mais il va être situé en dessous de tout. Mais ça va aller au-dessus de notre forme ici parce que nous devrons créer ce saut bleu , et ça va être en plus de tout. Je vais vous montrer un peu plus tard, et vous serez en mesure de comprendre ça mieux. Donc, je vais frapper le contrôle de la conception pour le dupliquer. Je vais le déplacer un peu vers le bas, et sur celui-ci. On va me prendre dans ton email et tu vas le dupliquer ou l'enterrer. Créons tout et puis nous allons dupliquer le champ lui-même. Maintenant, celui-ci va être 20 fin. Ça va être au D.D. si léger, laisse-le là pour l'instant. Maintenant, nous allons utiliser un outil rectangle et nous pouvons avoir, par exemple, pour des centaines pour les esprits. J' aime ça aussi pour les hauteurs, et nous allons utiliser cette couleur pour contrôler le champ et nous n'allons pas utiliser le coup du tout. Je vais le positionner à gauche, aligner sur nous deux textes et je vais le placer à peut-être 20 comme ça. Ensuite, je vais appeler cette ligne, et je vais la déplacer sous votre email, et je vais les regrouper et appeler celui-ci comme ça. Ensuite, nous allons dupliquer votre texte e-mail et vous allez cacher cette partie supérieure, et nous allons appeler ceci, par exemple, designer chez gmail dot com. Ce sera notre e-mail, et nous allons utiliser cette couleur pour la couleur du champ comme ça. Et enfin, ce dont nous avons besoin, c'est d'une mosquée. Donc nous allons dessiner un rectangle beau et grand, quelque chose comme ça, et ça va être notre mosquée. Donc c'est une mosquée de qualité comme ça. Et enfin, on va aller aux pieds. Placez-le juste sur le bord gauche. Je vais tenir le quart de travail et peut-être utiliser ma gauche. Il y a deux fois, et je vais le déplacer en dessous. Choisissez-les pour frapper la mosquée avec forme, appelée cette mosquée comme ça, et je vais déplacer la mosquée hors du chemin, comme ça. Et enfin, nous allons utiliser votre email, mais en passant juste au-dessous, et c'est essentiellement notre champ de messagerie. Maintenant, nous allons frapper les actes de contrôle dupliqués, et sur ce suivant, nous allons l'appeler mot de passe comme ça et nous sommes allés le déplacer ci-dessous. Comme ça à l'intérieur n'allaient pas écrire dans votre email, mais votre mot de passe comme ça et enfin, à l'intérieur de la mosquée. Cachons un possible au lieu de designer. Allons cette mosquée pour que nous puissions voir ce que nous faisons. Au lieu de designer, je vais utiliser des points espacés de l'espace point, par exemple, Créer pour le contrôle, Voir ? Dupliquez-le, contrôle un et a augmenté la taille de 40. Juste pour qu'ils soient gentils et grands. Déplacez la mosquée ici et incluez votre mot de passe. Donc c'est fondamentalement tout pour le processus de création. Commençons maintenant une commande. Tout est en place. Donc ce que nous voulons pour celui-ci, c'est que nous voulons que les orteils le placent ici et qu'ils le réduisent. 80. Donc 12345678 Comme ce maintien décalage dans la flèche du bas et faire la même chose pour celui-ci. Donc, fondamentalement étendu pour être à 18 comme ça et finalement déplacé le bouton juste ici et sera à 80 aussi. Il suffit de le déplacer ici. Et c'est essentiellement notre forme. Vous pouvez tout regrouper alors touchez le contrôle, G. G. Mais laissez le texte de bienvenue hors de lui parce qu'il va rester là où il est. Je vais me positionner au centre et frapper le quart de travail deux fois vers la droite parce que si vous vous souvenez, notre mosquée a fait 20 pièces par la gauche. On va tout regrouper, tout regrouper et tout laisser tel qu'il est en ce moment. Donc, il y en a essentiellement pour la partie de conception de cette vidéo et maintenant nous allons passer dans la partie de prototypage afin que vous puissiez cliquer sur notre contrôle de frappe de port D Et sur ce 1er 1 nous allons déplacer votre email vers le haut. Alors, où cliquer ? 1234 Maintenant, à ce stade, on va à la pointe Attendez. Donc il contrôle D sur cet aéroport ? Et maintenant, à ce stade, nous allons révéler notre mosquée et montrer notre email comme ça, et nous allons faire de même. Donc, fondamentalement, nous allons cliquer sur votre mot de passe. À ce stade, le texte de votre mot de passe va sauter. Donc 1234 et on va au poids des orteils. À ce stade, tremper il a contrôlé la fois de plus et maintenant nous allons révéler nos mots de passe. Alors déplacez la mosquée vers la droite. Et encore une fois, si votre ordinateur est confus à propos de tout cela, vous pouvez examiner les fichiers d'exercices pratiques et vous pouvez voir exactement ce que j'ai fait, ce que j'ai créé. Et vous pouvez utiliser ces mêmes fichiers pour ses projets personnels et commerciaux. Donc, enfin, maintenant nous devons cliquer sur le bouton et nous voulons cliquer sur le contrôle de certificated. Donc, dans ce un utilisateur va cliquer sur le bas maintenant le bouton va se déplacer au milieu comme si nous allons orteils, faire que ce soit cercle. Donc 70 par 70 et la flèche va aller à l'intérieur comme ça et enfin cliquer ici pour positionner ça juste au milieu. Sur ce prochain, nous allons orteils, avoir le contrôle sur D. Cliquez sur le bouton et nous allons orteil tenir un boulon de changement de vitesse et gauche en cliquant sur l'un des coins et étendu jusqu'à ce qu'il se sent tout. Et nous allons cacher la flèche à ce stade. Et enfin, nous devons déplacer le bouton au-dessus de tout. Donc, fondamentalement, il sera le bienvenu retour et le bouton ci-dessous, donc je vais juste aller aux pieds, cliquez rapidement sur chacun d'eux et positionnez le bouton au-dessus de tout. Alors faisons ça très vite parce que nous avons besoin de cette couleur bleue pour couvrir tout sauf retour de bienvenue qui va être au-dessus, donc une fois de plus, quand ils cliquent, ça va devenir cercle. Ensuite, il va dépenser les pieds et enfin, dans celui-ci, nous allons avoir notre texte de bienvenue révélé pour la première fois, donc c'est fondamentalement tout. Vous avez 2468 nos ports au total. Et encore une fois, si vous êtes confus à propos de quoi que ce soit, vous pouvez vérifier les fichiers du projet et tout voir par vous-même. Maintenant, nous allons prototype donc en conflit Prototype. Donc, sur ce 1er 1 ils vont cliquer sur votre email. Donc, nous allons utiliser les ennemis de l'auto étape et pour l'assouplissement fessier est en dehors. Et enfin, utilisons 0,6 seconde. Par exemple, sur celui-ci, nous allons utiliser le temps. Donc, le temps et les délais utilisaient 0,60 point six pour la déclaration aussi, et ça va atterrir sur deux ici. Ensuite, nous allons cliquer sur votre mot de passe. Donc, tapotez ou à n'importe quelle viande, les mêmes paramètres. Et sur celui-ci, on va conduire la poignée bleue. Nous allons utiliser le temps, donc fondamentalement le même délai et tout jusqu'à ce qu'il remplisse le passeport. Et enfin, nous allons utiliser le robinet pour celui-ci des notes faciles, et ce sera le temps. Donc, nous allons avoir le retard un peu plus grand. Une seconde, par exemple, que vous 0.6, et sur celui-ci, nous allons utiliser 0.6 et 0.6 et voir à quoi cela ressemble. Donc, je vais cliquer sur ce premier tableau de démarrage clic aperçu. Donc, lorsque vous cliquez, votre e-mail va sauter et le concepteur va révéler votre mot de passe lorsque vous cliquez va le faire de la même chose. Et enfin, lorsque vous cliquez sur le fond va sauter au milieu, développer et nous allons orteils. Avoir ce texte de bienvenue. Donc c'est tout pour cette vidéo. Et encore une fois, si vous êtes confus à propos de quoi que ce soit, vous pouvez consulter les fichiers de projet et en savoir plus sur les dimensions, l' espacement et tout ce qui se trouve à l'intérieur de ce fichier de projet. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 31. Formulaire 4: dans cette vidéo, nous allons créer ce formulaire champs avec le sélecteur en haut. Ainsi, lorsque vous cliquez sur l'un de ces champs vont se développer ou s'effondrer. Comme dans ce cas et le texte va changer à l'intérieur du fond aussi bien. Et cela va correspondre à tout ce que vous avez cliqué dessus, sorte que vous pouvez voir la signature juste ici. Puis inscrivez-vous et enfin course il mot de passe. Alors commençons. Donc, nous avons un aéroport de 800 par 800 Je vais utiliser mon titre et je vais taper, Connectez-vous et je vais utiliser ouvert, dit B 20 régulier. Et je vais frapper le contrôle DE à dupliquer. Et sur celui-ci, je vais taper, m' inscrire et enfin, je vais en inscrire et enfin, avoir une de plus, et ce dernier va être réinitialisé pour le passeport. Commençons maintenant à créer nos champs. Donc, pour le terrain, utilisons pour 100 avec 70. Comme ça et pour les coins arrondis. Utilisons quelque chose comme huit et gentil et propre, et je vais bouger ça au milieu comme ça, bouger décider tout d'un d'entendre, inscrivez-vous. Allons le rapprocher et tout le quart et peut-être le déplacer. Je ne sais pas, 20 ou 40 pixels. Utilisons 30 et enfin réinitialisons. Déplacer sur ce bord, dupliquez celui-ci et faites glisser ci-dessous et déplacez-le juste au-dessus du rectangle. Ici. Nous allons taper l'entrée comme ça et la signature afin que nous puissions les regrouper et appeler cet e-mail afin que plus tout cela ci-dessous et à l'intérieur du texte de signature plus avec 20 pixels vers la droite et nous allons écrire dans votre email comme si ensuite, nous Je vais le dupliquer et déplacer celui-ci comme alors laissez-le être à 20 pixels, comme ça Et cela va écrire dans possible parce que ce sera notre mot de passe comme ça et renommer le mot de passe comme ça Et enfin, ce dont nous avons besoin est une répétition mot de passe. Donc il contrôlerait D sur celui-ci et peut-être plus, qui 20 pixels vers le bas comme ça et nous allons appeler ce mot de passe répété comme ça et un clic bas à l'intérieur et taper. Répétez comme ça. Et enfin, ce qu'il nous faut, c'est un bouton. Alors faisons ça. Frappez le contrôle D, et on va l'appeler en bas comme ça et on va le déplacer. Ne pas 20 pixels. Donc ça va être le même, fondamentalement, pour tous. Et à l'intérieur de celui-ci. Premier positionnement Toby centre aligné, et vous allez écrire à l'intérieur comme ça pour l'importation. Nous allons le changer en bas parce que ce sera notre bordure inférieure maintenant enlevée. Et pour le filtre quand les Juifs trois e c. six ff comme ça et le texte de signature va être blanc comme ça finalement les positionne pour être au centre comme ça. On va aller aux pieds. Dupliquez le circuit de signature Control de Et sur celui-ci, nous allons écrire à l'intérieur parce que ça va sauter du haut comme ça et s' assurer qu'il est au milieu. Donc, sélectionnez Inscrivez-vous, Maintenez le contrôle. Bouton Sélectionner. Assurez-vous qu'il est dans le contrôle de frappe du milieu de Hide celui-ci. Et enfin, pour celui-ci, nous allons taper le mot de passe de réinitialisation parce que ce sera pour notre sélection finale ou top. Donc c'est une réinitialisation. C' est possible. Vous faites la même chose, alors assurez-vous qu'il est parfaitement au milieu comme ça et montrez tous les trois. Utilisez le rectangle pour dessiner. Je parle rectangle. Appelez ça la mosquée. Vous pouvez sélectionner le texte à partir d'ici, appuyer sur le contrôle C et enfin sélectionner tout droit ? Cliquez et Moscou sa forme. Double-cliquez à l'intérieur de Contrôle V et appelez-la mosquée. Maintenant, enfin, nous allons bouger récemment possible et signer dehors de notre mosquée comme ça et nous allons juste être laissés de côté avec Sign in. Enfin, ce dont nous avons besoin, c'est d'un triangle. Donc, nous allons créer un beau grand triangle comme celui-ci en utilisant distal et pour la hauteur, utilisons tour, par exemple, pour le film. Nous allons utiliser cette couleur comme ça, et enfin vous pouvez l'aligner avec ce bord comme alors assurez-vous qu'il est au milieu de la signature et sur ce 1er 1 laissons juste ça comme ça. Alors appelons ceci un sélecteur Donc en position juste en dessous de notre texte comme ça. Et enfin, ce que nous voulons, c'est sélectionner tout le texte et peut-être le positionner à 20. Donc, nous avons tout cohérent et beau. Enfin sélectionner tout son contrôle. G positionnez-le au centre comme si droit. Cliquez et faites pousser perroquet. Et cela va être notre conception terminée. Maintenant, créons notre état. On va avoir besoin de trois états, donc je vais frapper le contrôle D deux fois. Donc vous avez deux exemplaires maintenant pour ce 1er 1 que je vais sélectionner. Inscrivez-vous. Maintenez le décalage. Sélectionnez. Réinitialiser. Cliquez ici. Dactylographier de de presse passé, er Donc je vais l'avoir à cette couleur gris clair. Et enfin, ce que nous voulons est de positionner le bouton juste au-dessus de ces champs. Comme ça Et pour la signature. Nous ne voulons que votre email et votre mot de passe, donc je vais me positionner. Bouton de connexion. Il suffit d'entendre et de répéter possible. Abaissez la Bay City à zéro. Maintenant, sur ce prochain, on va déplacer le sélecteur pour s'inscrire, pour être au centre comme ça. Nous sommes allés sélectionner la signature et la réinitialisation. Cliquez ici. D d d orteil percentré. Rends-le plus léger. Super. Maintenant, sur cette inscription. Nous allons avoir ces champs comme ça, et enfin, nous allons déplacer ce signe dans le texte ci-dessous comme ça. Mais nous allons positionner Inscrivez-vous pour être au centre comme ça et ensuite déplacer le côté étant juste en dessous, vous pouvez fermer la mosquée et enfin, nous allons sauter dans cet état agité. Donc on va passer dans le sélecteur, Toby au centre de la réinitialisation et sélectionner le tabouret. Cliquez ici, D d d appuyez sur Entrée et enfin déplacer le bouton pour être juste ici, et nous allons le positionner au-dessus de tout. Assurez-vous de le faire avec chacun d'entre eux. Il s'agit donc de tous les champs. Et enfin, pour celui-ci, nous allons cacher les orteils, mot de passe et répéter les passeports qui peuvent les sélectionner et abaisser votre base vers le bas. Et sur celui-ci, ce que nous voulons est de sauter à l'intérieur de la mosquée et d'abaisser le mot de passe répété tout au long du centre comme ça, et enfin de déplacer la signature jusqu'au bas et de déplacer Inscrivez-vous, vers le bas aussi bien que ça . Donc, le mot de passe de répétition est au centre, donc c'est fondamentalement tout pour notre conception et pour le prototype. C' est très simple. Alors cliquez sur un prototype et je vais zoomer un peu plus près et ce que vous voulez faire est de tout connecter pour que les utilisateurs puissent cliquer entre ces trois écrans. Donc, enfin, nous allons cliquer sur l'inscription. Ça va nous emmener ici. On va utiliser l'étape ou n'importe quelle viande. 0,6 seconde. Disons que cliquez sur la réinitialisation, faites de même. Cliquez ici sur la signature va contenir le même effet. Cliquez ici pour sauter dans la réinitialisation et enfin faire la même chose pour celle-ci. Donc c'est l'inscription, et ce 1er 1 est le signe. Donc c'est fondamentalement tout. Prévisualisons. Tout ce qui est en gros est juste un peu. Donc, quand vous cliquez sur l'inscription, il va orteil développer. Modifiez le texte pour vous inscrire. Cliquez sur la réinitialisation va toe reset Mot de passe ici et déplacer tous les champs orteil deviennent vides comme inscription signature. Comme vous pouvez le voir, tout fonctionne correctement et vous pouvez changer et ajouter vos propres touches. Ainsi, par exemple, vous pouvez mettre en surbrillance dans ce triangle et ces champs. Si vous le souhaitez, vous pouvez faire ces autres couleurs. Vous pouvez ajouter des ombres portées en arrière-plan. C' est vraiment à toi de décider. Vous pouvez même modifier la couleur d'arrière-plan de ces champs. Ainsi, par exemple, ils sont blancs. C' est celui-là. Ils peuvent être comme créer celui-ci qui peut être sombre. Lisez celui-là. Donc, c'est vraiment à vous et structure supérieure cette conception. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine. 32. Formulaire 5: dans cette vidéo, je vais vous montrer comment vous pouvez créer ce mot de passe créé a échoué, que vous pouvez ensuite intégrer dans vos formulaires. Donc, quand vous cliquez sur créer des mots d'analyse va disparaître, alors il va commencer à taper mot de passe, et il va vous montrer la force du mot de passe, et ces couleurs juste ci-dessous vont correspondre à tout. Donc, si j'ai joué à une fois de plus, vous pouvez voir qu'il commence par quatre, puis six caractères et finalement se termine en huit et montre un mot de passe fort avec une couleur verte ci-dessous. Alors commençons. Donc, ce que nous avons ici est dans notre port de 800 par 800 Je suis déjà allé de l'avant et créé quelque part. Alors quoi ? Ici, nous avons créé possible Open dit 20 et nous avons le mot de passe dans rempli. Donc, nous avons une mosquée créer mot de passe caché, qui est cette icône, et enfin, dans les entrées et à l'intérieur d'une mosquée. On a juste des pensées régulières comme je t'ai déjà montré. Donc, si je révèle la mosquée, vous pouvez voir à quoi elle ressemble, et ces points que vous avez déjà vus dans certaines de ces vidéos précédentes. Donc, c'est essentiellement notre domaine, et maintenant nous allons créer les informations ci-dessous. Mais d'abord, commençons par le texte. Je vais dupliquer celui-ci. Je vais faire glisser les orteils juste ici, et je vais le positionner. C' est quelque chose comme 20. Je vais le faire aller bien. Donc, pour être aligné à droite, allez au bord droit et celui-ci, nous allons écrire dans la semaine, comme si avec ci-dessous, contrôle de dupliqué. Je vais cacher ce stop 1. Cela devrait écrire, pourrait être plus fort, comme ça Et enfin, je vais avoir le contrôle de De et sur ce fond. C' est vrai. De fortes perspectives, comme ça Donc ce sont nos trois étapes, et maintenant créons une mosquée pour eux. Donc, il est utilisé un rectangle. Assurez-vous qu'il va au bord droit comme ça, et assurez-vous qu'il est au milieu du texte comme ça parce qu'il sera plus facile pour nous de le positionner un peu plus tard. Et déplacons l'orteil de la mosquée ici, par exemple, vous pouvez abaisser votre ville de paie. Ça n'a pas d'importance parce que ça va être notre mosquée comme ça. Et enfin, on va tout sélectionner, non ? Cliquez sur la mosquée de forme ou utilisez ce raccourci. Donc, le contrôle de décalage et de gros Windows ou devrait les commander sur Mac. Maintenant, ça va être notre mosquée, comme ça et enfin, je vais déplacer tout ce texte hors de notre mosquée comme ça, et fermons cette mosquée. Et comme vous pouvez le voir, nous ne pouvons rien voir ici. Donc enfin, ce qu'on va faire, c'est qu'on va , c' ce qu'on va faire, c'est qu'on va regrouper la mosquée et on va la regrouper un peu plus tard et je vais te montrer pourquoi il suffit de laisser tout tel quel. regrouper la mosquée et on va la regrouper un peu plus tard et je vais te montrer Nous avons besoin de cela pour que nous positionnions ces derniers en bas. Alors commençons à créer nos couleurs. Je vais utiliser un outil rectangle et je vais écrire quelque chose comme ça. Donc, nous allons utiliser le poids hors. 90 hauteurs 19 hauteur off. 11 Les analystes utilisent le rayon de coin de huit comme ça Et pour la couleur. Utilisons le DDT comme ça. Positionnez-le comme ça et au milieu de cette mosquée. Donc, comme ça. C' est pour ça que nous avions besoin de la mosquée. Et maintenant, vous pouvez sauter en avant et regrouper cette mosquée. Alors sélectionnons tout. Mais nous devons ramener le texte au centre, comme ça, donc c'est de l'esprit. Déplaçons le juste ici pour que nous puissions voir ce que nous faisons. Donc comme ça. Et nous allons déplacer la mosquée juste ici en haut, clic droit et mosquée avec la forme enfin, et ça va être notre mosquée et enfin sauter à l'intérieur de la mosquée et déplacer tout à l'extérieur comme ça. Maintenant, enfin, faites deux copies de celui-ci, mais d'abord appelez-le vide qui contrôlent le contrôle de. Maintenant, sur ce 1er 1, vous pouvez appuyer sur le contrôle G pour regrouper la qualité, accord, parce que c'est notre premier contrôle de couleur G. Appelez le bleu. C' est notre deuxième couleur et notre contrôle violent. G a appelé celui-ci vert comme ça, et vous pouvez les ouvrir tous, appuyez sur contrôle de puis les renommer comme ces couleurs parce que ces couleurs vont correspondre à la force du possible. Tellement contrôlé. La fin a finalement appelé celui-ci vert. Maintenant pour les couleurs pour le rouge. Permettez-moi de copier rapidement dans cette couleur. Donc, pour les Reds, vous allez utiliser E 53 c 85 pour le Bleu, nous allons utiliser 366 f f. Et enfin pour le vert choisirait typiquement cette couleur aussi bien. On va avoir cette couleur. Donc, enfin, nous allons maintenant les déplacer afin que vous puissiez les sélectionner pour maintenir maj et flèche droite et le positionner quelque part comme peut-être 10. C' est bon et enfin faire la même chose pour le vert, alors gardez-le un 10. C' est bien. Non, faisons quelques changements à eux. Donc tous vont avoir une semaine de congé, parce que nous allons commencer et ensuite les étendre comme ça et tarder pâty à zéro pour les trois. Vous pouvez fermer tout cela, et c'est fondamentalement tout pour notre design. Donc, comme vous pouvez le voir, c'est vraiment facile et simple à faire. Maintenant, commençons à en créer quelques copies pour qu'il contrôle le maintenant sur ce second état. Lorsque quelqu'un clique sur ce champ, créer un mot de passe va disparaître. Donc, abaissons l'apace vous il. Mais avant que nous le fassions, commandions d'abord certaines de ces couches avant d'apporter d'autres modifications. Donc, ce que nous avons nous avons grand possible et possible au sommet. Ensuite, nous avons ces trois et enfin une mosquée à droite. Maintenant, nous pouvons le copier. Donc il a contrôlé l'Et sur cette première étape, comme ils l'ont dit, nous allons abaisser la ville apace off, créer possible de texter et sur ce second état, ce n'est pas un saut en vue et dépenser cette mosquée et nous pouvons l'étendre à quatre points. Par exemple, pour ce premier état de ce deuxième état, nous allons les étendre à six. Et sur le 3e 1 orteil huit. Donc c'est tout pour le mot de passe. Choisissons l'obésité rouge comme 100, vous pouvez cliquer ici et voir l'esprit est 90. Donc tu dois faire la même chose pour ici. Donc 90 va remplir et enfin pour la mosquée. Ce dont nous avons besoin, c'est le texte qui dit trop faible. Positionnez-le au milieu comme si la prochaine va orteil. Attends un peu. Puis il a contrôlé. L' utilisateur va se mettre au pied. Deux autres personnages comme ça et nous allons faire la même chose pour le bleu. Donc 100 à 90 comme ça et nous devons changer le texte une fois de plus. Donc deux semaines vont tomber ou vous pouvez le laisser et inclure pourrait être plus fort au centre et ensuite le déplacer dehors parce qu'il est plus facile pour nous de l'aligner comme ça et enfin de frapper le contrôle D et nous allons agrandir la mosquée tout le chemin sur le bord comme ça et enfin inclure la couleur verte. Donc c'est 90 et 100 pour l'opacité. Et enfin, pour les tâches que vous pouvez inclure un mot de passe fort et qui pourraient être plus forts, vous pouvez le déplacer vers le bas. Donc c'est fondamentalement tout pour la partie création. Vous devriez avoir ces cinq ports, et maintenant ce qu'on va faire est un prototype. C' est un clic juste ici. Cliquez sur ce champ. Donc, quand l'utilisateur tape, animation automatique va se produire et nous pouvons choisir, par exemple, 0,6 seconde, je pense que cela fonctionnera assez bien maintenant pour ce 2ème 1 Dessinons, et ce que nous voulons est de avoir le délai de 0,6 secondes ou animer 0,6 est bon et il est en dehors. Nous pouvons laisser ça juste s'assurer que vous avez la zone d'assouplissement, donc je vais le changer ici aussi. Non pour dérangé. Allons l'emmener jusqu'à ici. On va avoir le temps. Donc, une fois de plus, on le déplace comme ça. Le délai sera donc une seconde et des notes faciles et enfin une seconde ici aussi . Maintenant, sur ce dernier que nous allons traîner ici, nous allons utiliser fondamentalement les mêmes paramètres donc temps une seconde assouplissement et une seconde aussi. Eh bien, il est maintenant testé et voir ce qu'on a fait. Donc, je vais cliquer sur ce 1er 1 clic jeu, agrandir juste un peu. Donc, quand vous cliquez à l'intérieur, c'est la hauteur des pieds, créer des motsde passe , créer des mots , montrer ces quatre points, puis six et tout cela se passe. Donc, quand je le déplace une fois de plus, quand vous cliquez à l'intérieur va se cacher, puis montrer pour les points, puis six et enfin huit et tout cela ci-dessous suit. Maintenant, gardez à l'esprit que vous pouvez créer ceci comme une seule barre, puis inclure un tri Grady int , par exemple, et ensuite utiliser le même texte, comme nous l'avons fait dans cet exemple, mais juste déplacé l'int Grady le long de la ligne de sorte que l'arrière-plan de ce champ devrait être un gris clair. Donc dd la même couleur que j'ai utilisée dans cet exemple. Mais pour le Grady int, vous pouvez le positionner Toby, par exemple, à trois. Ensuite, vous pouvez déplacer celui-ci et ensuite l'avoir vert, ou faire tout ce que vous voulez avec. Vous pouvez également, par exemple, colorer cette entrée Toby Greene pour correspondre à cela et aussi changer les couleurs du texte. Donc, chaque texte correspond à chacun de ces champs. Donc, c'est vraiment à vous de décider si vous voulez apporter des modifications supplémentaires. Ce ne sont que quelques-unes de mes idées, et vous pouvez également explorer un autre exemple en ligne. Et enfin, vous pouvez inclure les couleurs des clients à l'intérieur afin que vous puissiez l'appeler le cycle. Par exemple, Destexhe juste ici, bien que ces changements que je vous ai montré ici. Donc vraiment les options sont infinies lorsque vous travaillez sur un projet et c'est vraiment à vous, votre client et votre orteil d'imagination mettre tout cela dans le travail de remorquage. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 33. Formulaire 6: dans cette vidéo, je vais vous montrer comment vous pouvez créer ce formulaire. Donc, quand vous cliquez sur le nom va devenir bleu, il va faire la même chose pour le nom email et enfin, message juste ici. Et enfin, quand il se sent hors de tous les champs, quand vous cliquez sur envoyé, il va disparaître et ensuite rapidement vous montrer merci, et nous vous répondrons rapidement Message. Et c'est comme ça que tu sais que tu as envoyé le message. Alors commençons. Donc ici, j'ai l'aéroport de 800 par 800 pour gagner un peu de temps, déjà créé la conception si rapidement courir à travers elle avec vous. Mais quelque chose comme ça, nous avons déjà créé dans une de ses précédentes vidéos. Donc, chacun de ces champs hors de son nom, e-mail et message a exactement la même configuration. Donc si je zoome un peu plus près à l'intérieur, nous avons la mosquée. Donc si j'ouvre la mosquée, nous avons au nom de celle-ci. Donc, vous allez dépenser la mosquée à droite pour révéler le même nom que nous l'avons fait dans certaines de nos vidéos précédentes. Nous avons votre nom qui va disparaître et finalement nous avons cette ligne qui, quand quelqu'un clique dessus, va devenir bleue. Ensuite, le texte va taper dans son intégralité et ensuite il va revenir à sa couleur d'origine . C' est ce que nous avons pour ces trois champs. Et enfin, nous avons ce fond en bas. Donc si je l'ouvre, nous avons juste le parfum et le fond qui est à 2 à 5 avec 70 comme tous nos autres boutons. Enfin, nous avons contacté , qui est ouvert, nous, qui est ouvert, dit à 30 tout le reste du texte est à 20 et enfin nous devons vous remercier. Donc, si je sélectionne toutes ces faibles valeurs de base antérieures, sélectionnez le remerciement et augmentez son opacité. Donc ce que nous avons à l'intérieur, nous avons la coche. Donc nous avons le cercle à 70 par 70 et appelons ça cercle. Donc, et enfin, nous avons cette icône de coche à l'intérieur, simplement colorée en blanc. Donc rien de vraiment spécial. Ci-dessous, nous avons un texte de remerciement qui est ouvert, certains robuste. Et enfin, nous allons revenir vers vous sous peu. Sauce ouverte 20 à cette couleur plus claire. Comme la couleur dans nos champs. Donc, je vais aller aux pieds partout dans la ville britannique de ça. Sélectionnez tous les autres, et la raison pour laquelle j'ai abaissé l'apace ville de celui-ci est qu'il va apparaître dans notre écran final, donc il va devenir complètement visible à l'état final de cette animation. Commençons donc avec notre prototype. Les premières choses d'abord. Je vais cliquer sur l'aéroport, appuyez sur Contrôle de à dupliqué. Et sur ce 1er 1 quand quelqu'un clique ici, le nom va disparaître. Alors chargeons une ville 20 et la ligne va devenir Sercan bleu. Il suffit de cliquer ici pour sélectionner la couleur bleue. Donc c'est tout pour le premier état pour le deuxième état, je vais le contrôle de l'enfant des orteils et cliquez sur les orteils sauter à l'intérieur. Nous allons changer la couleur pour revenir à cette belle couleur, alors voyons rapidement quelle est la couleur ? Donc c'est 70 70 70 70. Donc cette sorte de sombre grande et enfin nous allons révéler la mosquée comme si juste pour révéler le nom suivant. Nous allons cliquer ici pour votre email, alors nous allons dupliquer le port d'art. Cliquons à l'intérieur et diminuons l'opacité de votre e-mail et changez la couleur de ligne orteil bleu comme ça . Et c'est tout pour cet état. Et dans l'état suivant, nous allons changer la couleur de la ligne de retour. Donc je vais choisir ceci sur la couleur gris foncé et ouvrir la mosquée afin que nous puissions révéler l'email du designer dans ce cas comme ça. Et enfin, quelqu'un va cliquer ici, et on va passer au bout de l'opacité de votre message sur celui-ci. Donc ça a ralenti votre ville de rythme. Appelons-la dans la ligne bleue pour indiquer que quelqu'un est en train de taper. Et enfin, dupliquons celui-ci pour notre état final pour le texte. Changons dans la couleur de la ligne de retour à ce gris foncé et explique quelques-unes de nos vidéos précédentes. Vous pouvez simplement copier et coller ces codes hexadécimaux si c'est plus facile pour vous, ou vous pouvez simplement utiliser cet outil de sélection de couleurs et choisir simplement la couleur que vous voulez. Donc c'est fondamentalement tout pour notre processus de création de tout sur ce dernier utilisateur d'état va taper sur ce fond envoyé et que va-t-il se passer ensuite ? On va prendre le contrôle de D. Maintenant. On va tout sélectionner. Sauf pour le dossier de remerciement. On va abaisser leur ville de salaire à zéro. Et enfin, pour notre dernier état, nous allons augmenter l'opacité du texte en haut. Donc, ce Merci. On va juste augmenter la ville d'obéissance comme ça. Donc c'est fondamentalement tout pour tout le processus de création. Comme vous pouvez le voir, il y a beaucoup de champs créés par Toby. Mais tout est vraiment assez simple. Tout est fondamentalement le même. Vous ne faites que répéter ces étapes. Donc bleu coup bleu et puis révéler vraiment, vraiment bien, fondamentalement, c'est tout. Et enfin utilisable cliquez sur le fond. Donc, il a commencé à prototyper. Nous allons sauter sur notre 1ère 1 et nous allons cliquer sur ce champ. Nous allons à vous étape ou à toute viande est dans n 0.6 secondes fonctionnera très bien pour ces arrestations hors des champs. Vous pouvez marcher pour certains d'entre eux si vous le souhaitez, mais orteil augmenter la vitesse de cette interaction. Je vais juste utiliser le temps. Donc, au lieu de taper, nous allons utiliser le temps. Nous allons laisser le retardé à zéro utilisation auto animate, facile une sortie et 0.6 secondes afin que nous ayons exactement la même configuration. Donc je vais juste faire glisser ces poignées bleues parce qu'il va simplement copier et coller les mêmes paramètres que ceux que nous avons utilisés pour le 1er 1 Et il va juste tout remplir pour nous. Maintenant. Enfin, sur ce dernier état, nous allons vous faire marcher sur le bouton d'envoi, donc nous allons simplement le faire glisser. Aussi, animer facile maintenant 0.6 secondes. Et dans cet état final, nous allons juste utiliser le temps. Également animer, assouplir, ou vous pouvez utiliser des fondus, ou vous pouvez utiliser ce que vous voulez. Donc peut-être que nous pouvons utiliser des bornes pour voir à quoi ça ressemble ou s'accrocher. Mais je pense que ça a l'air vraiment sympa et juste l'utilisation est juste pour avoir la cohérence entre tous. Donc, c'est rapide sur le 1er 1 clic de jeu. Je vais juste l'agrandir un peu et voyons à quoi ça ressemble. Donc, quand vous cliquez, votre nom va devenir bleu, échouant sensation de coup sur tout. Et enfin, lorsque vous cliquez sur le bouton d'envoi va disparaître et puis fondre ce texte de remerciement . C' est tout pour cette vidéo et je te verrai dans la prochaine. 34. Formulaire 7: dans cette vidéo, je vais vous montrer comment créer ce formulaire de contact simple. Donc, lorsque vous cliquez sur le bas, l'image dans ce texte avec un titre de poste saute hors de la route vers le haut pour révéler l' e-mail et les champs de message. Donc, lorsque vous cliquez sur l'e-mail, champ va remplir tout et puis quand vous cliquez, envoyer le message va basculer de l'envoi du message au message envoyé, et il va griser ces champs pour vous faire savoir que vous avez réellement a envoyé le message. Donc, si je clique dessus encore une fois, vous pouvez voir à quoi tout ressemble. Et enfin, il va écrire dans Message envoyé. Alors commençons. Donc on utilise l'aéroport sur 800 par 800. Comme dans toutes les autres vidéos, et ce que j'ai ici est le conçu pour gagner un peu de temps. Alors commençons avec l'image. Cette image est libérée d'un point de splash com et son à 80 grand 80 Cercle Donc parfait et enfin il a une ombre, juste une ombre fondamentalement pleine off 03 et six et la couleur est entièrement noire à 16%. Comme dans l'une des vidéos précédentes. Nous avons donc ce texte et le titre du poste. Donc, ce texte principal est le sens ouvert et 20. Donc fondamentalement le même Texas, celui-là juste que j'utilise la couleur plus foncée. Donc c'est D D. D. Et celui-ci est 70 70 70 70 et il est juste légèrement emboîté. Donc 10 pixels à partir de ce titre de poste. Un titre de poste intérieur. On a la balise de titre, c'est quoi ? 80 par la Turquie. Et enfin, nous vous avons, je texte de concepteur, qui est à nouveau sens ouvert à 10 et juste la couleur bleue de base. Donc ces deux-là sont localisés. Donc, si j'appuie sur Maj 1234, ils sont situés à 40 pixels à droite de cette image, et ils sont situés au milieu. Donc, si je rentre une touche majuscule comme celle-ci avec ma touche gauche de la souris, vous pouvez voir qu'ils sont au milieu. Cette image et l'image elle-même est positionnée à 20 pièces de ce champ. Donc, le champ que nous avons e-mail et le message, mais les premières choses d'abord. L' ordre de tous ces éléments. Donc, d'abord, nous avons l'image sur le dessus, puis nous avons le concepteur à droite. Ensuite, nous avons le fond parce que ces deux email et message vont sauter derrière le fond. Il est donc important de tout positionner correctement avant de créer vos animations afin que tout fonctionne correctement. Maintenant, nous avons email est un dit. Nous avons votre e-mail, qui est ouvert, dit 20 à D DD pleine capacité de 100. Et nous avons ce client et e-mail si je cache cela sur l'opacité à zéro, donc fondamentalement le même texte. Mais à 70 70 70 70 Open dit 20. Donc fondamentalement la même chose que votre email, et si je zoom un peu plus près, vous pouvez voir que c'est juste une différence de couleur. Donc, à cet état, c'est une opacité D inférieure à zéro. Nous avons fait la même chose pour le message. Donc, nous avons celui-ci, et nous avons dans celui-ci à l'arrière donc fondamentalement le même accord que ceux ci-dessus. Maintenant, pour les champs en soi, cette entrée est à 400 avec 70 et la partie inférieure est à 400 avec 1 80 Et comme ils l'ont dit plusieurs fois tout au long de ce cours, vous obtiendrez les fichiers d'entraînement et vous obtiendrez le jeu des orteils avec et vous pouvez en faire avec le vôtre. Vous pouvez inclure différentes couleurs. Si vous voulez utiliser ces modèles particuliers pour nos clients, vous pouvez choisir leurs couleurs et ainsi de suite. Mais je voulais juste expliquer le processus dans la logique sous-jacente. Enfin, nous avons le fond. Donc si j'ouvre le fond, on a l'aperçu du masque. Donc, à l'intérieur du masque, si je zoome un peu plus près, nous avons contacté sur le dessus. Envoyez un message ici et un message envoyé juste en dessous. Donc, ces mosquées est créé fondamentalement de la même manière que toutes les autres mosquées dans ce cours, donc ne va pas entrer dans trop de détails à ce sujet. Alors allons frapper Control de pour dupliquer ce bateau. Mais parce que ce sera notre deuxième état, nous allons travailler sur ce premier état. Alors commençons par cette image. Il va être à 1 20 avec 1 20 donc, comme ça, comme ça, donc vous pouvez simplement l'agrandir ici et je vais le positionner parfaitement aligner les orteils. Wit et ce stop edge off dans le champ email, et je vais simplement cliquer ici pour le positionner au milieu. Ensuite, nous allons ouvrir le dossier des designers. Utilisez le nom appuyez sur Maj et le clic gauche jusqu'à ce qu'il soit au milieu. Vous êtes designer. Ensuite, positionnez tout au milieu comme ça, puis déplacez-le juste en dessous de l'image. Et maintenant je vais le positionner. Alors décale-toi. Flèche du bas. 1234 Donc peut-être à 40 ans, gardons simplement les choses simples parce que nous avons 20 pixels espacés entre tout. Donc, nous avons un écart de 20 pixels ici et un écart de 20 pixels ici, alors amenons-le ici aussi. Laissons-le là. Et enfin, nous devons déplacer les courriels et les messages hors du chemin. C' est pour ça que nous avons la bouteille sur le dessus. Donc quand je l'ai déplacé, tu peux voir qu'ils vont derrière le fond, pas au-dessus. C' est pourquoi l'animation va orteil fonctionne correctement. Donc, nous allons d'abord tout déplacer 80 pixels. Donc, déplacez la flèche du bas. 12345678 et ensuite nous pouvons déplacer le message aussi, donc 12345678 Et si vous voulez, vous pouvez les déplacer encore plus loin. Donc 12345678 sur tout. Et enfin, avec les deux sélectionnés, abaissez simplement l'opacité à zéro. Et puis dans l'état suivant, qui est celui-ci. Quand ils cliquent sur ce bouton, il va aux pieds. Apparaissent ici. Maintenant, nous allons changer ces textes sur aller le contrôle de frappe orteil et cliquez sur Insight sur ce 1er 1 va écrire dans Contactez-moi afin que je puisse l'abaisser et je vais frapper orteil sur envoyer un message et le déplacer hors du chemin ci-dessous comme si. Et je peux le positionner comme un zéro avec ce message envoyé. Alors, qu'est-ce qu'on peut faire ensuite ? Parce que nous avons créé nos deux états, nous pouvons commencer notre animation afin que nous puissions d'abord créer nos écrans ou commencer l'animation comme ça fondamentalement, Mais nous allons d'abord créer nos écrans. Donc je vais frapper le contrôle. En effet, pour dupliquer cela notre port et sur ce 1er 1 les gens vont cliquer ici. Alors commençons par le début. Ils vont cliquer. Contactez-nous, cela va apparaître, puis ils vont cliquer ici où il indique votre email. Maintenant, ce second état, on va se mettre au point sur l'opacité de votre email et augmenter votre ville de paie. Euh, ce message électronique ensuite, ils vont cliquer sur votre message pour que votre message soit à zéro ou Pacenti, et nous allons le dupliquer. Et à l'intérieur allaient augmenter le rythme de ce texte et finalement ici, ils vont cliquer sur le message envoyé. Alors dupliquons encore une fois. Et ces deux textes vont changer la couleur. Donc, fondamentalement, je vais sélectionner les deux d'entre eux en utilisant le contrôle de l'esprit garder et je vais cliquer ici , appuyez sur le centre de presse D d pour changer la couleur. Et enfin je dois changer le texte à l'intérieur. Donc, le texte va écrire dans le message, envoyé comme ceci, positionner au centre et envoyer un message. On peut le sortir du chemin comme ça. Donc, il y a fondamentalement ça. Nous avons trois textes différents à l'intérieur de notre bouton. Nous avons deux textes différents pour chacun de ces champs, et nous venons de les déplacer hors du chemin. Commençons donc par l'animation. Je vais frapper sur le prototype. Zoom un peu plus près pour que les gens puissent appuyer sur ce bouton. Alors nous sommes allés vers vous. Etape outo. Toute viande est en dehors et 0,6 seconde pour la transition. Ensuite, nous pouvons faire la même chose pour celui-ci afin que nous puissions cliquer sur votre email alors juste ici pour lancer l' animation. Donc on va à un pas ou deux. Toute viande, exactement les mêmes réglages ? Non, d'ici à là, on va utiliser le temps parce qu'il va tout ressentir pour nous si le temps ou pour animer. Facile maintenant. Et vous pouvez utiliser 0,8 seconde si vous voulez que l'animation soit juste un peu plus longue. Et enfin, ils vont cliquer envoyer un message donc traîné sur le robinet ou le tournoi est dans N 0.6 secondes afin que nous puissions avoir de la cohérence avec tous d'entre eux. Donc, nous allons cliquer sur le 1er 1 clic jouer je peux plus grand, juste un peu, et quand vous cliquez ici, vous pouvez voir à quoi cela ressemble. Donc, si nous sautons en arrière, vous pouvez voir que cette image est en train de rétrécir orteil 88 80. Et cela se déplace vers la droite dans la position exacte que nous l'avons créée en premier lieu. Et ces deux champs sautent du bas vers le haut et vont dans leur position d'origine ainsi que ce texte est en train de changer dans le bas de sorte que vous pouvez voir qu'il a vraiment l'air agréable , propre et lisse, comme ça. Et enfin, quand ils cliquent ici va taper tout et quand vous cliquez, envoyer le message va changer le message texte envoyé, et il va griser ce texte pour vous faire savoir que vous avez effectivement envoyé le message . C' est tout pour cette vidéo, et je te verrai dans la prochaine. 35. Formulaire 8: dans cette vidéo, je vais vous montrer comment nous pouvons créer ce formulaire de contact simple. Donc, lorsque vous cliquez sur votre nom va échouer, lorsque vous cliquez sur, votre email va remplir ce Eh bien, enfin, lorsque vous cliquez sur votre message va remplir le message. Et puis lorsque vous cliquez sur cette icône de bouton va disparaître, Blue va se développer et vous recevrez un message de remerciement. Alors commençons. Donc, comme d'habitude, nous avons le port hors 800 par 800 toe nous faire économiser un peu de temps. J' ai déjà inclus la conception, donc pour l'inspecter un peu, et une fois de plus vous l'obtiendrez aux oeufs, souiller et vous pouvez le copier. Vous pouvez faire ce que vous voulez avec, essentiellement l'utiliser pour un travail personnel ou commercial, et dans ce fichier, vous serez en mesure de l'inspecter un peu plus en détail si vous le souhaitez, donc vérifier les espacements pour vérifier le texte tailles et ainsi de suite. Alors commençons. Envoyez-moi un message est ouvert, dit 30. Je reviendrai trop tôt. C' est possible est ouvert, dit 20. Y en a pour la maison ? Une touche Maj, une flèche vers le haut. Vous pouvez voir sa position 20 pixels depuis Envoyez-moi un message. Et celui-ci est à 40 pixels de ces deux champs pour les champs que nous avons nommés email et le message et tous les trois ont exactement la même configuration. Et vous avez déjà vu cette configuration dans ces vidéos. Donc ce que nous avons ici, c'est une mosquée qui montre le nom. Donc, nous allons révéler le nom comme ça et ci-dessous que vous pouvez voir votre nom, qui va disparaître une fois que vous cliquez dessus. Et c'est la même histoire pour les trois. Maintenant pour les tailles. L' entrée est de 300 avec 70 et nous avons un écart de 20 pixels entre eux. La même chose est pour votre email et pour le message juste en dessous. Si je clique sur l'entrée, vous pouvez voir qu'il est 6 20 avec 1 50 nous avons le message en deux lignes fondamentalement. Si je dépense le masque comme ça, c'est tout pour cette mise en place. Et enfin, nous avons le bas en bas. Nous avons juste une icône envoyée régulière avec ah couleur blanche et le fond est 70 par 70 et le bas est en position. Si je survolais. Il est de 40 pixels plus bas de tous ces champs et texte. Et enfin, ce que nous avons en haut est un texte de remerciement qui va apparaître à la fin parce qu' il est blanc. Laissez-moi rapidement goûter. C' est devenu un coup pour que vous puissiez voir que c'est merci. Je reviendrai vers vous dès que possible et si je saute à l'intérieur, merci. Le texte est un 30 Je vais arriver à un dès que possible est à 20. Donc je vais le rendre blanc à nouveau. Abaissez le zéro d'opacité. Et quant à la mise en place, c'est à ça que ça ressemble. Donc, ce texte blanc de remerciement est sur le dessus car il va apparaître à l'état final désactivé . Ce fond d'animation est juste en dessous parce que ce merci va apparaître juste au-dessus de la couleur bleue en bas. C' est pour ça que le bouton est juste là. Ensuite, nous m'avons envoyé un message, Al, revenez trop tôt et ensuite ceux-ci dans l'ordre. Alors commençons et sur ce 1ère 1, je vais juste aller aux pieds. Faites rapidement une copie. Alors contrôlez Andi. Et sur celui-ci, les gens vont cliquer sur votre nom juste ici. Donc ça va disparaître d'ici, et la mosquée est en train de tourner les pieds. Révélez-le lui-même, alors il va montrer le nom. Ensuite, ils cliqueront sur votre email. Alors faisons une autre copie. Donc votre email nous allons abaisser le Bay City 20 et nous allons montrer au masque quelque chose comme ça. Ensuite, ils vont cliquer sur votre message. Donc on va cacher ton message, et on va révéler notre mosquée comme ça. Et enfin, ils vont cliquer sur ce bouton dans cet état. Donc, dans cet état, nous allons simplement déplacer l'icône à l'extérieur quelque part ici et réduire l'opacité à zéro. Donc, comme il se déplace hors du cercle, il abaissera l'apace vers le bas à zéro, et ensuite nous allons avoir un autre état. Et dans cet état, nous allons augmenter la taille de ce cercle. Donc, je vais ouvrir et choisir le bas, et vous pouvez maintenir Shift vieux et le clic gauche sur votre souris et simplement l'agrandir comme ainsi jusqu'à ce qu'il remplisse tout et quand il ne sélectionne tout en dessous, comme ça avec votre touche de décalage et un amant ne collé à zéro. Donc, quand il se développe pour remplir tout l'écran, le reste de l'information va disparaître, fondamentalement comme il se déplace orteil bleu et enfin sur le dernier changement d'état nd et je vais augmenter l'opacité de ce merci vous textez orteil 100. Et c'est notre dernier état et notre message. C' est ce qu'ils vont recevoir quand ils ressentent tout. Commençons par le prototype. Donc, quand un utilisateur clique sur votre nom, nous allons à l'étape automatique. Animate est sorti d'ici et 0.6 seconde. C' est assez bon, et ça va tout remplir. Ensuite, ils vont cliquer sur votre e-mail, et nous allons utiliser les mêmes paramètres. Ensuite, ils vont cliquer sur votre message. Donc fondamentalement encore une fois les mêmes paramètres, et enfin ils vont cliquer sur ce bouton donc nous allons utiliser étape ou 20 viande. Mêmes paramètres. Mais entre ces deux-là, nous allons avoir le déclenchement temporel comme ça et nous allons choisir 0,8 d' ici . Le reste des paramètres va rester le même. Et enfin, on va juste traîner tout pour entendre. Mais supprimez le délai. Alors 0,0 présentateur. Donc, vous obtenez zéro pour le retard et est dans 0.6 seconde, donc tout reste le même. Alors pourquoi on a fait ça ? Vraiment ? Donc, en gros, quand les gens cliquent ici, cette icône va disparaître dans l'espace blanc. Il va orteils, attendez un peu, puis développez ces couleurs bleues et enfin, que ce texte va orteils apparaissent sur le dessus. Alors vérifions. Je vais frapper le jeu pour tout prévisualiser et l'agrandir un peu. Donc, quand vous cliquez ici, votre nom va disparaître et le nom va disparaître ici, en disant, disant, quand vous cliquez pour l'e-mail disant quand vous cliquez pour le message et enfin, quand vous cliquez ici, va disparaître. Blue va le dépenser et le décharger. Le texte est en train d'apparaître à nouveau, alors vérifions-le une fois de plus. Donc votre nom, votre email, votre message et enfin, juste ici. Icône s'en va. Le bleu est en expansion et le texte de tanking apparaît Maintenant, évidemment, comme nous avons tous ces autres exemples, vous pouvez le faire avec les couleurs de vos clients. Vous pouvez inclure des clients. Un logo. Ainsi, par exemple, distinct. Vous local peut apparaître d'ici, il peut sauter par le haut. C' est vraiment à vous, votre projet particulier et à votre imagination de bien utiliser cet exemple et d'en faire un bon usage. Fondamentalement, lorsque vous le renvoyez au client, c'est juste pour vous de comprendre la mécanique et la logique derrière elle et de comprendre la structure, comment émis structure tous vos éléments afin que vous puissiez obtenir l'animation parfaite. Donc c'est tout pour cette vidéo. Et je te verrai dans la prochaine 36. Formulaire 9: dans cette vidéo, je vais vous montrer cette transition rapide et agréable entre me contacter et m'envoyer un message. Donc, lorsque l'utilisateur clique sur me contacter, message me va essentiellement s'effondrer et révéler toutes ces informations sur l' utilisateur ou l'entreprise qu'ils veulent contacter. Et quand tu cliques sur moi un message, ça va à bout. Développez ces champs de message, puis ils peuvent entrer leur nom, leur message, puis envoyer l'e-mail. Une fois de plus, quand vous me contacterez, tout ça va s'effondrer. Et quand vous cliquez, envoyez-moi un message. Tout ça va s'effondrer. Alors commençons. Donc voici à nos ports 800 par 800. Et je vais juste vous montrer le design fini parce que nous n'avons qu'à nos ports. Donc, sur ce 1er 1, laissez-moi rapidement zoomer un peu plus près. Ce que nous avons est une icône de téléphone, puis contactez-moi. Donc, princesse, à 30 tout décalage fracturé et flèche gauche, vous pouvez voir sa position 20 pixels vers la droite. C' est ce que nous avons ici. Ensuite, nous avons un message parce qu'il va apparaître juste en dessous. Comme vous pouvez le voir dans ce deuxième état et à l'intérieur, nous avons fondamentalement la même configuration. Donc, nous avons l'icône e-mail et message me texte qui est ouvert science à 30 aussi bien. Donc, quand je l'écroule, nous avons des informations de contact et nous avons masqué la perspicacité si élevée l'a fait. Si je zoome un peu plus près, vous pouvez voir que j'ai toutes ces taxes. Donc c'est ouvert, dit 20. Donc juste un peu plus petit que dans ces titres et nous avons tous juste disposés comme ça Et finalement j'ai placé le masque si blanc avec bordure. Ou vous pouvez placer un masque sans couleur de sans bordure. Vraiment, ça n'a pas d'importance et j'ai placé le masque juste au-dessus de tout comme vous pouvez le voir ici. Donc, tous ces calques de texte sont ci-dessous et le masque est placé sur le dessus comme vous l'avez vu dans plusieurs vidéos avant celle-ci. Et enfin je les ai sélectionnés tous, clic droit et mosquée juifs avec forme. Et donc j'ai eu cette mosquée et enfin en bas. Nous avons la mosquée pour le message de nom et les boutons. Donc fondamentalement tout cela que vous voyez ici. Et j'ai fait exactement la même chose qu'avec la mosquée des coordonnées. J' ai donc d'abord créé ces champs. Comme nous l'avons fait dans toutes les vidéos précédentes. Donc, le champ pour le nom un pour le message et enfin seulement les boutons réguliers. Donc, si je les développe, vous pouvez voir que nous avons votre entrée de nom, votre entrée de message et les boutons bleus envoyés et inférieurs de fondamentalement tous hors de la même configuration comme un spectacle faisant dans les vidéos précédentes. Juste dans celui-ci, l' entrée est à 6 20 juste pour correspondre à l'entrée du message ci-dessous. Donc c'est au même esprit que celui-là. Et pour le fond, nous devons nous battre avec 70. Donc fondamentalement la même chose que tous les autres fonds. Et comme je l'ai dit, j'ai placé la mosquée à peu près tous. Et dans celle-ci, la mosquée est effondrée, comme vous pouvez le voir ici. Donc c'est juste en bas et dans cette mosquée est agrandie. Donc si je clique dessus, vous pouvez voir toute la mosquée. Soto le cacher, va simplement déposer la mosquée comme elle est dans le premier état ici, et quand vous cliquez dehors, il va simplement tout cacher. Et quand vous l'agrandissez, il va révéler tout ce qui est à l'intérieur de la mosquée et sur celle-ci est vous pouvez voir dans les coordonnées. Nous avons exactement le contraire, donc la mosquée est effondrée et si je clique à l'intérieur de la mosquée et l'agrandit, vous pouvez voir qu'elle va montrer le texte. Donc c'est fondamentalement tout pour le design. Ces deux mosquées fonctionnent exactement de la même manière et font exactement la même chose. Mais l'un d'eux est positionné juste sur le dessus et l'un d'eux est positionné en dessous est maintenant pour la couche. L' organisation est que vous pouvez voir que nous avons me contacter au sommet parce qu'il reste toujours au sommet. Ensuite, nous avons un message parce que nous en avons besoin pour couvrir ce texte quand il saute les pieds ici dans ce second état et enfin nous avons des informations de contact, ce qui est ici juste parce que nous avons un message sur le dessus juste ici, et ça va pour couvrir cela dans le second état, puis cette mosquée qui est cette mosquée pour les champs va se développer jusqu'au sommet. C' est pourquoi est en bas. Donc, si je commence à les animer quand je clique sur prototype, vous pouvez voir que nous avons ces deux états. Mais je vais juste les décomposer. Donc, lorsque vous cliquez sur, contactez-moi va développer cette opération lorsque vous cliquez sur. Message que moi va étendre cela. Donc, nous devons cliquer sur le message moi pour qu'il montre ceci. Je vais simplement en traîner deux ici. Nous allons marcher ou orteils animer facile maintenant 0.6. Et enfin, nous allons cliquer sur Me contacter, faites-le glisser ici et utiliser les mêmes paramètres. C' est à quel point c'est facile de brancher ce truc. Donc, quand vous appuyez sur l'aperçu, je vais juste l'agrandir un peu, comme vous pouvez le voir lorsque vous cliquez sur me contacter. Cette information s'affiche lorsque vous cliquez sur le message moi. Comme vous pouvez le voir, il se développe vers le haut. Cacher le texte de contact et révéler toutes ces informations. Ensuite, quand vous pourriez me contacter, va pousser tout ci-dessous et a révélé cette information et vice versa pour me message . Donc c'est tout pour cette vidéo. Et si vous ne savez pas comment j'ai fait cette information, elle sera contenue dans le film X, que vous allez obtenir pour cette section du cours. Ercan saute à l'intérieur. Vous pouvez inspecter les espacements pour vous-même. Si vous avez manqué quelque chose comme une couleur ou la taille du texte ou différent, vous pouvez l'inspecter et vous pouvez le copier et le coller dans votre propre conception. Vous pouvez également l'utiliser pour votre propre travail personnel ou commercial. Vous pouvez le faire, par exemple. Permettez-moi de vous donner un exemple rapide. Alors ce que ça dit, contactez-moi. Vous pouvez mettre une image de fond derrière elle, et quand il dit message moi, vous pouvez mettre l'image derrière cela. Donc, fondamentalement, il va montrer deux images côte à côte. Juste ici. Vous pouvez également utiliser une couleur d'arrière-plan différente. Ainsi, par exemple, vous pouvez choisir une couleur verte pour l'arrière-plan derrière. Contactez-moi et la couleur bleue pour l'arrière-plan derrière. M' envoyer un message afin que vous puissiez réduire ces deux couleurs à côté de lui, donc l'une au-dessus de l'autre, et vous pouvez le faire pour pimenter ce design un peu. Je voulais juste vous montrer les os nus de la mécanique derrière elle. Et puis c'est vraiment à vous de choisir, orteil le mettre à fonctionner dans n'importe quel design que vous avez ou que vous avez en tête. Donc, cela fonctionne pour vous dans votre projet particulier. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 37. Formulaire 10: dans cette vidéo, nous allons créer ce formulaire. Donc, lorsque l'utilisateur clique sur, votre e-mail va disparaître, puis tapez un e-mail et mettez en surbrillance le champ de saisie orteil devenir vert. La même chose se passera avec le mot de passe. Et enfin, quand ils doivent répéter le mot de passe, ils vont faire une erreur. Donc ça va secouer, revenir aux personnages, et puis quand ils ont corrigé, ça va devenir vert parce que ça va correspondre à ça, peut-être sur le dessus. Et enfin, quand ils cliquent sur Créer un compte, il leur montrera le succès. Alors commençons. Donc, comme d'habitude, avoir l'aéroport à 800 par 800 et ils sont tous vraiment créés le conçu pour gagner un peu de temps. Donc, au sommet, nous avons créé le compte, ce qui est le sens ouvert à 28. Ensuite, nous avons ces trois champs, et enfin nous avons un bouton ci-dessous. Donc, pour les champs, si je zoom un peu plus près, nous avons le texte plus petit sur le dessus. Entrez votre adresse e-mail. C' est un sens ouvert. Et 14 nous avons une mosquée, qui est le même masque, fondamentalement comme vous l'avez vu dans les vidéos précédentes, en particulier dans la section du cours. Donc nous avons cette mosquée, que nous allons révéler plus tard. Et en dessous, nous avons le texte, évidemment. Mais en dessous de la mosquée, nous avons votre email, qui est de sens ouvert à la lumière DDT, couleur grise. Et enfin, nous avons l'entrée, qui dans ce cas est à 400 par 70. Donc, si je zoom un peu, nous avons ces deux champs fondamentalement exactement les mêmes que ce 1er 1 Et enfin nous avons créé le fond de compte, qui a une mosquée et deux boutons. En gros. Nous avons donc le bouton bleu, qui est ce bouton de base Nous avons le bouton vert avec l'opacité un abaissé, et la couleur verte est celle que nous avons utilisée tout au long du discours. Ou c'est 55 D 466 Et comme je l'ai dit plusieurs fois tout au long de ce cours, vous aurez ce sauvage à l'intérieur de ce fichier supplémentaire. Vous pouvez ensuite inspecter tous ces éléments et copier les chats. Koji se sentent comme ces couleurs pour les utiliser dans votre travail et enfin dans le fond. Nous avons la mosquée est allé au texte à l'intérieur, donc fondamentalement le même que je vous ai montré dans certaines des vidéos précédentes. Nous avons donc le Premier État, qui est créer le compte et l'État final, qui dit le succès et qui va passer de la disposition à la disposition. Alors commençons et nous allons dupliquer ce notre contrôle de contrôle de port. Et sur ce 1er 1, nous allons tout simplement tomber sur la ville d'Obey sur votre email tout le chemin vers le bas. Ensuite, nous allons appuyer sur le contrôle une fois de plus, parce que sur ce premier état les utilisateurs vont cliquer pour entrer leur e-mail. Ensuite, votre email va disparaître. Et puis dans cet état, nous allons changer la couleur de cette entrée. Alors laissez-moi l'ouvrir rapidement, et nous allons utiliser la couleur verte qui sont en bas est afin que nous puissions rapidement sélectionner le collier vert d'ici. Donc, je vais simplement cliquer sur le contrôle C sur celui-ci pour copier la couleur et où il dit entrée. Vous pouvez cliquer ici sur la bordure, pas sur le film hit Control V pour le coller, et nous allons révéler notre mosquée pour montrer que l'email a été entré et a été entré correctement comme vous pouvez le voir ici parce que ces formulaires peut détecter si vous, par exemple, le chardon manqué au caractère ou vous épelez mal, par exemple, Gmail ou vous avez manqué la fille. Quelque chose comme ça. Ils peuvent détecter cela et indiquer en rouge que vous avez fait une erreur. Ou si vous ne le faites pas correctement, ils peuvent indiquer en vert que vous l'avez fait correctement. Ensuite, ils vont cliquer ici sur votre mot de passe. Donc fondamentalement la même chose que pour l'e-mail. Donc nous allons frapper le contrôle d'un D et sur le passeport étaient allés pieds partout là-bas basé bas, frapper le contrôle une fois de plus et puis à l'intérieur, nous allons révéler la mosquée, et ces points sont ouverts à 40 et nous allons faire la même chose pour le bas plus tard. Et enfin, nous avons orteil basé la couleur hors de la bordure d'entrée. Comme avec le précédent. Ensuite, ils vont frapper le mot de passe répété, donc nous allons dupliquer celui-ci. Donc, quand ils cliquent, leur mot de passe répété est partout dans leur Bay City vers le bas. Fondamentalement, nous allons prendre le contrôle de la dernière fois et maintenant dans celle-ci va devenir rouge et ils vont commencer à taper leur passeport. Alors d'abord, permettez-moi d'agrandir un peu ça. Tellement bon coup 40 pour en faire la même chose. Donc pour celui-ci, ils vont commencer à taper leur passeport comme ça. Et il va montrer un rouge pour l'entrée et la couleur de la menace est e 53 C 85 comme ça. Donc ça va montrer qu'ils ont manqué leur passeport parce qu'ils l'ont entré ici et qu'ils ne l'ont pas répété correctement ici. Donc nous allons dupliquer ce coup contrôlé le et maintenant sur celui-ci, ce que nous voulons est de localiser cette entrée, et nous allons appuyer sur Maj et flèche gauche pour le déplacer. 10 pixels à l'orteil gauche. Alors on va frapper le contrôle, n'est-ce pas ? Encore une fois. Et sur celui-là, on va faire reculer les pieds au milieu, comme ça. Donc, déplacez 10 pixels vers la droite, et puis nous allons le déplacer fondamentalement une fois de plus, ou vous pouvez le laisser comme ça. Donc, si vous vouliez secouer dans les deux sens. Vous pouvez le faire directement à partir d'ici, donc quand ils commencent à taper et ont fini de taper, il deviendra rouge. Ensuite, il va secouer à gauche, puis revenir en position. Ou tu peux juste le faire passer. C' est vraiment à toi de décider. Comment veux-tu afficher ce shake ? Vraiment ? Donc, dans ce prochain, nous allons baisser ça. Donc, cette mosquée nous pouvons baisser de trois caractères vers le bas comme ça et dans la prochaine quand ils commencent à taper à nouveau, comme si, nous allons changer la couleur d'entrée orteil que la couleur verte afin que vous puissiez simplement choisir ce couleur. Assurez-vous que c'est ouais. 55 D 466 Donc c'est fondamentalement la même couleur que tous ces autres, et enfin ils vont cliquer, créer un compte. Il contrôle D. Et dans cet état final, ce que nous voulons, c'est que cette bouteille deviendra verte et cette mosquée va montrer du succès. Donc assurez-vous qu'ils sont sur la même ligne qu'ils sont, et nous allons déplacer, créer un compte vers le bas. Donc, c'est tout pour nos états. Et maintenant, il est temps pour nous de le prototyper, donc je vais prendre le contrôle. Zero et moi sommes allés zoomer un peu plus près. Je vais sélectionner tout ce champ. Les utilisateurs vont appuyer sur. On va utiliser l'auto. Animate est sorti et disons 0,6 seconde. Je pense que cela fonctionnera assez bien maintenant sur ce prochain. Nous voulons avoir le temps parce que c'est la transition des orteils. Fondamentalement, entre ces deux planches sont et pour le temps que nous allons utiliser, disons, délai de 0,8 seconde. Animer également, assouplir. Et enfin, utilisons 0,8 seconde pour que nous ayons un peu de cohérence. Maintenant, sur ce prochain, ils vont cliquer ici. Donc, nous allons utiliser l'autonomie de l'étape TZ note 0.8 secondes. Bulletin, vite. Vérifiez sur ce 1er 1 Nous avons utilisé 0,6 seconde. Utilisons 0,8 sur tous, donc c'est vraiment à vous de décider si vous voulez qu'il soit plus court ou plus long. Donc 0,8 ou orteil animer. Maintenant, sur celui-ci, vous allez utiliser le temps. Donc le temps 0,80 point huit facile. Une sortie sur celui-là. Ils vont taper les orteils comme ça ou à n'importe quelle viande s'assouplit. Et enfin, ce que nous voulons pour ces ceux-là parce que maintenant ils vont commencer à trembler. Nous allons utiliser le délai de zéro seconde parce que nous voulions sauter tout de suite à celui-ci. Ensuite, nous allons utiliser le temps Delay 0.8. Mais nous allons utiliser bounce au lieu de la facilité dans le dehors comme ainsi et sur celui-ci bien, dans est les mêmes paramètres. Donc fois, il sera 10.8. Ou peut-être qu'on peut utiliser Yeah, utilisons votre nommé pour voir ce qu'il fait Bounce 0.8. Et enfin, pour celui-là, on n'ira pas à son rebond. Vous allez utiliser facile une sortie parce qu'il va orteil essentiellement être au même endroit que celui-ci. Alors va sauter à nouveau dans sa position d'origine. On va s'en sortir, et DeLay vous permet de voir 0,8 à quoi ça ressemble. Et enfin, nous allons cliquer sur le bouton, faites glisser son vous allez à l'étape photo ennemi, note facile et 0.8 secondes. Alors maintenant qu'on a tout branché, vérifions ça. Voir à quoi il ressemble pour jouer en grand Il cliquez ici va disparaître. Tapez un e-mail et devenez vert pour le mot de passe va disparaître. Tapez un e-mail, devenez vert. Répéter mot de passe Comme vous pouvez le voir, il rebondit revient en position et maintenant il montre des points d'origine. Maintenant, nous avons un petit bug juste ici, que je vais corriger. Mais vérifions d'abord ça. Et enfin, nous avons du succès. Donc, comme vous pouvez le voir, je change la taille de ces points plus tard quand ils sont révélés. Mais pas avant ça. C' est pourquoi nous avons ce boggy bizarre pour sauter une fois de plus montrant toute l'animation. Donc on a ça. Nous avons ceci et maintenant vérifier cela parce que ceux-ci sont à 40 et ces mots sont un peu plus bas. Donc, lorsque vous cliquez ici comme vous pouvez voir le tri large large à partir de la première position de l'orteil cette dernière position. Donc je vais sauter et réparer ça maintenant. Donc je vais revenir sur le design, voir où ils sont. Donc voici tous à 40 ans, je vais sauter ici. Des points de mosquée. Et nous allons cliquer ici. 40 comme ça. Et je vais faire la même chose en gros, pour tous les autres, dans nos ports. Donc ici, dans la mosquée, 40 ans. Merci. Donc peut-être que nous pouvons faire un clic droit et puis appuyer sur Copier sur celui-ci. clic droit sur cette apparence basée sur un coup. Et comme vous pouvez le voir, ça passe à 40 ici. Tu peux faire la même chose ici, non ? L' apparence basée sur le clic passe à 40. Donc, vous n'avez pas à taper à chaque fois. Donc simplement situé ici, droite, cliquez sur basé. Et sur ce 1er 1 clic droit basé. C' est pourquoi je dis que vous devez avoir les mêmes paramètres tout au long de votre conception. Donc, dans tous vos ports et vous avez remorqué, nommez vos couches correctement afin que tout fonctionne correctement. Sinon, ça ne marchera pas comme vous le devriez, comme vous le vouliez à moi. Alors vérifions vite. Juste ici. Ça a l'air sympa. Cliquez ici, Waits révèle. Cliquez ici. Et comme vous pouvez le voir maintenant, il semble correctement, il va sauter en arrière, ramener quelques points que de taper à nouveau. Comme vous pouvez le voir. Devenez vert et violez. Créer le succès du compte. C' est tout pour cette vidéo. J' espère que ça vous a plu et je vous verrai dans la prochaine. 38. Fichier Formes Xd: dans cette vidéo, je voulais vous montrer les formulaires X'd fichier. Et ce sont toutes les formes que nous avons créé dans cette section hors du parcours, Sirkin, sautant rapidement, inspecter certains éléments et mentionné plusieurs fois tout au long de cette section du cours. Et à l'intérieur de ces vidéos, vous pouvez vraiment les inspecter pour votre propre processus de création. Donc, par exemple, vous avez oublié la taille de la botanique. Tu peux sauter à l'intérieur. Vous voulez utiliser la même couleur, vous pouvez la copier si vous voulez utiliser la même taille avant ou le même téléphone. Vous pouvez le faire aussi. Pour cet exemple particulier, où nous utilisons l'image. Peut-être que vous ne vous souvenez pas comment certaines transitions fonctionnent. Vous pouvez rapidement cliquer sur prototype, et vous pouvez cliquer entre eux et vous voir, par exemple. Ok, allez-vous marcher ou animer ? Facile maintenant 0,6 seconde. Ainsi, lorsque vous obtenez un aperçu, vous pouvez voir à quoi cela ressemble pour que vous puissiez faire toutes ces choses à l'intérieur de ce fichier. Vous pouvez copier et coller ces formulaires dans vos propres designs, puis les utiliser pour vos clients personnels et commerciaux. Et enfin ce que je veux vous montrer, c'est ce panneau d'actifs. Donc, quand je clique ici, vous avez toutes les couleurs ici. Ainsi, vous pouvez faire un clic droit et copier cette couleur, par exemple, si vous voulez l'utiliser dans leur propre design et enfin, si vous voulez la changer quelque part ici. Ainsi, par exemple, nous avons ce bleu dans la majorité des designs que vous pouvez modifier avec le bouton droit de la souris et, par exemple, je veux utiliser cette couleur pourpre. Comme vous pouvez le voir, il va changer partout sur chaque instance où nous avons cette couleur bleue. Donc, c'est vraiment à vous de choisir ce que vous voulez faire avec ce fichier. Vous avez ma pleine permission d'utiliser l'un de ces formulaires dans tout autre élément de ce cours dans vos projets personnels et commerciaux. Et comme pour les liens, par exemple, pour l'image et l'avant, je vais laisser tous les liens dans la dernière leçon hors discours où je vais vous montrer le fichier vidéo que vous allez également recevoir un intérieur ce fichier pdf. Tous les liens seront situés Toe télécharger et utiliser toutes ces sources re qui sont gratuits pour un usage personnel et commercial. Alors je te vois dans la prochaine vidéo 39. Texte 1: dans cette vidéo, je vais vous montrer ce contre-effet avec le texte. Donc, lorsque vous cliquez sur courant ou après un certain temps, il va balancer tout le texte, puis atterrir sur un certain nombre. Alors commençons. Donc, je vais utiliser dans notre port de 800 par 800 sur quand utiliser le type dit. Cliquez quelque part dehors et on va utiliser le Cess ouvert à 90. Je vais taper zéro Centre de presse. 123456789 Donc si je clique quelque part à l'extérieur et zoom arrière, vous pouvez voir à quoi ça ressemble je vais double-cliquer, contrôler un contrôle, voir ? Ensuite, cliquez sur le texte, déplacez tout le chemin vers le bas appuyez sur, entrez basé, puis appuyez sur Venter et basé à nouveau. Donc si je zoome tout le chemin vers le bas, vous pouvez voir qu'on a entendu trois rangées de numéros allant de zéro ce soir. Donc c'est notre 1ère 1 Et je vais juste utiliser rapidement un outil rectangle. Quelqu' un comme ça, et je vais le positionner ici, donc pour être parfaitement au centre, et ensuite je vais positionner ça juste au-dessus de ce rectangle. Alors peut-être aller quelque part ici, puis je vais copier le texte pour qu'il contrôle D. Déplacer vers la droite. Disons que 20 pixels comme ça et qu'il avait contrôlé une fois de plus et déplacé ce 20 pixel vers la droite aussi. Ensuite, je vais regrouper le texte pour qu'il contrôle G, le déplace au centre comme je peux le regrouper, puis utilise ce rectangle et réduit l'esprit de celui-ci à quelque chose comme ici. Je vais appeler cette mosquée, et ensuite je vais commander le texte. Donc, c'est 1/3 1 de gauche à droite. C' est le 1er 1 C'est le milieu. Ensuite, je vais les sélectionner tous en utilisant ma touche Maj, non ? Cliquer et mosquée avec la forme. Je vais appeler ce comptoir de la mosquée et ça va être notre premier état. Ensuite, je vais frapper le contrôle de pour dupliquer ce notre port. Je vais sauter à l'intérieur du texte et je vais maintenir le décalage et déplacer ce premier texte vers ce numéro sept. Quelque chose comme ça. Assurez-vous d'essayer de remorquer tous ces numéros vers le haut, donc quelque chose comme ça, alors je vais utiliser le 2ème 1 Et maintenant je ne vais pas utiliser dans le premier numéro sept. Donc pas celui-ci, mais plutôt le deuxième numéro sept. Alors continuez à faire défiler jusqu'à ce que vous atteigniez le numéro 7 et essayez de l'aligner avec ce 1er 1 comme ça et enfin, nous allons faire la même chose pour ce mignon. Mais nous allons utiliser le troisième numéro sept, alors allez au troisième numéro sept. Donc le dernier dans ce compteur et le voici, donc vous n'avez pas besoin d'utiliser les mêmes nombres. Vous pouvez utiliser des nombres aléatoires. Donc, nous allons utiliser, par exemple, 78 nuit. Donc fondamentalement, il vous a vraiment aidé quels numéros vous choisissez et assurez-vous que vous voyez s'ils sont tous alignés, ils sont peut-être juste ce numéro neuf juste ligoté huit. Juste un Ted maintenant. Donc quelque chose comme ça, je pense, fonctionne bien. Oui, ce processus est un truc. Vous pouvez utiliser des guides, mais j'essaie de vous montrer ça dans un autre petit temps estar. C' est possible. Non. Prototype de prototype de chaleur. Je vais utiliser l'étape, peu importe ce que vous pouvez utiliser le temps. Donc, après un certain temps, cela va arriver. Donc, utilisons le délai de temps. Je vais juste utiliser une seconde. Également animé. Sélectionné Facile maintenant dans la durée est à trois secondes. Alors voyons à quoi ça ressemble. Donc, après une seconde va commencer et atteindre 789 maintenant, vous pouvez aussi revenir en arrière si vous le voulez, et cela va compter jusqu'à zéro. Vous pouvez avoir autant de numéros que vous le souhaitez. Assurez-vous simplement de les parcourir ou si vous voulez faire du cycle un par un, alors vous pouvez les avoir. Par exemple, nous voulons un 789 Vous n'avez pas à parcourir trois lignes de texte comme nous l'avons fait dans cette vidéo . Vous pouvez le faire avec un seul, mais vous n'obtiendrez pas un effet différent. Donc, c'est fondamentalement la base pour vous et vos projets. Alors construisez à partir d'ici. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 40. Texte 2: dans cette vidéo, je vais vous montrer comment nous pouvons créer cet effet de texte que vous voyez habituellement dans les en-têtes, par exemple, ou dans des sites Web ou dans certaines zones hors du site, où vous voulez attirer l'attention. Donc, quand je clique sur, il va zoomer un peu plus près de l'image et mettre l'accent sur l' image en phase de mise au point. Donc c'est ce cerf dans ce cas, donc si je le remets une fois de plus, appuyez dessus. Vous pouvez voir à quoi ça ressemble, alors commençons. Donc voici l'aéroport à 800 par 800 quand utiliser le titre, cliquez sur Bean Nature, sélectionnez tout et choisissez sens ouvert ici et pour la taille. Choisissons quelque chose de vraiment grand, par exemple, sur 50 et positionné au centre. Assurez-vous qu'il est au milieu comme ça, et au lieu de normal, vous pouvez utiliser un boulon supplémentaire afin que nous obtenions cet effet de texte vraiment gras. Ensuite, vous devez faire un clic droit sur elle goto partie, puis convertir partie orteil parce que j'aime un magasin de photos où vous pouvez simplement mosquer cet intérieur de votre panneau de couches. Vous ne pouvez pas le faire dans Adobe X'd jusqu'à présent, du moins pas à la réalisation de cette vidéo. Donc c'est positionner au centre. Non, et peut-être que dans la prochaine mise à jour ils vont être à la pointe. Ajoutez cette option. Mais comme je l'ai dit, pour l'instant, vous ne pouvez pas le faire. Donc j'ai dû le convertir en pot. Appelons ce texte de pièces comme Alors je vais rapidement dragon une image de mon ordinateur. Je vais la placer dans la meute, et je vais appeler cette image ainsi et je vais zoomer,par exemple, par exemple, quelque chose comme ici. Et nous allons rapidement le jour de la mosquée pour que vous puissiez les sélectionner tous les deux. Tout à fait cliquez sur la mosquée avec la forme ou votre quart de travail. Contrôlez em ou le commandant de décalage sur le Mac, et vous pouvez voir maintenant ils sont masqués. Maintenant, faisons un duplicate pour qu'il contrôle le et sur celui-ci, utilisons notre touche maj et flèche gauche. N' amenez pas la taille et vers le bas beaucoup quelque chose comme ça et vous condensez ou les désobéis mieux. Donc, par exemple, quelque part comme ça, sorte que nous devions voir la tête du cerf comme ça, et sur ce 1er 1 nous allons aller vraiment, vraiment grand, donc vous pouvez cliquer sur l'image touche, contrôle de décalage et gauche, cliquez et agrandissez-le autant que vous le souhaitez. Donc, par exemple, quelque chose de ridicule comme ça, et enfin, temps fonctionne très bien avec ce déclencheur. Mais je vous ai montré comment cela fonctionne avec l'étape afin que vous puissiez cliquer sur cela, notre port glisser une poignée. Et au lieu du temps d'utilisation maximum, nous allons avoir un délai de transition de 0,8 seconde ou d'animer, d' assouplir et de durée. Vous pouvez le mettre en place à trois secondes pour qu'il puisse jouer. Il va orteil attendre un peu et puis va zoomer un peu plus près orteil la point principale de cette vidéo. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 41. Texte 3: dans cette vidéo, je vais vous montrer comment il peut créer ce texte de chargement de fait. Donc, quand je clique dessus, il va commencer à charger le poids et ensuite révéler le texte entièrement. Alors tu te bats encore s'il te plaît. Vous pouvez voir qu'il démarre, s'arrête, puis révèle entièrement le texte. Alors commençons. Donc, comme d'habitude, nous commençons avec le pas port hors 800 par 800. Je vais cliquer sur le textile. Et donc j'ai été en train de charger comme si je vais faire ça un sens ouvert. Et pour dis ice, choisissons quelque chose de grand comme 1 20 Et au lieu de régulier, choisissons un boulon supplémentaire comme ça, assurez-vous qu'il est aligné au centre et assurez-vous que vous le positionnez au centre comme So Now pour la couleur, nous allons utiliser ces couleurs bleues ou trois E C. Six ff. Et enfin, allons utiliser un crayon parce que nous allons juste dessiner une belle forme simple. Alors commençons par la ligne de fond comme ça. Maintenez le décalage et peut-être peut créer une voiture comme ça. Donc il suffit de cliquer et de maintenir et ensuite libéré quelque part comme ici, et alors peut-être que nous pouvons créer se produire comme ça et vous pouvez obtenir technique avec cela. Vous pouvez entrer dans de nombreux détails et créer autant ou moins de courbes que vous le souhaitez, juste pour que vous puissiez obtenir l'effet que vous voulez réellement. Donc, par exemple, ici maintenant que nous avons créé ces pièces, ce qui s'appelle ça, par exemple, forme comme ça Et nous allons mosquée, tous les deux pour obtenir notre Sercan, sélectionnez le clic droit et la mosquée avec la forme, et ce que je vais faire est de cliquer sur la forme et simplement abaisser comme ça et nous allons appeler cette mosquée. Donc c'est notre premier état. Appuyez sur control DE pour créer notre deuxième état afin que vous puissiez le sélectionner et nous allons déplacer un peu cette forme. Donc, peut maintenir le décalage et le déplacer quelque part comme ici. Et vous pouvez cliquer dehors et voir. Appelez votre forme ressemble. Donc, si vous voulez apporter des modifications supplémentaires, vous pouvez et enfin créer notre troisième état. Et dans cet état, nous allons révéler notre texte. Mais pas seulement ça. Nous allons changer un peu cette forme, donc je vais double-cliquer. Donc je peux sauter à l'intérieur et faire glisser certains de ces points autour. Donc, par exemple, celui-ci et moi pouvons faire glisser. C' est à quelque part comme ici. Je peux faire glisser celui-ci aussi bien dehors. Donc peut-être quelque part comme ça, faites glisser ce 12 ici et assurez-vous que tous les autres suivent . Donc quelque chose comme ça est bon. Donc, tout est essentiellement révélé et vous pouvez voir le texte entier. Donc, non, créons un prototype. Vous pouvez cliquer et choisir tapoter ou orteil toute rencontre, assouplissement et durée ALS. Donnez une seconde pour la 2e 1 Utilisons le temps. Donc délai. Nous pouvons utiliser une seconde ou pour animer une note facile et une seconde pour la durée. Et nous allons prévisualiser ce que nous avons créé. Donc, quand je clique ici, vous pouvez voir qu'il commence et puis révèle le texte entier. Donc, comme je l'ai dit dans ce deuxième état, si je saute à l'intérieur une fois de plus, c'est vraiment à vous de décider comment créer l'endroit et vous pouvez l'éditer à volonté. Vous pouvez même le faire directement. Ainsi, par exemple, si nous choisissons le rectangle, vous pouvez créer un rectangle comme celui-ci, puis le révéler en haut et révéler le texte entier si vous le souhaitez. Mais je pense que c'est beaucoup plus intéressant quand vous utilisez mental dans la création de ces formes, et je pense que cela lui donne beaucoup plus de valeur. Par exemple, vous pouvez même utiliser des logos et combiner des logos clients dans cette animation de chargement. Ainsi, par exemple, quand il termine le chargement ou fait comme ici, vous pouvez apporter le logo à l'arrière. Vous pouvez révéler le logo avec le texte de chargement. Ainsi, par exemple, logo peut être juste ici sur le dessus, et c'est vraiment à vous de décider comment vous pouvez y parvenir. Mais il est important que vous ayez inclus à l'intérieur de cette mosquée. Donc, par exemple, si vous voulez inclure le logo, vous pouvez peut-être le mettre juste ici juste en dessous de cette forme ou sur le dessus. C' est vraiment important, et quand vous révélerez tout, logo viendra juste ici en haut. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 42. Texte 4: dans cette vidéo, je vais vous montrer ce texte de morphing, qui va d'une image à l'image d'arrière-plan et se transforme en place. Et si vous le voyez encore une fois, vous pouvez voir à quoi cela ressemble, et vous pouvez les utiliser pour les en-têtes. Lorsque votre site Web ou mobile tours, vous pouvez les utiliser pour attirer l'attention orteil une partie de la conception qui nécessite plus d'attention que les autres et ainsi de suite. Alors commençons. Donc ont un aéroport de 800 par 800 est allé à utiliser le type textile dans les montagnes et les consentements utiles . Peut-être 20 comme ça, peut-être même 100 quand il est trop. Et nous pouvons utiliser quelque chose comme un boulon supplémentaire aller du centre, placer au centre. Je peux faire un clic droit dessus, pensée se convertit en partie, puis simplement le positionner comme pour que vous puissiez choisir du texte comme ça. Et enfin, j'ai besoin d'une image de glisser-déposer dans l'image. Cette image provient de Splash dot com, et je vais la positionner et la réduire à quelque part ici. Je vais appeler cette image BG parce que ce sera notre image de fond. Je vais le dupliquer pour avoir frappé Control D. Et c'est juste notre image, que nous allons mosquer avec ce texte. Donc, comme les deux, cliquez droit sur la mosquée avec la forme. Et comme vous pouvez le voir, rien ne s'est vraiment passé ici. Mais maintenant vient la partie amusante. Donc, c'est notre premier contrôle d'état D. Ce sera notre deuxième état, donc vous pouvez le faire de bien des façons. Vous pouvez le supposer. Zoom dessus. Vous pouvez, par exemple, faire comme ça ou simplement le déplacer orteil sur la zone de plus léger. Concentrez-vous sur. Peut-être que comme ça, vous pourriez voir à quoi ça ressemble, et c'est fondamentalement tout pour la partie design. Allons le prototyper. Alors cliquez sur son 1er 1 Vous pouvez choisir le délai d'une seconde. La transition est l'animation automatique. Facilité à partir d'ici et enfin la durée littéralement trois secondes. Par exemple, cliquez sur le 2e 1 traîné en arrière. Il va contenir les mêmes effets, donc quand vous cliquez ici, il va poids des orteils, puis vous montrer ce texte et révéler fondamentalement, puis sauté en place. Vous pouvez le rendre plus grand ou plus petit, venir de l'intérieur ou de l'extérieur de la matière Foreurs, et vous pouvez même utiliser la ville apace. Donc, sur ce 1er 1 jusqu'à une ville hors, le texte peut être zéro, et sur le 2ème 1 il peut être 100 donc il peut vraiment ajouter à l'effet, et vous pouvez l'utiliser. Comme je l'ai dit dans vos en-têtes ou dans les zones du site Web ou de l'application mobile, vous voulez attirer plus d'attention dans. Ainsi, par exemple, vous pouvez écrire dans le nom du produit et vous pouvez placer le produit lui-même à l'intérieur de ce texte puis révéler le produit comme, exemple, par exemple, l'utilisateur fait défiler ou quand il clique quelque part, et l'état suivant de cette clique devrait être le produit révélé. Ensuite, vous pouvez révéler le produit de cette façon et le rendre un peu plus intéressant. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 43. Texte 5: dans cette vidéo, je vais vous montrer cet effet de texte déformé. Vous pouvez l'utiliser lors du chargement ou lors de la transition, ou lorsque vous voulez simplement attirer un peu plus d'attention sur notre zone ou une section de votre site Web ou d'une application. Alors commençons. Donc Havenaar planche hors 800 par 800 va utiliser mon textile dans le jeu de frappe ouvert dit 100 extra gras. Et je vais utiliser la frontière sans aucun film. Donc, si vous vous sentez sélectionné comme d'habitude, décochez-le simplement ici. Ensuite, je vais faire un clic droit dessus, une partie à une partie, et je vais le placer ici et ici. Donc, pour être parfaitement au centre suivant, nous allons créer un duplicata pour qu'il contrôle D pour en faire une copie. Et sur celui-ci, vous allez double-cliquer à l'intérieur et jouer simplement avec ces points afin que vous puissiez les positionner partout dans le prochain chef adulte comme il se convertira de points droits en point de sol afin que vous puissiez vraiment jouer autour avec elle, et vous pouvez l'étendre ou l'effondrer orteil comme vous le souhaitez. Il suffit de ne pas ajouter plus de points car cela va gâcher toute la fonction d'animation automatique. Et, par exemple, vous pouvez créer quelque chose comme ça, alors triez l'effet ondulé. faut donc renoncer à toutes les lettres. Donc peut-être quelque chose comme ça, par exemple, et c'est vraiment à vous de décider. Combien de ceux-là vous voulez en créer, et quel effet essayez-vous d'obtenir ? Alors peut-être comme ça ? Peut-être que c'est assez bon ? Oui, et gardons ça comme ça. Mais peut-être faire la même chose ici et enfin sur ce sujet. Pourquoi le caractère ? Faisons cela et peut-être faire la même chose pour ces deux, mais étendons-les dans l'autre sens. Donc, je vais cliquer dessus et peut-être créer quelque chose comme ça, donc vraiment un effet ondulé, gentil. Donc, comme vous pouvez le voir, ça a vraiment l'air différent de celui-ci. Et quand vient le temps de prototype, il suffit de sélectionner l'ensemble de notre port de temps de consommation de drogue retard de zéro ou à n'importe quelle viande est dans notre durée d'une seconde et simplement ramener une fois de plus. Donc, quand je clique sur plaidoyer, vous pouvez voir qu'il se transforme en districts que nous venons de créer, et vous pouvez utiliser ceci comme je l'ai dit, pendant le chargement. Ou si vous voulez attirer l'attention sur une certaine partie de votre site Web ou dans le haut, vous pouvez incorporer cet effet. Vous pouvez également le faire avec le logo de vos clients, sorte que vous pouvez, vous stat pour le chargement, et vous pouvez l'utiliser de plusieurs façons fondamentalement. Vous pouvez placer une mosquée sur le dessus et plus de cela dans une image, donc c'est vraiment à vous de décider dans votre imagination. Donc c'est tout pour cette vidéo. Je te verrai dans la prochaine. 44. Texte 6: dans cette vidéo, je vais vous montrer ces effets de texte. Donc, lorsque vous cliquez quelque part va taper un mot début. Alors commençons. Donc, comme d'habitude, avait l'aéroport à 800 par 800 nous allons commencer à taper sont des lettres. Donc, je vais taper s en utilisant Oh, traiter 100 boulon supplémentaire avec la position dans le centre, comme si contrôlé profond et je vais parler chose t comme alors assurez-vous que leur bateau aligné comme ainsi, puis appuyez sur Maj et la touche flèche droite afin que vous pouvez le déplacer 10 pixels vers la gauche Contrôle. Faites-vous une fois de plus la même taper un. Donc faire le même espacement comme si contrôle Vous une fois de plus, puis créer un R comme ça Et puis enfin contrôler de Pour créer un T comme ceci, vous pouvez les sélectionner tous. Mais ce que j'aime faire est de commander là-bas parce que c'est plus facile pour moi et ensuite de savoir lequel est lequel. Donc, comme ça, vous pouvez les regrouper en position au centre comme ça, et ce que vous pouvez faire est de créer une belle grande mosquée comme Donc positionner cette mosquée dans le centre comme ça. J' ai été mosquée et vous pouvez sélectionner tout ce que la mosquée a la forme. Et maintenant tous vos personnages sont une mosquée comme ça. Donc ce dont nous avons besoin, nous avons besoin d'un état vide et nous avons besoin d'un état final. Donc, nous allons dupliquer ce sont des planches quelques fois. Donc ça va être notre état vide. Oui, t a sont t et ça va être notre état final. Donc, ce que nous allons faire, gros, c'est que nous allons sauter ici à l'intérieur de cette mosquée et sur tous les bas pour simplement maintenir le décalage dans votre flèche inférieure. Ensuite, vous pouvez sauter à l'intérieur et laisser justice à l'intérieur et appuyer sur la flèche du bas plusieurs fois jusqu'à ce qu'on bouge tout dehors vers le bas. C' est pour rt, donc S et T vont rester à l'intérieur. Vous pouvez déplacer tout le reste ici. On aura un nom. Donc ne vont pas orteils être en bas comme si Et ici nous allons garder notre mais juste enlevé t Et enfin, pour ce dernier, nous allons garder tout comme alors commençons le prototypage. Donc, sur celui-ci, nous allons utiliser l'étape ou pour animer snap 0.4 secondes. Et pour le reste d'entre eux, nous allons utiliser le temps ou animer Snap 0.4 seconde. Maintenant, nous voulons utiliser le snap parce que nous voulons qu'il s'enclenche en position. Et si je clique sur son 1er 1 clic jouer, je vais taper. Et comme vous pouvez le voir, ils se mettent en position comme ça donc c'est tout pour cette vidéo, et je te verrai dans la prochaine. 45. Texte 7: dans cette vidéo, nous allons créer ces effets de texte de chargement. Donc, si un clic juste ici, il va se charger puis revenir vers le bas. Si je clique à nouveau, vous pouvez voir à quoi il ressemble. Donc, il anime essentiellement le contour du texte, puis descend en blanc orteil. Alors commençons. Donc, comme d'habitude, l'aéroport 8 800 par 800 va utiliser le titre que j'ai chargé utiliser le sens ouvert, et peut-être que nous pouvons utiliser 100 sika Cela ressemble à, Ouais, Ouais, je pense que ça a l'air bien, mais les Juifs extra gras. Ou peut-être qu'on peut même choisir quelque chose de léger. Ou alors, par exemple, qui montre Bolt et nous allons choisir la bordure à l'intérieur à la place hors du champ comme si nous allons faire un clic droit sur elle partie convertit en pot afin que nous puissions l'animer. Positionnez-le au centre de notre conseil, comme si et ce que nous voulons aussi, c'est que je vais juste revenir quelques fois parce que je veux faire un duplicate er er il. Donc, je vais obtenir le contrôle D alors sélectionnez le contrôle D pour faire un duplicata et maintenant je vais cacher celui-ci et transformé celui-ci en parties. Alors convertissez les pots. Maintenant, je vais les sélectionner tous les deux et les positionner au centre comme masquer le texte original. Quant au rôle, je vais faire un autre flic. Tu es ça. Sélectionnez les deux, et je vais utiliser la bordure de trois e c six f f comme ça et je veux augmenter cette frontière à peut-être cinq. Ouais, je pense que ça a l'air bien. Et je vais faire un clic droit dessus. Mosquée avec forme. Donc maintenant ce que vous allez faire est que nous allons simplement déplacer ce haut vers le bas comme si inclure le chargement et pour le chargement, nous allons les orteils inclure sentir la couleur blanc cassé comme si Et nous allons juste orteil peut être légèrement déplacé . 1234 pixels vers la gauche ou quelque chose comme ça. Enfin, nous allons faire le contrôle de l'aéroport, sélectionner tout, et maintenant nous allons à la pointe. Remettez cela en position comme ça. Et comme vous pouvez le voir, il montre déjà l'effet et vous pouvez cliquer sur le chargement et peut-être le positionner un peu différemment. Donc peut-être quelque chose comme ça pour que vous puissiez le déplacer avec vos flèches de haut en bas et voir. Trouvez l'effet que vous aimez. Alors peut-être peut-être ici, oui, peut-être que c'est bon, et vous pouvez aussi faire est de placer un texte régulier sur le dessus, ou vous pouvez même aller plus grand que ça. Vous pouvez partout sur la taille ou augmenter la taille. C' est vraiment à toi de décider. Et maintenant, enfin, avec le chargement cliqué, je vais frapper le contrôle C parce que nous avons déplacé cela et je vais cliquer sur celui-ci supprimé frappé Contrôle V afin que nous ayons exactement le même texte dans nos deux ports. Alors maintenant, appuyez sur le prototype et vous pouvez faire le temps. Ou tu peux faire Tep. Utilisons un délai de temps d'une seconde ou deux animés. Facilité de sortir d'ici et de la durée. Donnons-le une seconde et enfin, ramenons-le au 1er 1 pour qu'il me semble quand je pourrais jouer. Vous pouvez voir à quoi ça ressemble, et il redevient blanc orteil. Il remonte au chargement et redescend, donc c'est à quel point il est facile de créer. Et c'est tout pour cette vidéo, et je te verrai dans la prochaine 46. Texte 8: dans cette vidéo, je vais vous montrer cet effet de frappe. Donc n'importe quel clic, vous verrez cette malédiction ou clignotant, et puis il va commencer à taper lettre par lettre et et poissons. Ça revient à zéro, et ça va s'estomper. Alors commençons. Donc, une fois de plus, j'ai sur notre port, mis en place à 800 par 800 quand utiliser le titre Bean. Je pense que oui. Je vais utiliser le sens ouvert, et je vais utiliser quelque chose comme 100. Je pense que ça a l'air bon et s'affaiblit. Ne pas utiliser, peut-être même boulon, comme si position au centre, et je vais créer un rectangle qui va servir de mosquée. Sloan juste vite la mosquée comme ça, et enfin, et enfin, je vais créer un rectangle de plus. Donc peut-être quelque chose comme ça, avec la position au milieu, utilisé exactement la même couleur de remplissage, et ça va être notre clignotant comme ça, alors assurez-vous qu'il est au centre. Assurez-vous qu'il est placé quelque part à l'extérieur. Ainsi, par exemple, peut-être juste ici et enfin ramener la mosquée, sélectionner la mosquée et taper et créer la mosquée avec la forme à l'aide de contrôle de décalage M de l'ordre. Commandez-leur si vous êtes sur un Mac, ça va être notre mosquée. Enfin sauter à l'intérieur et ramener la mosquée à gauche afin que vous puissiez cacher tous les personnages. Comme ça. Et dans ce 1er 1, nous allons simplement cliquer sur la touche zéro double de type R clignotant. Ou vous pouvez abaisser votre ville salariale ici à zéro. Ensuite, nous allons cliquer sur le contrôle D pour dupliquer l'aéroport. Sélectionnez tout ici. Utilisez le clignotant. Augmentation de ton pâteux. Le contrôle 100 d Vendre le clignotant à nouveau. Baissez votre rythme, équipe Jodi, sélectionnez à nouveau le clignotant d'ici. Augmentez votre pâteux. Et dans le prochain, nous allons commencer à révéler notre texte. Alors allons utiliser notre mosquée, révéler Artie juste pour entendre, puis simplement déplacer le clignotant ici. Ensuite, nous pouvons dupliquer celui-ci et faire de même pour que nous puissions commencer à enrouler. Sont des lettres comme si contrôle De et nous pouvons révéler celui-ci aussi. Donc, parlez le contrôle. De comme vous pouvez le voir, ce processus peut être un peu fastidieux, surtout si votre parole est un peu plus longue Mais si l'effet est satisfaisant, surtout vos clients, alors il vaut la peine de poursuivre. Surtout si vous donnez cela aux développeurs un peu plus tard afin qu'ils puissent savoir quel effet ils peuvent obtenir dans le froid un peu plus tard et ce que vous aviez sur votre esprit pour le processus de conception . Donc, enfin, une fois qu'il est terminé, nous pouvons en faire une de plus. Donc comme le clignotant et abaissez le pâté A vers le bas à zéro. Maintenant, commençons le prototypage. Vous pouvez cliquer sur prototype sauter ici, et nous pouvons utiliser des étapes pour lancer l'animation que nous pouvons utiliser. Animation automatique, facile maintenant et zéro point. C' est un six secondes est ici maintenant pour celui-ci, nous allons utiliser fondamentalement les mêmes paramètres, mais attendez le temps afin de temps, ou pour animer Easy. Maintenant 0.6 faire la même chose pour celui-ci, mais pour celui-ci, nous allons utiliser snap au lieu de is in out. Donc on utilise le temps. Un délai d'un cm, zéro seconde animent également snap et 0,6 seconde. Donc nous allons utiliser Snap pour tous. Alors faisons-les avancer. Et enfin, pour ce dernier au lieu de snaps, nous allons utiliser is in out maintenant nous allons voir à quoi cela ressemble. Je vais cliquer sur son 1er 1 clic Play. Step Somewhere va cligner deux fois, et il va commencer à taper et révéler nos lettres et enfin disparaître. Vous pouvez également inclure un retard sur ce dernier afin que vous puissiez inclure votre retard, peut-être une seconde. Ou peut-être que c'est trop à 0,8. Une fois de plus, quand je clique ici, ça va cligner deux fois 12 Puis il va commencer à taper toutes les lettres et va attendre ici et puis s'estomper. Donc, c'est un bon effet d'avoir, surtout si vous avez quelque chose, par exemple, dans votre en-tête. Donc, vous voulez attirer un peu plus d'attention pour réduire le taux de rebond, et vous voulez garder ces visiteurs un peu plus longtemps sur votre page Web pour leur montrer un peu plus d' informations supplémentaires. Vous pouvez également faire mosquée à l'intérieur de la mosquée, donc lorsque vous tapez dans ce texte, vous tolérez, révéler l'image en arrière-plan et vraiment les possibilités sont infinies, et surtout après que le processus de conception a terminé, les développeurs peuvent alors facilement intégrer cela dans la conception dans la citation finale. Désolé, parce qu'ils savent ce que vous vouliez d'abord. Et cela réduit la friction entre le concepteur, vous et le développeur qui doit appeler à ce design. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 47. Fichier Texte Xd: dans cette vidéo. Je voulais vous montrer ce texte Les œufs soulent la même chose. Comme dans les sections précédentes du parcours. Vous avez ce fichier x'd pour cette section particulière hors du parcours, et vous pouvez rapidement entrer et voir les animations. Et vous pouvez également sauter et voir, par exemple. Ok, j'ai les trois couches de texte à l'intérieur pour savoir quoi faire. Vous pouvez également sauter dans, sélectionner quelques couleurs. Vous pouvez, par exemple, parce que nous avons l'image, vous pouvez double-cliquer sur l'image et voir, Mais je l'ai placé afin que vous puissiez savoir où vous pouvez le placer aussi bien. Vous pouvez vérifier les villes d'obéissance de certaines couches, par exemple. Ok, celui-ci est un 100 mais ce 10 Et enfin, vous pouvez également jouer ces animations de sorte que vous pouvez simplement cliquer sur le premier sont partie de l' animation que vous voulez choisir Hit Desktop aperçu. Ça va se lancer, que vous sachiez. C' est ce que j'ai vu dans cette vidéo. Et vous pouvez ensuite sauter à l'intérieur et ensuite examiner plus avant et voir par vous-même. Combien de couches avez-vous besoin de ces couches ? Quelles sont les couleurs du calque. Ainsi, par exemple, si un clic sur l'orteil spot, vous pouvez voir qu'il a une bordure de cinq, et il a la couleur bleu off afin que vous puissiez simplement copier et coller cela dans votre propre conception si vous le souhaitez. Et comme avec les sections précédentes, vous pouvez l'utiliser dans votre travail personnel ou commercial. Donc pour vous-même ou vos clients, et vous pouvez l'incorporer comme vous le voulez, vous avez ma pleine permission. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 48. Slider d'image 1: dans cette vidéo, nous allons créer le curseur de l'école, qui va basculer entre les cartes. Donc, en un clic et glisser sur celui-ci, vous pouvez voir que le milieu devient un peu plus petit, et que le 3ème 1 disparaît complètement. Et quand je ramène, ça va revenir à sa position d'origine, et celui-ci va revenir là où il était, et celui-ci va apparaître une fois de plus. Alors commençons. Donc ce que j'ai ici, c'est cette carte, et si je l'ouvre un peu et zoome un peu plus près, vous pouvez voir que j'ai ce texte juste ici en bas et l'image est juste ici en haut. Maintenant, si nous regardons ici un peu plus près, vous pouvez voir que l'image a un rayon d'angle de 24 coins gauche et droit. Ce sont les coins en question, et pour les coins inférieurs gauche et droit, vous pouvez voir que le rayon de coin est zéro. Alors que pour le texte qui est ci-dessous, nous avons le texte. BG, qui est juste une couche plane blanche et une couche de forme, et il a le contraire. Donc, il a le rayon en bas à droite et à gauche sur 20 de sorte que nous avons dans toute cette sélection ressemblant à ceci. Ensuite, nous avons la nature Norvège, qui est la science ouverte audacieuse et 17. Et nous avons appris plus, ce qui est la science ouverte régulière à 17 ans. Et il a cette couleur bleue off trois e. C. Six ff. Maintenant pourquoi j'ai placé le texte sur le dessus de l'image est parce que si je clique loin, vous pouvez voir qu'il a cette légère ombre portée. Et si je les ai placés différemment, vous pouvez voir que maintenant l'image vient au-dessus de ce fond blanc, et son ombre vient au-dessus de ce fond de texte. C' est pourquoi je l'ai placé sur le dessus pour que nous ayons essentiellement deux ombres agissant comme une seule. Et quant à l'Ombre est juste une ombre de base. Je l'ai montré déjà dans peu de vidéos dans le discours, Donc nous avons l'ombre ici off 03 et six, et si je clique sur la couleur de l'ombre, vous pouvez voir qu'il est complètement noir à 16%. Donc, chaque fois que vous appuyez sur l'ombre pour qu'elle apparaisse. Vous obtiendrez cette ombre par défaut hors cours, vous pouvez jouer avec elle. Par exemple, vous pouvez inclure le shell bleu si vous le souhaitez, ou si votre client a une autre couleur, vous pouvez le faire également. Sûr. Un clic ici en tapant trois e c six f après un centre. Vous pouvez voir que maintenant nous avons ces ombres bleues correspondant à ce texte bleu, mais je ne vais pas le faire. Et ne nous enlisons pas avec certains de ces détails. Dupliquons ce chariot. Je vais frapper le contrôle D et je vais le placer ici. Appuyez sur Shift et a laissé un rocailleux deux fois pour que je puisse le positionner 20 pixels de celui-ci. Je vais laisser la taille réactive comme vous pouvez le voir ici, et je vais tenir le décalage dans l'un des coins et je vais simplement baisser la taille de celui-ci. Par exemple, ici, je vais cliquer ici pour le positionner au milieu. Assurez-vous juste que c'est 20 pixels de celui-ci. Vous voulez aussi vous assurer que celui-ci est au milieu, et ça va être notre carte, et nous allons frapper les orteils dessus pour qu'il contrôle D pour faire un duplicata va positionner celui-ci tout le chemin vers le bas. Assurez-vous qu'il a la même distance entre lui-même et celui-ci du milieu, et je vais l'appeler carte trois comme si ensuite, je vais faire glisser une image à l'intérieur afin que vous puissiez sélectionner le calque d'image. Je vais localiser l'image. Faites simplement glisser et déposez-le à l'intérieur. Il va remplir à la place de cette image façon de double-cliquer à l'intérieur et simplement le déplacer quelque part ici. Je vais changer le texte pour qu'il corresponde à l'image. Alors appelons ça un jour à Paris, par exemple, comme ça. Et enfin, nous allons le faire pour les premières images Eh bien, de sorte que vous pouvez appuyer sur le contrôle et cliquer pour sauter à droite à l'intérieur. Je vais localiser cette image, et ces images proviennent de Splash dot com, donc elles sont libres d'utiliser à la fois pour des projets personnels et commerciaux. Donc ça a l'air bien et on peut dire quelque chose comme l'histoire romaine ancienne. Par exemple, comme ainsi et enfin nous avons été conçus terminés. Maintenant, ce que nous devons faire, c'est les regrouper tous. Donc je vais les sélectionner tous. Il contrôlerait G pour les regrouper et les appeler, parce que cette carte TERT dans le prochain état va disparaître de l'aéroport. Et quand c'est le cas, ça va dans cet espace vide. Donc là où il n'y a pas nos planches et nous ne pouvons pas animer comme ça. C' est pourquoi nous avons créé ce groupe afin que nous puissions tous les animer dans tous nos ports. Je vais d'abord sélectionner ce pied. Notre détonateur de contrôle des coups de port dupliqué. Ensuite, je vais sélectionner la carte 1. Je vais orteil appuyer ma touche de changement de vitesse et avec ma gauche, la plupart des clics. Je vais juste m'assurer qu'il est de la même taille que ce milieu de et je vais tenir ma touche gauche et le positionner Toby au milieu. Ensuite, je vais orteil au-dessus de la taille de ce 2ème 1 jusqu'à ce qu'il rencontre le bord supérieur de cette carte de départ , et vous pouvez le déplacer pour que vous puissiez le voir. Donc, je vais tout changer, comme ça et enfin le déplacer vers le bas aussi bien. Je vais le placer à sa place comme ça. Et enfin, je vais déplacer cette carte numéro trois. Et, comme vous pouvez le voir, si nous ne l'avons pas fait parce que je vais orteil, mettez 20 picks. Aussi déplacer 12 Il disparaît de ce notre port et va dans cette zone grise écran, qui est appelé Spaceport. Mais parce qu'il est dans le groupe qu'il contenait encore dans ce notre port. Donc, ce n'est pas en dehors de lui, et nous pouvons toujours tout animer correctement. Donc, quand il s'agit d'animation, cliquez sur prototype, vous pouvez cliquer à droite à l'intérieur, donc double-cliquez sur votre souris gauche. Continuez à sélectionner cette carte. Je vais le traîner jusqu'ici. Nous allons utiliser glisser, donc pas taper, mais glisser parce que nous voulons faire glisser entre ces deux curseur d'animation automatique est cette nation. Et pour l'assouplissement, vous pouvez choisir facile maintenant de reconnaissance, laisser non. C' est vraiment à toi de décider. Et enfin, pour cela, nous pouvons aussi choisir ce même, et nous pouvons le faire glisser en arrière. Il va contenir tous les paramètres que nous avons choisis pour le 1er 1 et je vais cliquer sur l' aperçu, et quand vous le faites glisser, vous pouvez voir à quoi il ressemble. Mais comme vous pouvez le voir, ce panier de démarrage ne change pas l'opacité. Il reste à 100%. Tu peux le laisser comme ça si tu le veux. Mais ce que je vais faire, c'est que je vais sauter ici. Cliquez sur le désir situé un numéro de carte trois. Je vais baisser leur ville de paie 20 Donc, quand on le prévisualise maintenant, vous pouvez voir qu'une fois qu'il disparaît, il abaisse automatiquement l'opacité jusqu'à zéro. Donc, il disparaît fondamentalement de l'écran et quand et le ramener, vous pouvez voir qu'il commence à apparaître et remonte jusqu'à 100. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 49. Slider d'image 2: dans cette vidéo, nous allons créer le curseur. Ainsi, lorsque vous cliquez sur ces flèches en bas, les diapositives vont changer. Et sur ce dernier, cette flèche va descendre sur votre ITI de base. Et si je reviens au 1er 1, vous pouvez voir que maintenant cela est couché dans une base pour indiquer qu'il n'y a plus de slights sur la gauche et quand vous cliquez sur un orteil dérangé, celui-ci indique qu'il n'y a plus de légères sur la droite. Alors commençons. Donc, j'ai ici le port de notre 800 par 800 terminé, conçu pour économiser un peu de temps. Donc, ce que nous avons ici, c'est une image. Donc, si vous avez ouvert cela, vous pouvez voir que l'image est à 400 poids à 50 et nous avons un rayon de coin sur 20 sur tous les coins. Et enfin, nous avons cette ombre par défaut juste ici en bas. Ensuite, nous avons San Francisco d'en haut, qui est le sens ouvert 20 gras et ces trois e c six ff couleur. Et enfin, nous avons ce texte ici, qui est de nouveau ouvert depuis 20 ans. Mais à cette couleur grise par défaut. Et enfin, nous avons ces deux flèches juste ici en bas. Cette flèche droite est la couleur désactivée. B deux b deux b deux si vraiment léger. Super. Et cette gauche Tero est de la même couleur. Mais vous payez la ville est à 40% Maintenant. Nous avons créé ce design parce que nous avons besoin des trois diapositives. Si vous vous souvenez de certaines des vidéos précédentes, nous devons avoir un curseur complet au début afin que nous puissions savoir où nous pouvons positionner certains des éléments. Et aussi ceux que j'ai levé vont rester à l'extérieur de ce groupe que nous allons créer dans un instant parce que nous allons cliquer. Et cela va passer entre le curseur et ce curseur. Donc nous avons besoin de ces flèches, Toby en bas. Donc, par exemple, ils ne peuvent pas être ici parce qu'ils vont être couverts par le texte de ces slights. En outre, ces images proviennent du site appelé dette pour stock photo dot com, et vous pouvez aller à eux et télécharger leurs images gratuites. Ils sont libres d'utiliser à la fois pour un usage personnel et commercial et je vais laisser le lien dans un pdf dans la leçon finale hors discours afin que vous puissiez accéder à ce site facilement afin que vous puissiez simplement cliquer sur le lien et accéder à la collection de leurs images qui ils l'ont fait à l' époque. Ou vous pouvez utiliser essentiellement n'importe quelle image que vous voulez pour vos clients ou pour vous-même. Maintenant, commençons. Je vais créer une mosquée, donc je vais cliquer sur le rectangle et dessiner une belle grande mosquée sur l'image et sur le texte je peux abaisser leur accord de base juste pour que je puisse voir ce que c'est. Je vais le mettre au milieu comme moi, et je vais tout simplement apporter ça quelque part par ici et faire la même chose pour la bouteille comme, donc je vais l'appeler Mosquée comme ça, et je vais positionnez-le juste en dessous de nos flèches. Je vais sélectionner tout droit Cliquez sur la mosquée avec la forme. Je vais appeler cette mosquée, et comme vous pouvez le voir, vous ne pouvez pas voir ces deux curseurs parce qu'ils sont cachés à l'intérieur de cette mosquée. Mais on va s'en occuper dans une seconde. Alors maintenant je vais positionner les flèches gauche et droite vers le bas pour qu'il ait la mosquée sur le dessus et les flèches en bas. Maintenant, je vais cliquer sur cette flèche gauche, appuyez sur ma touche zéro sur le clavier pour revenir à 100 pour une ville, et ce sera essentiellement notre deuxième diapositive. Je vais cliquer sur le contrôle thermique de l'aéroport D une fois de plus, et si vous êtes confus à propos de tout cela, comme pour chaque section hors du cours, vous recevrez des curseurs. Les œufs se souillent, dans lequel vous pouvez accéder à tous ces éléments. Et vous pouvez ensuite inspecter plus avant tout ce que vous n'avez pas compris ou que vous avez manqué dans certaines de ces vidéos afin que si vous sautez quelque chose, vous manqueriez quelque chose ? Vous pouvez toujours revenir à ce fichier et voir, par exemple, quelles transitions ont utilisé quelles couleurs j'ai utilisé des fonds et quelqu'un pour que vous ayez cela à votre disposition à tout moment, et vous pouvez bien sûr utiliser cette pour les projets personnels et commerciaux. Maintenant, commençons avec celui-ci. Donc c'est notre troisième balle vont d'abord cliquer sur cette flèche droite frappé quatre sur mon clavier pour abaisser l'opacité jusqu'à 40 Je vais sauter à l'intérieur de la mosquée et sur celui-ci. Ce qu'on veut, c'est que je saute en arrière. Donc c'est le milieu. C' est le 1er 1 et ça va être notre 3ème 1 Alors commençons. En fait, dès le début du 1er, j'ai baissé la basse à 40 et nous allons déplacer cette mosquée au milieu. Mais je vais tenir ma touche Maj comme pour que vous puissiez également utiliser des guides. Mais c'est plus facile pour moi de cette façon. Je vais sélectionner le numéro deux ou le numéro trois et je vais les déplacer jusqu'à ce qu'ils rencontrent le bord droit de cette image. Comme ça. Ensuite, maintenez la touche Maj 12 avec ma touche fléchée droite pour déplacer 20 pixels vers la droite et une fois de plus parce qu'ils sont dans le groupe et à l'intérieur de la mosquée. Si un saut à l'intérieur, vous pouvez voir que tous sont contenus dans ce notre anniversaire ne vont pas au passeport parce qu'ils sont à l'intérieur de ce groupe de mosquée ? Non. Donc c'est notre première ligne. Et comme vous pouvez le voir, nous ne pouvons plus aller à gauche. Parce que c'est le premier curseur. C' est le deuxième curseur. Et enfin, c'est le troisième curseur. Alors déplacons l'image numéro trois à sa place. Je tiens juste des quarts de travail jusqu'à ce qu'il se rencontre, comme si, va sélectionner la touche fléchée gauche toujours maintenir jusqu'à ce que la viande juste ici. Leur décalage total 12 pour déplacer 20 pixels vers la gauche. Et fondamentalement, nous sommes restés avec ce curseur. Maintenant, nous allons tout prototyper. Donc, ce que je vais faire est de cliquer sur cette flèche juste ici. Alors pouvez-vous zoomer un peu plus près pour que vous puissiez le voir ? faire glisser jusqu'ici ? On va animer les pieds ou les orteils. Facile maintenant et 0.4 secondes, je pense fonctionne très bien. Maintenant, sur celui-ci, nous allons cliquer sur cette flèche gauche. Faites glisser le vers ici, utilisez le même effet, cliquez sur ce glissement aérodynamique droit pour entendre, utilisez le même effet, et enfin, dans un effet perturbé. Nous avons juste besoin d'animer cette flèche de turd parce que ça va aller par là, et ce bon ne fera rien de même comme ça. 1ère 1 ici. Donc, quand je clique ici frapper, jouer et cliquer sur ces flèches, vous pouvez voir qu'il transige bien à ici. Vous pouvez également ajouter quelques effets supplémentaires. Donc, si vous vous souvenez d'une des vidéos précédentes, vous pouvez réduire l'opacité de ces curseurs au fur et à mesure qu'ils s'en vont. Ainsi, par exemple, sur ce milieu, comme vous pouvez le voir ici, quand vous voulez aller à droite, il peut abaisser le rythme à mesure qu'il va à droite, et quand il saute en arrière , il peut le ramener à 100 %. Et il va charger les bases de ce tour un et ainsi de suite, sorte que vous pouvez vraiment jouer avec elle. Vous pouvez également créer des cartes, comme nous l'avons fait dans l'une des vidéos précédentes, afin que vous puissiez apporter toutes ces informations dans une seule carte, puis les faire glisser dans et hors. Fondamentalement, c'est vraiment à vous et à votre projet. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 50. Slider 3: dans cette vidéo, je vais vous montrer ce curseur. Donc, lorsque vous cliquez sur cette flèche, ces images vont changer. Ce texte va changer ainsi que la couleur d'arrière-plan. Donc, sur une falaise à nouveau, vous pouvez voir tout cela en action. Alors commençons. Donc, ce que j'ai ici est un aéroport de 1000 par 600 parce que je voulais créer dans notre port un peu plus large pour celui-ci. Et ici, nous avons cette prochaine mise en place. Donc, nous avons le dossier d'images, ère du dossier de texte, qui est cette flèche du bas, et nous avons B G, G deux et G trois, qui sont juste des couleurs de fond différentes pour différentes diapositives, parce que nous allons avoir trois diapositives maintenant. Commençons par le texte parce que c'est beaucoup plus simple. Donc, nous avons cette visite à Londres, qui est ouvert, dit 100 régulier, et nous avons la mosquée de texte. Vous avez déjà vu cette mosquée en plusieurs vidéos dans ce cours, mais fondamentalement j'ai créé ces trois textes avec une mosquée dessus. Donc, si je cache la mosquée, vous pouvez voir comment ça et ces textes ont l'air qu'ils sont simplement positionnés ici en haut . Et lorsque vous cliquez sur cette flèche pour modifier les diapositives, elles vont glisser vers le bas pour révéler le texte suivant. Et ils vont atterrir exactement dans la même position que celui-ci. Maintenant, les trois textes ont deux lignes de texte, donc ils vont se compléter très bien. Maintenant, pour les images. Les choses sont un peu plus compliquées, mais rien de trop important. C' est si vrai. Trois. Ici, nous avons deux images, donc l'image veut une image pour maintenant l'image un, qui est cet arrêt. On a des dimensions sur 1 61 avec 1 92 et je veux juste mentionner une fois de plus très rapidement. Vous avez ce curseur dans vos curseurs, oeufs le fichier afin que vous puissiez y accéder à tout moment. Et regardez ces dimensions. Regardez les positions. C' est vraiment à toi si on veut faire ça et sauter à l'intérieur et voir ce que j'ai fait. Les images sont une fois de plus de ce est le stock photo point com, et je vais laisser le lien vers ce site dans la dernière leçon hors discours, Monsieur peut facilement accéder à ces images. Maintenant, c'est la première image, et la deuxième image est à 15 qui à 56. J' ai placé l'image numéro un au-dessus de l'image numéro deux. Vous pouvez inclure des ombres si vous le souhaitez. Mais je n'ai pas inclus d'ombre dans cet exemple. Et ces deux images, si je les sélectionne, sont situées au centre de ce notre port. Donc au centre comme ça. Donc fondamentalement exactement le même espace que vous avez juste ici en haut est exactement le même espace juste ici en bas de ces images maintenant en dessous d'eux, nous avons le numéro d'image à, euh si j'ouvre le dossier. Image numéro trois dans l'image numéro quatre. Exactement la même chose. Configurez exactement les mêmes dimensions. Exactement le même espacement. Donc tout est exactement le même. Fondamentalement, j'ai créé un et deux les dupliqué pour créer trois et quatre et dupliqué encore une fois pour créer cinq et six. Donc, vous pouvez voir que ce sont cinq et six aussi. Maintenant, ils sont tous situés juste ici pour cette première diapositive, et nous allons changer de position. Je voulais juste vous montrer comment tout était structuré, donc c'est fondamentalement tout pour toute la structure. Cette flèche est située à 40 pixels de ce bord inférieur et située au centre, souvent notre port. Et c'est fondamentalement tout. Alors maintenant, commençons à animer. Donc, pour cette première diapositive, nous allons d'abord dupliquer tous les trois diapositives. Alors frappez le contrôle de contrôle de. Maintenant, nous avons trois diapositives, et c'est exactement ce dont nous avons besoin. Parce que lorsque les gens cliquent, cette flèche va passer à cette deuxième diapositive, et elle va passer à cette troisième diapositive maintenant pour celle-ci. Ce que nous voulons, c'est que nous voulons ces images Toby ci-dessous, et l'une d'elles va aller au-dessus. Mais nous allons d'abord travailler avec ce 1er 1 Donc je vais positionner deux et trois juste en dessous. Maintenant. Tous ces dossiers se trouvent dans ce dossier principal. Donc 12 et trois dans ce principal. Parce que si nous ne l'avons pas fait comme ça quand je les déplace, ils vont juste aller à la plinthe et ils ne resteront pas à l'intérieur, consterné notre planche. Et ce n'est pas quelque chose que nous voulons. Donc, pour ce 1er 1, localisons tous ci-dessous. Donc c'est le numéro trois. C' est le numéro deux, comme vous pouvez le voir, ils ne sautent pas dans la plinthe car ils sont toujours contenus dans ce dossier d' images principal . Maintenant, pour ceux-ci, je vais simplement déplacer ça un peu vers le bas, puis déplacer un peu le dossier entier du numéro trois vers le bas et faire la même chose pour le numéro deux. Donc je vais juste le déplacer vers le bas et vous pouvez déplacer celui-ci aussi vers le bas, juste pour que vous puissiez réaliser cette mouche en effet si vous voulez. Maintenant, pour ce 2ème 1 ce que nous voulons, nous voulons numéro deux Toby situé ci-dessous. Mais laisse-moi supprimer rapidement celui-là, Billy, celui-là aussi. Et je vais maintenant dupliquer cette première de notre naissance parce que nous avons déjà créé ces images . Donc, ne pas nous répéter, localiser le numéro pour le saisir, tenir , déplacer, jusqu'à ce qu'il rencontre le bord supérieur de cette image. Comme ça. Donc, quand il atteint zéro, et comme vous pouvez le voir, nous avons maintenant cette image qui sort. Mais vous pouvez le supprimer du dossier, maintenez la touche Maj, positionner dans, déplacé comme ça, puis replacé dans le dossier numéro deux. Et maintenant, nous devons déplacer le numéro un en faisant exactement les mêmes choses. Donc on le déplace vers le haut et je vais le déplacer vers le haut. Ah, beaucoup comme ça. Et une fois de plus, vous pouvez déplacer le dossier entier vers le haut. C' est vraiment à vous de déterminer l'ampleur de l'effet que vous voulez obtenir dans ce cas. Maintenant, ce dont nous avons besoin, nous devons changer la couleur de fond pour que vous puissiez tout simplement partout dans Bay City de celui-ci , et ça va changer à celui-ci. , Je le fais et nous devons changer le texte. Donc, la mosquée de texte. Et c'est l'architecture. Une architecture tellement géniale. C' est celui-ci qui va simplement le déplacer comme si jusqu'à ce qu'ils soient tous alignés et ville de l'histoire, nous allons juste le déplacer hors du chemin. Nous avons donc maintenant ce texte en place. Donc c'est tout pour le curseur numéro deux. Allons le faire avancer. C' est le curseur numéro trois, et fondamentalement nous allons faire exactement la même chose. On va abaisser leur ville de paie de la 2e 1 localiser ce texte, les bobs et les clubs vont se mettre à disposition. Grande architecture. On va le sortir de la route comme ça. Et enfin, nous allons travailler sur nos images. Donc numéro trois, vous pouvez simplement le déplacer comme ça. Et enfin, celui-là. Vous pouvez le saisir, faire glisser, positionner en place comme si vous le ramenez et maintenant faire la même chose pour le numéro deux. Donc, dessinons d'abord le dossier entier comme ça, et ensuite vous pouvez simplement le positionner quelque part ici. Donc c'est fondamentalement tout pour la partie design. Maintenant prototylographions pour prototyper. Tout est vraiment simple parce que nous allons juste nous concentrer sur cette flèche parce que les utilisateurs vont cliquer là pour que la transition se produise. Donc nous allons faire du pas ou de l'animation, assouplir une seconde, et nous allons faire la même chose pour celui-ci. Et parce que nous n'avons pas le top héros Togo de retour, nous allons simplement travailler avec cette flèche. Donc, quand je clique sur l'aperçu dispersé d'un clic et quand je clique sur cette flèche, vous pouvez voir cette belle transition. Ainsi, le texte en mouvement de l'air des images est en train de changer, et cette couleur d'arrière-plan change également. Donc, pour cliquer une fois de plus, vous pouvez voir à quoi cela ressemble. Donc, si nous sautons au 1er joueur 1 M un peu plus vite, vous pouvez voir si ces images ont juste un peu retardé. C' est pour ça qu'on les a séparés. Donc, quand ils arrivent en place, vous pouvez voir qu'ils vont. Donc, ce 1er 1 va 1er 2ème 1 suit et fait exactement le même mouvement. Ensuite, les images sont en place pour que vous puissiez voir ici. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 51. Slider d'image 4: dans cette vidéo, nous allons créer ce curseur d'image. Donc, lorsque vous cliquez sur le texte de la flèche va changer et cette image va faire appel de haut en loin. Et enfin, lorsque vous cliquez ici, il va revenir en arrière et ce texte reviendra en arrière. Et ces flèches s'estompent aussi pour indiquer qu'il n'y a plus de curseurs au côté de la mort. Vous ne pouvez donc pas cliquer ici. Comme vous pouvez le voir, rien ne se passe parce qu'il n'y a plus de curseurs De cette façon, vous devez cliquer ici et vous pouvez voir tout hors des diapositives. Alors commençons. Donc, pour cette vidéo, c'est mis en place. Donc, nous avons l'aéroport à 1000 par 600. Ensuite, nous avons cette mise en page. Donc, nous avons le texte juste ici. Flèches, cette image, une image à G, qui est premier fond et numérique, qui est le second arrière-plan. Et ils vont changer entre ces deux diapositives. Donc, pour le texte, si je clique sur notre projet, vous pouvez voir que c'est un sens ouvert 100 nous avons la mosquée de texte, donc même mosquée, donc même mosquée, comme nous l'utilisons dans la plupart des vidéos de ce cours, mais le au lieu d'aller de haut en bas, il va maintenant de gauche à droite. Et nous avons ces deux textes correspondant aux images que vous allez voir sur l'écran ci-dessous que nous avons la flèche, donc il a flèche droite et nous avons flèche gauche et gauche. Tero est 40% de pâteux, comme vous pouvez le voir parce que, comme je l'ai dit, cela indique qu'il n'y a plus de diapositives à gauche. Ensuite, nous avons une image dans le tuba avant que je les atteigne. Je veux juste vous montrer que voici nos antécédents. Donc ils vont changer entre les diapositives comme quoi ? Les images. Nous avons juste une mosquée lorsque l'image si fondamentalement exactement la même mise en place que pour ce texte . Donc si je l'ouvre, vous verrez que nous avons le texte et que nous avons la mosquée sur le dessus. Donc la même chose s'est produite ici. Mais au lieu de créer la zone de la mosquée, j'ai d'abord créé un rectangle vide en utilisant cette position de l'outil rectangle Toby aligné avec bord inférieur supérieur et droit et lui a donné un peu d'espacement ici sur la gauche il ferait flic votre et dans la copie du bas. Dans notre image de cas, j'ai inclus l'image tandis que l'état de copie supérieure rempli de couleur. Donc rien n'a vraiment changé leur et j'ai simplement sélectionné les deux clic droit et la forme masquée que je fais dupliqué et nous avons créé notre deuxième image, qui est cette image ici. Et pour montrer cette image, j'ai d'abord besoin d'agrandir cette mosquée. Donc je sais que notre conseil est 600 dans l'esprit. Donc je vais juste taper 600 comme ça et m'assurer qu'il arrive au sommet comme ça pour que vous puissiez le voir comme ça. Et c'est essentiellement notre deuxième image. Donc, si je clique sur eux, vous pouvez voir à quoi ils ressemblent, donc ils vont fondamentalement changer entre les diapositives. Encore une fois, vous pouvez accéder à cela dans les oeufs, souillent pour cette partie du cours, et vous pouvez explorer un peu plus pour voir ces tailles pour voir ces espacements a fr. Si vous avez manqué un élément, vous pouvez également le voir aussi. Donc, commençons à faire notre conception mise en place pour l'animation, donc je vais sélectionner le support hit control D pour faire une copie. Et sur celui-ci, je vais tout d'abord bouger le texte. Donc, je vais juste cliquer sur ces textes du bas qui se déplacent le long. Donc, avec la touche Maj et la touche fléchée gauche jusqu'à ce qu'il se rencontre comme ça et puis je vais déplacer ce texte de gauche tout le chemin de la sorte. Ensuite, je vais orteil sur le BG ou payer ville Donc opacité de ce fond comme si et enfin je vais changer ces flèches. Donc celui-ci sera à 40%. Celle-ci va être à 100%. Donc, à ce stade, il indique que vous ne pouvez pas cliquer sur les droits. Et à ce stade, il indique que vous ne pouvez pas cliquer sur la gauche. Alors comment on va faire ça ? C' est très simple. On va juste créer cette mosquée. Laisse-moi cliquer sur la mosquée sur cette image numéro un, et je vais juste la déplacer hors du chemin comme ça. Et si je clique quelque part à l'extérieur, vous pouvez voir que cette image est affichée et voyons à quoi cela ressemble. Donc fondamentalement, sur ce 1er 1, nous allons faire la même chose, mais nous allons juste aller au fond. Donc, sur l'image numéro deux dans la première légère, je vais juste cliquer sur la mosquée et la ramener jusqu'au bas jusqu'à ce qu'elle rencontre le bord inférieur pour que nous puissions le faire encore une fois. Donc je vais aller jusqu'ici. Cliquez quelque part à l'extérieur et vous pouvez voir qu'il est toujours affiché. Mais vous pouvez baisser leur fondamentalement 20 et nous allons baisser le fondamentalement 20 ici ce léger. Donc, fondamentalement, il s'estompe au fur et à mesure qu'il va. Donc non, nous pouvons montrer l'image numéro un. Tout a l'air correctement. Donc maintenant c'est du prototypage, prototypes rapides, et nous nous soucions seulement de ces flèches pour qu'il puisse garder le contrôle de cliquer à l'intérieur de cette flèche. Je vais le faire glisser facilement maintenant deux secondes, ou pour animer, et nous allons à votre pas et enfin prêt à utiliser le même effet revenir en arrière. Si vous pensez que l'effet dure trop longtemps, vous pouvez les abaisser, mais c'est vraiment à vous de décider. Je vais frapper l'aperçu ici en gros il. Et quand je clique sur cette flèche, vous pouvez voir que nous avons ce joli effet de curseur. Les flèches sont en train de changer. Le texte est en train de changer De gauche, c'est ça ? Parfaitement Codus Flèche. Vous pouvez voir que nous avons exactement le même effet aller dans l'autre sens afin que vous puissiez vraiment passer de l'un à l'autre et voir à quoi ils ressemblent. Je pense vraiment que ça a l'air sympa et la couleur de fond change vraiment. Nous pouvons également sélectionner la couleur de fond, par exemple pour être l'un de ceux-ci. Donc, cela correspond mieux à la conception globale. Mais je pense que ça a l'air sympa. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 52. Slider d'image 5: dans cette vidéo, je vais vous montrer comment vous pouvez créer ce curseur. Donc, lorsque vous cliquez sur ce point de pagination va changer, le texte va changer. Les images vont passer les unes entre les autres. Lorsque vous cliquez dessus, on va changer vers le bas. Vous pouvez aussi revenir en arrière, voir à quoi ça ressemble. Et enfin, quand vous atteignez, ils en ont remué un. Lorsque vous cliquez sur, il va révéler et le texte va descendre au milieu. Alors commençons. Donc ici, ici sur notre conseil d'administration de 1000 avec 600 semblent comme dans certaines vidéos précédentes. Et si je saute à l'intérieur, vous pouvez voir que nous avons ces deux textes séparés. Ils sont tous les deux ouverts envoie 100 régulier, mais cet arrêt est à gauche aligné, et ce bas est à droite, aligné dans un juste positionné une couverture d'orteil aléatoirement, partie de l'image, donc il ya vraiment pas grand chose qui se passe ici. En ce qui concerne les images elles-mêmes, couvrons d'abord la pagination. C' est simple. Nous avons juste trois points ici, donc les points sont à 16 où 16 1ère a à la fois sensation et accident vasculaire cérébral. Les deux ont cette couleur 70 70 70 70. Donc gris foncé, ce deuxième cercle a le champ hors bordure blanche hors de cette couleur 777 et finalement cerclé trois est exactement le même comme cercle à Now. Quant aux images, nous avons ces trois images et j'ai créé cette forme avec 10 points. Donc 10 côtés sur ce signe Kout et j'ai simplement utilisé ce Pollock doux dessiner un polygone clic 10 ici. Et j'ai eu cette forme, et j'ai simplement collé le médicament traîné et laissé tomber une image. Donc, si je sélectionne rapidement une image d'un, sélectionnez celle-ci et simplement glisser-déposer à l'intérieur, c'est ainsi que j'ai placé l'image ici. Personne et deux ne sont fondamentalement les mêmes, et nous allons changer le texte. Mais ce 3ème 1 est un peu différent. Donc, fondamentalement, nous avons cette forme même comme une image à une image trois. Mais nous n'avons pas inclus d'image à l'intérieur. C' est juste une forme de base. Comme vous pouvez le voir ici, cette image est l'image d'arrière-plan. Alors comment j'ai fait cela, laissez-moi rapidement sur le groupe cette mosquée Maintenant cette image va tout le chemin à l'arrière afin qu'il sent l'ensemble de notre port et cette forme reste là où elle est. Et j'ai essentiellement sélectionné les deux, droite Cliquez sur la mosquée avec la forme et je peux rapidement j'ai été mosquée, et fondamentalement, c'est ce que nous allons avoir en tant que mosquée afin que vous puissiez fondamentalement le déplacer comme vous le feriez avec ces deux images ici. Mais fondamentalement, c'est à quel point il est facile de le créer. Si vous êtes confus. Comme je l'ai dit plusieurs fois tout au long de ce cours, vous pouvez accéder au fichier. Donc les cidres d'image fichier dot egg D. Et il va être dans votre paquet que vous allez télécharger avec ce cours, et vous pouvez également accéder à tous ces éléments. Vous pouvez les inspecter plus loin. Vous pouvez cliquer sur tout ce qui vous est confondu avec. Donc, fondamentalement pour vous aider avec ces vidéos. Commençons donc maintenant avec nos animations. Donc, pour ce 1er 1, nous allons simplement avoir l'image un et deux. Désolé, les images deux et trois descendent en bas. Donc je vais juste tenir ma touche majuscule et la touche fléchée du bas, et il est important de les avoir dans le même dossier, parce que de cette façon ils vont rester à l'intérieur de notre port et ne pas aller au baseball. Mentionné cela plusieurs fois tout au long de ces vidéos. Maintenant, sélectionnez le contrôle de frappe de l'aéroport D. Et maintenant, quand vous avez dupliqué, nous allons maintenant taper ce second texte. Donc, ce type d'orteil va, rouler sur ce ne sont pas les vraies marques, en passant. J' ai juste inventé des trucs. Je vais positionner l'image numéro deux au milieu, certains tenant juste maj dans ma touche flèche vers le haut jusqu'à ce qu'elle atteigne le milieu. Et dans celui-ci, nous allons juste déplacer ce numéro un tout le long du chemin. Nous allons enfin cliquer orteil sur cette pagination et nous allons cliquer et cliquer ici pour sélectionner le même échec. Et pour le cercle, nous allons simplement sélectionner la couleur blanche. Donc c'est tout pour ce 2ème 1 Créons un tour un. Donc, sur ce agité, permettez-moi de taper rapidement ici comme ça et d'aller simplement déplacer ce texte comme ça et ici va écrire dans la table. Donc, comme vous pouvez le voir, celui-ci est en train de taper de gauche à droite. Celui-ci est en train de taper à partir de la lumière, non ? La gauche. Ça n'a vraiment pas d'importance. Vous pouvez leur demander le type de vote depuis le centre. C' est vraiment à toi de décider. Mais j'aime garder les choses simples si je peux. Donc je déplace juste cette image numéro 3 en place. Une image en mouvement numéro deux hors du chemin. Cela va être cette couleur, et le 2ème 1 va être blanc. Donc c'est fondamentalement tout pour celui-là. Et maintenant, faisons une dernière. Alors allons vite les parcourir avant que nous ne le fassions. Lorsque les gens cliquent sur ces points, ils vont changer entre ces trois images, et ils vont pouvoir aller et descendre à travers eux et voir ces produits. Et enfin, quand ils cliquent sur celui-ci, ils vont révéler et découvrir essentiellement ce que c'est dans un peu plus de détails. Donc je vais juste garder le contrôle, cliquez sur cette mosquée pour sélectionner cette mosquée appelée Image 3, et je vais simplement la faire pivoter un peu. Donc quelque chose comme ça juste en utilisant mon clic gauche de la souris et dans l'un des coins. Il importe celui que vous pouvez tenir. Changement ancien et à gauche. Cliquez sur votre souris pour le mettre à l'échelle uniformément et faites simplement glisser jusqu'à ce qu'il couvre l'ensemble de nos ports. Donc quelque part par ici est assez bon. Assurez-vous juste que vous ne voyez pas de blanc dans les coins. Vous pouvez ensuite cliquer quand il va révéler l'image entière. Maintenant, sélectionnons ces deux-là, et je vais simplement le déplacer juste ici. Assurez-vous qu'ils rencontrent le bateau au centre comme ça et des bords comme ça appelé Shift 12 peut-être, peut-être dans quelque chose comme ça. Regroupez-les. Donc contrôlez G ce milieu, ce milieu et je vais les regrouper comme ça, et c'est fondamentalement notre conception terminée. Permettez-moi de réaliser rapidement ce que nous avons fait. Nous avons donc commencé avec celui-ci. Ensuite, nous allons passer à celui-ci et ensuite, nous allons passer à celui-ci, et enfin, et enfin, quand vous cliquez sur cette image va cacher une pagination et révéler l'image entière, et ce texte va aller au milieu. Alors maintenant, commençons à protéger. Et quand on est au prototypage, je ne voulais pas créer de mosquées pour ce texte. Je voulais juste que vous voyiez qu'il y a aussi cette option. Vous avez vu beaucoup de mosquées dans ces vidéos dans le discours. Donc, si vous voulez orteil, vous pouvez simplement inclure une de la mosquée. Donc, soit quelqu'un venant de côté, soit venant du haut, Vous avez vu ça dans toutes ces vidéos. Maintenant, c'est vite Creek juste ici. Donc, je vais cliquer sur ce milieu, le faire glisser jusqu'ici. Donc, ce deuxième état, nous allons à vous Step auto. Animate est en dehors. Et utilisons, par exemple, deux secondes. Je pense que cela fonctionnera très bien. Maintenant, nous allons cliquer dessus. Le 1er 1 va utiliser exactement les mêmes paramètres. Cliquez sur le 2ème 1 comme ça et enfin, nous allons cliquer sur celui-ci si vous voulez revenir en arrière. Et si vous voulez révéler cette image, nous allons orteil klik juste ici sur cette mosquée et traîné sa poignée bleue Vous pas ou orteil animer facile maintenant à deux secondes. Et maintenant, nous allons prévisualiser et voir ce que nous avons créé Donc, dans un aperçu rapide, il va tout ouvrir. Et comme vous pouvez le voir, vous pouvez cliquer ici. Ça va changer parce que c'est deux secondes. Cela nous donne beaucoup de temps pour passer entre ces deux textes et cette image. Comme vous pouvez le voir, il a l'air vraiment agréable et lisse et facile. Et enfin, quand il s'agit de celui-ci, nous pouvons cliquer pour tourner, révéler la mosquée, et il va descendre à celle-ci. Donc, si je retourne à celui-ci, ou si un clic à nouveau, vous pouvez voir qu'il semble vraiment lisse parce que nous avons créé cette durée hors deux secondes. Donc, il montre vraiment l'effet bien. Tu peux jouer. Évidemment, je ne voulais pas inclure de détails de conception parce que vous pouvez créer toutes sortes de textures ici. Vous pouvez ajouter d'autres éléments hors. Exemple. Quelques flèches ou cercles en arrière-plan. C' est vraiment à vous de décider comment vous voulez pimenter ce design. Je veux juste garder les choses simples, et comme je l'ai mentionné plusieurs fois, vous pouvez accéder à cette conception. Vous pouvez l'utiliser avec ma pleine permission pour des projets personnels et commerciaux. vous pouvez l'adapter comme vous le souhaitez. Vous pouvez inclure ou supprimer tout ce que vous voulez. Assurez-vous simplement d'avoir tous vos noms de calque. Euh, cohérent et nommé de façon cohérente. Ainsi, par exemple, vous pouvez avoir l'image 123 ici. Mais image 246 Juste ici. Les choses ne fonctionneront pas correctement comme elles le devraient. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 53. Slider d'image 6: dans cette vidéo, je vais vous montrer comment vous pouvez créer ce curseur. Donc, quand je clique ici, vous verrez que cette barre de processus va le long, change à ce texte ainsi que cette image, et passe enfin à la troisième image ainsi qu'au texte de la turd. Alors commençons. Donc, ce que j'ai ici est l'aéroport de 1000 avec 600 laissez-moi rapidement vous montrer la mise en place. Nous avons l'explorer nos chambres, texte juste ici en haut. C' est un sens ouvert 36 audacieux. Suivant. dessous, nous avons la mosquée, qui est l'aperçu des images, et nous allons y arriver dans une seconde. Mais avant cela, nous avons les progrès et les progrès en blanc. Maintenant, le vide Progress est juste cette barre juste ici en bas. Hors de l'image et la progression est celle sur le dessus. Donc, il est actuellement à un pixel avec tandis que les problèmes vide remplit toute la largeur de l' aéroport à 1000 et sa hauteur à quatre pixels, et si je clique ici, vous pouvez voir que c'est un très léger grand hors DBT BTB. Et au fur et à mesure que nous avançons le long des diapositives, ce bleu va dépenser et sentir l'ensemble du progrès plus. Ensuite, nous avons des images. Nous avons donc créé ces images. Donc, j'utilise simplement l'outil rectangle Dessiner un rectangle glissé et déposé des images à l'intérieur et j'ai fait trois copies. Et enfin, c'est une mosquée avec juste la couleur sur le dessus. Donc, il est cette couleur e b e b e b. Donc une fois de plus vraiment la lumière grande. Je les ai sélectionnés tous, clic droit et un masque pour sa forme. C' est pourquoi vous voyez cette mosquée et, pour le moment, tous sont situés dans le même espace. Mais on va jouer avec ça dans une seconde. Et enfin, nous avons ces textes juste ici en bas. Donc tous sont les mêmes. Celui-ci est au milieu. Et ceux-ci sont à gauche et à droite. Et si je saute à l'intérieur, vous pouvez voir que ce texte en haut est traité 20 gras et il est bleu à trois e. C. Six ff. Et enfin, celui-ci est un sens ouvert. Régulier à 20 à cette couleur grise régulière au large 70 70 70. Donc, c'est fondamentalement tout pour notre conception mise en place. Et encore une fois, comme dans les vidéos précédentes, si vous ne vous souvenez pas de tous les détails, si vous êtes coincé quelque part, vous pouvez vérifier les curseurs d'image, les œufs souillent et à l'intérieur de celui-ci, vous pouvez trouver ce briquet et jouez avec tous les détails dont je parle dans cette vidéo afin que vous puissiez suivre avec la vidéo ainsi qu' avec les fichiers d'exercices pratiques. Alors commençons. Je vais créer une copie alors va frapper le contrôle D et dans cette copie, nous allons d'abord commander certaines de ces images. Je vais sauter les pieds à l'intérieur de la mosquée. Je vais déplacer ces deux images, donc je vais simplement sélectionner l'image à une image trois maintenez la touche Maj et la flèche droite sur mon clavier. Je vais aller aux pieds jusqu'à ce que je vois ça s'écrouler comme ça. C' est là que nous savons qu'ils sont à l'extrême droite de notre port, et parce qu'ils sont à l'intérieur de la mosquée, qui est fondamentalement un dossier, ils vont rester à l'intérieur de notre port et ne pas aller à l'intérieur de la plinthe. Donc c'est fondamentalement notre première légère, et ça va commencer Quand je clique sur cette pièce classique, je vais avoir le contrôle D Et dans celle-ci, tout ce que j'ai à faire est d'étendre la barre de progression. Donc, je vais juste cliquer ici et taper 1000 comme ça. Et comme vous pouvez le voir, il sent l'ensemble de notre port comme si ensuite, nous allons en créer une copie. Donc je vais cliquer ici, appuyer sur le contrôle D, et sur celui-ci, nous allons faire quelques changements. Donc les premières choses d'abord la barre de progrès, ramenant un orteil un. Comme ça. Et nous allons cliquer ici. Cliquez sur remplir trois e c six ff pour changer la couleur de ce texte orteil bleu. Et je vais cliquer ici. Modifiez la couleur de ce texte en gris. Encore une fois, 70 70 70 70. Et c'est pour indiquer que les gens ont cliqué ici. Mais nous allons faire un déclenchement temporel Justo, augmenter la vitesse un peu, mais vous pouvez jouer avec le robinet aussi. Enfin, déplaçons ces images hors du chemin afin que je puisse sélectionner l'image un et deux touches de contrôle Holdeman Maintenir, déplacer vers la gauche. La plupart cliquez et positionnez-le ici. Donc ça va changer en chambre familiale, cliquer sur l'aéroport, cliquer sur le contrôle D pour en faire une autre copie, et je vais sentir la barre de progression. Donc 1000 comme ça ? Donc, il sent l'écran entier. Ensuite, nous allons faire un autre duplicata sur celui-ci. Ramenez la barre de progression à une. On va changer l'image une fois de plus. Donc, je vais sélectionner les trois images dans ce cas et les déplacer le long de l'orteil ici. Je vais sélectionner la chambre de luxe trois C six FF et je vais cliquer sur celui-ci. Cliquez ici, et parce que c'est la même couleur, nous allons juste l'échantillonner à partir d'ici. Et enfin, finissons. Donc contrôlé une fois de plus. Et dans celui-ci, tout ce qu'il faut faire est d'amener la barre de progression jusqu'à 1000 comme ça, et c'est ce qui finit notre design. Donc, comme vous pouvez le voir, nous avons six ports différents. Alors maintenant, nous allons cliquer sur le prototype et commençons le prototypage. Donc, ce que je dois faire est de cliquer ici orteil, initier l'animation, et avec la poignée bleue séchée Rent vous pas ou orteil animer, assouplir et la durée. Donnons-lui une durée de trois secondes pour celui-ci parce qu'ils passent d' orteil rempli vide. Nous allons utiliser un délai de zéro seconde et vous allez utiliser quelque chose comme 0,4 seconde pour la prochaine. De vide à rempli, nous allons utiliser la durée off trois secondes une fois de plus sans délai ou pour animer sienne. Et le déclenchement du temps maintenant à partir de l'orteil rempli vide, nous allons l'avoir à 0.4 fois. Tout reste le même. Et enfin, pour ce dernier, on va l'avoir à trois heures. Alors testons tout. Donc, quand je reçois un aperçu, agrandissez-le un peu. Lorsque je clique ici, vous pouvez voir que la barre de progression est en cours. Les images changent bien et enfin l'image perturbée. Maintenant, si vous pensez que cette 0.4 seconde entre changer ces images donc ce ici, si vous pensez que c'est trop rapide, vous pouvez alors faire un changement, même là donc il va de bout rempli vide, alors peut-être que nous pouvons mettre 0,8 seconde. Donc, à partir d'ici aussi, choisissons 0,8, par exemple. Et enfin, donnons-lui un aperçu. Donc, en un clic juste ici, vous pouvez voir qu'il va jusqu'au bout. Donc trois secondes, 0.8 et maintenant il a une transition beaucoup plus propre. Et si tu n'aimes pas ça, soit tu peux jouer avec l'orteil allongé encore plus, donc c'est tout pour cette vidéo, et je te verrai dans la prochaine. 54. Fichier Xd des diapositives d'images: dans cette vidéo, je voulais vous montrer des curseurs d'image. Exe le fichier afin à l'intérieur de celui-ci, vous pouvez voir tous les curseurs que nous avons couverts dans cette section hors du cours. Donc, quoi que vous vouliez vérifier ce que vous voulez inspecter, voyez par vous-même. Ou juste si vous avez oublié quelque chose, vous pouvez toujours revenir à ce fichier et inspecter comment nous l'avons créé. Ainsi, par exemple, vous pouvez l'afficher en prévisualiser. Cliquez sur ce premier aperçu du bureau 1, et si je clique sur cette flèche, vous pouvez voir que cela change. Et si vous voulez voir comment cela est fait, vous pouvez simplement cliquer sur les calques juste ici, sauter à l'intérieur et dire, par exemple, Ok, c'est ouvert, dit 100. C' est cette couleur et ainsi de suite, sorte que vous pouvez vraiment sauter à l'intérieur et inspecter tous ces éléments et voir par vous-même. Si vous avez manqué quelque chose pendant ces vidéos, alors c'est tout pour cette vidéo, et je vous verrai dans la prochaine 55. Graphique 1: dans cette vidéo, je vais vous montrer comment vous pouvez créer ce graphique animé. Donc, lorsque vous cliquez à partir de dépenses quotidiennes orteil, tableau des dépenses mensuelles va mise à jour ainsi que le nombre juste ici, ainsi que les dates juste ici. Donc, pour les dépenses mensuelles, nous avons les mois ici et les dépenses quotidiennes. Comme vous pouvez le voir, cela change deux jours. Donc, quand vous passez de l'un à l'autre, vous avez cette belle petite animation. Alors commençons. Donc, j'ai ici nos ports hors 800 par 800 J'ai deux d'entre eux et un design fini parce que je voulais vous montrer la différence entre ces deux. Donc, nous allons d'abord sauter dans ce 1er 1 Donc si je clique sur avait été zoom un peu plus près, nous allons courir à travers ce qui est inclus à l'intérieur et ainsi que avec toutes les leçons précédentes dans certaines parties de ce cours, vous obtiendrez ce tableau oeufs souiller, et à l'intérieur de celui-ci, vous pouvez inspecter tous ces éléments, et vous pouvez voir comment tous ressemblent à des espacements entre les tailles de téléphone, couleurs et ainsi de suite. C' est la même chose que dans toutes les leçons précédentes et les parties du discours. Alors commençons par le haut. Donc, ce que nous entendons ici, c'est que nous avons des dépenses quotidiennes et mensuelles, donc si j'ouvre tous les jours plié, vous pouvez voir qu'il est ouvert. Sense 20 et toutes les dépenses incluses est ouvert depuis 18 mais il a cette couleur plus claire. Donc, c'est du DDT et c'est trois E c six ff. Donc le même bleu que nous avons utilisé pour le discours majoritaire. Et ici, nous avons exactement le même texte. Mais ceci ici, cette dépense mensuelle est de 70 70 70 70. Donc nous avons ces deux-là et ils sont positionnés uniformément l'un de l'autre juste ici. Donc, ils sont fondamentalement alignés avec ce bord gauche et alignés avec cela. Écrivez ce store de bouteille. En parlant de ça, nous avons cette ligne de fond qui a la couleur de la sensation hors F f f. Mais passons à cette couleur comme ça, et je vais enlever le coup parce que nous n'en avons pas besoin. Donc l'esprit est 600 hauteur est deux et c'est la couleur de remplissage. Donc 70 70 70. Ensuite, nous avons cette ligne et je vais la supprimer dans une seconde et vous montrer comment vous pouvez le créer et nous avons ce numéro et si nous reprenons un peu plus près, nous avons trois éléments à l'intérieur. Nous avons donc le texte qui est plein sens, gras. À 20, nous avons le nombre, arrière-plans et le nombre BG, qui est juste un rectangle régulier avec un rayon de coin de 20. Et nous avons le cercle avec la couleur du champ blanc cassé afin qu'il puisse bien correspondre avec le fond blanc et nous avons la bordure. Donc, ce bleu 3 60 c six ff avec la taille off pour enfin, nous devons répéter Grande. Donc, si je zoome un peu plus près, voici la note répétée pour le quotidien. Donc, ce sont les jours. Comme vous pouvez le voir, nous avons exactement le même espacement entre chacun d'eux. Je vais vous montrer comment le créer dans une seconde. Et dans ce 2ème 1 ce que nous avons est mensuel. Donc fondamentalement la même affaire avec un peu moins d'espacement entre chacun de ces éléments de texte et ils vont changer entre eux. Donc, sur le 2ème 1 jour est à l'opacité zéro, et à ce 1er 1 mois est à l'opacité zéro, comme vous pouvez le voir ici. Alors laissez-moi le créer rapidement. Je vais cliquer ici. J' ai été lundi, par exemple. Utilisons ça. Utilisé cette couleur Donc 70 70 70 comme si je vais utiliser des analystes réguliers. Utilisez 18 par exemple, juste pour que vous puissiez voir. Donc, une fois que j'ai créé ce premier élément, j'ai cliqué. Répétez la grille. Je les ai placés quelque chose comme ici, par exemple, puis un double clic sur le site, tapant mardi, tapant mercredi, jeudi , vendredi, samedi et enfin dimanche. Donc, si je ne clique pas à l'intérieur, voici à quoi ça ressemble. Mais comme vous pouvez le voir, ça se termine ici. Mais comment pouvons-nous arriver à cet état ? Donc c'est simple. Vous pouvez cliquer à l'extérieur de la sortie de l'orteil, répétez la grille, puis cliquez dessus. Donc, vous devez cliquer comme ça. Et enfin, il se termine ici de sorte que vous pouvez déplacer cette poignée à droite ici donc jusqu'à dimanche, puis simplement souris ici et augmenter l'espacement entre eux. Il suffit donc de cliquer et de le déplacer jusqu'à ce que vous soyez satisfait de son haut. Par exemple, quelque chose comme ça, il contiendra même espacement entre tous ces éléments de texte et il suffit de cliquer ici , orteil positionne parfaitement au centre de la page. Donc, c'est comme ça que je suis arrivé à ce texte répété grand et celui-ci aussi. Donc celle-ci est exactement la même. Il suffit de réduire l'espacement entre chacun de ces éléments de texte. Et c'est comme ça que j'y suis arrivé. Alors maintenant, laissez-moi vous montrer comment vous pouvez créer cette ligne. J' ai donc deux super réglages. Donc, si je clique sur notre port lui-même, je vais cliquer sur la mise en page. J' ai sept colonnes parce que j'ai sept jours dans une semaine et ici je l' ai traversé à zéro. Donc, si je, par exemple, place cinq, vous pouvez voir cette couleur. C' est cet espacement entre les colonnes. Nous avons donc sept colonnes et l'espacement est de cinq entre elles. Mais si je le réduit à zéro, vous pouvez voir qu'il n'y a pas d'espacement entre les gouttières. Mais vous pouvez clairement voir ces lignes en provenance. Et vous avez des lignes pour les sept colonnes. Alors, comment créer cette ligne ? Il suffit de cliquer sur un crayon, aller cliquer ici parce qu'il me donne les bords. Vous pouvez le voir parce qu'il arrive sur le bord gauche du lundi Donc je vais cliquer, tenir, tenir, déplacer et peut-être le relâcher quelque part ici. Et puis vous pouvez simplement appuyer sur escape pour échapper à la sélection. Et puis vous pouvez simplement passer le curseur et cliquer là où ces lignes sont sûres. En supposant beaucoup plus près. Vous pouvez voir cette ligne et cette ligne suivante parce que ce sont les lignes de notre grand. Donc je vais cliquer sur cette ligne. Cliquez une fois de plus, cliquez une fois de plus, et chaque fois que vous cliquez sur votre ajout de ces points orteil cette ligne, et tous ces points sont droits. Donc, si j'essaie de le déplacer, vous pouvez voir qu'ils se déplacent en ligne droite, donc ils se déplacent dans le bon angle, par exemple. Et si vous voulez changer cela pour avoir la ligne courbe, vous pouvez simplement aller de l'avant et double-cliquer sur chacun d'eux, et il va le tourner à partir de la courbe de pointe, et vous pouvez alors simplement les déplacer autour. Pour ce faire, il suffit de cliquer sur chacun d'eux et de le faire glisser à l'extérieur de l'ébullition, veillant à ce que vous restiez sur cette ligne comme ça et nous allons faire quelques changements en seulement une seconde. Mais par exemple, quelque part ici et finissons par ici, nous allons cliquer ici. Tapez cinq, par exemple. Toe ont belle grande bordure trois C six ff est pour la couleur. Je vais cliquer sur autour, gardé pour arrondir les coins comme ça. Et enfin, je vais positionner cette partie juste en dessous de ce nombre. Je vais cliquer sur notre port pour supprimer la grille comme ça. Et je vais simplement positionner ce nombre juste un peu plus bas. Comme ça. Et si vous n'êtes pas satisfait de l'apparence de ce graphique, vous pouvez toujours repositionner certains de ces éléments. Donc, par exemple, je peux le déplacer comme alors peut-être déplacer ça juste un peu vers le bas comme ça. Peut-être déplacer ça encore plus bas, peut-être déplacer ça comme ça. Et vous pouvez même déplacer cela vers le bas si vous voulez suggérer de le déplacer un peu en dessous de cette ligne de départ. Mais je ne vais pas faire ça pour que vous puissiez voir que c'est comme ça que nous avons eu cette ligne. Donc, je vais le supprimer d'ici. Je vais sauter ici. Nommez la ligne comme si cliquez sur le contrôle C Cliquez sur celui-ci, Cliquez sur Contrôle V et juste ici. Ce que j'ai fait est la même chose pour le grand, donc je vais cliquer sur un grand Comme vous pouvez le voir, nous avons maintenant 12 colonnes comme, Donc nous nous sommes débarrassés de zéro pour que vous puissiez jouer autour. Ajoutez quelques points supplémentaires si vous le souhaitez, afin que vous puissiez le repositionner pour chaque mois. Donc, si je double-clique et clique ici, je peux ajouter un autre point. Peut-être que je pourrais bouger un peu celle-là. Maintenant, vous pouvez double-cliquer orteil faire qu'il soit rond ou droit. C' est vraiment à toi de décider. Et vous pouvez positionner ces poignées comme vous le souhaitez, sorte que vous pouvez jouer avec elles et vous pouvez les développer ou les ramener au point d'origine . Donc, c'est vraiment à vous de décider comment vous voulez que ce graphique ressemble. Donc, comme je l'ai dit, vous pouvez ajouter plusieurs points. Vous pouvez même jouer avec ces points et les aligner sur cette nouvelle grille. Donc, par exemple, quelque part par ici, peut-être que cela peut aller juste un peu vers le bas. Allons parler de ça encore plus comme. Ainsi, comme vous pouvez le voir, vous pouvez jouer avec ces poignées pour obtenir le look exact que vous voulez. Et vous pouvez, par exemple, positionner. C' est quelque part par ici. Oui, je suis plutôt contente de ce que ça ressemble. Peut-être que je peux en ajouter un de plus ici, double-cliquez pour le faire autour de quelque chose comme ça. Et appelons ça un jour se déplaçant juste en dessous du numéro que je vais cliquer sur le nom de Nos ports . J' ai enlevé la disposition de la grille et finalement, ce que je veux est de positionner cela juste un peu mieux. Donc, je vais le positionner quelque part ici, et c'est fondamentalement tout pour la conception du processus. Donc, comme vous pouvez le voir, c'est vraiment simple de concevoir cela, et ça va très bien s'animer. Donc, quand je clique sur un prototype, ce que nous avons ici, c'est que je les retire rapidement afin que nous puissions tout faire ensemble. Donc, nous devons cliquer quand ce 1er 1 pour aller sur les dépenses mensuelles et il ira juste ici. Donc nous allons vous animer pas ou orteils. Facile à sortir en une seconde Pour la durée, vous pouvez avoir une durée un peu plus longue si vous voulez que cette animation soit un peu plus lente, mais j'ai trouvé une seconde pour être juste assez bon dépenses quotidiennes. Nous allons faire exactement la même chose et la déplacer ici. Et vous pouvez aussi abaisser le pacenti de ceux-ci si vous le souhaitez. Donc, par exemple, cliquez sur cette dépense quotidienne ici. Retournez au design. On peut taper 40. Comme vous pouvez le voir, cela va jusqu'à 40% si vous voulez obtenir cet effet. Mais si ce n'est pas le cas, vous pouvez le laisser comme ça. Et enfin, ce que je veux te montrer, c'est encore une fois. Donc, sur ce 1er 1 où nous montrons les dépenses quotidiennes, nous avons les jours à ce sujet. 2ème 1 aura des dépenses mensuelles montraient les mois. Mais sur celui-ci, les jours si je clique ici sont zéro, et sur ce mois sont à zéro opacité. Donc juste réduire ces deux-là pour qu'ils changent bien l'un de l'autre. Tu sais, c'est enfin un aperçu à quoi tout ressemble. Donc, si je clique mensuellement, vous pouvez voir que ce graphique s'anime et que ces dates sont en train de changer. Donc, du quotidien au graphique mensuel est animer joliment, comme vous pouvez le voir. Mais ce que je n'ai pas inclus ici, c'est la ligne. Donc je vais arranger ça maintenant. Donc je vais simplement cliquer sur sa ligne de fond. Cliquez sur Contrôle Voir Cliquez sur celui-ci car il a un champ blanc est allé orteil, supprimez-le. Contrôle. Nous avons pris, collé dans la façon dont la position. C' est juste ici. Et quand je peux prévisualiser une fois de plus, cliquez entre comme vous pouvez le voir maintenant. ligne reste exactement la même, mais les graphiques sont en mouvement. Vous pouvez également déplacer cela si vous voulez suivre exactement où la ligne est, donc, donc, comme vous pouvez le voir maintenant, se déplace juste un peu. Mais vous pouvez le déplacer ici, par exemple, si c'est la valeur la plus élevée. Donc, par exemple, sur mensuel ici, mais sur tous les jours peut-être pourrait être juste ici afin que vous puissiez le déplacer jusqu'à ici et avoir un peu plus d'animation si vous voulez. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 56. Graphique 2: dans cette vidéo, je veux montrer comment il peut créer ce graphique linéaire. Donc, lorsque vous cliquez tous les jours, il va changer et ce sélecteur va se déplacer vous cliquez sur Mensuel va mise à jour des orteils une fois de plus. Et quand vous cliquez aujourd'hui, il va revenir en arrière et vous montrer juste les valeurs d'aujourd'hui. Sirkin cycle joliment entre eux, et comme vous pouvez le voir, ils ont cette belle rayonnante sur eux aussi. Alors commençons. Donc, ce sont des ports à 800 par 800, nous allons les décomposer. Donc, si je zoomer un peu plus près concédé, nous avons cette élection en haut, et nous avons aujourd'hui tous les jours mensuel et sélecteur. Donc, pour le texte, nous allons utiliser le sens ouvert comme ça. Et je vais faire la même chose pour ces deux-là. Donc ouvert dit comme ça. Et enfin, pour le sélecteur, nous l'avons à 52 pour les esprits pour les hauteurs et à 50 pour le rayon de coin rond, et je vais essentiellement faire la même chose. Donc je vais frapper le contrôle. C a déménagé ici et est allé le supprimer parce que je veux vous montrer comment vous pouvez appliquer à une sélection différente. Donc le 1er, c'est aujourd'hui. 2ème 1 est tous les jours, alors nous allons cliquer dessus. Je vais cliquer sur un clic quotidien, ce sélecteur de couleurs. Je vais sélectionner cette couleur bleue. Et pour l'aujourd'hui, je vais cliquer politique et cliquer ici parce que c'est notre couleur par défaut. Ensuite, je vais déplacer la sélection sur le bord gauche du texte et la déplacer ici comme ça. Et enfin, faisons la même chose pour le mensuel. Quelqu' un à cliquer ici. Utilisez l'outil de sélection de couleurs. Choisissez le clic bleu aujourd'hui, cliquez ici, puis juste ici. J' ai trouvé ça beaucoup plus facile de le faire de cette façon. Et enfin, faisons-le. Donc, par exemple, à ici et appelons cette sélection faite. Je vais tenir le quart de travail et tout simplement m'aligner sur ce banc. Je vais faire la même chose pour celui-ci et enfin, pour celui-ci. Maintenant, nous allons décomposer ceci Donc nous avons cet arrière-plan, qui est fondamentalement un calque de forme. C' est un 600 par 300. Il a cette couleur de champ hors DDT. Le coin arrondi est à huit heures. C' est donc notre rayon de coin et enfin nous avons des lignes horizontales et verticales. Donc, ceux-ci sont à l'intérieur de la grille de répétition. Et pour créer le mucus, tracez simplement une ligne. Alors, allez par le haut. Maintenez le décalage tout le chemin vers le bas comme ça et il rend hommage. Super. Et c'est à vous de voir combien de lignes vous voulez avoir. Laisse-moi vérifier. Avoir 1234567 lignes. Donc je vais le tenir 1 à 4, 567 Donc c'est fondamentalement tout. Et vous pouvez positionner ces notes répétées. Donc, je dois être ici et simplement aller aux pieds, les aligner comme ça et le faire à 73. Je vais cliquer ici, sélectionné pour être blanc, et c'est ainsi que j'ai créé celui-ci. Quant à celui-ci, j'ai fait exactement la même chose. Donc, pour les lignes horizontales fait une ligne comme si frapper la grille de répétition. Je veux avoir 1234567 lignes. Donc je vais cliquer sur Mary Pitt Grid 23456 Donc encore un sept. Je vais faire un espacement, mais laissez-moi d'abord le déplacer en ligne avec celui-ci. Donc quelque part ici, je vais faire une sélection et sélectionné pour être quelque chose comme ça. Et c'est ainsi que j'ai créé les lignes horizontales et verticales, pas pour les lignes en bas. Laisse-moi te montrer. Comment ça a fait ? Donc, si je clique dessus, vous pourriez voir qu'il a la sensation. Il a une frontière. Et il a le coup avec off cinq ainsi que le tour qu'il a gardé. Alors je vais cliquer sur mon crayon. Je vais cliquer ici dans le coin. Et je vais simplement cliquer sur un peu par ici pour m'assurer que je reste à ces lignes de notre grand. C' est pourquoi nous avons créé la grille pour que nous puissions la suivre. Et sur celui-ci, je vais aller jusqu'au bout. Tu pourrais frapper l'évasion. Donc, ce que nous avons ici, c'est cinq que nous avions autour de Kep et pour le film, allons avoir un Grady dans. Donc, nous avons un Grady linéaire à partir d'ici, Il suffit de cliquer sur cette petite flèche Juifs, l'ingrédient linéaire maintenant, dans ce cas et juste aller vous montrer avec le noir et blanc parce que déjà créé avec notre couleurs. Donc ce que je vais faire, c'est faire tourner ça. Donc, je vais cliquer sur ce point en bas Cliquez sur ce point d'arrêt et faites-les pivoter pour que la couleur plus claire soit en bas comme alors assurez-vous de les aligner pour aller parfaitement droit en suivant cette ligne, et vous pouvez cliquer sur le blanc et cliquez simplement ici pour abaisser la Bay City jusqu'à zéro. Et c'est là que vous allez avoir cet effet à partir de la couleur de l'ancien pied, pas de couleur. Quant aux lions, nous allons double-cliquer sur l'endroit. Je vais double-cliquer sur chacun de ces points. Comme dans la vidéo précédente. Vous êtes très solide, et vous pouvez ajouter plus de points en cliquant n'importe où. Donc, si vous voulez adopter ici, vous pouvez l'ajouter et simplement tirer toutes ces choses comme vous le souhaitez. Et vous pouvez déplacer ces poignées si vous voulez changer la façon dont l'angle va ressembler. Donc, par exemple, comme ici, je vais double-cliquer ici aussi bien que vous pouvez avec tout le chemin juste ici en haut . Vous pouvez déplacer celui-ci vers le bas. Tu peux vraiment jouer avec eux. Et c'est ainsi que sont créés ces deux. Maintenant, pour commencer, nous allons doubler rapidement sur chacun d'eux, donc nous devons les faire aller parfaitement droit. Et puis à un moment donné, bougez pour le quotidien. Comme vous pouvez le voir ici. Désolé pour aujourd'hui. Comme vous pouvez le voir ici. Alors, comment faire ça ? Sautez à l'intérieur, double-cliquez sur chacun d'eux à nouveau pour les redresser une fois de plus. Et puis il suffit de déplacer toutes ces lignes pour suivre la ligne de fond. Comme ça, assurez-vous qu'ils sont hétéro comme ça. Pas de clic sur celui-ci. Et si ce n'est pas droit, vous pouvez simplement le convertir de l'autour d'elle. Deux à nouveau en arrière. Et vous pouvez simplement aller les suivre comme ça. Et jusqu'à ce que vous soyez satisfait, vous pouvez même déplacer ces lignes. Donc, par exemple, si nous voulons le déplacer comme ici, vous pouvez le faire. Et enfin, pour celui-ci, vous pouvez avoir quelque chose comme ça. Donc peut-être que ça va de cette ligne, et peut-être qu'il peut aller un peu plus bas quelque part comme ici. Et comme vous pouvez le voir, nous avons maintenant cette forme maintenant pour la deuxième et la 3e 1 Votre juste va simplement inverser le processus dans l'autre sens. Donc, allez double-cliquer sur tous ces points, puis les déplacer à nouveau, orteil quel que soit le processus que vous voulez et quel que soit l'endroit que vous voulez et assurez-vous que vous essayez orteil en ligne. Tous les points complètent cette grille. C' est pour ça qu'on l'a créé. Et c'est comme ça que j'ai créé ces lignes. Alors maintenant, commençons par l'animation. Je vais le faire sur place parce que nous n'en avons plus besoin, comme ça, et nous avons nos parties bleues et vertes maintenant pour le vert. C' est la couleur donc 55 D 466 Et pour le bleu, il est standard trois e. C. Six f f. Vous aurez ce fichier d'entraînement hors cours dans les graphiques X défile lorsque vous téléchargez les fichiers d' entraînement et vous pouvez l' ouvrir, l'ouvrir et jouer avec elle. Si vous avez manqué quelque chose maintenant, commençons par l'animation. Je vais cliquer sur le prototype et je vais un peu sur le zoom. Tout ce qu'on a à faire, c'est d'animer ça juste ici, en haut. Donc, pour le mensuel dans ce 1er 1 je vais le faire glisser ici pour le robinet mensuel auto animate, note facile. Et une seconde pour la libération pour le quotidien. Aller cliquer ici va contenir le même effet aujourd'hui et mensuel. Et nous allons choisir aujourd'hui et tous les jours, non ? Donc, tout cela en utilisant le même effet à partir d'ici. Et si je clique sur le 1er 1 clic aperçu et quand vous cliquez à travers eux, vous pouvez voir qu'ils se déplacent bien et ils ont cette belle petite transition et vont jusqu'à zéro. Maintenant, bien sûr, vous pouvez gérer ce design et le rendre encore plus joli en ajoutant les chiffres ici sur le site comme une épaule dans l'exemple précédent. Donc, vous pouvez faire ah essentiellement copier l'exemple précédent basé ici en utilisant repeat great aussi bien. Ainsi, par exemple, vous pouvez avoir des heures pour le quotidien afin que les heures puissent être juste ici. Les minutes peuvent être ici. Désolé pour aujourd'hui. Pour le quotidien, vous pouvez avoir ce soit le nôtre, par exemple, et peut-être même des secondes ou Il est vraiment à vous et pour le mensuel. Vous pouvez l'avoir,par exemple, par exemple, jours et des heures et les placer en dessous et sur la gauche. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine. 57. Graphique 3: dans cette vidéo, je vais vous montrer comment vous pouvez créer ce graphique à barres. Donc, quand je clique ici, vous pouvez voir que toutes ces barres sont remplies aux valeurs et qu'elles ont l'intention faire. Alors commençons. Donc voici à nos ports hors 800 par 800 conception est déjà terminée. Mais comme je l'ai mentionné dans les vidéos précédentes, vous pouvez obtenir la conception complète des graphiques X'd fichier, et vous pouvez l'inspecter plus en détail. Mais je vais vous montrer rapidement comment j'ai créé tout ça. Donc, laissez-moi dupliquer ceci notre conseil, par exemple, et allons de l'avant et supprimons tout. Donc, je vais juste choisir un outil rectangle et commencer à le dessiner. Faire 600 comme si positionnement pour être même lire les deux chiffres. Alors peut-être aller quelque part comme ça, mais ça n'a pas d'importance, et je vais le faire par exemple, 20 quelque chose comme ça, et positionnons-le en haut de ce nombre. Allons de l'avant et dupliquons ce numéro ici, et nous allons taper un seul parce que ceux-ci vont représenter des milliers de dollars. Alors, qu'est-ce qui va en taper un comme ça ? Et je vais déplacer celui juste en dessous. Ça va être vide comme alors on va enlever la frontière. Et pour le film, nous allons inclure D DD So gris clair. Je vais obtenir le contrôle D et cela va être rempli et il va être trois e c six ff comme si 10 va avoir une hauteur sur un, et je vais le sélectionner et le clic vide juste ici, et il va le positionner sur le ligne de fond de cet état vide, comme vous pouvez le voir ici. Donc c'est fondamentalement tout pour le processus de création. J' ai juste ensuite sélectionné les trois, comme si cliqué sur les notes de répétition et créé 12 différentes. Donc, au total, 2345678 9 10 11 12 Donc nous allons finir à celui-ci, et maintenant vous pouvez simplement les espacer pour que vous puissiez simplement passer la souris ici pour obtenir cet espace rose , et vous pouvez simplement les placer dessus, déplacez-les les uns entre les autres afin que vous puissiez avoir cet espace agréable comme vous le souhaitez, vous pouvez ensuite le positionner au centre ou le déplacer où vous voulez. Et puis enfin, il suffit de double-cliquer à l'intérieur comme ça et vous pouvez taper deux. Vous pouvez double-cliquer à l'intérieur du type 3456 et jusqu'à 12. Quand vous avez terminé, vous condensez tout simplement correctement. Cliquez sur les grilles de groupe. Vous obtiendrez tous ces éléments et vous pouvez les parcourir et les nommer tous correctement. Et une fois que vous aurez fait cela, alors ce sera un numéro un pour que économiquement puisse le nommer. C' est le numéro deux. C' est le numéro 34 56789 10 Cela va être 11 et enfin 12. Comme vous pouvez le voir, cela ne nous prend que quelques secondes pour le faire. Et nous devons le faire et sur groupés comme ça parce que nous devons créer ces bleus et les agrandir donc fondamentalement les déplacer vers le haut. Donc je vais frapper contrôler le duplicate ce notre saut de port à l'intérieur, choisir le bleu et vous pouvez le faire avec tous, Alors laissez-moi le faire rapidement. Vous pouvez donc les sélectionner tous comme ça. Donc, sélectionnez le champ, le champ, sélectionnez tous les déplacer vers le bas. Donc, il est vraiment simplement de maintenir le contrôle et nous tuons clic de souris, vous pouvez simplement cliquer vers le bas et ici il est. Vous ne pouvez pas trouver le point médian où se trouve le point médian et vous pouvez alors simplement, par exemple, position de se cacher à 20 comme ça, puis simplement déplacé tous les remorquage. Alignez-les avec ce bord inférieur. Ensuite, vous pouvez simplement surcharger le point médian, étendre ici, puis vous pouvez plushead et sélectionner un par un. Donc, double-cliquez à l'intérieur. Il suffit de le déplacer comme ça et vous pouvez tous les déplacer comme vous le souhaitez. Une fois que tu as fini tout ça, laisse-moi vite manger ça aussi. Une fois que vous avez fini toute la dette, vous pouvez avoir quelque chose comme ça. Et bien sûr, vous pouvez avoir des valeurs comme vous le souhaitez, vous pouvez ajouter plusieurs valeurs ici. Donc, c'est faute est tombé RVs dépenses totales. Donc, par exemple, vous pouvez aller d'ici, même aller 11 10 98 jusqu'à zéro et ce sera fondamentalement votre point zéro et vous pouvez ensuite les aligner avec ces nombres, donc cela pourrait être, par exemple, 10. C' est à 11 h. C' est à sept heures, et vous comprenez l'idée. Vous obtenez juste cela comme un concept de base dans cette vidéo, et c'est à vous que les orteils. Mettez-le en œuvre dans votre propre conception. Vous pouvez inclure vos propres couleurs et changer de couleur facilement. Vous ne pouvez tout simplement pas cliquer sur celui-ci. Vous pouvez sauter directement ici au panneau des actifs. Cliquez sur l'appelant pour le sélectionner. Ensuite, vous pouvez faire un clic droit dessus et vous condensez lequel il car il va éteindre les instances toutes ces couleurs qui étaient bleues avant. Maintenant, ils vont être de cette couleur. Ainsi, par exemple, vous pouvez entrer le code hexadécimal de vos clients juste ici, et il va orteil, hum, instantanément les inclure dans cette conception si rapidement. Revenez quelques fois en arrière et animons maintenant, il est donc important qu'ils aient tous les deux exactement les mêmes noms de calque, donc comme vous pouvez le voir, cela commence à partir d'un seul ici, se termine en 12. Donc, c'est le numéro 12 comme vous pouvez le voir, et dans celui-ci ils sont exactement les mêmes. Donc commence par le numéro un se termine par le numéro 12 et ceux-ci sont exactement les mêmes dans nos deux ports. Alors maintenant orteil animé, c'est vraiment simple. Je vais juste cliquer ici, faites glisser l'orteil ici. On va à ton pas ou à tes orteils animés. L' assouplissement et la durée vont être de deux secondes parce que nous voulions avoir cette animation fluide pour que tous échouent doucement du bas vers le haut. Donc, nous allons cliquer sur l'aperçu, voir à quoi cela ressemble. Donc, en un clic juste ici, vous pouvez voir parce que nous l'avons eu à deux secondes, ils se sentent et en douceur. Si vous voulez le remplir plus rapidement ou plus lentement, vous pouvez simplement changer cette durée à, par exemple, quatre secondes. Si vous le voulez, Toby plus lent ou si vous voulez que ce soit Foster, vous pouvez l'avoir à 0,2 seconde. Mais vérifions ça. Vous pouvez voir juste des clichés en position, donc je ne pense vraiment pas que ça a l'air si bien. Je pense que deux secondes sont une sorte de bon endroit pour cette animation, donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 58. Graphique 4: dans cette vidéo, je vais vous montrer comment créer ces cartes d'artisanat. Donc, quand je clique ici, ça va se développer. Comme vous pouvez le voir, il a cette belle lumière rayonnante, et il remplit toutes ces lignes fondamentalement. Et quand je clique à nouveau dessus, il va revenir au point de départ. Alors commençons. Donc, ce que j'ai ici, c'est à nos ports de 800 par 800. Et si je saute dans le 1er 1, on va le décomposer. Encore une fois, vous aurez ceci à vos cartes. X souiller Sercan, sauter à l'intérieur et l'inspecter un peu plus loin. Mais ici, nous avons l'opus s 20 Bolt. Nous avons cette 12 heures et K ouvert dit 18 même comme dans la vidéo précédente. Et nous avons ces deux lignes. Donc, c'est la ligne de gauche avec ses quatre et haut 86 32 Et enfin nous avons cette ligne de fond donc, mais exactement la même, mais à l'envers. Donc témoin quatre et la hauteur est 63 pour enfin, nous avons cette ligne horizontale, donc ils sont fondamentalement une ligne donc 6 30 à deux. En utilisant l'outil rectangle et je suis juste en utilisant, répétez génial et les aligner comme ceci. Ainsi, comme vous pouvez le voir à 45 pixels de distance. Donc maintenant, j'ai cela uniformément réparti dans cette section et vous pouvez ajouter des nombres. Donc ce sera 11 10 98 jusqu'à zéro, ce qui sera juste ici. Et vous pouvez également ajouter les chiffres pour les milliers juste ici en bas si vous voulez. Mais une fois de plus, ce n'est qu'un exemple de la conception globale. Maintenant, comme pour la partie comme vous pouvez le voir, pot est caché ici et il est étendu juste ici. Alors, comment pouvez-vous le créer ? Alors laissez-moi vous montrer rapidement que dans ce 1er 1, nous allons utiliser le mental. Nous allons évidemment aller juste ici, dans le coin. Mais je vais juste y aller pour ne pas m'embêter avec la partie originale. Et je vais simplement cliquer et cliquer ici. Vous devez vous assurer que toutes ces lignes sont droites, donc il suffit de cliquer par magie ici. Maintenez votre touche Maj. Cliquez ici, puis ramenant le point d'origine de l'orteil afin que vous puissiez voir, C'est vraiment assez simple. Vous pouvez l'avoir cinq, par exemple. Et laissez-moi rapidement cliquer ici. Clic droit Copier. Je vais cliquer sur cette partie de l'apparence basée sur un clic droit afin que nous obtenions cette Grady dans des copies de l'original. Et si nous sautons ici, vous pouvez voir que nous avons le Grady int au bleu trois dire six FF et la couleur bleue est sur le dessus, va vers le bas orteil blanc et blanc est à 0% de la ville de base. C' est pour ça que nous avons cet effet. Donc c'est ce que vous recevez ici. Mais comment peux-tu y arriver ici ? Donc je vais vous montrer que si je clique sur les parties d'origine et que je la cache et si je saute juste ici partie brute, conditionnelle et que je la cache aussi, nous allons utiliser notre partie orteil animer ça pour que je puisse tout simplement contrôler les enfants. Tu vois ? Cliquez sur ce suivant. contrôle de frappe V va aux orteils. Le rythme en remorquage. Position d'origine. Alors, comment peut-on faire ça ? C' est vraiment assez simple. Donc, ce sera notre partie finale, et ce sera notre partie de départ. Maintenant, pour la partie de départ, vous devez sélectionner tous ces points et les amener au point de départ. Alors, comment peux-tu faire ça ? Double-cliquez simplement sur votre pièce, cliquez sur le début et clignotez simplement. Ramenez-les tous ou vous pouvez les amener jusqu'à ici, par exemple, Laissez-moi zoomer juste un peu afin que vous puissiez les amener tous à ce même point. Comme ça, cela dépend du nombre de pièces que vous avez. Désolé, combien de points vous avez va prendre plus ou moins. Et puis une fois que vous avez terminé cela, vous pouvez simplement les sélectionner tous comme si nous deux clic gauche de la souris et les ramener au point d'origine. Et enfin, quand vous avez terminé, vous pouvez simplement cliquer sur ce pas juste ici, et vous pouvez le ramener au point de départ, qui est juste ici, et c'est fondamentalement tout. C' est à quel point il est facile de créer. Je vais cliquer ici, choisir le prototype et déjà le brancher. Mais laissez-moi ramener ça pour qu'on recommence, comme ça. Donc, ce que je veux faire est de cliquer sur ce texte. Je vais traîner à base de plantes, manipulé vous pas ou orteil animer. La durée d'Easy Now est de deux secondes et cliquez ici pour que je puisse le ramener. C' est ça. C' est à quel point il est facile de créer cela. Donc, si je clique ici, cliquez sur un aperçu. Comme vous pouvez le voir, nous ne pouvons rien voir. Mais quand je clique ici va se développer et vous allez obtenir cet effet. Et quand vous cliquez en arrière, il va le ramener tout en conservant les paramètres d'origine et la position d'origine que vous pouvez voir le point juste ici si je zoome un peu plus près. Mais vous pouvez, bien sûr, déplacer ce point afin de sélectionner tout et simplement déplacer le bout de la pointe ici. Et vous pouvez également réduire la taille peut-être 24 et il va se fondre dans l'arrière-plan vraiment bien. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 59. Graphique 5: dans cette vidéo, je vais vous montrer comment vous pouvez créer ce tableau de beignes. Donc, en un clic juste ici, certaines valeurs vont changer. Comme vous pouvez le voir, Soifer sauter à la 1ère 1 Vous pouvez voir que le texte va changer. Donc, ce texte dans les trois textes du milieu juste ici en bas va apparaître hors de nulle part ainsi que le graphique en beignet lui-même. Donc, si vous vérifiez une fois de plus, vous pouvez voir que tout s'est bien rempli et en douceur. Alors commençons. Donc, ce que j'ai ici, ce sont deux ports au large de 800 par 800. Et comme vous pouvez le voir, nous avons cet état de départ et nous avons cet état final. Examinons donc certains de ces éléments. Et une fois de plus, avant que je commence, vous avez ces graphiques dans votre fichier d'exercices profonds, donc vous pouvez les inspecter un peu plus loin si vous avez manqué quelque chose ici dans cette vidéo, et vous pouvez entrer dans un peu plus détails sur la façon dont tout a été créé. Alors commençons. Comme vous pouvez le voir, ici est difficile. La commande ressemble à, donc nous avons vos dépenses aujourd'hui texte juste ici. Il est ouvert depuis 20 Bolt ci-dessous que nous avons centre mosquée de texte qui est juste cette mosquée. Et si vous vous souvenez des vidéos précédentes est juste trois textes dans ce cas parce que 00 et 98 vont changer pendant que ces signe dollar va rester en place. Alors comment j'ai fait cela, j'ai créé trois textes et ce signe du dollar est laissé la ligne. Et ces deux-là sont à droite La ligne, comme vous pouvez le voir ici qui m'a permis de supprimer le signe inférieur de ces deux-là. Et j'ai simplement créé juste rectangle de base pour le masque Sélectionné tous d'entre eux et cliquez sur créer une mosquée avec couche de forme. Donc fondamentalement, c'est comme ça que j'ai créé cette mosquée de texte. Avant d'entrer dans les cercles, laissez-moi vous montrer la dissidence ci-dessous. Donc, nous avons la nourriture que nous avons cercle qui est 2020 et il a cette couleur Bluefield. Nous avons du café essentiellement le même cercle une fois de plus. Mais maintenant, il a cette couleur verte 55 d 466 et enfin même pour les bonbons. Donc, nous avons le cercle 2020 comme nous pouvons le voir et il est e 53 c 85 morts sont de couleur rouge maintenant pour ce texte. Alors de la nourriture, du café, des bonbons. Nous avons le sens ouvert, régulier à 20 ans. Donc c'est audacieux. C' est normal, et j'ai oublié de mentionner à l'intérieur de ce texte central. C' est la science ouverte 36 Bold, parce que je voulais la rendre juste un peu plus grand parce que c'est le principal point focal de ce graphique. Et enfin, nous avons cette mosquée de texte en bas. Donc, nous avons ouvert dit 20 régulier, ces trois textes. Et comme vous pouvez le voir, nous avons le rectangle, mosquées, la même mosquée que vous avez ici. On l'a juste ici. Mais je viens de déplacer ces trois textes sous la mosquée et dans l'état suivant, nous allons juste les placer à l'intérieur de la mosquée et les positionner au centre horizontalement. Donc si j'ai sauté ici, faisons un marché avec les cercles. Donc les cercles sont un peu plus compliqués, mais ils ne sont pas à craindre. Comme vous pouvez le voir, nous avons ce cercle principal comme vous l'avez rappelé. Il est à 50 par 2 15 Il a une bordure sans Phil et la taille de la bordure est de 20. Je veux dire, coup avec 20 et si je clique ici, vous pouvez voir que c'est le D. D. Donc c'est vraiment de couleur claire. Et comme vous pouvez le voir, je le positionne pour être dehors ou caresser autour de Kip et autour de l'articulation. Vous n'avez pas besoin de le faire, mais j'aime simplement parfois le faire parce que cela rend certaines choses beaucoup plus simples à travailler avec. Par exemple, les spots et vous pouvez double-cliquer sur ces points pour rendre les choses un peu plus simples. Maintenant, ce que j'ai fait ensuite, c'est que j'ai fait trois copies de ce cercle arrière, donc j'ai touché le contrôle D trois fois les orteils deviennent rouge, vert et bleu cercle. Donc, ils sont exactement les mêmes que ce cercle arrière. Mais ils sont en couleur, et je suis allé de l'avant et j'ai créé des mosquées pour chacun d'eux. Donc, si je clique sur celle-ci, vous pouvez voir à quoi ressemble cette mosquée. Alors je suis allé avec le centre. Donc, d'abord les choses comment j'ai créé ces lignes. Donc vous avez ces gars juste ici à votre gauche et à votre sommet. Donc, parce que je sais que c'est 800 par 800, je dois positionner mes guides à 400 par 400. Donc, pour être parfaitement au centre, hors de ce cercle, si haut fait cela Fondamentalement, vous venez de cliquer ici et de les déplacer à l'intérieur jusqu'à ce que vous voyez la même distance des deux côtés. Comme si vous pouvez le voir sur le dessus. Vous avez 400 par 400, vous pouvez faire la même chose pour celui-ci. Et évidemment, quand vous travaillez sur votre conception, comme vous pouvez le voir ici, c'est dans le moulin. Lorsque vous travaillez sur votre conception, vous avez remorqué. Calculez ces chiffres pour vous-même et votre projet particulier, mais pour cette présentation, c'est 400 par 400. Mais assurez-vous juste que vous positionnez ces guides au centre du cercle. C' est pour ça que tu dois t'inquiéter. Retournons à ces mosquées. Donc, en gros, Howard crée dans les mosquées. J' ai cliqué sur un clic crayon juste ici, donc quelque part en dehors du cercle, cliquez ici au milieu, puis cliquez ici en maintenant ma touche Maj. Donc, il suit cette ligne. Je crée, cliquez sur quelque chose ici, puis saute au centre et ensuite j'ai sélectionné dans le bleu et l'endroit, clic droit et mosquée avec forme. Et c'est comme ça que j'ai eu cette mosquée. Et vous verrez cette mosquée ressemblant à ça. Donc c'est essentiellement cette mosquée. Pour ce premier état, nous ne voulons pas voir la mosquée. Pour ce premier état, Alors, comment peut-on faire ça ? Nous pouvons simplement double-cliquer sur l'endroit, et c'est un peu plus difficile d'entrer dans cette partie parce qu'elle continue à sortir de lui tout le temps. Vous devez donc être très prudent et cliquer sur la pièce elle-même. Donc comme ça. Et une fois que vous sélectionnez le pot, vous pouvez simplement cliquer sur ce point par exemple, et simplement le déplacer juste ici. Vous pouvez cliquer sur les extrémités extérieures aller orteil, mosquer complètement la forme, et vous ne le verrez pas. Et cela ressemblera essentiellement à ceci. Donc, vous ne pouvez pas voir cette forme comme un média comme celui-ci. Et j'ai fait la même chose pour le 2e 1 Donc voici la Mosquée Verte. Donc, le bleu commence à partir d'ici. Ça se termine ici. Donc fondamentalement à quelque chose comme le centre, fondamentalement, ouais, donc 1/4 du cercle est le bleu et le vert vient après lui et parce que le dossier vert est dessous des mosquées bleues plus pleines dans ce cas. Alors imaginez cela comme un dossier. Donc, nous avons un dossier principal. Nous avons un dossier bleu vert et rouge un. Tous sont placés l'un en dessous de l'autre afin que nous puissions obtenir cet effet comme vous le voyez ici. Donc le bleu sort en premier. Le vert sort après et le rouge sort enfin, et j'ai positionné le bleu sur le dessus parce que c'est le premier vert est en dessous du coup parce qu'il sort deuxième et enfin le rouge est en dessous d'eux parce qu'il sort en premier. Maintenant, pour ces mosquées. Si vous sautez ici, vous pouvez voir à quoi ils ressemblent. Donc on me demande cette partie sur le vert, donc ils ont arrêté la partie et l'état de la partie inférieure comme il est. Donc, quand je clique quelque part à l'extérieur et que vous vous battez, cliquez sur le vert et augmenté l'opacité de celui-ci, vous pouvez voir à quoi il ressemble. Donc c'est essentiellement notre mosquée, donc elle couvre la partie bleue. Fondamentalement, il vient en dessous de la partie bleue et dans cette section vont juste étendre la mosquée. Donc, si je clique sur cette mosquée verte. Alors cercles mosquée verte. Vous pouvez voir à quoi ressemble cette mosquée. Donc, je suis passé de la disposition à la disposition, en utilisant la même méthode que je vous ai montrée pour le bleu. Ainsi, vous pouvez simplement sauter à l'intérieur de votre mosquée. Laisse-moi voir ce que c'est. Ici, c'est. Et je vous recommande de zoomer un peu plus près. Double-cliquez à l'intérieur pour que vous puissiez vraiment arriver à votre mosquée bien. Et comme vous pouvez le voir, ici c'est juste que je déplace ce point juste ici. Et si je saute dehors, voici à quoi ça ressemble. Donc c'est tout pour la Mosquée Verte et pour le masque rouge. En regardant rapidement, amenez cela à zéro opacité pour la Mosquée Rouge. J' ai fait exactement la même chose. Donc si je l'évoque tout le chemin, vous pouvez voir que ça commence à partir d'ici. Et c'est extrêmement petit, donc vous ne pouvez pas vraiment le voir. Si je clique dessus, vous pouvez voir que c'est fondamentalement une ligne parce que je le voulais et ils viennent juste ici. Donc ils se rencontrent à ce stade, donc si vous cliquez quelque part par ici, vous pouvez le voir. Mais si je l'élargis pour aller jusqu'au sommet. Vous pouvez voir maintenant à quoi ça ressemble maintenant. Le rouge est également à opacité nulle. Donc, vous ne pouvez pas le voir à cet état. Et le bleu, c'est 100 obésité parce qu'on l'a recueillie ici en haut. Donc, on l'a rejoint ici. Nous utilisons nos deux lignes. Vous pouvez donc imaginer que c'est la première ligne de la mosquée. Ceci est la deuxième ligne de la mosquée et vous avez deux points juste ici et juste ici vous pouvez cliquer sur ce début et simplement ramener à ici orteil effondrez-les et faire fondamentalement une seule lumière. Et c'est comme ça que j'ai créé ce bleu. C' est un peu compliqué, mais vous pouvez plonger un peu plus profondément dans ce fichier graphique xz, et vous pouvez sauter à l'intérieur si quelque chose n'est pas clair pour vous. Et sur ce suivant, j'ai inclus tous d'entre eux donc fondamentalement déplacé toutes les mosquées et, par exemple, pour cette verte, vous pouvez étendre cette mosquée pour entendre combien, si blanc ou dit que vous voulez parce que ça n'a vraiment pas d'importance parce qu'il est couvert par cette mosquée bleue disant va pour le rouge. Elle est couverte par la mosquée verte parce qu'elle est juste en dessous de la mosquée verte. Donc si j'avais l'habitude d'étendre ce vert pour entendre, il couvrira bien ce rouge et parce que nous abaissons l'opacité d'eux juste ici. Donc, si un saut à l'intérieur, vous pouvez voir que le vert est à zéro. Pay ville rouge est avec une opacité zéro qui lui donnera un certain temps jusqu'à ce que le ballon se remplit et ils vont commencer à apparaître et tout aura l'air lisse et propre. Maintenant pour le texte. J' ai tout mis en place. Donc si je saute à l'intérieur et que je te montre la mosquée de texte centrale, si un travail à côté de toi a concédé, j'ai déplacé ces deux zéros sur l'état du dollar le même et 98 vient juste de se mettre en position. Dire vaut pour cette mosquée en bas. Donc tous ces chiffres sont au centre horizontalement avec cette forme de mosquée, et finalement j'ai élargi les cercles orteils. Sentez-vous là-bas des endroits désignés, et c'est fondamentalement tout. Une fois que vous avez le coup de ça veut commencer. C' est vraiment assez simple de le faire, mais laissez-moi vous le montrer rapidement dans un cas supplémentaire. Alors frappons le contrôle en D et je vais tout supprimer. Et je vais juste sauter ici et voir mon cercle. Donc c'est 2 50 par 2 50 Laissez-moi frapper le contrôle C Hit Control V. Assurez-vous que c'est ça au centre, et je vais juste vous montrer comment créer celui-là. Appelons ça bleu et nous allons choisir le bleu pour les bordures. Trois c six f f comme ça. Et maintenant, je vais juste vous montrer comment créer ça. Alors cliquez ici, puis juste ici. Alors, juste ici. Cliquez quelque part ici et fermez-le. Comme ça. Maintenant, retirez la bordure. Inclure le film. Cela va être notre mosquée et sélectionner la mosquée et souffler Clic droit et la mosquée avec la forme . C' est fondamentalement ça. Maintenant, ça va être notre deuxième état. Donc ça va apparaître comme ça. Et dans le premier état, je vais juste double-cliquer sur la mosquée, vous consommez un peu plus près pour que vous puissiez cliquer dessus et ce que je vais faire est juste déplacer ce point jusqu'à ce qu'il rencontre avec cette lumière du milieu. Lorsque vous cliquez à l'extérieur, vous ne pouvez plus voir la couleur bleue. Donc, quand je saute dans le prototype cliquez appuyez pour entendre ou orteil animer Easy Now une seconde, et si nous cliquons sur l'aperçu, vous pouvez voir à quoi cela ressemble. Donc fondamentalement, imaginez juste ce processus et vous pouvez le répéter pour les trois. Assurez-vous simplement que le vert vient en dessous d'un bleu et le rouge est en dessous d'un vert, sorte qu'ils apparaissent comme une seule ligne. Alors supprimons ces deux-là et revenons aux pieds notre design original. Donc c'est fondamentalement tout pour le design. Cliquons ici. Frappe le prototype. Ce que je vais faire est fondamentalement le même que je vous ai montré. Appuyez sur ou pour animer vers le bas une note nette et facile. Une seconde quand je clique sur l'aperçu, vous pouvez voir ici que nous sommes à cet état vide. Donc, quand je clique, été va se remplir et parce qu'ils s'estompent de zéro, il semble bien avec cette sorte de facilité dans notre transition, et ce texte arrive bien ici, les deux en bas. Donc, vous pouvez voir que ça a l'air vraiment sympa. Et enfin, une fois de plus, c'est à ça que ça ressemble. Encore une fois, je vous encourage à consulter les tableaux, les œufs, les souillures, souillures orteils. Jouez avec ce fichier. Si vous avez trouvé quelque chose n'est pas correct ou trouvé, quelque chose n'est pas clair. Vous pouvez donc vraiment voir comment je les ai créés et comment vous pouvez les créer vous-même. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 60. Les graphiques Xd de fichier: dans cette vidéo. Je veux vous montrer les graphiques X'd fichier. J' ai donc mentionné ce fichier plusieurs fois tout au long de ces vidéos, en particulier dans cette section du cours, parce que la majorité hors, en particulier les jeunes designers, ont trouvé le cœur de ces graphiques à concevoir et difficile à comprendre. Mais ils ne le sont vraiment pas. Ils sont vraiment assez simples une fois que vous avez le coup sur eux et veut que vous en ayez conçu quelques-uns. Voici donc le dossier. Vous pouvez sauter à l'intérieur, vous pouvez vérifier n'importe quoi. Donc, par exemple, je veux voir comment cela s'anime. Vous pouvez cliquer sur ce premier notre tableau cliquez ici, puis vous pouvez cliquer entre eux et voir comment il s'anime. Et puis une fois que vous avez vu l'animation, vous pouvez sauter à l'intérieur. Cliquez ici sur le panneau des calques et vous pouvez vraiment sauter à l'intérieur et voir. Oh, OK, ça vaut des clients. Ce sont des lignes horizontales. Vous pouvez ouvrir cette grille de répétition. Vous pouvez cliquer sur la ligne et voir la taille, par exemple, et vous pouvez voir OK, c'est le bleu. Mais il a quelque chose comme ça. Donc quelque chose comme un Grady int vous pouvez cliquer, voyez ? C' est un ingrédient de lin. Il va de la ville blanche zéro salaire tout le chemin au bleu et vous pouvez voir que le bleu est sur dessus et le blanc est en bas. C' est comme ça que j'ai eu cet effet pour qu'il puisse vraiment sauter à l'intérieur et inspecter chaque élément que vous voyez ici. Et comme d'habitude, vous avez ma pleine permission d'utiliser ce fichier à la fois pour des projets personnels et commerciaux pour un nombre limité de clients. Donc, vous pouvez essentiellement copier ces couleurs. Copiez ces effets, copiez ces transitions et utilisez-les gratuitement dans votre travail. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 61. Chargeur: dans cette vidéo, je vais vous montrer ce spinner de chargement, et pendant qu'il se charge et tourne, ces points changent aussi. Alors commençons. Donc, arrêtez l'aéroport. 800 par 800. Et créons notre texte. Je vais taper un chargement, assurer que c'est un sens ouvert. Comme tout ce que nous avons créé dans la partition jusqu'à présent. Je vais le placer au milieu, et je vais créer mes trois points, dessiner un beau point pour des exemples. Je fais ça. Donc six par six et je vais sélectionner la couleur de la bordure. Retirez la couleur de bordure elle-même. Je vais les orteils Placez-le ici et placez-le, par exemple, du bas vers le haut. 12345 était dans ma touche flèche supérieure. Ensuite, je vais le positionner ici. Appuyez sur Maj et déplacez-le. 10 pixels à l'acte de contrôle frappé droit dupliqué et positionnez-le cinq. Puis atteler le contrôle. Décourager dupliqué une fois de plus et positionnez-le cinq juste ici. Ensuite, je vais aller aux pieds. Commandez-les comme ça. Donc ça va être le cercle un. Ça va être un cercle aussi. Et enfin, ça va être encerclé trois, comme ça va les déplacer en dessous, regrouper tout ensemble, Appeler ça texte. Donc, et je vais le positionner ici et ici pour être parfaitement au centre. Ensuite, nous allons créer notre cercle, donc je vais le créer comme 2 50 avec 2 50 comme Donc je vais lui donner une couleur de bordure DDT comme ça et enlever le film. Je vais orteil utilisé la taille de course off 20 et je vais la position des orteils dans le centre comme Donc prochaine, je vais cliquer sur le centre, course autour Kip et autour de l'articulation, et vous verrez pourquoi dans une seconde je vais m'assurer C'est parfaitement au centre, et je vais rappeler celui-là. Je vais obtenir le contrôle de dupliqué, et je vais orteil appeler ce spinner comme si je vais cliquer sur la couleur de la bordure. Assurez-vous que c'est trois e c six f dur comme ça, et nous pouvons maintenant retirer le dos. Donc je vais juste le cacher pour l'instant. Ensuite, je vais double-cliquer ici pour entrer dans le mode d'édition. Je vais sélectionner ces deux points ici. Maintenez mon ancienne touche et appuyez sur Supprimer. C' est pourquoi je vais supprimer ces points et ensuite sur aller simplement sélectionner ces deux frapper supprimer. Et maintenant, je viens d'avoir cette forme suivante, je vais ramener le dos et je vais le revoir si pâteux, jusqu' à zéro, à zéro, je vais sélectionner Thies pour frapper le contrôle G pour les regrouper et appeler celui-ci par exemple, Spinner Et c'est tout pour notre premier état. Pour nos deuxième états, je vais obtenir le contrôle de dupliquer ce sont ennuyés. Je vais sélectionner le spinner Cliquez ici. Entrez 3 60% et je vais sauter à l'intérieur du texte et faire quelques modifications. Donc je vais frapper, contrôler, cliquer et sélectionner ces deux, et je vais les faire tourner comme ça. Et vous vous souvenez de cet effet ? Si vous regardez les leçons précédentes, je vais frapper le contrôle une fois de plus pour créer 1/3 1 Je veux dire, va m'assurer qu'il est à 3 60 une fois de plus et enfin je vais sélectionner ces deux maintenant et je vais les faire tourner orteil en utilisant mon touche shift comme ça et c'est fondamentalement pour l'effet entier. Comme vite. Allez-y et vérifiez. Si les vieux Fullers sont proches, ils le sont. Et c'est maintenant le moment du prototype. Je vais cliquer sur un prototype traîné bougie bleue, utiliser le temps utilisé auto animate pour la transition, est en dehors et une seconde maintenant pour le 2ème 1 et va juste utiliser exactement les mêmes paramètres . Et pour le 3ème 1, ramenons-le au devant comme si nous allons utiliser la transition temporelle et nous pouvons utiliser Dissolution. Facile maintenant dans la durée va être zéro seconde, monsieur. Contacter le centre du sein double 0.0 et vous allez obtenir ce zéro seconde. Maintenant quoi ? Ce qu'il ramène de cet effet jusqu'au début. Donc les points vont changer ici. Ça va tourner. Les points vont changer ici aussi va passer un temps de plus et puis avec le retard, zéro seconde, zéro seconde, je veux dire la durée de zéro seconde. Il reviendra directement à celui-ci, puis recommencez tout. Alors nous allons prévisualiser. C' est comme la première fois que vous cliquez ici et vous pouvez voir qu'il commence à tourner, et ces points changent aussi. Maintenant, vous pouvez le laisser comme si vous voulez. Mais vous pouvez, par exemple, créer un autre et créer un rectangle de médecin bleu au milieu. Par exemple, qu'il soit dans les trois à opacité zéro, puis qu'il soit vraiment petit comme un pixel par un pixel à une opacité nulle. Et puis dans ce dernier, quand il commence un stop spin, ce spinner et le texte vont disparaître à zéro et ce bleu va s'agrandir pour remplir tout notre port. Ensuite, vous pouvez passer de cette façon à votre écran suivant. Donc, de l'écran de chargement a pris l'écran suivant en utilisant cette couleur bleue. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 62. Flipp de la carte: dans cette vidéo, je vais vous montrer comment créer ce flip de produit de carte. Donc, nous avons ce produit ici, et quand l'utilisateur veut cliquer pour en savoir plus, il retournera et révélera un peu plus d'informations. Et puis nous avons cette flèche arrière. Donc, lorsque vous cliquez dessus, il retournera à la carte d'origine. Alors commençons. Donc voici les orteils sont des oiseaux hors 800 par 800 un design fini. Mais laissez-moi vous montrer rapidement comment créer ces chaussures. Donc ces deux chaussures sont P et G, ce qui signifie que ces images ont des arrière-plans transparents. Laisse-le qu'on puisse tirer ces images si je zoomes juste un peu ? Ce sont en fait mes chaussures, donc je rencontre quelques photos d'eux et les coupe en utilisant la boutique photo. Comme vous pouvez le voir, ils ne sont pas de qualité studio, mais ils le feront pour cette vidéo. Je vais simplement apporter cette image à l'intérieur. Je vais ici, mais pas à l'intérieur de la carte, mais juste ici dans la carte un. Laisse-moi le faire encore une fois. Je le ramènerai tout le chemin dehors, comme ça. Donc c'est maintenant dehors dans le sport payant. Je vais cliquer sur la carte et ensuite apporter l'image à l'intérieur. Donc, comme vous pouvez le voir, c'est dans la carte, et je vais simplement tenir ma touche Maj et abaisser la taille de cette image. Zoom un peu plus près, par exemple, de quelque part ici. Voyons voir. Assurez-vous qu'il est au milieu de ce cercle ainsi que de cette carte, et je vais faire la même chose pour l'image numéro deux. Donc, je vais cliquer dessus le positionner Dragon en place comme si je peux même le faire pivoter un peu. Donc, par exemple, comme ceci, assurez-vous qu'il est au milieu et, par exemple, positionnez-le quelque part ici. Assurez-vous que lorsque vous coupez vos P G que vous n'avez pas l'espace excédentaire, surtout dans cette image, sorte que vous pouvez imaginer que toute votre image originale était cette stalle. Donc, jusqu'ici, par exemple, lorsque vous découpez, assurez-vous de le découper jusqu'ici afin que vous n'ayez pas accès à l'espace gaspillé essentiellement autour cette image. Maintenant que je l'ai fait, comme je pourrais vous le montrer dans le design original. J' ai donc la carte. Et comme vous avez vu les images juste en dessous, nous avons le cercle, qui est de 2 30 par 2 30 Et il a cette couleur sur un sept, un 578 et Holly a obtenu cette couleur est que je l'ai simplement échantillonné à partir de ces lettres ici sur le tirer ci-dessous que nous avons le nom du produit qui est ouvert depuis 20 Bolt et en dessous de ce sens ouvert 20 irrégulier. Nous avons juste la description de base sur le produit. Enfin, nous avons le fond, qui est à 3 50 avec 70 et en savoir plus est ouvert, dit 20 régulier et blanc. Enfin, nous avons ce contexte. C' est un rayon d'angle blanc sur 20 et on a cette ombre. Donc, une fois de plus, tout zéro si vieux noir ombre 16%. Mais maintenant nous l'avons à cinq et large axe x y et ce flou off 20 donc il va juste un peu plus loin à l'extérieur. Donc c'est notre carte numéro un. Et quant à la voiture numéro deux va, laissez-moi vérifier chaque semaine. Si ce cercle est de la même couleur que celui-ci, il devrait l'être. Il l'est. Nous avons donc cette flèche sur le dessus et vous avez vu cette flèche dans les vidéos précédentes. Et il suffit de le positionner ici. Nous avons le même cercle. Nous avons la chaussure et enfin nous avons le texte du paragraphe juste ici. Si vous ne savez pas comment obtenir le paragraphe, vous pouvez simplement cliquer sur le texte. Cliquez quelque part ici, par exemple. Maintenez le clic gauche de la souris, puis faites glisser la zone dans laquelle vous voulez taper votre texte . Le texte lui-même. Je l'ai pris à partir du site officiel d'Adidas pour cette page de produit, donc je l'ai juste basé aperçu, et c'est fondamentalement pour le texte. Maintenant passons à autre chose et je vais vous montrer comment concevoir cet effet de flip de carte et une dernière chose que j'ai oublié de mentionner. Comme vous pouvez le voir, nous n'avons pas la couleur blanche pour notre port, mais plutôt cette couleur gris clair, qui est encore une fois, DDT. Je voulais juste apporter la carte un peu en avant afin que vous puissiez voir à quoi il ressemble maintenant pour cet effet orteil fonctionne correctement, nous devons faire quelques changements. Donc, le premier changement est que je vais juste faire un duplicata sur ce fond, et je vais le faire glisser dehors quelque part par ici. Et puis je vais sélectionner la carte, cliquez sur ce BG Original et supprimer l'ombre comme Tell et je vais faire la même chose pour la voiture à contrôler le pour dupliquer le BG. Faites glisser le vers l'extérieur pour entendre, déplacez-le ci-dessous et retirez l'ombre de l'arrière-plan original comme So Now pourquoi nous avons fait cela est que nous avons besoin d'exporter ces dessins comme étant jus, sorte que des images avec transparence afin que nous puissions les ramener à ce design original. Et je vais vous montrer comment dans une seconde afin que vous puissiez cliquer sur ce 1er 1 Donc Karlan frappé contrôle E ou commandant jus PNG. Dans ce menu déroulant, vous pouvez utiliser la conception. Assurez-vous que les paramètres d'exportation sont très souhaités. Cette image est dans mon cas, c'est juste le bureau et je vais cliquer sur exporter et il va exporter cette carte comme une image PNG sans l'ombre parce que cette copie d'arrière-plan a l'ombre et nous ne voulons pas que celle-ci ait une ombre, donc je vais faire la même chose pour la voiture à si juste sélectionné contrôle de frappe E. Et je vais orteil exporter une fois de plus sur mon bureau comme une jeep d'être transparent. Maintenant ce qu'on va faire, c'est qu'on va cacher la carte et la voiture, je vais en faire une copie pour vous assurer que vous sachiez laquelle est laquelle. Donc, je vais sélectionner ces deux et simplement les déplacer un peu et vont orteil faire une copie de cette carte un aussi bien. Je vais ramener ça un peu. Assurez-vous d'avoir le même espacement entre eux. Donc c'est 70 comme ça. Donc encore une fois, d sont encore la carte numéro un. Et ces deux sont la carte numéro deux, et vous pouvez vérifier et voir par vous-même. C' est la voiture numéro un dans la voiture numéro 2. Maintenant, ce que vous allez faire, c'est qu'on va apporter ces images. Donc, pour la carte numéro un, je vais la sélectionner ici. Je vais apporter la voiture numéro un et simplement la faire glisser et la déposer quelque part par ici. Je vais le positionner en place, et vous pouvez cliquer ici et juste ici pour vous assurer qu'il est dans la position. Ensuite, je vais frapper le contrôle. C. Cliquez ici, appuyez sur le contrôle V coller dans et ils vont orteils. Bougez-le juste un peu. Donc, il vient en dessous de ce dossier. Maintenant, cette partie n'a pas vraiment d'importance, mais j'aime organiser mes couches. Maintenant, faisons vite ça pour la voiture numéro deux, donc je vais le faire glisser à partir de mon bureau, positionner en place, assurez-vous qu'il est au milieu et faire la même chose pour celle-ci, alors assurez-vous qu'il est au milieu comme Eh bien. Maintenant, comme vous pouvez le voir, nous avons maintenant des doublons, et c'est important à avoir, et je vais vous montrer pourquoi dans une seconde. Donc, pour faire basculer cette voiture, ce que nous devons faire, c'est de fausser cette image. C' est pourquoi je l'ai exporté en tant qu'image en PNG, parce que pour le fausser en tant que design dans Adobe X'd, c'est vraiment difficile à faire, et vous allez avoir ces effets bizarres. Donc, par exemple, cette chaussure n'aura pas l'air correcte. Ce cercle va sembler bizarre, surtout le texte et ainsi de suite. Il est donc très facile d'exporter les orteils. Il s P et G et ensuite travailler avec des images PNG. Donc pour ces copies, donc les deuxièmes copies de chacune, ce que nous allons faire, c'est d'en faire un. Donc, comme vous pouvez le voir maintenant, l'esprit est 445 Donc je vais orteil réellement frapper un juste ici, appuyez sur Entrée sur mon clavier. Et si vous obtenez ce genre d'effet bizarre, cela signifie que vous avez remorqué déverrouiller cet aspect. Donc, je vais cliquer ici pour le verrouiller. Je vais frapper un orteil maintenant. Et comme vous pouvez le voir, hauteur reste maintenant à 671 comme il devrait cliquer sur le BG et faire de même. Alors appuyez sur un et assurez-vous de les sélectionner tous les deux et assurez-vous qu'ils sont au milieu comme ça. Ou vous pouvez simplement le positionner comme celui-ci un par un S'ils ne veulent pas se comporter correctement et enfin réduire l'opacité de la carte numéro 120 comme ça, et laisser l'obésité hors BG à 100 parce qu'il devrait rester comme ça suivant. On va faire la même chose pour cette carte aussi. Donc, je vais juste aller aux pieds. Commandez-les comme je l'ai fait pour la carte. Un si sélectionné. Assurez-vous qu'il est verrouillé. Cliquez sur un et faites de même pour le BG. Alors il veut. Comme si déplacer le VG au centre, déplacer la carte au centre et c'est fondamentalement tout pour notre conception. Maintenant, commençons le prototypage. Et comme tu l'as vu, j'ai laissé les cartes à l'intérieur. Donc, à tout moment, si vous souhaitez faire des changements, vous pouvez sauter à l'intérieur. Changer le choléra comme inclure de nouvelles images et quelqu'un. Assurez-vous simplement que si vous voulez présenter vos conceptions votre client dans cet effet, assurez-vous de l'exporter. SPG Alors ramène-le comme ça. Et puis vous pouvez cacher le design original et ensuite faire le design. Ensuite, faites le prototype une fois de plus. Donc, pour le prototype lui-même, je vais cliquer quelque part. Donc sur cette carte, je vais la glisser pour vous entendre marcher ou orteil. Ennemi assouplissement et 0.4 secondes Maintenant sur celui-ci, nous allons utiliser le temps comme si auto animate facile maintenant 0.4, et sur celui-ci parce qu'il va retourner à partir d'ici. Orteil ça. Nous allons utiliser cette flèche arrière, alors appuyez ou pour animer Easy. Maintenant 0.4 seconde et enfin, sur celui-ci, nous allons utiliser le temps une fois de plus. Alors vérifions ça. Voyez à quoi ça ressemble. Donc, comme vous pouvez le voir , voici notre carte. Je vais cliquer ici va retourner et biaiser, puis nous montrer cette information. Et quand je clique ici, il va retourner et afficher la désinformation une fois de plus. Donc, ce n'est pas une carte parfaite, mais ça lui donne cette sorte d'illusion de retourner et de révéler ensuite. Et cette carte suivante. Donc, cela fonctionne vraiment très bien, surtout si vous avez des couleurs d'arrière-plan cohérentes. Donc, il a l'air vraiment bien, mais je pense qu'elle pour les entrailles orteils plus bas. Vous payez City de ça ici ? Ouais, alors faisons-le encore une fois, comme ça et maintenant ça a l'air beaucoup plus propre. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 63. Défilement d'article: dans cette vidéo, nous allons créer cet article et dans cet article aidera le curseur. Donc, en un clic et faites glisser le curseur vers le bas, vous pouvez voir que le texte se déplace vers le bas, et quand je clique et ramène vers le haut, vous pouvez voir qu'il le ramène vers le haut. Et vous pouvez le faire pour illustrer, évidemment à vos clients comment certains articles sur la page pourraient ressembler. Et vous pouvez également illustrer cela à l'intérieur des points d'accès mobiles en créant la gâchette de glissement, qui imitera la gâchette de glissement avec votre doigt que vous faites réellement sur votre téléphone mobile . Alors commençons. Très bien, donc celui-ci est super facile à créer, et tout ce que vous avez à faire est de créer un espace réservé d'image afin que vous puissiez utiliser un rectangle pour dessiner juste sont beaux gros rectangle. Retirez la bordure et faites simplement glisser l'image à l'intérieur. Et une fois que vous l'avez fait, vous pouvez double-cliquer sur cette image, puis la positionner. Mais vous voulez à l'intérieur de ce porte-image de police. Ensuite, vous pouvez renommer l'image comme je l'ai fait ici, et mes dimensions sont 800 par 300 parce que mon port est 800 par 800 dans ce cas. Donc, il vous donne ce beau grand rectangle de bruyère. Ensuite, nous avons créé l'ombre. Donc, pour l'ombre, j'utilise 000 si plein noir, mais cette fois à 10% de base ity parce que je l'ai trouvé 16. C' est juste un peu trop. En outre, j'utilise zéro pour l'ex 10 40 y et floue 10 aussi bien pour obtenir cette belle ombre. Ensuite, j'ai créé le texte. Donc pour le texte, j'ai des montagnes au large de la Norvège, qui est le texte de titre d'art ouvert Sands 30 boulon et il est aligné à gauche. Je le positionne à 40 pixels de ce bord gauche et j'ai créé ce texte de paragraphe que vous avez vu dans certaines des vidéos précédentes. Comment vous pouvez créer quoi ? Laissez-moi vous montrer une fois de plus afin que je puisse contrôler DE pour dupliquer cela, et je vais rapidement supprimer tous ces éléments sur la page. Je vais juste faire glisser un joli rectangle, quelque chose comme ça ou un joli carré pour le texte et taper juste quelques lettres. Je vais cliquer à l'extérieur pour obtenir cette sélection, et vous pouvez la positionner comme. Donc, comme n'importe quel autre élément à l'intérieur de l'aéroport, et j'utilise une prise. La prise est gratuite. Beaucoup d'Epsom. Il fait froid. Et si vous ne savez pas comment installer la fiche une fois que vous cliquez ici dans le panneau de la fiche INS , vous avez ce signe plus, vous pouvez cliquer dessus et vous pouvez cliquer ici pour rechercher. Vous pouvez taper Lauren Gypsum et il suffit de cliquer sur installer, et une fois que vous l'avez fait, il apparaîtra juste ici. Donc, vous devez faire est de créer ce calque de texte, puis sélectionné clic charge de gypse rempli de texte d'espace réservé, et vous pouvez utiliser n'importe lequel de ces options. J' utilise ce Cicero anglais et cliquez sur insérer du texte. C' est ça. Il va insérer les piles joliment dans ce cadre de sélection, et vous avez ce joli paragraphe que vous pouvez jouer avec. Ensuite, je vais vous montrer comment créer ce curseur. Donc tout ce que j'ai fait, c'est que j'ai créé ces deux formes, donc cette forme d'arrière-plan n'est qu'un rectangle simple. 12 est l'esprit pour 44 pour la hauteur, et il va en taille et en hauteur avec ce titre de montagnes au large de la Norvège. Donc ça va jusqu'ici et ça va au hasard jusqu'ici. Mais vous pouvez, bien sûr, être plus précis si vous le souhaitez. Et enfin, j'ai le curseur, qui est que je viens de dupliquer. Cet arrière-plan a créé ce briquet et la hauteur est à 60 et la couleur est 70 70 70 70 tandis que la couleur de fond est D dd. Donc c'est fondamentalement tout pour tout le design. Vous pouvez voir à quel point c'est vraiment simple. Et pour ce paragraphe, tout ce que j'ai fait, c'est que je l'ai étendu jusqu'ici, et j'ai simplement sélectionné dans la partie avec du texte parce que beaucoup de membres qui se sont terminés ici , vous pouvez sélectionner cette partie du texte touche le contrôle C et puis appuyez sur l'espace, puis contrôlez le contrôle V V. On fait quelques copies de plus en bas de la ligne, et c'est fondamentalement tout maintenant pour ce deuxième état de sexe. Ce que j'ai fait, c'est que j'ai déplacé ce curseur jusqu'à cette image de partie. Je l'ai déplacé le texte jusqu'ici, et le titre va jusqu'ici. Mais si vous vous souvenez des vidéos précédentes. Si vous faites un groupe comme je l'ai fait pour le texte, il sera contenu dans l'aéroport. Il n'ira pas au rythme plus parce que si les montagnes de la Norvège étaient à l'extérieur de ce groupe de texte , par exemple, il ira au passeport et l'animation ne fonctionnerait pas. Tout ce que vous avez à faire maintenant est de le prototype afin que je puisse cliquer sur ce curseur, faire glisser la poignée. Je vais utiliser drag, auto, anime, easing out, easing out, et enfin faire la même chose pour celui-ci si sélectionné d'ici, et simplement le faire glisser en arrière et il contiendra le même effet à l'intérieur. Donc, quand j'appuie sur l'aperçu, vous pouvez voir à quoi il ressemble, et vous pouvez aller aussi lentement que vous le souhaitez pour imiter cette expérience de lecture d'article, ou vous pouvez aller aussi vite que vous le souhaitez. Ça n'a vraiment pas d'importance, et c'est vraiment à toi de décider. Vous pouvez, bien sûr, ajouter quelques effets supplémentaires. Ainsi, par exemple, vous pouvez apporter le temps. Donc, quand cet article a été publié, vous pouvez apporter l'eau pour que nous puissions la mettre ici. Et vous pouvez bien sûr, glissé cette image pour le faire paraître effet de parallaxe de sorte que vous pouvez le rendre plus petit à ce stade, ou vous pouvez le rendre encore plus grand qu'il n'est ici. C' est vraiment à vous de décider, et vous ne pouvez pas mettre tous ces détails en évidence avec votre article. Et vous pouvez, bien sûr, par exemple, apporter un bouton, qui était contenu juste en dessous de ce texte et quand ils cliquent sur le bouton juste là. Ils ont condamné, par exemple, partagé cet article ou passer à un autre article ou revenir à la page d'accueil ou quelle que soit l'option. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 64. Slider de valeur: dans cette vidéo, je vais vous montrer comment nous pouvons créer ce curseur de valeur. Donc, quand je clique sur cette flèche, elle retournera et toutes ces autres options vont s'enclencher en position. Ensuite, je peux changer dans ces valeurs et me déplacer autour de ces curseurs et je peux les ramener à leurs positions d'origine et un et terminé. Je peux frapper ici pour le ramener. Alors commençons. Donc, ce que j'ai ici, c'est le design fini et toutes ces planches sont à 800 par 800 fuites. Vérifiez rapidement celui-ci, qui est étendu, et j'arriverai à celui-ci qui s'est effondré. Donc, voici à quoi ils ressemblent donc si je clique ici, vous pouvez voir toutes ces couches à l'intérieur. Mais disséquons celui-là, parce que tous sont exactement les mêmes. Donc voici des alarmes et des appels de sonnerie en bas. Donc, si vous ouvrez la sonnerie, voici à quoi ça ressemble. Donc nous avons cette flèche juste ici, qui est juste une icône étroite, et ensuite nous avons ces icônes juste ici. Maintenant celui-ci est l'icône de la sonnerie suivante, nous avons le texte de la sonnerie qui est ouvert depuis 25 dans ce cas, et 70 70 70 pour la couleur. Et enfin, nous avons BG pour l'arrière-plan maintenant pour le curseur déjà montré cela dans l'un des exemples précédents, nous avons le cercle qui se sent avec la couleur blanche, pas d'ombre de bordure. Donc ombre noire par défaut 16%. Et dans ce cas, les valeurs sont deux expositions à la position Y et 10 pour le flou. Et c'est comme ça que j'ai eu cet effet de flou pour l'arrière-plan ci-dessous que nous avons la mosquée. Donc c'est la même mosquée comme déjà vous montrer dans le nombre de vidéos précédentes et vous pouvez voir que je bouge ce légèrement orteil ici. Et si je veux, je peux simplement ramener ici. Cliquez à l'extérieur, puis il n'y a pas de mosquée du tout. Et évidemment, ce cercle suivra à gauche et à droite, et vous pouvez simplement maintenir le décalage et le déplacer en position. Et enfin, ce que nous avons ici est vide, qui est juste cette couche de fond gris clair, et c'est au DDT. Couleur maintenant pour les tailles. L' arrière-plan est 700 avec 1 28 et ce curseur vide est 5 20 à 12 pieds de hauteur et la mosquée et la couche remplie, évidemment très que vous le déplacez le long de Circle est 30 par Turney, et c'est fondamentalement tout pour la mise en place. Maintenant, j'ai créé tous ces copieux juste ci-dessous changer le texte et les icônes pour correspondre aux valeurs en question. Et enfin, cette flèche va tourner. Donc, si vous voyez ici, il pointe vers le haut et dans le premier exemple pointe vers le bas. Maintenant, en ce qui concerne le prototypage, partie va, ce que vous avez à faire c'est dans ce premier cas, je viens de les déplacer. Donc tous les trois d'entre eux, je les ai sélectionnés, les déplacer en place avec celui-ci et plus bas. Vous payez City 20 dans celui-ci ? Ils vont dépenser les pieds avec 20 pixels les uns entre les autres. Juste ici. C' est l'espacement. Et l'opacité est évidemment 100 parce qu'ils vont se mettre en position suivante. Je viens de créer trois copies de plus pour ces trois curseurs. J' ai donc déplacé ce 1er 1 puis j'ai déplacé le 2ème 1 et finalement déplacé le remué jusqu' à 100% sur la position. Et enfin, lorsque vous le prototype, vous pouvez le ramener à sa position d'origine. Donc ça ira d'ici, Tohir. Et puis vous pouvez déplacer ces briquets vers le bas en position. Maintenant, pour un prototype en partie, si je clique sur un prototype, vous pouvez voir ce que j'ai fait. Donc, j'ai cliqué sur cette flèche pour aller à cette seconde notre port j'ai utilisé tapoter aussi animer et enclencher en position. Et 0,4 seconde était la durée. Et quand vous cliquez sur la flèche pour revenir en arrière, je l'ai un peu changé. J' ai donc utilisé exactement les mêmes paramètres ici. Mais j'ai utilisé facilité et 0.2 secondes parce que je voulais qu'il facilite l'écriture plutôt que claquer et pour la durée, Toby un peu plus court. Donc, au lieu de zéro point pour elle 0.2 parce que je voulais qu'il revienne un peu plus vite. Donc, si je clique sur l'aperçu, vous pouvez le voir. Donc nous avons ces à l'arrière et nous avons cliqué pour qu'ils se mettent en position. Vous pouvez également utiliser snap, mais il ira juste au-dessus du bord d'arrêt juste un peu, et vous pouvez voir ce genre d'effet fantôme C'est pourquoi j'ai utilisé est sorti et 0.2. Donc vous ne voyez pas cet effet maintenant pour ces curseurs ? Ce que j'ai fait est, par exemple, j'ai cliqué sur ce point et le déplacer orteil ce notre port et pour cela nous avons utilisé drag auto animates et est en dehors parce que je voulais faciliter et faciliter l'animation. Et fondamentalement, j'ai fait exactement la même chose pour tous ces repos hors des points et de nos planches. Donc, comme vous pouvez le voir, nous avons exactement la même configuration pour celui-ci et pour celui-ci, et je suis retourné pour chacun d'eux pour les ramener à son endroit d'origine en utilisant exactement les mêmes paramètres. Donc, si je clique sur le 1er 1 clic aperçu et je vais l'agrandir un peu. Et j'ai inclus dans cet arrière-plan léger pour l'aéroport lui-même parce que je voulais que cela se démarque juste un peu mieux parce que vous pouvez les trouver dans vos appareils mobiles, par exemple, et ont généralement des arrière-plans flous. Donc, ces arrière-plans blancs des éléments eux-mêmes vont sauter un peu mieux sur ce fond bleu donc quand vous cliquez dessus, il va se développer. Tu tolères l'effondrer si tu veux. Et la flèche va tourner, évidemment. Et vous pouvez déplacer ces curseurs et les mosquées suivront parce que je viens d'étendre les mosquées jusqu'ici et de déplacer les cercles afin que vous puissiez les ramener à leur position d'origine. Et vous pouvez, bien sûr, jouer avec. Tu peux aller jusqu'à zéro, mais je voulais juste te montrer comment tu peux le créer de cette façon. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 65. Recherche: dans cette vidéo, je vais vous montrer comment vous pouvez animer le champ de recherche. Donc, lorsque vous cliquez ici, il va étendre le type à Paris, et ces cartes voleront par le haut. Alors commençons. Donc, j'ai ceci pour nos ports juste ici, et tous sont à 800 par 800 Je vais rapidement passer à travers avec vous sur la conception. Donc, ce que nous avons ici, c'est le texte. Donc, la recherche de quoi que ce soit est ouvert depuis 20 régulier, et nous avons la recherche, qui est juste au-dessus de la recherche pour n'importe quoi. Texte, parce que dans ce prochain notre port, il va orteil étendre et couvrir sur la recherche de n'importe quoi et pour elle. Je ne l'ai pas créé en utilisant une lèvre encore, mais j'ai créé en utilisant le rectangle pour aussi, si un clic sur l'entrée, vous pouvez voir que le rayon de coin est 100 corps combat inférieur à 20 Vous pouvez voir que c'est juste un rectangle de base. Ce que cela nous permettra de faire, c'est que nous pouvons alors créer ce rectangle élargi, et il va avoir ce beau grand rayon de coin pour indiquer qu'il est en expansion à partir du cercle. Vous pouvez y parvenir également, en utilisant le rectangle comme élément séparé, puis dans Mettre à l'intérieur au-dessus de la mosquée, puis développez le masque vers la gauche. Mais j'ai trouvé cela pour être juste un peu fastidieux, et c'est juste super simple à créer. Quant à l'icône de recherche, ce n'est pas vraiment une icône, mais un cercle et la ligne, et cette ligne est un vous pouvez voir 70 17 et un pour l'esprit pour le champ. C' est à 70 70 et ce cercle est le même, mais c'est un 23 23 pour indiquer cette icône de recherche maintenant dans cet écran suivant, comme vous pouvez le voir ici avec fait quelques changements majeurs. Donc, pour la ligne, comme vous pouvez le voir, Circle est maintenant à l'opacité zéro sur cette prochaine, notre port pour la ligne sont tournés. 45 degrés est vous pouvez voir qu'il est juste ici à 45 degrés moins 45 et juste ici, si je clique dessus, c' est à zéro. Mais sa taille a également augmenté de 17 orteils Turley, comme vous pouvez le voir ici, et je le positionne Toby au milieu horizontalement avec ce champ de recherche afin qu'il tourne juste ici. Il bouge tout le chemin juste ici à gauche, et il va augmenter en taille ainsi de 17 avocats et ce cercle va disparaître tous ensemble. Maintenant, encore une fois, je veux juste mentionner que vous avez cet exemple dans votre fichier X d'effets afin que vous puissiez le vérifier à tout moment si quelque chose n'est pas clair pendant cette vidéo. Donc, comme je l'ai dit, ce champ va dépenser dans la recherche de couverture pour tout ce qui est maintenant dans cette prochaine recherche de ports portant quoi que ce soit est toujours à 100 opacité, mais vous pouvez l'abaisser à zéro si vous voulez, pour rendre cet effet encore plus petit. Mais je ne l'ai pas fait parce que nous avons cette couleur d'arrière-plan et c'est la même couleur que pour recherche de tout texte. Et de cette façon, il se fond bien avec ce fond, et cette sensation de recherche a aussi l'ombre. Donc, si je clique sur l'entrée, vous pouvez voir l'ombre il 05 10 même couleur, donc plein noir et 16% 40 opacité. Donc, comme vous pouvez voir juste une ombre régulière de base et il va se développer et couvrir ici . Ce que nous avons ensuite, ce sont les mosquées de texte. Donc si je saute à l'intérieur, je vais juste cacher ça une seconde. Ce que nous avons pour la mosquée est exactement de la même manière, comme je vous ai montré dans plusieurs vidéos. Tout au long de ce cours, nous avons le texte. Nous avons la mosquée, donc c'est essentiellement une forme au-dessus d'un texte. Vous pouvez les sélectionner, faire clic droit sur la mosquée avec la forme, puis déplacer simplement cette mosquée pour masquer le texte au début. État de votre animation et enfin nous avons les cartes. Mais couvrons-les. Nous allons d'abord la couleur de couverture trop parce que notre carte est 800 par 800 cette couleur de fond est trop exactement les mêmes dimensions, donc 800 par 800 et que cette opacité de premier état est abaissée à 0%. Donc, lorsque l'utilisateur clique, champ de recherche va augmenter le 100 comme vous pouvez le voir ici pendant que tout le reste se passe. Maintenant, allons chercher les cartes. Donc, si je saute ici, les cartes sont fondamentalement un seul élément. Donc, si je vous ai montré, il est juste rectangle régulier avec le rayon de 20 coins Taille est de 3 40 avec 235 et j'ai 40 pixels entre les deux. Chacun d'eux. Juste un bel espacement. Donc 40 d'ici. Ici, ici. Et vous pouvez ajouter un peu plus ici si vous voulez inclure le geste de glissement à partir de celui-ci aussi. Mais je ne voulais pas l'inclure pour le moment. Maintenant, enfin, parce que les utilisateurs tapent à Paris, comme vous pouvez le voir ici, cette ligne se déplace. Donc à partir d'ici, en révélant le texte, il se déplace vers ici et il reste là dans cette finale notre port, et parce qu'ils tapent à Paris, va cracher tous les résultats de Paris, comme vous pouvez le voir ici, dans l'ordre chronologique. Il y a trois minutes, il y a six minutes, il y a neuf minutes et il y a 13 minutes. Maintenant, si je saute à l'intérieur et que je clique dessus, vous pouvez voir trois minutes open sense 10 regular et un out in Paris open sense à n'importe quel régulier. J' ai juste double-cliqué à l'intérieur, sélectionné cette partie du texte, cliquez sur la couleur et ajouté la couleur bleue, qui est encore une fois trois e. C six f f. Donc c'est comme ça que j'ai créé cela. Quant à l'image, au lieu de lui donner un rayon de coin de 20 tout autour, je lui ai donné un rayon de coin de 20 vers le coin supérieur gauche et le coin supérieur droit, tandis que le coin inférieur gauche et le coin inférieur droit sont à un rayon de coin zéro. C' est pourquoi nous avons cette ligne droite qui traverse. L' étape suivante était juste d'inclure une image, et toutes ces images sont gratuites. Et d'un point de splash com, c'est fondamentalement tout. C' est les employés de la Maison pour créer ce design. Et pour cet état, j'ai juste quand j'ai fait ça, j'en ai fait une copie. Et dans celui-ci original que j'ai créé, laisse-moi inclure que tu rembourses la ville. Je viens de déplacer ces cartes hors du chemin et de les déplacer pour que vous puissiez les déplacer comme vous le souhaitez. Je l'ai fait comme ça. Donc ils viennent de haut en bas. Tu peux le faire dans l'autre sens comme s'ils venaient de bas en haut. Ou vous pouvez peut-être inclure deux de ceux-ci sur la gauche pour aller sur la gauche, deux d'entre eux sur la droite pour aller à droite et dans cet écran ils viennent deux côtés et se rencontrent au milieu à ce point juste ici. Mais ce qui est crucial est une fois que vous avez créé toutes ces cartes dans votre dernier port pour en faire une copie et les dupliquer et les coller essentiellement dans tous vos autres tableaux. Donc quand j'ai fait ça, je vais au-dessus de l'Apace City 20 détesté le contrôle C et les basé dans exactement les mêmes endroits sur tous ces autres ports. Et c'est fondamentalement tout pour le design. C' est super simple, super simple, donc il suffit d'étendre ce cercle Togo au rectangle. Déplacez cette ligne pour passer de 45 degrés à 90 degrés, augmentez-la en hauteur de 17 à 30 puis simplement lorsque les utilisateurs commenceront à taper, elle révélera le texte de Paris, et cette ligne se déplacera jusqu'à la fin. Comme vous pouvez le voir ici aussi. Et toutes ces cartes sont vont aller de zéro opacité orteil 100 base T et revenir à leurs positions d'origine. Maintenant, comme pour le prototypage, c'est extrêmement simple. Cliquez sur le prototype, et pour ce 1er 1 J'ai créé un geste de robinet ici pour ce 1er 1 Donc, si nous avons inspecté, vous pouvez le voir pas ou orteil animer. Faciliter la sortie en 0.6 secondes Maintenant pour le 2ème 1 parce que quand ils tapent, nous voulons que quelque chose se produise. Donc, dans ce cas, ce champ de forme va orteil développer orteil ici. C' est pour ça que nous allons utiliser le temps. Donnez-lui un délai de 0,6 seconde. Donc, il va poids des orteils une fois que vous appuyez sur 0,6 seconde, puis pendant cette durée d'une seconde va faciliter, hors du mouvement et étendre tout le chemin jusqu'ici. Donc toute cette interaction va durer 1,6 seconde. Fondamentalement, Donc 0,6 pour la libération et la durée elle-même est une seconde désolé pour le retard 0,6. Ensuite, dans ce prochain, ce que j'ai fait est créé une fois de plus. Donc, à partir de ce point, quand il révèle l'ensemble du champ de recherche ce point quand il tape Paris et que cet indicateur se déplace vers la droite, nous allons avoir fondamentalement le même délai. Donc, comme vous pouvez le voir ici, nous avons le retard de 0,6 secondes durée une seconde fois ou orteil animer et est en dehors parce que nous voulions faciliter dans l'animation et est sorti, hors de l'animation. Et enfin, dans celui-ci, nous avons toutes les cartes en place, donc c'est fondamentalement que vous pouvez inclure. Peut-être qu'une fois que ce cercle va se fondre à zéro, comme vous pouvez le voir ici quand je survole dessus. Donc c'est toujours là, mais c'est à zéro salaire. Si je reviens au design, vous pouvez le voir juste là à la place. Vous pouvez alors inclure une icône de fermeture juste ici. Donc, une fois que ça s'estompe, ça se déplace. Peut-être à cet état, pendant que les utilisateurs commencent à taper, vous pouvez avoir ce genre d'icône X, mais peut-être qu'ils peuvent cliquer quelque part à l'extérieur ou taper quelque part à l'extérieur. C' est vraiment à vous et à votre design. Donc, il n'est pas frappé aperçu. Je vais sélectionner cet orteil de jeu d'un clic, l' afficher, agrandir un peu, donc quand je clique ici, il va se développer. Attends un peu. Tapez Paris, et puis ces cartes vont orteils voler par le haut. Donc, si je le repousse encore une fois, vous pouvez voir toute l'animation une fois de plus. Donc Paris poids et puis ces cartes droppin vous a mis en colère une fois de plus pour vérifier les effets oeufs, souiller dont vous allez obtenir dans le discours. Jetez un oeil. Si quelque chose n'est pas clair, inspectez certains de ces éléments et voyez si vous avez manqué quelque chose. Si vous êtes confus à propos de quelque chose, c'est pourquoi je fais ces oeufs souillures pour chacune de ces sections hors du cours afin que vous puissiez inspecter tous ces éléments après avoir regardé ces vidéos, ou encore mieux, pendant votre visionnage de ces vidéos afin que vous puissiez vous assurer que vous avez l'effet. Tu le veux dès le début. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 66. Popup: dans cette vidéo, nous allons concevoir certains de ces pop ups ennuyeux que tout le monde déteste. Alors imaginez que vous êtes sur la page du produit et que vous essayez d'acheter quelque chose. Mais peut-être que tu as changé d'avis. Donc, dès que vous essayez de quitter le site, le haut saute, et quand vous essayez de le fermer, il sautera en arrière. Alors commençons. Donc ici, je dois à nos ports à 800 par 800 vous reconnaîtrez certains de ces éléments parce que je les réutilise, surtout à partir de cette section. Donc nous avons ce spectacle. Nous avons exactement le même texte que nous avons utilisé dans cet exemple pour la chaussure. Et enfin, nous avons ce fond. Donc c'est le même fond que nous avons utilisé de l'émission. Je viens de l'agrandir. Donc, dans ce prochain, nous avons ce pop up et laissez-moi aller un détail à la fois. Tout d'abord, on a surpassé tout, alors tu te bats. Zoom un peu à l'extérieur. Vous pouvez voir que c'est plus grand ici, mais nous y arriverons dans une seconde, et nous avons trop appelé, qui est fondamentalement cette couleur. Mais à 0% Pacenti. Je viens de faire une forme de rectangle à 800 par 800 plus bas ne collé zéro en place juste au-dessus cette chaussure. Donc, dans ce prochain écran, les femmes y passent. Vous verrez que c'est à 90 % de réduction sur Base City, donc sous les chaussures, dit-il. Nous avons le texte, donc ici, nous avons une superstar. Nous avons, euh, ce texte ci-dessous et tout ça si je le sélectionne d'ici, c'est un sens ouvert à tout gras pour le titre et le nom du produit, et ces deux sont un sens ouvert 20. Et vous l'avez déjà vu dans la vidéo précédente. Et pour le fond, nous entendons le bouton il 3 50 avec 79 enfin, le prix est ouvert depuis la couleur régulière et blanche. Donc, il y a fondamentalement ça pour ce 1er 1 Maintenant pour le 2ème 1 laissez-moi le traverser. Donc, je vous ai déjà parlé de la pop up dans la couleur trop, et si je cache la superposition de couleur, vous pouvez voir que nous avons exactement les mêmes éléments en arrière-plan qu'ils sont ici dans le 1er 1 mais ils sont juste cachés en utilisant cet appelant ordonné Donc pour le pop up lui-même. Si je l'ouvre, vous pouvez voir que nous avons fermé l'icône ici, nous avons ce texte qui est ouvert depuis 20. Position audacieuse juste au milieu de cette pop up, comme ça. Donc juste au milieu horizontalement, nous avons un e-mail, qui est juste une entrée et un rectangle régulier, et nous l'utilisons dans les formulaires. Exemple. Donc exactement ce même et nous avons votre email, qui est ouvert, dit 20 une fois de plus D d. D pour la couleur et l'entrée est 300 avec 70 blanc pour la couleur, huit pour le rayon de coin et enfin bordé 77. Et quel bouton nous avons 2 à 5 avec 70. S' abonner est blanc Open Sense 20 et il est positionné au milieu est que vous pouvez voir ici et enfin nous avons des districts ne vous dépenseront pas, nous promettons est ouvert depuis 18. Donc je l'ai fait juste un peu plus petit pour s'adapter ici. Et nous devons être chez Alec juste pour pimenter les choses un peu. Et c'est au DDT juste pour que ce n'est pas si visible parce que c'est le but de ces pop ups. Enfin, j'ai créé la voiture BG. Donc, si je cache l'image, vous pouvez voir qu'elle est à 700 avec pour 16 et c'est un coin blanc 80 sur 20 et juste une forme rectangulaire régulière. Rien de spécial. Et finalement, je l'ai dupliquée, et à l'intérieur, j'ai positionné cette image parce que j'abaisse l'opacité de l'image à 40% afin que nous puissions voir dans ces lettres un peu mieux. Et c'est pourquoi j'ai créé le duplicata sur la carte PCI. Sinon, vous pouvez simplement inclure votre image à l'intérieur de ce calque d'origine, et c'est essentiellement tout pour le pop-up. Maintenant, comment obtenez-vous cet effet vous a déjà montré un peu. Donc, si je l'agrandisais ici et augmentais votre pâteux à 100 et si je clique dessus, vous pouvez voir tout ce que j'ai fait, c'est que je l'agrandisse beaucoup en utilisant Shift vieux et clic gauche dans l'un des coins. Donc quelque chose comme ça, et vous pouvez l'agrandir autant que vous voulez. C' est vraiment à vous de choisir, et tout ce que j'ai fait, c'est que je le positionne juste un ou deux pixels de ce bord inférieur de notre part, donc il reste à l'intérieur de notre port, et j'ai simplement abaissé l'avez-vous collé à zéro ? Et je l'ai fait après l'avoir créé ici dans le 2ème 1 Donc j'ai trouvé ça plus facile à faire que l'inverse. Donc, vous allez d'abord créer votre élément, puis revenir au premier notre port, puis juste augmenter sa taille. J' ai trouvé que c'était beaucoup plus simple que d'augmenter sa taille ici, puis je l'ai ajouté ici . Alors vient le temps de tout prototyper. Elle contrôle zéro, donc s'enclencher en place pour que vous puissiez le voir mieux. Donc, quand je clique sur le prototype, tout ce que j'ai fait ici, c'est que j'ai créé quelque chose comme un robinet. Habituellement, les gens vont essayer de bouger leur bouche ici pour fermer la page Web ou essayer de faire défiler vers le haut sur votre téléphone mobile, et ce pop-up ennuyeux va apparaître. Mais j'ai créé un déclencheur de pression juste pour vous montrer ce que ça va se passer. Et pour cette étape, déclencheur est simplement cliqué ici. Donc rien de vraiment spécial. Donc si je te montre que je vais frapper ici. Vous marchez-vous ou orteil animer, Facile à sortir et 0,6 seconde. Et dans ce 1er 1, revenons à la conception. L' opacité devrait être à zéro. Donc c'est tout pour la 1ère 1 Et pour la 2ème 1 J'ai cliqué sur cette icône X, connecté Il a utilisé exactement les mêmes paramètres de sorte que nous avons exactement le même mouvement allant de cet orteil, 2ème 1 ainsi que du 2ème 1 retour au 3ème 1 Donc si je clique sur cet aperçu, c'est ce que nous allons obtenir. Imaginez que vous essayez d'échapper à cette page, et le pop up arrive à votre chemin. Ils essaient donc de vous inciter à leur laisser votre e-mail afin qu'ils puissent vous envoyer ce code de promesse ainsi que les futurs codes promo, puis essayer de vous obtenir en tant qu'acheteur. Lorsque vous voulez le fermer, vous le fermez et il va descendre et augmenter en taille parce que c'est ainsi que nous avons créé maintenant. Tu peux aller dans l'autre sens. Vous pouvez créer le pop-up ici pour être beaucoup plus petit que cela. Donc, exemple, Toby, encore plus petit que ce bouton déplacer vers le bas semblent comme un fait dans notre cas. Et puis ça va dépenser à cette taille, et ensuite on frappe X va revenir et revenir à cette taille. Donc, si je l'ai aperçu une fois de plus, vous pouvez voir la couleur sauter trop bien ainsi que ce pop up. Donc, quand je clique dessus pour le fermer, vous pouvez voir à quoi cela ressemble. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 67. Parallaxe: dans cette vidéo, je vais vous montrer comment vous pouvez créer cet effet de parallaxe. J' ai donc créé la maquette à partir de cette page de destination. Donc, quand les gens ont atterri et après un certain temps cela va descendre, le texte va orteil apparaissent à partir de l'arrière-plan et capable de tout va entrer en perspective si je vous montre une fois de plus. Voici à quoi cela ressemble et tout entre en perspective après un certain temps . Alors commençons. Donc, ce que j'ai ici, ce sont deux ports sur 1000 avec 600. Bien sûr, le site va être plus grand. Mais pour les fins hors de ce cours, je voulais garder les tailles hors de notre port un peu similaire avec le reste hors de nos ports. Je t'ai déjà montré. Donc, c'est à ça que ça ressemble. Mais pour que tu comprennes, je dois d'abord te montrer le fichier Photoshopped. Donc, si je saute dans mon magasin quatre, voici à quoi ressemble le fichier lui-même. Donc ici en haut, nous avons ce texte que je vais réellement déplacer juste en dessous de ce premier plan. Blair, nous l'avons fait maintenant, qui va être sur le dessus et ce n'est qu'un logo. J' ai juste inventé un logo n'a vraiment d'importance juste pour les fins de cette vidéo et ici nous avons la navigation. Si j'ai appuyé sur E, c'est un sens ouvert. Normal 14 et la ligne droite est que vous pouvez voir ici, et il est juste illustré. C' est un site Web maintenant, dessous de cela, nous avons quelques calques, mais avant de vous montrer ces calques, laissez-moi rapidement tout désactiver afin que je puisse vous montrer l'image originale que je vais cacher. Le texte est, eh bien, juste pour l'instant. Donc, c'est l'image originale. C' est à partir de Splash, et c'est l'image de la région Toscane en Italie et vous tolérez Aled cette image gratuitement, et je vais m'assurer de vivre lien vers elle dans le fichier PDF. Donc, ce que j'ai fait est que j'ai coupé certains de ces couches jusqu'à l'orteil, inclure un peu de mouvement et d'inclure un peu de profondeur dans cette image. Il est déjà magnifiquement tourné, et il montre déjà la profondeur entre ces buissons à l'avant, ce champ au milieu et ce fond parfaitement aligné. Mais je voulais que les orteils animent ça à l'intérieur d'Adobe X'd, donc j'ai dû couper toutes ces parties. Donc ce que j'ai fait d'abord, c'est que je vais cacher l'image et ensuite te montrer. J' ai coupé le premier plan. C' est donc le premier plan, et vous pouvez être aussi précis que vous voulez ou pas du tout. C' est vraiment à vous, votre image et à votre projet. Mais ce que j'ai fait, j'utilise l'outil stylo et il suffit de cliquer sur tous ces éléments. Et c'est un peu désordonné, mais pour les fins de cette vidéo, c'est bien, surtout parce que nous utilisons l'image originale comme arrière-plan de toute façon, donc j'ai coupé l'arrière-plan. Puis j'ai fait la même chose pour le premier plan, y compris les buissons ici. Ensuite, je coupe les buissons eux-mêmes, et enfin, Je viens d'ajouter, Certains vont plus simple à ces buissons. Donc je suis allé ici pour filtrer le bleu et ensuite faire flou tibia. Et si je le ramène ici, vous pouvez voir qu'il est à 3,4 pixels, et c'est essentiellement mon coach. Plus simple, et cela va être élément de premier plan comme il disparaît. Cet élément de premier plan réel va apparaître, puis l'arrière-plan va rester le même. Et enfin, le texte va aller orteil pop up de ce joueur de premier plan. Donc c'est essentiellement mon fichier Photoshopped. J' ai fait tout ça dans la boutique photo. Vous pouvez le faire en fait, dans Adobe X'd, surtout si vous voulez utiliser le crayon et ensuite vous quelques mosquées. Mais parce que j'ai déjà pour le magasin, j'ai trouvé que c'est beaucoup plus facile de cette façon. Ce que j'ai fait alors est événement ici pour enregistrer les économiseurs de fichiers enregistrés ceci comme un fichier Photoshopped, puis je suis allé de l'avant et l'ai ouvert dans adobe eggs. Donc ici, il est dans Adobe X'd et vous pouvez voir si je clique ici. Tous ces calques sont ici, donc je les ai inclus tous à l'intérieur de ce fichier Photoshopped. Ensuite, j'ai pu entendre frapper le contrôle C pour copier ce notre port va fermer ceci pour l'instant et ensuite sauté à l'intérieur de ce fichier et appuyez sur le contrôle V pour le coller dans. Tu n'as pas à faire ça. Vous pouvez le faire dans le fichier original quand vous l'ouvrez dans d'autres B x d. Mais je l'ai fait quand même. Donc c'est l'image que vous avez vue à l'intérieur du magasin 4 si je saute ici. Mais la chose qui manque dans cette image originale est le premier plan flou juste ici. Comme vous pouvez le voir, vous ne voyez pas ces buissons flous. C' est parce que je les ai déplacés vers le bas, comme vous pouvez le voir ici et tout est arrivé sur cette seconde image. Mais dans cette première image, buissons flous sont ici et je les ai beaucoup agrandies. Vous pouvez voir les droits de délimitation juste ici, à gauche et à droite. Vous pouvez voir à quel point ils sont grands aussi, si je les cache, j'ai aussi beaucoup déplacé ce premier plan vers le haut. Vous pouvez voir à quoi il ressemble à l'origine ici. Je suis allé de l'avant et je l'ai beaucoup déplacé. Et puis, dans ce prochain, on va descendre et le texte va revenir en arrière. Maintenant, une chose que vous ne voyez pas ici que vous avez vu dans le fichier original pour la boutique sont ces buissons originaux parce que je les ai découpés et ensuite créé cet effet de flou. Vous ne les voyez pas ici. Si je les cache. C' est original pour Grand Lor parce que j'ai trouvé qu'ils étaient obsolètes. Fondamentalement, ils sont un peu dans cette image. Donc tout ce que j'ai fait pour le prototypage parce que, en fait, vous avez fini ici. Vous pouvez cliquer sur le prototype et tout ce que j'ai fait. Vous pouvez utiliser le temps. Donc, après un certain temps où l'utilisateur atterrit sur cette page et je vous recommande de le faire dans votre fichier de projet client après un certain temps, animation automatique se produira et est en dehors est ce que vous devriez utiliser parce que vous avez besoin du animation orteil facilité dans. Et puis il est sur ce résultat final dans la durée de l'animation entière est de quatre secondes. Donc, si je clique sur ce premier notre tableau clic aperçu, vous pouvez le voir attendre un peu et puis tout est en place. Donc, comme vous pouvez le voir ici, il passe de là à cette durée est de quatre secondes, et parce que nous l'avons mis en place, l' orteil est en marche. Vous pouvez voir à quoi ça ressemble. Donc, une fois de plus, cet élément de premier plan est déplacé vers le haut. Ces buissons sont agrandis beaucoup, et ils vont se déplacer tout le chemin en bas de ce notre planche, comme vous pouvez le voir juste ici donc ils vont fondamentalement les orteils disparaissent. En fait, à partir de cette page et enfin c'est le résultat. Lorsque vous cliquez dessus et que le texte va apparaître, vous pouvez être encore plus dramatique. Vous pouvez, par exemple, réduire la taille du texte dans le premier notre port, puis le rendre original dans cette seconde partie sont, donc il aura une sorte d'effet d'inclinaison et il ira de l'orteil de texte plus petit, texte plus grand, puis votre effet sera une marche plus dramatique. Vous pouvez même inclure certains nuages, par exemple. Ainsi, les nuages disparaîtront d'ici et révéleront l'arrière-plan ici. Donc, il n'y a vraiment pas de limite. Et tout dépend essentiellement de votre projet et de votre créativité. Donc gardez cela à l'esprit que vous devez avoir toutes vos couches nommées correctement et ordonnées correctement pour que cet effet de parallaxe fonctionne correctement et bien sûr, comme avec tous les autres effets que je vous ai montrés dans ce cours, vous pouvez les utiliser à la fois pour vos projets de site web ainsi que pour vos projets mobiles. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 68. : dans cette vidéo, je voulais parcourir rapidement le fichier d'effets X'd. C' est la même chose pour toutes les autres parties. Hors du parcours. Vous obtenez cet ex souiller avec tout ce que vous avez vu en vue sur les vidéos afin que vous puissiez jouer avec elle et l'inspecter en remorquage. Beaucoup plus de détails. Donc, si vous n'êtes pas sûr de quoi que ce soit de ces vidéos, vous pouvez cliquer ici sur le calque spécial. Vous pouvez le vérifier et vous pouvez sauter à l'intérieur. Ouvrez tout cela et voyez comment tout a été créé. Vous pouvez plonger profondément. Vous pouvez utiliser ces couleurs que vous pouvez cliquer à travers et voir quelle taille du texte j'utilise. Donc, par exemple, ici, c'est le sens ouvert orteil un irrégulier, et vous pouvez vraiment plonger profondément et voir tout ce qui vous intéresse de cette partie hors du parcours. Vous pouvez également prévisualiser toutes ces animations, et vous pouvez voir par vous-même à quoi elles ressemblent, et vous pouvez simplement copier et coller tous ces éléments dans vos propres conceptions. Si vous le souhaitez, enfin, vous pouvez utiliser ces dessins pour votre propre usage personnel ou commercial, et vous avez ma permission. Donc, par exemple, imaginez juste que vous voulez utiliser une fenêtre contextuelle pour le site Web de votre client. Vous pouvez utiliser ce pop-up exact si c'est quelque chose que vous voulez et le coller dans votre client sur conception, puis vous pouvez l'adapter à ces couleurs. Et ces fonds, par exemple, pour donner l'impression que cette touche personnelle leur a été ajoutée. Enfin, si quelque chose n'est pas clair, vous pouvez toujours vérifier et sauter à l'intérieur. Vous pouvez regarder des vidéos et pendant que vous regardez, vous pouvez ouvrir ce fichier et inspecter tout ce dont je parlais à l'intérieur de ces vidéos, et vous pouvez apprendre beaucoup mieux de cette façon. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 69. Slider de valeur: dans cette vidéo, je vais vous montrer comment nous pouvons créer ce curseur de valeur. Donc, quand je clique sur cette flèche, elle retournera et toutes ces autres options vont s'enclencher en position. Ensuite, je peux changer dans ces valeurs et me déplacer autour de ces curseurs et je peux les ramener à leurs positions d'origine et un et terminé. Je peux frapper ici pour le ramener. Alors commençons. Donc, ce que j'ai ici, c'est le design fini et toutes ces planches sont à 800 par 800 fuites. Vérifiez rapidement celui-ci, qui est étendu, et j'arriverai à celui-ci qui s'est effondré. Donc, voici à quoi ils ressemblent donc si je clique ici, vous pouvez voir toutes ces couches à l'intérieur. Mais disséquons celui-là, parce que tous sont exactement les mêmes. Donc voici des alarmes et des appels de sonnerie en bas. Donc, si vous ouvrez la sonnerie, voici à quoi ça ressemble. Donc nous avons cette flèche juste ici, qui est juste une icône étroite, et ensuite nous avons ces icônes juste ici. Maintenant celui-ci est l'icône de la sonnerie suivante, nous avons le texte de la sonnerie qui est ouvert depuis 25 dans ce cas, et 70 70 70 pour la couleur. Et enfin, nous avons BG pour l'arrière-plan maintenant pour le curseur déjà montré cela dans l'un des exemples précédents, nous avons le cercle qui se sent avec la couleur blanche, pas d'ombre de bordure. Donc ombre noire par défaut 16%. Et dans ce cas, les valeurs sont deux expositions à la position Y et 10 pour le flou. Et c'est comme ça que j'ai eu cet effet de flou pour l'arrière-plan ci-dessous que nous avons la mosquée. Donc c'est la même mosquée comme déjà vous montrer dans le nombre de vidéos précédentes et vous pouvez voir que je bouge ce légèrement orteil ici. Et si je veux, je peux simplement ramener ici. Cliquez à l'extérieur, puis il n'y a pas de mosquée du tout. Et évidemment, ce cercle suivra à gauche et à droite, et vous pouvez simplement maintenir le décalage et le déplacer en position. Et enfin, ce que nous avons ici est vide, qui est juste cette couche de fond gris clair, et c'est au DDT. Couleur maintenant pour les tailles. L' arrière-plan est 700 avec 1 28 et ce curseur vide est 5 20 à 12 pieds de hauteur et la mosquée et la couche remplie, évidemment très que vous le déplacez le long de Circle est 30 par Turney, et c'est fondamentalement tout pour la mise en place. Maintenant, j'ai créé tous ces copieux juste ci-dessous changer le texte et les icônes pour correspondre aux valeurs en question. Et enfin, cette flèche va tourner. Donc, si vous voyez ici, il pointe vers le haut et dans le premier exemple pointe vers le bas. Maintenant, en ce qui concerne le prototypage, partie va, ce que vous avez à faire c'est dans ce premier cas, je viens de les déplacer. Donc tous les trois d'entre eux, je les ai sélectionnés, les déplacer en place avec celui-ci et plus bas. Vous payez City 20 dans celui-ci ? Ils vont dépenser les pieds avec 20 pixels les uns entre les autres. Juste ici. C' est l'espacement. Et l'opacité est évidemment 100 parce qu'ils vont se mettre en position suivante. Je viens de créer trois copies de plus pour ces trois curseurs. J' ai donc déplacé ce 1er 1 puis j'ai déplacé le 2ème 1 et finalement déplacé le remué jusqu' à 100% sur la position. Et enfin, lorsque vous le prototype, vous pouvez le ramener à sa position d'origine. Donc ça ira d'ici, Tohir. Et puis vous pouvez déplacer ces briquets vers le bas en position. Maintenant, pour un prototype en partie, si je clique sur un prototype, vous pouvez voir ce que j'ai fait. Donc, j'ai cliqué sur cette flèche pour aller à cette seconde notre port j'ai utilisé tapoter aussi animer et enclencher en position. Et 0,4 seconde était la durée. Et quand vous cliquez sur la flèche pour revenir en arrière, je l'ai un peu changé. J' ai donc utilisé exactement les mêmes paramètres ici. Mais j'ai utilisé facilité et 0.2 secondes parce que je voulais qu'il facilite l'écriture plutôt que claquer et pour la durée, Toby un peu plus court. Donc, au lieu de zéro point pour elle 0.2 parce que je voulais qu'il revienne un peu plus vite. Donc, si je clique sur l'aperçu, vous pouvez le voir. Donc nous avons ces à l'arrière et nous avons cliqué pour qu'ils se mettent en position. Vous pouvez également utiliser snap, mais il ira juste au-dessus du bord d'arrêt juste un peu, et vous pouvez voir ce genre d'effet fantôme C'est pourquoi j'ai utilisé est sorti et 0.2. Donc vous ne voyez pas cet effet maintenant pour ces curseurs ? Ce que j'ai fait est, par exemple, j'ai cliqué sur ce point et le déplacer orteil ce notre port et pour cela nous avons utilisé drag auto animates et est en dehors parce que je voulais faciliter et faciliter l'animation. Et fondamentalement, j'ai fait exactement la même chose pour tous ces repos hors des points et de nos planches. Donc, comme vous pouvez le voir, nous avons exactement la même configuration pour celui-ci et pour celui-ci, et je suis retourné pour chacun d'eux pour les ramener à son endroit d'origine en utilisant exactement les mêmes paramètres. Donc, si je clique sur le 1er 1 clic aperçu et je vais l'agrandir un peu. Et j'ai inclus dans cet arrière-plan léger pour l'aéroport lui-même parce que je voulais que cela se démarque juste un peu mieux parce que vous pouvez les trouver dans vos appareils mobiles, par exemple, et ont généralement des arrière-plans flous. Donc, ces arrière-plans blancs des éléments eux-mêmes vont sauter un peu mieux sur ce fond bleu donc quand vous cliquez dessus, il va se développer. Tu tolères l'effondrer si tu veux. Et la flèche va tourner, évidemment. Et vous pouvez déplacer ces curseurs et les mosquées suivront parce que je viens d'étendre les mosquées jusqu'ici et de déplacer les cercles afin que vous puissiez les ramener à leur position d'origine. Et vous pouvez, bien sûr, jouer avec. Tu peux aller jusqu'à zéro, mais je voulais juste te montrer comment tu peux le créer de cette façon. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 70. Barre d'onglets: dans cette vidéo, nous allons créer cette étape barb. Ainsi, lorsque vous appuyez sur ces icônes, vous pouvez voir que la couleur change du gris foncé au bleu ainsi que ce sélecteur est en mouvement, indiquant ce qu'il est sélectionné. Alors commençons. Donc c'est ce que j'ai ici que j'ai pour nos ports au large 800 par 800. Et si je zoome un peu plus près, je vais juste vous en montrer un, parce que tous sont exactement les mêmes. Je viens de créer celui-ci et ensuite en faire plusieurs copies. Donc, nous avons B G, qui est juste l'arrière-plan et sa lumière. Grand comme vous pouvez le voir sur cette couleur, rayon d'angle E C E C E C est de 20 et les dimensions sont de 6 50 avec 1 27 Et comme vous pouvez le voir, il est juste là pour servir de fond, et vous pouvez imaginer que cela ira sur le fond de votre mobile écran de l'appareil. Ensuite, nous avons le sélecteur, qui est juste une fois de plus, ce rectangle en bas et sa ligne vers le haut au centre de ces icônes comme il se déplace le long. C' est avec sa hauteur 55 est pour le maïs ou quatre-vingt est une couleur 20 est trois C six ff, et enfin nous avons les icônes et les icônes sont exactement les mêmes. Donc, si je saute à l'intérieur, tous sont exactement les mêmes en termes de structure. Comme vous pouvez le voir, nous avons la mosquée. Donc, nous avons juste une couche de base juste ici. Donc juste rectangle de base sur le dessus de l'icône. Et nous avons la maison je concolore dans ce cas et nous avons l'icône de la maison, qui est cette couleur gris foncé. Mais comme vous pouvez le voir, opacité est à zéro. Maintenant, pour la couleur, j'utilise trois C six f f et pour celle-là j'utilise ce 70 70 70 pour juste la couleur régulière. J' ai donc créé cette icône. Puis j'ai fait un duplicata. Il incluait la couleur, sorte que cette couleur bleue a ensuite créé la mosquée, sélectionné la mosquée et cette couleur bleue clic droit et la mosquée avec la forme. C' est pourquoi j'ai eu cette mosquée et j'ai inclus l'icône originale et cette mosquée à l'intérieur du dossier en utilisant le contrôle G. Et finalement ce sélecteur va suivre partout où nous cliquons. C' est fondamentalement tout pour le déclenchement de ça. Comme vous pouvez le voir, c'est vraiment simple. Toutes ces autres icônes sont exactement les mêmes. C' est juste que la mosquée est déplacée au sommet. Si je fais un zoom avant, par exemple, sur ce Jets, j'appelle ceci est notre mosquée et c'est tout simplement déplacé juste ici vers le haut. Et lorsque vous cliquez sur d'autres écrans et sélectionné cette icône, par exemple, cette mosquée va orteil étendre vers le bas pour révéler la couleur bleue. Et cette icône Jets originale va aller à la ville zéro hors de base pour que nous ayons cette belle icône bleue présentée. Maintenant, quand vous en avez fini, vous pouvez simplement cliquer sur la mosquée et simplement la déplacer hors du chemin. Et comme vous pouvez le voir, il va sélectionner l'icône d'origine et la couleur d'origine. Maintenant, j'ai quatre copies dans Total parce que nous avons quatre icônes. Et maintenant, si je clique sur le prototype est exactement le même pour chacune de ces icônes sur juste aller vous montrer un. Donc, par exemple, je vais cliquer ici pour aller à cet écran. Je vais traîner ma poignée en arrière. Comme vous pouvez le voir déjà avoir ces deux sélectionnés pour aller orteil le troisième et le quatrième de notre port. Mais si je sélectionne cette icône, je sais qu'elle va aller à ce nos ports. Donc, je vais juste faire glisser ma poignée bleue et ce sont les paramètres allaient utiliser User is go toe tap. L' action va être aussi animée parce que tous sont exactement les mêmes. Entre nos tableaux, les noms de couches sont le même paramètre est donc le même Donc, tout est le même que nous allons utiliser est en dehors et une courte durée de 0,3 seconde. Donc, quand vous appuyez sur l'aperçu, c'est ce qui va se passer. Ainsi, par exemple, lorsque vous cliquez de celui-ci à ce sélecteur va changer Cette mosquée va monter en révélant cette icône. Cette mosquée va descendre révélant icône décolorée Cette couleur originale je concert ce gris foncé va aller à zéro dans une ville payante et celui-ci va revenir à 100 dans la ville de Kobe comme vous pouvez le voir ici. Donc, pour cliquer ici, cliquez sur Aperçu Donc c'est ce qui va se passer. Donc, quand vous cliquez ici va changer comme vous pouvez le voir et vous pouvez revenir entre ces deux, par exemple, et vous pouvez voir qu'il va de gris foncé dos orteil bleu, et il va du bleu au foncé. Excellent lorsque vous passez à ces autres icônes. Donc, comme vous pouvez le voir, c'est vraiment simple. Vous déplacez simplement les mosquées de haut en bas et réduisez ou pacenti ces icônes d'origine gris foncé à zéro lorsque vous atterrissez sur cette icône particulière. Et, bien sûr, dans ce sélecteur, ici en bas va suivre et être positionné au centre de chacune de ces icônes. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 71. Menu latéral: dans cette vidéo, je vais vous montrer comment vous pouvez créer cette interaction de menu latéral. Donc, lorsque vous cliquez sur l'icône, il va sauter vers le bas et une taille plus basse ainsi. Introduisez cette ombre d'arrière-plan, puis lorsque vous cliquez à nouveau dessus, elle reviendra à sa position d'origine. Alors commençons. Donc c'est ce que j'ai ici. C' est le design que j'ai créé il y a quelques mois, et c'est en fait l'un de mes produits de design que les gens peuvent acheter. Mais je te donne ce cadeau pour cette leçon. Donc, voici à quoi ça ressemble si un saut à l'intérieur nous avons la barre d'état, qui est la barre d'état juste ici en haut. Et si je le cache, vous pouvez voir ce qu'il y a à l'intérieur. Nous avons donc le statut, barre et l'arrière-plan si vous voulez l'inclure. Mais j'ai choisi de ne pas le faire. Ensuite, nous avons l'écran lui-même, qui est juste tout cela ici. Et enfin, nous avons cette expérience. Donc, j'ai choisi ce sont pauvres tout d'abord, Donc, notre conseil est pour l'iPhone, X r x s donc 375 attendre 8 12 et Si je clique ici, vous pouvez voir ce qu'il se compose. Donc, il est juste cette couleur bleu clair hors B C E zéro f d. Et bien sûr, vous aurez cela dans les autres. Les œufs se souillent. Vous pouvez sauter à l'intérieur et les inspecteurs dans beaucoup plus de détails. Mais je vous donne juste l'essentiel, essentiellement ce qui se trouve ici. Nous avons donc le logo et avec peu de composants pour le logo ainsi que ce texte. Et enfin, nous avons ces éléments de menu, donc tous sont de sens ouvert. Et tout ce texte aperçu hors de l'écran est ouvert Cessnas bien, sorte que vous pouvez suivre facilement. Vous pouvez simplement installer ce seul fonds et avoir fondamentalement tout prêt. Maintenant, tous ces éléments de menu sont 20 et ils sont blancs et ils sont laissés bordés de ce logo , puis tout est sélectionné et positionné au milieu verticalement comme Donc maintenant si je saute à l'intérieur de l'écran, vous pouvez voir il se compose ensemble. Donc, nous avons profil, Menu Icône et BG, qui est ce fond avec une légère ombre, et une fois de plus vous pouvez inspecter tous ces éléments dans beaucoup plus de détails Si vous voulez accepter, nous avons le personne. C' est donc ce nom d'image et leur emplacement. Nous avons un bouton de suivi et un bouton de message. Ils sont tous les deux de la même taille. Mais c'est blanc. C' est ce genre de bleu et enfin nous avons les robinets. Nous avons donc les favoris, sélecteur de galerie et environ et nous avons le bar de nuit qui est ce bar Jamais et vous remarquerez qu'il est lié à mon design original. Mais si je, hum je vais seulement obtenir un peu plus tard, donc vous n'avez pas à vous inquiéter à ce sujet dans vos designs afin que vous puissiez l'utiliser tout de suite sans aucun souci. Et enfin, nous avons ces images juste ici. Nous avons donc neuf images. Tout se coucha sur un grand et juste je viens d'inclure quelques images et enfin nous avons ce fond qui est 375 avec 8 12 qui est la taille de nos ports. Et j'ai inclus cela pour que je puisse l'abaisser en taille comme vous pouvez le voir ici. Alors comment j'ai créé ça Si je saute à l'intérieur, je vais juste y aller et, euh, donc comme ça. Donc c'est 10 10 10 20. Pour que je puisse savoir ce qu'il faut inclure. Maintenant. Je vais aller de l'avant et le supprimer. Je vais choisir dans tout cet écran frappé contrôle C Cliquez ici, Hit Control V et ce que je vais faire est de maintenir le décalage, Ault et le clic gauche sur ma bouche, et il va diminuer uniformément, à fois horizontalement et verticalement. Tout et redimensionner réactif est activé. Donc, quand vous êtes de taille, ces oeufs vont aux pieds. Essayez de faire de son mieux pour aligner tout tel qu'il était à l'origine. Alors ça va aux orteils. Faire quelques contraintes, va essayer de tout garder dans l'ordre tel qu'il était, et il va essayer orteil une ligne tout aussi ânes étroitement assed possible à cet écran original. Suivant en allant juste maintenir la touche Maj et le déplacer Quelque part ici, je vais cliquer ici pour positionner il était épais et nous allons sauter en vue comme ça, et je vais juste le déplacer juste en dessous de la barre d'état parce que c'était comme ça. Voici vous pouvez voir qu'il va écran de la barre d'état, éléments de menu locaux parce que les états de la barre ici, peu importe quoi, Je vais cliquer ici et je vais sauter à l'intérieur, ouvrir BG et cliquer sur l'Ombre, en tapant 10 et en tapant 10 ici et enfin en tapant 20 ici. Donc, si nous choisissons, quelque chose va un peu bizarre, comme vous pouvez le voir, nous avons maintenant cette belle ombre que je vais augmenter à Bay City juste ici. Et vous pouvez voir à quoi cela ressemble maintenant pour le prototypage lui-même. Je vais juste cliquer ici sur cet élément de menu et je vais choisir tap auto Animate, Facile maintenant 0.6. Et je vais faire la même chose pour celle-là. Donc, je vais juste à la maison et contrôle clic à l'intérieur de cette icône de menu et je vais juste faire glisser ces bougies bleues en arrière et nous allons avoir les mêmes paramètres. Donc, appuyez ou animer orteil est en n 0.6 secondes et enfin, une fois de plus avant que je frappe Pretty. Vous pouvez le trouver dans votre autre fichier xz et vous pouvez l'inspecter dans beaucoup plus de détails. Et vous pouvez,bien sûr,utiliser bien sûr, tous ces éléments dans vos projets, fois personnels et commerciaux. Alors passons un aperçu et vous pouvez voir à quoi cela ressemble. Donc, il saute dans la disposition. Il couvre tout et le robinet. Ce tempérament reste le même ici en haut, donc ça ne change pas la fin. moment, nous avons cette belle ombre portée couvrant ce fond bien. Donc, il se démarque contre elle. Et quand je clique ici, il reviendra à sa position d'origine. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 72. Agrandir l'image: dans cette vidéo, nous allons concevoir cette interaction simple. Donc voici la galerie d'images, et quand je clique sur l'image pour l'agrandir, vous pouvez voir qu'elle s'accroche en position. Cette légère et radieuse apparaît ainsi que cette icône de fermeture. Donc, quand j'ai frappé l'icône des vêtements, vous pouvez voir qu'il remonte à sa position d'origine, rayonnante et les vêtements disparaissent et vous pouvez voir qu'il contient ses coins arrondis. Mais quand je clique dessus, ces coins disparaissent et ça revient à droite. Quand ils cliquent pour le fermer, vous pouvez voir qu'il va dans les coins arrondis une fois de plus. Alors commençons. Très bien, donc c'était super simple à créer et à mettre en place. Donc, si je zoome un peu plus près, vous pouvez voir ce que nous avons ici. Donc, nous avons le texte que les images supérieures, qui est ouvert Sands Bold 70 70 70 Pour la couleur. Nous avons des gens, ce qui est le sens ouvert, régulier et 18 donc juste un peu plus petit que celui-ci. Et c'est au DDT, et c'est la même histoire pour la nature juste en dessous. Pour les images, ils sont de 1 37 avec 1 98 20 pixels. Espace comme ce 20 lumière ce 20 comme ça et comme ça, ainsi qu'avec ces éléments. C' est donc 20 pixels d'ici au texte et du texte à l'image, ainsi que de l'image au bas et essentiellement 20 pixels sur tous les sites. Comment j'ai créé ces, j'utilise juste un outil rectangle. Et si je clique sur ceux, par exemple, celui-ci, vous pouvez voir que j'ai mentionné ce qui est encore. Donc 1 57 avec 1 98 a coins arrondis sont 20. Ils sont remplis de blanc parce que ce sont les rectangles et la couleur originale était blanche. Je viens d'enlever la frontière, et c'est tout maintenant pour celle-là. Comme vous pouvez le voir, il y a un léger int Grady ici, ainsi que l'icône divulguer. Close Icône est fondamentalement explicative, mais pour le Grady int, vous pouvez voir à quoi cela ressemble. Alors j'ai choisi. Au lieu de la couleur unie, j'ai choisi l'ingrédient linéaire, et par défaut il vous donne cet ingrédient. Donc, si je reviens à la couleur unie, choisissez le noir, par exemple, revenez à l'ingrédient maigre. Vous pouvez cliquer sur ces points et vous pouvez les déplacer et vous pouvez abaisser la ville d'apace juste ici. Donc, par exemple, si je le déplace orteil blanc comme il était à l'origine, avoir une plus faible l'opacité de celui-ci. Zéro Je vais ensuite changer ces positions de sorte que la couleur plus foncée et va à la couleur plus claire supérieure va vers le bas et vous pouvez le faire par exemple, comme ceci, ou il peut le déplacer comme ça. Et puis vous pouvez jouer avec les couleurs d'où vient le Grady int,par exemple, par exemple, et vous pouvez cliquer sur cette couleur plus foncée. Vous pouvez réduire votre ville de paie, et vous pouvez vraiment jouer avec elle pour obtenir le look désiré que vous alliez. Et vous pouvez, bien sûr, déplacer cette gauche à droite si vous voulez que l'int gourmand vienne de ces angles mais parce que je ne veux pas Oh, je voulais venir directement de la position supérieure. C' est quelque chose comme ça et peut-être abaisser leur ville de paie de ce juste léger maintenant pour l'image elle-même. Ce que j'ai fait, je vais vous montrer ici pour qu'il puisse contrôler DE pour le dupliquer. Et ce que j'ai fait fondamentalement un juste agrandir comme si. Et comme l'image est contenue dans cette mosquée de base, lorsque vous faites glisser l'image à l'intérieur de la forme que vous menez, cliquez longuement, déplacez et déplacez l'image. Donc, par exemple, ici, si vous voulez que ce soit votre point focal et vous pouvez, bien sûr, déplacer comme vous voulez et ce que c'était finalement. J' ai sauté en vue et je ramène le rayon du coin à zéro. C' est comme ça que j'ai eu cette image. Donc, pour le prototype, c'est encore une fois extrêmement simple. Donc une chose que je dois mentionner est que nous avons l'icône Grady int et fermer juste ici mais Kobe City hors les deux, c' est Zero, comme vous pouvez le voir ici et juste ici est à 100. Icahn est sur le dessus de l'int gourmand, évidemment, parce que sinon vous ne le verrez pas. Eh bien, maintenant pour un prototype, c'est extrêmement simple. Juste deux états, sorte que vous pouvez cliquer sur celui-ci a traîné la poignée bleue et nous utilisons robinet auto, animate, facile et out et 0.4 secondes maintenant pour revenir. Vous pouvez cliquer sur cette icône de fermeture et utiliser exactement les mêmes paramètres. Donc, dans une chaleur pour prévisualiser, c'est à ça que ça ressemble. Donc, comme vous pouvez chercher radieux et les vêtements disparaissent. Et alors que cette image prend du temps pour venir ici, Grady Int et Close Icône apparaîtront à ce moment-là. Comme vous pouvez le voir ici et lorsque vous cliquez en arrière, c'est juste une transition en douceur. Maintenant, vous pouvez le faire de plusieurs façons. Vous pouvez, par exemple, montrer Nous allons le faire aussi. Donc, si vous sautez à la conception, vous pouvez double-cliquer, vous pouvez augmenter la taille. Donc, par exemple, juste ici, voyons. Et quand on a frappé Privy et maintenant tu peux voir à quoi ça ressemble. Donc, il effectue un zoom avant et un zoom arrière, rebondit en place si c'est quelque chose que vous souhaitez explorer. Mais je pense que cela fonctionne très bien. Donc, lorsque l'aperçu de la chaleur, il s'agrandit simplement dans cette image afin que nous puissions la voir un peu mieux et il saute en place. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 73. Autres fichiers Xd: dans cette vidéo, je vais vous montrer les autres fichiers X'd. Donc, fondamentalement, est le même fichier que avec toutes les autres conférences précédentes et vous avez vu dans les sections précédentes hors discours et ces oeufs souillures sont là pour vous aider le long et les orteils, peut-être vous apporter un peu plus près de les détails. Si vous avez manqué quelque chose pendant la vidéo afin que vous puissiez sauter à l'intérieur, vous pouvez vraiment le disséquer. Sautez dans les détails et vous pouvez, bien sûr, utiliser tous ces éléments pour votre usage personnel et commercial. Vous pouvez également copier et coller ces images si vous choisissez de les utiliser dans vos propres projets personnels . Et enfin, vous pouvez utiliser ces couleurs et icônes, images et boutons et ainsi de suite dans vos projets personnels. Maintenant, enfin, si je saute ici dans le panneau des actifs, vous pouvez voir toutes ces couleurs qui ont été sélectionnées, et ce sont des pièces et des dessins, et vous pouvez utiliser ces couleurs à nouveau, cliquez simplement avec le bouton droit de la souris copier cette couleur et la baser dans votre propre conception. Si vous le choisissez, vous pouvez également disséquer et les dessins un peu plus loin afin que vous puissiez sauter ici. Vous pouvez ouvrir les écrans et vous pouvez sauter. D' ailleurs, voir qu'ils ont mentionné. Voir les couleurs, les effets et vous pouvez si vous aimez cet effet, par exemple, de cette ombre portée, vous pouvez simplement faire un clic droit sur cette copie et le coller dans votre propre design si vous le souhaitez. Enfin, vous pouvez prévisualiser toutes ces animations afin que vous puissiez simplement cliquer dessus. D' abord notre port hors, quelle que soit la partie que vous voulez. Vous pouvez frapper l'aperçu et condamner, inspecter et voir ce que j'ai fait. Et vous pouvez également sauter en mode prototypage et zoomer à l'intérieur et cliquer entre ces écrans et voir quelles interactions j'ai utilisées de sorte que si vous avez manqué quelque chose seulement vraiment comme cette interaction, vous pouvez utiliser exactement la même sur votre conceptions. Donc c'est fondamentalement tout pour cette section, et c'est essentiellement pour ces sections d'animations. Dans la section suivante du cours, nous allons sauter et concevoir un mobile à partir de zéro, et nous allons mettre en œuvre tout ce que nous avons appris dans le cours jusqu'à présent dans la création et le prototypage de notre application mobile. Nous allons concevoir une application avec plusieurs écrans. Nous allons créer des interactions personnalisées entre les éléments et nous allons mettre au tout ce que vous avez appris jusqu'à présent dans ce cours. Et nous allons passer des conceptions statiques, orteils magnifiquement animés dessins que nous allons ensuite présenter à nos clients et obtenir commentaires pour eux. Je te vois dans la prochaine vidéo. 74. Résumé de design: dans cette vidéo, je vais partager avec vous le mémoire de design que j'ai reçu du client. Et je vais vous donner ce modèle et vous pouvez l'utiliser pour vos propres projets si vous souhaitez. Il vous suffit de modifier ce texte en fonction de vos propres clients et de l'information que vous avez obtenue d'eux et de l'information que vous allez obtenir de vos clients, vous pouvez trouver à l'intérieur de ce descriptif. Laisse-moi zoomer un peu plus près. Ce que nous avons ici est l'application mobile obturateur, et le client est briser application mobile. Et la date limite est le 12 décembre. Maintenant, ici, nous avons le profil de l'entreprise. Il y a donc une petite entreprise de Belgrade, Serbie, et leur objectif est de créer une application mobile permettant aux utilisateurs de partager des images qu'ils ont prises avec leur téléphone ou leur appareil photo professionnel. Ensuite, pour partager ces images avec la communauté de photographes amateurs et professionnels. Ils peuvent ainsi obtenir quelques trucs et astuces sur la façon d'améliorer leurs images et de devenir meilleurs photographes là-bas Une petite équipe de cinq personnes et ils viennent d'obtenir le premier tour de financement avant de passer à la prochaine ronde, où ils tentera d'obtenir des fonds pour le développement du site Web et d'élargir encore leur équipe. Ils ont gagné le poste et tout est situé dans ce bureau à Belgrade, en Serbie. Maintenant, ce que cela nous dit est tout ce que vous devez savoir sur l'entreprise elle-même, sur son objectif principal et sur ce que vous devez créer pour eux, qui est une application mobile pour les photographes amateurs et professionnels où ils peuvent partager leur images avec la communauté ci-dessous que nous avons le projet Oreo. C' est donc le projet en soi. Donc, ils ont besoin d'une application mobile créée et s'ils sécurisent le site Web de financement ainsi, ce qui signifie que nous allons commencer avec l'application mobile d'abord et ensuite, si le financement est sécurisé, ils nous demanderont alors de créer un site web également. Ils essaient de créer une communauté de photographes amateurs et professionnels qui vont partager leur passion avec la communauté tout en obtenant des conseils et des astuces de photographes plus expérimentés . Donc c'est la chose principale. Ils essaient de construire une communauté à partir de gens qui sont juste intéressés par la photographie elle-même, donc ils n'essaient pas d'obtenir des gens qui veulent partager leurs repas et leurs vidéos de chat et quelqu'un qu'ils veulent juste des photographes, amateurs et pros de partager leur amour pour la photographie. À l'intérieur de cette communauté, le but de l'APP plus tard serait de payer l'adhésion pro et d'obtenir dur par les clients est un photographe pour les cérémonies de mariage, les intérieurs de beaux-arts et cetera. Pour les 12 premiers mois. Ils veulent juste attirer des personnes spécifiques passionnées par la photographie, orteils leur application avant de commencer à pousser pour ces changements une fois qu'ils ont assez d'utilisateurs sur la plate-forme. Donc, fondamentalement, en termes simples, cela va être une application gratuite conçue, sorte qu'elle attire les photographes à elle. C' est libre. Donc, tout le monde se met contre commencé et quand ils ont commencé à l'utiliser, quand je commence à aimer dans 20 Creator communauté, alors ils vont déployer ces changements et inclut la possibilité de devenir membre professionnel cette application. Et puis vous déverrouillerez ces fonctionnalités comme obtenir, par exemple, des réductions sur votre équipement, obtenir quelques recommandations sur très. Pouvez-vous acheter ce matériel et aussi, la principale chose importante ici est de trouver un emploi afin que les gens seront en mesure de vous embaucher via cette application, et vous allez être en mesure de travailler comme un photographe. Ensuite, nous avons des buts et des objectifs. Ils veulent donc attirer autant de personnes dévouées. Il est possible de l'application et dédié est le mot clé ici. Gardez-les fiancés et signés. Plus de gens au cours des 12 prochains mois vont obtenir 10 000 utilisateurs la première année et passer à 20 000 la deuxième année avant qu'ils ne soient tous ces changements. Donc, c'est essentiellement maintenir. Ils veulent juste autant d'utilisateurs que possible à cette application. Et puis, quand ils sont tous dehors, les changements pour essayer de garder ces utilisateurs existants, ainsi que d'amener de plus en plus d'utilisateurs à l'APP. L' objectif principal est de créer une application mobile qui semble simple et claire et d'être facile à l' œil avant qu'ils ne fassent ces grands changements ici, aussi, aussi, et ensuite introduire de nouveaux éléments de conception comme les tableaux de prix offrent des offres d'emploi parce que tous les ces nouveaux éléments de conception vont changer radicalement la conception de l'APP. C' est pourquoi ils veulent la version. Vous voulez être extrêmement simple, extrêmement facile à utiliser, et un natif donc essentiellement pour ressembler à Instagram, Pinterest , Facebook, tous combinés. Peut-être sur Twitter. Et il suffit de déployer dès que possible pour obtenir ces nouveaux utilisateurs et de les attirer à l'application ci-dessous que nous avons public cible Donc les personnes d'âge moyen à la recherche d'un endroit dédié pour partager la passion pour la photographie. Âges entre 24 65 Le sexe doux est 30% de femmes, 70% de sexe masculin Pays du président Serbie C'est pour l'instant. Ville de résidence. Belgrade Encore pour l'instant, au début, sur le lieu de travail Les gens qui ont un emploi de jour mais qui cherchent aussi un emploi secondaire. habitudes de consommation des médias. 60% sur instagram. Donc, ils aiment vraiment leur photographie 30% de nouveau à. Peut-être qu'ils sont à la recherche de quelques trucs et astuces sur la façon de peut-être même investir un peu plus dans leur équipement, comment améliorer ses photographes et ainsi de suite. Et enfin, 10% de Facebook. Peut-être qu'ils visitent certains groupes Facebook et obtiennent quelques trucs et astuces. Ils sont enfin nous avons des habitudes quotidiennes, personnes tellement occupées avec un style de vie créatif, ce qui signifie qu'elles travaillent sur leur travail de jour. Comme vous pouvez le voir ici, mais ils ont que dans son ensemble, être hors photographie. Ou peut-être qu'ils sont des photographes professionnels, mais qui cherchent à laisser un peu de vapeur, en utilisant une application mobile dédiée pour les photographes ci-dessous que nous avons des exigences de conception, donc ils ont besoin d'un iris Mobile. App conçu version Android viendra plus tard. Ils croient que les utilisateurs d'Iris paieront plus que les utilisateurs d'Android, en particulier dans cette communauté où les gens dépensent beaucoup d'argent sur la photographie ici. Dimensions acides. Donc, les résolutions sont iPhone X au début. D' autres versions seront créées ultérieurement si nécessaire. Cela signifie qu'ils vont tester et voir combien d'utilisateurs téléchargent leur application. Ensuite, ils vont déployer une petite enquête et leur a demandé,par exemple, par exemple, Connaissez-vous quelqu'un qui a dans un iPhone plus grand ou un iPhone plus petit, toutes les versions plus anciennes ou une version plus récente, et puis ils seront en mesure de dire ? Ok, donc on a cet utilisateur. Peut-être que nous pouvons commencer à déployer un iPhone plus grand ou un iPhone plus petit, quelque chose comme ça avant qu'ils ne passent à la version Android, et puis ils feront la même chose à nouveau. Donc, par exemple, quand est-ce que tout est sur le haut, est-ce pas ? Quelques-uns ? Certains utilisateurs sont les utilisateurs inquiets ou quelque chose comme ça. Et puis ils seront en mesure d'adapter cela à ces utilisateurs du Pacifique ci-dessous que nous avons des formats de fichiers. Donc Adobe X'd est le fichier principal du projet, et les actifs vont être en SPG et PNG, et je voudrais vous montrer comment vous pouvez exporter des vidéos aussi besoin Qala palette. Nous allons en créer un pour eux pour l'instant. Et puis dans la deuxième année, nous allons changer complètement les images à inclure. Donc, des images gratuites avant que les utilisateurs commencent à télécharger leur propre contenu lorsque nous allons utiliser des images gratuites pour concevoir cet EP et enfin associer des documents de copie, David livrer la copie finale avant de lancer l'APP essentiellement et placer ou perdre Toby, y compris à la place. Cela signifie que nous allons juste utiliser beaucoup de texte ipsum dans ces espaces réservés. Enfin, nous avons le budget et le calendrier, sorte que le budget est divisé en parties d'arbres. Il en est de même pour le projet lui-même. Donc, nous avons iris, alors nous avons site Web et enfin nous avons la version android. Donc 2400 pour l'exploration, planification, conception Iose et la préparation 3600 pour la conception complète du site Web et la création pour Responsive parce qu'il aura beaucoup hors pages. Et c'est pourquoi nous avons besoin orteil obtenir autant de leur attention que possible et de créer un site web réactif dès le début et enfin, 2400 pour la version Android, car il sera fondamentalement exactement le même que Iris mais adapté pour Android 50% à avance, 50% après la livraison des actifs. Cela signifie que lorsque nous aurons terminé le projet et que nous serons prêts à livrer les fichiers finaux au client, il le fera. Ils nous payent ces 50%. Donc, après la planification de la livraison d'acide, cela prendra cinq jours. La recherche. Trois jours de recherche d'audience, trois jours de conception, quatre jours de présentation. La révision d'aujourd'hui cinq jours et le total de la livraison est en 22 jours. Donc, toutes ces informations signifient que nous savons à qui est le client. De toutes ces informations que nous avons recueillies, nous savons à quel point ils ont besoin de leur public cible. Qui exactement tentent-ils de cibler, Qui, exactement, ils essaient de faire utiliser leur application essentiellement ce qu'ils vont développer, comment s'est passé et où. Donc, nous connaissons tous ces détails afin que nous puissions commencer à concevoir tout de suite. Et dans la prochaine série de vidéos, je vais vous montrer ah, processus de conception que j'ai adopté il y a presque 10 ans et que j'utilise pour tous mes projets et nous allons y arriver dans la prochaine vidéo. 75. Planification de projet: Ce que j'aime faire pour chaque projet, c'est la planification de projet. Cela signifie que je peux planifier tous les écrans fondamentalement dont j'ai besoin au début, et alors évidemment tous les écrans peuvent se ramifier à différents écrans plus tard. Mais ce sont juste un point de départ moyen pour moi afin que je puisse comprendre quels verts n'ont pas besoin de concevoir et combien de temps faire tout pour consacrer orteil cette application fondamentalement, avant que je puisse obtenir orteil ah, plus grande portée du projet et sauter à l'intérieur de tous de ces différents écrans et éléments , puis les disséquer un peu plus loin et ensuite aller dans beaucoup plus de détails parce que tous ces projets peuvent prendre des mois à créer, surtout quand vous commencez. Vous pensez que vous avez comme, par exemple, 10 écrans différents, mais indien. Tu finis avec 100, donc c'est vraiment important orteil. Obtenez ce projet. planification a commencé avant d'envoyer le descriptif de conception au client avant d'envoyer votre tarification au client, car vous pouvez vraiment vous réduire à ce stade avant même de savoir quelle est la taille réelle du projet. Donc, il est vraiment important de se rendre à un morceau de papier et d'œufs dans ce cas, et juste écrire certains des écrans principaux que vous allez concevoir et ensuite partir de là. Donc, ce que nous avons pour le début est l'écran de chargement. C' est alors qu'ils ont ouvert l'application, et évidemment ils vont sauter orteil à l'intérieur de la connexion de haut en bas avec leur Facebook ou avec leur email. Mais on ne va pas à la frontière des orteils avec ça. Pour le moment, nous avons l'écran d'accueil, qui est l'écran principal, et c'est essentiellement là où se trouvent leurs pieds. Et ça ressemblera beaucoup à Instagram parce que c'est ce que le client veut que nous créions. Ensuite, nous avons l'image ouverte de la maison, donc ils vont cliquer sur l'image et l'ouvrir ici. Nous avons ajouté une nouvelle image parce que ce sera une barre d'onglets en bas de ces écrans, et ils vont être en mesure d'ajouter de nouvelles images à la fois de la galerie. Comme vous pouvez le voir ici et de la caméra. Nous allons concevoir la galerie parce que nous ne allons pas nous embêter avec la caméra parce que c'est juste une caméra IOS de base par défaut, donc il va ouvrir cela. Mais nous allons juste rapidement conçu cette image d'édition de la galerie. Quelques écrans, Donc nous allons concevoir quelques curseurs. Donc, pour Indy, par exemple, la luminosité, contraste, peut-être la netteté et ainsi de suite. Ensuite, nous allons concevoir un écran de recadrage, afin qu'ils puissent recadrer cette image. Et enfin, nous avons la description de l'image et publié. Donc, après avoir cliqué sur Nouvelle Image, ajouté à partir de la Galerie, édité l'image complètement. Ensuite, avant de publier, ils vont ajouter une image, une description et des balises, puis cliquer sur Publier. Nous aurons des goûts parce qu'ils vont pouvoir voir les goûts qu'ils ont reçus profil. Donc, leur profil dans leurs images sur le profil et ils vont être en mesure d'inclure, par exemple, icônes de médias sociaux là-bas. Ce sont juste une description de base. Donc, nous allons avoir le tableau de bord et en vue du tableau de bord. Ils vont être en mesure de voir le nombre total off aime,par exemple, par exemple, la Quand notre journée dans leurs images les plus aimé à la fois fois fois fois de la journée au cours de laquelle, par exemple, et ainsi de suite. Et enfin, nous allons avoir le menu du site, qui est juste en train de tourner les pieds, essentiellement attirer tous ces différents écrans ensemble et il va apparaître de décider par le haut. Vous allez voir cela dans le processus de conception lui-même. Donc, il y en a essentiellement pour la planification du projet. Comme je l'ai dit, ce n'est qu'un début difficile. Ainsi, à partir de cet écran d'accueil , par exemple, vous pouvez concevoir cinq écrans différents. Fondamentalement, à partir de cette image ouverte, vous pouvez même aller un peu plus loin et concevoir beaucoup d'écrans différents. Mais ce n'est que votre point de départ afin que vous puissiez envelopper votre tête sur ce qui est important à concevoir à cette première étape. 76. Croquis: dans cette vidéo, je vais montrer comment vous pouvez esquisser nos années sur les pieds juste morceau de papier simple. Mais avant que je le fasse, je voulais te montrer ça. Ce sera notre structure de projet. Donc, au fur et à mesure de ces leçons et de ces vidéos, nous allons ajouter de plus en plus, et ensuite nous allons passer à remplir la majorité de cet espace. Mais avant nous le faisons, comme vous l'avez vu dans les vidéos précédentes, nous avons le dossier de conception. Nous avons la planification du projet que nous avons déjà couverte, et maintenant nous avons ces croquis. Maintenant, ce ne sont que les croquis et que j'ai esquissé sur les orteils un simple morceau de papier blanc. J' ai scanné le principal à l'aide de mon scanner. Mais si vous n'avez pas de scanner, vous pouvez simplement prendre une photo avec votre téléphone et juste inclus dans votre ex Defile. Et ils sont vraiment utiles parce que vous pouvez simplement dessiner certaines de vos idées sur papier avant vous allumer. X'd fondamentalement, et vous pouvez simplement bloquer certains des morceaux blancs et la majorité des éléments que vous voulez inclure. Alors peut-être que vous avez quelques idées que vous inspirez vous-même sur ces sites de conception, par exemple, dribble ou être des boîtes ou quelque chose comme ça, et puis vous voulez juste orteil. Mettez ces idées sur papier avant de commencer à concevoir. Donc, je recommande vraiment cela parce que vous pouvez juste cracher toutes vos idées sur papier, voir ce qui fonctionne, ce qui ne fonctionne pas. Ensuite, vous pouvez commencer à concevoir dans Adobe X'd. Donc, comme vous pouvez le voir ici, j'ai 12 écrans, comme je vous le montre déjà dans la vidéo précédente avec la planification du projet. Mais maintenant, ce que nous avons ici est un écran de chargement, qui va juste être leur logo, et nous allons inclure un bon peu d'animation sur cet écran de chargement. Nous allons jouer avec quelques arrière-plans et ainsi de suite avant les transitions vers l' écran d'accueil . Ici, nous allons avoir la barre supérieure avec la flèche arrière et le menu retour. Arrow ne sera évidemment pas là, mais je l'ai juste inclus partout parce qu'il est plus facile pour moi de dessiner et de bouger le long. Cela parce qu'il s'agit d'un processus rapide et non d'un processus long. Donc, vous voulez juste mettre autant d'idées que vous voulez sur le papier. Ainsi, par exemple, sur un papier, vous avez 10 écrans d'accueil différents et faites simplement quelques explorations de conception de base. Voyez ce qui fonctionne, ce qui ne fonctionne pas, puis déplacez le long de tous ces écrans en utilisant les mêmes techniques. Donc, voici va avoir l'image de l'utilisateur ou sont amers. Je vais avoir leur nom, emplacement sur l'image ou les timbres. Donc, par exemple, Dispose posté il y a 23 minutes ou quelque chose comme ça. Nous allons avoir l'image elle-même. Nous allons avoir quelques icônes de base ici, et ensuite nous aurons l'emplacement ou l'horodatage. Donc, je vais juste décider que nous allons avoir le texte, qui est la description de cette image et enfin les commentaires ci-dessous. Nous allons avoir les barres supérieures que vous voyez dans beaucoup de ces écrans, et ils vont contenir les icônes principales et les autres éléments de menu vont être ici à l'intérieur de ce menu. J' appelle qui quand vous appuyez dessus, il va afficher ce menu latéral avec X pour la fermeture, et vous pouvez taper tous ces autres éléments pour aller à l'intérieur de ces autres écrans. Ici, nous avons l'image ouverte, donc quand vous cliquez sur cette image, elle l'ouvrira pour être un peu plus grande, et vous allez explorer les commentaires là-bas. En gros. Donc, nous allons déterminer cela avec le client un peu plus tard s'il veut montrer les commentaires immédiatement ici sur cet écran ou s'il est entendu et ensuite avoir un autre écran dédié, comme le fait Instagram. Donc, lorsque vous cliquez sur les commentaires, il va ouvrir cet écran, puis vous pouvez lire tous les commentaires que nous avons à New Image. Donc, une de ces icônes en bas sur le haut va avoir cette icône ajouter une nouvelle image . Donc, quand vous appuyez dessus, il ouvrira ce cri. Il contiendra une illustration, et je suis bon spectacle où vous pouvez obtenir les illustrations gratuites pour l'écran et nous allons avoir galerie et caméra. Ainsi, des années, il peut y avoir une dette en mesure de taper un à la galerie pour ouvrir l'image de leur galerie ou ouvrir la caméra tout de suite que de capturer l'image et ensuite inclus dans le remorquage. Cette application ci-dessous que nous avons la galerie, donc quand ils cliquent ici, ils vont à la galerie et sélectionner l'image qu'ils veulent. L' image se chargera sur cet écran d'image ajouté, et ils seront en mesure d'avoir tous ces curseurs. Peut-être que nous allons avoir une icône de sauvegarde juste ici et d'avoir peut-être l'icône de l'écran divisé ou quelque chose comme ça pour nous montrer l'avant et après cette image qu'il a terminé. Et nous allons avoir la flèche arrière pour qu'ils puissent revenir dans galerie et y inclure d'autres images. dessous de ça, nous allions avoir la récolte. Donc on va passer à autre chose. Fondamentalement, quand vous pourriez sauver, il vous montrera la récolte. Si tu veux recadrer, tu peux. Si ce n'est pas le cas, vous pouvez simplement obtenir en sécurité, puis aller à cette description barre oblique publiée écran. Très. Nous allons pouvoir voir son image Toe a ajouté le texte. Vous voulez des hashtags et ainsi de suite. Et pour ajouter un emplacement hors de l'image si l'emplacement est inclus et majoritairement désactivé, ces nouveaux formulaires, en particulier les iPhones, ont cette fonctionnalité pour que vous puissiez utiliser cet emplacement ou vous pouvez rechercher l'emplacement dans le APP, et vous pouvez ajouter un emplacement différent si vous le souhaitez. Et puis nous avons le bouton, qui est essentiellement un bouton publié, et quand vous devriez publier, il vous ramènera à l'écran d'accueil. Et il remplacera cette première image par votre image que vous venez de publier ci-dessous que nous avons Tableau de bord, qui allaient accès aux pieds à partir du menu latéral et tableau de bord va vous montrer différents graphiques. Et il va montrer différentes informations où,par exemple, par exemple, vous pouvez accéder aux moments les plus appréciés par jour de poster. Donc, vous savez, est allé poster vos images ensuite et ce genre d'informations. Ainsi, par exemple, nos utilisateurs, femmes ou hommes qui sont la plupart du temps comme dans vos photos quelles photos sont plus populaires portrait hors paysage ou quelque chose comme ça. Nous allons explorer cela dans la partie design hors discours. Ensuite, nous allons avoir, comme si les gens peuvent accéder à des goûts à partir de cette barre d'étape, et ils vont juste voir essentiellement l'utilisateur de l'image qui a aimé cette image et le temps qu'ils seront donc en mesure de dire Quand cette image a-t-elle été aimée ? Nous allons avoir un profil, ce qui est, bien sûr, bien sûr, accès à partir de cette barre d'étape. Donc, nous allons avoir l'image de l'utilisateur, leur description de nom, peut-être des icônes de médias sociaux juste ici, ainsi que leurs images qu'ils ont posté sur cette application. Enfin, nous avons un menu latéral, donc tous les éléments qui ne sont pas à l'intérieur de l'arrêt notre ou la barre de pression vont être situés dans ce menu de côté, et ils vont être en mesure d'accéder à tous ces éléments en utilisant cette icône. Cette icône X ou fermer va apparaître et puis ils peuvent le fermer et cet écran va disparaître. Et nous allons utiliser quelques techniques de superposition lorsque nous incluons l'écran au-dessus. Tous ces autres écrans, qui ont cette option pour nous afin que nous puissions cliquer sur l'icône du menu latéral et ce menu latéral va apparaître. Donc, ce sont essentiellement des cadres de fil de départ de base. Ils vont évidemment changer, surtout dans le second tour de ce projet, quand nous commencerons et inclura de nouvelles fonctionnalités dans la deuxième année à partir de maintenant. Mais pour commencer, il y a juste un bon point de départ et nous pouvons commencer avec nos cadres métalliques , et c'est ce que nous allons faire. Dans la prochaine série de vidéos. Nous allons tourner les croquis dans des cadres de câbles de remorquage, en utilisant la description du descriptif que le client nous a donné. Donc, l'iPhone X dans notre cas pour le point de départ. Et nous allons transformer ces croquis en cadres de fil à part entière et ensuite plus veulent inclure des images incluant différentes couleurs et ombres pour créer un design fini avant passer au prototype et d'animer tous ces écrans vers le haut et avant que nous les renvoyer au client. C' est tout pour cette vidéo, et je te verrai dans la prochaine. 77. Créer des Wireframes 1: dans cette vidéo, nous allons commencer à préparer les cadres métalliques, et comme vous pouvez le voir ici, j'ai ajouté rapidement. Ah, guide de style et j'ai inclus quelques icônes que nous allons utiliser dans ce projet. Et j'appelle ce guide de style parce que nous allons inclure des couleurs, formes, une illustration que nous allons utiliser un peu plus tard. Et nous allons tout définir ici pour être facilement accessible pour leurs développeurs et pour le client s'ils choisissent de choisir et de copier et coller certaines de ces icônes ailleurs s'ils le souhaitent. Donc, pour résumer rapidement ce que nous avons fait jusqu'à présent, nous avons le dossier de conception dans lequel nous avons toutes les informations pertinentes que nous devons inclure dans notre conception. Ensuite, nous avons la planification de projet, qui ne sont que les principaux écrans que vous allez concevoir. Après cela, nous avons créé nos cadres métalliques sur papier, en utilisant juste un simple crayon avec une moyenne scandale et nous les avons inclus dans un document Adobe X'd lointain , que nous allons faire référence un peu plus tard parce que nous sommes va utiliser certains de ces noms à l'intérieur sont hors de nos ports et enfin nous avons maintenant dans ce guide de style, que j'ai inclus avec les icônes et juste ce logo de base qu'ils ont envoyé ici. Maintenant, si je clique dessus, vous pouvez voir que c'est le logo de l'obturateur et il a juste une partie. Donc tout est fusionné ensemble. Mais quand nous aurons O animation, nous allons animer certains d'entre eux parce que nous devons les inclure et ensuite une sorte de les sélectionner. Et je vais vous expliquer ça un peu plus tard quand vous arriverez à animer ça, mais ça ne va pas rester dans ça ressemblant à ça. Alors maintenant, commençons à ajouter certains de nos ports, et nous allons en inclure 12 parce que nous allons avoir 12 écrans pour notre conception pour inclure une nouvelle carte. Vous pouvez cliquer ici et nous allons à la pointe. Ajouter iPhone 10 et 10 s d'ici, et je vais orteil appeler cet écran de chargement comme il suffit de double-cliquer sur ce texte ici en haut, et vous pouvez ensuite ajouter votre nom hors de l'aéroport. Je vais en faire quelques copies. 23456789 10 11 12 parce que nous allons avoir 12 écrans différents. Laisse-moi vite contrecarrée. Donc, pour 8 12 comme si je vais double-cliquer ici et taper à la maison. Cela va être l'image ouverte. La prochaine sera à une nouvelle image. Non, celui-là va être à la galerie. Cela va être ajouté image. Celui-ci va être une description slash publication parce que nous allons avoir un fond publié juste ici. Ensuite, nous pouvons créer un tableau de bord comme nous allons créer des J'aime pour la liste des goûts que nous allons créer un profil. Nous allons créer un menu latéral et me laisser compter rapidement une fois de plus. Donc pour 68 10 11 en manquant un de plus, j'ai besoin d'ajouter la culture ici, donc je vais ajouter le groupe. Ensuite, après cela vient la description de l'image slash publier Après cela vient dans le tableau de bord , puis aime pour un formulaire et enfin menu latéral. Donc c'est fondamentalement tout pour cette partie de création. Je vais juste les séparer légèrement du reste de nos ports. Donc peut-être quelque chose comme ça, peut-être 200 pixels de ceux-ci, juste pour que nous puissions avoir un peu plus d'espace. Ça va être notre cadre métallique. Deuxième Presti, cliquez ici à l'extérieur dans la plinthe et vous pouvez taper des cadres de fil. Vous pouvez entendre contrôler un sable de sable ouvert. Utilisons 200. Génial, grand et affaibli. Positionnez-le quelque part par ici et peut-être par ici. Alors maintenant, nous avons nos cadres métalliques mis en place. Je voulais juste ajouter une chose plus rapide à l'intérieur de cette vidéo, et c'est une partie de statut. Je vais me baser sur les orteils d'ici. Et faisons des petites lettres ici. Et je vais simplement frapper Control V. Et j'ai pris ça à partir d'une autre application, et si vous ne savez pas comment trouver ça, vous pouvez aller ici à la maison. Vous pouvez aller orteils adultes. Tu peux aller à toi. Je kits, et quand vous cliquez juste là, il vous emmènera à leur site Web. Il suffit de télécharger IOS officiel d'Apple. Tu aimes ça ? qu'il en soit au moment où vous regardez le discours. Ainsi, par exemple, en ce moment, ils ont IRS 13 appâts vers le haut. Mais je ne vais pas télécharger cette version bêta parce qu'elle contient encore des bugs, et ils ne les ont toujours pas écrasés. Mais je vais utiliser IOS 12 parce qu'il est déjà à part entière et expédié dans tous leurs appareils. Mais si vous voulez plus tard, vous pouvez également utiliser IRS 13. Ceux juste certains, disons que les changements de menu. Ils ne sont pas si gros, mais vous pouvez le télécharger. Si vous utilisez eggs E sur votre Mac, il vous suffit de l'ouvrir et vous pouvez avoir que vous aimeriez l'ouvrir. Si vous l'utilisez sur vos fenêtres, vous avez remorqué. Décompressez-le parce qu'il vient comme une image DMG, et vous pouvez le décompresser En utilisant sept zip, par exemple, vous pouvez simplement faire un clic droit et décompresser cela sur votre bureau, et quand vous décompressez cela est à quoi il ressemble. Donc c'est l'Iris original et officiel. Vous l'aimez d'Apple eux-mêmes, sorte que vous pouvez vraiment plonger profondément ici, et vous pouvez cliquer ici pour les actifs. Vous avez toutes ces couleurs officielles. Vous avez tous ces fonds officiels, symboles, symboles, icônes et ainsi de suite. Mais ce que nous sommes intéressés est juste d'arrêter, sont malades et cliquez dessus de n'importe qui hors de ces écrans et vous pouvez simplement plonger un aperçu profond et nous allons voir, état est où vous pouvez faire un clic droit ici ou appuyez sur le contrôle C, copier à partir d'ici, puis il suffit de le coller dans le vôtre. Nos ports. C' est ce que j'ai fait ici. Et je peux frapper le contrôle C sur celui-ci et zoomer un peu. Sélectionnez le reste de mes planches frapper le contrôle V et voilà. C' est badigeonné partout, mais avant de le faire, je veux cliquer dessus, appuyer sur le contrôle, commande K et faire un symbole. Et si vous sautez ici, vous pouvez le voir. Ajout de cela aux composants. Donc, nous avons le composant de barre d'état juste ici et vous condensez. Appuyez simplement sur le contrôle C. Ensuite, sélectionnez tout sauf pour le menu, parce que nous n'en avons pas besoin à l'intérieur du menu. Frappez le contrôle V, et ça va aux pieds. Ramenez-les ici, et il va les coller en tant que composants enfants. Donc c'est le composant principal parce qu'il a ce diamant juste ici, et tous ces composants sont des composants enfants. Vous pouvez apporter des modifications à ces composants enfants sans pertinence à partir de ce composant maître. Mais une fois que vous faites un changement. Donc, le composant de la mosquée va orteil appliqué que changer d'orteil tous les composants de l'enfant froid . Donc, si je saute ici et, par exemple, changé ce style de temps du noir au rouge, peut-être que vous pouvez voir qu'il change pour lire en temps réel sur tous ces, de sorte que fondamentalement il pour cette vidéo, et c'est essentiellement tout pour notre préparation. Et dans la prochaine vidéo, nous allons entrer et commencer à concevoir nos cadres métalliques, et je vais vous montrer comment nous pouvons mettre en page ou certains de ces éléments. Heiken utiliser des guides en haut peut faire face Ian Pace sur ces éléments pour rendre votre travail beaucoup plus facile et beaucoup plus rapide. 78. Créer des Wireframes 2: commençons pas à créer nos cadres métalliques et je sauterai à l'intérieur de notre guide de style. Cliquez sur le bouton de touche du logo C. Cliquez sur l'écran de chargement. Toucher le contrôle. On va aux pieds. Placez-le sous les escaliers. Barb a frappé ce milieu, cette extrémité du milieu. C' est tout pour l'instant, parce que ce sera juste un écran de chargement. Et dans la section suivante du cours, lorsque nous commencerons le prototypage et ajouterons des animations à cela, nous allons inclure des animations et des joueurs sur. Mais pour l'instant, restons là. Maintenant, nous allons sauter à l'intérieur d'un écran d'accueil et commençons à créer cela. Donc, je vais utiliser mon outil rectangle, et je vais dessiner un joli gros picotement de fissure, qui va être 375 avec 88 comme ça, et je vais l'ajouter au sommet. Déplacez-le en dessous, et je vais appeler ça jamais bar B G. Donc je vais inclure une légère ombre portée. Positionnez-le ici et retirez la bordure, et laissons-la au filet. Maintenant, nous allons créer un texte ou affaiblir. Il suffit d'ajouter un local juste ici au centre. Faisons ça, je vais cliquer ici. Touchez le contrôle C il contrôle V Et je vais frapper le contrôle de changement de vitesse et gauche Cliquez sur ma souris, et je vais le positionner quelque part ici pour le début. que Peut-êtreque20 pixels de cette bouteille correspondent. Positionnez-le là. Et maintenant ce qu'il nous faut gagner. Ces deux icônes vont frapper le contrôle C pour les copier. Saute à l'intérieur juste ici. Frappez le contrôle V et je vais aux orteils. Positionnez-les comme ça va se passer ici. Ça va aller juste ici. Maintenez la touche Maj 12 pour la positionner en 20 pixels à partir de la gauche. Maintenez la touche Maj 1 jusqu'à la position en 20 pixels. Et puis je vais sélectionner le menu de l'appareil photo et l'obturateur tout à la fois. Cliquez ici pour les positionner au milieu, puis déplacez-les, par exemple, 10 pixels de ce bord inférieur. Et je pense que ça a l'air bien. Donnons à cela un peu de couleur, et nous allons utiliser ces mêmes zones de couleurs pour les utiliser dans les vidéos précédentes. Donc trois C six effort, comme ça et laissez-le être bleu. Et ça a l'air bien. Maintenant, allons regrouper tous ces éléments. Déplaçons la barre d'état hors du chemin. Donc, nous avons une caméra, nous avons obturateur, qui est notre menu logo. Et jamais Barbie G n'est allé à sélectionner. Tous, avait le contrôle G et appelé cette barre naff comme Donc maintenant c'est la conception des robinets en bas. Aller et choisir mon rectangle pour dessiner une fois de plus simplement un joli grand rectangle. Je vais aux orteils. Retirez la bordure et vous pouvez inclure l'ombre si vous le souhaitez. Mais je vais juste changer la couleur de son légèrement pour quelque part par ici. Peut-être juste pour qu'on puisse le voir. Et pour ses dimensions. Il fait 375 et la hauteur est 83. Je vais le déplacer vers le bas comme ça, puis je vais simplement sélectionner l'indicateur d'accueil de mon autre écran. Je vais le coller en place, et cet indicateur de la maison que j'ai pris du kit officiel IOS je n'aime vraiment pas cette couleur. Quels changements à cette couleur ? Ouais, ça a l'air mieux. C' est juste une belle couleur grise. Et nous allons utiliser certaines de ces icônes. Alors utilisons ces quatre coups de contrôle C Je vais sauter ici. Contrôlez le film et je vais les déplacer vers le bas. Voyons voir, ils sont dans un groupe pour qu'on puisse se positionner comme ça, donc ils sont au milieu et peut-être qu'on peut utiliser un rectangle. Allez sur le bord supérieur de cet arrière-plan, dessinez un grand rectangle, puis sélectionnez ce groupe positionné au milieu, comme si allé orteil. Supprimer ce rectangle et je vais orteil. Déplacez tout cela vers le bas avec l'indicateur d'accueil rectangle. Cela va être la barre d'onglets B G comme Donc c'est l'indicateur de la maison, et ce sont juste des icônes. Donc, déplacons-les hors de ce groupe pour supprimer le groupe et ce dont nous avons besoin, c'est repositionner certains d'entre eux. Donc nous allons déplacer ces trois, par exemple, 20 pixels plus 20 et cela va être 20 aussi bien, Alors peut-être que nous pouvons les regrouper, déplacer le groupe au centre, et je pense que ça a l' air génial. Maintenant, je peux les désoigner ou je peux les laisser à l'intérieur. C' est vraiment après moi, mais je vais aller aux pieds. Développez-les parce que ce sera ah, beaucoup plus facile à sélectionner un peu plus tard maintenant, parce que c'est notre écran d'accueil. On va changer son orteil de couleur. Trois C six ff, comme ça, et vous pouvez ajouter ceci à votre nuance de couleur pour que vous puissiez l'enregistrer comme ça. Vous pouvez appliquer cette nuance de couleur, et vous pouvez également cliquer ici sur les éléments. Cliquez sur les couleurs et vous pouvez choisir cette couleur parce que c'est nos principales grandes couleurs à 70 70 70 70 si vous vous souvenez des vidéos précédentes, et vous pouvez utiliser cette couleur si vous voulez. Maintenant, je vais utiliser la même couleur pour ça. Donc c'est 70 70 70 70 et nous allons cliquer ici et sélectionner cette couleur. Je vais le déplacer jusqu'au bas, et peut-être qu'on pourra choisir ce blanc. Mais traitons ça un peu plus tard. Lorsque nous avons le design fini, alors il est beaucoup plus facile de sélectionner toutes ces couleurs. Maintenant, nous avons aimé tout a frappé Control G, et ça va être notre 10 bar. Je pense que oui. Maintenant, il est temps de créer ces autres éléments, donc nous allons créer cette carte, qui ira au centre, et nous allons dupliquer cette carte plus tard, en utilisant la grille de répétition maintenant pour obtenir une étoile. Je vais utiliser les lèvres. Mais avant de le faire, je vais simplement déplacer ces guides pour m'aider à mieux positionner ces éléments . Donc, si vous avez un droit ici, vous pouvez voir cette sélection et vous pouvez la voir en haut aussi. C' est pour le guide, sorte que vous pouvez simplement, cependant, juste ici, cliquez dessus, puis appliquer l'orteil guide le bord gauche de cette icône. Et maintenant, nous avons 20 pixels juste ici sur la gauche. Je peux faire la même chose avec cette icône de menu, mais comme vous pouvez le voir, il n'y en a pas ici. Vous devez le sélectionner à partir de ce bord, donc c'est exactement la même chose, comme dans quatre magasins. Si jamais vous utilisez pour la boutique, vous savez que vous pouvez appliquer ces gars et vous pouvez faire un clic droit copier ces guides et les coller dans tous nos autres tableaux, et je m'assurerai que un peu plus tard. Mais maintenant, créons ce panier. Donc, si je sélectionne un beau grand cercle, je vais appeler le Salvator pour l'instant, aller le déplacer juste au-dessous jamais partie juste ici. Et gardons le petit. 40 40. Comme ça et je vais bouger ça pour entendre son quart de travail. 12 Donc, 20 pixels de ce bord juste ici. Je vais sélectionner mon textile et je vais taper Joe John jusqu'à, par exemple, et nous allons le remplir avec cette couleur. Nous allons utiliser toute princesse comme ça et voyons, peut-être qu'on peut utiliser, tu sais, 14 Bolt. Donc, 14. Et nous allons utiliser le typage par boulon de gauche, et je peux le positionner juste ici. Peut-être plus il 10 pixels et dans le centre, comme ce hit contrôle D, et pour cette copie, nous allons utiliser cette autre couleur. Donc, voyons juste, peut-être que nous pouvons utiliser 12 comme pour que nous puissions utiliser régulièrement et nous pouvons utiliser le DDT comme ça, Et vous pouvez ajouter cette couleur à une nuance de couleur, et vous pouvez également cliquer ici et l'ajouter ici. Maintenant, positionnons-le, et il va être aligné à droite. Assurez-vous qu'il est au centre avec ce texte afin que vous puissiez utiliser vos touches fléchées pour quelque part ici et vous pouvez le positionner évidemment, à ce bord double clic, et ce sera notre emplacement comme ça. Et peut-être que je peux ajouter un coma ici comme ça. Et en dessous, nous allons créer notre image. Donc, je vais simplement dessiner un beau grand rectangle. On peut utiliser le rayon du coin, peut-être cinq. Nous pouvons l'avoir sans bordure, inclure l'ombre. Et nous allons juste utiliser cette ombre par défaut. Et pour la hauteur, nous allons utiliser 200 comme ainsi position en 20 pixels. Donc, on aime ça et en dessous, nous pouvons ajouter un peu du texte. Donc peut-être qu'on peut cliquer sur ce contrôle de touche sur D, et peut-être que je peux le déplacer vers le bas et que ce sera un horodatage. Appelons ça il y a trois minutes comme ça. Donc, je ferreting et nous allons utiliser cette couleur, et nous pouvons aussi l'ajouter aux échantillons ici. Et j'ai déjà ajouté, Juste ici orteil sont des composants de couleur et honnêtement, qu'il va être notre image et ce que nous avons besoin ici sont quelques icônes. Alors utilisons-nous certains d'entre eux quoi, vous allez utiliser notre cœur afin que je puisse sélectionner le cœur que nous allons utiliser le commentaire et nous allons utiliser partage. Alors appuyez sur le contrôle C et je vais sauter ici. Zoom un peu plus près. Hit Control V. Ça va s'aligner jusqu'à ici. Déplacez-le ici, puis 20 pixels vers le bas. Et entre chacun d'eux, peut-être qu'on peut ajouter un peu d'espace. Voyons 1234 Parce que nous avons dans ce bel espacement et 40 pixels entre ceux-ci aussi . Et maintenant il suffit de déplacer ceci au centre de ces icônes comme ceci. Et enfin, ce dont nous avons besoin, c'est d'un paragraphe. Alors voyons. Nous pouvons utiliser open sense 14 une fois de plus pour créer un paragraphe, vous pouvez simplement cliquer ici, puis dessiner un paragraphe et vous pouvez taper quelque chose à l'intérieur. Ensuite, vous pouvez sauter ici pour brancher, Lauren Ipsum et vous pouvez cliquer dessus rempli avec espace réservé texte insérer texte. Et voilà. Je vais juste le faire paraître aligné à gauche comme ça. Et si vous ne savez pas comment orteil installer certains de ces plug ins, en particulier beaucoup de gypse, vous pouvez cliquer ici sur ce signe plus comme ici, tapant beaucoup de gypse ici, il est, et vous pouvez simplement cliquer installer, et quand vous le faites, il s'affichera comme installé comme So no, c'est un sens ouvert. 12 régulier, Mais rendons un peu plus petit pour moi avant les lignes de textes comme ainsi et ensuite ce que nous allons créer est, par exemple, ce système instagram pour les goûts. Donc nous allons utiliser ce contrôle de frappe et D, et nous allons simplement le placer juste ici et nous assurer qu'il est aligné à gauche. Et peut-être la vue. 24 commentaires contrôlent un clic ici, puis sélectionnez simplement cette couleur DDT. Comme vous pouvez le voir, c'est vraiment simple à choisir. Donc, 1 à 20 pixels et voyons ce 1123 nous avons entendu à 20 pixels. Donc, tout est le même et tout est que 20 pixels comme ça. Et maintenant, nous allons simplement commander certains d'entre eux. Donc d'abord, nous avons notre avatar. C' est en haut. Ensuite, nous avons plaisanté la pâte. Ensuite, nous avons Londres, l'Angleterre comme ça. Alors nous avons notre image. Ci-dessous, nous avons ces icônes que nous avons il y a trois minutes. Nous avons notre texte de paragraphe et enfin nous avons vue 24 commentaires. Je vais sélectionner tout ce qu'il avait contrôlé G, et ça va être notre chariot comme maintenant c'est tout. Fondamentalement, nous avons créé notre carte, et maintenant ce que nous pouvons faire est de cliquer sur la voiture, cliquer sur les grilles répétées, et nous pouvons simplement en tirer un peu plus sur ces cartes ci-dessous et ça va les pieds. Créez une illusion pour le défilement. Alors peut-être que je peux finir quelque part par ici. Disons juste voir où sont les commentaires. Ils sont là, donc je peux y mettre fin. Et puis nous avons trois messages, et quand nous obtenons un prototype, nous pouvons simplement cliquer ici, puis le déplacer vers le bas comme ça, et pour créer une meilleure illusion. Parce que les cartes couvrent maintenant tout ce qui suit. Vous pouvez déplacer cette barre d'étape au-dessus des cartes, et lorsque vous faites défiler vers le bas cette barre d'étape va rester fixe, et il va ajouter cette illusion que toutes ces cartes vont au-dessous. Et peut-être que nous pouvons même inclure une ombre portée. Mais on verra ça un peu plus tard. À l'intérieur de la partie design, il s'agit juste d'une partie de cadre métallique. Alors gardons tout simplement gentil et simple. Donc c'est fondamentalement tout pour cette vidéo. Je te verrai dans la prochaine quand on va créer une image ouverte, donc je verrai là. 79. Créer des Wireframes 3: Maintenant, lorsque vous vous déplacez et commencez à concevoir sa meilleure idée pour enregistrer vos fichiers. Comme vous pouvez le voir, cette petite étoile se montre ici. Vous pouvez simplement contrôler s ou commandants sur le Mac, et il dira votre projet. Alors commençons à créer cette image ouverte. Je vais juste cliquer ici. Tit contrôle C frappé contrôle V position ceci ci-dessous. Cliquez ici. Appuyez sur le contrôle C Control V. Et comme vous pouvez le voir, il va me montrer tout parce que c'est toujours une page d'accueil. Fondamentalement, juste cette image est ouverte. Mais ici, nous devons créer une flèche arrière. Alors sélectionnons-le d'ici. Le voilà, le contrôle. Tu vois ? Et je vais simplement cliquer ici, contrôler V sur la caméra, et je vais juste le positionner là où il est. Alors, juste ici. Assurez-vous qu'il est au milieu de tout, ou comme le bord supérieur. Au moins cliquez sur un bouton de la caméra supprimer. Et vous pouvez aussi faire un clic droit sur certains d'entre eux et vous pouvez copier ces gars. Mais je ne pense pas qu'on en ait besoin dans tous nos ports. Donc, croyez-le comme il est. Et je vais déplacer leur barre en bas. Maintenant, ce dont nous avons besoin pour celui-ci, nous allons utiliser certains de ces éléments. Alors copions une de ces cartes et vous pouvez frapper le contrôle. C cliquez ici. Toucher le contrôle V. Vous pouvez sur le groupe de la grille. Et comme vous pouvez le voir, certaines de ces cartes sont allées dehors. Donc, nous allons supprimer au 2ème 1 C'est celui-ci, et nous allons cliquer sur le début, qui est à l'extérieur de la plinthe, et nous allons le supprimer aussi. Maintenant, ce que nous voulons, c'est déplacer certains de ces éléments. Donc, je vais cliquer ici et déplacer tout 20 pixels vers le haut de ce bord inférieur. Et ce que je veux, c'est les étendre. Donc je vais juste l'ouvrir. Je vais choisir notre nom et notre emplacement. Je vais le sécher à l'extérieur de ce dossier. Je vais le positionner par ici. Ensuite, je vais sauter à l'intérieur. Peut naff bar et la hauteur et ce jamais Barbie Gee ou encore mieux, Je peux abaisser votre pâteux vers le bas Il est plus facile et plus facile plus tard pour le prototypage ainsi. Mais comme vous pouvez le voir, vous pouvez le garder ici et il sera beau et simple, mais je pense que cela va ajouter un peu plus d'intérêt visuel comme celui-ci. Mais gardons ça en dessous. Alors sélectionnons ceux-ci, voyons si cela fonctionne. Ce n'est pas le cas, et peut-être qu'on peut le garder ici. Laisse-moi sauter à l'intérieur de celui-ci. Je vais sélectionner ces trois coups de contrôle C Cliquez ici. Le contrôle V va les placer exactement dans la même position. Et je vais juste aller aux pieds. Commandez-les en carte. Maintenant ce que je veux avec cette image est que je voulais étendre orteil ces adresse orteil ici et d' entendre aussi bien que je vais orteil, enlever le rayon de coin, enlever le rayon de coin,le garder à zéro, et simplement étendre mon image tout le chemin vers le haut en haut. Ça va couvrir tout, et ça va me montrer l'image. Et enfin, quand nous arrivons à la partie design, peut-être que nous pouvons ajouter une légère ombre portée juste ici. Ou peut-être un Grady int. Je pense que ce sera une meilleure idée. Donc ingrédient couvrira fondamentalement ce que ce fond de barre naff couvre en ce moment. Mais gardons ça comme ça. Agréable, propre et simple. Et passons à autre chose parce que nous allons traiter tous ces détails un peu plus tard lorsque nous commencerons à concevoir et à ajouter certaines illustrations, ombres et couleurs, y compris les images, etc. Donc c'est tout pour cette vidéo. Je vous verrai dans la prochaine quand nous allons ajouter une nouvelle image, et nous allons inclure une belle petite illustration. 80. Créer des Wireframes 4: nous savons design ajouter une nouvelle image. Mais avant nous le faisons, je vais cliquer ici pour le NAB notre contrôle de frappe C contrôle V pour y faire face juste ici. Et je vais juste supprimer cette flèche arrière en dehors du dossier parce que c'est tout ce dont nous avons besoin pour cet écran maintenant, dessous de cela, nous avons seulement besoin dans cet indicateur de la maison Donc devrait contrôler voir cliquez sur Contrôle V. Et maintenant, nous allons ajouter un texte juste ici et qui simplement basé de l'extérieur. Donc c'est ouvert, dit 14 juste pour que je n'ai pas les orteils, donc je suis un peu paresseux comme ça. Je vais faire glisser ceci ci-dessous et faire glisser ceci ci-dessous pour entendre. Maintenant, en haut, vous allez avoir une illustration, donc je vais payer Started aussi. Maintenant, cette illustration est gratuite. Et si tu sautes ici aux branchements, ça vient d'Andro. Donc, vous pouvez cliquer sur cette fiche et vous pouvez voir que vous pouvez changer les illustrations de nuit ou vous pouvez cliquer ici et peut-être pris photographe tapant comme ça et il va chercher . Et voici cette illustration. Vous pouvez cliquer dessus. Et quand c'est fait, vous pouvez simplement frapper fait, et vous pouvez aller quelque part dehors pour entendre. Par exemple, appuyez sur Contrôle V. et cela a été pris sur la base de cette illustration. Vous pouvez l'agrandir, et parce qu'il a travaillé là illustration, vous pouvez voir à quoi cela ressemble. Si vous souhaitez modifier certaines de ces couleurs, vous pouvez cliquer à l'intérieur. On peut maintenir le décalage, tout sélectionner. Peut-être que nous pouvons cliquer sur certains de nos couleurs comme alors peut-être que vous pouvez utiliser celui-ci. Vous pouvez l'utiliser. Peut-être que vous pouvez augmenter et diminuer l'opacité et ainsi de suite. Et quand vous êtes heureux, vous pouvez simplement le glisser dans l'une de vos planches. Et puis ça va ressembler à ça. Laissez-moi revenir à mes menus, et ce que je dois créer ensuite, c'est que je dois créer deux sélections parce que nous avons besoin que les gens puissent faire des sélections à partir de la galerie ainsi que de la caméra. Alors faisons cette sélection ici. Nous allons créer un petit rectangle. Non, on va ajouter cette ombre portée. On va ajouter un coin. Le rayon 5 sera peut-être carré donc 1 40 avec 1 40 comme ça, et on va enlever la frontière parce qu'on n'en a pas besoin. Vraiment ? Non. Sa position. C' est un peu plus agréable. Donc peut-être 40 pixels vers le bas, comme ça. Et ce sera notre galerie BG, parce que les gens vont être en mesure d'ajouter de nouvelles images de la galerie hit control Andi à dupliquer et ce sera nos autres. Donc caméra BG, parce qu'ils vont être en mesure d'ajouter de la caméra aussi bien que je vais déplacer ses peut-être 20 pixels de celui-ci comme ça et m'assurer qu'ils sont tous les deux au centre comme ça . Je vais dupliquer ce texte. Je vais le déplacer juste ici, et je vais déplacer certains d'entre eux. Donc ça va être notre texte irrégulier comme, alors assurez-vous qu'il est à 14 ans et nous allons simplement écrire dans la galerie comme ça, et je vais en position d'orteil que dans le centre de celui-ci comme ça et peut-être le déplacer bien , gardons-le ici pour l'instant. Il contrôlerait D sur celui-là, et on va faire de l'annonce de la caméra ici comme ça. Assurez-vous qu'il est en dissenteur aussi, et nous avons besoin d'icônes juste ici. Donc, je vais rapidement sélectionner ces encore. Donc ce sont les deux ici, et je vais simplement les déplacer ici. Donc Control V, ça va être notre galerie, alors assurez-vous qu'elle est au centre. Ce sera notre appareil photo comme ça, assurez-vous qu'ils sont tous les deux, par exemple, 20 pixels comme ça. Et nous pouvons peut-être les sélectionner tous et ensuite simplement les déplacer au centre comme ça et faire savoir, commander certains d'entre eux. Donc ça vient de la galerie, et nous allons tout regrouper d'ici et appeler cette galerie, et ça va provenir de la caméra et regrouper tout ça et de la caméra de qualité. Et juste pour le dernier, sélectionnons le tabouret. Cliquez ici et sélectionnez simplement cette couleur. Maintenant, je n'ai pas besoin de cette couleur parce qu'elle est badigeonnée de cette illustration, donc je vais juste la garder agréable et simple et utiliser juste notre couleur, et c'est fondamentalement tout. Nous avons créé cet écran, donc nous allons l'animer un peu quand nous aurons le prototypage d'une partie du cours. Et les gens vont pouvoir choisir à partir de la galerie et de la caméra. Et nous allons rapidement sélectionner et concevoir ce cadre métallique de la galerie parce que tout sera assez simple. Et nous allons simplement utiliser dans cette barre jamais frappé contrôle C Cliquez ici. Touche contrôle V M. Je vais orteils. Retirez ce logo de l'obturateur. Je vais sélectionner ce texte Hit contrôle C Cliquez ici, Contrôle V. Et assurez-vous que vous écrivez la galerie juste ici comme la dette. Et je vais le positionner au centre et au centre de ça aussi, comme ça. Et vous pouvez même sélectionner ces trois en cliquant ici et va vous assurer que vous êtes dans ce centre. Non, ce qu'il nous faut, ce sont des images, et nous allons simplement utiliser une grille de répétition. Et ce que je peux utiliser est un joli rectangle, par exemple. Alors peut-être que je peux d'abord créer nos guides pour que je puisse cliquer sur cette icône et faire glisser sur le guide d'ici tout le chemin vers ce bord gauche et cliquer sur l'icône du menu et faire la même chose pour cela aussi. Alors assurez-vous que c'est comme ça. Et enfin, ce que je veux, c'est créer ces carrés. Donc, avant de le faire, je veux cliquer ici et m'assurer que c'est à 100%. Cela va être notre image comme ça, et nous allons lui donner quelques dimensions. Alors assure-toi que c'est ça. Par exemple, 99 avec Sadie à qui semble bon. Et nous allons utiliser cinq pour le rayon de coin comme ça. Assurez-vous qu'il est de 20 pixels à partir d'ici. Contrôlez D et déplacons celui-ci au centre et il a contrôlé la dernière fois. Et passons celui-ci à ce bord droit comme ça. Donc tous ont exactement, depuis le rythme entre eux. Affaiblir le groupe cet appel ces images ou encore mieux. Ouais, allons les regrouper et simplement frapper la grille de répétition. On pourrait tout déplacer ici, par exemple. Et ce que je veux faire, c'est peut-être, ouais, gardons la frontière pour l'instant. Mais donnons-lui une autre couleur. Peut-être que celui-là pour le garder juste un peu plus léger. Ouais, comme ça. Et c'est fondamentalement tout pour cet écran aussi bien, comme vous pouvez le voir, vous pouvez simplement en créer un, puis les copier, les dupliquer et les positionner dans leurs espaces. Et quand vous l'avez fait, vous pouvez simplement cliquer sur la grille de répétition, et vous pouvez dessiner ces rectangles vers le bas et il va les dupliquer. Vous pouvez survoler ici, et vous pouvez augmenter ou diminuer l'espacement entre chacun de ces éléments, fois horizontalement et verticalement, si vous le souhaitez. Et puis vous obtenez simplement cette belle répétition génial, qui est vraiment facile à créer comme vous l'avez vu, et cela vous fait vraiment économiser beaucoup de temps libre. Maintenant, dans la prochaine vidéo, nous allons concevoir cet écran d'édition d'image, et je vais y voir. 81. Créer des Wireframes 5: il est maintenant conçu certains de ces autres écrans, donc je vais utiliser le maintenant emprunter une fois de plus, Contrôle. Voir contrôle. On se déplace en dessous de la barre d'état. Et ce que je veux, c'est l'icône de sauvegarde juste ici. Donc, je vais juste passer à entendre, sélectionner mon icône dire, Hit contrôle C et déplacer tout le chemin vers ici. Ce que je veux ici, c'est juste ces icônes Soul. Laisse-moi le baser rapidement. Positionnez-le dans un endroit comme ça et je vais le déplacer sur ce bord gauche. Et je vais déplacer la flèche en arrière et enregistrer en dehors de ce dossier et simplement appuyer sur Supprimer. Vous pouvez le laisser comme ceci, ou vous pouvez les regrouper à l'intérieur de leur dossier. Ça n'a vraiment pas d'importance. Et ce que je veux ici, c'est une image. Une image va juste utiliser cette image à partir d'ici, alors localisez le contrôle de frappe de l'image C. Regardez ici, Contrôle V. Je vais la déplacer en dessous de tout ici, et je vais utiliser les dimensions éteint. 375 semaines. 532 comme ça. Et laissons cette ombre. Un zit est Et ce que nous voulons est de créer quelques curseurs ci-dessous parce que les gens vont orteils être sélectionner des images de la galerie. Ensuite, ils vont obtenir cet écran d'édition d'image. S' ils sont satisfaits de leur image telle qu'elle est, ils peuvent frapper, enregistrer et passer directement à une description et publier ou à cet autre écran s'ils veulent la recadrer . Mais s'ils ne le sont pas, ils auront les curseurs en bas pour jouer avec, puis ils seront en mesure d'apporter ces modifications. Maintenant, nous avons besoin d'un texte juste ici. Et utilisons Sense 14 par exemple, et allons le trouver. Il est juste ici devrait contrôler, voir, et je vais placer le juste ici, frapper Contrôle V, et nous allons utiliser ces gars une fois de plus. Alors, dessinons un guide rapide pour ici et faisons un, par exemple, ici aussi. Quelque chose ne va pas juste ici, alors donnons-le cela et aimons cette icône aussi et dessinons un joli guide ici. Du sel. Positionnons juste pour entendre, assurez-vous qu'il a quitté les lignes et assurez-vous qu'il est régulier, et je vais écrire dans la luminosité. Je vais en faire un duplicata. Je vais écrire. En revanche, frapper le contrôle, n'est-ce pas ? Encore une fois. Ça va être des faits saillants, comme ça, et enfin, on va avoir des ombres. Maintenant, laissez-moi positionner certains d'entre eux, afin que la luminosité soit au sommet. Les faits saillants seront juste ici, et tous seront en dessous de notre image. J' ai donc rapidement déplacé certains d'entre eux parce que je vais me positionner un peu mieux. Donc 20 pixels et je vais créer un orteil rectangle vont de ce guide à celui-ci. Et maintenant, nous allons commencer à créer nos curseurs. Donc ça va être un curseur BG comme ça. Et utilisons cette couleur. Donc nous allons enlever la bordure et pour la couleur. Utilisons celui-ci. Et on va aller aux pieds pour le rayon du coin. Avoir 50. Et pour la hauteur, utilisons huit, par exemple. Ouais, je pense que ça a l'air bien. Et je vais tout positionner, par exemple, juste ici. Ensuite, nous allons créer un cercle, alors il suffit de dessiner un beau cercle et d'utiliser peut-être 16 avec 16. Joli et petit comme ça et pour ça. Peut-être qu'on peut utiliser cette couleur bleue pour cela et peut-être qu'on peut utiliser la couleur de bordure blanc cassé. Ça va être un cercle, et on va aller aux pieds. Faites un duplicata de celui-ci touche le contrôle D, et ce sera une couleur ou une couleur de curseur encore mieux. Et nous allons lui donner une sensation de couleur bleue, et peut-être que nous pouvons la déplacer ici et ensuite positionner ceci pour entendre, peut-être parce que les gens vont pouvoir jouer avec elle un peu plus tard et ensuite ajuster leurs images en conséquence jusqu'à ce qu'ils soient satisfaits du résultat. Maintenant, ce groupe de réunion, tout cela donc qui sélectionne les trois districts de contrôle thermique G pour être un curseur et vous allez déplacer le curseur sous Bright. Et positionnons-le ici avec 10 pixels vers le bas. Juste un contraste. Positionnez-le ici et déplacez ses 20 pixels vers le bas. Maintenant, nous pouvons dupliquer ce curseur, déplacer ici et nous assurer que ce sont eux aussi des pixels vers le bas. Assurez-vous que c'est un 20 et je suis allé le déplacer un peu vers le bas pour qu'il contrôle D et déplace le curseur vers le bas, alors assurez-vous qu'il est à 10. Cela va être à 20 et enfin, nous allons utiliser une copie de plus de ce curseur et nous allons le déplacer vers le bas pour nous assurer qu'il est à 20 aussi , ou juste 10. Et je pense que ça a l'air bien maintenant, c'est que vous pouvez voir qu'il est assez difficile à lire. C' est pour ça que nous allons changer. Les sont de mauvaise couleur elle-même. Donc, à partir de cette couleur, nous pouvons choisir cette couleur. Et maintenant, vous pouvez clairement voir ces curseurs beaucoup plus facile et beaucoup plus propre. Maintenant, nous pouvons positionner cette couleur et, par exemple, choisir toutes les couleurs de curseur BG et nous pouvons choisir le blanc. Et si tu penses que c'est trop dur, peut-être qu'on peut le ramener ici, et on va jouer avec ça un peu plus tard. Maintenant, laissez-moi rapidement sélectionner tous nos textes et pour la couleur, ils vont juste utiliser la couleur blanche. Donc maintenant, comme vous pouvez le voir, vous pouvez voir ce texte beaucoup plus clair et beaucoup plus facile qu'avant. Maintenant, ce que je vais faire est de sélectionner ces deux icônes frapper le contrôle C. Cliquez ici, appuyez sur le contrôle. Nous nous assurons que cela a la même couleur d'arbre que celui-ci, et ce que je vais réellement faire est de créer une illusion hors culture. Alors laissez-moi sauter à l'intérieur et ces deux-là vont maintenant changer de couleur orteil blanc parce que vous pouvez les voir mieux comme ça. Maintenant, nous allons créer une illusion hors culture ici, parce que les gens vont faire quelques changements ici. Ensuite, cliquez sur Enregistrer déplacé vers cet écran où ils peuvent recadrer s'il y jusqu'à ce que. S' ils ne veulent pas orteil, ils peuvent simplement cliquer sur l'icône Enregistrer, et il les déplace directement pour publier où ils seront en mesure d'inclure leur description, par exemple, et simplement déplacer à partir de là. Mais concentrons-nous sur cet écran pour l'instant. Et créons une image. Donc, nous allons créer une belle grande image. Alors passons d'un bord à l'autre. Donc 375 et pour la hauteur, peut-être que nous pouvons utiliser 532 par exemple. Alors Toby, comme celui-ci. Et peut-être que je peux même appeler Peyton celle-là. Juste pour rendre les choses encore plus simples, déplacer tout en dessous, placer au milieu comme ça, et peut-être que pour cela nous pouvons utiliser ? Je ne sais pas. Donc, la superposition de couleur. Peut-être que oui. Voyons à quoi ça ressemble. Peut-être que je peux frapper le contrôle et D et créer cette belle superposition de couleur. Peut-être que je peux le déplacer ici. Et enfin, peut-être que je peux créer une sorte de zone de culture d'image. Donc peut-être que je peux utiliser cette image qui est d'abord supprimée dans ces ombres parce que nous n'en avons pas besoin pour l'instant. Donc, cela va être une couleur trop, et ce sera maintenant notre zone de recadrage d'image. Donc ça veut dire dupliquer celui-ci qu'il avait contrôlé étaient d'entendre enlever le remplissage. Inclure l'eau de la frontière va être blanche, et nous allons le rendre un peu plus petit. Donc, par exemple, quelque chose comme ça, peut-être. Et jouons avec les réglages afin que moi avant 50 et peut-être qu'on peut lui donner un écart. 10. Donc maintenant, comme vous pouvez le voir, nous avons cette belle zone de recadrage d'image et appelons ça comme ça. Donc, ce sera essentiellement notre culture d'image, et nous allons jouer plus tard dans la partie design de ce cours lorsque nous incluons l' image réelle que nous allons recadrer ici. Et je vais vous montrer comment vous pouvez mosquer certains de ces éléments et vraiment faire en sorte que cette image se démarque et peut-être dans le même parc. Peut-être que nous pouvons inclure d'autres couleurs, comme peut-être nous pouvons le recadrer une par une. Ordre à 16 heures par neuf. Et nous pouvons peut-être inclure une autre option ici, avant et après, juste pour que les gens puissent le voir. Et nous pouvons inclure cette option ici également, afin que les gens puissent comparer les images entre les modifications. Donc nous allons orteils, y réfléchir et peut-être inclus un peu plus tard. Mais pour l'instant, c'est tout pour cette vidéo. Et dans la prochaine, nous allons passer à la description et à la publication. Et je vais vous montrer comment vous pouvez ajouter des éléments différents ici. 82. Créer des Wireframes 6: qui n'est pas conçu l'écran de description publié. Donc ce dont j'ai besoin est dans ce dos, je m'inquiète juste d'aller le sélectionner à partir d'ici afin qu'il contrôle voir coup rapide Contrôle V. Je vais le déplacer ci-dessous, parce que les gens vont être en mesure de revenir en arrière et faire ces changements supplémentaires ou pour publier, et nous allons créer un fond en seulement une minute. Mais d'abord, utilisons certains de ces autres éléments que je vais utiliser sont John Doe et peut-être l'image aussi, donc il contrôle. Voir ou pas. Utilisons-le d'ici. En fait, John Doe dans l'image a frappé Control C. et je vais frapper le contrôle V exactement au même endroit. Et peut-être que je peux même le déplacer un peu plus loin. Ainsi, par exemple, 20 pixels d'ici. Donc 12 comme ça et déplacer tout vers le bas et sur cette image, qu'il soit à 18 comme ça, et je vais faire un duplicata ou son contrôle thermique sur D. Je vais positionner cela un peu vers le bas sur le coup, assurez-vous qu'ils sont aligné comme ce quart de travail 12 et ce que je veux pour elle. Ce sera notre contribution. Alors appelons-le que mettre, nous allons supprimer dans l'ombre inclure la bordure et pour cela. Soyons à 13 h 30 par exemple, parce qu'on n'a pas besoin qu'il soit battu aussi gros ? Non, utilisons du texte. Nous pouvons utiliser ce paragraphe ici et je suis badigeonné en vue. Peut-être que je peux le déplacer. 1212 Peut-être quelque chose comme ça. Et peut-être que je peux apporter ça. Par exemple. Peut-être que je peux lui donner un 10 et le garder comme ça. Copiez ce texte sur le contrôle C a frappé le contrôle V, et je vais le déplacer jusqu'ici. Assurez-vous qu'il reste la ligne qu'il est, et je vais me positionner pour l'entendre. Maj 12 et nous allons écrire des gens intacts parce que les utilisateurs vont pouvoir attaquer leurs amis, par exemple, ou ceux qui étaient là avec eux ce jour-là. Maintenant, utilisons une partie de cela, Alors utilisons l'entrée. Par exemple, frapper le contrôle C Patrol V, et je vais le déplacer jusqu'au bas une fois de plus, et ce sera juste notre ligne de démarcation. Qu' est-ce qui va rester le même ? Mais la hauteur va être une. Et nous allons déplacer cette ligne. Par exemple, 20 pixels vers le bas de ce texte. Et enfin, nous allons sélectionner ces deux éléments de contrôle thermique D pour faire des doublons hors d'eux, déplacés en dessous et positionnez ce Donc 1 à 20 pixels vers le bas. Déplacez cette ligne de séparation beaucoup plus. Et je vais ajouter cet endroit ici aussi. Donc, je vais le sélectionner d'ici, par exemple. Donc utilisé ce contrôle de frappe C et je vais bouger ici. Frappez le contrôle V et je vais le positionner. Tout d'abord, pour être aligné à gauche, Toby ici, Toby, 20 pixels vers le bas. Et cette ligne va être de 20 pixels vers le bas de ce texte aussi. Alors 12 Et enfin, créons notre fond. Donc nous allons utiliser un rectangle pour gagner le drone est gros bouton, et nous allons lui donner un poids de 200 la hauteur de 50. Et donnons-lui un rayon de la planche sur huit comme ça, nous allons inclure cette couleur de sensation Nous n'aurons aucun coup. Désolé frontière, et nous allons inclure une ombre d'arrière-plan ainsi et est allé le positionner quelque part par ici. Mais c'est avec le bon. Donc 1234 40 pixels et nous allons utiliser ce texte frappé contrôle dans l'unité avec le bouton ci-dessous déplacé tout le chemin vers le bas. Celui-ci devrait être notre bouton et distraire les gens. Le texte va réellement écrire, publier comme, alors assurez-vous qu'il va du centre. Positionnez-le au centre comme ça et comme ça, assurez-vous qu'il est blanc et gardons ça régulièrement comme ça et repositionnons simplement si nécessaire. Je pense que ça a l'air bien. Touchez le groupe de contrôle G. C' est et appelez-le bouton, et c'est fondamentalement tout pour cet écran. Alors passons à travers une fois de plus. Donc, dans le clic juste ici, allons à ici. Donc, quand ils cliquent sur orteil, ajouter une nouvelle image à cette icône, il les emmènera à cet écran à Nouvel écran d'image, et ils peuvent choisir dans la galerie ou à partir de l'appareil photo. Ou ils peuvent choisir parmi la caméra là comme trois d'ici. S' ils choisissent à partir de la galerie, il leur faudra Toe annonce à partir de l'écran de la Galerie où ils peuvent choisir des images de leur propre galerie. Lorsque les Juifs l'image ils vont, goto ajouté, image où ils peuvent changer toutes ces valeurs différentes. Quand ils frapperont, ils iront à la culture. S' ils veulent cultiver, ils peuvent le cultiver. Si ce n'est pas le cas, ils peuvent cliquer , enregistrer l'orteil, venir à cet écran où ils verront l'aperçu de leur image. Ils seront en mesure d'ajouter des descriptions, attaquer les gens et à l'impôt juste ici en haut, et ils seront en mesure de changer d'endroit. Donc, à l'emplacement juste ici et l'application ajoutera automatiquement l'emplacement si elle est fondée à l'intérieur données de manière image parce que les images de téléphone et les images de caméra garder modérateur à l'intérieur. Donc, il faudra que les données et montrer, Par exemple, Londres, Angleterre ici et ils seront en mesure de publier cela. C' est fondamentalement tout, parce que quand ils le publient avec toutes ces informations, il les ramènera à l'écran d'accueil, où il poussera tout cela vers le bas et il s'affichera dans cette nouvelle image juste ici au haut. Donc, c'est essentiellement notre travail complet pour cette application, et dans la prochaine vidéo, nous allons passer sur le tableau de bord de conception. Et dans les prochains milliards, nous allons finir la conception de nos cadres métalliques et ensuite dans la prochaine série de vidéos, déplacer le design réel de notre application. 83. Créer des Wireframes 7: Non, il a conçu l'écran du tableau de bord et je vais choisir celui-ci. Alors appuyez sur le contrôle C cliquez ici. Hit Control V et je vais positionner en dessous de l'état Par saut en vue de la flèche arrière et je vais orteil déplacer dans ce guide juste ici et a déplacé un à ici aussi bien comme Donc je vais supprimer Carol parce que nous n'avons pas besoin. Et cet orteil va, droit, tableau de bord comme ça et assurez-vous qu'il est au centre. Et nous allons avoir besoin d'une marque de frappe juste ici pour que nous puissions choisir celui-là. Par exemple, Hit contrôle C il contrôle la et vous pouvez sélectionner l'icône d'accueil et cliquez ici et choisissez cette couleur fermer Tout déplacé cette partie vers le bas. Et maintenant, créons notre tableau de bord. Donc, je vais simplement choisir des textes de celui déjà créé sur mon autre écran juste pour nous faire gagner un peu de temps libre. Mais si je saute à l'intérieur, vous pouvez voir que ces deux sont open sense 14 regular, et je dis juste le temps libre de créer ce texte. Maintenant, dupliquons celui-ci, donc je vais appuyer sur control de le déplacer dehors, positionnez-le juste ici et assurez-vous qu'il est aligné à gauche comme ça. Déplacez-le ici et assurez-vous qu'il est de 20 pixels vers le bas de celui-ci, et qu'il va écrire en type. On en a besoin d'un de plus et on va l'appeler « j'aime ». Et enfin, nous avons besoin de la saleté et la dernière, et ce sera le meilleur moment pour poster comme ça et ça va aller quelque part par ici. Maintenant, créons un rectangle comme celui-ci, et nous allons appeler ce type de VG comme Donc déplacez-le ici et assurez-vous qu'il est 20 pixels vers le bas de celui-ci et assurez-vous qu'il a un rayon de coin désactivé. Cinq. Pas de bordure par défaut Tais-toi et c'est 1 57 wits 200 et non, passons à entendre quelqu'un pour frapper le contrôle de l'orteil , en faire une copie, et cela va être un BG like et simplement fluide jusqu'à ce qu'il s'enclenche en position pour ici et déplacer les goûts. Le bout de la ligne jusqu'à cette Etch gauche. Maintenant, ce dont nous avons besoin ici sont quelques éléments. Permettez-moi donc de choisir ce texte. Je vais prendre le contrôle dans D et les films juste ici. On va aller aux pieds dans le portrait comme ça et je vais y aller une fois de plus, et on va appeler ce paysage comme ça et s'assurer qu'ils sont à 12 ans. Sélectionnez les deux, appuyez sur 12 et assurez-vous qu'ils sont alignés au centre. Et nous pouvons, par exemple, les diviser pour que je puisse le déplacer comme ça. Maj 12 Assurez-vous qu'ils sont espacés de 20 pixels et déplacez-vous vers le centre comme ceci. Et je peux peut-être même les positionner à 20 ou 40 pixels du bas. Mais gardons-le 20 juste pour garder les choses simples. Maintenant, créons un cercle. Alors vous donnez un cercle de 10 par 10 comme ça, et peut-être que nous pourrions déplacer ce cercle, par exemple, 10 pixels vers le haut. Assurez-vous qu'il est au centre comme ça. Retirez la bordure, et pour l'échec, nous allons lui donner une couleur de champ bleu. Maintenant saluons une copie, mais nous allons le prénom c'est ou cercles, et je peux le déplacer juste au-dessus du contrôle de frappe portrait D une fois de plus, et je vais le positionner au centre de Island Escape comme ça et ça va pour avoir cette couleur verte. Donc, je vais cliquer ici orteil basé dans cette couleur. Donc, il est 55 d 466 et les vues déjà dans certaines de nos autres vidéos. Maintenant, nous allons créer un beau grand tableau de beignet. Alors laissez-moi rapidement créer un grand cercle et donnons-lui des dimensions. 90 par 90. Et utilisons, par exemple, juste une bordure. Et nous allons utiliser la frontière de 20 comme ça et je vais le placer au centre comme ça , assurez-vous que c'est la même distance ou peut-être même 20. Voyons à quoi ça ressemble. Je pense que ça a l'air bien. Appelez ça un cercle ou le cercle principal comme ça et maintenant en faire deux copies pour qu' il contrôle de Control De ça va être bleu. Cela va être vert comme ça et leur donner leurs couleurs. Donc c'est vert. C' est bleu comme ça et enfin, créons une mosquée. Donc je vais orteil peut-être choisir mental comme ce clic rapide ici. Et peut-être juste ici, je vais y aller la mosquée. Appelez cette mosquée et je vais la placer juste au-dessus de cette mosquée bleue. Et je vais frapper l'orteil M, faire une mosquée et ça va être bleu et maintenant faire la même chose pour les verts. Alors assurez-vous d'aller du centre comme ça jusqu'à ici, assurez-vous de couvrir tout comme ça va être notre mosquée et de la placer juste au-dessus du vert. Sélectionnez tout. Commande de changement de vitesse M un commandant de quart. Si votre Mac et ça pourrait être vert comme ça, maintenant que nous avons que je peux tout regrouper , assurez-vous que tout est là où il devrait être. C' est, et je peux les sélectionner tous et je dois juste sélectionner le type PG ainsi Move it. Juste pour entendre le type devrait aller tout le chemin en haut Type P. G en bas et appuyer sur le contrôle G pour les regrouper. Et ça va être notre genre comme ça. Et assurez-vous juste que Type PG est là. C' est le cas, et ce sont nos mosquées qui vont à l'extérieur maintenant, nous pouvons aller vers le bas, et cela va être au sommet, juste au-dessus du type et créons des likes. Donc, ce qu'on peut faire, c'est choisir ces deux-là. Donc cercle portrait cercle échapper contrôle frapper en effet. Déplacez tout à l'extérieur de ce dossier, sélectionnez-les à nouveau et assurez-vous qu'ils sont au centre comme ça parce que nous avons besoin de ceux qu'ils mentionnent comme Donc maintenant créons notre rectangle. Assurez-vous qu'il est 90 à la hauteur, et vous pouvez faire un petit tour en entrant dans le type, déplaçant cela juste ici et en vous assurant juste qu'il s'aligne avec notre cercle principal. Il le déplace alors à l'extérieur. Et ça, appelons-ça Barbie. Gee, comme ça, et donnons-lui la couleur de cette bordure grise enlevée. Et peut-être que je peux ajouter un rayon de coin doux de cinq, par exemple, juste pour garder les choses simples et intéressantes. Déplacez-vous au centre d'ici. Touchez le contrôle D une fois de plus, et voici notre barre bleue. Donnons-lui une couleur bleue, et on peut la déplacer comme ça. Non. Donc, comme les deux, il contrôle D, et vous pouvez les déplacer vers le bas des orteils ici, par exemple. Maintenez votre touche Maj et déplacez-les ici, et ce sera notre barre verte comme ça et vous pouvez étendre cela un peu vers le haut. Peut-être que nous pouvons le déplacer un peu vers le bas, par exemple, et sur Green Bottle a changé la couleur à cette couleur. Et maintenant, regrouperons tout ça. Donc, ça va être des goûts tout au sommet. Et ces cercles devraient aller au-dessous des barreaux comme ça, et regrouper tout pour l'avoir. Donc juste plus comme BG ici aime tout est sélectionné Hit contrôle G. Et cela va être un likes. Déplacez-le en dessous du type. Et maintenant nous allons nous concentrer sur le meilleur moment pour poster. Donc, ce sera 20 pixels vers le bas comme ça Et maintenant, créons un rectangle. Mais on peut l'utiliser. Par exemple. Il suffit de frapper le contrôle D avec l'extérieur, Déplacez-le ci-dessous comme si maintenez le décalage. Assurez-vous qu'il est de 20 pixels à partir d'ici. Alors 12 et appelons cette fois B G. Et pour ça. Voyons voir. On peut le donner un peu plus grand, ils ont mentionné. Ou gardons les choses simples. Augmentons sa taille deux ici et gardons-le à 200 pour que nous ayons le même aspect cohérent sur tous ces éléments. Donc, incluons maintenant un peu de texte. Qu' est-ce que l'utilisation des sons ouverts. 12. Alors choisissons celui-là. Contrôle thermique D pour faire dupliquer. Déplacez-le au-dessus et cela va être une valve de détection ouverte. Tout d'abord, ça va écrire à partir de la gauche, et ça s'appelle ça un M comme ça et on va frapper le contrôle de déplacer ça un peu vers le bas sur Appelons ce PM comme ça et on va les déplacer pour entendre son changement. 10 pixels à partir du bord gauche. Et maintenant, créons quelques lignes. Donc, je vais créer une ligne comme celle-ci. Appelez la ligne de gauche, comme ça, et pour cette ligne de gauche, je vais choisir dans cette couleur de champ. Je vais enlever la bordure du rayon du coin. Utilisons cinq. Et pour la taille, utilisons 1 50 pour les hauteurs. Et pour les esprits habitués à aimer tant les analystes. Pas de position. Alors passons à ici jusqu'à ce qu'il s'aligne avec notre texte et avec le bord supérieur de RBG comme ce décalage 12345 Millikan avec 15, puis décaler et à droite pour que nous puissions le déplacer comme ça et ensuite nous pouvons repositionner ceci Donc ici déplacer le PM jusqu'à ici, par exemple. Et maintenant, créons une ligne différente. Donc, nous allons peut-être être dupliqués. Celui-ci a frappé le contrôle D et ça va être notre résultat, comme le moteur. Maintenez simplement votre gauche Most Click entier Shift pour le faire pivoter et assurez-vous de l'aligner correctement comme ceci. Assurez-vous juste que vous n'en voyez pas sur les bords comme ça. Et pour l'esprit, nous pouvons utiliser quelque chose comme 81 et assurez-vous de les aligner correctement. Donc, ici, par exemple, et maintenant ne pas perdre plus de temps. Je vais simplement copier le texte d'une autre partie que j'ai déjà créé. Mais j'ai essentiellement utilisé ce texte avec moi Hit control D et j'ai utilisé la grille de répétition, puis j'ai simplement créé des multiples de celui-ci. Donc 2467 Pour les jours. C' était lundi. C' était mardi. C' était mercredi, et ainsi de suite. Et puis j'ai simplement plané dessus comme ça et puis j'ai augmenté ou diminué l'espacement entre eux jusqu'à ce que j'ai quelque chose comme ça, comme moi supprimé. Et maintenant ce qu'on peut faire. Je vais déplacer ceci et juste en dessous, je vais créer un joli tableau. Donc, utilisons un crayon et allons simplement dessiner quelque chose comme ça. Alors peut-être ici pour entendre Peut-être que je dirais que c'est allé jusqu'ici. Peut-être. Non, ça s'est passé ici, ici, ici. Et enfin, il est descendu à ici, maintenez la touche Maj et les relie. Et maintenant, ce que nous pouvons faire est que nous pouvons inclure la couleur du champ. Je peux supprimer la bordure maintenant pour la couleur du champ. Je vais inclure le bleu, mais je vais utiliser un ingrédient linéaire. Donc, je vais choisir la couleur plus foncée, qui est celle-ci, et choisir celle-ci pour celle-ci. Je vais choisir les blancs et je vais les orteils réduire votre fondamentalement à zéro. Alors je vais le retourner. Alors faites-le passer comme ça et assurez-vous que ça va jusqu'ici. Et maintenant, je vais inclure la frontière arrière. Et maintenant, tu vois à quoi ça ressemble. Donc c'est le truc. Toujours vous montrer dans l'une des vidéos précédentes quand nous avons animé sont des tableaux de bord, mais que fondamentalement il pour que nous puissions appeler les temps de parole , par exemple , comme ça, et je vais le positionner quelque part ici. Disons juste en dessous de nos lignes de fond et nous pouvons augmenter l'épaisseur de cette bordure. Mais je pense que ça a l'air assez bien, et on va l'animer un peu plus tard. Mais pour l'instant, c'est tout pour les tableaux de bord. Et dans la prochaine vidéo, nous allons concevoir un J'aime, et nous allons passer plus tard à profil et enfin finir tout avec le menu latéral , donc je vous verrai là-bas. 84. Créer des Wireframes 8: Non, finissons notre design et je vais cliquer ici. Toucher le contrôle C pour copier cet onglet sont frappés Contrôle le coup de contrôle V ici aussi bien, et nous allons faire quelques changements. Donc je vais sélectionner les orteils et ceux qui aiment Ike un. Je vais changer sa couleur en bleu et je vais faire la même chose ici. Mais je vais sélectionner l'icône de profil et changer cette couleur en bleu ici. Ensuite, j' ai besoin d'une barre supérieure. Donc je vais choisir celui-ci contrôle C et sélectionner les deux comme pour qu'il contrôle V. Et c'est pour ça V. que j'aime Adobe X'd, parce que vous avez vu à quel point c'était rapide. Donc, avec vraiment quelques copies, il vous pouvez vraiment faire un beau design. Extrêmement, simplement. Alors maintenant nous allons nous concentrer sur les goûts, et je vais choisir cette icône, et je vais faire glisser un guide ici. Comme vous pouvez le voir en haut, il est écrit 20. Donc, vous pouvez clairement voir jusqu'où vous traînez et ça, et vous pouvez voir 20 ici aussi, et vous pouvez faire la même chose pour ici, mais je ne pense vraiment pas que ce soit nécessaire. Mais créons un rectangle comme Donc, nous allons déplacer 20 pixels d'ici. Alors 12 et appelons-ça l'image. Mais déplacez-le ici et donnons-lui quelques dimensions. Souvent 99 avec 82 comme Donc donnons-lui le rayon de coin ou cinq. Et gardons le champ et la frontière pour l'instant. Peut-être qu'on peut même ajouter une légère ombre. Donc ça va être notre image. Et puis on peut enlever la frontière parce qu'on n'en a plus besoin. Et maintenant, incluons un peu de texte. Donc, je vais simplement Corp ce et peut-être ce texte. Alors appuyez sur le contrôle C. Je vais prendre le contrôle V ici. Donc on va taper un nom juste ici. Alors, Jane. Alors donnons-le, et nous pouvons positionner ça au centre de cette image. Je vais déplacer ça de la façon comme ça, et je vais positionner 20 pixels comme ça et voyons ce que nous pouvons écrire ici. Donc cette congee horodatage ou il y a trois minutes, assurez-vous que c'est de la gauche et donnons-le à 12 comme Donc les analystes choisissent cette couleur gris clair , et je vais la positionner ici et peut-être, je ne sais pas. Voyons 10 pixels. Oui, ça marche bien. Il avait contrôlé l'unité, et je vais positionner cette compétition en bas de si vieux décalage de 10 pixels vers le bas et ça va être notre identification. Donc, comme votre image. Et peut-être que nous pouvons sélectionner ce texte et choisir cette couleur, mais sélectionner l'image d'ici et choisir la couleur bleue pour cela. C' est fondamentalement ça. Nous pouvons sélectionner cela, déplacer au centre, semble bien et tout regrouper ensemble. Appelons cette image et déplacez-la sous la barre de pression parce que nous allons créer une répétition génial tout le chemin vers le bas. Et il va orteil aller juste au-dessus de l'onglet sont ou nous n'avons même pas à affaiblir. Souhaitez-vous ce clic sur répéter Great. Et on peut peut-être s'arrêter ici. Ou peut-être que nous pouvons même en créer un comme celui-ci et ensuite le déplacer au-dessous de cette barre afin que les gens puissent réellement faire défiler vers le haut et vers le bas. Et c'est notre écran comme fait. Nous pouvons apporter des changements supplémentaires plus tard dans la section design hors discours, mais pour l'instant, c'est tout. Maintenant, nous allons nous concentrer sur l'écran de profil et je vais créer un cercle. Je vais appeler cet avatar, et je vais enlever la frontière. Inclure une ombre. Assurez-vous qu'il est au centre et pour les dimensions. Utilisons 80 par 80 comme ça, et je vais le positionner 20 pixels et vers le bas du haut, et je peux sauter ici, et je peux copier ce texte. Alors appuyez sur le contrôle C sur le contrôle V juste ici. Assurez-vous qu'ils sont tous au centre, et ce que je vais utiliser ici, c'est le nom. Donc, pour le nom, positionnons-le au centre et déplaçons 20 pixels vers le bas. Donnons à celui-ci un endroit. Longtemps en Angleterre comme, alors assurez-vous qu'il est au centre. Positionnez-le ici, et si je maintiens ma touche Maj, vous pouvez voir le même espacement comme de sorte que l'avenir est vraiment agréable dans Adobe X'd, parce que vous pouvez savoir que vous avez positionné certains éléments en utilisant le même espacement d'ici à ici à ici, donc tout est pareil. Maintenant, je vais copier ce texte à partir d'un autre écran, donc j'utilise simplement beaucoup de gypse et j'ai deux lignes de texte et c'est censé représenter une description de cette personne. Alors où ils sont, ce qu'ils font et ainsi de suite. Donc fondamentalement une sorte de leur CV personnel pour cette application. Maintenant, utilisons quelques icônes de médias sociaux, donc je vais le sélectionner d'ici. Frappez le contrôle C et je vais y aller. Contrôle de frappe V. Assurez-vous qu'ils sont au centre. Mais d'abord les regrouper. Appelez ce social les médias parce que positionnez-le au centre comme ce Shift 12 tout est exactement le même que pour les espacements. Et pour la couleur de son donné cette couleur maintenant, sur Lee chose nous avons besoin sont des images. Nous allons donc utiliser les mêmes images de cet écran. Donc je vais frapper le contrôle C sur celui-ci. Zoomant droit en arrière Contrôle V et je n'ai pas besoin d'autant. Peut-être que je peux utiliser autant de sorte que vous pouvez voir comment il est simple, orteil créer ces éléments et vous pouvez les déplacer juste en dessous de Tab sont et je vais orteil Déplacer tout juste en dessous de la barre de Knave. Alors gardez tout bien et organisé et vous pouvez voir de l'aide. Agréable et simple. Ça a l'air maintenant. Tout cela sera beaucoup mieux quand nous incluons des images à l'intérieur, car les images vont créer un joli contraste entre le poignard d'une barre et tout reste. Mais maintenant, enfin, créons un menu latéral, et ce sera extrêmement simple. Mais d'abord. Nous devons apporter quelques changements à notre planche. Donc, au lieu de 8 12 pour la hauteur, allons choisir pour 77 comme ça parce que nous allons utiliser trop fonctionnalité et tout ce que vous voyez partout dans ces icônes de menu vont en fait mettre en place ce menu de côté et va viennent du haut. Mais tout deviendra beaucoup plus clair quand nous commencerons avec le prototypage. Mais d'abord. Créons des textes. Permettez-moi donc de choisir rapidement ce texte. Par exemple, Hit Control C Control V ici. Je vais écrire à la maison, assurer que c'est au centre comme ça, et je vais le positionner ici, frapper le contrôle D, et je vais le déplacer un peu vers le bas, et je vais lui donner un nom Off aime donc fondamentalement tout ce qu'ils ont dans cette barre de robinet juste ici. Ils auront ici aussi, mais ils auront cette option orteil. Sois juste ici. Tout devrait être accessible au même endroit. C' est le point principal de ce menu du site, alors donnons-lui un peu d'espacement. Donc 1234 Assurez-vous qu'il est à 40 ans quand, alors je les ai achetés, déplacez-les un peu vers le haut pour me donner tellement d'espace quand il contrôlerait la fois de plus. Et ça va être le profil. Donc, fondamentalement, nous listons tout ce que vous avez vu dans la barre de pression, mais nous lui donnons également l'option de menu latéral. Il avait contrôlé une fois de plus et ça va être tableau de bord. C' est ainsi qu'ils vont accéder à leur tableau de bord à partir d'ici. Assurez-vous qu'il est dans le centre avait contrôlé la fois de plus. Non, ça va être des paramètres comme ça. Et enfin, donnons-lui le même espacement. Enfin, nous allons avoir une déconnexion en bas comme ça et nous assurer qu'elle est à 40 ans aussi. Maintenant, nous avons besoin de cette icône si rapidement localisée, je vais utiliser divulguer que je ne pouvais pas frapper le contrôle C et rapide ici. Toucher le contrôle V. Positionnez-le en place. Maintenant, laissez-moi rapidement copier ceci. Jamais Bar Control V. Et je vais simplement utiliser cette icône et déplacer son Toby exactement au même endroit que cette icône de manuel. Donc, comme ça, et je vais le déplacer au bord droit ici. Je vais me déplacer en dehors de ce dossier hit, supprimer. Et c'est fondamentalement tout. Comme vous pouvez le voir, nous n'avons pas de barre d'état car il s'agit d'un écran supplémentaire. Et lorsque vous cliquez sur cette icône de menu, cet écran viendra de haut en bas, et il viendra juste en dessous de la barre d'état. Donc, ces barres d'état existantes vont le couvrir de toute façon. Alors finissons ça et déplacons-le ici. Par exemple. 1234 Et ce dont nous avons besoin, c'est un contexte. Donc, je vais juste utiliser une des images. Alors appuyez sur le contrôle C contrôle V coller en place. Et ce que je veux, c'est le positionner ici, s' assurer que les coronaires sont à zéro. Je vais aux orteils. Déplacez-le sur les bords. Position à ici 1234 parce que je veux juste que cette ombre de fond sur cette image, et ce sera notre menu BG. Et vous pouvez inclure l'image ici si vous le souhaitez. Mais je suis juste intéressé par cette ombre d'arrière-plan pour l'instant parce qu'il va être agréable quand vous cliquez ici va sauter de haut en bas et il va avoir dans cette ombre d' arrière-plan. Donc, il va superposer les orteils sur le dessus de ces éléments existants. Donc, il y a fondamentalement ça que vous pouvez frapper. Contrôle s parce que vous avez fini de créer vos cadres de fil. Maintenant, la prochaine section de ce cours va être conçue, et nous allons transformer ces amis de fil en dessins à part entière. On va aller aux pieds, ajouter des images différentes. Nous allons jouer avec les ombres, peut-être même avec peu de couleurs, et après que nous avons créé sont pleins de design chair. Nous allons passer au prototypage et enfin ajouter quelques animations et terminer ce projet, donc je vous verrai dans la prochaine vidéo 85. Créer le design 1: dans cette vidéo, nous allons commencer à créer nos designs. Mais avant de me faire orteil, organisez quelques choses. Ici, nous sommes dans notre projet X défile. Et si je zoome tout le chemin, vous pouvez voir que X'd commence du centre. Et puis, lorsque vous commencez à ajouter des fichiers, il commence à se déplacer vers la droite. Donc nous allons corriger ça et vous remarquerez que ces cadres métalliques vont rester en position. C' est parce que c'est juste l'image qui est traînée et déposée à l'intérieur de l'obésité. Et ce n'est pas un habitué. Notre port vous pouvez réparer cela en traînant dans le remorquage sont pauvres. Mais c'est beaucoup plus facile pour moi de cette façon, donc je vais simplement tout sélectionner. Je le ferai aussi vite que possible, et je peux les déplacer, par exemple, jusqu'ici. Et puis je peux déplacer ce papier à sa position et ce texte juste ici en haut pour que je puisse zoomer un peu plus près, et je peux voir qu'ils sont tous à 70 cette distance. Alors vérifions celui-ci aussi bien qu'il l'est, et je vais déplacer ce cadre métallique, texte quelque part par ici. Disons que c'est peut-être le milieu, par exemple. Et maintenant, si je zoome tout le chemin, vous pouvez voir combien d'espace j'ai ici pour mon design pour mes prototypes. Peut-être plus tard, je peux ajouter un design de site web ici. Econet Android app design et ainsi de suite. C' est donc une fonctionnalité vraiment géniale à avoir. Vous pouvez même aller jusqu'au sommet. Et quand vous obtenez le contrôle ou la commande zéro sur votre clavier va revenir à droite dans une position où vous vous êtes arrêté et vous pouvez concevoir à partir de là. Alors maintenant commençons à créer nos designs. Et pour ce faire, je vais dupliquer ces cadres métalliques parce que je veux que les clients puissent vérifier ces cadres tels qu'ils étaient tels que nous les avons conçus. Et quand nous passons à la conception dans cette section du cours, je veux qu'il soit capable de voir ce qui a changé des cadres métalliques aux conceptions afin que vous puissiez sélectionner tout ce qu'il contrôlerait D. Et je vais les déplacer juste un peu pour que Je peux avoir cet espace supplémentaire d'ici à ici. Et je vais frapper le contrôle D sur ce texte, et je vais double-cliquer ici, taper le design, et je vais le déplacer juste ici au centre. Donc, par exemple, quelque part par ici, disons oui, je pense que ça marche bien. Et c'est fondamentalement tout pour la préparation. Et maintenant nous pouvons commencer à ajouter nos images, et je vais commencer par le chargement et vous pouvez voir qu'il a ajouté cette extension. Vous pouvez changer cette extension en double-cliquant sur le nom de notre port, et vous pouvez taper la conception, par exemple, comme ça, et vous pouvez sauter dans le remorquage. Tous ces différents nos planches et la conception de la dactylographie. Je ne vais pas le faire pour le moment. Je vais juste le laisser à l'Extension 1, parce que plus tard, quand nous commencerons à prototyper ça, nous allons le dupliquer une fois de plus, et puis ça va être à la pointe. Ajoutez une autre extension à, et puis nous saurons plus tard sur lequel est lequel. Donc, le fil de bail original cadres celui-ci avec un est conçu et celui qui à ses prototypes, Alors commençons par l'écran de chargement, et je vais juste faire glisser et déposer quelques images à l'intérieur. J' ai téléchargé ces images à partir de Splash dot com, donc elles sont toutes libres d'utiliser. Et vous obtiendrez ces images une fois que vous aurez téléchargé ce fichier de projet et une fois que vous commencerez à l'utiliser afin que je puisse le déplacer ici. Je peux accéder à mon panneau de calques ici, et je vais déplacer cette image jusqu'au bas comme ça. Et quand je suis satisfait de la position, par exemple, ici, je peux taper un sur mon clavier et ça va de la pointe au-dessus de Bay City jusqu'à 10% comme vous pouvez le voir ici, parce que mon objectif était d'avoir une sorte hors intérêt visuel ici en arrière-plan . Et peut-être que nous pouvons ajouter une animation plus tard quand nous pouvons, peut-être augmenter de diminuer cette opacité hors de l'arrière-plan et je vais montrer appel. Nous allons changer ce logo et créer un joli peu d'animation pour l' écran de chargement . Maintenant, nous allons vouloir écran d'accueil, et quand je clique ici, je vais accéder à cette carte Répéter le grade. Vous pouvez notre groupe, ou vous pouvez simplement l'éditer comme il est juste ici. J' ai aussi quelques images que j'ai téléchargées sur Splash dot com, et ce ne sont que des images de certaines personnes. Je vais juste faire glisser et déposer sur ce cercle va devenir bleu, comme vous pouvez le voir ici et quand je lâche, va remplir ces cercles et ces cercles sur Lee parce que je planais au-dessus d'eux. Juste que je vais enlever la frontière parce qu'on n'en a pas besoin, parce que si tu te souviens, on avait juste cette frontière autour de nos images. Nous allons le supprimer, et à ce stade, avec cette répétition grand sélectionné. Vous pouvez sélectionner cette image d'avatar, et vous pouvez ajouter, par exemple, ombre portée, et elle va ajouter l'ombre portée sur toutes vos images, comme vous pouvez le voir ici. Je ne vais pas faire ça parce que je ne pense pas que ce soit nécessaire pour cette image. Mais passons à autre chose et ajoutons de nouvelles images à cette section d'image. Donc, une fois de plus, quand je les glisserai et les déposer à l'intérieur, il va remplir ces images, et c'est la meilleure idée orteil. Nommez vos images en conséquence, alors je suis allé de l'avant et j'ai nommé cette image une. C' était le numéro deux. C' était un numéro gratuit. Alors il va les ajouter dans cet ordre particulier. Je vais faire la même chose pour ces images. Donc c'est 0102 et 03 Maintenant je vais aller de l'avant et changer certains de ces noms pour que ça puisse être Jane Doe. Tout ce que vous avez à faire est simplement de double-cliquer sur le nom et il va changer ce nom. Appelons ceci, par exemple. Tu sais, Paris, France. Voyons voir et déplaçons un vers le bas. Et ça va être il y a quatre minutes parce que ça passe de la plus récente jusqu'aux plus récentes. Donc, passons cela à, par exemple, il y a six minutes. Juste ça. Un peu d'intérêt visuel. Et appelons ce type. Mais je ne connais pas James . Disons comme ça, et on va le laisser à Londres, en Angleterre, pour ces clés. Vous pouvez également changer combien de commentaires chaque image a, mais je ne vais pas faire ça. Peut-être que je peux le faire pour celui-là. Tellement réel. 18 commentaires et le 3ème 1 va être 24. Donc c'est fondamentalement tout pour celui-là. Et nous allons passer à l'écran suivant dans la vidéo suivante, donc je te verrai là-bas. 86. Créer le design 2: nous allons maintenant conçu cette image écran ouvert et parce que nous connaissons déjà le nom de cette personne. Ouvrons l'avatar de la carte, et je vais faire glisser et déposer cette image à l'intérieur. Mais vous devez faire attention à ne pas tomber. Déposez-le sur cette image, mais sur cette image, et vous verrez ces surbrillance bleue lorsque vous douce entre eux instantanément lettre aller. Nous allons enlever la bordure parce que nous voulons rester cohérents avec celui-ci, et je vais changer la couleur du texte orteil blanc. Tu verras pourquoi dans une seconde. Je veux également changer la couleur de ces icônes à la chanson supérieure Inside Back Arrow, Homer Control Select menu, et je vais changer la couleur orteil blanc ainsi. Aussi, ce que je veux faire ici, c'est aller de l'avant et réduire votre pâteux à zéro comme il est juste ici , parce que nous allons placer un peu de radieux juste ici. Ensuite, laissez-moi glisser et déposer mon image à l'intérieur, donc je vais simplement sélectionner l'image juste ici et la faire glisser et déposer depuis mon bureau. Donc c'est cette image juste ici, et vous pouvez garder une disposition. Il va zoomer au centre. Si je double-clique, vous pouvez voir ce qu'il fait ou vous pouvez doubler, cliquez, puis maintenez votre touche Maj enfoncée, puis déplacez-la vers la gauche ou la droite si c'est quelque chose que vous voulez. Mais je pense que ça marche assez bien, vous pouvez l'avoir comme si c'était juste ici. Ou vous pouvez ajouter un léger radiant et c'est ce que je vais faire et est allé orteil ajouter un peu d' orteil radieux, peut-être par ici. Et si notre Seigneur vous basez, c'est juste un peu pour que nous puissions le voir. Peut-être que le Grady dans peut finir ici, par exemple, quelque chose comme ça à 1 60 et ce que je veux faire est de supprimer la bordure, cliquez sur la couleur du champ au lieu de la couleur unie, choisissez l'ingrédient linéaire, et ce que je veux faire est en fait les orteils les faire glisser de sorte que la couleur plus foncée ira en haut. couleur plus claire ira au fond si comme ça, et je vais choisir un noir foncé juste ici et pour le blanc. Je vais abaisser la ville de paie ici 20 et je suis allé aux pieds. Peut-être même déplacer cela une touche, aussi ici et cliquez sur la couleur noire et puis partout dessus. Donc, fondamentalement, juste un peu vers le bas. Donc, vous avez ce léger rayonnant juste ici en haut et toutes les autres icônes restent comme elles étaient, donc vous pouvez même le déplacer ici. Donc, juste légère, rayonnante. Nous n'avons pas besoin de quelque chose de spécial, et vous pouvez déplacer cette couleur blanche autant que vous voulez vers le haut si c'est quelque chose que vous voulez et que vous avez trouvé nécessaire. Mais gardons ça comme ça. Par exemple. Appelons cela rayonnant, et nous allons le placer juste au-dessus de notre image et juste en dessous du texte et toutes ces icônes et barre d'état afin qu'il ne corrompe pas notre conception. Donc, il y en a essentiellement pour cet écran. Vous pouvez même changer la couleur de ce logo, mais je pense que cela fonctionnera assez bien, en fonction de vos images que vous incluez des informations, et je vous encourage à expérimenter avec différentes images pour ce projet. Donc, vous obtiendrez ce fichier de projet et vous pouvez sauter à l'intérieur d'une nouvelle exactement les mêmes images que vous voyez d'ici afin que vous puissiez double-cliquer à l'intérieur, localiser l'image hit contrôle C. Et sur certains de ces écran suivant, vous pouvez entendre patrouille être nouvelles exactement la même image que j'ai utilisée. Mais je vous encourage vraiment à pratiquer avec vos propres images afin que vous puissiez obtenir des résultats différents . Ensuite, vous pouvez poster ceci dans votre portefeuille. Maintenant, pour cet écran et nouvelle image. Nous ne changerons rien parce qu'à l'intérieur de la section prototypage de ce cours , nous allons jouer avec ce fond et nous allons à la pointe. Ajoutez une légère animation ici avant que les utilisateurs cliquent sur Ajouter à partir de la galerie. Mais à partir de la galerie elle-même, nous devons regrouper la grille et localiser l'image numéro un, qui est celle-ci. Je vais juste aller aux pieds. Retirez-le tout le chemin à ici, juste en dessous maintenant Bar et je vais tout supprimer parce que pour inclure des images en utilisant le grade de répétition, vous devez commencer avec un, pas avec trois, comme je vous l'ai montré dans la section de conception de ce cours, mais c'est vraiment simple à créer comme ça. Donc, vous avez juste une image au lieu de trois dans une rangée. Ensuite, vous appuyez sur la grille de répétition et j'ai vérifié qu'il y avait 19 pixels entre eux. Donc, je zoomais un peu plus près, plus près fosse grande ici et avoir un bas à droite ici et choisir 19. Et comme vous pouvez le voir touche sont un grand dans ce cas. Donc tout ce que j'ai à faire maintenant est simplement de faire glisser cette poignée verte jusqu'au fond comme ça. Et maintenant, je peux ajouter mes images donc je vais certainement tout à fait ici des images, et je peux enlever la bordure de celui-ci parce que je n'en ai plus besoin. Et j'ai des images déjà téléchargées à partir d'un splash dot com. Je vais les attraper tous, les faire glisser et les déposer à l'intérieur de notre grille de répétition. Et comme vous pouvez le voir, il va remplir notre répétition Great avec ces images afin que vous puissiez vérifier si vous avez tout obtenu correctement. Donc, par exemple, je peux double-cliquer ici, et je peux peut-être repositionner cette image. Peut-être que cela semble toucher Blanc ou non, vous pouvez double-cliquer sur l'un d'entre eux, et vous pouvez les repositionner si vous en avez besoin. Donc, par exemple, nous pouvons déplacer cela ici peut-être, et c'est hors de propos. Peut-être que nous pouvons nous positionner pour entendre celle-là aussi. Pour entendre que je conduis comme ici en position. Ce Ah, un peu divers. Il peut contenir votre Maj et vos flèches fléchées. Et vous pouvez repositionner dans ces images comme vous le souhaitez. Je peux peut-être déplacer sa touche au-dessus et peut-être positionner le 1er 1 jusqu'ici et voyons celui-ci. Oui, c'est bon. Alors appelons ça et faisons et disons que nous avons rempli toutes nos images. Et dans la prochaine vidéo, nous allons commencer avec Adit Image, et je veux vous montrer comment vous pouvez sélectionner ces images et pour des raisons de simplicité. Nous allons juste utiliser la première image de notre grille. Et pour notre protection Stover correctement, nous devons sur le groupe discret parce que nous avons besoin utilisateurs orteil être en mesure de cliquer sur cette première image et non sur toute la grille. Donc, je vais orteil ungh, corde le grand hit Control G une fois de plus et a appelé ces images parce que maintenant nous avons des images séparées juste ici. Je vous verrai dans la prochaine vidéo quand nous commencerons à concevoir sur le reste de ces écrans. 87. Créer le design 3: Donc, nous voici avec l'écran d'édition de l'image et ce que nous devons faire comme expliquer dans la vidéo précédente . Je vais juste utiliser cette première image pour que vous puissiez localiser l'image juste ici et vous pouvez faire glisser et déposer de votre dossier. Et maintenant, vous pouvez le repositionner comme vous le souhaitez. Je vais double-cliquer ici parce que vous pouvez voir qu'il s'agit d'une image de paysage et de l'opposition jusqu' ici donc, ces croient, sont un peu de ce pouce. Comme vous pouvez le voir, ceci est en cours, et peut-être que je peux le déplacer comme ça. Mais c'est plus facile pour dans les prochains écrans orteil. Fais-le comme ça, et je vais le laisser comme ça. Toutes ces images peuvent indiquer en série ces icônes peuvent indiquer comme elles étaient, et maintenant nous allons passer à cela donc je vais localiser l'image, cacher ma couleur. Extrêmement. Je vais faire glisser et déposer la même image à l'intérieur, bien que cliquer une fois de plus la repositionner à la même position. Donc, c'est pourquoi j'utilise ces feuilles parce qu'il y a un grand point de référence afin que je puisse les déplacer , par exemple comme ça et je peux maintenant cliquer sur la superposition de couleur ramenant et peut-être que vous pouvez réduire la taille de Désolé, Est-ce que vous payez ville de ce orteil peut-être 60% de dimanche soir que de sorte que les utilisateurs peuvent voir ce qu'ils recadrent ou peut-être même 50%. Donc, vous pouvez cliquer ici, appuyer sur cinq sur votre clavier, et il va baisser. Vous basez la ville à 50%. Vous pouvez également jouer avec ces modes de fusion afin que vous puissiez utiliser dark et vous pouvez utiliser appelé burn, par exemple. Mais je ne vais pas le faire pour le moment. Je vais juste utiliser un pâteux à 50% parce que nous avons cette zone de recadrage d'image, puis une fois que vous êtes prêt à publier, Donc, si vous choisissez de recadrer cette image, vous pouvez la recadrer comme ça. Mais si vous choisissez de ne pas le faire, vous condensez simplement l'avoir comme il est juste ici. Et c'est ce que je vais faire. Je vais juste double-cliquer ici et maintenant je peux agrandir cette image beaucoup. Eh bien, par exemple, ici et là c'est. C' est essentiellement à quoi ressemblera sur nos pieds et plus tard, nous allons copier cette image en mode prototypage. Nous allons l'ajouter là pour que vous puissiez ajouter quelques icônes ici. Et c'est ce qu'on va faire pour les orteils. J' ai donc cette image. Désolé, cette icône est sélectionnée. Je vais sauter les orteils ici. Zoom sur l'endroit où je pourrais, c'est que je vais frapper Control V et je vais juste repositionner un peu mieux. Mais désactivez le redimensionnement réactif parce que je ne veux pas qu'il redimensionne réactivement l' icône entière, juste aller à la maison une touche majuscule jusqu'ici. Et peut-être que je peux le positionner 20 pixels vers la gauche et le déplacer là où il devrait être. Donc, voilà, et je vais juste utiliser la même couleur. Peut-être que je peux même le déplacer 40 pixels, mais je pense que 20 pixels fonctionne bien, mais regardons à 40. En fait, 40 est encore mieux parce que vous pouvez imaginer que c'est un espace vraiment petit sur votre téléphone, et l'utilisateur doit taper avec ses doigts. Alors utilisons-le à 40 pixels. Donc je vais juste frapper le contrôle. C sautant ici, touche Contrôle V. Il va le coller au même endroit, et je vais juste utiliser cette couleur blanche pour ça ici. Vous pouvez également jouer avec plus de détails ici et ajouter, par exemple, si vous voulez recadrer cette image à 16 par neuf ou un par un, ou pour instagram et ainsi de suite, et vous pouvez ajouter cela pour être barre de défilement juste ici à le fond. Mais je ne vais pas le faire dans ce cas parce que j'ai parlé avec le client. Ils veulent juste garder les choses simples autant que possible pour ce premier tour, puis au prochain tour, nous allons juste jouer avec plus de détails parce qu'ils n'ont pas les images verrouillées, euh, euh, formater les images que l'insuline a, par exemple, parce qu'Instagram aime vraiment ce type carré des images, tandis que Facebook aime vraiment ce genre de paysage hors images. C' est pourquoi ils ont choisi de ne pas aller avec chacun d'eux, puis laisser les utilisateurs télécharger ce qu'ils veulent et voir comment tout fonctionne. Et si elle étape plus tard, ils veulent faire quelques changements à ce sujet qu'ils le feront. Mais maintenant, au début des étapes. Ils ne veulent pas que les orteils surchargent leurs utilisateurs avec ce genre d'informations. Ils veulent juste autant d'utilisateurs que possible dès le début. Alors maintenant, finissons rapidement celui-ci. Et je vais juste ajouter l'image de notre avatar, je vais enlever la frontière pour la garder cohérente. Et puis tu pourras piéger les gens ici. Mais nous ne le ferons pas pour le moment. Et nous allons juste taper So hashtags ici. Donc, ce que je vais faire est d'étendre ce texte orteil ici, et je vais double-cliquer à l'intérieur et tout simplement cacher d'ici. Mento a fini avec les points, et je vais taper certains aspects. Voyons donc ce que nous avons à notre image. Alors peut-être que nous pouvons taper, par exemple, intérieurs minimaux un par exemple, décoration et, par exemple, minimaliste comme ainsi, et nous pouvons sélectionner ce texte, nous peut cliquer sur la couleur. Nous pouvons le changer en bleu juste pour ajouter un peu plus d'intérêt visuel pour ces balises, et vous pouvez également jouer avec cela et explorer un peu plus. Mais assurez-vous juste que vous mettez à jour cette fois. Vous l'avez basée ici. Donc nous allons le faire dans la section prototypage hors discours. Nous allons utiliser exactement les mêmes paramètres qu'un vous a montré, et nous allons endroit de paiement orteil. Cette image que nous venons de créer au-dessus de celle-ci et ensuite nous allons faire des prototypes. Je te verrai dans la prochaine vidéo quand on finira nos dessins. 88. Créer le design 4: finissons maintenant nos conceptions et nous ne toucherons pas du tout le tableau de bord parce que je pense que cela fonctionne assez bien pour ce projet. Mais nous allons passer aux goûts, et nous allons apporter quelques changements ici. Donc d'abord les choses, en regardant tout à fait ici. Je vais ouvrir l'image et je vais sélectionner quelques images d'ici, et je vais simplement les glisser et les déposer en vue ici. Et comme vous pouvez le voir, ils ont bien peuplé cette répétition. Laisse-moi vérifier. S' ils se répètent, ils ne le font pas. Et maintenant je vais sauter à l'intérieur et me changer. Certains de ces états commencent. C' était il y a trois minutes. C' était peut-être aussi il y a trois minutes. C' était, disons, il y a cinq minutes. C' était, disons, 15 pour rendre les choses un peu plus intéressantes. Donc ça s'appelle ça 20 et pour changer ce dernier. Cachons la barre d'onglets et ce sera un 25. Disons que c'est Jane. C' est que je ne sais pas, Frank, c'est Mary. Ouais, disons que c'était aussi franc, et vous pouvez évidemment inclure différents noms en utilisant cette fonction de répétition. Laisse-moi appeler. Oui, laissez ces Toby Jane vous pouvez ajouter créer juste un calque de texte normal et un fichier texte et simplement entrer quelques noms par défaut que vous trouvez en ligne, et vous pouvez ensuite glisser et déposer le calque de texte juste ici sur votre texte, et il les mettra à jour en temps réel afin qu'ils puissent rapidement créer juste un document texte de base . Donc si je l'ouvre, vous pouvez voir à quoi ça ressemble. Donc ça s'appelle cette pâte franche. C' est basé dans quelques fois, comme ça, et vous pouvez appeler cette marque. Tu peux appeler ça la prochaine. Jane. Tu peux appeler celui-là, Voyons voir. Et Mark, allons-y. Je ne sais pas, Jenny, et laissez-nous être franc aussi, et vous pouvez sortir. Vous pouvez le faire, évidemment, sur Windows et Mac aussi. Et puis vous pouvez prendre leur document fiscal glisser-déposer sur ces noms, et il sera rempli en temps réel afin que vous puissiez le faire comme ça, ou vous pouvez le faire comme je vous l'ai déjà montré. Mais il va changer le nom en nouveau document texte parce que je n'ai pas changé le nom ceci afin que vous puissiez le changer,par exemple, par exemple, noms d'utilisateur ou quelque chose comme ça, et il va se mettre à jour en temps réel. Vous pouvez le faire pour n'importe quel calque de texte que vous trouverez ici, surtout s'ils se répètent. Donc, par exemple, si vous avez quelque chose comme des lieux ou que vous avez, je ne connais pas ces trois minutes, quatre minutes, cinq minutes et ainsi de suite. Vous pouvez le faire pour toutes ces couches de texte, mais assurez-vous simplement de nommer ce fichier car il va mettre à jour le nom du fichier et le nom de la couche ici. Alors amenons la languette. Ils sont de retour. Passons à cet écran. Et ça devrait être John juste pour garder les choses cohérentes. Et si nous vérifions ici, c'est John, et nous allons glisser et déposer la même image de l'utilisateur ici et Onley truc. On va changer d'accord ? Voici ces images, mais nous allons faire de même. Quant à l'annonce de la Galerie étaient allés orteils sur le groupe à grande. Nous allons localiser la première image, qui est celle-ci. Je vais aux orteils. Déplace-le ici. Je vais choisir. Tout devrait supprimer Klay tout à fait ici. Frappé. Répétez. Super. Et je vais faire trois cas en zoomant beaucoup plus près. Fermez-le à ici et je vais juste en faire 19 comme il est juste ici. Et vous pouvez vous positionner pour être au centre et tout ce que je veux faire est maintenant haut. L' onglet est là, et je vais étendre tout le chemin jusqu'à peut-être ici. Oui, ça marche bien. Et contre qui ? Dans un peu plus proche, pour le fermer ici et être précis. Et ce que je peux faire est ensuite de sélectionner toutes mes images, puis de les glisser et de les déposer à l'intérieur de leur va remplir. Et il est important que ce soit la première image que nous utilisons parce que cette image va se remplir ici. Ce que vous pouvez également faire est de dupliquer cette grande parce que c'est exactement la même chose. Et puis il suffit de le glisser et de le déposer en position. Et peut-être qu'on peut le faire. Vous avez pu frapper le contrôle C puis sauter ici. Mais je voulais vous montrer cette option aussi, et je vais frapper Control V et je vais juste déplacer ces images ici parce que si vous vous souvenez, nous changeons une partie de la position de ces images et de tout faire paraître cohérent, nous allons simplement garder les choses de cette façon. Maintenant, on va le déplacer ici. Supprimer sont une grille de bits, et tout ce que je veux faire à partir de ces images est simplement sauter en avant et supprimer certains d'entre eux. Donc, je vais commencer par le bas et supprimer ceux-ci et supprimer ce dernier aussi . Et personne ne retient cette barre. Vous pouvez voir qu'il a l'air bien. Vous pouvez également commander ces images si vous le souhaitez, et cela devrait être l'image une dans la rue paire et ainsi de suite. Ou vous pouvez simplement les exporter comme ceci. Mais ça va être une autre affaire. Peut devenir le prototypage des orteils, et je vais montrer comment vous pouvez les modifier dans vos prototypes plus tard et comment vous pouvez les exporter pour un accès plus facile. Mais maintenant, nous allons enfin traiter de l'écran du menu du site. Tout ce que je veux faire ici est d'inclure une image de plus sur est allé utiliser cette même image de splash, donc je vais juste le glisser et le déposer à l'intérieur, et je vais inclure un flou d'arrière-plan quand tout ce que je veux faire ici est d'augmenter l' apace iti légèrement. Donc, par exemple, peut-être 5%. Ou gardons ça à 6%. Donc tout est encore visible. Et cela va ajouter juste un peu plus d'intérêt visuel car il descend des bords supérieurs notre écran. Et c'est fondamentalement tout pour le design. Je vais te voir dans la section prototypage, qui vient ensuite dans le discours, et on va aller aux pieds. Ajoutez quelques modifications dans quelques réglages ici et là. Nous allons inclure plusieurs autres écrans. Je vais vous montrer comment vous pouvez changer certaines de ces images parce que nous avons ces curseurs juste ici. Nous allons les changer et leur faire apporter quelques modifications à cette image. Ensuite, nous allons mettre à jour ces changements sur ceci et sur cette image. Et enfin, je vais vous montrer comment vous pouvez prévisualiser cette image sur votre écran d'accueil ici, comment elle va apparaître et déplacer toutes ces images vers le bas et ainsi de suite. Donc, nous allons jouer avec cela, et nous allons jouer avec certains de ces noms d'images parce que nous allons ensuite exporter tout cela pour les développeurs et pour nos clients. Donc, nous devrons le faire dans une partie plus tard du cours. Mais je ne vais pas faire ça maintenant parce que ça va prendre beaucoup de temps. Et nous allons faire des doublons de ces couches de toute façon. Et nous allons montrer cet orteil à nos clients plus tard quand nous arriverons à la phase de prototypage hors discours, donc je vous verrai dans la prochaine vidéo. 89. Prototypage 1: dans cette vidéo, nous allons commencer à créer nos prototypes. Et pour ce faire, je vais faire un double de tous ces dessins parce que si je ne peux pas zoomer tout le chemin , vous pouvez voir que nous avons délibérément placé tout ce que nous avons créé ici, à ce coin gauche de notre rythme conseil d'administration. Et nous allons maintenant les dupliquer et ensuite simplement les placer ici sur la droite. Et maintenant, laissez-moi zoomer un peu plus près. Je vais sélectionner tous ces écrans. Il avait contrôlé l'orteil, fait un doublon, puis simplement les déplacer quelque part par ici, par exemple, à 200 pour que nous ayons le même espacement entre les cadres de grille de style thèse, conception et enfin les prototypes. Ensuite, je vais simplement dupliquer ce texte de conception et double-cliquer ici et taper des prototypes ou tout simplement protéger et déplacer le texte ici parce que nous aurons beaucoup plus d'écrans dans un instant . Mais pour l'instant, on va le laisser. Un zit, c'est les premières choses. Laissez-moi sélectionner tous ces écrans parce que je vais travailler orteil sur les écrans de chargement d'abord , et ce que je vais faire est de cliquer dessus, puis de faire deux copies. Et pour cette première copie, ce que je vais faire, c'est faire pivoter ce 360 degrés. Comme ça. Et pour celui-ci, je vais le supprimer et ensuite dupliquer celui-ci parce que c'est plus facile parce que nous avons tourné à 360 degrés, puis de simplement copier celui-ci à la place. Et puis ce que je veux faire est simplement l'agrandir à la maison. Un ancien et un clic gauche de Maj. Ancienne façon d'ici, par exemple, quelque chose comme ça. Donc, il suffit d'en avoir un peu ici, à l'intérieur hors de votre écran. Et je vais aux orteils aussi, abaissez votre pâté à zéro. Ensuite, nous allons faire la même chose pour notre image. Donc, zoomer jusqu'ici, par exemple ? Parce que je veux que ce morceau noir couvre ce morceau blanc. Alors, en allant sur les pieds, zoomez beaucoup et faites quelque chose comme ça. Donc, jusqu'à obtenir fondamentalement quelque chose comme ça. Donc, il couvre tout votre écran. Ouais, quelque chose comme ça. Et c'est le moment pour nous de le prototyper. Donc ce que je vais faire n'est pas de cliquer sur celui-ci. Prototype Quicken. Je suis allé traîner mon bleu, occupé jusqu'ici. Nous allons utiliser le délai de 0,6 seconde. On va utiliser l'auto et la viande. Nous allons utiliser easy note et enfin, pour la durée, nous allons utiliser deux secondes. Et maintenant, après cela, nous devons connecter ceci et cet écran. Donc ce que je vais faire, et je vais le faire beaucoup dans cette section du cours, je vais déplacer ces écrans d'avant en avant, parce que maintenant nous avons ces trois écrans. Et pour garder la cohérence, je vais juste les déplacer ici. Donc ce que nous avons pour le premier écran, nous ne allons pas faire pour le second écran. Donc je vais cliquer et faire glisser la bougie bleue juste ici. On va utiliser le temps 0.6. Animer également, assouplir. Mais pour la durée, nous voulons utiliser 0,6 seconde. Et enfin, pour les agités sont pauvres. Ce que nous allons faire bougie bleue traînée pour entendre le temps d'utilisation et pour le retard, nous allons doubler le robinet sont zéro. Gardez le présentateur orteil, avoir un délai de zéro seconde. Animateurs automatiques. Eh bien, note facile et 0,6. Et laissez-le savoir, prévisualisez-le. Je vais cliquer ici. Vous pouvez voir à travers les rotations dans le plus grand et il s'estompe et nous présente avec cet écran. Donc, si nous vérifions une fois de plus, vous pouvez voir les rotations et les rotations Une fois de plus s'estompe et nous présente aujourd'hui Scream dans la prochaine vidéo. On va commencer à travailler sur l'écran d'accueil, donc je te verrai là-bas. 90. Prototypage 2: travaillons pas sur notre écran d'accueil, et je vais passer au robinet de conception juste ici, et je vais le faire encore une fois. Donc, je vais sélectionner tous nos autres écrans, le déplacer, et je vais simplement faire un duplicata avec ici, et ensuite je vais les ramener tous ici. Nous allons en avoir plus sur ces écrans d'accueil dans les prochaines vidéos. Mais pour l'instant, gardons ça comme ça. Donc pour celui-ci, commençons d'abord par ceci. Donc, si je saute à l'intérieur du panneau des calques, vous pouvez voir que nous avons cette carte. Et ce que je veux faire dans celui-ci, c'est que je veux simplement tenir ma touche de changement rapide, puis les déplacer jusqu'au sommet. Ensuite, une fois qu'ils sont alignés avec notre onglet, vous pouvez frapper décalage dans notre péril deux fois pour déplacer 20 pixels vers le haut. Alors maintenant, quand on revient au fossé de prototypage, je peux simplement cliquer dessus et faire glisser cette poignée bleue jusqu'ici. Et au lieu de taper, je vais utiliser drag. Et pour faciliter l'utilisation, vous pouvez utiliser facile et extérieur juste pour garder tout cohérent et ensuite simplement ramener à ici. Donc, une fois que nous l'avons aperçu, vous pouvez voir à quoi cela ressemble. Donc tout pourrait être traîné de haut en bas comme ça, et ça fonctionne parfaitement. Maintenant, la pensée avec ceci est que nous allons télécharger la nouvelle image dans certains de ces autres écrans, puis nous allons apporter ces changements un peu plus tard. Mais pour l'instant, gardons ça comme ça. Maintenant, nous allons double-cliquer ici à l'intérieur de cette image, et ce que nous voulons faire est de faire glisser ceci jusqu'ici. Nous allons vous animer pas ou orteil, facile et hors. Voyons voir, Peut-être que nous pouvons utiliser, par exemple, 0.4 secondes ici, et ce que nous voulons faire ici est de double-cliquer sur un, celui-ci, celui-ci, faites-le glisser ici et utiliser les mêmes paramètres parce que nous veulent que les gens puissent traîner cela en ville pour faire défiler vers le haut et vers le bas. Et puis quand ils cliqueront ici, il sera également animé à celui-ci. Et quand vous voulez revenir en arrière, vous pouvez cliquer ici, et cela vous ramènera tout de suite. Et ce que je veux aussi, c'est. Je veux cliquer sur cette image que je veux aller jusqu'à l'écran de profil afin que vous puissiez localiser l'écran de profil ici. Vous pouvez simplement faire glisser cette poignée de soufflage et utiliser les mêmes paramètres. Et ce que je veux, c'est d'ici. Je veux que les gens puissent cliquer sur cette image et ensuite avoir la même expérience qu' ici. Ce que nous devons également faire, c'est relier certains d'entre eux. Donc, je vais appeler mon contrôle, garder et cliquer à l'intérieur pour cette icône aime. Je peux fermer la voiture parce que je n'en ai plus besoin. Et quand je clique sur les likes, je veux être en mesure d'aller sur l'écran des likes juste ici. Donc je vais simplement faire glisser cette poignée bleue jusqu'ici. Et puis je veux cliquer ici, puis glisser Toe ajouté Cette nouvelle image. Nous aurons les mêmes, euh, les mêmes effets pour tous et enfin cliquer sur le profil, et je veux pouvoir aller à l'écran de profil juste ici. Et c'est la partie la plus ennuyeuse parce que c'est si fastidieux à faire. Mais vous devez vraiment le faire, parce que sinon cela ne fonctionnera pas correctement. Donc c'est pour les goûts. Vous pouvez maintenir le contrôle et cliquer à l'intérieur, mais devez zoomer un peu plus près parce que celui-ci le couvre. Vous pouvez cliquer sur l'ajout, et il vous mènera à cet écran. Et enfin, lorsque vous cliquez sur le profil, il vous mènera à l'écran du profil. Et faisons-le une fois de plus pour celle-là. Si vieux double-cliquez ici. Maintenez le contrôle et cliquez à l'intérieur pour sélectionner le cycle et les autres goûts situés. suffit de faire glisser une petite poignée et il cliquera ici à la fourmi, et je vais le faire glisser ici et enfin maintenir le clic de contrôle, puis simplement le faire glisser vers profil. Donc, une fois que vous jolie avec une fois de plus pour qu'il joue avec cette année, vous pouvez faire glisser pour faire défiler vers le haut et vers le bas. Vous pouvez cliquer sur celui-ci, et quand vous cliquez ici, il vous mènera à l'écran du profil de sorte que fondamentalement pour cette vidéo dans la prochaine vidéo, nous allons commencer avec l'image ouverte et nous allons ajouter quelques effets. Donc, quand les gens cliquent ici pour aimer cette image, elle va changer et ajouter une transition agréable et subtile et changer de cet orteil vide un cœur rouge, donc je vais vous voir là-bas. 91. Prototypage 3: Ne jouons pas avec cette image écran ouvert. Je vais revenir à mon onglet de conception et à Samos avant de sélectionner tous nos ports et simplement les déplacer hors du chemin pour l'instant. Et sur ce 1er 1 ce que je vais faire est de sauter à l'intérieur et de localiser l'icône J'aime. Voilà, et je vais frapper le contrôle D pour le remorquer biblique. Je vais l'appeler Likes Field, par exemple, et je vais cacher cela pour l'instant. Je vais double-cliquer ici, et vous avez tous ces points et toutes ces notes forment cet endroit. Donc, lorsque vous les supprimez, il couvrira tout, et vous serez juste avec la forme plate et la forme remplie. En fait, si vous n'avez pas Aiken qui a ce champ ainsi que, ah, forme de trait, alors vous les utilisez. Mais si vous ne le faites pas, c'est la méthode que vous pouvez utiliser. Et enfin, pour la couleur de remplissage du simple collage, la couleur a déjà choisi, et c'est cette couleur rouge et laissez-moi rapidement l'ajouter ici à la nuance de couleur et aussi sauter ici et ajouté ici aussi. Je vais sauter en arrière et sur les dégoûts remplis dans ce premier écran va le garder à zéro ou payer ville . Je vais ramener ça et ce que je vais faire est de dupliquer ça. Et sur ce second état, ce que je veux, c'est ramener le cœur. Donc je vais le ramener comme ça. Je vais ramener ça à zéro et beaucoup de sécheresse dans un petit peu. Donc, vous pouvez maintenir, déplacer l'ancien et le clic gauche afin que je puisse l'agrandir ici, par exemple et ce que nous voulons faire maintenant, au lieu de copier celui-ci, je vais simplement copier ce 1er 1 parce qu'il a tout cœur original à l'intérieur et je va sauter à l'intérieur, gamin Mes aime, comme si et la ville de Dupay inférieure de ce 20 Donc, il va passer d'être invisible ici , orteil étant visible et grand et puis revenir à sa position d'origine et la taille Donc je peux Fermez ceci. Je les fermerai aussi si elles sont ouvertes. Ils sont juste là. Donc, ce que nous devons faire maintenant est de sauter à l'intérieur et de tout prototyper. Donc ce que je veux ici, c'est Ochlik juste ici. Ensuite, cliquez sur l'icône du cœur et fait glisser l'orteil de la poignée bleue ici et ce que je veux un pas ou orteil animer, facilitant et 0,6 secondes. Non, je vais simplement cliquer sur l'ensemble de notre port une traînée, mon orteil de poignée bleue ici et ce que vous voulez utiliser ce délai de zéro secondes. Auto ennemis est en dehors et 0.4 secondes parce que nous voulons avoir ce léger retard lorsque les gens cliquent ici. Nous voulons que cette action se produise en utilisant le déclencheur de temps de tronc et il va changer, puis remorquer cette taille d'origine et cette forme originale. Donc, nous allons rapidement en prévisualiser pour que les gens puissent sauter ici. Ouvrez cette image, et s'ils veulent aimer comme vous pouvez le voir, ça a l'air vraiment sympa. C' est une sorte de sauts de cet endroit et en utilisant le déclencheur temporel, il retournera ensuite à celui-ci. Donc, si je le change encore une fois lorsque vous cliquez dessus, il va en quelque sorte sauter et ensuite aller à sa position d'origine. Donc, maintenant, ce que nous pouvons faire, c'est simplement sauter en avant. Et parce que c'était un déclencheur temporel, je ne l'utiliserai pas. Mais vous pouvez cliquer ici et l'ensemble appuyez sur l'un de ces et vous pouvez voir que c'est facile en dehors et 0.4 secondes et nous pouvons le faire pour tous ici. Donc, je conduis cliquez ici, localisez mes goûts. Il est dans celui-ci et 0.4 secondes, et je peux cliquer ici orteil annonce. Et enfin, je peux cliquer ici pour profil a sauté un profil parce qu'une fois de plus, c'est un déclencheur de temps et il va passer en seulement 0,6 secondes, et il va atterrir sur celui-ci de sorte que vous n'avez pas à créer les zones de steppe sur celui-ci. Donc c'est tout pour cette vidéo. Et dans la vidéo suivante, nous allons sauter à l'intérieur et commencer à travailler sur l'ajout d'une nouvelle image, une galerie d'images et enfin l'ajout d'image. Nous allons démarrer cet écran parce qu'il contiendra beaucoup d'écrans différents une fois que nous arriverons. Alors je te vois dans la prochaine vidéo 92. Prototypage 4: dans ce vraiment tout. Nous allons continuer là où nous nous sommes arrêté et commencer à travailler sur New Image parce que je vais avoir un écran de plus. Laissez-moi rapidement déplacer ces écrans vers la droite, comme si, et je vais sauter à l'intérieur de mon mode de conception, Hit contrôle V toe, faire un duplicata de celui-ci et ce que je veux faire ici. Je veux que ce soit mon état final, donc ce sera comme huit pire à l'origine. Mais pour celui-ci, je vais simplement sauter à l'intérieur et déplacer certaines de ces parties afin que je puisse le déplacer un peu vers la droite et que je puisse le déplacer un peu vers la gauche. Ça va à droite. Cela va à gauche, et ce que je peux aussi faire est simplement une rotation. Ces feuilles juste un peu comme ça parce que je veux faire juste un peu d'intérêt visuel . Donc, quand les gens atterrissent sur cet écran, qui est l'écran quand très relent, de tout ce qu'ils cliquent dessus, ajouter un nouveau bouton d'image, puis développer cet écran. Une légère animation se produira en transition vers cet écran, et maintenant ils peuvent cliquer à partir de la galerie, puis il les emmènera à la calorie ou à partir de caméra, d'ailleurs, et il les emmènera à la caméra. Alors maintenant, nous allons sauter en arrière des pieds prototypage douves. Je vais simplement traîner ma bougie bleue de tout notre port, et je vais utiliser le temps. Zéro seconde pour le retard. Animez également l'assouplissement et la durée est de deux secondes parce que je veux que cela puisse passer bien. Donc, lorsque je clique sur l'aperçu, vous pouvez voir ce qu'il fait. Il tourne juste fondamentalement ces feuilles et revient dans sa position d'origine. Donc, si je le prévisualise encore une fois, vous pouvez voir à quoi cela ressemble. Donc juste une petite, petite animation que nous allons jouer quand les gens atterrissent là-bas maintenant, parce que nous n'avons pas à ajouter d'autres écrans affaiblir, sauter en arrière et faire de cet orteil leur position d'origine. Et ce que nous voulons de celui-ci, c'est que nous voulons que les gens cliquent sur la galerie. Donc, quand je clique ici, nous allons faire glisser cette poignée bleue. Allez-vous marcher au lieu de photo ennemi à ? Nous allons utiliser la transition et pour l'animation, nous allons utiliser légèrement vers le haut. Donc comme ça et la durée va être de 0,6 seconde, comme si facile une sortie Parce que nous voulons que les gens puissent cliquer ici, et puis tout cet écran va glisser vers le haut du bas. Donc, quand je clique ici, cliquez sur Aperçu, cliquez sur Ajouter à partir de la galerie, vous pouvez voir à quoi cela ressemble et maintenant les gens vont pouvoir cliquer ici, et il les mènera à cet écran. Alors maintenant, nous allons travailler sur ce rapidement, et je vais faire une copie de plus de l'image Adit. Donc, ce que je vais faire est simplement déplacer dans ces rouges le reste de ces écrans hors de l'endroit, comme Donc je vais cliquer sur celui-ci et faire un duplicate comme ça. Et ce que je veux faire ici, c'est quand les gens passent de cet écran, je veux que ce soit légèrement vers le haut par le bas, par exemple. Donc, ce que je vais faire est que je peux même sauter en double Désolé, supprimé celui-ci, et je peux sélectionner tous ces et frapper le contrôle G et l'appeler curseurs comme ainsi parce que ça va être facile pour moi orteil. Déplacez-les en tant que groupe. Maintenant, je vais frapper le contrôle D et dans ce premier écran va simplement déplacer cela hors du chemin tout le pied ici, par exemple. Mais juste en m'assurant qu'une partie reste à l'intérieur de notre port, et je vais tout simplement aller aux pieds sur toute leur base. C' est vers le bas. Maintenant. Ce que nous pouvons faire, c'est que nous pouvons cliquer ici et cliquer sur notre première image. Cela va sauter, et après un certain temps, cela va orteil pop up par le bas. Alors voyons comment faire ça. Allons en mode prototypage. Je vais cliquer sur cette image, faire glisser ma poignée bleue ici et tout ce qui a réellement voulu ajouter ici Step également animer pour la transition. Facile une sortie et 0.4 secondes parce que je veux que cela se produise rapidement. Et maintenant, après ça, je veux pouvoir sauter de ça à ça. Donc, je vais utiliser le déclencheur temporel. Comme ça. Le retard est à zéro seconde auto animate facile. Une sortie et une durée 0.6 secondes. Donc, quand vous cliquez ici tout d'abord, revenons en arrière ou tout le chemin vers celui-ci. Donc, quand je clique de la galerie, il nous emmènera à la galerie. Vous pouvez cliquer sur la première image, et comme vous pouvez le voir, elle ouvre cette première image, et ces curseurs sautent du bas. Donc, si un aperçu il une fois de plus, vous pouvez voir ce léger pépin Nets parce que ce sont pauvres est la couleur blanche. Et ce notre port est de couleur grise. C' est pour ça que nous avons ce petit problème. Donc c'est fondamentalement tout pour cette vidéo. Et dans la vidéo suivante, je vais montrer comment vous pouvez ajouter différentes images ici, et nous allons déplacer certains de ces curseurs afin que les utilisateurs puissent réellement apporter modifications à ces images en temps réel. Alors je te verrai là-bas. 93. Prototypage 5: faites savoir, apportez des modifications à cet écran. Mais avant de partir, travaillons rapidement sur ceux-ci parce que j'ai oublié de les ajouter plus tôt. Donc, je vais double-cliquer ici sur cette flèche arrière cliquez ici et vous allez à vous étape et au lieu de l'auto Enemy à nous allons faire la transition. Et ici, nous allons faire, par exemple, légèrement à gauche. Voyez à quoi ça ressemble. Donc, quand nous cliquons ici, appuyez sur l'aperçu de la galerie et en légère à gauche. Mais nous devrons l'ingénierie inverse, donc je vais cliquer ici. Il glisse vers le haut, donc je vais simplement le mettre légèrement. Non, je le ramène à cette position d'origine. Donc, si je clique sur l'aperçu, cliquez ici, puis cliquez en arrière, cela nous mènera à cet écran. Donc ça marche bien. Et pour celui-ci, nous pouvons simplement cliquer à partir de cette flèche pour revenir à l'écran et vous nous pouvons utiliser sleight gauche donc transition puis légère à gauche. Voyez à quoi ça ressemble. Alors nous allons prévisualiser cet écran, et quand vous cliquez sur cette flèche, il vous emmènera ici. Mais je pense que glisser droit pourrait fonctionner encore mieux. Alors, glissez à droite ? Aperçu de la chaleur ? Ouais, ça marche beaucoup mieux, donc c'est facile. Pensez à Adobe X'd. Lorsque vous oubliez quelque chose, vous pouvez facilement sauter en arrière et faire ces changements et ajustements en quelques secondes. Donc, parce que nous allons ajouter quelques écrans de plus juste ici, laissez-moi rapidement déplacer tous ces écrans hors du chemin. Donc, le premier écran que je vais ajouter va s'appeler Luminosité. Donc double-cliquez ici et j'appellerai cette luminosité. Alors laissez-moi le faire rapidement à partir d'ici et nous allons déplacer ces curseurs légèrement. Donc, double-cliquez ici parce que nous allons déclencher la luminosité à partir de cet écran. Laisse-moi cliquer deux fois ici. Couleur du curseur. Je vais le déplacer, par exemple ici. Puis cliquez sur le cercle, maintenez ma touche Maj jusqu'à ce que vous voyez cette croix juste ici. qui veut dire qu'il est au centre de cette couleur de diapositive. Et maintenant, quand nous l'avons fait, nous pouvons en faire un autre pour nous en procurer. On va appeler ça un contraste. Donc, lorsque les gens déplacent le curseur de contraste juste ici, il sera mis à jour ici aussi. Donc, nous conduisons semaine ici sur ce curseur pour le contraste et le déplacer à ici, par exemple, juste légèrement. Et puis déplacez l'orteil du cercle. Ici. Tu peux fermer ça. Faites un autre contrôle thermique en double, n'est-ce pas ? Ce sera des faits saillants. Il suffit de supprimer ceci et pour les surlignements. Je veux aller un peu plus bas parce que généralement avec les images de la lumière, vous voulez aller plus bas sur les points forts parce que les points forts sont déjà très forts là-bas. Et enfin, allons travailler sur nos ombres si faibles ici et inclure les ombres, perspicacité comme ça et pour les ombres. Je veux être en mesure d'ouvrir les ombres parce que c'est déjà une image très légère à quelque part par ici. Peut-être, peut-être juste ça en arrière, et n'a pas simplement bougé ce cercle en position. Donc, une fois que vous avez fait cela, vous avez besoin d'images toe include pour correspondre à ces changements. Donc c'est notre image originale que nous avons pris de notre galerie à l'arbre d'image et sont délibérément appelés comme ceci parce que j'ai déjà préparé ces images. Et si je les ramène ici, vous pouvez voir que je les ai appelés luminosité, contraste, reflets et ombres. Ce que j'ai fait, c'est que je les ai ouverts dans la boutique photo. Si vous n'avez pas quatre boutique, vous pouvez utiliser n'importe quel autre logiciel qu'il veut. Et fondamentalement, j'ai ajusté la luminosité pour cette image. Je l'ai sauvé. Contraste ajusté. Je l'ai sauvé. Les faits saillants disent que hors de l'ombre et ainsi de suite. Et si je double-clique sur orteil, ouvre ces images, vous pouvez voir quand je passe de l'un à l'autre, vous pouvez voir un léger changement parce que j'ai fait ces changements. Donc ce que je vais faire maintenant, c'est pour la luminosité. Je vais utiliser la luminosité pour le contraste, le contraste et ainsi de suite. Alors faisons ça. Donc, nous sommes ici comme la luminosité. Je vais juste glisser et déposer mon image à l'intérieur. Et pour cette image particulière, vous avez orteil connaître vos placings. C' est 49 pixels à gauche. Donc à partir de ce bord, ce que je vais faire est tout le décalage 12345 et ensuite il suffit de l'amener d'un pixel vers la droite. Ensuite, je vais utiliser la même chose pour le contraste. Donc, je vais placer l'image de contraste juste ici, et je vais la placer en position ici. 123451 Je vais faire la même chose pour les faits saillants Si vite. 123451 et enfin dans la même chose pour les ombres. Donc, comme ça 12345 et ensuite un à l'arrière. Donc, comme vous pouvez le voir, c'est vraiment facile de le faire, et cela ne vous prend vraiment pas si longtemps. C' est vraiment quelques secondes lorsque vous positionnez vos images correctement, et maintenant passons à l'intérieur d'un temps de prototypage parce que nous devons apporter quelques modifications à ces images. Donc, ce que je veux, c'est que je vais cliquer sur ce curseur de luminosité dans l'image d'édition. Donc je vais faire un clic terne juste ici sur ce cercle. Je vais faire glisser pour entendre, utiliser et boire ou orteil animer. Et pour ces anglais, l'utilisation est en dehors. Maintenant, cliquez ici sur ce cercle. Ramenez-le, puis double-cliquez ici, puis juste ici. Ne cliquez jamais ici sur les faits saillants. Et ne regardez pas ici pour qu'on puisse le ramener si nécessaire. Maintenant, cliquez sur celui-ci et finalement pas de clic sur celui-ci. Alors maintenant, testons rapidement ça. Je vais aller à partir de cet écran et cliquer ici. Il fera la transition et vous pouvez simplement déplacer ce curseur et vous pouvez voir l'effet se produit en temps réel. Et c'est appliquer ces changements et ce que nous avons fait dans ces images. Ainsi, vous pouvez, par exemple, faire un. Donc, disons ce premier écran et ensuite inclure ces quatre images aperçu pour une transition encore plus fluide . Gardez-les tout ça 0% de la ville de paie, et puis quand vous changez de l'un à l'autre, allumez votre ville de base à 100. Ainsi, par exemple, cette luminosité est à 0% ici. Lorsque vous déplacez le curseur, il deviendra 100 pour ces autres faisant la même chose. Donc c'est fondamentalement tout pour cette partie. Et maintenant, ce que nous devons faire, c'est que nous avons la récolte. Mais avant la récolte, faisons avant et après. Alors sautez ici touche le contrôle D, et ça va s'appeler comparer. Voyons voir, parce que nous voulons que l'utilisateur soit en mesure de comparer ce qui s'est passé avant et ce qui s'est passé après. Mais au lieu d'utiliser cette image, ce que je vais faire, c'est juste publiquement tout à fait ici. Copiez ceci. Donc je n'ai pas à écrire à nouveau. Je vais utiliser cette image hit contrôler le car il contient l'image originale et les valeurs de cette image car elle contient l'image finale. Donc je vais faire le contrôle en effet, localement, localement, tout à fait ici orteil basé sur mon nom de titre Mon nom de port notre nom. Ça va être après et ça va être avant. Donc, ce que je vais faire est de localiser l'image hors des ombres parce que c'était la dernière image que nous avons utilisée ici. Et je vais le glisser et le déposer juste ici sur l'image après. Et ce que je vais faire est de double-cliquer et de le déplacer simplement ici. Disons juste pour que nous puissions voir certains de ces changements, peut-être comme celui-ci, peut-être comme celui-ci, afin que les gens puissent voir ces changements, et vous pouvez, bien sûr, utiliser des mosquées si vous le souhaitez. Mais je pense que ça marche bien. Et maintenant, ce que nous devons faire est de cliquer sur cette icône juste ici en haut, et nous avons orteil créer ces transitions à partir de l'icône de comparaison. Donc, je vais cliquer sur l'icône juste ici parce que c'est notre dernier écran pour les ombres et veulent que les utilisateurs orteil soient en mesure de comparer les images d'ici et puis revenir en arrière s'ils en sont satisfaits . Donc je vais le traîner jusqu'ici. Nous allons utiliser tap auto, animate, facile maintenant, et 0.3 secondes quand le clic droit ici, il va les reprendre. Et enfin, quand ils cliquent sur cette icône sûre, nous voulons qu'ils puissent aller à la récolte. Donc, nous allons utiliser ceci pour ici étape ou pour animer. Facile maintenant 0,3 secondes et ramenons cela à 70 comme ça et utilisez la même chose de cette image ici. Alors faites glisser l'étape ou de la viande de Chine ? Facile maintenant à 0,3 secondes. Et maintenant, nous allons tout prévisualiser et voir à quoi tout ressemble. Donc, dans une clique, par exemple, sur cet écran, nous allons tout recommencer. Nous avons la légère animation que nous pouvons cliquer à partir de la galerie. Nous pouvons cliquer sur cette image. Il va s'estomper à partir du bas. Ensuite, nous pouvons apporter ces changements, alors appliquez des contrastes, reflets abaissés et peut-être ouvrir les ombres. Et quand je clique sur l'aperçu, c'est ce qui va se passer. Mais comme vous pouvez le voir, j'ai fait une erreur avec ces curseurs, mais nous allons à la pointe. Réparez-le dans une seconde. Mais vous pouvez voir cela se produire et nous montrer la différence entre ces images en temps réel . Et enfin, lorsque vous cliquez ici pour enregistrer, il va revenir à ici. Mais maintenant, faisons rapidement ce changement. Donc, je saute à l'onglet de conception, et ce que je veux est de cliquer sur ces curseurs, les supprimer, puis cliquer sur les curseurs. Appuyez sur le contrôle C contrôle V juste ici. Déplacez-les jusqu'au bas. Et maintenant, lorsque je clique ici, appuyez sur l'aperçu, puis comparez-les. Vous pouvez voir que les curseurs restent en place et qu'ils ne bougent nulle part. Une dernière chose à faire, c'est que vous pouvez le faire plus loin. Si vous voulez faire des cultures, par exemple, vous pouvez faire une culture carrée ou rectangulaire une ou celle que vous voulez. Mais je vais l'ignorer pour ce poste. Je vais sauter les orteils à l'intérieur. Le prototype a sauté ici. Te Porto ennemis. Donc nous allons utiliser tout ça. Donc, quand vous cliquez ici, prévisualiser, vous pouvez cliquer, Enregistrer il vous ramènera ici ou il vous ramènera à cet écran de comparaison, mais je ne vais pas orteil. Envoyez-le à l'écran de comparaison. Je vais cliquer ici et puis simplement le repositionner sur ce notre port, parce que je veux que ce soit mon dernier, notre bateau avant de venir à cet écran. Donc, nous allons rapidement Prewitt cliquez sur Enregistrer. Et quand je reviendrai, il reviendra à celui-ci, et vous pouvez voir qu'il a une belle animation, et ce qui nous reste enfin, c' est les orteils. Créez la connexion entre l'enregistrement et cette description. Publiez, alors nous allons le faire. Suivant. Cliquez dessus, faites-le glisser et déposez-le ici, et nous allons utiliser fondamentalement les mêmes paramètres que nous l'avons fait ici. Ainsi, lorsque vous cliquez ici,par exemple, par exemple prévisualisez, cliquez, enregistrez, enregistrez à nouveau et vous pouvez voir qu'il s'enclenche à nouveau en position. Donc c'est tout pour cette vidéo. Et dans la vidéo suivante, nous allons travailler sur la barre oblique publiée, et je vous verrai là-bas 94. Prototypage 6: Ne travaillons pas sur la barre oblique de description publiée écran. Je vais revenir aux douves de conception et revenir à 70 comme ça, Et puis je vais déplacer tous ces écrans hors du chemin pour l'instant, et je vais apporter quelques modifications à cet écran particulier. Je vais sauter à l'intérieur du texte, et ce que je vais faire est simplement créer un rectangle, créer un rectangle comme celui-ci. Appelez ça une mosquée comme ça, et je vais la mettre juste au-dessus de notre texte et tous les sélectionner les deux et frapper le contrôle de changement de vitesse em ou commandant de quart. Si vous êtes sur un Mac localement, pleuré ici, appelez ça une mosquée. Et sur ce premier écran, et sur ce premier état, je vais simplement le déplacer comme ça tout le long du chemin comme ça. Et je pourrais peut-être le déplacer comme ça pour m'assurer que tout est couvert. Donc, cela imitera réellement lorsque les utilisateurs commencent à taper. Et je vous ai déjà montré que dans la zone de texte de ce cours, et pour ce bouton, utilisons une couleur plus foncée. Ou peut-être que nous pouvons même utiliser cette couleur plus claire. Donc, c'est l'état déclippé, et une fois qu'ils sont en mesure de cliquer Il deviendra bleu Alors maintenant nous allons obtenir le contrôle d pour faire un autre dupliquer et je vais sauter à l'intérieur de ce bouton tournant bain en bleu et aussi sauter à l'intérieur de cette mosquée et étendu jusqu'à ici comme ça. Mais maintenant, une fois que vous cliquez sur Publier, où allez-vous ? Donc, ce que nous avons à faire est en fait de créer plus d'écrans d'accueil, donc je vais sauter jusqu'ici. Vous voyez combien de plus nous avons pour les prototypes ? 10 pour un design et nous aurons quelques écrans supplémentaires. Mais c'est ainsi qu'avec les prototypes dans un no bxe, il faudra faire plus de copies. Alors sélectionnons tout sauf ces écrans d'accueil ici. Et je maintiendrai la touche Maj et je les déplacerai hors du chemin. Et ce que vous voulez faire est de cliquer ici, appuyez sur le contrôle D pour en faire un duplicata. Je vais sauter à l'intérieur, sont sur répéter grand clic sur le groupe. Super. Et vous pouvez voir que cette carte a été laissée hors de l'écran. Je ramenais les orteils ici pour qu'il saute à l'intérieur de cette maison pour notre planche. Je ne le déplacerai pas ici pour localiser le numéro un. Ici, c'est. Numéro deux. Ici, c'est. Mais au lieu d'appeler cette carte numéro un, je l'appellerai la voiture numéro deux. Ça devrait être la carte numéro trois. Ça devrait être la carte numéro 4 et je vais faire un autre dupliquer ce 1er 1 et appeler cette carte numéro un comme ça et puis je les regrouperai tous ensemble, frapper le contrôle, G cartes de visite comme ça et je bougerai dans la rue. Mais avant que je le fasse, laissez-moi rapidement cliquer sur ce dernier, et je vais l'aligner comme ça. Et comme vous pouvez le voir, il y a 20 pixels entre chacune des cartes. Et maintenant, enfin, je peux attraper ces trois et les déplacer vers le bas. Alors rencontrez une touche de changement jusqu'ici et assurez-vous qu'ils sont à 20 comme le reste de ces cartes. Donc, comme ça et ça va être notre nouvelle image que vous venez de télécharger. Et appelons ça une minute. Et au lieu de cette image, nous devons regarder localiser l'image des ombres parce que si vous vous souvenez , Shadows était notre dernière image que nous avons téléchargée ici et c'était le dernier changement. Donc, d'autres ont localisé l'image des ombres juste ici dans mon dossier. Il suffit de zoomer un peu plus près, sélectionner l'image, faire glisser et de déposer mes ombres à l'intérieur. Je vais double-cliquer pour agrandir cette image quelque part ici, peut-être, et je vais la déplacer au centre comme ça, et ce sera en fait notre nouvelle image. Et parce que c'est une toute nouvelle image, donnons à cela peut-être six commentaires quelque chose comme ça, parce que c'est tout neuf et ce que nous voulons est de rendre une autre drogue précise. Donc, contrôlez la chaleur D et sautez l'aperçu ici, puis déplacez-les tous hors du chemin vers ici , puis déplacez un pour additionner plus de 20 pixels à partir de l'arrêt de la barre supérieure. Et ça va imiter le geste de glissement. Donc, sautez à la douve de prototypage et je peux cliquer sur ce, cartes une couche, faites glisser ma poignée bleue et puis utiliser dans glisser, et ici utiliser facile une sortie, puis cliquez ici et ramener parce que je veux utiliser exactement dans le même style. Et quand je clique sur l'aperçu, vous pouvez voir qu'il est allé jusqu'ici. Voici donc notre nouvelle image et nous pouvons revenir à celle-ci et vous pouvez basculer entre elles si vous le souhaitez. Comme vous pouvez le voir, j'ai fait cette image ouvrir des écrans pour cette image. Mais si tu veux, tu peux le changer. Et vous pouvez simplement le laisser comme ça pour que vous puissiez le changer. Toby, cette image pour être dans cette nouvelle image afin que les utilisateurs puissent en prévisualiser là, vous pouvez simplement le changer. Donc ici et puis vous pouvez toujours avoir ces animations que nous avons déjà créées. Mais si ce n'est pas le cas, vous pouvez le laisser comme ça. Alors connectons maintenant nos deux nouveaux écrans d'accueil avec ces écrans publiés. Donc ce que je vais faire, c'est que je vais sélectionner ces écrans à la maison une touche de changement et le ramener à 70 et je vais cliquer ici orteil animer ceux-ci. Donc, ce que nous voulons réellement est de cliquer sur ce champ de texte, le faire glisser ici, et nous voulons utiliser pas ou orteil animate facile une sortie et 0.8 secondes, par exemple, parce que nous voulons lui donner juste un peu plus de temps pour révéler le texte Et quand nous cliquons sur le bouton Publier, ramenons-le sur notre écran d'accueil, notre nouvel écran d'accueil, d'ailleurs. Alors, cliquez dessus et faites-le glisser orteil notre nouvel écran d'accueil, qui est celui-ci. J' espère que vous pourrez le voir. Donc, c'est celui-ci avec la nouvelle image et pour cela, nous pouvons utiliser tap. Maintenant, nous pouvons utiliser la transition Accueil pour est sur l'écran, et nous pouvons utiliser push up, par exemple, ou légèrement up est en dehors et 0.8 secondes. Alors nous allons prévisualiser ces deux-là, ou nous pouvons aller de l'écran de recadrage une affaire ZA. Donc, quand vous cliquez, dites qu'il va revenir à ici. Lorsque vous cliquez ici, il saisit le texte et la publication devient visible. Et quand vous cliquez juste là, il vous ramènera à l'écran d'accueil, où vous pouvez glisser vers le haut et je vais aller droit devant et connecter ces icônes de la même façon que je l'ai fait avec les écrans d'accueil d'origine. Mais je ne vais pas vous déranger. Une fois que vous le fichier Donald R Project, vous pouvez sauter à l'intérieur et vous rappeler quelles transitions j'ai utilisé pour ces écrans. Si vous avez oublié quelque chose dans la prochaine vidéo, on va s'occuper du tableau de bord et je vous verrai là-bas. 95. Prototypage 7: Maintenant, commençons à travailler sur notre écran de tableau de bord et continuons et sélectionnez-le. Déplacez-le ici, puis sautez à l'intérieur de la touche de conception D pour en faire un duplicata. Et je vais ramener ces écrans ici. Pourquoi j'ai créé le duplicata est parce que nous avons besoin de créer notre point de départ et un point de fin . Ce sera notre point final. Et pour le point de départ, nous devons créer quelques changements pour tous ces graphiques. Commençons par ce tableau. Je vais ouvrir les orteils et vous pouvez voir qu'on a deux masques, un du vert, un du bleu. Maintenant, vous pouvez double-cliquer sur la Mosquée Bleue juste ici, et vous pouvez zoomer si vous ne pouvez pas cliquer directement dessus. Et ce que je veux faire, c'est ramener ces points si faibles ici. Ensuite, je vais cliquer ici, par exemple, et tous positionner cet orteil ici jusqu'au centre. Et quand je clique dehors, vous pouvez voir qu'il nous reste avec ces grands antécédents. Maintenant, nous devons faire la même chose pour le vert, et ça ne va pas avoir l'air parfaitement. Vous pouvez revenir aux vidéos des graphiques et voir comment j'ai fait cela pour les graphiques, pour le résultat parfait, parce que nous allons seulement avoir à nos ports. Et vous devez en avoir au moins trois pour que cela fonctionne correctement. Mais nous avons ces autres graphiques à l'intérieur hors de l'écran. Donc, si je crée trois écrans, par exemple, ça aura l'air bizarre juste pour ce graphique afin que vous puissiez revenir à cette vidéo et voir comment je l'ai créée. Mais pour l'instant, sortons tout simplement du chemin. Et je le ferai dans l'autre direction, par exemple, pour celle-ci. Et je vais le déplacer jusqu'ici, par exemple, pour le déplacer jusqu'ici jusqu'au sommet. Je vais l'écarter de la route aussi. Ce que je vais bouger ici, et quand je clique dehors, ça deviendra génial. Maintenant, fermons celle-là. Passez aux goûts. Une fois de plus, vous pouvez revenir à cette vidéo pour voir comment je l'ai fait, pour un résultat parfait. Mais pour celui-ci, il ne sera pas parfait comme il le pourrait. Abaissons donc ce bas orteil un en hauteur, plus bas. Vous avez collé ? Je vais cliquer sur la barre verte et faire la même chose comme si déjà une pâte, vous savez, et ouvrons la dernière. Donc, les meilleurs moments pour poster vous savez pourquoi ce n'est pas dans un groupe. Alors faisons ce changement. Donc le meilleur moment pour poster je ces temps de qualité et je vais faire la même chose pour celui-ci. Il devrait être dans un groupe temps de qualité aussi bien. Et pour cet état d'origine, faisons simplement le changement si correct aux heures de pointe et vous pouvez double-cliquer et déplacer ces points. Donc je vais le déplacer, tous ici. Et assurez-vous qu'il y a des lignes avec ce point et vous pouvez également trouver cette vidéo à l'intérieur la section des graphiques de ce cours et vous pouvez voir comment je l'ai créée là-bas. Et nous avons aussi une variation orteil de plus cet effet si vous voulez créer un autre effet qui essaie d'être différent de celui-ci, mais il crée vraiment un résultat différent Si c'est quelque chose que vous cherchez et je vais cliquer sur celui-là, je peux l'apporter tout le chemin pour l'entendre. Zoom beaucoup plus près. Cliquez ici, puis sélectionnez tous ces points, puis simplement les amener ici à ce point de départ et ne pas animer cela. Donc, quand je clique ici, je clique sur le prototype. Faites glisser ma bougie bleue jusqu'ici, et ce que je vais utiliser, c'est le temps. Nous allons utiliser le délai de zéro seconde ou de l'animation des orteils, assouplissement et une seconde pour la durée. Et parce que les gens accèdent à cet écran de tableau de bord juste ici à partir du menu et non de nulle part ailleurs, ce sera essentiellement le point de départ une fois qu'ils cliqueront sur le menu. Donc ici, par exemple, puis cliquez sur tableau de bord ici. Cela va être le point de départ pour cela, alors passons un aperçu, et vous pouvez voir à quoi cela ressemble. Donc, une fois de plus, ces deux fonctionnent bien, mais celui-ci n'est pas si bon. Mais encore une fois, il a ce genre d'intérêt visuel pour que les gens puissent le regarder et comprendre ce qu'il fait. Alors maintenant passons rapidement aux goûts parce que c'est vraiment simple à créer. Je vais déplacer ces deux écrans hors du chemin pour l'instant, vais cliquer sur Mes likes frapper le contrôle D pour en faire un duplicata. Et parce que nous avons ici notre image originale que nous avons éditée et inclus tout ce que j'ai à faire pour celle-ci, ils la déplacent simplement ici. Donc, puis tout décaler un pour l'amener 20 pixels vers le haut, et je vais cliquer sur le prototype. Cliquez sur l'image elle-même. Les dragons utilisent et déplacent l'animation automatique et l'assouplissement. Utilisez facile maintenant parce que nous l'avons utilisé dans le reste de nos vidéos et simplement ramener à celle-ci aussi. Donc, lorsque je clique sur l'aperçu, vous pouvez voir à quoi cela ressemble. Donc, c'est fondamentalement tout pour cette vidéo, et vous pouvez même l'étendre plus loin. Donc, par exemple, si vous avez ouvert cette nouvelle image au lieu de celle-ci juste ici, vous ne pouvez pas sauter juste ici pour les goûts. Et quand vous cliquez sur cette image juste ici parce que vous pouvez voir que c'est notre nouvelle image quand vous cliquez dessus, cela vous emmènerait juste ici car au lieu de cette image nous avons utilisé cette image pour que vous puissiez vraiment les retourner, et vous pouvez vraiment créer votre propre pot sur la façon dont vous allez utiliser ces écrans. Mais j'ai trouvé celui-ci fonctionne correctement pour moi dans ce cas, mais une fois de plus vous obtenez notre fichier de sortie de projet, et vous pouvez inclure vos propres images. Je vous encourage même à le faire et à jouer avec vos propres images personnalisées. Vous pouvez apporter des modifications différentes à partir de ces curseurs. Vous pouvez même créer des effets de culture ici, en utilisant certains des autres effets dans le discours et ensuite vraiment obtenir un résultat différent. Vous pouvez également créer quelques écrans supplémentaires pour le tableau de bord Plus orteil. Atteignez un résultat différent ici. Mais c'est vraiment à toi de décider. C' est pour ça que tu reçois ce dossier de projet. Je vous encourage vraiment à construire vos propres écrans, en utilisant ce fichier, ainsi que d'apporter des modifications au plaisir existant. Donc, dans la prochaine vidéo, nous allons traiter avec l'écran de profil juste un peu et ne pas créer trop d'effets pour elle et enfin traiter avec le menu décider parce que ce va être une superposition sur les écrans et vous verrez nous allons avoir un bon effet. En attendant, je vais simplement sauter en vue et connecter toutes ces autres icônes comme je l'ai fait pour l'écran d'accueil. Et encore une fois, si vous ne vous souvenez pas lequel de ces transitions étaient, vous pouvez également sauter à l'intérieur et cliquer sur ces icônes. Donc, lorsque vous êtes en mode prototypage produit, vous pouvez cliquer sur ce bas, par exemple, et vous pouvez voir ici quels paramètres sont utilisés pour cet effet, donc je vais vous voir dans la vidéo suivante. 96. Prototypage 8: finissons maintenant nos prototypes avec le profil, et la seule chose que je veux faire ici déjà est que j'ai connecté tous ces pas à pas sauf celui-ci, et celui-ci est pour le menu. Donc, si je clique sur le contrôle et en cliquant sur le site pour sélectionner mon menu, je peux simplement faire glisser et déposer ici et ce que je quoi ? Je veux utiliser cette étape et au lieu d'animer aussi je veux utiliser plus tard parce qu'il va orteil superposer cet écran sur le dessus de ce cri, et vous pouvez utiliser cette poignée pour le déplacer tout le chemin ici vers le haut, et vous pouvez maintenir Shift si vous voulez. Et ce que je veux faire est de choisir légèrement vers le bas parce que je veux que cela légère et vers le bas du haut sur tous les écrans qui ont cette icône de menu. Et enfin, je veux utiliser une sortie facile, et la durée va être de 0,8 seconde. Donc, quand je clique ici, cliquez sur cette icône, vous pouvez voir qu'elle glisse du haut, et si je le fais encore une fois, vous pouvez voir à quoi cela ressemble, et parce que cela a un flou d'arrière-plan, vous pouvez voir l'image. Mais quel que soit l'écran qui est présenté, il aura l'air légèrement différent parce qu'il est floue et qu'il a plus bas ou fondamentalement donc il va trier, être un peu translucide et regarder juste un peu différent. Puis sur ici, vous pouvez éteindre, bien sûr, utiliser et ah, fond blanc, fond noir, toute autre couleur vendue et il avait l'air le même sur tous les écrans. Mais comme ça ajoute juste un peu plus d'intérêt visuel de cette façon. Maintenant, enfin, ce que je veux faire, c'est que je veux connecter ces éléments de menu aux écrans. Donc, par exemple, je peux cliquer sur la maison et je peux sauter tout le chemin ici, et je veux le connecter à la maison, qui est dans cet écran, et ce que je veux utiliser ici est l'étape. Je veux utiliser la transition. Je veux utiliser dissoudre, donc c'est juste ici en haut, facilitant et 0,8 secondes, et maintenant je peux sauter en arrière et faire la même chose pour tout l'écran. Alors voici les goûts. Je peux simplement le faire glisser pour entendre qu'il aura exactement les mêmes paramètres. C' est mon profil, et mon tableau de bord va être ce premier écran. C' est donc là que vous accédez au tableau de bord. Donc, peu importe ce que vous pouvez cliquer ici, il vous mènera au tableau de bord. Nous n'avons pas de paramètres, nous aurons déconnexion. Donc, c'est à ça que ça ressemble. Donc, une fois de plus, lorsque nous cliquons sur l'aperçu, nous pouvons cliquer sur l'icône du menu. Il sautera du haut, et lorsque je clique sur le tableau de bord, par exemple, il vous montrera l'écran du tableau de bord. Donc maintenant, ce que je veux faire est d'entrer et de créer fondamentalement ce que j'ai fait pour l'écran de profil et ce menu. Donc je vais sauter à l'intérieur et vous montrer pour quelques d'entre eux. Donc, je vais simplement connecter mon menu. Je viens t'offrir un pas. Je vais utiliser trop, et il va le superposer ici sur le dessus. Et vous pouvez également revenir ici et utiliser le même paramètre. Donc, glissez vers le bas, en relâchant et 0,8 seconde. Donc nous voilà, au lieu de dissoudre. Faites glisser vers le bas facilement maintenant 0,8 seconde. Et maintenant, lorsque vous double-cliquez ici sur l'un d'eux et faites-le glisser pour entendre qu'il aura exactement les mêmes paramètres, et je ne vais pas aller de l'avant, sauter à l'intérieur et le changer, orteil tous. Et une fois que je l'ai fait, je reviendrai à. Alors maintenant que je l'ai fait et connecté tout, nous pouvons peut-être sauter à l'intérieur et prévisualiser le prototype entier. Alors on y va. Nous allons commencer dès le début, et je vais l'agrandir un peu pour que nous puissions voir l'ensemble du projet en action . Alors rappelons-nous que nous avons utilisé une gâchette de dragage ici, et nous avons ces éléments capables. Donc, quand je clique ici, par exemple, et que je veux prévisualiser cette image d'un clic ici, peut-être jusqu'à ce que je me ressemble. Donc, c'est comme ça que ça ressemble. Et peut-être que je veux revenir à l'écran d'accueil à partir de cette icône. Mais ajoutons, par exemple, une nouvelle image. Cela va orteil déplacer juste un peu et nous allons cliquer de la galerie, et peut-être que nous pouvons utiliser la première image. Ces curseurs apparaissent à partir du bas et nous allons apporter quelques modifications à cette image. Alors peut-être ici. Peut-être qu'un chlorate est en baisse. Peut-être que je peux augmenter ça jusqu'ici. Peut-être que je veux voir avant et après cela. Ça a l'air bien sur vous pourriez sauver. Oui, j'ai trouvé la récolte satisfaisante. Et je veux passer à autre chose et laisser moi ajouter une description. Et Ochlik a publié ici. Et nous voici au début, sur l'écran d'accueil et, par exemple, je veux vérifier mes goûts et voir que quelqu'un a aimé mon image d'ici. Et regardons le profil très rapidement. Et le voilà. Cette image est ici aussi. Examinons d'autres choses. Donc, par exemple, regardons Dash Word. Et voici nos analystes de tableau de bord retournent rapidement à la maison d'ici. Donc c'est tout notre prototype. C' est la partie prototypage faite. Et dans la prochaine vidéo, je vais vous montrer comment partager ce prototype avec votre client. Et dans la section suivante, hors cours, nous allons faire quelques ajustements ici et là, et nous allons partager ceci avec nos clients ainsi qu'avec leurs développeurs. Donc, je vais vous montrer comment vous pouvez le faire et aussi comment vous pouvez exporter tous ces actifs toe Enfin les partager avec votre client et le développeur. Une dernière chose que je veux faire dans cette vidéo. Ils cliquent simplement sur le dessin et déplacent ce texte quelque part ici. Toby. Peut-être un peu plus au milieu. Peut-être juste ici. Et si je pouvais contrôler zéro, vous pouvez voir jusqu'où cela a atteint, et vous pouvez toujours sélectionner tous ces m, par exemple, Déplacez-les ici ci-dessous si c'est quelque chose que vous voulez. Mais c'est pourquoi nous lui avons donné tellement d'espace pour qu'il nous reste beaucoup plus d'espace ici. Si vous voulez jouer avec elle un peu plus d'écrans ou plus d'effets, ou faire quelques changements ou à l'avenir sur Android et les versions Web ainsi. Donc c'est tout pour cette vidéo, et je te verrai dans la prochaine 97. Créer un guide de style: avant que nous ayons à partager sont conçus avec décliné et finalement les développeurs à la retraite. Nous devons finir notre guide de style. Et pour ce faire, permettez-moi de zoomer rapidement un peu plus près. Comme vous pouvez le voir, nous n'avons que leur logo ainsi que les icônes. Mais nous voulons inclure beaucoup d'autres éléments ici. Donc, par exemple, je veux inclure cette illustration. Ici. Je veux inclure des couleurs. Je veux inclure l'ombre portée qui a été incluse. Nous avons un bouton qui doit être inclus ici pour que tout puisse regarder correctement ainsi que les fonds. Alors commençons par le début. Allons d'abord sauter à l'intérieur. Je vais Presti sur mon clavier et laissez-moi inclure les calques afin que vous puissiez voir ce que je tape. Donc, nous allons taper un logo juste ici. Nous sommes au sens ouvert. 14 analystes utilisés dans cette couleur, et mettons ce texte ici en haut. Donc c'est mieux organisé, donc je vais le mettre ici et me laisser déplacer rapidement tout vers le bas pour peut-être que nous pouvons tout déplacer par et avant les pixels ou 60. Donc 1234 ouais, car il a l'air bien. Le logo de sélection. 1234 Maintenant, je vais orteil dupliquer le texte du logo. Alors contrôlez D et je vais déplacer ça vers le bas et appeler ces icônes comme ça. Et je vais me déplacer dans ces icônes ainsi que les quatre pixels avant vers le bas. Donc 1234 Et enfin, laissez-moi de sélectionner le texte. Aligner tout avec nos icônes Texte 1234 Et ce que je veux faire maintenant est d'inclure nos fonds . Donc, nous avons touché le contrôle D et déplacer tout cela vers le bas, alignons sur ce texte et appelons ces fonds comme ça Et parce que nous n'avons qu'un seul fonds pour ce projet, il sera vraiment assez simple de tout utiliser. Donc 1234 Donc, ce que nous avons est le sens ouvert. Et si nous sautons ici dans notre écran d'accueil, si je double-clique à l'intérieur ou si vous pouvez ouvrir cette carte, ce que nous avons ici est le sens ouvert. 14 nous avons ouvert depuis 12 et dans cette couleur, et nous avons ouvert depuis 12. Et dans cette couleur, donc nous n'avons qu'un front dans ces 33 styles, donc nous allons le faire. Donc, pour ce faire, vous pouvez simplement cliquer ici et utiliser des styles de caractères. Donc, nous allons ajouter celui-ci. Ensuite, nous ajouterons celui-ci parce que c'est de la même couleur. Et enfin, nous pouvons ajouter celui-ci. Donc nous avons créé tous les trois ici, et nous avons des composants ici. Mais vous pouvez ajouter plusieurs composants. Ainsi, par exemple, vous pouvez sauter à l'intérieur et ajouter chaque icône que vous voyez ici. Vous pouvez les ajouter, orteil les composants. Vous pouvez ajouter le bas en tant que composant séparé. Si c'est quelque chose que vous voulez, vous pouvez ajouter cette barre d'étape en tant que différents composants. Donc, parce que nous avons quatre icônes, vous pourriez avoir quatre barres d'onglets différentes. Tu peux ajouter ça ici, Toby. Un onglet sont donc tout ce que vous voulez que vous pouvez ajouter en tant que composant séparé. Et de cette façon, il vous sera plus facile de concevoir plus tard si c'est quelque chose que vous voulez. Mais pour l'instant, on va le garder comme ça. Nous aurons donc ces trois styles de caractères et n'aurons que la barre d'état en tant que composant . Alors laissez-moi rapidement ajouter ces téléphones ici, donc je vais dupliquer le téléphone au texte frappé Control D et le déplacer vers le bas 40 pixels. Donc 1234 et on va sauter ici et on a appelé ça ouvert depuis 14 ans. Boulon comme ça. Et vous pouvez, par exemple, contrôler D et déplacer ce Bottom Corp mangé vers le bas. Juste une touche comme ça. 12 peut-être 20 pixels. Et vous conduisez comme, juste ici en tapant des numéros. Donc, de 0 à 9, cela peut être frappé espace. Et puis vous pouvez taper dans l'ensemble de l'alphabet si c'est quelque chose que vous voulez, Donc un B c la et laissez-moi rapidement mettre la vidéo en pause ici tandis qu'un tout en tête. Donc, voici l'alphabet entier ainsi qu'avec des nombres, et vous pouvez également ajouter les signes si vous le souhaitez. Alors peut-être que vous pouvez un signe d'explication points communs et ainsi de suite. Mais je vais juste garder ça simple et le garder comme ça. Ce que je veux faire ensuite, c'est sélectionner ces deux. Vous pouvez le faire à partir d'ici aussi. Il contrôlait D, et vous pouvez déplacer ces deux-là tout le décalage et le déplacer de 20 pixels vers le bas comme ça et ensuite je voulais juste appliquer ce suivant. Ou peut-être que je peux même cliquer dessus parce que c'est la même couleur que celle-ci. Donc peut-être qu'on peut le garder 20 pixels en bas comme ça. Et si je clique sur celui-ci, c'est normal, donc je vais le changer ici. Donc c'est normal et c'est un sens ouvert. 12. Et maintenant, enfin, enfin, faisons une copie de turd, donc je vais sauter ici. Il contrôlerait Indy pour faire un double, les déplacer tous les deux vers le bas, et je vais simplement le faire. Et pour cela, je peux cliquer sur celui-ci, et il va changer la couleur et vous pouvez voir qu'il est toujours ouvert. Stance 12 régulière. Mais c'est une couleur distincte, donc je peux faire le même espacement comme avant. Donc 20 pixels et c'est 20 pixels ici aussi bien que vous pouvez le voir. Donc maintenant, ce qu'il nous reste à faire est d'ajouter ces couleurs, donc c'est assez simple aussi,pour donc c'est assez simple aussi, je puisse tout déplacer vers le bas. Et comme vous pouvez le voir, nous manque cette couleur verte juste ici. Donc, je vais simplement sauter à l'intérieur de nos tableaux , par exemple, frapper le contrôle et cliquer sur le site, puis simplement ajouter cette couleur verte ici. Donc ce sont toutes les couleurs que nous utilisions. Et puis nous pouvons simplement sauter ici et inclure ces couleurs pour que je puisse utiliser un de ces textes. Par exemple, celui-ci touche le contrôle D et je ne le déplace pas tout le long. Et maintenant nous pouvons commencer à créer ces groupes donc je vais dupliquer les téléphones ainsi que déplacer les fonds ici comme ça et ensuite déplacer ce texte jusqu'ici et d'un groupe. Tous les fonds ont frappé le contrôle G et appelé ce fonds parce qu'il sera beaucoup plus facile pour nous de tout traiter. Ce sont des icônes. Et enfin, ce sont nos logos ou le groupe aussi, comme ça Et enfin, ce que nous voulons pour cela, ce sont des couleurs comme ça. Laisse-moi faire 40 pixels vers le bas. Alors qu'est-ce qu'il y a dedans ? Encore une fois d'ici. Si longtemps. 234 Et nous pouvons simplement l'utiliser pour les couleurs fiscales. Maintenant, pour les couleurs. Je peux simplement prendre une de ces images de notre cadre métallique. Laisse-moi localiser une de ces images. Peut-être que je peux utiliser celui-là. Par exemple, appuyez sur le contrôle C. Je vais aller jusqu'ici frapper le contrôle V et ensuite l'opposition ici. Peut-être qu'il peut aller 20 pixels ou même mieux pour les pixels vers le bas. Ne pas compliquer davantage les choses. Et disons, commencez à ajouter nos couleurs. Donc, notre cause principale est si grande. Et nous allons aussi déplacer le bleu ici. Ensuite, ce gris plus léger et ce genre encore plus léger. Super. Ensuite, nous entendons le vert et le rouge enfin. Alors commençons par le début. Nous pouvons déplacer celui-ci, peut-être 20 pixels et me laisser sélectionner les deux et j'enlève leurs ombres pour pouvoir les positionner ici. Donc, nous devons pour six couleurs. Faisons six copies. Donc c'est pour cinq juste ici et puis six, comme ça et puis vous pouvez simplement sauter ici et commencer à ajouter toutes ces couleurs comme ça Et puis une dernière chose qui nous reste à faire ici est que vous pouvez créer les hashtags avant et devis hexadécimal. Donc 707070 C'est la couleur pour ça. Super. Et nous pouvons utiliser la couleur blanche pour le texte si peu sélectionner rapidement le blanc d'ici. Et si je saute à l'intérieur et déplacer cela au-dessus de ces images afin que nous puissions appeler cette couleur sélectionnée , puis double-cliquez et appuyez sur le contrôle V ou commande V orteil basé sur orteil. Tout cela, et vous pouvez aussi les déplacer. Donc c'est 1ère 1 seconde, 1/3 1 4e 1/5 1 et violer. C' est le 6ème 1 Donc, vous pouvez facilement créer ceci en appuyant simplement sur le contrôle sur D. Et vous pouvez les positionner au centre de chaque couleur, comme ça. Et évidemment, on va changer la couleur de celui-là pour ça. Et nous pouvons les dupliquer comme ça pour les positionner au centre comme ça. Et puis enfin, ce que vous pouvez faire est que vous pouvez sauter ici, double clic et simplement taper ces couleurs trois C six ff qui est pour notre bleu. La couleur suivante est de de de de. Cette couleur est, euh, F 8 F 8 F 8. Cette couleur est 55 D pour 66 Et enfin, à la fin. Cette couleur est E 53 C 85. Maintenant, nous sommes en train de créer ceci pour nos développeurs ainsi que pour nos clients afin qu'ils puissent comprendre en un coup d'œil quelles couleurs en effet V utilisent Donc nous pouvons tout regrouper. Vous pouvez aller couleur par couleur et les faire dans leurs groupes séparés. Mais je ne vais pas faire ça. C' est comme si c'était très bien. Donc on va appeler ça les couleurs. Donc ce que nous pouvons inclure ici, ce sont ces ombres. Donc parce que nous n'en avons qu'une et c'est celle par défaut, nous pouvons dupliquer cette couleur aussi bien que ça, donc il contrôlerait D. Et nous allons juste la positionner jusqu'ici comme ça. Et peut-être que nous pouvons pousser 40 pixels de celui-ci. Donc 1234 par exemple. Et nous pouvons déplacer ce texte. Laissez-moi le sélectionner encore une fois pour que nous puissions le déplacer ici, alignant vers la gauche avec cette ombre. Faites-en faire l'ombre du nom. Très bien, donc et nous allons rendre ce blanc, mais incluez juste le spectacle de fond, et nous allons l'appeler Ombres simplement parce que nous n'en avons qu'une. Et maintenant, nous pouvons inclure des boutons juste ici. Mais je ne vais pas faire ça. Laisse-moi choisir tout en fait. Et je vais positionner pour les pixels comme ça ainsi que comme ça. Pour que nous ayons le même espacement. Je vais appeler cette ombre et ce que nous voulons ici. Je vais inclure ces boutons. Laissez-moi dupliquer ce texte, et je vais le positionner à droite de cette ombre pour que nous ayons un peu d'espace. Donc ça va aller appeler des bouteilles comme ça ? Laissez-moi le positionner à 40 pixels de celui-ci. Donc 1234 et laissez-moi sélectionner nos boutons. Donc, je ne vais pas le sélectionner à partir de cadres métalliques ou d'un design. Je vais le sélectionner parmi les prototypes. Donc je vais sélectionner ces deux tenant, touche de changement de contrôle C. Et je vais sauter dans tout le chemin de retour à notre guide de style hit Control V. Mais il est juste sélectionné les boutons. Laisse-moi le faire encore une fois. Je vais aux orteils. Sélectionnez ceci ainsi que ceci. Alors appuyez sur ma touche Maj Hit Control C. Espérons maintenant qu'il va sélectionner et basé tout ici. Alors appuyez sur le contrôle V Oui, voici nos boutons et vous pouvez simplement cliquer ici pour les mettre tous les deux au milieu. Et ce que je veux faire, c'est déplacer ces boutons pour que je puisse voir lequel est lequel. Donc tu peux t'aligner avec cette ombre juste pour qu'on puisse voir où est cette ombre ? Donc peut-être ici est bon, mais déplacons-le. Il suffit de 40 pixels vers le bas. Quelqu' un a pris 34 Maintenant, il sera aligné avec cette ombre. Faites la même chose pour celui-ci. Donc 1234 Et on peut appeler ce fond cliqué. Et appelez simplement cet état bas ou vide. Ou quoi que vous vouliez les appeler et vous pouvez parler avec les développeurs juste pour que vous puissiez être sûr des noms que vous devez utiliser dans vos noms de couches. Ce sont donc des boutons comme ça et enfin, ce dont nous avons besoin est d'inclure cette illustration. Donc je vais déplacer ce texte un peu pour entendre, puis le positionner pour le pixel. Donc 1234 et nous allons inclure notre illustration comme ça, et laissez-moi localiser cette illustration. Voici le contrôle C a frappé le contrôle V et maintenant nous allons juste le positionner ici, et je vais le déplacer ici. 1234 vers le bas. Et je vais simplement double-cliquer et étendre notre port dans les deux directions afin qu'il puisse répondre à l'exigence de notre illustration. Et c'est fondamentalement tout pour notre guide de style. Vous pouvez frapper le contrôle. C' est à dire à propos de votre projet, mais permettez-moi de les regrouper rapidement. C' est donc notre illustration. Et maintenant, une fois qu'il a fini d'économiser parce que c'est un projet assez important, comme vous l'avez déjà vu. Donc, nous avons les fichiers de préparation que nous avons sur les cadres métalliques. Nous avons conçu des prototypes, donc nous avons tout ce qui est à l'intérieur de ce fichier, et si je le vérifie sur mon bureau, c'est toujours 75 mégaoctets, ce qui est incroyable. Imaginez que si vous faites un projet est le plus grand à l'intérieur de quatre magasins. Il aura sûrement quelques gigaoctets de taille, donc 75 mégaoctets, c'est vraiment de petites tailles de fichiers vraiment gérables. Vous pouvez facilement l'envoyer à votre client, et c'est ce que nous allons couvrir les orteils dans certaines des prochaines vidéos. Mais dans la prochaine vidéo, nous allons couvrir comment vous pouvez partager ce projet avec votre client et comment vous pouvez recevoir des commentaires avant d'exporter nos ressources de conception et de les envoyer aux développeurs. Je te vois dans la prochaine vidéo. 98. Partage avec le client: dans cette vidéo, nous allons expliquer comment vous pouvez partager vos prototypes avec le client, et c'est vraiment extrêmement simple à faire est de zoomer sur le premier écran, qui est celui-ci, si vous vous souvenez de notre prototypage afin que vous puissiez sauter dans le prototype et que vous verrez cette icône d'accueil, qui indique qu'il s'agit du premier écran et que vous pouvez simplement cliquer sur partager. Si vous voulez inviter quelqu'un au document, vous pouvez simplement le faire ici, et il peut ensuite y apporter quelques modifications. Vous pouvez partager pour une vue, et c'est ce que vous allez cliquer pour partager avec votre client. Si vous bénéficiez d'un forfait gratuit avec Adobe X'd, vous ne pouvez partager qu'un seul prototype pour que les clients puissent consulter, et vous ne pouvez avoir qu'un seul prototype à l'intérieur d'une bibliothèque en ligne. Si vous travaillez avec plusieurs clients, vous pouvez attendre et terminer avec l'un d'eux. Vous pouvez supprimer ces prototypes de votre plan, puis vous ne pouvez toujours partager qu'un seul prototype. Mais si vous êtes vraiment sérieux à ce sujet, ou si vous avez déjà acheté Adobe Creative Cloud, alors vous avez un nombre illimité de ces projets que vous pouvez partager afin que je puisse travailler sur plusieurs projets en même temps, puis partager plusieurs projets avec plusieurs clients. Ensuite, nous avons partagé pour le développement, et c'est là que vous allez partager avec vos développeurs et ainsi ils peuvent voir différents espacements entre les éléments, différentes couleurs. Vous avez utilisé différentes formes qui sont à l'intérieur, et ce fichier est extrêmement utile pour eux parce qu'ils peuvent alors savoir quels types de marges et de motifs ils peuvent inclure à l'intérieur de leur manteau. Et quel genre de transitions devraient-elles utiliser ? Parce qu'ils voient toutes ces animations que vous avez créées à l'intérieur d'Adobe X'd maux de tête et planifié dans avancé ce qu'ils peuvent mettre à l'intérieur de la couche afin que tout fonctionne correctement. Enfin, nous avons géré les liens. De cette façon, vous pouvez gérer tous les liens que vous avez déjà partagés avec vos clients précédents . Imaginez que vous avez travaillé avec des clients, vous savez, six mois et que vous voulez supprimer ce projet parce que ce projet est déjà terminé. Ils vous ont payé et tout a bien fonctionné. Mais vous voulez libérer de l'espace à l'intérieur de votre bibliothèque en ligne. que là où vous pouvez simplement cliquer là, il vous mènera à votre compte, puis vous pouvez supprimer les projets précédents sur lesquels vous avez travaillé. Et enfin, nous avons une vidéo record. Ainsi, vous pouvez enregistrer une vidéo sur tous ces prototypes, ou il lancera un prototype. De la même façon qu'un clic ici. Toe prévisualiser mon prototype dans cette fenêtre, et il commencera à l'enregistrer et vous pourrez alors avoir l'option de désactiver l'exportation cette vidéo. Donc tout ce que vous voyez ici sera à l'intérieur de la vidéo. Donc, tout cliquez et bouge, puis vous pouvez partager cette vidéo soit sur des plateformes en ligne telles que Big Chance ou Dribble pour montrer à tout le monde ce que vous avez fait. Et vous pouvez mettre cette vidéo, par exemple, à l'intérieur de quatre. Magasinez à l'intérieur des tasses plus, vous pouvez utiliser statique plus de cultures, ce qui est juste essentiellement des images statiques. Ou vous pouvez utiliser plus de tasses animées, qui sont plus populaires. Une flotte za, et vous pouvez présenter ces plus de tasses d'une manière émouvante. Fondamentalement, pour Windows, vous avez cette option d'enregistrement de jeu de base, sorte qu'il gardera ce texte ici en haut. Ainsi, par exemple, prévisualiser notre projet et a pleuré médicalement ici. Il montrera ce texte dis ici et divulguera l'icône tout le reste. Mais vous pouvez également l'agrandir. Ce sera juste ici au centre, et quoi que vous fassiez, ça se montre juste ici au centre. Et puis vous pouvez le découper à l'intérieur de quatre magasins, par exemple, ou après des effets ou plus riches, plus doux que vous utilisez. Et puis vous pouvez la présenter de cette façon, si c'est quelque chose que vous voulez, si vous partagez avec des déclins, vous pouvez simplement leur envoyer cette vidéo, et c'est tout s'ils veulent voir une vidéo et qu'ils ne veulent pas cliquer pour eux-mêmes. Mais si vous êtes sur un Mac, les choses sont beaucoup plus simples, donc vous pouvez simplement frapper cet enregistrement ou frapper ici, et il enregistrera un prototype sans cette barre en haut. Donc c'est vraiment le cas. La principale différence entre Eggs D sur Windows et Mac est que la fonction d'enregistrement vidéo, car il va enregistrer une vidéo juste à partir de cet écran. Mais sous Windows, nous n'avons toujours pas cette option parce que sur la façon dont Windows est créé dans structuré, nous avons donc toujours cette barre en haut. Mais comme ils l'ont dit, vous pouvez simplement l'agrandir. Importez cette vidéo comme celle-ci à l'intérieur de votre fichier photo shop, et vous pouvez ensuite la découper et vous assurer que cette barre en haut disparaît. Donc c'est fondamentalement tout pour la partie enregistrement. Alors maintenant partageons notre projet avec le client, donc je vais juste cliquer ici. Cliquez sur Partager pour vérifier N'importe qui avec la vue Lincoln ou vous pouvez uniquement inviter les personnes que vous voulez qui peuvent voir ce projet. Donc, si vous avez signé un nd A avec le client, cette option est extrêmement utile. Ainsi, seuls les membres de l'équipe, par exemple, ou certains acteurs importants peuvent voir ce projet. Vous pouvez lui donner un nom ici, donc on a un obturateur pour qu'on puisse l'appeler comme ça. Vous pouvez autoriser les commentaires, et je le recommande. Si vous souhaitez recevoir des commentaires directement sur la sortie d'Adobe du site Web, vous pouvez afficher des conseils sur les points chauds, ce qui est vraiment important car parfois les clients sont bloqués. Ils ne savent pas où cliquer, donc les conseils sur les points chauds sont extrêmement utiles, vous pouvez afficher les contrôles de navigation, qui sont les contrôles en bas, hors de l'écran, et ils tolèrent pouvoir basculer entre les et ils sauront alors où ils sont. Pour le moment, vous pouvez ouvrir en plein écran. Si vous faites cela, afficher les commandes de navigation disparaîtront automatiquement, et enfin, vous pouvez exiger un mot de passe. Si c'est une sorte de projet secret et que vous voulez le garder secret, vous pouvez exiger un mot de passe et n'importe qui avec le passeport peut entrer. Et puis, par exemple, commenter et voir tous ces points chauds et tout le reste. Tout ce que vous avez à faire ici est de créer un lien, et il commencera à se charger. Et en fonction de la taille de votre projet, ainsi que de la rapidité de votre connexion Internet, cela peut prendre de quelques secondes jusqu'à quelques minutes. Donc je te verrai quand il sera à 100% et quand il sera publié. Donc, une fois qu'il est publié, voici comment il ressemble Si vous apportez une modification à ce prototype, vous pouvez cliquer sur mise à jour, et il mettra à jour ce lien, et vous pouvez ensuite envoyer ce nouveau lien à nos clients et que la mise à jour lien. Je veux dire au client, et ils pourront ensuite vérifier les changements. Ou vous pouvez simplement copier la copie de lien dans mauvais froid. Et vous pouvez intégrer cela dans les représentations que quelque chose que vous voulez ou vous pouvez simplement cliquer sur ce lien, et il va ouvrir cela dans le côté de la nouvelle fenêtre. Lorsque vous l'ouvrez pour la première fois, il faudra du temps pour le charger, alors gardez cela à l'esprit. Comme vous pouvez le voir, animation a déjà commencé, et nous voici sur le premier écran, et toutes les animations fonctionnent. Très bien, comme vous pouvez le voir ici. Si je clique sur l'icône du menu, par exemple, vous pouvez voir à quoi cela ressemble. Et si je clique sur cette image, elle l'agrandira. Donc, tout ce que nous avons fait précédemment, il a créé ici. Mais vous allez voir quelques problèmes de temps en temps parce que vous devez marcher à travers ces dans notre cas, 29 écrans différents, que vous pouvez voir ici. Ensuite, vous serez en mesure de voir toutes les animations en douceur une fois que vous aurez parcouru tous ces 29 écrans différents. Donc, si je clique ici, vous pouvez voir que nous avons des animations différentes. Et si à un moment donné je veux sauter à la maison, je peux simplement cliquer ici, et cela me conduira au premier écran. Maintenant, quand il s'agit de commenter, vous pouvez simplement faire glisser cette broche. Vous pouvez le placer, par exemple. Disons ici et nous allons écrire un commentaire,par exemple, par exemple, et vous pouvez cliquer sur soumettre, et il va le soumettre. Et, par exemple, je peux passer à travers tous ces différents écrans. Laissez-moi vérifier rapidement. Peut-être que je suis à l'écran 20 et je veux me rappeler, Où était ce commentaire ? Je peux simplement cliquer dessus, et cela me conduira à cet écran, et il mettra en évidence comme ceci. Vous pouvez placer beaucoup de ces douleurs que vous voulez. Ainsi, par exemple, vous pouvez taper, peut-être changer cette image et elle sera mise à jour en temps réel, et vous pouvez toujours y revenir et savoir où étaient ces commentaires. Donc, comme je l'ai déjà dit, peut-être que vous êtes sur cet écran. Vous pouvez cliquer ici, et cela vous mènera à cet écran. Donc, c'est vraiment facile. Bout vraiment simple. Obtenez des commentaires pour faire des changements orteils mettre à jour vos prototypes ici, puis pour les vérifier une fois de plus avec le client et voir si tout le monde est sur la même page avec le design. Et puis, enfin, vous pouvez livrer à votre client tout ce que vous avez travaillé précédemment à ses développeurs afin qu'ils puissent développer cette conception à la fin. Dans la vidéo suivante, je vais vous montrer comment vous pouvez tout préparer et exporter des ressources pour les développeurs et comment vous pouvez les empaqueter pour faciliter l'envoi aux développeurs ainsi qu'aux clients. Alors je te verrai là-bas. 99. Exporter des actifs: Il est maintenant temps d'exporter nos actifs et de les envoyer aux développeurs ainsi qu'aux clients . Alors, comment peut-on faire ça ? Nous n'allons pas exporter des prototypes, car tous ces éléments sont déjà contenus à l'intérieur de nos écrans de conception. Ils se déplacent et changent d'ici et là. Mais par exemple, nous avons ces tableaux de bord ici. Mais nous allons exporter les produits finis. Et nous avons ces deux boutons, donc nous allons les exporter comme ça. Alors, comment vous pouvez réellement exporter ? Ce que je vous recommande de faire, c'est de créer une sorte de structure. Donc, comme vous pouvez le voir ici, nous avons quatre, 68 10 12 écrans différents à l'intérieur de la section design et différentes variations de ces mêmes écrans ici. Mais par exemple, cette image est exactement la même sur tous ces trois écrans ainsi que sur cette icône. Ils sont en train de changer de taille. Alors pourquoi devrais-je exporter ces trois où je peux exporter seulement celui-ci aussi, je n'exporterai pas cette icône d'ici. Je vais simplement passer au guide de style et exporter tous ces actifs à partir d'ici. Comme avec les bas Comme vous pouvez le voir, guide de style est extrêmement utile pour cela aussi. Donc, comment vous pouvez procéder à l'exportation est que vous pouvez créer une structure de fichier. Donc, voici ma structure de fichiers juste ici. Donc, vous pouvez voir à quoi ça ressemble. Fondamentalement, j'ai dans le dossier pour chacun de ces écrans. Vous pouvez les voir ici à partir du tableau de bord de culture de la galerie et ainsi de suite. Et aussi, j'ai le dossier Icônes, qui est mon dossier pour toutes ces icônes ici du Guide Sal. Parce que si tu te souviens, on a juste copié les écrans. Donc, ce sont des tailles originales telles qu'elles apparaissent sur ces, où sont les écrans ainsi que avec le logo. Donc, comment vous pouvez y arriver, vous pouvez exporter toutes ces icônes ici. Vous pouvez exporter le logo dans huit dossiers distincts ou à l'extérieur de tous ces dossiers que vous pouvez parcourir. Donc, par exemple, je sais que ces boutons publiés proviennent de l'écran de publication, donc vous pouvez trouver ici. Il est une description publiée, et vous pouvez ensuite les exporter là-bas. Donc, par exemple, nous allons exporter des icônes. Tout d'abord, je vais sélectionner toutes ces icônes à partir d'ici. Donc, je vais maintenir ma touche Maj, sélectionner tout, puis appuyer sur le contrôle ou la commande E. Et cela me montrera cette pénalité d'exportation d'actifs. Donc, je vais choisir SPG pour les icônes. Et avant d'exporter quoi que ce soit, je vous conseille de parler aux développeurs et de leur demander de quel type de fichiers ont-ils besoin ? Je le fais toujours quand je crée mon dossier de projet. Et vous pouvez le lire à l'intérieur du mémoire pour que je puisse le savoir à l'avance. De quel type de fichiers ont-ils besoin ? De quelle taille ont-ils besoin ? Nous savons donc qu'ils ont besoin d'iPhone 10 tailles pour commencer et commencer avec ce projet. C' est la taille d'Onley qui allait exporter les orteils pour l'IRS. S' aggrave pour l'instant. S' ils veulent que quelque chose soit fait plus tard, nous corrigerons alors ces tailles pour les plus gros appareils, puis exporterons à nouveau les ressources. Ou s'ils ont déjà des acides SPG, qui sont infiniment évolutifs parce qu'ils sont au format de fichier rector et X T est un outil d'électeur afin qu'ils puissent utiliser ces fichiers SVG comme ils ont été exportés au début. Mais par exemple, pour les images P et G pour J Peg, nous devrons les exporter une fois de plus. Donc, une fois que vous avez sélectionné dans le format, vous pouvez avoir dans différents styles. Mais vous pouvez avoir CSS interne s'ils veulent copier CSS à partir de ces icônes. Mais je vous recommande de toujours laisser ces paramètres tels qu'ils sont, sauf si les développeurs ont demandé dans différents paramètres d'exportation afin que vous puissiez les intégrer ou tant que liens optimisés, unifiés. C' est donc une option extrêmement importante et excellente à avoir, surtout lorsque vous concevez des sites Web, car si vous cliquez sur, optimisez, cela optimisera encore davantage ces icônes SVG. Donc, ils vont charger encore plus rapidement et ouvrir le site même encourager, ce qui est extrêmement important, évidemment pour S PDG et pour l'optimisation des moteurs de recherche en général. Mais gardons les choses simples pour cette vidéo et gardons tout tel qu'il est. Et enfin, vous pouvez exporter vers, et vous pouvez créer des changements et nous pouvons localiser nos icônes. Ici, il est, et je peux sélectionner ce dossier et je peux simplement cliquer sur exporter, et il exportera tous ces différents actifs sous forme d'icônes séparées. Donc, si j'ouvre ce dossier ici, donc voici, les icônes, vous pouvez voir qu'il a exporté chaque icône séparément ici dans ce dossier d' icônes. Donc, je me contente plus sur une exportation tous ces différents actifs à partir de ces différents écrans. Donc, je ne vais pas perdre votre temps et exporter chaque actif individuel. Ce que je peux vous recommander, c'est que vous exportiez cette illustration telle qu'elle est. Mais encore une fois, si vous vous souvenez, nous avons juste coopéré à partir d'ici et simplement coller ici dans le guide de style. Donc, pour cet écran particulier sur New Image, vous pouvez simplement exporter cette illustration à partir d'ici. Ou si vous le souhaitez, vous pouvez simplement sauter et l'exporter à partir d'ici parce que nous exportons déjà cela. Ces icônes, vous pouvez simplement exporter ces espaces réservés et c'est essentiellement la fin. Fais-le. Exportons donc ces images. Donc, ce que je peux faire parce que c'est un crit répété je peux un groupe description et ce que je reçois ici est la carte. Mais comme vous pouvez le voir, il a essentiellement bougé. Jeter dehors, hors et notre port. Vous pouvez donc vous rappeler que nous avons eu un problème similaire avec l'une des vidéos précédentes. Donc, ce que je peux faire est de regrouper toutes ces cartes afin qu'elles soient contenues dans notre port et je peux simplement l'appeler comme ça. Et je peux positionner la carte de départ, qui est celle-ci. Je pourrais le déplacer jusqu'au bas. Désolé, c'est en fait là, je crois. Vérifions rapidement lequel est lequel. C' est la voiture numéro un. Alors positionnons-le juste au-dessus C'est la carte numéro deux. Oui, c'est le cas. Donc je vais simplement le nommer Voiture numéro deux. Et voici la carte numéro trois. Donc je vais déplacer ce chariot jusqu'au bout. Alors déplacez-le ici et faites-le 20 pixels. Comme, et ces espacements. Donc je peux ouvrir toutes ces cartes et vous pouvez voir qu'on a exactement les mêmes noms ici . Donc, ce que vous pouvez faire est de sauter à l'intérieur et d'appeler cet art ou un. C' est un amère aussi. Et enfin, ceci à la fin, est sorti. Nos trois et vous pouvez faire la même chose avec des images. Donc, c'est l'image un. Ceci est l'image à et enfin ceci ici est l'image trois. Maintenant, parce que vous avez exporté ces icônes, ils peuvent utiliser les icônes telles qu'elles étaient ici. afin qu'ils puissent sauter dans le dossier Icônes et les prendre à partir d'ici parce qu'ils sont exactement de la même taille et si vous le partagez avec eux pour le développement. Donc, si je clique ici, vous devez télécharger ces actifs pour le téléchargement et vous pouvez simplement créer un lien. Et il va créer ce projet pour les développeurs et à l'intérieur de là. Et ils peuvent voir la différence de literie et de marges et ainsi de suite. Et ils peuvent voir différents espacements que vous avez utilisés et tout le reste. Et ils peuvent ensuite démarrer et créer cette application. Ils ont également Adobe X'd. Ils peuvent l'ouvrir et voir par eux-mêmes ces différences de base que vous utilisez dans différents endroits différents. Mais pour que nous puissions exporter n'importe quoi, nous pouvons sélectionner ces images et vous pouvez garder le contrôle pendant que vous la sélectionnez, ou Commander Mac et vous pouvez sélectionner toutes ces images différentes. Puis appuyez sur le contrôle Commande E. Et au lieu de la fête, vous pouvez choisir PNG. Dans ce cas, vous pouvez choisir la conception ou vous pouvez choisir IOS et il sera sélectionné. Il exportera les actifs sélectionnés à un x deux x et trois x et je vous recommande vraiment de le faire , il est conçu à un X, donc il est conçu à la taille d'origine et il augmentera au cas où ils en auraient besoin pour des appareils plus grands plus tard afin qu'ils puissent l'utiliser comme ça. Et enfin, nous pouvons frapper changement parce que nous voulons que cela soit exporté vers un autre dossier afin que vous puissiez cliquer ici et localiser la maison. Donc, c'est là. Je vais sélectionner ce Faller Aaron, un hit export. Il exportera toutes mes images en PNG. Et si je trouve la maison ici, vous pouvez voir à quoi tout ressemble. Donc on a une eau 11 qui fait deux X et un un un trois x et ça a fait exactement la même chose pour le reste de nos images. Donc la prochaine chose que vous pouvez exporter ne sont jamais barre dans l'onglet sont. Alors laissez-moi rapidement fermer tout de sorte que vous pouvez cliquer ici à la nab notre et à l'onglet sont. C' est pourquoi nous donnions à ces noms les noms comme celui-ci afin que vous puissiez sélectionner à la fois Jamais bar et Tear bar hit control ou commande e select comme PNG et hit export parce que nous voulons qu'ils soient en mesure de superposer. Celles-ci comme PNG en plus de ces différents éléments. Et enfin, ce que vous pouvez exporter ici est la barre d'état. Mais la barre d'état vient généralement par défaut à l'intérieur d'un moins, donc je ne vois vraiment pas le point d'exporter la barre d'état. C' est là juste pour l'espacement. Donc tout le monde est sur la même page que les orteils là où les éléments arrivent. La même chose est avec cet indicateur d'accueil, c'est l'option par défaut à l'intérieur d'Iris. Donc, il n'y a vraiment aucun intérêt à l'exporter parce que cela viendra quand les développeurs ont voulu entrer. C' est ici juste pour la référence. Alors ils savent quel type d'espacement doivent-ils utiliser ? Parce qu'une fois de plus, cet indicateur d'accueil ainsi que la barre d'état proviennent de l'IOS par défaut. Vous l'aimez fait par Apple, déjà parlé dans l'une des vidéos précédentes. Donc, vous savez, vous allez y aller parce que vous avez utilisé exactement le même espacement qu'Apple eux-mêmes. Donc vous savez que vous êtes sur le bon départ. Vous n'exportez pas de texte car ils vont inclure du texte à l'intérieur de la couche, donc ils vont voir à l'intérieur juste ici. Si vous partagez pour le développement. Ils vont voir des espacements différents une fois de plus. Donc, entre, par exemple, ceci après l'image et cette image. Et entre cette image et ces icônes et ainsi de suite, ils vont voir quelle taille vous utilisez pour le texte. Combien de paragraphes ont et ainsi de suite et ainsi de suite pour qu'ils sachent tout. Donc, vous exportez simplement des images et ces différents espaces réservés. Donc, pour moi de ne pas aller à l'intérieur de chaque écran, laisser courir rapidement à travers et vous le dire, une fois de plus, vous allez exporter ces deux images et vous allez exporter le coup de couteau sont en bas juste ici. Donc je parle de notre projet. Évidemment, vous allez exporter cette illustration ou si vous l'avez déjà fait à partir du guide de style, vous pouvez simplement ignorer cette étape. Mais vous pouvez l'exporter à partir d'ici. Vous allez exporter ces espaces réservés afin galerie BG ainsi que la caméra BG, car il y a différents éléments et leur cliquable. Dans ce cas, vous avez déjà exporté l'icône, sorte que vous n'avez pas à vous inquiéter à ce sujet dans cet écran. Vous allez exporter toutes ces images différentes. Si c'est quelque chose que vous voulez parce que vous voulez l'exporter et ces dimensions. Vous pouvez également les inclure dans un dossier séparé afin que les clients puissent avoir une taille d'origine. Par exemple, cette image citait 5000 par 3000 quelque chose comme ça. Mais à mon avis, vous devriez exporter toutes ces images directement à partir d'ici parce que de cette façon les développeurs sauront quelles tailles ils doivent utiliser à partir d'ici. Ensuite, nous avons ajouté l'image et je ne vais pas exporter cette image dans ces différents états. Comme vous pouvez le voir ici, je vais seulement exporter cette image originale. Maintenant, pour les curseurs, vous allez juste exporter ces trois éléments. Donc, cercle, curseur couleur et curseur Bijie, vous allez les exporter comme PNG séparés l'ont fait de cette façon. Les développeurs vont simplement copier ce curseur afin que vous n'ayez pas à les exporter plusieurs fois. Vous pouvez simplement exporter vers celui-ci, puis ils peuvent simplement les copier car ils peuvent obtenir ce partage pour le lien de développement et ils peuvent voir les différents espacements et ainsi de suite. Ici, vous pouvez exporter cette zone de recadrage d'image, mais une fois de plus, ils peuvent inclure la fonction de recadrage IOS d'origine. Ainsi, par exemple, ils peuvent inclure ces icônes personnalisées. Mais la fonction de recadrage d'origine du système IRA lui-même, donc il n'y a pas de confusion là. Enfin, pour la description et la publication, vous pouvez évidemment exporter cette image, cette image, et vous pouvez exporter cette zone de texte. Ces lignes et pour le bas montrent déjà que les boutons sont à l'intérieur du guide de style, sorte que vous pouvez les exporter de cette façon. Maintenant, pour les cartes d'eux-mêmes, ils peuvent utiliser les graphiques par défaut et que l'IOS offre et ils savent avec les requins qu'ils devraient utiliser pour imiter ceux-ci. Mais juste au cas où vous pouvez exporter ces graphiques en tant que légumes ou PNG, juste pour leur référence, juste pour leur référence, vous n'exportez pas de texte, et une fois de plus vous allez exporter vos pieds. Ces BG de sorte que le type de BG aime BG et enfin, les meilleurs moments pour poster VG parce que ce sont vos espaces réservés. Vous allez aussi exporter ces lignes, et c'est essentiellement tout pour cet écran. Pour les goûts. Vous allez exporter des images une fois de plus la barre supérieure et la barre jamais pour le profil. Encore une fois la même chose. Donc ces deux, ainsi que toutes les images que vous voyez et Enfin, pour le menu latéral, vous pouvez exporter cette icône, mais une fois de plus il est situé dans le guide de style afin qu'il puisse exporter de Il y avait comme nous déjà fait, et enfin, vous pouvez exporter cette image telle qu'elle est mais exportée en PNG. Donc, chaque fois qu'ils ont inclus à l'intérieur du menu, ce sera PNG transparent. Donc, il va obtenir tous ces beaux effets qui vous ont déjà montré à l'intérieur de nos vidéos. Et c'est fondamentalement que c'est pour l'exportation. Et enfin, quand vient le temps de le partager avec votre client, tout ce qu'ils ont à faire, c'est que vous pouvez simplement sélectionner tous ces éléments. Et sur Windows, je peux cliquer avec le bouton droit de la souris sur WinZip et ajouter à l'obturateur app zip. Et une fois cela fait, il va créer un fichier zip simple et facilement partageable. Donc, dans mon cas est, vous pouvez voir qu'il est sur Lee six mégaoctets en taille, et vous pouvez enregistrer ce notre fichier de projet et l'envoyer séparément si vous voulez. Mais dans notre cas, comme vous l'avez vu, notre fichier ZIP n'est que de six mégaoctets, donc nous pouvons l'envoyer à notre client, et ils peuvent facilement être partagés si vous pouvez les partager ont été déposés par e-mail, par exemple, vous pouvez les partager via WhatsApp Viber. Quel que soit le mode d'utilisation de vos clients, vous pouvez les envoyer via Dropbox et ainsi de suite. Et ils peuvent facilement ouvrir ce fichier zip à la fois sur Windows ainsi que sur Mac, et avoir cette structure de dossier juste ici à l'intérieur. Vous pouvez également le partager comme ça avec leurs développeurs, et ils vont être en mesure d'ouvrir tous ces fichiers et de les utiliser comme ils leur orteil prévu. 100. Conclu: félicitations. Vous avez atteint la fin du cours. J' espère vraiment que vous l'avez trouvé utile. Tout pour trouver certaines de ces techniques utiles et nouvelles et informatives, et que vous allez les appliquer dans un travail futur. J' espère vraiment que vous allez mettre ces connaissances à l'épreuve et que vous allez vraiment orteil appliquer au moins une partie de ce que vous avez appris dans ce cours dans le travail futur et que toutes ces informations ont amélioré votre travail au moins à certains degré. Et maintenant, résumons rapidement ce que nous avons appris et ce que nous avons fait à l'intérieur de ce cours. Donc, première source de chose. Nous avons parcouru ces huit catégories différentes. Nous sommes donc passés des images à travers des graphiques, des boutons, des effets et ainsi de suite jusqu'aux autres. Et nous avons réalisé divers effets différents. Et nous avons appris à animer tout, des icônes à la forme au texte et ainsi de suite. Et une fois que nous avons terminé la dette, nous avons créé notre projet. Nous avons commencé à partir du dossier de conception. Nous avons inclus la planification du projet. Nous avons inclus quelques cadres métalliques que nous dessinons sur papier puis nous avons créé notre guide de style créé nos cadres métalliques et planifié l'ensemble du projet. Ensuite, une fois que nous avons terminé les cadres de fil, nous avons traversé la conception. Nous avons inclus différentes variantes de ces cadres métalliques. Nous incluons les différentes images, créé des ombres portées différentes, et nous avons créé les écrans de tableau de bord et quelqu'un. Et puis une fois que nous avons terminé notre conception, nous avons ensuite passé aux prototypes, créé plusieurs états sur tous ces différents écrans. Et enfin, une fois que nous avons créé le prototype, nous l'avons partagé avec décliné avec les développeurs. Et je vous ai montré comment vous pouvez emballer tout ça, Toby facilement digestible tant pour vos clients que pour leurs développeurs. Donc c'est fondamentalement tout pour le discours. Merci. Encore une fois, Tellement pour le prendre. Et encore une fois, j'espère vraiment que vous avez pris quelques connaissances dans quelques conseils précieux de lui et que vous allez orteils, les appliquer dans votre futur travail dans la dernière vidéo de ce cours Je vais partager avec vous quelques liens. Et la ressource est que j'ai mentionné dans le discours où vous pouvez trouver des fonds où vous pouvez trouver des images toujours en utilisant où vous confiné. Joli, bonnes icônes gratuites où vous pouvez trouver ces illustrations que nous utilisons et quelqu'un jusqu'à ce que je vous y vois. 101. Liens et ressources: Enfin, je veux partager des liens et la ressource est avec vous. Donc, vous allez obtenir ces liens et la ressource est pdf, vous pouvez l'ouvrir et simplement cliquer sur ces liens veut cliquer sur eux. Il vous invitera avec ce message. Vous pouvez cliquer sur Autoriser afin que vous puissiez être capable orteil obtenir ce lien immédiatement. Donc, ici, nous avons ouvert Sense Fund, qui est libre de polices Google, et nous utilisions que dans tout notre travail, vous pouvez télécharger des images gratuites à partir de Splash et que la photo stock Donc, vous pouvez essentiellement cliquer sur ces bleu mots et il vous emmènera à ces liens. Et enfin, vous pouvez télécharger gratuitement des icônes de la conception matérielle de Google et ils sont libres d'utiliser à la fois pour un usage personnel et commercial. Enfin, vous pouvez toujours me contacter si vous avez des questions. Pourquoi ces plateformes sont-elles donc soit partager des compétences, soit vous à moi où que vous suiviez mon cours ou mes autres cours ? Et je répondrai toujours volontiers. Merci encore une fois d'avoir suivi ce cours, et j'espère vraiment que vous y avez trouvé tant de valeur. Et j'espère vraiment que vous allez l'appliquer à un avenir. Vous je conçois le travail jusqu'à la prochaine fois, être créatif et prendre soin 102. Composants de mise à jour Adobe Xd: Hé, le designer Alex est là. Et je voulais juste vous donner une mise à jour rapide sur l'ensemble d'Adobe X'd. Ah, alors que de retour adobe oeufs, l'équipe a lancé une mise à jour pour les composants, et maintenant vous pouvez créer un composant sur vos boutons, images, images, formulaires et ainsi de suite, puis vous pouvez interagir entre ces composants. Donc, je voulais juste créer une mise à jour pour la mort parce que je voulais attendre et voir ce qu'ils incluront à l'intérieur de ces composants. Parce que, comme vous le savez, adobe eggs, l'équipe lance des mises à jour tous les mois. Donc, fondamentalement, je voulais juste vous donner un aperçu rapide et comment vous pouvez utiliser ces composants si vous voulez utiliser des techniques que je vous ai enseignées dans ce cours. Donc, la première chose que je veux mentionner est que vous n'avez pas à les utiliser, mais il est bénéfique pour vous de les utiliser parce que vous allez créer votre travail plus rapidement et vous terminerez votre travail plus rapidement qu'avant parce que cette mise à jour est vraiment importante. Pour commencer, je vais vous montrer ce que je veux dire. Alors créons un rectangle. C' est utiliser quelque chose comme trop tôt avec le colonel 70 par exemple, positionnons-le au centre. Donnons-lui un rayon d'angle de 50 par exemple, juste pour créer une belle bouteille simple. Utilisons la couleur Donc trois e C six staff F sans bordure. Et incluons, par exemple, charge plus de texte. intérieurs avec moi comprennent le sens ouvert comme si 20 Est. Très bien. Faites-le aligné au centre et opposition au centre comme ça, Et je vais aussi m'assurer que c'est blanc. Sélectionnez les deux et cliquez simplement ici. Appuyez sur le contrôle G pour les regrouper. Et comme toujours, je vais le nommer Bt fin et je vais sauter à l'intérieur et appeler ça Bt et B G. Maintenant que pouvez-vous faire avec ce bouton ? C' est assez simple. Nous avons toujours eu la création de composant à l'intérieur d'adobe est D, sorte que vous pouvez simplement appuyer sur le contrôle ou la commande K, et vous allez créer un composant. Et si je saute ici, vous pouvez voir que nous avons des composants et que nous avons BT dans, qui est ce composant que je viens de créer. Ce diamant rempli signifie que son composant maître, qui signifie essentiellement qu'il est le premier composant que vous avez créé à partir de cette instance, et vous pouvez créer autant d'instances que vous voulez utiliser dans vos tableaux et dans votre tout ce que vous avez à faire est simplement glisser-déposer à partir d'ici. Et vous pouvez voir si je clique sur celui-ci que ce diamant est rempli et celui-ci est creux à l'intérieur. Si vous reprenez beaucoup plus près, vous pouvez voir ce que je veux dire. Donc, c'est creux et ceci est rempli, qui indique fondamentalement que c'est le composant maître. Et c'est l'instance de ce composant maître Ce que cela signifie encore une fois. Dans la pratique, par exemple, je clique ici et en tapant, par exemple. Je ne sais pas les recherches. Vous pouvez voir qu'il se met à jour, mais vous pouvez sauter ici dans le 2ème 1 et j'ai été soufflé plus. Et vous pouvez le voir parce que c'est l'instance de ce composant monstre. Encore une fois, vous pouvez voir qu'il est mis à jour, ce qui signifie qu'il l'a fait. Il a un changement par rapport au composant principal parce que maintenant vous pouvez voir que ce diamant ne tient plus. Mais il a ce point au milieu. Ce que cela signifie est fondamentalement oeufs les recherches pour vos changements et il peut voir que la couleur ce composant monstre est bleu et désactivé. Cette instance est également bleue. Ainsi, par exemple, si je veux changer cette couleur à une autre couleur, des instances de mise à jour haineuses tout au long. Mais si je tape ici et que je clique, en savoir plus, vous verrez qu'il ne met pas à jour à ce composant en dessous de cette instance parce que nous avons changé cette instance séparément de ce composant monstre. Donc, en gros, quoi que vous créez, il va à un spectacle ci-dessous. Si vous souhaitez afficher ou si vous pouvez remplacer ces fonctionnalités en utilisant simplement ces instances et en mettant simplement à jour ce que vous n'avez pas changé dans votre composant maître, par exemple, nous pouvons changer le rayon d'angle. Donc, nous allons utiliser 20 et vous pouvez voir que va mise à jour des orteils. Dans les deux cas en temps réel, vous pouvez également choisir la bordure parce que nous n'avons pas changé la bordure diminuée et jouer avec elle. Vous pouvez jouer avec ces paramètres, par exemple. Vous pouvez inclure ce que vous voulez ici. Vous pouvez l'étendre ainsi conférences pour 100 par exemple. Vous pouvez voir comment il s'étend dans l'esprit et toutes ces choses que vous pouvez améliorer. Vous pouvez inclure si vous le souhaitez, et il va être mis à jour en temps réel. Dans vos instances. Mais n'oubliez pas que lorsque vous créez une instance à partir de vos composants maîtres, elle va être mise à jour comme vous le souhaitez. Donc, une fois de plus, si vous voulez orteil tout droit, cette instance et juste garder la couleur bleue dans cet exemple. Je peux cliquer ici, et je peux taper 20. Et vous pouvez voir maintenant l'instance est mise à jour alors que le composant maître est toujours comme ça, toujours dans sa forme originale. Et si je clique ici et que je change ça à 20 par exemple, ou même moins, Lieutenant, disons, comme vous pouvez le voir, cela ne va pas mettre à jour l'instance. Il va juste mettre à jour le composant maître. Dans la prochaine vidéo, je vais vous montrer ce que tout cela signifie et nous allons jouer avec les états, et je vais vous montrer comment les états vont évoluer votre processus de prototypage. Quelles sont les forces et quelles sont les limites ? Parce que cela a certaines limites, et vous devrez toujours utiliser plusieurs ports pour certaines animations. Pas pour tous, mais pour quelques animations. Donc je te vois dans la prochaine vidéo où nous allons explorer ce 103. États de composant de mise à jour d'Adobe Xd: donc, comme il l'a dit dans la vidéo précédente, cela a quelques limites, et je vais vous montrer lesquelles. Mais avant de le faire, permettez-moi d'expliquer rapidement ce que c'est. Ainsi, comme vous pouvez le constater dans la vidéo précédente, nous avons créé un composant qui a toujours été à l'intérieur d'Adobe X'd. On l'appelait simplement simple avant. Maintenant, ça s'appelle les composants. Mais ce qui est différent, c'est ça. Donc, vous avez juste ici sur votre composant droit, maître, et ici vous avez l'état par défaut de sorte que vous pouvez cliquer ici, toe, ajouter un état, et quand vous le faites, vous pouvez. Vous allez être présenté avec un nouvel état ou survol. Comme vous pouvez le voir, il a cette icône Tonder, donc un nouvel état vous pouvez l'appeler comme vous le souhaitez. Alors appelons-le cliqué, par exemple, et vous pouvez l'ajouter maintenant. Cet état cliqué comme vous voulez, donc je vais sauter ici à mon BT et BG, et je vais changer la couleur. Par exemple, il est utilisé une couleur foncée juste, par exemple, quelque chose comme ceci, et vous pouvez maintenant changer entre vos styles et vous pouvez voir par défaut. État est ce beau bleu en cliqué est cette couleur gris foncé. Alors, comment pouvez-vous utiliser ces états ? C' est vraiment simple. Vous avez juste besoin d'aller à un douve prototype et simplement cliquer ici, et il va pointer d'orteil vers le même port que vous pouvez voir et vous allez choisir trigger. Par exemple, touchez Transition. Utilisons également la destination animée, et vous devez choisir un état car maintenant vous avez des états, et vous pouvez ajouter autant de ces états que vous le souhaitez. Par exemple, vider le survol, cliqué, erreur, succès et ainsi de suite afin que vous puissiez ajouter autant de ces états que vous le souhaitez. Alors utilisons simplement les Juifs. État cliqué parce que ce sont les états que nous avons assouplissement donc fondamentalement même qu'avant . Allons avec la durée facile maintenant 0.3, et c'est fondamentalement tout. Donc maintenant, lorsque je clique ici et que je clique ici, vous pouvez voir qu'il change à cet état de clic. Donc, si nous faisons cela encore une fois, vous pouvez voir quand un clic il change rapidement à cet état parce que la seule chose qui change vraiment est la couleur dans ce cas Maintenant, comment tout cela se traduit par nos animations. Je vais te montrer dans la prochaine vidéo quand je serai aux pieds. Expliquez certains points forts et limites, car cela, comme un ensemble dans la vidéo précédente, a certaines limites. Et la clé est juste là. Donc, quand vous choisissez des interactions, vous pouvez voir que nous n'avons pas le temps. Donc, fondamentalement, je vais expliquer dans la prochaine vidéo, vous pouvez faire beaucoup de choses avec cela, mais il y a encore quelques limites, donc je vais vous voir là-bas. 104. Animation de composants de mise à jour Adobe Xd: La principale limitation avec ces composants est essentiellement le temps. Donc, si je saute ici, orteil notre fichier de boutons et vous pouvez également télécharger ce fichier, il est déjà fourni. Vous pouvez le voir partout où nous avons le temps afin que vous puissiez voir le déclenchement temporel. Nous pouvons l'utiliser avec des composants si c'est comme ça, donc nous pouvons avoir une interaction multiple entre les composants quand nous avons le temps, mais nous ne pouvons pas l'utiliser quand c'est le 1er 1 je ne sais pas pourquoi. Donc, par exemple, si vous voulez que l'animation de chargement que je vous montre, qui commence par le déclencheur temporel, vous ne pouvez pas l'utiliser car vous ne pouvez pas utiliser le 1er 1 pour être le temps. Parfois, il ne vous donnera pas non plus la possibilité d'utiliser le déclencheur temporel pour ces secondes et tourner celles et ainsi de suite. Mais d'habitude, tu le feras. Mais explorons la dette, donc je vais utiliser ceci comme un exemple, et je vais revenir à la conception donc je vais copier celui-ci. Alors appuyez sur le contrôle ou la commande profondément, je vais sauter à l'intérieur, et vous pouvez voir à la place avoir les dossiers comme South et avoir à nos ports. Pour cette animation, nous allons rapidement utiliser la commande de contrôle K pour créer un composant. Et appelons-le vers le bas, par exemple, Donc et comme vous pouvez le voir, nous sommes maintenant sur l'état par défaut. Mais choisissons de nouveaux états et appelons-le fermé. Et pour ce nouvel état, ouvrons simplement le masque, choisissez-le et maintenez simplement votre touche Maj pour le fermer. Et c'est fondamentalement tout ce que vous devez faire une fois que vous avez votre design. Il est donc important que vous ayez votre design d'abord pour que celui-ci soit sélectionné. Donc, comme vous pouvez le voir, j'ai cette animation ou ici aussi bien étendu. Mais je ne vais pas le faire pour l'amour du temps. Je veux juste te montrer ce que tu peux en faire. Donc, lorsque vous voulez prototyper ceci, tout ce que vous avez à faire est de cliquer sur un saut d'état par défaut vers le prototype, cliquez où vous voulez. Dans ce cas, je vais cliquer ici. Il suffit de cliquer ici pour l'étendre. Tu marches, et c'est ce que je te disais. Comme vous pouvez le voir, nous n'avons pas le déclencheur temporel. Donc, si le déclencheur temporel est le 1er 1, vous ne pouvez pas l'utiliser. Alors, utilisons le robinet et fermons le jus. Facile maintenant 0.3. C' est très bien. Maintenant ce que vous devez faire fermer ceci. Il est simplement la tête sur le plus proche, et puis vous devez cliquer ici et étape de jus. Vous pouvez voir qu'on n'a toujours pas le temps ici. Facile maintenant 0.3 et choisissez notre port hors état par défaut Et maintenant, une fois un coup juste ici pour entrer dans le mode prototype. Cliquez ici. Vous pouvez voir qu'il s'étend. Cliquez ici. Vous pouvez voir qu'il se ferme, mais comme vous pouvez le voir à la place sur nos ports, nous n'en avons qu'un. Et comme ils l'ont dit, vous pouvez avoir autant de ces états que vous voulez, donc vous pouvez avoir 50 états 60. Cela n'a pas d'importance, cependant, est un autre état, donc vous pouvez ajouter un état de port aussi. Vous devez choisir l'état par défaut, par exemple, ou fermé. Choisissons l'état de pli et ah, survolez. Allons-y. Il, cependant, affirment. Et maintenant ce que vous devez faire, c'est simplement changer Woods. Allez avec le rectangle de la mosquée. Ajoutons une ombre portée qui est étendue à 55, donc 20 par exemple, , et élargissons notre mosquée encore plus afin que nous puissions voir à quoi ressemblent ces ombres portées. Et si je clique ici, vous pouvez voir que nous sommes dans un état portuaire. Mais nous voici, état par défaut. Donc, quand je clique sur l'aperçu est, vous pouvez voir comment cela fonctionne. Mais quand vous essayez de le fermer et de faire l'animation, cela ne fonctionne pas. Mais laissez-moi passer à l'état par défaut. Cliquez une fois de plus, vous pouvez voir que nous avons le pouvoir, mais nous ne pouvons pas le fermer. Pourquoi nous ne pouvons pas le fermer parce qu'il y a une différence entre l'état du port et l'état par défaut parce qu'à l'intérieur de l'état d'horreur, nous avons étendu la mosquée et les oeufs d'adobe ne peuvent pas fonctionner la fonction d'animation automatique parce que la mosquée est prolongé. Mais tu as une idée. Lorsque vous commencez à concevoir, commencez à inclure ces éléments pendant que vous concevez, puis créez des composants une fois vos conceptions terminées. Donc, d'abord, créez tout, puis créez un composant, puis à différents états de vos composants . Donc tu ne l'es pas. Vous ne finissez pas avec une situation comme celle-ci, donc fondamentalement vous ne pouvez pas avoir des éléments différents entre vos différents États. Tous vos éléments doivent rester les mêmes si vous voulez utiliser l'ennemi auto, donc c'est fondamentalement tout pour ces composants. Comme vous pouvez le voir, ils peuvent vous faire gagner beaucoup de temps. Donc, en gros, quand vous avez nos conseils comme ceux-ci, ils ne fonctionneront pas parce qu'ils sont le moment. Et quand vous avez nos ports comme ceux-ci avec des états de base, ils fonctionneront. Une autre chose est que lorsque vous changez de lieu, par exemple d'ici à ici, ils créent parfois des problèmes, surtout dans des cas comme ceux-ci lorsque vous changez de couleur. Donc, du bleu au rouge, cela va créer une sorte de problème quand il changera de position d'ici à ici. Alors gardez ça à l'esprit, s'il vous plaît. Ce système n'est vraiment pas parfait, et je vous recommanderai toujours de le tester avant de vous y engager. Donc, fondamentalement, voyez si ça fonctionne comme ça. Si c'est le cas, alors fantastique. Et cela ressemblera toujours à ceci avec quelques animations de base. Ainsi, par exemple, dans des cas comme ceux-ci, il va d'un orteil latéral de l'autre et change simplement de couleur et change la forme de cette icône de sorte qu'il fonctionnera toujours dans ces cas. Mais dans les cas compliqués, il est peut-être toujours préférable d'utiliser plusieurs de nos ports, surtout si vous avez le pied pour beaucoup de ces étapes, comme 1/2 dans certaines d'entre elles. Par exemple, dans celui-ci où nous avons ce processus Donald et ainsi de suite dans des cas comme ceux-ci, il fonctionnera toujours bien afin que vous puissiez l'utiliser pour économiser de l'espace et du temps à l'intérieur d'Adobe X'd. Et d'ailleurs, tout ce que j'ai dit que je vais toujours recommander est que vous utilisez des composants parce que les composants sont un orteil de façon fantastique. Augmentez votre vitesse et améliorez votre flux de travail, car avec les composants, vous pouvez faire beaucoup de choses. Comme vous l'avez vu dans les vidéos précédentes, vous pouvez changer les couleurs séparément. Vous pouvez inclure différents fonds. Vous pouvez inclure un rayon d'angle différent, ombres portées et donc un pour différents états de composants, par exemple, afin que vous puissiez vraiment jouer avec elle. Quant à la partie animation de celui-ci, assurez-vous simplement de tester si cela ne fonctionne pas avec un seul tableau d'art, et avec tout combiné dans ce seul notre port, alors vous pouvez toujours revenir à ce principe et simplement copier et coller votre nos ports et simplement aller entre ces ports sont des ports parce que, comme vous l'avez vu, vous avez beaucoup plus d'options, surtout avec le déclencheur temporel et avec le déclencheur vocal lorsque vous avez plusieurs ports que juste avec un unique notre port.