GreenGirl Posted August 21, 2019 Share Posted August 21, 2019 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. 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? Quote Link to comment Share on other sites More sharing options...
Staff Callum Posted August 21, 2019 Staff Share Posted August 21, 2019 Hi GreenGirl, If possible could you provide the file so I can take a look at it here at my end? Thanks C Quote Please tag me using @ in your reply so I can be sure to respond ASAP. Link to comment Share on other sites More sharing options...
GreenGirl Posted August 21, 2019 Author Share Posted August 21, 2019 40 minutes ago, Callum said: Hi GreenGirl, If possible could you provide the file so I can take a look at it here at my end? Thanks C Sure, have at it! Icon.afdesign Quote Link to comment Share on other sites More sharing options...
Staff Callum Posted August 21, 2019 Staff Share Posted August 21, 2019 Which resolution is it you are exporting to? Quote Please tag me using @ in your reply so I can be sure to respond ASAP. Link to comment Share on other sites More sharing options...
GreenGirl Posted August 21, 2019 Author Share Posted August 21, 2019 Just exporting as PNG same resolution. The preview app view above is native - not resized. Quote Link to comment Share on other sites More sharing options...
R C-R Posted August 22, 2019 Share Posted August 22, 2019 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: 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... ... 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: A bit more jagged than you might want but 100% free of anti-aliasing artifacts. GreenGirl 1 Quote 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 More sharing options...
Staff MEB Posted August 22, 2019 Staff Share Posted August 22, 2019 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. Ulysses 1 Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
R C-R Posted August 22, 2019 Share Posted August 22, 2019 (edited) 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 August 22, 2019 by R C-R fixed typo (again!) Alfred 1 Quote 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 More sharing options...
Staff MEB Posted August 22, 2019 Staff Share Posted August 22, 2019 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
R C-R Posted August 22, 2019 Share Posted August 22, 2019 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. GreenGirl 1 Quote 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 More sharing options...
Staff MEB Posted August 22, 2019 Staff Share Posted August 22, 2019 That depends on where the icon will be used/its purpose. For some things you can use SVG's (even PDF's). Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
R C-R Posted August 22, 2019 Share Posted August 22, 2019 That's why I said it may not be an option. Quote 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 More sharing options...
Staff MEB Posted August 22, 2019 Staff Share Posted August 22, 2019 I've rewritten the reply to make it clear. I'm done with this pointless nick-picking. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
R C-R Posted August 22, 2019 Share Posted August 22, 2019 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. GreenGirl 1 Quote 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 More sharing options...
Staff MEB Posted August 22, 2019 Staff Share Posted August 22, 2019 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). Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
R C-R Posted August 22, 2019 Share Posted August 22, 2019 @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. Quote 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 More sharing options...
GreenGirl Posted August 22, 2019 Author Share Posted August 22, 2019 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.