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

Recommended Posts

Hi,

 

 

I'm having a problem similar to the one described in the thread here.

 

 

I want to export my line art which is a vector (see screenshot ‘Before import’) from Affinity Designer to Affinity Photo in order to colour.

 

I export in a PNG format, import into Affinity Photo, zoom in and that's when I notice the lines look really jagged (see screenshot ‘After export with colour’).

 

I understand that the vector gets turned into pixels during export, but I want to make the lines look smoother.

 

 

 

Before using Affinity Designer and Photo, I was working with Adobe Illustrator and Photoshop. My workflow back then was to export the vector from Illustrator as a PNG 'without background' to Photoshop.

 

In Affinity Designer I have tried different PNG preset settings (see screenshot ‘Export settings’) including PNG-24 Bilinear, Bicubic, Lanczos 3 (separable), Lanczos 3 (non-separable) all ‘without background’ selected.

 

But all resulted in the same jagged line.

 

 

 

I tried the solutions mentioned in the thread above. However when I click ‘Force pixel alignment’ the quality in Affinity Photo doesn’t seem to change.

 

Would someone on the support team know if I need to do something different in Affinity Designer so that when I import the vector in Affinity Photo there’s not a noticeable difference?

After Export with colour.png

Before Export.png

Export settings.png

Link to comment
Share on other sites

2 hours ago, Megstar said:

I'm having a problem similar to the one described in the thread here.

The cause is very similar: you are exporting to a pixel image size of just 403 x 48 pixels, so there are not enough pixels in your exported PNG to have smooth edges at high zoom levels. View it at its actual size of 403 x 48 px & it should look reasonably smooth.

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

5 hours ago, R C-R said:

so there are not enough pixels in your exported PNG to have smooth edges

This is true, but sub-pixels for antialiasing are completely missing from the exported image.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

Why can't you colour in Affinity Designer?

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

14 minutes ago, Pšenda said:

This is true, but sub-pixels for antialiasing are completely missing from the exported image.

If you mean the 1000x498 px AfterExportwithcolour.thumb.png file the OP uploaded, if you open it in Affinity Photo & zoom in to 400% or more, it becomes increasingly obvious that the edges are anti-aliased, like in this section taken from the middle:
1560922900_400zoom.jpg.bccf9b7e4dae9bd1187811a3dc79229a.jpg

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

This is how it appears to me.

Screenshot_2019-06-14-10-01-27.thumb.png.4028a72fddb25b6ea4fd812ca4a9c9db.png

I think more could be done to smooth the edges.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

7 minutes ago, Pšenda said:

I think more could be done to smooth the edges.

The edges probably would have been smoother if the OP had used the Lanczos 3 resampling method, but all we have to work with is what I assume to be a screenshot of the exported PNG file using the Export Settings shown, which is set to Bilinear resampling.

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

4 hours ago, R C-R said:

it becomes increasingly obvious that the edges are anti-aliased, like in this section taken from the middle

I think your "anti-aliasing" was created by inaccurate placement of the image.
If placed exactly on a pixel, there is no anti-aliasing (APhoto 800%)".

image.png.dfe658228cc884d06a3f5e520ab2627b.png

If the image is placed inaccurately (X and Y = 0.5px), the pixels will be blurry (see on your and my checkboard).

image.png.3969b577e8cc2b7728a5847cf029f599.png

 

@Megstararen't you using any anti-aliasing techniques?

Edit: Please insert the original affinity file here.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

1 minute ago, Pšenda said:

I think your "anti-aliasing" was created by inaccurate placement of the image.

The only thing I have to work with is the 1000x498 px AfterExportwithcolour.thumb.png file the OP uploaded, so I have no idea how it was placed in the original Affinity Designer file, or for that matter what that file's pixel dimensions are.

The uploaded PNG file has an alpha channel but it doesn't really seem to have any transparent pixels because what looks like the transparency checkerboard pattern is baked into the file. That leads me to believe all we actually have to work with is a screenshot of the zoomed in view from Affinity Photo, so there isn't much we can tell about it, period.

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

19 minutes ago, R C-R said:

The only thing I have to work with is the 1000x498 px AfterExportwithcolour.thumb.png file the OP uploaded, so I have no idea how it was placed in the original Affinity Designer file, or for that matter what that file's pixel dimensions are.

The uploaded PNG file has an alpha channel but it doesn't really seem to have any transparent pixels because what looks like the transparency checkerboard pattern is baked into the file. That leads me to believe all we actually have to work with is a screenshot of the zoomed in view from Affinity Photo, so there isn't much we can tell about it, period.

NO, uploaded image is OK, only you placed it in APhoto inaccurately. Try place it to X, Y = 0 px, see my first image.

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

30 minutes ago, Pšenda said:

NO, uploaded image is OK, only you placed it in APhoto inaccurately. Try place it to X, Y = 0 px, see my first image.

I didn't place it anywhere, just opened the OP's screenshot file in Affinity Photo. That file includes the baked in checkerboard transparency from the actual Affinity Photo version, but it bears little if any resemblance to that file, including having a completely different number of pixels (1000x498 vs. 403x48).

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

But I display the "same" file as you.

My views - chessboard sharp, edges without smoothing.
image.png.7f70caf99a5eb60a761e47175feedf0a.png


Your views of the "same" file - chessboard blurred, edges with alleged antialiasing.
image.png.18a97de8e093ca556e93635becc79fe5.png

 

Edit: I've already found the difference - image not "same".
If a file is downloaded directly from the forum (right click on image), it is a bit different than when it is clicked in the browser (image show in separately window), and then downloaded.
Viewing image in forum is likely to make a little difference - resizing?, while clicking the image will display its original.

Edited by Pšenda

Affinity Store (MSI/EXE): Affinity Suite (ADe, APh, APu) 2.4.0.2301
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080, Windows 11 Pro, Version 23H2, Build 22631.3155.
Intel NUC5PGYH, Pentium N3700 2.40 GHz, 8 GB, Intel HD Graphics, EIZO EV2456 1920 x 1200, Windows 10 Pro, Version 21H1, Build 19043.2130.

Link to comment
Share on other sites

1 hour ago, Pšenda said:

Viewing image in forum is likely to make a little difference - resizing?, while clicking the image will display its original.

I tried both ways, but I doubt there is anything definitive we can say about it either way. Only if we have the original .afdesign or at least the .afphoto file (with its transparency intact) to test with could we do that. Anything else is likely to be mangled in some way by the forum software or the browser used.

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

7 hours ago, Pšenda said:

Edit: I've already found the difference - image not "same".
If a file is downloaded directly from the forum (right click on image), it is a bit different than when it is clicked in the browser (image show in separately window), and then downloaded.
Viewing image in forum is likely to make a little difference - resizing?, while clicking the image will display its original.

Correct. The file is 1191x593. @R C-R you've downloaded the resized (down) "preview" image that is inline with the thread. There is no antialiasing on the actual file.

@Megstar I'm guessing it's one of two things.
1) with the original vector file in Designer, flip on pixel view. If the graphic is all of a sudden jagged then I'm betting it's the coverage map (In blending options... the little cog next to the blend layers dropdown). But it would be surprising if that had been changed somewhere along the line without you knowing it.
2) If it's still smooth (an anti-aliased smooth) in pixel view, is it possible that you're exporting as a dithered png? I know the image above shows png-24 (Designer version 1.6 right?), but the export window is a little weird in that if you change the resample method (which you don't need to mess with btw) the indication of which png is selected goes blank. Just make sure it's not dithered.

Edit to add #3) Could also be an adjustment filter that uses the alpha too. Using any of those?

On 6/13/2019 at 7:39 PM, Megstar said:

I want to export my line art which is a vector (see screenshot ‘Before import’) from Affinity Designer to Affinity Photo in order to colour.

I agree with @firstdefence. Why? You don't have to do that at all. Change the color and export as the final png right from Designer. You still need to pinpoint the jagged issue though.

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.