Rechercher l'aide dont vous avez besoin
Vous aurez accès à des tutoriels vidéo, des formulaires d'aide et des articles de blog destinés aussi bien aux novices qu'aux experts pour vous aider à développer vos compétences. Pour obtenir des réponses rapides et des instructions détaillées, reportez-vous aux contenus ci-dessous.
-
Explorer les composants de la galerie
Explorez les fonctionnalités avancées des composants de la galerie Google Web Designer. Découvrez comment améliorer une bannière 300 x 250 standard.
- Mode avancé
- Interface utilisateur
-
Zoom de la timeline en mode avancé
Natalie, spécialisée en expérience utilisateur, explique comment faire un zoom avant ou arrière dans la timeline en mode avancé.
- Mode avancé
- Tutoriel vidéo
-
Interface de Web Designer
Découvrez l'interface de Google Web Designer, les outils disponibles et où les trouver.
- Présentation
- Interface utilisateur
-
Astuces Google Web Designer : partie 1
Créez et manipulez du contenu 3D grâce à la puissance du langage CSS3. Faites pivoter des créations 2D et des objets le long d'un axe, tout en visualisant des transformations et des translations en 3D au fil de la conception.
- 3D
- Blog
-
Modifier les styles à l'aide du panneau "CSS"
Le panneau CSS vous montre les styles de l'élément sélectionné. Vous pouvez également modifier les styles de la classe, ajouter des styles intégrés et créer des styles.
- Article d'aide
- Style CSS
-
Gérer des éléments à l'aide de la bibliothèque
Les fichiers audio et vidéo ainsi que les images que vous ajoutez à un document sont désignés dans leur ensemble par le terme "éléments". Ils sont créés lorsque vous les importez dans votre document et enregistrés dans la bibliothèque afin que vous puissiez les prévisualiser et les réutiliser.
- Article d'aide
- Bibliothèque
-
Sélectionner plusieurs images clés et vignettes
Natalie, spécialisée en expérience utilisateur, présente rapidement comment sélectionner plusieurs images clés en mode avancé et plusieurs vignettes en mode rapide.
- Mode avancé
- Tutoriel vidéo
-
Cinq fonctionnalités à explorer
Découvrons cinq fonctionnalités et processus utiles dans Google Web Designer : groupes, échantillons, BYOC, publication sur Drive et mises en page fluides.
- Présentation
-
Notes de version
Consultez la dernière version pour découvrir les nouvelles fonctionnalités.
- Article d'aide
- Informations techniques
-
Configuration système requise
Assurez-vous de disposer de la configuration système requise.
- Article d'aide
- Informations techniques
-
Environnement publicitaire
Google Web Designer accepte plusieurs environnements publicitaires, dont Google Ads, Display & Video 360 et Google AdMob. Basculez de l'un à l'autre en un seul clic.
- Article d'aide
- Créer et modifier du contenu
- Environnement publicitaire
-
Utiliser l'outil de texte
Ajoutez du texte et mettez-le en forme. Obtenez le résultat idéal grâce aux polices Google Fonts et à l'ajustement automatique du texte.
- Article d'aide
- Créer et modifier du contenu
- Ajouter des éléments
-
Utiliser les outils Stylo et Forme
Dessinez des lignes et des formes SVG, qu'elles soient simples ou complexes.
- Article d'aide
- Créer et modifier du contenu
- Ajouter des éléments
-
Utiliser les outils 3D
Google Web Designer vous permet de déplacer et de faire pivoter des éléments en trois dimensions. Vous pouvez changer la vue pour visualiser vos éléments de n'importe quelle position.
- Article d'aide
- Créer une annonce
- Déplacer et redimensionner des éléments
-
Utiliser les dégradés
Un dégradé est un remplissage multicolore où chaque couleur tend progressivement vers la couleur suivante. Il peut être appliqué à la fois à la bordure et au remplissage des éléments HTML, SVG et du canevas.
- Article d'aide
- Créer et modifier du contenu
- Couleurs
- Dégradés
-
Grouper et encapsuler les éléments
Grouper et encapsuler des éléments constituent deux façons de réunir plusieurs éléments comme s'ils ne constituaient qu'un seul objet.
- Article d'aide
- Créer et modifier du contenu
- Encapsuler les éléments
- Grouper des éléments
-
Présentation du format responsif
Le responsive design utilise des mises en page flexibles plutôt que fixes. En d'autres termes, vous ne devez concevoir qu'une seule annonce capable de remanier ses éléments, tels que son orientation ou sa taille, plutôt que de créer plusieurs annonces similaires.
- Article d'aide
- Annonces responsives
-
Redimensionner la fenêtre d'affichage
Lors de la création d'un format responsif, il est utile de voir à quoi ressemblera votre document final sur des écrans de différentes tailles.
- Article d'aide
- Annonces responsives
- Fenêtre d'affichage
-
À propos des animations
Pour concevoir des animations dans Google Web Designer, spécifiez des images clés à certains endroits de la timeline. Pour chaque image clé, définissez les propriétés CSS de l'élément animé. Ce dernier change progressivement et applique ces propriétés au cours de la transition avec l'image clé précédente.
- Article d'aide
- Animation
- Interactivité
-
Animation en mode rapide
En mode rapide, vous pouvez créer votre animation scène par scène, ajouter une nouvelle vue de la page complète, modifier les éléments à animer, ainsi que modifier la durée des transitions et les lissages de vitesse.
- Article d'aide
- Animation
- Interactivité
-
Animation en mode avancé
En mode avancé, la timeline de l'animation reprend chaque élément sous la forme d'un calque distinct. Les calques vous permettent de modifier la position de chaque élément au sein de la pile d'éléments, ainsi que de les masquer et de les verrouiller afin de pouvoir travailler plus efficacement.
- Article d'aide
- Animation
- Mode avancé
-
À propos des lissages de vitesse
Les lissages de vitesse vous permettent de modifier l'accélération et la décélération de la transition d'une animation.
- Article d'aide
- Animation
- Interactivité
- Lissage de vitesse
-
Imbriquer des animations
Bien souvent, vous créez une timeline pour une page entière. De cette manière, tous les éléments de la page sont inclus dans une seule et même timeline. Chaque conteneur parent dispose également d'une timeline distincte pour les animations. Ainsi, vous pouvez créer des animations complexes en les imbriquant les unes dans les autres.
- Article d'aide
- Animation
- Interactivité
- Imbrication
-
Lire une animation en boucle
Il existe deux techniques différentes pour lire une animation en boucle : lire chaque calque en boucle séparément ou utiliser des événements pour lire en boucle tous les calques en même temps (dans le cas d'une animation plus complexe).
- Lecture en boucle
- Interactivité
- Animation
- Article d'aide
-
À propos des trajectoires d'animation
Les trajectoires d'animation vous permettent d'animer des objets en les faisant suivre des courbes et des formes complexes.
- Article d'aide
- Animation
- Interactivité
- Mouvement
-
Créer des animations en mode avancé
En mode avancé, vous pouvez animer chaque élément en créant des images clés sur la timeline. La timeline est une représentation schématique de vos animations. Grâce aux images clés, vous connaissez leur position de départ et de fin.
- Article d'aide
- Animation
- Interactivité
- Mode avancé
-
Prévisualiser votre animation et utiliser la barre de lecture pour la tester
Prévisualisez votre animation et utilisez la barre de lecture pour l'afficher et la peaufiner lorsque vous la générez.
- Article d'aide
- Calques
- Mode avancé
- Animation
- Interactivité
-
À propos des composants
Les composants sont des modules pré-intégrés qui vous permettent d'ajouter des fonctionnalités spécifiques à vos annonces ou à vos documents HTML.
- Article d'aide
- Présentation
- Composants
-
Composant "Galerie à 360°"
Utilisez un ensemble d'images pour afficher un objet en cours de rotation. Par défaut, la dernière image renvoie à la première, ce qui permet à l'utilisateur de faire pivoter aisément l'objet dans chaque direction.
- galerie
- Article d'aide
- Composants
-
Composant "Galerie carrousel"
Créez une galerie à faire glisser de type carrousel pour présenter plusieurs images. Modifiez les propriétés du composant afin de créer divers types de carrousels et toute une variété d'expériences 3D.
- Article d'aide
- galerie
- Composants
-
Composant "Navigation dans la galerie"
Ajoutez un volet de navigation pouvant être positionné séparément par rapport à une galerie à faire glisser, à une galerie carrousel ou à une galerie à 360°.
- Article d'aide
- galerie
- Composants
-
Composant "Galerie à faire glisser"
Créez une galerie simple que les utilisateurs peuvent faire glisser vers l'avant ou vers l'arrière pour afficher un ensemble d'images différentes ou un ensemble de groupes différents.
- Article d'aide
- galerie
- Composants
-
Composant "Ajouter à l'agenda"
Créez des rappels d'événements que les utilisateurs peuvent ajouter à leurs agendas.
- Article d'aide
- Agenda
- Composants
-
Composant "Geste"
Capturez les interactions des utilisateurs avec votre annonce.
- Article d'aide
- Composants
- Geste
-
Composant "Bouton 'Image'"
Concevez un bouton visuellement réactif sans avoir à créer une animation spéciale basée sur les événements.
- Article d'aide
- Bouton
- Composants
-
Composant "Zone cliquable"
Placez un élément transparent sur n'importe quel endroit de l'écran qui répond à un clic ou à une pression de l'utilisateur.
- Zone cliquable
- Composants
-
Composant "Appuyer pour appeler/envoyer un SMS"
Laissez les utilisateurs passer un appel téléphonique ou envoyer un SMS au numéro que vous spécifiez dans une annonce pour mobile sur les smartphones compatibles.
- Article d'aide
- Composants
- Appeler/Envoyer un SMS
-
Composant "Carte"
Ajoutez à votre projet une carte configurable et incluse dans l'index de recherche. Elle peut indiquer la position de l'utilisateur, ainsi que d'autres informations spécifiques à sa localisation.
- Article d'aide
- Cartes
- Composants
-
Composant "Street View"
Ajoutez à votre projet des images Google Street View avec lesquelles l'utilisateur peut interagir.
- Article d'aide
- Composants
- Street View
-
Composant "Audio"
Ajoutez un élément audio à votre annonce.
- Article d'aide
- Composants
- Audio
-
Composant "Vidéo"
Un moyen facile d'ajouter une vidéo à votre annonce.
- Article d'aide
- Composants
-
Composant "YouTube"
Ajoutez une vidéo YouTube à votre annonce. Personnalisez le lecteur et la lecture.
- Article d'aide
- Composants
- YouTube
-
Composant "iFrame"
Chargez dans votre projet des éléments d'URL externes, y compris des pages HTML externes.
- iFrame
- Composants
- Article d'aide
-
Composant "Feuille de sprites"
Ajoutez des animations à base de sprites, afin d'afficher des sprites individuels sous forme d'images de façon séquentielle, ou placez plusieurs images dans une feuille de sprites pour réduire le nombre de fichiers image individuels.
- Article d'aide
- Composants
- Feuille de sprites
-
API des composants
Consultez la liste des propriétés, des événements et des méthodes disponibles pour chaque composant afin de pouvoir écrire du code personnalisé.
- Article d'aide
- Aperçu
-
À propos des événements
Les événements permettent de définir les actions exécutées en réponse aux gestes des utilisateurs, aux images clés de la timeline ou à d'autres occurrences dans votre annonce ou votre document HTML.
- Article d'aide
- Événements
-
Créer des actions personnalisées
Vous pouvez créer vos propres actions personnalisées à l'aide de JavaScript. Une fois définie, une action personnalisée est réutilisable au sein de votre création.
- Article d'aide
- Événements
-
Créer une bannière
Les bannières sont des annonces simples qui remplissent un espace spécifique sur une page Web ou dans une application.
- Article d'aide
- Bannières
- Créer une annonce
-
Créer une annonce expand
Une création expand est une annonce qui commence par une taille de bannière standard, puis se développe, vous offrant davantage d'espace pour attirer l'attention de l'utilisateur.
- Article d'aide
- Événements
- Création expand
-
Créer une annonce interstitielle
Les annonces interstitielles occupent tout l'écran et sont diffusées à des moments de transition naturels, par exemple lors d'un changement de page, au lancement d'une application ou au chargement d'un niveau de jeu.
- Article d'aide
- Interstitiel
- Créer une annonce
-
Créer une annonce dynamique
Les annonces dynamiques permettent de proposer des offres pertinentes à votre audience. Elles se basent sur les informations d'un flux de données pour déterminer les images et le texte qui doivent être affichés.
- Article d'aide
- AMP HTML
- Créer une annonce
-
Annonces AMP HTML
Google Web Designer vous permet de créer des annonces AMP HTML. Les annonces AMP (Accelerated Mobile Pages) se chargent plus rapidement que les annonces normales, ce qui les rend idéales pour les appareils mobiles.
- Article d'aide
- Créer une annonce
- AMP HTML
-
Utiliser des modèles
Les modèles sont des annonces prédéfinies de tailles courantes, avec des styles et des fonctionnalités standards. En remplaçant les images et d'autres éléments, vous pouvez créer rapidement une annonce efficace.
- Article d'aide
- Créer une annonce
- Modèles
-
Créer un modèle personnalisé
Enregistrez en tant que modèle n'importe quelle annonce que vous créez. De cette façon, vous gagnerez du temps, en particulier si vous créez de nombreuses versions d'une même annonce.
- Article d'aide
- Créer une annonce
- Modèles
-
Outil de validation des annonces
L'outil de validation des annonces vérifie que votre annonce ne comporte pas de problème courant et affiche ensuite les résultats dans un panneau en temps réel.
- Article d'aide
- Créer une annonce
-
Parcourir la structure de votre document dans le panneau "Idéateur"
Le panneau "Idéateur" présente les éléments de votre document sous forme d'arborescence afin de faciliter la sélection et la navigation.
- Article d'aide
- DOM
-
Prévisualiser votre page HTML ou votre annonce
Lorsque vous concevez votre page HTML ou votre annonce, vous pouvez la prévisualiser dans votre navigateur pour vérifier son apparence et son fonctionnement une fois publiée.
- Article d'aide
- Aperçu
-
Publier votre travail
La publication de votre projet génère des fichiers finalisés, prêts à faire l'objet d'un trafficking. Google Web Designer peut effectuer la publication dans un dossier local, ou directement sur Google Drive ou Studio.
- Article d'aide
-
Zoom de la timeline en mode avancé
Natalie, spécialisée en expérience utilisateur, explique comment faire un zoom avant ou arrière dans la timeline en mode avancé.
- Mode avancé
- Timeline
- Tutoriel vidéo
-
Fonctions de lissage de vitesse (transition au début/à la fin)
Natalie, spécialisée en expérience utilisateur, explique comment ajouter les fonctions de lissage de vitesse (transition au début/à la fin). Elles s'avèrent particulièrement utiles si vous souhaitez que votre animation passe d'une image clé à une autre instantanément (plutôt que d'effectuer une transition progressive).
- Tutoriel vidéo
- Lissage de vitesse
-
Masquer et verrouiller des calques de la timeline
Natalie, spécialisée en expérience utilisateur, explique comment masquer et verrouiller plusieurs calques dans la timeline.
- Mode avancé
- Timeline
- Tutoriel vidéo
-
Présentation de l'interface utilisateur
Jon, spécialisé en expérience utilisateur, présente l'interface utilisateur de Google Web Designer. Apprenez à utiliser les différentes barres d'outils et les différents panneaux, ainsi qu'à organiser et ajuster l'espace de travail en fonction de vos préférences.
- Tutoriel vidéo
- Interface utilisateur
-
Présentation des événements
Maciek, ingénieur Google Web Designer, présente notre processus lié aux événements. Apprenez entre autres à définir des styles CSS et à ajouter des actions personnalisées à l'aide d'événements.
- Tutoriel vidéo
- Événements
-
Présentation de l'outil Dégradé
Jean-Pierre, ingénieur Google Web Designer, présente les dégradés, y compris le dégradé linéaire, le dégradé radial et l'outil de modification du dégradé.
- Tutoriel vidéo
- Dégradés
-
Présentation des formes
Jean-Pierre, ingénieur Google Web Designer, présente les outils Forme, dont l'outil Ovale et l'outil Rectangle.
- Tutoriel vidéo
- Formes
-
Présentation de l'outil de texte
Shuo, ingénieur Google Web Designer, présente les fonctionnalités liées au texte, y compris le panneau "Texte". Apprenez entre autres à redimensionner et à déplacer du texte, ainsi qu'à copier des styles de texte entre plusieurs documents.
- Tutoriel vidéo
- Texte
-
Présentation du dessin en 2D et en 3D
Lucas, ingénieur Google Web Designer, présente nos fonctionnalités et outils de dessin en 2D et en 3D.
- Tutoriel vidéo
- Créer et modifier du contenu
-
Présentation du mode avancé de la timeline
Natalie, ingénieur Google Web Designer, présente le mode avancé de la timeline. Apprenez entre autres à créer des animations, à utiliser des images clés et à définir des lissages de vitesse.
- Mode avancé
- Tutoriel vidéo
-
Outil de validation des annonces
Jon, ingénieur Google Web Designer, présente l'outil de validation des annonces. Ce dernier vérifie que votre annonce ne comporte pas de problème et affiche ensuite les résultats dans le panneau "Outil de validation des annonces". Bien que l'outil ne garantisse pas l'approbation de vos annonces, il vous permet de repérer et de corriger les erreurs directement.
- Créer une annonce
- Tutoriel vidéo
-
Ensembles de panneaux relatifs à l'espace de travail
Yaqi, ingénieur Google Web Designer, présente les panneaux relatifs à l'espace de travail. Vous pourrez ensuite enregistrer vos ensembles de panneaux préférés dans Google Web Designer.
- Tutoriel vidéo
- Lieu de travail
- Configuration
-
Présentation de la trajectoire d'animation
Lucas, ingénieur Google Web Designer, présente les trajectoires d'animation. Ces dernières vous permettent d'animer des objets à mesure qu'ils se déplacent sur la trajectoire que vous avez spécifiée. Vous pouvez fixer des points d'ancrage pour définir cette animation et cette courbe ou les associer si nécessaire.
- Tutoriel vidéo
- Mouvement
-
Modifier la trajectoire d'animation
Chia-Ling, ingénieur Google Web Designer, explique comment modifier la trajectoire d'une animation. Découvrez différentes manières de modifier votre animation dans l'espace de création grâce à la fonctionnalité de modification de la trajectoire d'animation.
- Tutoriel vidéo
- Mouvement
-
Présentation des groupes
Dans cette vidéo, l’ingénieur Google Web Designer, Lucas, fournit une démonstration de la fonctionnalité Groupes.
- Grouper des éléments
- Tutoriel vidéo
-
Groupes avec présentation des événements
Lucas, ingénieur Google Web Designer, explique comment utiliser des événements dans notre nouvelle fonctionnalité de groupes. Ces derniers vous permettent de constituer des ensembles réutilisables d'éléments que vous pouvez modifier et gérer en tant qu'objets uniques. Combinez-les aux événements afin de réaliser rapidement des animations efficaces.
- Tutoriel vidéo
- Événements
- Grouper des éléments
-
Processus des annonces responsives
Kent Myers, spécialiste des créations Google Web Designer, présente les processus des annonces responsives. Découvrez comment concevoir votre propre annonce responsive facilement et rapidement à l'aide d'un modèle responsif.
- Annonces responsives
- Tutoriel vidéo
-
Idéateur
Dans cette vidéo, Jean-Pierre, ingénieur en concepteur Web chez Google, donne un aperçu du Outliner.
- Tutoriel vidéo
- Idéateur
-
Mise à l'échelle de l'image clé de la timeline
Natalie, ingénieur Google Web Designer, présente la fonctionnalité de mise à l'échelle de l'image clé de la timeline. Pour modifier la durée d'une animation tout en conservant un espacement proportionnel entre les images clés, maintenez la touche Maj enfoncée en faisant glisser les images clés sélectionnées sur la timeline en mode avancé.
- Mode avancé
- Timeline
- Tutoriel vidéo
-
Explorer les composants de la galerie Google Web Designer
Explorez les fonctionnalités avancées des composants de la galerie Google Web Designer.
- Blog
- galerie
- Composants
-
Astuces Google Web Designer : partie 2
Créez du code personnalisé, utilisez des événements de timeline pour lire l'annonce en boucle, etc.
- Mode avancé
- Code personnalisé
- Blog
-
Explorer le texte dans Google Web Designer
Nous allons vous montrer comment gérer l'apparence du texte dans votre document Google Web Designer.
- Texte
- Blog
Premiers pas
Cliquez sur "Télécharger Web Designer" ci-dessous pour lancer le téléchargement de l'outil. Suivez les instructions affichées à l'écran pour l'installer.
