Cours gratuit pour vous aidez à créer des bannières animées avec Adobe XD

1. Application1 : Création d’une Carrousel Simple
1. Ouvrir Adobe XD
2. Ensuite choisir Web 1920
3. Puis dans la partie à gauche « Grille », cocher la case de « Disposition »
4. Ensuite dessiner un grand rectangle sur la grille (Fond =Noir et pas de bordure) comme suit :

2. 5. Utiliser l’outil Plume puis dessiner au centre et droite la forme suivante
6. Ensuite dupliquer cette forme et mettez-la à gauche comme suit :

3. 7. Ensuite ouvrir le dossier des images puis glisser la première image sur le rectangle :
8. Nommer cette fenêtre par « Image1 »
9. Dupliquer « Image1 » et renommer la copie par « Image2 » (Utiliser la touche « Alt » et
cliquer sur Image1 puis déplacez-vous à droite pour avoir votre copie)
Nommer cette copie par « Image2 »

4. 10. Ensuite ouvrir le dossier des images puis glisser la deuxième image sur le rectangle dans la
fenêtre « Image2 »:
11. Dupliquer « Image2 » et renommer la copie par « Image3 » (Utiliser la touche « Alt » et
cliquer sur Image2 puis déplacez-vous à droite pour avoir votre copie)
Nommer cette copie par « Image3 »
12. Ensuite ouvrir le dossier des images puis glisser la troisième image sur le rectangle dans la
fenêtre « Image3 »:
13. Dupliquer « Image3 » et renommer la copie par « Image4 » (Utiliser la touche « Alt » et
cliquer sur Image3 puis déplacez-vous à droite pour avoir votre copie)
Nommer cette copie par « Image4 »

5. 14. Ensuite ouvrir le dossier des images puis glisser la quatrième image sur le rectangle dans la
fenêtre « Image4 »:
15. En fin, cliquer sur l’onglet en haut « Prototype »
-Cliquer sur « Image1 » Puis sur le symbole « > » ensuite glisser la flèche bleue vers
« Image2 » puis changer dans la fenêtre A droite :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s

6. -Cliquer sur « Image2 » Puis sur le symbole « > » ensuite glisser la flèche bleue vers
« Image3 » puis changer dans la fenêtre A droite :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s
Puis sur le symbole « < » ensuite glisser la flèche bleue vers « Image1 » puis changer dans la
fenêtre A gauche :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s
-Cliquer sur « Image3 » Puis sur le symbole « > » ensuite glisser la flèche bleue vers
« Image4 » puis changer dans la fenêtre A droite :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s
Puis sur le symbole « < » ensuite glisser la flèche bleue vers « Image2 » puis changer dans la
fenêtre A gauche :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s

7. -Cliquer sur « Image4 » Puis sur le symbole « < » ensuite glisser la flèche bleue vers
« Image 3 » puis changer dans la fenêtre A gauche :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s
16. Ensuite, supprimer le symbole « > » de la fenêtre « Image4 » et le symbole « < » de la
fenêtre « Image1 »
17. Exécuter par « Ctrl + Entrée »

8. Application2 : Création d’une Carrousel défilement automatique
1. Ouvrir Adobe XD
2. Ensuite choisir IPhone 12 Pro
3. Puis dessiner au centre un cercle comme suit :
4. Ensuite ouvrir le dossier des images puis glisser la première image sur le Cercle :

9. 5. Ensuite saisir le texte « HAMBURGER» comme suit :
6. Puis dessiner 4 petits cercles en bas comme suit :

10. 7. Nommer cette fenêtre par « Menu1 »
8. Dupliquer « Menu1 » et renommer la copie par « Menu2 » (Utiliser la touche « Alt » et
cliquer sur Menu1 puis déplacez-vous à droite pour avoir votre copie)
9. Puis changer le contenu dans « Menu2 » comme suit : changer texte, image et couleur du
cercle

11. 10. Dupliquer « Menu2 » et renommer la copie par « Menu3 » (Utiliser la touche « Alt » et
cliquer sur Menu2 puis déplacez-vous à droite pour avoir votre copie)
11. Dupliquer « Menu3 » et renommer la copie par « Menu4 » (Utiliser la touche « Alt » et
cliquer sur Menu3 puis déplacez-vous à droite pour avoir votre copie)
18. En fin, cliquer sur l’onglet en haut « Prototype »
-Cliquer sur « Menu1 » ensuite glisser la flèche bleue vers « Menu2 » puis changer dans la
fenêtre A droite :
 Déclencheur= Délai
 Délai = 2s
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s

12. -Cliquer sur « Menu2 » ensuite glisser la flèche bleue vers « Menu3 » puis changer dans la
fenêtre A droite :
 Déclencheur= Délai
 Délai = 2s
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s

13. -Cliquer sur « Menu3 » ensuite glisser la flèche bleue vers « Menu4 » puis changer dans la
fenêtre A droite :
 Déclencheur= Délai
 Délai = 2s
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s
-Cliquer sur « Menu4 » ensuite glisser la flèche bleue vers « Menu1 » puis changer dans la
fenêtre à gauche:
 Déclencheur= Délai
 Délai = 2s
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,6s
12. Exécuter par « Ctrl + Entrée »
13. Dans la fenêtre « Menu1 » puis dessiner un rectangle qui occupera la quasi-totalité de cette
fenêtre

14. 14. Puis glisser sur ce rectangle l’image « Iphone.jpg» puis augmenter sa taille pour avoir comme
suit :
15. Bouton droit sur cette image puis choisir « Arrière-plan »

15. Faites le même travail pour Menu2, Menu3 et Menu4

16. Application3 : Création d’une Carrousel 2d
1. Ouvrir Adobe XD
2. Ensuite choisir Web 1920
3. Puis dans la partie à gauche « Grille », cocher la case de « Disposition »
4. Ensuite dessiner un grand rectangle sur la grille (Fond =Noir et pas de bordure) comme suit :

17. 5. Nommer cette fenêtre par « Slide1 »
6. Ensuite dessiner un petit rectangle (Fond=Noir et pas de bordure)
(Sa taille même largeur que le grand rectangle et la hauteur est la moitié du grand rectangle)
Mettez ce rectangle à droite.
7. Dupliquer encore le dernier rectangle et mettez-le à coté comme suit :

18. 8. Sélectionner les 3 rectangles puis grouper-les (utiliser bouton droit puis choisir « Grouper »)
9. Ensuite Remplir ces 3 rectangles par des images
10. Cliquer sur l’outil rectangle puis dessiner un rectangle sur La première image comme suit :
- Sélectionner Tous les objets (Cliquer en haut sur « Modifier – Tout sélectionner »)
- Puis cliquer en haut sur « Objet – Masquer avec une forme »

19. 11. Dupliquer « Slide1 » et renommer la copie par « Slide2 » (Utiliser la touche « Alt » et cliquer
sur Slide1 puis déplacez-vous à droite pour avoir votre copie)
12. Ensuite dans « Slide2 » :
- Réduire la taille de la 1ére image et déplacer-la à gauche
- Augmenter la taille de la 2éme image et mettez-la à l’intérieur
- Déplacer la 3éme image à côté de la 2éme image
13. Dupliquer « Slide2 » et renommer la copie par « Slide3 » (Utiliser la touche « Alt » et cliquer
sur Slide2 puis déplacez-vous à droite pour avoir votre copie)

20. 14. Ensuite dans « Slide3 » :
- Déplacer la 1ére image et déplacer-la à gauche
- Réduire la taille la taille de la 2éme image et déplacez-la à gauche
- Augmenter la taille de la 3éme image et déplacez-la à l’intérieur
15. Dans « Slide1 », Utiliser l’outil Polygone puis dessiner à droite la forme suivante
Ensuite dans « Slide2 », créer deux formes comme suit :

21. Dans « Slide3 », Mettez à gauche une forme comme suit :
16. En fin, cliquer sur l’onglet en haut « Prototype »
-Cliquer sur « Slide1 », cliquer sur ensuite glisser la flèche bleue vers « Slide2 » puis
changer dans la fenêtre A droite :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,8s
-Cliquer sur « Slide2 », cliquer sur ensuite glisser la flèche bleue vers « Slide3 » puis
changer dans la fenêtre A droite :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,8s
- cliquer sur ensuite glisser la flèche bleue vers « Slide1 » puis changer dans la fenêtre A
droite :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,8s

22. - Dans « Slide3 », cliquer sur ensuite glisser la flèche bleue vers « Slide1 » puis changer
dans la fenêtre A droite :
 Déclencheur= Appuyer
 Type= animation automatique
 Rythme= Accél/décél
 Durée= 0,8s
17. Exécuter par « Ctrl + Entrée »