Pixel lines

[jaztek]

Hi - I'm trying to draw pixel perfect lines.

 

I followed the video below

 

http://www.miguelboto.com/temp/snapping.mp4

 

That works however I don't want to have to zoom every time and move it slightly plus for boxes it doesn't work.

 

Is there something I'm missing here?

 

I just need it to snap to the pixel automatically everytime.

 

Thanks,

 

J.

[MEB]

Hi jaztek,

That video was created specifically to complement a reply i gave here in the forums about snapping. It wasn't intended to be a tutorial of any kind or a best practise for working with pixel aligned work. The small movements was to show that it's also possible to align objects to half-pixels.

 

If you're having trouble aligning boxes (rectangles) to the pixel grid, go to the Transform panel and check if the (x,y) are on whole pixels values (integer values). 

Also make sure the box itself uses integer values for width/height. If you are using a stroke with one pixel width, you may also need to adjust the alignment of the stroke to Inside (or outside) so it fits the pixel grid.

 

Let me know if you still have trouble.

[jaztek]

Hi - Right I understand. I just stumbled across it when trying to search prior to posting a forum post.

 

I just tried doing some squares and they're working now, so it must be due to the pixel snapping and the alignment of the stroke. I would've though that the alignment shouldn't make a different as the actual box border should snap to a pixel with the border then just being displayed on either side of that border.

 

For the lines, I still need to slightly nudge them, ideally it would be good if they snapped instantly.

[jaztek]

Hi - I'm still having trouble with this. Sometimes it works sometimes it doesn't.

 

It's mainly with lines rather than boxes.

 

Can you confirm the exact settings I need to put. It's a real problem despite how small it is, not being to just draw a 1 pixel line or box has a real impact on the design elements.

 

Thanks,

 

J.

[MEB]

Hi jazrek,

Check the attached screenshot. I'm assuming you have the Automatic Grid enabled, not a custom one.

Those are the basic settings to control the placement of both half pixels, and whole pixels. If you want to limit it to whole pixels, uncheck Snap to grid.

 

[jaztek]

Hi - No luck unfortunately.

 

For the lines - it's just not working at all. I have the automatic grid not a custom one.

 

If I draw a box it's the same, but then I have to click on > stroke > align and then select one of these which fixes it. It's a work around, however even that is somewhat annoying.

 

I'm not sure if its the way I'm drawing the line. I'm just using the pen tool. I click, hold shift and click again. When I zoom it isn't blurred though.

[MEB]

Can you attach your document here or upload it to my Dropbox account using the link in my signature, so i can check it out?

Maybe there's something else going on here...

[jaztek]

No worries - I'll uplaod it now. Appreciate the help!

[jaztek]

OK that's done. Sorry I used my name, not nick - Jared.

 

You can see the lines in the footer and also the separator line in the bottom right block above the footer.

[MEB]

You seem to have Snap to Grid unchecked in the Snapping settings.

Since the line only has one pixel width you need to position it in the middle of a pixel row.

Enable Snap to Grid, zoom in and drag the line with the Move tool so it moves just an half-pixel.

You can enable the grid to help position it (View ▸ Show Grid). You may also enable Pixel View Mode (View ▸ View Mode ▸ Pixels) to make it clear when the line is blurred (in Vector View Mode this is not obvious) .

[jaztek]

Hi - Thanks for the explanation. I had snap to grid on.

 

I changed to pixel mode, I don't quite see what the difference between mode's is though and what the advantages are with each one. Is there a post about this on your site I can read?

 

So by zooming right in I have managed to fix this.

 

It's terribly long and somewhat complicated to figure this out though. I would've thought that with the snap to pixel and move by whole pixels checked that it would avoid this problem.

 

For the moment when I want to draw a one pixel line I have to do the following;

1. Make sure I'm in pixel mode
2. Draw the line
3. Turn off snap to pixel (I have to keep it on by default because every time I move another line it then becomes blurry)
4. Zoom right in and move the line
5. Turn on snap to pixel.

 

Is there a better way? At least I can get it working, however one pixel lines are something I use a lot of. I guess I can copy and paste other ones within the doc.

 

The other thing is on the left and right of the line, there is a slight fuzz of one pixel. It's only visible when i zoom in, however it's not 100% perfect.

 

Am i missing something?

[MEB]

You don't have to be in Pixel Mode view. That was only a tip to help visualise it better.

You also don't have to turn off Force Pixel Alignment - it still works with it enabled.

 

The only things you need to have enabled to help positioning the line at both half-pixels and full pixels are Snap to Grid and Force Pixel Alignment - then draw the line and zoom in if you need to make adjustements at pixel level. 

[jaztek]

If I'm not in pixel mode I can't move it so that it snaps to 1 pixel. However, EVERY time I draw a line I need to zoom in crazy and then move it so it snaps to 1 pixel.

 

When I'm in Vector mode, if I zoom into the line it's actually 1 pixel, but when I zoom out it's not. If I switch to Pixel mode, I can see that it's blurred so I can snap it into place. I can't do that in Vector mode.

 

I've done a range of tests in vector mode and I can't get it to snap to 1 pixel.

 

You're right, I dont need to turn off the force alignment finally.

 

It's still annoying that it can't just do it automatically. I shouldn't need to zoom right in every time.

 

In fireworks, there was at least a snap option - I could hit alt-k or the like and it would snap into place.

 

I really appreciate your help.

 

This is the first time I'm designing a web site using the program, so I'm trying to get my head around all the options as I want to move away from Adobe.

[jaztek]

Hi - Just to follow up on this, it definitely works the way I described above.

 

One thing I noticed is that when I'm in 'Pixel mode' the line appears blurry as opposed to when I'm in 'Vector mode' when it appears as one pixel. This is when I ZOOM in. Otherwise it looks blurred when at 100% in both modes. So I don't really get it.

 

As long as I can sort it, which I've managed to do then it's ok. But it does seem a bit involved and I'm not sure if there's some kind of bug here?

 

Are you able to point me towards a doc that explains the difference between Vector & Pixel modes? I don't see / understand the difference.

 

Absolutely loving this program, I have pretty much switched from Fireworks after many years. So that's really saying something!! I've managed to convert some others too :-)

 

Thanks for your help.

[Dave Vector]

@jaztek I think I know why you are getting mixed results with trying to get pixel snapping to work.  It has to do with zoom level as you indicated in your first post.

I put together an illustrative document (below) to help clarify what's going on with pixel alignment and the slight differences with the Rectangle Tool vs. the Pen Tool.

@MEB Please have a look at the illustration and let me know if I got anything wrong.  I will edit it if anyone has any changes.

 

I think there is room for improvement with the pixel alignment in Affinity Designer. 

If you are drawing vertical and horizontal lines with the pen, wouldn't you want the strokes to be crisp, rather than 1/2 way between and "fuzzy"?

I would wish for the snapping to work consistently regardless of zoom level.

 

I hope this helps anyone else trying to draw crisp lines at a pixel level for icons and user interfaces.

 

[jaztek]

Hey mate - Thanks for taking the time to do that.

 

From what I can tell I follow what you explained.

 

It just shits me to tears that I have to zoom in every time to move a line to an automatic grid to avoid it from being blurry. Plus if I group a bunch of objects then move them, the lines often become blurry unless I use shift+arrow so that they move at 10px increments. 

 

I don't like the automatic grid, but I have to use it. I prefer 100 pixels with 10 intersects. The auto grid is annoying.

 

As far as I'm concerned it's a defect and I dont get why it can't be addressed.

 

I also find the view modes a bit confusing but that might be me.

[Dave Vector]

@jaztek I agree.  The functionality must be useful and convenient to add value to the user.  If your goal is to create art that is fully optimized for pixel presentation, you want the tools to make that as easy and intuitive as possible.  I praise the Serif team for how well thought out their suite of digital art tools is, and I like the view modes to be able to preview the output in a raster format.  I think this is clever . 

Hopefully this is on their list for improvement.

[jaztek]

Totally. It's a small problem in the scheme of things. I use it every day so it just frustrates me, probably more than it should.

 

Overall I love both Designer and Photo, they're awesome programs and I'm so happy to not have to use or pay for Adobe.