Jump to content
You must now use your email address to sign in [click for more info] ×

Vector exported as smaller PNG has strange discolouration and artifacts


Recommended Posts

Hi. 

I'm new to Designer, but I don't know if I've found a bug, doing something wrong or something else, so I was wondering if I could get some advice please. 

I have created a vector image of what will be an icon. The original vector is sized at 264x264 px, when I export to PNG I'm keeping the same resolution and allowing the app to resize it down as it needs for the buttons involved. 

The vector has a transparent background, with white rounded rectangles with a dark grey stroke.

Upon export there is weird 'anti-aliasing' or transitioning from the dark edges to a white background, despite being saved as a PNG with a transparent background. i.e. the hard 'stroke' edges are not being respected upon export.

Here are two screenshots, the first of the vector, the second of the PNG after export when viewed with Preview (macOS).

Can someone please advise? I need to maintain the hard edges. I wondered if it was something about sub-pixelation placement of the ends of the rounded rects, but I've turned pixel locking on and all my guides are to the exact pixel, so I don't think it's that. 

 

181399783_Screenshot2019-08-21at10_29_11.thumb.png.48ad998c6c3c0e1f1bb9457008be8650.png

 

 

 

1565901796_Screenshot2019-08-21at10_29_56.thumb.png.fdfb433647d6ea7a103005b514976bb7.png

 

I even altered the stroke width such that it's in pixels not points (as the photos show) which of course changed the 'point' size, but even then, on export, it still didn't fix the issue. 

Considering the bugs in Designer's SVG support, I'm wondering if that's what's at play here too, or is it just user error?

 

 

 

Link to comment
Share on other sites

On 8/21/2019 at 4:38 AM, GreenGirl said:

Upon export there is weird 'anti-aliasing' or transitioning from the dark edges to a white background, despite being saved as a PNG with a transparent background. i.e. the hard 'stroke' edges are not being respected upon export.

That is to be expected because PNG is a raster image format, & there are multiple places in your file where the vector shapes can't be rasterized without anti-aliasing.

You can see this clearly if in Affinity Designer you switch to the Pixel View Mode & zoom in. It is even easier to see if you enable a 'basic' grid set to one pixel spacing. Do that & zoom in to about 1000%, like in this section of the leftmost shape:

1354483275_zoomedin.jpg.70bb2487d99df2b86de5f3e4b7f9792d.jpg

Rounded rectangle shapes will always be anti-aliased at the corners, as will be the rounded ends of lines if you use round caps. The anti-aliasing along their edges occurs because you have set them all to a width of 6.42 px. That much you can fix by setting all their widths to 6 px & for a few of the vertical ones moving them slightly horizontally so their X values are integer pixel values, but that won't help with the rounded caps & rounded corners.

It is possible to remove all anti-aliasing by altering the Blend Mode Coverage Map to this...
1697226654_coveragemap.png.d82368560742647078a62905162de54c.png

... but that will result in stair-stepped edges informally known as "jaggies." You will also have to change to center alignment of the stroke on the rounded rectangles & then readjust them so they are sized & spaced appropriately. 

Do all that & you can get something like this Icon mod.afdesign file, which when exported to PNG should look something like this:

433516156_Iconmod.png.07b38be4740da7d0c9726e4b58325596.png

A bit more jagged than you might want but 100% free of anti-aliasing artifacts.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

  • Staff

Hi GreenGirl,
Welcome to Affinity Forums :)
This is happening because you have set the stroke alignment of the rectangles filled with white to inside. This means the white background of these rectangles is right below the outer edge of the stroke and will affect the antialiasing of the edges (incorporating a little of that white in the antialiasing and contaminating the edges). If you redesign the icons with the stroke's alignment set to centre this will not happen. Aligning to outside may create transparent areas on the inside edge of the stroke - they may be more or less noticeable depending on the colour of the background. The best option is to set the alignment to centre if possible.

As a quick test, set the stroke's alignment of all the white rectangles to Centre and export to PNG. You will see that you get clean/transparent antialiased edges.

Link to comment
Share on other sites

25 minutes ago, MEB said:

If you redesign the icons with the stroke's alignment set to centre or outside this will not happen.

When I tried using outside alignment I still got anti-aliasing, just on the other edge. Only center alignment worked for me to eliminate it on both edges. And I still had to use a stair-stepped coverage map to eliminate the anti-aliasing on the rounded caps of the lines.

Edited by R C-R
fixed typo (again!)

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

  • Staff

I was editing my post above to add a few more details. I don't believe the issue is the antialiasing despite the OP mentioning it. Its the white contaminating the antialiasing that makes it more noticeable/weird. If the OP does find the antialiasing an issue saving the file as an SVG (to keep it as vectors) may be also an option. Changing the coverage map and exporting as a raster format will generate stepped curves which doesn't look that great on small icons specially on contrasting backgrounds. If anything, aligning all elements to the pixel grid will lead to best/sharper results without getting rid of the antialiasing.

Link to comment
Share on other sites

15 minutes ago, MEB said:

If the OP does find the antialiasing an issue saving the file as an SVG (to keep it as vectors) will fix it.

The OP said this was to become an icon so saving it as an svg file may not be an option.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

That's why I said it may not be an option.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Sorry to learn that you think it is nitpicking. I invested considerable time & effort into creating my first reply, including testing everything I could think of before I posted it. But since the OP specifically mentioned exporting to PNG, that is what I focused on.

I was not trying to antagonize anyone. :(

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

  • Staff

Hi R C-R,
Just to get this clear: I do appreciate the help you provide in the forums but the primary cause of the weird corners shown in the Apple preview window in the screenshot - which is what I believe the OP is complaining about most - is the alignment of the stroke (to inside). You didn't identify/point out this on your reply and that's why I replied to this thread and suggested to change the alignment.

By nick-picking I was referring specifically to the successive questions/minor "issues" you posted/brought up after my first reply here (pointing that the alignment was the cause of the weird corners). 

Link to comment
Share on other sites

@MEB, please keep in mind that in this post I was responding to the unedited version of your post. Since I left the page open while I rechecked the results of using outside alignment, I did not see the edited version until somewhat later. 

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

I want to thank everyone for their help.

To clarify, this is an icon for iOS and 'droid devices, so .SVG isn't an option unfortunately. 

I understand now what's going on, even if 'intuitively' I wouldn't have expected it because the dark grey - when flattened to .PNG isn't 'over' the white - it should completely replace it, therefore there shouldn't be an mixing with the white, but the anti aliasing of the dark grey to transparent should make it look like there white edges.

Thank you for the version of the file with the blend mode changed - that's a feature I hadn't discovered yet and I will be using a lot now, thank you! :)

I agree with @R C-R that if the stroke is set to outer then the anti-alising on the inner part might be a problem, especially when this image is squash down to a smaller size for older devices... but at least I have a working solution now, so thank you to **everyone** who helped; I didn't think anyone was being obtuse, nit-picking or antagonistic, so I'm sorry people fell out over this, but it was really helpful to me, the OP. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.