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

How do I draw a simple 1-pixel line??


Recommended Posts

27 minutes ago, TomHu said:

Is that really asking too much from a program designed to create bitmap graphics? 

It is certainly not too much to ask, but Affinity Photo was not designed to create bitmap graphics. As the name suggest, it was designed primarily to develop RAW photos & to edit photos & other continuous tone images. It does include a number of resolution-independent vector & text object creation tools; however, they clearly are not optimized for creating pixel-aligned bitmaps. The only tool it includes that is somewhat suitable for that is the Pixel Tool, but it is intended mostly for freehand sketching & only supports constraining to purely horizontal or vertical strokes (via the shift key) in a way that is not well suited for anything else.

We all know this, or at least should from reading some of the many comments already posted about it, so there is not much point in posting more of them to this, the Affinity on Desktop Questions forum. That's because every question about it already has been answered more than once in existing topics. A much more suitable place for this is in the feature requests & feedback forums, because it is really about adding features more suited to creating pixel-aligned bitmaps.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

8 minutes ago, toltec said:

Personally, I don't think it is a program designed to create bitmap graphics.

I gotta be faster -- you beat me to it by ~8 minutes. xD

10 minutes ago, toltec said:

A lot of Photoshop stuff has been added year by year so they could charge you for an annual upgrade fee, which Serif don't do. 

Please, can we not go overboard about any of this? That isn't the only reason for adding features to PS -- clearly, Adobe wants PS to be something of a "everything but the kitchen sink" kind of graphics editing & creation app, & there is nothing inherently wrong with that. As implemented, it does make PS something of a bloated, resource-hungry app with a relatively high cost, but clearly there is a market for that.

But there is also nothing inherently wrong with how Serif has decided to design the Affinity apps, which despite what some users want, is not to be a direct replacement for PS or any other Adobe app, but as alternatives for those who do not want or need all of Adobe's features, its bloat, its cost, etc. There is clearly a market for that as well, particularly for those who want some of the things Adobe does not offer, like a 'universal' native file format across the product range, high memory efficiency, or a more streamlined Persona-based UI, not to mention stellar & highly personalized customer support, strikingly different from the impersonalized, script-driven support most other companies provide.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

On 10/12/2018 at 10:53 AM, toltec said:

Personally, I don't think it is a program designed to create bitmap graphics.

Really?? What do you think a photo is? It's a bitmap image. 

On 10/12/2018 at 10:53 AM, toltec said:

To me it is an image editing program, not a painting program.

It's both, actually. Just look at the Affinity Photo website. If it's not also a painting program, why bother adding brushes, shapes, pixel-alignment tools, guides, text tools, etc.? They are painting and graphics tools. 

64196878_ScreenShot2018-10-14at12_12_40PM.png.34a8f1a88912170fda3a35c877a21cbd.png

Affinity Photo is appealing to the Photoshop crowd, so people like me are going to assume they can use AP to create bitmap graphics as well as edit bitmap photos. So it's not a stretch to assume I should be able to use AP to create pixel-accurate graphics for a website or a brochure. 

Anyway, this has been quite enlightening, and unfortunately it's become clear that AP isn't really well suited for pixel-accurate bitmap graphics despite having lots of tools to do exactly that. So I will stick with Photoshop for now and revisit AP in a year or so when it has matured more to see if I can draw a straight, single-pixel line on the screen and actually get a single-pixel line. 

But I want to be clear that I think Affinity Photo is a very impressive, feature-rich software for anyone who needs to do photo editing and doesn't need or want the extra features that Photoshop includes, not to mention the much higher cost of Adobe products. AP is the only software I've tried that comes close to being able to replace Photoshop, I just hope the developers go a bit further in making that more of a reality in future releases. 

Cheers! 

Link to comment
Share on other sites

2 hours ago, TomHu said:

Really?? What do you think a photo is? It's a bitmap image. 

Not for 150 years or so it wasn’t. But that is history for you ;)

When is the last time you created a ‘photograph’ with brushes in any app. You might have created a piece af artwork, like David Hockney or many other digital artists, but a photograph it ain’t.

As for image creation for bitmap images I would not consider Photo as my first choice. I am certainly not an artist so I don’t really know but from what I’ve heard, Corel Painter or Krita or are among the best, maybe Photoshop but what a price you have to pay!

For vector graphics there are different requirements, maybe Designer but I know there are quite a few thing missing for many, like vector warp, offset paths and setting ruler origins.

As far as I’m concerned (and millions of people worldwide for nearly 200 years) a photograph is something you get when you point a camera at something and press a shutter or button. It is reality, not digital art. That’s not to say it can’t be edited and turned into something more artistic.

When it comes to editing a ‘real’ photograph, Photo is a superb program. It even has some bonus features thrown it, brushes, Guides, text tools etc but that’s the trouble these days, most people want an app to be bloated with every feature known to man.

Here is a bitmap image, it is not a photograph.

40C4380F-B085-4E66-B3FE-685BD1DCAB80.png.5758e0839c5c350a9d5e20534069d039.png

p.s. I’m pretty sure it is not art either xD

Windows PCs. Photo and Designer, latest non-beta versions.

Link to comment
Share on other sites

On 10/9/2018 at 5:45 PM, TomHu said:

All I do is select the line Shape tool, set it to pixels, make sure it's set to 1 px, then draw. I hold down the Shift key while drawing to keep the line perfectly horizontal or vertical. 

That's all I have to do in Photoshop. There's no screwing around with 1/2 pixels or anything like that. 

Here's a screen cap of me drawing two lines to show you how straightforward it is in Photoshop:

 

Correct me if I'm wrong, but that line you made is a bitmap and not exactly a vector, right?

If that's what want to do, please consider using the Pixel Tool (available in Pixel Persona for Designer and Photo Persona for Photo).

image.png.f4e0cee72887ba122cf31ca2ec3421fc.png

Also, unless something has changed, Illustrator uses the half pixel technique automatically, so, the thing with Designer/Photo is that you have to set it manually.

Best regards!

Link to comment
Share on other sites

6 hours ago, TomHu said:

…Anyway, this has been quite enlightening, and unfortunately it's become clear that AP isn't really well suited for pixel-accurate bitmap graphics despite having lots of tools to do exactly that. So I will stick with Photoshop for now and revisit AP in a year or so when it has matured more to see if I can draw a straight, single-pixel line on the screen and actually get a single-pixel line. 

I can't offer any more solutions than others have already done so, however I'm not sure the problem is that Affinity Photo is inaccurate per se.

Pixels are a grid of squares, so the problem is that if the line width is expanded from the centre line outwards equally in both directions, then either only odd line widths or only even line widths are going to fit the pixel grid perfectly depending on where the centre line is placed.  I no longer have Photoshop installed, but it would be interesting to see what Photoshop is doing to overcome this problem.

001.thumb.png.df9d75a063576cdbc27763e677c6e33e.png

Link to comment
Share on other sites

  • 5 months later...

I see nothing has evolved on this point (both AD & AP) :(

I decided to switch to Sketch for my next UI projects. I dropped it when AD have been released, but I've to admit Affinity isn't matching (at all) in this domain (yes I know, Sketch has become immensely specialised on it). But still, both app are sharing a lot.

Not speaking about symbols (which by opposition are crazy reliables on Sketch), this "half pixel" thingy when doing UI design is a pain in Affinity

At least, Affinity Team, provide us with a shortcut to move an item by +-0.5px

In Sketch, moving a line seating on the grid will instantly make it jump to the closest half pixel, thus producing a perfect 1px non antialiased line.

WebSite.pngTwitter.png500px.pngFlickr.png

Link to comment
Share on other sites

1 hour ago, Tazintosh said:

line seating on the grid will instantly make it jump to the closest half pixel, thus producing a perfect 1px non antialiased line.

As far as I know, in beta versions (I tried in APub) should be shift the whole grid - for example, the needed 0.5 px. Then the snapping on a properly set grid (eg 1px + with the appropriately selected Screen tolerance) should ensure correct line placement.

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

Not true in many cases where for no "apparent" reason (could be an adjacent snap), the path jumps by 1px, sometimes by 0.5px, etc.
Designing UI icons etc, is not only about straight line, sometimes, it's a more complex shape which still needs one of it's base to perfectly fit on the pixel grid.

For this reason, a keyboard combination could force a 0.5px step behaviour whatever we do (move, transformation, etc.), disregarding any snap option.

Edit: But in the end, a simple checkbox "Allow half pixel snapping" on the grid setting could solve all of this, without having to set end an heavy looking grid (spacing 10px, division 20px is heavy)

Edit bis: setting a grid with spacing 10px, division 20px, is even not working… I still have unwanted 1px jumps because of some snaps (which by the way I need for many other reasons during the creation). Having the switch snap settings every single time depending the editing you do cannot be the right answer :(

WebSite.pngTwitter.png500px.pngFlickr.png

Link to comment
Share on other sites

2 hours ago, Tazintosh said:

path jumps by 1px, sometimes by 0.5px,

If grid settings is 1px, and Screen tolerance is 50?

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

On 10/15/2018 at 2:29 AM, - S - said:

I can't offer any more solutions than others have already done so, however I'm not sure the problem is that Affinity Photo is inaccurate per se.

Pixels are a grid of squares, so the problem is that if the line width is expanded from the centre line outwards equally in both directions, then either only odd line widths or only even line widths are going to fit the pixel grid perfectly depending on where the centre line is placed.  I no longer have Photoshop installed, but it would be interesting to see what Photoshop is doing to overcome this problem.

001.thumb.png.df9d75a063576cdbc27763e677c6e33e.png

In Photoshop, with a path drawn in shape mode and the path centre aligned, line width increases: top, bottom, depending on an even or odd integer number, at least this is what I am observing. So in your image the path looks like the bottom path and when you make the path 2px it adds to the top, then at 3px it adds to the bottom, and so on.

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

2 hours ago, Tazintosh said:

For this reason, a keyboard combination could force a 0.5px step behaviour whatever we do (move, transformation, etc.), disregarding any snap option.

Not quite what you want but you could set the Nudge Distance in Preferences > Tools to 0.5 px. So with Force Pixel alignment enabled, you could move or transform & then nudge by a 0.5 px step as needed. 

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

17 minutes ago, Tazintosh said:

screen tolerance?

First line in Snapping manager. 

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 minutes ago, Pšenda said:

First line in Snapping manager. 

From the Snapping options section of the Affinity Designer Snapping online help topic:

Quote

Screen tolerance—controls the distance you have to be to an object before snapping occurs.

 

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

1 hour ago, Tazintosh said:

@R C-R Sadly, it's not doing the trick. lines are still snapping to the grid.

If you mean setting the nudge distance to 0.5 px, the trick is to use the cursor keys to nudge the lines by 0.5 px as needed as a separate step. That works independently of any snapping options you have enabled.

All 3 1.10.8, & all 3 V2.4.1 Mac apps; 2020 iMac 27"; 3.8GHz i7, Radeon Pro 5700, 32GB RAM; macOS 10.15.7
Affinity Photo 
1.10.8; Affinity Designer 1.108; & all 3 V2 apps for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 15.7

Link to comment
Share on other sites

Psenda has already provided the best workaround…

On 4/3/2019 at 6:16 PM, Pšenda said:

As far as I know, in beta versions (I tried in APub) should be shift the whole grid - for example, the needed 0.5 px. Then the snapping on a properly set grid (eg 1px + with the appropriately selected Screen tolerance) should ensure correct line placement.

Note: This only works in 1.7 beta

  1. Inset two guides (on vertical and one horizontal) at 0.5px
  2. In the Grid Manager > show Grid Origin
  3. Drag grid origin to intersection of guides (0.5, 0.5)
  4. Set grid to 1px 1 division.
  5. Ensure snap to grid is turned on.
  6. Draw stuff!

658485437_Affinity1pxLines.gif.c291d4d9e89b86021cde88ad73fd94dd.gif

Yes this is a a pain to set up. Yes Affinity should be smarter and do it automatically. But you can save a blank file as a template with this grid setup.

Win10 Home x64   |   AMD Ryzen 7 2700X @ 3.7GHz   |   48 GB RAM   |   1TB SSD   |   nVidia GTX 1660   |   Wacom Intuos Pro

Link to comment
Share on other sites

  • 1 month later...

I was struggling with the same problem - in the end the solution seemed fairly simple - I just set the grid so that I could snap to half pixel resolution. Then I can place a one pixel line in the middle of a pixel space (at 0.5 pixel) or a two pixel line on a pixel boundary.

I am only working on small images, so I have the grid spacing set to 1px with 2 divisions. I can imagine this might be less workable for larger images, but if you are looking for pixel accuracy then I guess you will be zoomed well in and a 0.5 pixel grid will hopefully be workable.

image.thumb.png.08c8e65dd67b5c9e35e77f68b0b7ae5e.png

Link to comment
Share on other sites

  • 1 month later...

So, is this still a problem in the latest version of Photo?

Is it possible yet to draw a single-pixel line with no anti-aliasing or having to shift shapes by half a pixel to avoid blurry, semi-transparent lines? 

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.