Participating Frequently

Answered

What is the best way to export a logo for web?

Forum|Forum|6 years ago
June 27, 2019
4 replies
20563 views

Hi,

I have a logo I created in AI with a clipping mask. When exporting as a png to preserve transparency, I noticed that the edges appeared blurry, even at 100%. As if there was no anti-aliasing. Section of logo for reference below:

Process was:

File > Export As > 300 ppi (Art Optimized) transparent background

Additional information and methods I tried:

1. if I go to view > pixel preview, the preview is very blurry.

2. if I export as svg, the color versions with a gradient and clipping mask are distorted (logo isn't even the same shape).

3. file > export for screens produced the same result as the png export

4. file > export > save for web (PNG-24, art optimized) produced an even blurrier result

After looking around the forum I discovered that the slightly blurry edges might be normal and it may be the size that I have to adjust. However, the logo needs to be used across a variety of web applications and sizes. It seems incredibly cumbersome to export the exact size for every single application...Still, the logo appears blurry online - could this be due to being compressed on the website?

Any tips and best practices would be helpful. I would just like to know if I'm on the right track or missing something completely.

Thanks!

This topic has been closed for replies.

Correct answer mglush

Hi!

I have a question for you--are you viewing your png at actual size or are you zooming in to look at it?

I used the Save for Web function under Export and exported as a png-24 (see below). At the size I created it, it is sharp, but if you zoom in to see it it does have a blurry edge. Remember, when you save for the web you are moving from a tack sharp line to pixels, so sharp is a relative term!

Using the Save for Web option, you either have to create your art at size, or make it large enough for the largest size you will use it, and then you can shrink it for everything smaller. You should never scale it up, because then you will have a problem with blurriness.

Michelle

Abambo

Community Expert

It's been a while and the question is answered so only one bit of information:

shieldsarts wrote
When exporting as a png to preserve transparency, I noticed that the edges appeared blurry, even at 100%. As if there was no anti-aliasing.

Antialiasing makes the edges more or less blurry. The optical effect is that the lines seam to be sharper... For getting the same effect without AA, you would need an enormous resolution.

ABAMBO | Hard- and Software Engineer | Photographer

Nancy OShea

Community Expert

Abambo wrote
...you would need an enormous resolution.

And excessive bandwidth. By comparison, SVG carries very little bandwidth.

Nancy O'Shea— Product User & Community Expert

Abambo

Community Expert

https://forums.adobe.com/people/Nancy+OShea wrote
wrote
...you would need an enormous resolution.
And excessive bandwidth. By comparison, SVG carries very little bandwidth.

...and they scale quite good regardless of the screens resolution.

ABAMBO | Hard- and Software Engineer | Photographer

Nancy OShea

Community Expert

The best way is to export as SVG. Scalable Vector Graphics have a smaller file size, better image quality and can be re-scaled to any size (up or down) while preserving crisp details. You cannot do that with raster images JPG or PNG without sacrificing quality.

SVG is an XML based code that can be enhanced in any code editor like Dreamweaver or Brackets to add text, links and even CSS animations. SVG is supported by all modern browsers and is perfect for icons, logos, info graphics and responsive image maps.

SVG: Scalable Vector Graphics | MDN

Nancy O'Shea— Product User & Community Expert

L

Lisa23931531txcq

Known Participant

Hi Nancy, the SVG looks great to me when I do it in terms of quality. That said, it seems to add two small 'flicks' onto the end of my logo. How can I ensure it exports as it should eg. as it looks in ai?

Monika Gause

Community Expert

Input a higher Decimal.

And please show a screenshot of the "flicks". Just so everyone is one the same page of what you mean.

mglush

Correct answer

Community Expert

Hi!

I have a question for you--are you viewing your png at actual size or are you zooming in to look at it?

I used the Save for Web function under Export and exported as a png-24 (see below). At the size I created it, it is sharp, but if you zoom in to see it it does have a blurry edge. Remember, when you save for the web you are moving from a tack sharp line to pixels, so sharp is a relative term!

Using the Save for Web option, you either have to create your art at size, or make it large enough for the largest size you will use it, and then you can shrink it for everything smaller. You should never scale it up, because then you will have a problem with blurriness.

Michelle

B

benucreativeAuthor

Participating Frequently

Hi Michelle,

That's helpful thanks. The unfortunate thing is that it is blurry even at the exact size. The logo itself is 2100 x 2500 so it's definitely not getting scaled up. Yours looks sharp (my image is a snip which is partially why it's so blurry, but even so, the logo is still blurry). The problem is that it's blurry everywhere!

mglush

Community Expert

I was just wondering -- did you use the Save for Web Legacy option under Export? What were your settings?

Scott Falkner

Community Expert

PPI is irrelevant. What maters is the size in pixels. Illustrator has a unit it called pixels, but those aren’t pixels. Pixels have no size. If I tell Illustrator to make something 500 pixels tall then export it at 300 ppi it will not be 500 pixels tall. Illustrator’s pixels are actually points, or 1/72 inch. If I export at 72 ppi it will be 500 pixels tall but at 300 ppi it will be 2083 pixels tall because Illustrator will render my 500 point graphic at 300 pixels per inch.

So ideally you would prepare the artwork at actual size for 72 ppi rasterizing. This means if you want a 500 pixel image make it 500 pixels or 500 points and export at 72ppi. Using Save for Web or Export for screens save your artwork at 100% using 72 ppi.

B

benucreativeAuthor

Participating Frequently

Yes I noticed that, knowing they're 1/72 of an inch is helpful. Thanks! It seems like you'd be exporting forever though if you had to export at the exact dimensions for every.single.application it would be used for...or is it like what Michelle said and you export it at the largest size and scale it down? And sometimes the exact dimensions aren't readily found...so then is it just trial and error? Doesn't seem very efficient...

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