Exporting log to web (pixelated)

[marwak93040986]

Im a newbie to illustrator.

I made a logo on illustrator and exported it to web as i wanted to use it for my website. I tried exporting it as a png, svg and jpeg file but with all versions, it was pixelated when i put it on my site. On illustrator, i did my logo on the custom 146.06 x 50 px, however when exporting it to my website changed the dimensions to 150*40 px.

Is that why it would haver become pixelated? Does anyone know what I can do to fix this issue?

[Jacob Bugge]

maewak,

For web and similar (screen) uses, you should always create the artwork to fit within whole pixels, both in size and in placement: you should use an Artboard contained within whole pixel values (X and Y), and the artwork should fit into that.

Also, you should make sure that the final raster image has exactly the (whole) pixel x pixel size to be used. You may make sure of that by using Save for Web which is now hidden away in:

File>Export>Save for Web (Legacy)

On illustrator, i did my logo on the custom 146.06 x 50 px

What is the hidden meaning of this?

[marwak93040986]

Thanks so much for replying.

I realised it didn't fit the pixel grid and tried using the pen tool to fix it however didnt succeed:P

Do you know whats and easy fix without me having to repeat from scratch?

this is my current logo

This is what happens when i export it

[Monika Gause]

Which version on which system?

You are exporting a pixel format, so there will be pixels when you enlarge it.

But what you posted looks like some old Illustrator version on a Retina enabled system.

[marwak93040986]

Im using the most recent one (cc 2017).

[Monika Gause]

But still: when you zoom into a pixel image, you need to expect to see pixels.

Which application did you use to view the exported image?

It doesn't matter which it is, there will still be pixels, but maybe a different one won't make the pixels blurred.

Please learn about the difference between raster and vector files.

[marwak93040986]

I know, I dont know why i cant see the pixels.

I used illustrator. I saved it as a png file, also tried svg.

Thanks. I'll get onto that:)

[Ton Frederiks]

How does it look in Illustrator when you choose View > Pixel Preview?

[marwak93040986]

Looks really pixelated lol:(

[Ton Frederiks]

Did you by accident zoom in a little too much?

[marwak93040986]

you mean when making the logo or the screenshot i sent?

[Ton Frederiks]

you mean when making the logo or the screenshot i sent?

The screenshot. Zoom in Illustrator to 100% and look at the Pixel Preview. That's what you get when you export it at the default of 72 ppi.

[Dynamic Office]

What DPI / PPI  did you set it to? meaning when you created the file what resolution value does it have?

PPI = Pixels per inch I think it defaults at 72.

[marwak93040986]

I first started with the defaults (72), however for the site i uploaded the logo to, the dimesnions were 150-40px, so I changed it and the outcomes was a pixelated logo.

[Monika Gause]

marwak93040986  schrieb

the dimesnions were 150-40px, so I changed it and the outcomes was a pixelated logo.

150 pixels is not that much.

So you get what you have to expect.

[marwak93040986]

Is there anyway i can fix it to look better?

[Dynamic Office · Accepted solution]

I don't think you're understanding what people are saying here.

Look at this image

That image is created at 150px x 40px, which looks great at the desired resolution.

Now look at this;

Same image, except I’ve blown it up to 600 x 200 and as you can see it’s very pixelated as you’d shown in your example.

Now see this;

I’d create a new document in illustrator, except my artboard is 600px x 200px, as you can see from my end result, a much clearer finish as it’s presented in the desired resolution.

[Monika Gause]

  schrieb

Is there anyway i can fix it to look better?

No. Not as a raster image at this pixel dimension.

[Cari Jansen]

If the logo is purely vector (using drawing tools in Illustrator, not including imported pixel based images for example), then you should be able to export the logo for Web at any size without seeing too much rasterisation, however if you make the logo larger within the web-site design you might end up seeing pixelisation. E.g. if you zoom in on the logo you've exported on screen you'll definitely see pixels.

If you want to retain transparency - and I normally suggest this for logo export - :

• Use PNG as export format.

Here are some steps to use:

1. Choose File > Export for Screens
   
2. In the Export for Screens dialog box,
   1. select Width (or Height) from the Scale dropdown menu.  This allows you to set the size option for exported PNG
   2. Enter a suffix (this is appended to the dartboard name you are exporting (it helps to make the artboard the same size as the artwork).
   3. From the Format menu select PNG.
3. STILL in the same dialog box, click the Gear icon next to Android to open the Format Settings dialog box
   
4. Select the file format on the left, e.g. PNG, and set the Options for that file format.  (choose PNG, not PNG 8, as PNG supports different levels of transparency and creates nice edging round the logo, PNG is a bit like taking a pair of scissors to the edge of your logo).
5. Click Save Settings
6. Back in the Export for Screens dialog box, you can continue enter multiple export size settings.  Click on Export Artboard when you've set-up all your exports.

Let us know if this works for you and if you're happier with the result.  Else pls upload some screenshots of what you are doing and seeing so we can help you better.

[marwak93040986]

Thanks so much forb replying. I followed the prompts you sent however it still remained pixelated.

the lkogo is purepkly vector however it doesnt fit the pixel grid and I reallly dont know how to fix it.

This is what ius happening to the logo once I export it.

This is the original logo.

When I export it  this is what happens.

[marthas57249554]

Had the exact same problem. Save for web preview was pixelated no matter what. I was able to export as a JPG, pixelation gone.

The "real" fix was simple: copy all artwork, create new document, paste. The problem was GONE.

I think this may have happened in my case because I got a file from AdobeStock where the artboard was in mm vs inches. I guess that there is some glitch/setting that was not changed from this unit of measure to the one I am using.

[Monika Gause]

If you want to change the unit of a file, you just have to right-click the ruler and select whatever unit you want.

[Mojo Burns]

This didn't work for me unfortunately:(

[Mojo Burns]

Did you ever get a resolution to this. I have the same problem where out of the blue my save for web pixelates all images. Never had a problem with it before and have used illustrator for over a decade so am well versed in image sizing and this has nothing to do with this. Am sure it is a setting somewhere but can't locate, did you have any luck?

[Monika Gause]

Please create  a new thread.

Please post the image you are talking about.