Zync

Banner Layout Workflow

Recommended Posts

Hi All,

 

Just wondering if anyone has any good tips or know of any good apps either online or offline that can help with the layout of webbanners which can them be palmed off to animating with greensock. Flash did a great job with layout and then animating with greensock in a sweet little package but times are changing.

 

Just wondering what people use to layout their banners with now?

Share this post


Link to post
Share on other sites

Zync

 

You can also use Adobe Edge Animate using the Edge Animate templates available on  the Doubleclick Studio Template repository. Then just zip those files after publishing.

 

The templates have the DC enabler added to the DC Edge html file and the DC method of creating a click through that is being tracked, as that is the other part of banner ads post Flash that is not as clear as it should be.

 

http://www.richmediagallery.com/tools/template-database#filterTplDb:464%2C406~

 

The build guide explains how to use Edge from scratch. 

 

https://support.google.com/richmedia/answer/3030310?hl=en

 

<title>My Ad</title>
  <script src="http://s0.2mdn.net/ads/studio/Enabler.js"></script>

 

 

Share this post


Link to post
Share on other sites

Hi Somnamblst,

 

I've tried Adobe Edge before but the way it selects elements seems really obscure to me. Wish I could use it just for layout and then animate with greensock. Is that possible without including the Edge bloat scripts?

 

I'm actually using Flash still and the Canvas document to make ads at the moment. And while it's working well for layout, just wondering if there was a quicker way out there. It's great for positioning things quickly and then having all your movieclips accessible with exportRoot. Theres a little bit of refactoring, stitching it up with a network like Sizmek but so far so good. I don't think it will work for all ad types though like expandables.

 

And thanks ihatetomatoes, was looking for a more visual way of placing elements though without script though. To me that seems to be the biggest bottleneck in the entire pipeline, manually positioning things with css. Not to mention I have a few non-codey people in the office here who want to tweak layout things to an mind numbing extent. 

Share this post


Link to post
Share on other sites

Hi Zync, 

 

Have you tried Google Web Designer? It creates the CSS in the main HTML as you build the layout. You could publish it and then strip out all the code you don't need. And then use GSAP to animate.

Share this post


Link to post
Share on other sites

I too was frustrated by Edge, coming from Flash. I just wanted to be able to load subSWFs.

 

Until I saw the syntax  for loading iFrames in Edge, which allowed me to display just about anything you find on the web like sliders and slide shows.

 

sym.$("Box").html("<iframe width='770' height='360' src='http://**********/flipbook/' scrolling='no' border='0' border='no' frameBorder='0'></iframe>");

 

My favorite was a parallax slider I modified to fit a high impact pushdown.

 

Maybe HTML5 advertising should not try to be so much about animation for the sake of animation, and more about building interactive advertising. You will have rich media metrics if you use the DCRM HTML5 templates for Studio.

 

Even without using GWD you can edit and reuse at least some of the Doubleclick GWD templates in an HTML editor.

 

I like this one. The bottom has swipeable images you can just replace.

 

http://motifcdn2.doubleclick.net/EMEA/dc_templates/live/preview/gwd/DCRM_Inpage_banner_with_Swipable_Gallery/DCRM_HTML5_inPage_Banner_with_Swipeable_Gallery.html

 

 

 

Whatever you choose to do, you have to be able to offer tracking. Any GSAP coding should happen within a  vendor like Doubleclick's templates. Better to know early if they aren't going to play well together.

Share this post


Link to post
Share on other sites

Hi Zync, 

 

Have you tried Google Web Designer? It creates the CSS in the main HTML as you build the layout. You could publish it and then strip out all the code you don't need. And then use GSAP to animate.

 

Hi Joe_midi,

 

No I haven't really heard or tried Google Web Designer much. If it does what you say and just creates css with html and does the css for you that would be amazing. How does it fare with video? Will definitely look into that now.

Share this post


Link to post
Share on other sites

I too was frustrated by Edge, coming from Flash. I just wanted to be able to load subSWFs.

 

Until I saw the syntax  for loading iFrames in Edge, which allowed me to display just about anything you find on the web like sliders and slide shows.

 

sym.$("Box").html("<iframe width='770' height='360' src='http://**********/flipbook/' scrolling='no' border='0' border='no' frameBorder='0'></iframe>");

 

My favorite was a parallax slider I modified to fit a high impact pushdown.

 

Maybe HTML5 advertising should not try to be so much about animation for the sake of animation, and more about building interactive advertising. You will have rich media metrics if you use the DCRM HTML5 templates for Studio.

 

Even without using GWD you can edit and reuse at least some of the Doubleclick GWD templates in an HTML editor.

 

I like this one. The bottom has swipeable images you can just replace.

 

http://motifcdn2.doubleclick.net/EMEA/dc_templates/live/preview/gwd/DCRM_Inpage_banner_with_Swipable_Gallery/DCRM_HTML5_inPage_Banner_with_Swipeable_Gallery.html

 

 

 

Whatever you choose to do, you have to be able to offer tracking. Any GSAP coding should happen within a  vendor like Doubleclick's templates. Better to know early if they aren't going to play well together.

 

How do you integrate Greensock with Edge Animate? I like the edge timeline but I just find greensock much more flexible for making changes quickly, like changing the timing of everything is a lifesaver, I'll never go back to timeline just for that feature alone.

Share this post


Link to post
Share on other sites

Hello, 

 

is it possible to make a banner as writen above..and to test on DC of google display network..

 

( stupid maybe..but is DC a kind of plugin for GDN? or is it a different platform.. on my questions i get answers GDN only works with animations in css...and because of gap i will animate in the .js...)

 

maybe some has the answer ;-)

Share this post


Link to post
Share on other sites

Hey dudes/dudettes,  shameless self promotion here, but I LOVE Greensock(Saved my Career)(Former Flash Dev)!

 

I just created a node based HTML5 banner workflow tool using GSAP for animations and it has helped me with the mass production of the most popular standard banner sizes.  I will be adding more in the future to handle RICH media, but should be easy to integrate. 

 

https://github.com/leedium/banner-boi

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites

My personal workflow is like this:

 

Get the psd from the designer, clean it up (let's not talk about the sea of unnamed and repeated layers, or old assets left behind from previous versions).

 

As I clean the psd up, I create a bunch of Smart objects for the assets and one artboard for each banner format. Then is just a matter of creating one set of "source" assets to use Photshop's Generate Image feature (Seriously, if you don't know about it, read into it).

 

Having the smart objects means you can get the CSS position and size of all assets very easily. Having all different banner sizes in one file makes it easy to work in several sizes in one go. Anything that can be an SVG will be an SVG in my banners. Only photos will not be converted to vector.

 

Then, it is just a matter of how you set your folders up, either you copy the assets generated by Photshop or not.

 

Coding-wise, it will be down to how you work. Personally, I hand code it all. Like leedium here, I am building my own tools to automate a bunch of repetive tasks. Mine is using Gulp. Feel free to have a look, use, fork, comment. Just don't expect I will be fixing stuff to suit your needs. Do bear in mind it is a work in progess, not ready for production pipeline yet.

 

I split the images, CSS and JS that is shared by all banners in a shared folder, together with the index.html (you really should only need one html if the banners are meant to be the same), all personalised image, CSS or JS goes into the individual banner folder.

 

I'm keeping it ad-platform agnostic for now because I end up working with different ones all the time. It is not practical for me to have it baked in just yet.

  • Like 2

Share this post


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

  • Recently Browsing   0 members

    No registered users viewing this page.