• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Creating High Quality web banners

New Here ,
Jul 26, 2019 Jul 26, 2019

Copy link to clipboard

Copied

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?

Views

4.6K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 26, 2019 Jul 26, 2019

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

...

Likes

Translate

Translate
Community Expert ,
Jul 26, 2019 Jul 26, 2019

Copy link to clipboard

Copied

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

Work in Photoshop or Illustrator.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 26, 2019 Jul 26, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 26, 2019 Jul 26, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 26, 2019 Jul 26, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 26, 2019 Jul 26, 2019

Copy link to clipboard

Copied

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.

Screen Shot.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

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! 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 09, 2022 May 09, 2022

Copy link to clipboard

Copied

LATEST

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:

 

Screen Shot 6.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines