Pixel Gap

[MaryLou]

Why am I getting a gap in my pixels?   In the image below, I set my pixel tool to 1. I created a 12 pixel square. I then duplicated that square 3 times which put each square on a different layer.  I attempted to put them together to make one image.  However, as you can see, there is a tiny gap between each square.  Why is this happening?  Another person had the same problem.  However, when she did this in Affinity Photo, there were no gaps.  What are we doing wrong?

[Butler To Cats]

Hi Marylou

 

I get that same effect in Affinity Designer, even with pixel alignment, unless I turn on "real pixels" view mode, then there is no gap showing.

[MaryLou]

When I click that Pixel View Mode, at least half of my pixels change color! .  I have my width set to 1, Opacity: 100%, Flow:100%, Hardness: 100%,  The lines do disappear but something else is wrong here.  It shouldn't be this difficult to use pixels.   If I click the middle box, I get my colors back but the lines are still there.

 

I also noticed that the Recent colors do not show up in the Swatches tab.  When making my little demo, I forgot which color I selected from the swatches and had to re-sample it to get the same color again.   I love pixel art but so far, I'm not loving AD for doing it.

[Butler To Cats]

I suspect if you're going to use AD for pixel art, it might be safest to work in pixel view (or Retina pixel view) the whole time (but I'm certainly no expert in this area, so I could be wrong).

 

[seabirdr]

I have this problem too.

 

even I  I turn on "real pixels" view mode, there is gap showing.

 

 

windows 7

affinity designer 1.5.0.36

[MaryLou]

That doesn't solve the problem. I was working in pixel view but I still get the  gaps.  I'm glad I"m not the only one though, now that makes 3 of us who get them.  Switching to the Retina view only shows you the anti-aliasing pixels which I don't want.  Pixel view is fine except for the gap and the fact that it does not keep the recent colors. 

 

The ball in your image looks like Retina mode... which isn't a true pixel image.

 

I hope someone has a solution for this. 

[Butler To Cats]

Thanks seabirdr, that makes it a bit clearer.

 

MaryLou - no, I'm afraid that's normal pixel mode with plain old anti-aliasing (the default when using vector shapes) - using semi-transparent pixels to make edges look smoother at higher resolution, but it does look a bit weird when seen close up at pixel level.

I suspect those lines in seabirdr's example are also semi-transparent pixels due to the same cause.

 

Those lines of anti-aliased semi-transparent pixels can be avoided completely by working in Pixel Persona with the Pixel Tool with a Solid Brush on a Pixel layer in Pixel view, but you lose all the advantages of working with vector objects - it's basically like painting with an icon editor - the animals in my example above were created that way.

 

I'll admit I can't see any way of turning off anti-aliased semi-transparent edge pixels while working with vector objects.

 

[MaryLou]

How can you use the Pixel tool and a solid brush at the same time?  Maybe I'm reading that wrong?   I understand anti-aliasing as I've been doing pixel images for years but have never had this kind of problem.  I am not using vectors of any kind, I paint one pixel at a time using the pixel tool.  I am working in the Pixel persona only so there's no reason for there to be any anti-aliasing. 

 

The person who pointed this out to me did the exact same image in Affinity Photo and she did NOT have the thin line.  Therefore, either we are doing something wrong or there is something wrong in the program.  This really isn't acceptable as pixel art.

 

As I said, I work with one pixel at a time as in the image attached. It was made in another graphic program.

[Butler To Cats]

It caught me by surprise too, but the Pixel Tool apparently creates a "pixel art" version of any pixel/raster brush - I've since found you don't even need to select one of the solid brushes as I originally thought.

 

For 1 pixel at a time, a full pixel workflow (persona/view/layer/tool) in Designer seems to work fine - just use the Pixel Tool with a solid brush set to 1 pixel wide (or select the 1-pixel solid brush at the top of the Assorted brush list).

 

In my testing, the gap problem you first posted seems to arise from using non-pixel view.

 

[MaryLou]

The problem arises when you paint pixels on a different layer.  I created my first square with 12 pixels in it. That all went well.  Then I duplicated it. That action automatically put the duplicated square on a different layer.  That's  when the gap happens.

 

I use the Pixel tool only.  Using the Paint Brush tool causes the anti-aliasing which is showing in your image. 

 

As I said, I can do this exact same in Affinity Photo and do NOT get the gap.   I use the pixel brush set to 1, make my 12 pixel square, then duplicate that square.  Why would it work in one program and not the other?

[San65]

I also have found it hard to work with the pixel tool in Pixel Persona as you I always use different layers for different colours and as you can see by the image I have posted if you do all the colours on one layer it works perfect but if you use different layers then group them you have a gap.

So it is either a bug or we are doing something wrong.

But I have done the same in Affinity Photo - Beta and the pixel tool works perfect on different layers.

 

[Butler To Cats]

Because Affinity Photo is a pixel-based program - it does not have a non-pixel view, it is always in pixel view by default.

 

To get Affinity Designer to behave like a pixel-based (photo) program, you have to start and continue in pixel (photo) view to see the world through pixel (photo) eyes rather than mathematical (vector) eyes.

 

Non-pixel view is an abstract, where a 0-width line can be seen (well, as a coincidental result of an antialiased non-pixel working view of "enlarged pixels" as shapes rather than pixels). Or at least that's my way of visualising working with pixel and non-pixel views.

 

[MaryLou]

Okay, I understand what you are saying.  I tried it again and mae sure to stay in Pixel View.  I managed to eliminate the lines, but now I have another problem.  My pixels change colors when I move the squares.  What can I do to prevent that?  You can see in my attachment that some of the red pixels are not red.

[MaryLou]

San, did you have the Pixel View button selected?  I was sure I did but the last time I tried this, as you can see, no line. However, while in Pixel View mode, if I moved my squares, the pixels changed colors.

[Jon W]

I'll admit I can't see any way of turning off anti-aliased semi-transparent edge pixels while working with vector objects.

 

If you turn on "Force pixel alignment" and turn off "Move By Whole Pixels", vector tools will snap to pixels, so you won't get anti-aliasing on horizontal or vertical lines.

[MaryLou]

I think that's the secret!   I turned on "Force Pixel Alignment"  and that seemed to have fixed all the problems.  The pixels all align without the gap and the colors do not change when I move a square of pixels around the screen.

 

I did not see any difference when "Move By Whole Pixels" was turned on.  I've always had that turned off and did turn it o to see what happens and nothing changed.

 

So, it seems when doing pixel drawings one needs to make sure Pixel View is on, which prevents the gap and Force Pixel Alignment must be turned on so one can move the object without the colors changing.

 

Problem solved!!!   Thanks to everyone who helped with this!  We all learned something new!

[San65]

Thankyou solved my problem works like a charm with the Pixel View on.

[Butler To Cats]

Aagh, I still had that set from previous fiddling with the snap settings - no wonder we were getting different behaviour! Truly, I deserve my username.

 

Jon, thank you for the solution and resolution.

 

MaryLou, thank you for your forbearance with this loud-mouthed idiot, and my apologies for my insistence on pointing confidently in completely the wrong direction.

[MaryLou]

You are no way a loud-mouthed idiot!!  :)   This is how problems are solved. When it takes a little time to reach a successful conclusion, it tends to stick in the mine.  rest assured, I will never forgot how to set up for doing pixel work!!  I call this a very good experience. It's also people helping people.  Just imagine how it would be if no one tried!  Sometimes, it takes a little longer for the lights to go on for me, but once it happens, it sticks!  On my forum, we all help one another.  When we can't find a solution, we come here because we know there's going to be someone who is willing to help.  For that, I thank ALL of you!!  You're making AD a fun experience!

[af-user]

Finally someone who mentions this, too.

I had something like this reported here: link

and here: link

 

I think this should get mentioned in a FAQ or set as default but please can anybody tell me how to get rid of the gap-lines if I am working in a document type like "Print (Press-Ready)"?

What needs to be done to get rid of those lines there?

 

Turning on "Force pixel alignment" and turn off "Move By Whole Pixels" does remove them on the screen in the application.

But if I then export the file to png, the gap-lines are still exported into the final image.

 

 

And this does NOT appear if I create a new file and sett document type to "Photo"!

 

My simple steps to recreate it are:

• create new document, select type "Print (Press-Ready)"
• switch to Pixel-Persona
• select Paint-Brush-Tool
• Paint a line
• switch to rect marquee tool
• zoom in to the line
• select a piece out of the line
• press ctrl + x
• press ctrl + v
• go to menu Select --> Deselect
• got to menu File --> Export (PNG), click Export
• View file and zoom in, the gap lines are there

[momochan86]

Gosh, I thought I fixed it but I'm still having this problem. 

I did the steps above... still have a gap.

[Mithferion]

Well, I didn't see that as a gap, more like "those are two separated shapes". When you make an Add operation, that gap disappears.

Best regards!

[momochan86]

Yes they are two separate shapes that I am trying to butt up next to each other (using snap to)... it snaps to each other, but there's still a gap. 

I want to merge the two to create a single shape.

[MaryLou]

Why can't you just select both pieces and use the Add Operation?

[Liz Regular]

Hello, I was running into this same issue when creating a repeating pattern. After trying some of the suggestions in this forum with no success, I found out that you can change the “Screen Tolerance” next to the Snapping tool. I changed the setting from 8 to 3 and no longer see the gaps.