Hi my name is Kent
I'm the creative specialist on the Google Web Designer team
and I'd like to show how to create animated GIFs in Google Web Designer
There's a few different ways to make them
and the simplest when starting a new file is to select animated GIF as the file type
give it a name then you can choose a size
create a custom size or start a multi-size layout
I'll just do a simple default one first
A couple things to note here is that I see a video track
because I'm really in the video authoring environment to handle frame rates
the preview resolution is one half by default so if stage playback is important you could change it
the timeline mode is Advanced
Quick mode is not available
Components and Events are not supported but Dynamic and Responsive are
and lastly there's no ad environment option
but you'll need to be aware of the different guidelines for each platform
I'll assume Google Ads for now since it's the most restrictive
and with the 150 KB limit at this size you'll probably need to keep your animation pretty simple
One trick is to limit the number of colors so I'll just use 1 plus white
the file construction proceeds like any other HTML5 document
with shapes text and images
I won't be using any video
for my text I'll pick some Google fonts and there's almost 1500 to choose from
I use the text controls to fine-tune letter spacing and line height
and in a simple design like this I'll leverage the typography for my creative work
I'm centering all my text and using the alignment controls to center each element
note Align the container is selected in the top toolbar
for the CTA I'll pick a different font but still in the same family
now I can add some animation and an easy way is to use text effects on this headline
I'll use Line up apply it and change the sequence to word by word then playback to see the results
it's kind of slow so I'll adjust the timing visually by editing this span
or I could enter exact values in the text effects panel
that looks better then I'll set a keyframe out here to hold on this text before repeating
if I nudge it back and forth it'll preserve the empty keyframe when reopening the file even though there's no change
now I publish locally and here's some options for frame rate which is 5 by default
Resolution, Time range, Compression and Looping
but I'll leave everything at full quality
then I'll preview
that looks okay the animation's a little choppy but I'm stuck with a frame rate of 5 for Google Ads
so there's not much I can do about it I can check the file size by finding the exported file in my project folder
it's 96 KB and easily below the 150 limit
if I need to go smaller back in GWD's publish dialog I can pull the colors down to 16
which is usually enough for two main colors like this
and dither helps when using more colors so I won't really reduce it now
and now my file still looks the same but it's dropped another 30 percent down to 65 KB
and if I need to reduce further then I'd start using a third-party GIF compressor
just Google search for free online ones and that original file is reduced to only 12 KB
now the 150 limit doesn't look too bad anymore
these are the tricks to making animated GIFs for Google Ads and Admob
other platforms like Display & Video 360 and Campaign Manager 360 are much less restrictive
and another way to create animated GIFs is from video files I can start a new one
and here's one already built
this has audio and video content but I can still publish a silent animated GIF from it
here's where I choose animated GIF
and here's where I choose the frame rate
but I've only got two options so cancel this and back to my file deselect everything
and the properties panel has all these choices let's try 12 and repeat
now I have my 12 FPS option and I'll leave everything else set to full quality
and here's the animated gif version of this video ad
the size is about seven megabytes but I'm allowed 10 so it's still fine
and one last way to approach this is with an existing HTML5 banner ad
here's an H5 creative based on a standard template
and if I want to turn it into an animated GIF I'll first have to convert the doctype to video
there's some scaling and size options here I'll just leave as is to get the same size
and now I can publish as an animated GIF
and here's the results
now I'll cover some advanced topics with the Responsive and Dynamic panels
but with animated GIFs we use the term multi-size layouts and variants because
the final output will still be a set of fixed unchanging images
for example in this video file we converted from the banner ad I'll make it multi-size
add a custom size
728x90 and with that size selected in the Responsive panel
all the changes I make now will apply only to this size
everything I'm doing is standard responsive design from the HTML5 workflow
with the base document, size, and range rule overrides
see the videos linked In the description for more info on authoring responsive documents
The purpose of responsive and dynamic authoring in this case is the convenience of keeping all your work in one file
instead of 20 different independent files
so for example if I had to update my logo in the future then I just do it once
and all those other sizes update automatically
the same for dynamic variants where it's pretty common to try a few different headlines to see which one performs best
and here's my leaderboard design
and the original size is unchanged
next I'll create a dynamic variant
so first select Edit base document and now I can set some dynamic bindings
again using the Outliner panel makes it easier to select these nested elements
on the headline right click to add a variant binding to the text content
and on my image bind to the source
now in the Variants tab of the Dynamic panel click this icon to make a new variant
and the pencil icon to edit it
I'll drag my new image into the library to load it
then for the image variant I'll select that file and key in a new headline
and now I see my new variant and again the original is unchanged
now I'll publish everything
here's where I choose the responsive sizes to export
and here's where I choose which Dynamic variants to export
and the rest is the same
note there's a preview range I can set in my timeline if I want it shorter than the full length
and OK this publishes all combinations
and when I preview I can choose how to view them
select the sizes and the variants
and I find all these separate animated GIFs in my project folder each named with the variant and size
That's it for animated GIFs in Google Web Designer
Thanks for watching!