Exporting log to web (pixelated)

Community Beginner ,
Sep 24, 2017

Copy link to clipboard

Copied

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?

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.

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Exporting log to web (pixelated)

Community Beginner ,
Sep 24, 2017

Copy link to clipboard

Copied

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?

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.

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2017 0
Most Valuable Participant ,
Sep 24, 2017

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2017 2
Community Beginner ,
Sep 27, 2017

Copy link to clipboard

Copied

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

Screen Shot 2017-09-27 at 7.14.30 pm.png

This is what happens when i export it

Screen Shot 2017-09-27 at 7.17.48 pm.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Adobe Community Professional ,
Sep 27, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 1
Community Beginner ,
Sep 27, 2017

Copy link to clipboard

Copied

Im using the most recent one (cc 2017).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Adobe Community Professional ,
Sep 27, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 1
Community Beginner ,
Sep 27, 2017

Copy link to clipboard

Copied

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:)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Adobe Community Professional ,
Sep 27, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 1
Community Beginner ,
Sep 27, 2017

Copy link to clipboard

Copied

Looks really pixelated lol:(

Screen Shot 2017-09-27 at 11.39.30 pm.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Adobe Community Professional ,
Sep 27, 2017

Copy link to clipboard

Copied

Did you by accident zoom in a little too much?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Engaged ,
Sep 27, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Community Beginner ,
Sep 27, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Community Beginner ,
Sep 27, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 1
Adobe Community Professional ,
Sep 27, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 2
Community Beginner ,
Sep 27, 2017

Copy link to clipboard

Copied

Is there anyway i can fix it to look better?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Adobe Community Professional ,
Sep 27, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Engaged ,
Sep 27, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 1
Adobe Community Professional ,
Sep 27, 2017

Copy link to clipboard

Copied

  schrieb

Is there anyway i can fix it to look better?

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
Guide ,
Sep 26, 2017

Copy link to clipboard

Copied

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
    export-screen1.png
  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
    export-screen2.png
  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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 26, 2017 2
Community Beginner ,
Sep 27, 2017

Copy link to clipboard

Copied

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. Screen Shot 2017-09-27 at 7.14.30 pm.png

This is the original logo.

When I export it  this is what happens.

Screen Shot 2017-09-27 at 7.17.48 pm.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 27, 2017 0
New Here ,
Mar 03, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2020 0
Adobe Community Professional ,
Mar 03, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2020 0
New Here ,
Nov 22, 2020

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2020 0
New Here ,
Nov 22, 2020

Copy link to clipboard

Copied

This didn't work for me unfortunately:(

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 22, 2020 0
Adobe Community Professional ,
Nov 23, 2020

Copy link to clipboard

Copied

Please create  a new thread.

Please post the image you are talking about.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 23, 2020 0
Resources