{"id":2207,"date":"2015-09-04T10:11:36","date_gmt":"2015-09-04T08:11:36","guid":{"rendered":"http:\/\/studio.ican-design.fr\/?p=2207"},"modified":"2023-01-19T09:59:45","modified_gmt":"2023-01-19T08:59:45","slug":"google-web-designer-animation-web","status":"publish","type":"post","link":"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/","title":{"rendered":"Google Web Designer \/ Animation Web"},"content":{"rendered":"

Dans l’univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash s’\u00e9teint peu \u00e0 peu et la comp\u00e9tition est ouverte. Adobe Edge Animate et Google Web designer semblent aujourd’hui les mieux plac\u00e9s pour lui succ\u00e9der…<\/p>\n

Au moment o\u00f9 nous r\u00e9digeons cet article il est impossible de pr\u00e9voir qui l’emportera et s’il y aura de la place pour d’autres… Difficile de dire quel est le meilleur, car les choses \u00e9voluant si vite, chaque jour qui passe pourrait nous faire mentir. Mais nous allons n\u00e9anmoins faire un point sur ces logiciels, leurs sp\u00e9cificit\u00e9s et ce pourquoi nous serions susceptibles de les utiliser.
\nDans ce premier article d\u00e9di\u00e9 \u00e0 l’animation web, nous vous proposons donc de d\u00e9couvrir Google Web Design<\/em> (b\u00e9t\u00e0), en m\u00eame temps que de faire vos premiers pas dans la cr\u00e9ation d’un banni\u00e8re Pub ! Dans un second article (bient\u00f4t!) nous d\u00e9couvrirons Adobe Edge Animate.<\/em><\/p>\n

1\/ Le point sur Google Web Designer<\/h2>\n

“GWD” est un outil destin\u00e9 \u00e0 la cr\u00e9ation d’animations (interactives) pour le web et assez clairement orient\u00e9 vers la publicit\u00e9<\/strong> (Banni\u00e8res web). On peut ainsi tr\u00e8s rapidement animer des formes, des images, g\u00e9rer la couleur, l’opacit\u00e9, les transitions… Ins\u00e9rer des liens, des boutons, des vid\u00e9os… et proposer de l’interactivit\u00e9. L’ensemble de notre animation g\u00e9n\u00e9rera un fichier HTML qui int\u00e8grera du HTML5, CSS3, JavaScript…<\/p>\n

\"google<\/p>\n

Un outil clairement orient\u00e9 publicit\u00e9, avec un format ad\u00e9quat et privil\u00e9giant aussi certains environnements \/ r\u00e9gies publicitaires plut\u00f4t que d’autres…
\n<\/em><\/p>\n

L’interface de “GWD”<\/h3>\n

l’interface est sobre et assez classique, on y retrouve les menus d\u00e9di\u00e9s \u00e0 l\u2019animation pour le web.<\/p>\n

\"google<\/p>\n

A gauche, une barre d’outils : texte, blocs, formes, manipulations (2D\/3D)… associ\u00e9e \u00e0 la barre du haut avec les options des outils s\u00e9lectionn\u00e9s.
\nA droite, une barre de menu : Propri\u00e9t\u00e9s, Composants (Boutons, Zones cliquables, Vid\u00e9os…), \u00c9v\u00e9nements, CSS, Biblioth\u00e8que d’\u00e9l\u00e9ments…
\nEt en bas, la timeline sur laquelle vous pourrez animer vos \u00e9l\u00e9ments.<\/p>\n

En “conclusion”<\/h3>\n

Au moment o\u00f9 nous \u00e9crivons cet article, “GWD” est un outil de plus en plus pertinent, optimis\u00e9 et utilis\u00e9 pour\/par les r\u00e9gies pubs.
\nCependant, il est encore en version b\u00eata (il y a des bugs…), et il n’est pas aussi d\u00e9velopp\u00e9 en terme de fonctionnalit\u00e9s (donc limit\u00e9…) que ses ain\u00e9s (Flash) et son concurrent (Adobe Edge Animate).<\/p>\n

2\/ Cr\u00e9ation d’une banni\u00e8re avec GWD<\/h2>\n

Cr\u00e9er une banni\u00e8re publicitaire (300x600px) qui mette en \u00e9vidence vos comp\u00e9tences en cr\u00e9ation et animation web HTML5\/CSS (3 \u00e9crans \/\u00e9tapes).<\/p>\n

Le storyboard en 3 \u00e9tapes<\/h3>\n

1\/ Arri\u00e8re-plan fixe, nuages + d\u00e9grad\u00e9 ciel bleu
\n2\/ Des oiseaux transportent un \u00e9cussons HTML5 de la gauche vers la droite, l\u2019\u00e9cusson fait une l\u00e9g\u00e8re rotation 3D (idem pour l’\u00e9cusson CSS3 mais dans l’autre sens).
\n3\/ Un bloc texte descend + un bouton “lien” + un bouton “rejouer”<\/p>\n

\"google<\/p>\n

Ce sc\u00e9nario nous permet de tester diff\u00e9rentes fonctionnalit\u00e9s et animations de GWD : Opacit\u00e9, mouvement, 3D, vitesse, easing, composants, texte (Google fonts…) …<\/em><\/p>\n

Cr\u00e9ation et int\u00e9gration des \u00e9l\u00e9ments<\/h3>\n

Cr\u00e9ation sur GWD :<\/strong> cr\u00e9ez un nouveau fichier au format 300x600px > Cr\u00e9ez un d\u00e9grad\u00e9 bleu ciel en fond > Cr\u00e9ez un nuage avec 3 formes ovales + groupe “Nuage01”
\n> Cr\u00e9ez sous Photoshop<\/strong> l’ensemble des \u00e9l\u00e9ments n\u00e9cessaires \u00e0 votre animation que vous importerez ensuite dans GWD (Formats : JPG, PNG, SVG).<\/p>\n

\"google<\/p>\n

Nous avons cr\u00e9\u00e9 diff\u00e9rents \u00e9l\u00e9ments sous Photoshop, puis les avons export\u00e9s pour le web en JPG ou PNG (Transparence) en faisant attention \u00e0 la taille et au poids des fichiers, et enfin nous les avons int\u00e9gr\u00e9s \u00e0 notre animation (Ils apparaissent bien dans la Biblioth\u00e8que d’\u00e9l\u00e9ments).<\/em><\/p>\n

Animation des \u00e9l\u00e9ments dans “GWD”<\/h3>\n

Une fois les \u00e9l\u00e9ments int\u00e9gr\u00e9s, ils sont superpos\u00e9s les uns aux autres sur la timeline, et il ne reste plus qu’\u00e0 les animer via des images cl\u00e9s.<\/p>\n

\"google<\/p>\n

Il est possible d’ajouter une couche d’interactivit\u00e9, des \u00e9v\u00e8nements, des actions, des composants… En effet, dans l’exemple ci-dessous, apr\u00e8s le bloc texte, nous avons gliss\u00e9 un “Composant > Zone cliquable” au dessus du logo ICAN pour d\u00e9clencher une action qui ouvrira une nouvelle page dan le navigateur.
\nNous avons \u00e9galement cr\u00e9\u00e9 en bas un bouton “Reload” qui nous permet de rejouer l’animation.<\/p>\n

\"google<\/p>\n

Vous pouvez intervenir directement sur le code via la “Vue Code” ou la modification des CSS dans le menu de droite.<\/em><\/p>\n

Notre banni\u00e8re r\u00e9alis\u00e9e avec GWD<\/h2>\n

Attention, il faudra peut-\u00eatre d\u00e9sactiver vos ad-block, bloqueurs de pub… pour voir la banni\u00e8re… Normale c’est une banni\u00e8re de pub ! GWD propose aussi de cr\u00e9er des animations \u00e0 partir de mod\u00e8les HTML simples, donc apriori, sans les ajouts de codes sp\u00e9cifiques aux banni\u00e8res pub…<\/span><\/p>\n

Liens utiles GWD<\/h2>\n

https:\/\/www.google.com\/webdesigner\/
\nhttps:\/\/www.youtube.com\/user\/GoogleWebDesigner
\nhttps:\/\/support.google.com\/webdesigner?vid=1-635769505350139362-2099015783#topic=3249465<\/p>\n

D\u00e9couvrez les formations en Web et Multim\u00e9dia de l\u2019\u00e9cole d\u2019infographie<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Dans l’univers de la publicit\u00e9 et de l\u2019animation pour le web, Flash s’\u00e9teint peu \u00e0 peu et la comp\u00e9tition est ouverte. Adobe Edge Animate et Google Web designer semblent aujourd’hui les mieux plac\u00e9s pour lui succ\u00e9der…<\/p>\n","protected":false},"author":12,"featured_media":2231,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[381,15],"tags":[230,231,232,233,234,235,70],"acf":[],"yoast_head":"\nGoogle Web Designer & cr\u00e9ation de banni\u00e8re<\/title>\n<meta name=\"description\" content=\"Dans l'univers de la publicit\u00e9 et de l\u2019animation, Flash s'\u00e9teint peu \u00e0 peu... Adobe Edge Animate et Gooogle Web designer semblent les mieux lotis...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Web Designer & cr\u00e9ation de banni\u00e8re\" \/>\n<meta property=\"og:description\" content=\"Dans l'univers de la publicit\u00e9 et de l\u2019animation, Flash s'\u00e9teint peu \u00e0 peu... Adobe Edge Animate et Gooogle Web designer semblent les mieux lotis...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio ICAN\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-04T08:11:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-19T08:59:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2015\/09\/GWD00.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nicolas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nicolas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/\",\"url\":\"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/\",\"name\":\"Google Web Designer & cr\u00e9ation de banni\u00e8re\",\"isPartOf\":{\"@id\":\"https:\/\/studio.ican-design.fr\/#website\"},\"datePublished\":\"2015-09-04T08:11:36+00:00\",\"dateModified\":\"2023-01-19T08:59:45+00:00\",\"author\":{\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656\"},\"description\":\"Dans l'univers de la publicit\u00e9 et de l\u2019animation, Flash s'\u00e9teint peu \u00e0 peu... Adobe Edge Animate et Gooogle Web designer semblent les mieux lotis...\",\"breadcrumb\":{\"@id\":\"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/studio.ican-design.fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Web Designer \/ Animation Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studio.ican-design.fr\/#website\",\"url\":\"https:\/\/studio.ican-design.fr\/\",\"name\":\"Studio ICAN\",\"description\":\"D\u00e9couvrez les projets des \u00e9tudiants de l'ICAN : cr\u00e9ation num\u00e9rique, animation, game design, web design, cr\u00e9ation web, motion design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studio.ican-design.fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656\",\"name\":\"Nicolas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/studio.ican-design.fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g\",\"caption\":\"Nicolas\"},\"sameAs\":[\"https:\/\/www.behance.net\/nicolasgervais\"],\"url\":\"https:\/\/studio.ican-design.fr\/author\/cd4vf9u296\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Google Web Designer & cr\u00e9ation de banni\u00e8re","description":"Dans l'univers de la publicit\u00e9 et de l\u2019animation, Flash s'\u00e9teint peu \u00e0 peu... Adobe Edge Animate et Gooogle Web designer semblent les mieux lotis...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Google Web Designer & cr\u00e9ation de banni\u00e8re","og_description":"Dans l'univers de la publicit\u00e9 et de l\u2019animation, Flash s'\u00e9teint peu \u00e0 peu... Adobe Edge Animate et Gooogle Web designer semblent les mieux lotis...","og_url":"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/","og_site_name":"Studio ICAN","article_published_time":"2015-09-04T08:11:36+00:00","article_modified_time":"2023-01-19T08:59:45+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/studio.ican-design.fr\/ecole-infographie\/sites\/3\/2015\/09\/GWD00.jpg","type":"image\/jpeg"}],"author":"Nicolas","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nicolas","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/","url":"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/","name":"Google Web Designer & cr\u00e9ation de banni\u00e8re","isPartOf":{"@id":"https:\/\/studio.ican-design.fr\/#website"},"datePublished":"2015-09-04T08:11:36+00:00","dateModified":"2023-01-19T08:59:45+00:00","author":{"@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656"},"description":"Dans l'univers de la publicit\u00e9 et de l\u2019animation, Flash s'\u00e9teint peu \u00e0 peu... Adobe Edge Animate et Gooogle Web designer semblent les mieux lotis...","breadcrumb":{"@id":"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studio.ican-design.fr\/google-web-designer-animation-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/studio.ican-design.fr\/"},{"@type":"ListItem","position":2,"name":"Google Web Designer \/ Animation Web"}]},{"@type":"WebSite","@id":"https:\/\/studio.ican-design.fr\/#website","url":"https:\/\/studio.ican-design.fr\/","name":"Studio ICAN","description":"D\u00e9couvrez les projets des \u00e9tudiants de l'ICAN : cr\u00e9ation num\u00e9rique, animation, game design, web design, cr\u00e9ation web, motion design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studio.ican-design.fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/b63c638049bff9f34019dcb9fe843656","name":"Nicolas","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/studio.ican-design.fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ea0eb9183cdc62d47d12e7d4e5ec4a7f?s=96&d=mm&r=g","caption":"Nicolas"},"sameAs":["https:\/\/www.behance.net\/nicolasgervais"],"url":"https:\/\/studio.ican-design.fr\/author\/cd4vf9u296\/"}]}},"_links":{"self":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/2207"}],"collection":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/comments?post=2207"}],"version-history":[{"count":4,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/2207\/revisions"}],"predecessor-version":[{"id":8482,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/posts\/2207\/revisions\/8482"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/media\/2231"}],"wp:attachment":[{"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/media?parent=2207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/categories?post=2207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studio.ican-design.fr\/wp-json\/wp\/v2\/tags?post=2207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}