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

Exported Slices have a white border (which is not desired nor intended)


Recommended Posts

Hi, a thin white border is introduced when I export JPGs using the Export persona (1st picture). Exporting a JPG from the Designer persona creates a file without border, as desired (2nd picture).

Not a huge deal for a couple of slices, but I have 46 of them. Is there a setting I am missing?

image.png.1429853476cc63d9945d3bb138b5df03.png

image.png.6b6933d4c6796ff87ad66b6addc70345.png

Link to comment
Share on other sites

  • Staff

Hi Rocketdrive,
It's because of the decimal parts of the X,Y coordinates. Affinity adds an additional pixel to include them. Set the X,Y coordinates to 0 (zero) - that is remove/delete the decimal part in the Transform panel and the slices will export correctly. This also applies to objects with a width or height with decimal places (non integer values).

In Affinity Preferences, User Interface panel, Decimal Places for Units Types section make sure you also have the Pixels field set to 2 or 3 so you can catch values like 12,03 for example.

Link to comment
Share on other sites

Thanks for pointing me to the right track, @MEB and @pruus. Most slices are now OK, however some stubbornly refuse to export correctly. The transform panel shows whole pixel values, but upon export sometimes they are one pixel bigger on one axis.

image.png.b87237464f74f1fe190d539706dcbebd.png

Just to be sure: JPEG is selected, I was just accidentally hovering over the EPS tab as I invoked the screenshot utility. Any ideas?

 

 

Link to comment
Share on other sites

For a relatively quick fix, I just split up the one huge file that the designs had become into a couple of smaller ones. With the then necessary rearrangement the rounding errors disappeared.

@MEB could it be that on really large canvases with many artboards such rounding errors happen internally, despite shown otherwise in the transform panel?

Link to comment
Share on other sites

  • Staff

I don't believe so. It's either the artboards that are not being placed on integer values (or don't have integer dimensions values) of the objects themselves. There may me something else interfering here - masks, clipped objects etc that may be causing issues (in that case it's a bug) -, but without inspecting the file there's no way to know.

Just to be clear - any files uploaded directly to us for inspection - are not used for anything else other than that purpose and are deleted afterwards.

Link to comment
Share on other sites

1 hour ago, MEB said:

Hi Rocketdrive,
Do you mind attaching the file with the problematic slice (you can delete all the rest) for inspection? Alternatively I can provide an upload link if you wish to keep the file private.

@MEB, I prepared a file for You by removing most of the content while retaining all the artboards, including those which are off by a pixel when exporting. Would You mind providing the upload link like You suggested earlier?

Link to comment
Share on other sites

  • 1 year later...
  • 10 months later...
  • Staff

Hi @Daniel Aubert,
Welcome to Affinity Forums :)
Please check if both the X,Y coordinates of the artboard(s) and well as its dimensions (width, height) in pixels in the Transform panel are integer values. You have to temporarily change the document to pixel units if you are working with a different unit. Remove/adjust the values to ensure there's no decimal parts.

To make sure they are actually integer numbers, please increase the number of decimal cases displayed in the Transform input fields (and elsewhere) so you can catch values like 5,006 for example. To do it go to Affinity Designer Preferences, User Interface section and increase the Pixels value in Decimal Places for Units Types to 3 or 4.

This fixes the "white borders" issues you are having. The easiest way to prevent this from happening is enabling Force Pixel Alignment in the main toolbar (the first icon in the magnet group). Make sure the next one (Move by whole Pixels) is disabled otherwise if you have an artboard with fractional values values that function will force Affinity to move the artboard by whole pixels thus keeping the existing fractional part which we don't want. With Force Pixel Alignment enabled if you copy/move/drag artboard to other places they remain pixel aligned preventing the "white borders" issue.

Link to comment
Share on other sites

  • Staff

@Daniel Aubert, @Rocketdrive,
One note regarding the use of the Force Pixel Alignment option as described in my previous post: if you are duplicating+dragging artboards to create new ones (for example to create a set of icons each one in its own artboard) make sure you use command + drag to duplicate the artboard (CTRL+drag if you are using Windows). If you use option/control+drag (ALT+drag if you are using Windows) instead, you may end up with a misaligned artboard as well because although both modifiers let you duplicate the artboard, command honours the snapping settings whereas option/alt overrides them so in this last case Force Pixel Alignment gets overridden as well.

Link to comment
Share on other sites

I think a lot of these issues with pixel mis-alignment could be done away with if the default were changed to Force Pixel Alignment being on and Move by Whole Pixels turned off.

An aside: I have yet to find a situation where Move by Whole Pixels in addition to Force Pixel Alignment  is of any use in my work.

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

  • Staff

With Designer being primarily a vector based app i understand why Force Pixel Alignment isn't enabled by default but due to the number of reports/issues users are having with it maybe we should consider changing the default.

That depends on what you use the app for. Are you drawing icons, optimising images (logos, small elements, text etc) for small/low res displays, designing interfaces (sound plugins, skins for apps etc etc)?

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.