Smoothing and scaling logo

Question

Hi Guys,

I am trying to create a simple logo in Illustrator, and I am facing two problems.

I just can't understand how to correct this logo so there won't be any visible pixels. For example I tried "smooth" tool I think, but it didn't help.

This is like my first adventure with vectors graphics and I thought that it would be much easier to scale things and create simple objects. Other obstacle that appeared is exporting the file to JPG. From what I have read it mostly depends on the PPIs, buuut there is another question coming... what PPI should I set to get a good quality and a final image in 180x180 px (for example)?

I did a lot of research to find a solution for my "problems" but non of it worked for me. I hope that someone would be able to support me here!

Jacob Bugge · Accepted Answer

Tomasz,

"I can't even set this to 180x180 becaus of its proportions."

If the logo is not square, you will just have to set the largest of width/height to 180 px (including outer bounds to avoid snipping off parts) and then have the missing parts transparent (by ticking Transparency).

But given the FB notoriety mentioned already, forget about judging the quality by the carefully optimized destruction of appearance there.

Judge it in a non destructive viewing application or on a website that abstains from meddling with the uploads.

Jacob Bugge · Answer

Tomasz,

The bit shown presents no issue in terms of smoothness of the original vector artwork itself, so maybe a more troublesom part, if any, may be needed for suggestions.

Concerning highest possible degree of PNG smoothness (Facebook and some other social media sites are notorious for destroying carefully optimized appearance):

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 second best at sizes that are powers of 2 times as large).

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded