#Google web designer examples download
#Google web designer examples free

Drag elements on to the workspace (I rename the layers here, too). If you don’t name them that way prior to importing them, you’ll need to do it before you start animating. For whatever reason, GWD prefers assets to be named with no spaces. wp-content/uploads/2018/02/GWD-Video2.mp4īefore animating, you’ll need to make sure all the assets are named correctly. Make sure it’s saving to the correct location and choose the correct size. Once you’ve opened GWD (it can take a minute, so be patient), you will need to name your file. For any images, save at the correct size as a. Next, you will need to save all artboards as. For this ad, the logo, red color block and button were on an artboard and the headline and the price point each had their own artboard.

Make sure you’ve expanded all of the elements and separate them on to different artboards. In this case, I’m going to be sliding the the white text on and off the screen, rotating between the headline and the price point. Start by laying out the ad in Illustrator (Photoshop works too), then figure out the flow and which pieces you will be animating. I have provided a walk-through of my process below, complete with a few videos for clarity.

#Google web designer examples download

To start using Google Web Designer, go to /webdesigner and download the application. As I mentioned, GWD can be finicky and staying on top of your organization will make a big difference. Second, keep your files extremely organized. If you are familiar with AfterEffects, GWD is similar enough that you’ll be able to learn by doing. Now that I have some experience with the program, I wanted to share a few tips that have really helped me. The downside is the program is still in beta, so it can be pretty clunky and sometimes really frustrating.

#Google web designer examples free

The interface is easy to navigate and it’s a free program. This is perfect if you’re a designer, but not really into coding (like me). GWD allows you to pull in images and assets to create animations, while it takes care of the HTML and CSS portion. Have you been using Google Web Designer to create banner ads? Until starting at The James Agency, I hadn’t even heard of it! For those reading who don’t know, Google Web Designer is an application used to create HTML5 advertisements without having to actually dig into the messy coding part.