Jump to content
Search Community

Banner Ad Help Needed for After Effects .mov file

imhugeinapan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there, 

 

I'm an animator tasked with taking an animation I made awhile back and converting it to a banner ad. I made the .movs and .gifs but the smallest I know how to make the animations are 500kb and I need them to be 150k max for GDN. 

 

Does anyone have any suggestions for how to bring down these files? I've never made banner ads for the web before so am quite ignorant on the process. Do I need have this thing built in a different program? Is my animation too complicated for a banner ad? 

 

 

 

Link to comment
Share on other sites

Hello imhugeinapan

 

Welcome to the forums!

 

Without seeing your original animation, we can't really comment much on what you can do other than say that you will probably need to re-create it for the web using HTML, CSS, JavaScript and probably a bit of SVG.

 

Do you have any experience with any of the above?

  • Like 1
Link to comment
Share on other sites

Hi guys! 

 

I used After Effects to create the animation and export everything. I'm being told I need a .gif file that's under less than 150k for Google Display Network. 

 

I have no experience with HTML or those other formats. I attached the .gif below that I'm trying to bring down.  

post-49516-0-35932700-1483477072_thumb.gif

Link to comment
Share on other sites

Hi there, 

 

I'm an animator tasked with taking an animation I made awhile back and converting it to a banner ad. I made the .movs and .gifs but the smallest I know how to make the animations are 500kb and I need them to be 150k max for GDN. 

 

Does anyone have any suggestions for how to bring down these files? I've never made banner ads for the web before so am quite ignorant on the process. Do I need have this thing built in a different program? Is my animation too complicated for a banner ad? 

If you can't do a Rich Media banner and use your actual video footage, you will need to recreate your animation to meet standard specs.

 

If you don't know how to code, you can use Adobe Animate (formerly Flash Pro) to do timeline animation.  (HTML5 Canvas has been supported in Flash since the release of Created Cloud.)

 

The other alternative would be just doing a static banner.

  • Like 1
Link to comment
Share on other sites

Hi guys! 

 

I used After Effects to create the animation and export everything. I'm being told I need a .gif file that's under less than 150k for Google Display Network. 

 

I have no experience with HTML or those other formats. I attached the .gif below that I'm trying to bring down.  

If you have to do an animated gif and not HTML5, you would need to simplify.  

 

Try reducing the frame rate in After Effects, so you have less total frames.

  • Like 2
Link to comment
Share on other sites

If you have to do a gif and not HTML5, you would need to simplify.  

 

Try reducing the frame rate in After Effects, so you have less total frames.

 

This is the fastest and simplest solution. Import the uncompressed frames to Photoshop as layers, make timeline animation from them. Drop out 3 frames from every 4. Use lossy gif compression with transparency, fewer colors, and less dither.

 

Recreating this anim in HTML5 can be time consuming, but definitely possible

  • Like 2
Link to comment
Share on other sites

Since you have no experience with this your best bet will be less frames, as suggested by ohem, if you have the time, recreating it in Adobe Animate will probably yield smoother animation.

 

You won't manage to squeeze this gif into 150k as is, I'm afraid.

  • Like 1
Link to comment
Share on other sites

Since you have no experience with this your best bet will be less frames, as suggested by ohem, if you have the time, recreating it in Adobe Animate will probably yield smoother animation.

 

You won't manage to squeeze this gif into 150k as is, I'm afraid.

 

Do you know around how much it would cost to have someone build out this animation into HTML5? 

Link to comment
Share on other sites

Animate CC 2017 can export GIFs, that from my limited tire kicking (we have people creating animated GIFs for email) much more easily and smoother than PhotoShop.

 

You would only need very basic Animate skills to pull it off. And you would not have to worry about click tags and zipping assets. 

  • Like 1
Link to comment
Share on other sites

There's another option too. Use Animate CC and Trace Bitmap on your GIF frames. This might be smaller in file size than using a GIF and you don't really need to figure out the program too much. I'd also go in and delete the vectors that are duplicates between frames after the vector trace. I'd imagine this should fit into 150k if done properly

As far as outsourcing this, like others have said depends on where they are. I could do this in 4 - 5 hours.

  • Like 1
Link to comment
Share on other sites

I'm managing to get some of the banner ads down to the appropriate size. It's just the larger demensions that I'm having trouble with. Can anyone tell me if these settings look legit?

 

The animation runs smoothly and looks OK. 

 

 

 
Format: GIF Dimensions: 728w x 90h Size: 136.7K Settings: Adaptive, 32 Colors, No Dither, 92 frames, Transparency on, No Transparency Dither, Non-Interlaced, 0% Web Snap
  • Like 1
Link to comment
Share on other sites

Ran into another issue which is Google Display Network doesn't accept .gifs that they detect as over 5 FPS..... Is there a workaround here? 

Ye, their uploader thinks it's a stroboscope. Clever! The only way left is to make a slideshow from it, I'm afraid.

 

Or maybe a barebone HTML with only the .gif in it in an <img> tag + header, clicktag etc. If they check for individual assets framerates, i would inline the gif. I am pretty sure, they can't parse it.

 

https://www.npmjs.com/package/inliner

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...