Problem with pixels on photoshop

[edouardj20495932]

Hi,

I create infographics on photoshop for web but when i export to png i always have some image that are pixelated, not clean and sharp.

For the info i creat my infographics in 72 ppi resolution, i tried in 300 ppi but trhat didn't change anything.

I have the same problem on illustrator.

Do you have a solution ??

Thanks.

PS: sorry for my english ^^

[mglush]

Hi!

I think this article about the Pixel Grid might be helpful to you: Seamlessly align your artwork with the pixel grid...

Let us know if that helps!

Michelle

[edouardj20495932]

Hi,

It said that it was already alined with de pixel grid. I tried another export but it seems that nothing change. And that is only for illustrator but i'm working a lot with photoshop.

Thanks for the answer by the way

[D Fosse]

First of all, you need to completely disregard the ppi number. It is irrelevant on screen/web and does not apply. Pixels per inch only applies to printing on paper.

It sounds like you have a retina/UHD/4K/high-density display. In that case, most image viewers and web browsers will automatically scale the image up to 200%, so that it displays at the same screen size as on a traditional display. This is the standard industry workaround for making it work with both high density and traditional displays.

This is a clean pixel doubling, so that four screen pixels are merged into a block to represent one image pixel. In other words, the high-resolution display is turned into a low resolution one. So yes, there is pixelation.

[edouardj20495932]

Hi D Fosse,

I'm working on 2 display : on my laptop who is a HD 1920*1080 and a normale dissplay also HD 1920*1080.

How can i make the image not automaticlly scal to 200% and make it take one pixel and not 4 ? Is there a way ? because it's very cool to have all those infographics not clean.

But it's really stange because in case of illustrator, when i create them, they are all clean and everything is sharp but after exporting it is all with pixelation.

Thanks.

[Kenneth Kawamoto]

You can export your artwork from Illustrator to SVG, which is a vector format so that it stays sharp even when resized.

[D Fosse]

OK, in that case disregard what I said about upscaling. That only happens when an application detects a high density display, which you don't have.

If this is created as vector art in Illustrator, that's a completely different animal. Vector art isn't made of pixels. It's just a mathematical formula, and no matter how much you enlarge it on screen, it's rendered at full screen resolution and is perfectly sharp.

Photoshop doesn't work that way. It's a pixel editor. Anything you feed into Photoshop will come out as pixels, and there's only so many of them. If you don't have enough to spread the image across, the pixels get in the way and you see them.

Then it's just the basic precaution: Always view at 100% to compare, and to make critical judgements about sharpness. In Photoshop, 100% has nothing to do with size. What it means is that one image pixel is represented by exactly one screen pixel. This is the most accurate view possible for a raster image made of pixels.

[edouardj20495932]

Hi,

I understand that but how can i get, in illustrator case, an export as it shown in vector ? do i need to export it in SVG like said kennethkawamoto2 ? But i think the website will not alow svg type of image.

And in case of photoshop maybe i need to create my infographics very big and after resize it directly on the website ?

Thanks.

[Kenneth Kawamoto]

But i think the website will not alow svg type of image

SVG is a common format and universally supported - unless you are talking about uploading it to an automated system or something?

[edouardj20495932]

And i always saw it in 100% to see the "real result"