Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Followers 8
imhugeinapan

Banner Ad Help Needed for After Effects .mov file

By imhugeinapan, in Banner Animation. Views: 5,218

Recommended Posts

Posted

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 post
Share on other sites
Posted

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 post
Share on other sites
Posted

What program did you use to create the .mov, assuming it was not just video?

  • Like 1
Link to post
Share on other sites
  • Author
Posted

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 post
Share on other sites
Posted

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 post
Share on other sites
Posted

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 post
Share on other sites
Posted

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 post
Share on other sites
Posted

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 post
Share on other sites
  • Author
Posted

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 post
Share on other sites
Posted

Depends where you're getting someone to work from, rates would vary from country to country.

 

Also, there's no guarantees that they would be able to get the banner to under 150kb as some compromises might be had.

  • Like 1
Link to post
Share on other sites
Posted

I'll second what Joe said. Someone working in London, for example, is more likely to be more expensive than someone who lives in a city where the cost of living is half of London.

  • Like 1
Link to post
Share on other sites
Posted

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 post
Share on other sites
Posted

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 post
Share on other sites
  • Author
Posted

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 post
Share on other sites
  • Author
Posted

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? 

Link to post
Share on other sites
Posted

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 post
Share on other sites
Posted

Perhaps try base64 encoding the animated GIF to work around it? Just google search how to do that, pretty easy. Then pop it in an html page...

  • Like 1
Link to post
Share on other sites
Posted

That banner is perfect for Animate CC, it can be done in one 30kb html file.

Link to post
Share on other sites

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
Sign in to follow this  
Followers 8
Go to topic listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
Login Create Account