Highlighted

Why is my file exporting pixelated?

New Here ,
Apr 06, 2020

Copy link to clipboard

Copied

I'm new to Illustrator, and I've learnt what I know so far from an online course, so I'm still pretty new to all the terminology!

 

My problem is, I can't seem to export my drawing without pixelating it. The drawing is for a website.

 

This is the file in illustrator. I drew it with the pencil tool. Notice the colours now as well.

Screenshot of File in I.png

Close up, there are no issues in Illustrator.

Screenshot close up in I.pngThis is the exported version close up. 

Close up Pixels.png

And also the colour is different, it's brighter. 

Artboard 1-100.jpg

Any help would be greatly appreciated!

Thank you in advance.

Most Valuable Participant
Correct answer by Jacob_Bugge | Most Valuable Participant

er,

 

Guess what happens when someone cuts down on the file sizes of uploaded content (it may also explain the strange (dis)coloration).

 

Can you see any pixel x pixel size (and other) requirements (I am afraid such sites say less than they know)?

 

What happens to the pixelation and discolours if you look at the exported image in a photo viewer at the intended size on your own computer?

 

And what if you let Illy (job description Adobe Illustrator) show it to you with the preference the preference Display Print Size at 100% zoom unticked?

 

 

Topics

Import and export

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

Why is my file exporting pixelated?

New Here ,
Apr 06, 2020

Copy link to clipboard

Copied

I'm new to Illustrator, and I've learnt what I know so far from an online course, so I'm still pretty new to all the terminology!

 

My problem is, I can't seem to export my drawing without pixelating it. The drawing is for a website.

 

This is the file in illustrator. I drew it with the pencil tool. Notice the colours now as well.

Screenshot of File in I.png

Close up, there are no issues in Illustrator.

Screenshot close up in I.pngThis is the exported version close up. 

Close up Pixels.png

And also the colour is different, it's brighter. 

Artboard 1-100.jpg

Any help would be greatly appreciated!

Thank you in advance.

Most Valuable Participant
Correct answer by Jacob_Bugge | Most Valuable Participant

er,

 

Guess what happens when someone cuts down on the file sizes of uploaded content (it may also explain the strange (dis)coloration).

 

Can you see any pixel x pixel size (and other) requirements (I am afraid such sites say less than they know)?

 

What happens to the pixelation and discolours if you look at the exported image in a photo viewer at the intended size on your own computer?

 

And what if you let Illy (job description Adobe Illustrator) show it to you with the preference the preference Display Print Size at 100% zoom unticked?

 

 

Topics

Import and export

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
Most Valuable Participant ,
Apr 06, 2020

Copy link to clipboard

Copied

er,

 

Concerning colour (brightness), it depends on your (lack of) colour management.

 

Concerning pixelation, 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 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. 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.

 

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...
New Here ,
Apr 06, 2020

Copy link to clipboard

Copied

Thank you for the detailed response. I'll see what I can do 🙂

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...
Most Valuable Participant ,
Apr 06, 2020

Copy link to clipboard

Copied

If I may say so, this looks like a classic error in checking image quality. They are made of pixels so if you zoom in you will see the pixels. Never zoom over 100% when checking for pixelation, or you will always find it. 

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...
New Here ,
Apr 06, 2020

Copy link to clipboard

Copied

Sadly, I noticed it when I loaded it on the website. The pixelation was visible from a distance, too 😞 

 

I'll try some other things. 

 

Thanks everyone!

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...
Most Valuable Participant ,
Apr 06, 2020

Copy link to clipboard

Copied

er,

 

"Sadly, I noticed it when I loaded it on the website."

 

Is it your own website, or some platform? The reason for this is that a number of platforms are notorious for wrecking whichever quality is careful obtained.

 

In any case, the exported close up image just seems to show a close up, so if the pixelation is worse you may simply have an image size that is too small and spread too thinly over the screen.

 

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...
New Here ,
Apr 06, 2020

Copy link to clipboard

Copied

It is, yeah. A Wix website.

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...
Most Valuable Participant ,
Apr 06, 2020

Copy link to clipboard

Copied

er,

 

Guess what happens when someone cuts down on the file sizes of uploaded content (it may also explain the strange (dis)coloration).

 

Can you see any pixel x pixel size (and other) requirements (I am afraid such sites say less than they know)?

 

What happens to the pixelation and discolours if you look at the exported image in a photo viewer at the intended size on your own computer?

 

And what if you let Illy (job description Adobe Illustrator) show it to you with the preference the preference Display Print Size at 100% zoom unticked?

 

 

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...