Jump to content
TomHu

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.


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
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.


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
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! 

Share this post


Link to post
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.

Share this post


Link to post
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!


You'll never know what you can do until you get it up as high as you can go!   

AMD FX 8350 :: Radeon HD 7870 :: Windows 10 ::  http://mithferion.deviantart.com/

Oxygen Icons :: Free Quality Fonts :: Public Domain Pictures :: iOS 11 Design Resources :: iOS App Icon Template :: Hot to do High Quality Art :: Mesh Warp / Distort Tool Considerations

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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: Affinity Suite (ADe, APh, APu) 1.7.3.481.
Windows 10 Pro, Version 1909, Build 18363.476.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.

Share this post


Link to post
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

Share this post


Link to post
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: Affinity Suite (ADe, APh, APu) 1.7.3.481.
Windows 10 Pro, Version 1909, Build 18363.476.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.

Share this post


Link to post
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" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

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

Share this post


Link to post
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. 


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
Share on other sites
17 minutes ago, Tazintosh said:

screen tolerance?

First line in Snapping manager. 


Affinity Store: Affinity Suite (ADe, APh, APu) 1.7.3.481.
Windows 10 Pro, Version 1909, Build 18363.476.
Dell Latitude E5570, i5-6440HQ 2.60 GHz, 8 GB, Intel HD Graphics 530, 1920 x 1080.
Dell OptiPlex 7060, i5-8500 3.00 GHz, 16 GB, Intel UHD Graphics 630, Dell P2417H 1920 x 1080.

Share this post


Link to post
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.

 


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
Share on other sites

Hi Folks,

@Pšenda thanks for the suggestion, but I will not touch my screen tolerance settings, which is good as default for my needs. Again, the point is not having to switch settings all the time for simple tasks.

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


WebSite.pngTwitter.png500px.pngFlickr.png

Share this post


Link to post
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.


Affinity Photo 1.7.3, Affinity Designer 1.7.3, Affinity Publisher 1.7.3; macOS High Sierra 10.13.6 iMac (27-inch, Late 2012); 2.9GHz i5 CPU; NVIDIA GeForce GTX 660M; 8GB RAM
Affinity Photo 1.7.3.155 & Affinity Designer 1.7.3.1 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iPadOS 13.1.2

Share this post


Link to post
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.


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

So far as I am aware you still need to use one of the workarounds suggested above.


Win7 Ultimate x64   |   i5-3570K @ 3.4GHz   |   16 GB RAM   |   120 GB SSD   |   nVidia GTX 660 Ti   |   Huion 1060 Plus

How I make GIFs >>> ScreenToGIF (Windows only, Open Source, Portable, ~600kB)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | 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.