Creating High Quality web banners

[Georges Easyfairs]

Hi,

In short: what is the best and easiest way to create multiple sized, high resolution static web banners.

The long version:

I'm quite new to creating (AdWords-compatible) static banners for the web. I've been looking for the right answer but haven't found a really satisfying answer yet, not even in some threads in this discussion area. My exported banners are quite crappy in quality, compared to what I see on the web.

Since we have a lot of different sizes, the easiest way to set them up is InDesign. Problem with that is, especially with the smaller banner sizes, the quality is very bad when exporting them as .png or .jpeg. Unreadable text, you name it.

I'm not really looking forward to creating 10 different Photoshop files / 10 different artboards in Illustrator. Especially when my banner consists of a stockphoto. Illustrator does not like big size images. I can downscale the image, yes, but still. Basically, InDesign would be the ideal program for multiple creating static banners at the same time.

Who's got the magic touch? Even when it's not possible in CC?

[Steve Werner]

You're definitely in the wrong application. InDesign was NEVER designed to produce web banners.

Work in Photoshop or Illustrator.

[Jongware]

https://forums.adobe.com/people/Georges+Easyfairs  wrote

[…]

Since we have a lot of different sizes, the easiest way to set them up is InDesign. Problem with that is, especially with the smaller banner sizes, the quality is very bad when exporting them as .png or .jpeg. Unreadable text, you name it.

If the lack of a proper export is a show-stopper for you for using InDesign, then don't attempt to repurpose it anyway to your ideas. It is just not designed to design web banners (either in "high quality" or, as you noticed, the other kind). Best practice is to use all software only for what it is meant to do.

So, look to Illustrator or Photoshop. And since your output is going to be a bitmap type, I'd recommend the latter -- a bonus is that your huge stock photo's should not be a problem there either.

[davidc69929907]

You'll want to use Photoshop for this most likely, and you can use Artboards to create multiple file sizes in a single document.

[rob day · Accepted solution]

I'm quite new to creating (AdWords-compatible) static banners for the web. I've been looking for the right answer but haven't found a really satisfying answer yet, not even in some threads in this discussion area. My exported banners are quite crappy in quality, compared to what I see on the web.

If by static you mean you simply want the output to be a JPEG or PNG image at a specific pixel dimension, and don’t need HTML code, InDesign is perfectly capable of doing that. All you have to do is set your ruler units to pixels, make a page at the banner's pixel dimensions, and export to JPEG or PNG at 72ppi. So a page with a pixel dimension of 1200px x 400px, exported at 72ppi will create an image file with those same dimensions.

If the different size requirements have the same aspect ratio, then it would be simple enough to build a Photoshop action that down sizes the pixel dimensions as needed, or the export to different pixel dimensions could be scripted out of ID. If you need different aspect ratios, you could setup alternate layout pages with the required pixel dimensions.

[rob day]

When it comes to type I‘ve never seen any discernible difference between Photoshop type and ID type exported to an image format—setting type in Photoshop is relatively torturous. I have seen cases where images don't export perfectly, but it is subtle. If the banner is a mix of text and image, the alternative is to export as PDF/X-4 and open in PS at 72ppi to get a matching pixel dimension.

Here top is an exported JPEG from InDesign at 1200x400 pixels, bottom is Photoshop set type, both at the same dimensions, and at the 100% 1:1 view.

[Catharine5D95]

Thank you! After reading all the snippy remarks about only being able to design web banners in Photoshop or Illustrator, I was almost resigned to having to recreate everything in one of those. Fortunately, this method works a treat, and my text looks like I need it to! 

[rob day]

Hi @Catharine5D95 , there can be subtle quality problems with InDesign JPEG exports if there are linked images included. You can try this script which exports the JPEG via a PDF where there are no quality issues:

https://shared-assets.adobe.com/link/ca875a61-546a-416e-6475-ab3f3c29c717

Dialog looks like this:

[lawork]

Hi @rob day and @Catharine5D95, the link on this post if broken, hoping I can get a hold of that script or the best practice steps/settings involved. I'm in the same boat with repeated projects creating multiple web banner sizes. It's so much more efficient to use Indesign where possible.

[rob day]

https://shared-assets.adobe.com/link/e62626e4-9f44-45a3-6da0-0a1b51e8ecbf

For banner ads just set the Fixed Pixel Width to the desired horizontal width—the Resolution setting doesn’t matter.

[Flashworks]

Hello there,
The link is still not working, can someone post the correct link?
I think this script could be a great solution to my problems

[rob day]

Adobe supposedly was going to discontinue their file syncing service in February, but currently it is still working  my Creative Cloud Files are still there. Try this:

https://shared-assets.adobe.com/link/f0f122b9-4d2d-4dc9-76a7-2cca55143c35

[Flashworks]

Thank you Rob, this link works!
I am very curious if these scripts are the solution for me..