White outline around every pixel

[manfred11]

When exporting pixel art to jpeg or png each pixel has an outline.

how get rid of this?

thx

[Callum]

Hi Manfred11,

These look like anti aliasing lines has your design been aligned to whole pixels at all? I recommend trying the suggestions found here: https://forum.affinity.serif.com/index.php?/topic/126544-white-line-in-exported-images-via-export-persona/&do=findComment&comment=695290

Thanks
Callum

 

[manfred11]

Thanks Callum

it didnt help though.

export adobe vs export affinity

 

 

[manfred11]

I completely remade the pixelated background i uploaded first,with only round numbers,as advised.

when i exported that to png it worked fine.

However,when expoting as svg to another vector software the lines are back.

[manfred11]

It seems the artwork must be imported-exported from within the software it was made with.

this is a common error in 3d softwares as well.

[NotMyFault]

Any chance you can upload an afdesign file of the  background?

There a quite many possible reasons causing this issue.

• Objects not perfectly aligned to integer position (or size)
• rotated objects / anti-aliasing
• Rectangular vector objects aligned adjacent to each other, exported, then zoomed / stretched

To avoid the issue, you may use objects overlapping (one atop the other) if possible, or using a backfill layer created from all objects added together.

[manfred11]

Hi there

Sorry for slow reply.

Please have a look.

when exported from affinity to jpeg or png all is fine,but when exporting to svg in another software,then export to jpeg or png-white lines round each pixel.

thx for your time.

 

IseeU Copy.afdesign

[NotMyFault]

Thank you. I can reproduce the SVG issue.

Looking into the file with a text editor (notepad++) it seems every rectangle gets transformed with factors slightly off from 1.0. This could cause the issue.

I'm not an expert at all regarding SVG.

The transformation could be "by design", or an bug caused by Affinity during export, or based on selected export settings-

Hope the vector / SVG experts from the forum can step in at this stage.

 

I recreated a 16x11x100px file from scratch:

• create 1 rectangle (avoiding any fractional position / size)
• copied and moved by 100px down 10 times (using power duplicate)
• copied column and moved by 100px 15 times using power duplicate

The file exports cleanly as SVG.

 

So i assume your file may have some edit steps in history which triggered Affinity to start this erroneous transform which leads to rounding issues.

 

Assuming this is actually a bug, i recommend to file a bug report in the dedicated sub-forum. Your vectors seem to be perfectly aligned and sized with whole numbers, i cannot spot the reasons for Affinity going into wired transform matrix with fractional numbers.

 

16by11.afdesign

[Pšenda]

Interestingly, after loading svg back into ADesigner (desktop), each square has an exact position, but is slightly larger.
On the contrary, this should cause the gaps between the squares to disappear but still be visible (see 100% display).

[manfred11]

thanks for looking into it guys
It must be a bug probably.

sadly making AD practically unusable for me.

i sell my work as svg.

btw i tried pdf,doesnt help.

[manfred11]

[DM1]

18 hours ago, manfred11 said:

exporting to svg in another software,then export to jpeg or png-white lines round each pixel.

@manfred11 I dl'ed IseeUCopy, changed the fill in background rectangle to black and zoomed in on a join. The black line is evident in Designer when zooming, suggesting that the rectangle is not perfectly aligned with the one above. However, when checking size and position with Transform Studio it all looks good. I think it’s the way edges are aligned in Designer. There is a known issue with clipping that reveals edge pixels, I think this may be related. I changed a few outlines from black to fill colour and black outline disappears. Shouldn’t matter but shouldn’t happen in clipping either.

Seems likely to be related bug. Just my 2cents.

[manfred11]

Thx,hopefully it gets fixed.

[NotMyFault]

7 hours ago, DM1 said:

I think it’s the way edges are aligned in Designer.

I don’t agree to this part.

When you create the same document from scratch, you get perfectly aligned rectangle which export to SVG without the false transformation values, and nothing shines through at the edges. But you can still see rounding issues like x.yz e-15 instead of zero in exported SVG.

Something must have happened  during editing that triggered Photo to wrongly scale and shift the rectangles, while wrongly showing perfectly integer values in transform panel.

[DM1]

56 minutes ago, NotMyFault said:

Something must have happened  during editing that triggered Photo to wrongly scale and shift the rectangles, while wrongly showing perfectly integer values in transform panel.

It’s a shame iPad version shows only one decimal place so that such small incremental change in size is not evident.
Hopefully mods will come back and investigate further. Psenda reports interesting change to rectangle  size when loading svg file back to desktop and viewing in transform panel. But no change to rectangle position that I could see from his screenshot. 

[manfred11]

Just to be clear

The one uploaded here was completely done from scratch in affinity

round numbers for the canvas ,and round numbers for the pixels.

so I don’t think I have made a mistake.

i discovered a bug similar to this in c4d (3d software) 

each time a calculation was done,your points are moved 0,0000001 mm or so

thing is after hundreds of edits it starts adding up.

 

[manfred11]

Different design same problem

[NotMyFault]

9 minutes ago, manfred11 said:

so I don’t think I have made a mistake.

Absolutely, i didn’t want to say anything in that direction. The mistake is solely on Affinity’s side.

I created a sample document, but didn’t recolor the rectangles individually. How did you assign the individual colors?

Did you resize at any time?
Did you resize, adjust document setup (spread / margin) ?

again, it’s not saying you made a mistake, it’s about trying where Affinity acts erratic.

We have quite a few similar issue reports, but i couldn’t identify which (perfectly correct from user perspective) action triggers the issue.

[manfred11]

As I recall

There are 16 pixels in the width and 11 in the height 

so I created a file 1600 x 1100 pixels

then on that file 1 pixel of 100 x 100  (snap to grid-covered the 1600x1100 perfectly)

think i duplicated it 16 times with snapping,one next to the other. 
snap to grid was used.

one bar of 16 pixels was duplicated 11 times

Row 1 duplicated became row 2

Row 2 duplicated became row 3  etc

Again with snap to grid

then i imported the original,placed it half over - colored each pixel with the color chooser-pippet on the left.

each time a row was colored,i deleted a row from the original.

that’s as close as I can remember.

 

[NotMyFault]

I now get the same issue, on iPad. 

Workaround: add stroke of 0.5px in same color as fill. nothing shines through any more.
This could mitigate  the issue in your composition, but not in general.

[manfred11]

Thanks for your time,but that is a very complicated solution.

for something like the explosion it would really take a lot of time.

these were originally made in 3d software and exported to illustrator,there was no problem visible there.

[manfred11]

I have affinity desktop as well,will give that a try.

[DM1]

17 hours ago, NotMyFault said:

Workaround: add stroke of 0.5px in same color as fill. nothing shines through any more.

In the screenshots I posted initially I simply changed the black (0px) outline stroke to the fill colour and that stopped the bleed through of background as seen in bottom left corner of screenshot (where changes were made). Increasing outline stroke to 0.5px should allow for larger errors to occur without bleed through.
 

18 hours ago, manfred11 said:

Thanks for your time,but that is a very complicated solution.

for something like the explosion it would really take a lot of time

It’s possible to select all rectangles based on same fill/stroke colour (in context submenu) then recolour strokes in one hit. You would have to repeat this for each different colour. Still a painful process.

[manfred11]

Thank you,but as you say,both would be painfull.

Not suited for commercial,because too slow.

[manfred11]

Ok i did some more tests

this is opening the file in affinity