adobe xd cc 1.0 export png in low resolution, macbook

[xintang]

After finishing my work in adobe xd(artboard iphone 6/7),

I chose export -> Format: PNG -> Export for: Design -> Export All Artboards -> I got low resolution pngs with fuzzy lines viewed in my iphone 6;

I chose export -> Format: PNG -> Export for: Web -> Designd at: 1x -> Export All Artboards -> I got low resolution pngs with fuzzy lines viewed in my iphone 6;

I chose export -> Format: PNG -> Export for: Web -> Designd at: 2x -> Export All Artboards -> I got low resolution pngs with fuzzy lines viewed in my iphone 6;

I chose export -> Format: PNG -> Export for: iOS -> Designd at: 1x -> Export All Artboards -> I got low resolution pngs with fuzzy lines viewed in my iphone 6;

I chose export -> Format: PNG -> Export for: iOS -> Designd at: 2x -> Export All Artboards -> I got low resolution pngs with fuzzy lines viewed in my iphone 6;

I chose export -> Format: PNG -> Export for: iOS -> Designd at: 3x -> Export All Artboards -> I got low resolution pngs with fuzzy lines viewed in my iphone 6;

how can I get png with original/high resolution?

[Colin Holgate]

Were you using the iPhone 6 template? If you were you would select designed at 1x, but you would then view the 2x version on your iPhone 6. 1x is for non-Retina, 2x for Retina, 3x for iPhone 6 Plus. At least I think that's how the naming scheme works.

Also, snap to pixel is due to be in the next update, which should help make things look crisper:

Round to Pixel command – Adobe XD Feedback : Feature Requests & Bugs

[xintang]

Whatever the export version is, none of them is clear enough to use. Now I think I have to do the whole work all over again.

Really bad experience.

[Colin Holgate]

What size did you design at? Could you share an XD file (you can do that via Adobe's assets page) for me to try, just to make sure that I also see poor quality?

[xintang]

[xintang]

there're 2 pngs created with the same artboard size: iphone 6/7, 375*667

the upper one is exported from AI, which is very clear in every detail viewed from iphone whatever iphone 6/7/6s/6s plus;

the lower one is exported from XD, you may try to view it in your own device. all the lines and characters are fuzzy.

I created this image in simple steps, you may duplicate my steps: open XD, new iphone 6/7 artboard, draw some lines and tool bars, type some word, then export, and got the lower result.

I copyed the exact elements(lines/tool bars/characters) from XD and pasted in AI, and then export them in AI. I got the upper result.

[Colin Holgate]

Your example showed up some Illustrator issues. BTW, all of my images below are zoomed in a lot to see what the pixels are doing.

First, your Illustrator file isn't good enough. Here's a close up of your image:

Those half pixel positions are likely to scale to something less than ideal. In Illustrator CC 2018 there is a make pixel perfect option, which I tried, but it doesn't work correctly. I'll report that. Here's what Illustrator gave me:

That issue can be worked around by asking Illustrator to put the lines at a .5 pixel position, to get this:

At a glance, that looks ok, but there is another problem, where the top and left of each line is using rich black, the the bottom and right are using normal black. I'll report that too!

Let's say that I now have an Illustrator file that is tolerable, and I try it in XD, design at 1x and export and look at 2x, here's how the PNG looks (again, zoomed in to see the pixels):

Even as it shows here, it seems ok, but if you zoom in your will see some softness. That only appears in the forum, not in the file I used. Here are links to the actual ones, which you will need to copy and view in something at 100%, a browser window adds some softness. Or make sure you're viewing at 100% in the browser:

http://colin.scienceninja.com/grid.png

http://colin.scienceninja.com/grid@2x.png​

http://colin.scienceninja.com/grid@3x.png  

I'll go and write some messages to the Illustrator team now!

[Colin Holgate]

Your edit of your message changed the topic slightly. I'll do more tests with just XD lines.

[Colin Holgate]

Ok, that didn't take long. It seems that XD is doing the same mistake that Illustrator does, and is placing 2 pixel width lines at a .5 pixel position, because that was correct for when you drew a 1 pixel line.

The problem to fix is how to tell XD to draw lines on pixel boundaries. For now you can change the x and y values, and get this:

[xintang]

thanks for your illustration!

The lines are drawn in 0.7px.

What does it mean "For now you can change the x and y values"? Do you mean that I need to draw the lines with x's and y's values in Integer?

Is it a bug? When can it be fixed? My project's due in a month, I really don't want to spend time on the work done over again

[elainecc]

Your lines are going to need to design at full pixel in order to not look fuzzy. What's happening is that we display hairlines better in XD than you can see on your device. If you're designing at any fractional pixel, you're always going to get fuzzy results on canvas.

[Colin Holgate]

Even with 1 pixel lines you get the issue. Yes, you need to draw a line then change its x and y fields, for every line. That's the thing that needs fixing.

[elainecc]

Actually, by doing that, you knock it off pixel snapping. Note that we adjust x,y to fractional to account for the fact that it's center-stroked.

-Elaine

[Colin Holgate]

I understand, so the problem could be solved by making the lines be top left stroke, if such a thing exists.

[elainecc]

Kind of? Think about it this way - you can either align the stroke to one side or the other and then make sure  the x, y is on a whole number, or you can leave it center stroked and make sure the x, y is on a fractional number. Visually, it's the same thing, which is why you don't see a visual jump when you convert to path from a basic shape (rectangle, ellipse, or use a boolean group).

-Elaine

[Colin Holgate]

I was trying to get to the point where the exported pngs looked ok, and putting then so that the line is against a pixel does that. Having them centered on a pixel causes the antialiasing to appear.

xintang's images now look good, after putting the lines onto exact pixels. I tried a USB test onto my iPhone 6s with lines that are good, and they have the issue. But, if I send the image to my iPhone 6s it looks fine.

Is it possible, and therefore the last remaining problem, that preview over USB is only using @1x images? If it is that would explain everything. Do shared prototypes also only use the "designed at" version of the images? In other words, the 1x, 2x, 3x images only exist when sharing assets, and are not used as alternates when viewing prototype?

[xintang]

I adjusted the x and y value to integer, it turns out to be aligned but still blur, not sharp and clear lines viewed in iphone.

I also adjust all the lines in 1px with x/y value in full pixel, and got a darker blur version:

Hope you guys could fix this problem soon

PS: the lines' color is black #000000, but turns out to be dark grey in exported pngs

[elainecc]

You might want to see if anything in this article helps you: https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703

-Elaine

[xintang]

I've browsed this article before I came here for help. You wrote lots of your ideas or theories. But just tell me the steps 123 on how to get pngs with high resolution.

[budovski227]

I have the exact same issue, it's got to be a bug in the 2018 version of XD, or at least applicable when using a file from CC 2017 and re-saving. Had no issues on CC 2017.

[nadiak62983310]

Have the same issue on win 10. Unacceptable quality of all exports except for pdf... Are they at least working on solving this issue?

[elainecc · Accepted solution]

How have you been exporting? It sounds like you might be exporting at the wrong sizes. This article might help you: https://medium.com/thinking-design/protip-exporting-assets-in-adobe-xd-c586996de703

-Elaine