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

Designer - unwanted white border when export to PNG


Recommended Posts

Position and size is whole pixel? 

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

4 hours ago, matur61 said:

Hi,

when exporting an artboard to PNG I get an image with an unwanted white border all around.

The margins are 0 in the document setup but I didn't find a way to get rid of that border.

Thanks for any help

Is your document setup with bleeds? Could be on export to PNG you have bleeds included and because your image is stopping at the page edge you will be left with white on the outside for the bleed. There is a "more" button when you go to export to PNG, see if include bleed is selected there. Also see if your document setup has bleeds. It is the only way I can replicate your problem.

Link to comment
Share on other sites

No, I checked the document setup and the bleed values are all 0.

I enclose 2 images. One is the screen capture where is possible to see both the artboard and the bleed settings and the other is the png file with the unwanted border.

Thanks for your help

 

screen - art deco 1920 - 02A.png301895039_artdeco1920-02A.png.42519dd53f5f5bd597d10b18f83e086f.png

Link to comment
Share on other sites

2 hours ago, matur61 said:

The size and position of the square is the same of the artboard.

Question isn't "same" size, but "whole pixels". This is because any deviations must be compensated by adding pixels when exporting.

I don't look at the file, it's too big for me at this time.

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

53 minutes ago, Pšenda said:

Question isn't "same" size, but "whole pixels". This is because any deviations must be compensated by adding pixels when exporting.

It is not that as there are 6 pixels added to each side. Or not really added as size is correct but there just is white border and I don't get why. 😅

Link to comment
Share on other sites

Has Artboard1 been resized at any time?
I only ask as, if you look in the Export Persona, the Artboard1 slice is larger than the artboard (see attached image).
I don’t think this should affect the “File → Export” function, but it’s interesting that it’s how it is.
Exporting the resized slice gets a PNG the correct size without a border but that’s more of a workaround than a solution.

Annotation 2020-04-16 140925.png

Link to comment
Share on other sites

14 minutes ago, GarryP said:

I don’t think this should affect the “File → Export” function,

What do you infer from, that it was exported via Export and not via Export Persona?

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

19 minutes ago, GarryP said:

the Artboard1 slice is larger than the artboard (see attached image).

The only question - if you delete the Slice in the Slice panel and recreate in the Layer panel, how big will it be?

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

I exported through the file--> export menu and not in the export persone. I apoligize being a newbie.

I noticed that the slice was bigger than the area to export and I do not understand why (but surely I made some changes ).

In any case once corrected and exported in the proper way everything worked.

Thanks for your help

Link to comment
Share on other sites

  • 7 months later...
5 hours ago, EmilienMusic said:

I am having the same issues

Question is also the same:

On 4/15/2020 at 5:34 PM, Pšenda said:

Position and size is whole pixel? 

 

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 year later...

Confirming that this issue is still present. The export personal creates slices that are slightly off the art board size which creates a 1px border around the exported piece. This becomes obvious when trying to incorporate the exported graphic into a document with a contrasted background. what a pain in the S. Please fix!

Link to comment
Share on other sites

Hi there,

That is hapening because the Artboard is not positioned in whole  y and x pixels, but there is an easy fix. Just folow these steps if you have more than one Artboard:

Method 1 (harder, but good for documents with two or three Artboards)

  1. Select the Artboard number one (that is the one the top of your layer panel)
  2. Open Transform panel (View>Studio>Transform): you will noticed that its position is X=0 and Y=0 right? (if its not you're not selecting the Artboard on the top of your laer panel) -
  3. The step above is ONLY for verification: what you want is make sure the other Artboards are also with X and Y positions with WHOLE pixels. To do that select the second Artboard and force the X and Y values to whole values (you'll notice that these positions have broken values, so delete the dots and the value after that
  4. Done - you can export without that anoying white border

Method 2 (faster, good for multiple Artboards)

  1. Select all Artboards
  2. Select Align
  3. Select Align Horizontally, then enter a whole value into the field (do the same for the Align Vertically if needed)
  4. Done - all your Artboards are now positioned into whole pixes
  5. image.png.5b5b9e011fba8210d27d9168e0603097.png 

I hope that helps,

Link to comment
Share on other sites

6 hours ago, donChipriani said:

Confirming that this issue is still present.

Yes, that's fine - this is intentional application behavior (by design) if the position or size of the artboards is not defined exactly to the whole pixel. There is nothing to fix.

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

8 hours ago, reminous said:

Hi there,

That is hapening because the Artboard is not positioned in whole  y and x pixels, but there is an easy fix. Just folow these steps if you have more than one Artboard:

Method 1 (harder, but good for documents with two or three Artboards)

  1. Select the Artboard number one (that is the one the top of your layer panel)
  2. Open Transform panel (View>Studio>Transform): you will noticed that its position is X=0 and Y=0 right? (if its not you're not selecting the Artboard on the top of your laer panel) -
  3. The step above is ONLY for verification: what you want is make sure the other Artboards are also with X and Y positions with WHOLE pixels. To do that select the second Artboard and force the X and Y values to whole values (you'll notice that these positions have broken values, so delete the dots and the value after that
  4. Done - you can export without that anoying white border

Method 2 (faster, good for multiple Artboards)

  1. Select all Artboards
  2. Select Align
  3. Select Align Horizontally, then enter a whole value into the field (do the same for the Align Vertically if needed)
  4. Done - all your Artboards are now positioned into whole pixes
  5.  

Thanks for the clear explanation solutions. 

Note for Affinity Devs: 

So since this creates unexpected results for the users, and I don't see ever anyone wanted to get this results purposely, why not program it so the Artboard would always position themselves at whole pixels, no matter what the design settings are? This should be the default behaviour. If you really want the Artboard behave like this, part pixel, then just make it a separate setting, but not by default - and add a clear warning about this outcome on exports.

On the other hand of the argument, here are results of unexpected behaviour:

A - designer hands over artwork to client, not noticing the thin border, most likely. Client will later try to incorporate it in other designs, websites and gets this weird thin border around. Not a happy client, not great for designer.

B - less often than A, designer notices issue after export, but only if there is a need to incorporate that in a a design, it's not noticeable otherwise. As a results, need to spend time figuring what is wrong and re-exporting. Unhappy Designer.

So what is the counterargument for that behaviour that would make this an acceptable outcome? I understand having the design tools setting for whole or part pixel, but not the artwork itself. If you think that anyone would require this half pixels for artboards, then just add that option on the settings, instead of having it behave like that by default. Again, I do not see why would anyone require that for artboards.

Cheers!

Edited by donChipriani
Link to comment
Share on other sites

22 hours ago, donChipriani said:

why not program it so the Artboard would always position themselves at whole pixels, no matter what the design settings are?

Some people use the metric system for sizing their artboards, some people use "US Standard Units". Some people are going to have their artboard size plus their preferred gap between artboards to be a size which is not integer pixel friendly.

If you are doing work which integer pixel alignment then turn off all snapping except "Force Pixel Alignment". You could set up a grid that is set up with pixels as the distances and then snapping to that would be safe, as long as you don't move the x, y origin.

Mac Pro (Late 2013) Mac OS 12.7.4 
Affinity Designer 2.4.0 | Affinity Photo 2.4.0 | Affinity Publisher 2.4.0 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

  • 1 year later...

Found a workaround. The above solutions did not help me, the slice is still misaligned and therefore the matte adds a border.

But it is possible to select a layer filling the whole artboard (a simple rectangle may be added in the background, then "selection from layer" or ctrl+shift+A), then going for the export and instead of choosing the artboard, select "selection area".

Link to comment
Share on other sites

1 hour ago, MrPAS said:

The above solutions did not help me, the slice is still misaligned and therefore the matte adds a border.

Can you post a file/example here where positioning and sizing the Artboards to whole pixels and recreating the Slice didn't help?

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

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.