Distortions in circle logo when small

[kgbf]

Hey there! I designed a logo a while back, and part of the design includes two circle outlines. They look fine most of the time, but I've noticed recently that when used in small images (i.e. in a web ad), the outside edge looks a bit jaggy and pixelated. Is there anything I can do to remedy this now? I've searched it online a bit but only grown confused...I've seen comments from people with similar issues with advice to "smooth the rasterization over in Photoshop", but I have no idea what that means...does that apply to my situation? What would be the specific steps to take in PS to get rid of the distortion? And why is it happening in the first place? Thanks so much...beginner designer/nonprofit employee who wears a lot of hats here. 

[Jacob Bugge]

kgbf,

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.

And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork.

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, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers).

Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/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.

[kgbf]

Thank you...but what would you recommend for exporting something like a logo, which will be resized for different projects by different people? An example of what I'm talking about re: circle distortion can be found in the link below in the litter campaign billboard preview (the logo on the bottom right with the two circles surrounding the Georgia state outline).

https://www.keepforsythcountybeautiful.org/litter-campaign

I'm having a similar issue with a Christmas tree logo designed with triangles. The edges look so jagged, and when I export it from Illustrator, it often looks blurry, even though the original file is AI/vector.

[Jacob Bugge]

kgbf.

When I look at that logo on that website (1920x1200 (EIZO) monitor), I see what I expect to see given the actual pixels; there is a limit to a limited size.

I believe the best things you can do are to:

Use the relevant optimization, in this case the Art Optimization (In either case, use the relevant optimization).

Create a PNG for each case, or work in powers of 2 for different sizes based on the small one and use the largest size for all (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). The latter may be especially useful when adapting to different resolutions, see right below.

Judge each exactly as used (appearance at the actual pixels) on different representative screens, in other words as visitors will see it, rather than zooming in; you can use a magnifier if you are unsure.

Keep the level of detail low enough to be suitable at the actual (smallest) size; the encircled Georgia in your link is suitable, as is the rest.

[kgbf]

Thank you! And I've actually noticed that the logo looks fine when viewed on a MacBook Pro or iPhone as compared to viewing it from my work laptop (a Lenovo with lesser color + resolution capabilities). Do you think I still need to adjust the image? (I always get confused in this area too, because I find that 72 ppi looks best on some screens whereas 300ppi looks best on others...) Or is that just the way it will be?

[Jacob Bugge · Accepted solution]

You are welcome, kgbf.

Considering the use for screens such as those on smartphones with much higher resolution, I believe a suitable power of 2, maybe 4 or 8, might be optimal, if the size on lower resolution screens is fixed (rather than increased to the actual pixel x pixel size.

Screens with higher resolution tend to be more forgiving because of the small pixel sizes.