Tjyylli

I am making a companion banner ad for Youtube. The dimensions are 300x60. When I design on a 300x60 art board and save a a PNG or jpeg it saves with larger dimensions and then won't upload. If i want it to be able to upload the quality is too low and it is blurry.

I need the dimensions to be 300x60, and if I resize it in another program it lowers the quality and makes it blurry.

Please help me make a crisp 300x60 image that exports less than 150 KB and is 300x60 in dimension.

Thank you!

Hit Ctrl+Alt+P and make sure your document 'Units' setting is set to 'Pixels'. You may have accidentally started this document in 'Millimeters', in which case yes, this can be a reason for the problem.

If you are indeed working in 'Pixels', double check your artboard size is actually 300 by 60 pixels via Shift+O.

If everything checks out, then to properly save a PNG go to 'File → Save for Web', then make sure the 'Percent' value is '100%'.

It is not clear what you are doing that makes the final dimension too large. But guess is that you are not using Save For Web. Do not just Save as PNG. Use the Save for Web (may be under File > Export > Save for Web in newer AI) when needing a JPG, PNG, or GIF.

Under the Save for Web tool, you can control the precise final size in pixels even if the AI Artboard is not accurate.

BONUS – Photoshop has the same feature.

I am not giving up on you, @Lauren ;)

I took your banner and Save for Web (as 300x60). As you can see, it is just 26.7K (not too large). And at 100% size – it is as sharp as can be using that font.

Would you consider this "blurry"? Your Save for Web still produces a large file? Have you ever been able to save a 300x60 pixel banner that you would consider sharp? If so, can you share it with us?

I've never used Illustrator, so I can't explain how to do this in that software. However, there are a few things to consider with this kind of issue:

• If some objects don't have integer pixel values for their positions or sizes, they can look blurry. I usually go through each object individually and manually set the values so that everything looks right, since automatic tools to fix this problem often mess things up and / or only change the position. However, Adobe Illustrator 2017+ claims to have a new tool for this, which might be better than the tools that usually exist in vector graphics packages.


• Check if font hinting (tweaking the pixels in the font to make it look sharper at this size; I think this is done by the font designers, though I'm not certain) is enabled. If not, that might help the issue.


• Check your anti-aliasing settings. How you do this in Illustrator seems to vary, but this forum post suggests that "text optimised", "crisp" or "sharp" might be best – these are probably not all in the same menu, though. Try each and see which is better.
  
  
  
  
  • "text optimised" sounds like it might be in the export menu, and "crisp" or "sharp" seem like they're in a dedicated anti-aliasing menu.
  
  
  
  


• For the image, try to scale it down from the very most original image to the resolution used in the advert using an external program – Photoshop or GIMP – with the settings that make 100% give the best-looking output. Then replace the image in the advert with that one, and make sure that that isn't being scaled further by Illustrator.
  
  
  
  
  • Actually, do this with your background image too… although having that slightly blurry might not be the worst thing, considering it's a background element.
  
  
  
  

This isn't directly an answer, but looking at the screenshots, it seems to my untrained eye like this might have a lot more to do with the screen scaling on the computer any problem with the size itself - take a look at your screen DPI settings. It it's not set to any multiple of 100% (i.e. 100%/200% etc) then you will see a lot of fixed size images appear to be blurry. 150% is quite a common setting, and it will cause your 300x60 pixel banner to be scaled by the OS to an effective 450x90 size, which will make it appear blurry. If you are seeing the same blurriness on files you haven't created, then it's worth checking.

Apologies if this isn't the case, but it's something that has bitten me before. This link has instructions on checking/changing the DPI setting: https://www.eizoglobal.com/support/compatibility/dpi_scaling_settings_mac_os_x/index.html