Exporting Web Banners in Exact Specs Without Losing Resolution

[Guest]

I created web banners (300px X 50px, and 320px X 50px, 728px X 90px) and need to keep it in the exact ratio without losing resolution. Every time I try to export it (as screens) or through Save As Web Legacy, the resoltuion is horrible/blurry. I even tried exporting the artboards at 300DPI in PNG format from Illustrator and then going into Photoshop and changing it back to the exact size/JPEG, but I still get the same result of blurriness, distoration of the logo, etc. The text is most blurry, and I already tried Anti-Aliasing. The images as the background are ok however the logo on it is already at 1000 DPI and when I export it, the logo looks horrible. Please help!!

[Monika Gause]

Those pixel dimensions just just arent very large so you have to expect it to be blurry or pixelated or whatever.

Design it in a way that it works in low resolution: lare text, sans-serif fonts, bold.

[Jacob Bugge · Accepted solution]

Mana,

This may sound unforgivably outdated and boring, sorry.

If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, it is important to have the images in the exact desired final pixel x pixel size, forget about resolution which may actually lead to wrong sizes and hence blurriness. It is easiest and safest to work at the desired size.

A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.

To retain the clean and crisp artwork, a PNG must be created at exactly the pixel x pixel size that it is to be used for, or at sizes that are powers of 2 times as large (2, 4, 8, and so on).

For clean and crisp artwork avoid JPEG.

It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace. Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be white.

Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then either use the Legacity Save for Web (where you can look in the Image Size window for size confirmation) or Export at 72PPI. In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI in the Effect>Document Raster Effect Settings.

If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).

The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.