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

Outline the stroke of a path/curve


Recommended Posts

Hey,

is it possible to outline the stroke of a path or curve in Affinity Photo?

for example could I take this random curve with varying stroke size and get a shape from the outline?

723661396_Annotation2020-01-09183951.png.8823204bebf9813cc5595277151d5f45.png

 

Thanks

Edit: I meant designer instead of photo sorry :7_sweat_smile:

Edited by CrazyInfin8
Link to comment
Share on other sites

Another method (as per attached image) is to:
* Select the curve;
* menu “Select → Select from Layer” (or CTRL+click on the layer in the Layers Panel);
* menu “Select →Outline”;
* make sure “Circular” is checked in the dialog;
* drag the slider to your required size and press the Apply button;
* go to the Layers Panel and press the “Add Pixel Layer” icon;
* select the Flood Fill Tool, choose your colour, and click inside the selection;
* menu “Select - > Deselect”.
You now have an outline of the original curve.
See the attached GIF for a run-through.

outline-from-curve.gif

Annotation 2020-01-10 083657.png

Link to comment
Share on other sites

Is there some reason you do not want to use Outline ƒx for this? They provide an almost endless number of variations & if you change the path you do not have to redo the outline.

744495519_Outlinexexamples.jpg.beb9bbbf61047c859b17dc8230558746.jpg

Outline ƒx examples.afphoto

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

I guess to be more specific I kinda want to do what is shown in step nine on this page https://m.wikihow.com/Create-an-Outline-in-Adobe-Illustrator. Don’t know if it’s possible in Affinity as yet.

@GarryP this is close to what I want but I didn’t want to make a pixel layer. I wanted the outline to be a vector shape so it can still be edited.

@R C-R I don’t suppose I can take the outline of an fx and turn it into an editable curve right?

Link to comment
Share on other sites

17 minutes ago, CrazyInfin8 said:

I guess to be more specific I kinda want to do what is shown in step nine on this page https://m.wikihow.com/Create-an-Outline-in-Adobe-Illustrator. Don’t know if it’s possible in Affinity as yet.

Step 9 is just converting a stroke to an object (Expand Stroke). Then they add an outline to that object.

AI's Appearance Panel can add strokes to strokes, though. Much nicer effect/control.

Capture_000384.png.fda3a2bb4e32b9ae5f791c5d33ba6087.png

Then add another stroke...

Capture_000385.png.0a02d5d0e8005c7cec5d436aef8b1aa9.png

And so on. Then it is easy to alter the base, single path to change the shape of the stroke.

 

Link to comment
Share on other sites

10 hours ago, GarryP said:

Another method (as per attached image) is to:
* Select the curve;
* menu “Select → Select from Layer” (or CTRL+click on the layer in the Layers Panel);
* menu “Select →Outline”;
* make sure “Circular” is checked in the dialog;
* drag the slider to your required size and press the Apply button;
* go to the Layers Panel and press the “Add Pixel Layer” icon;
* select the Flood Fill Tool, choose your colour, and click inside the selection;
* menu “Select - > Deselect”.
You now have an outline of the original curve.
See the attached GIF for a run-through.

outline-from-curve.gif

Annotation 2020-01-10 083657.png

Cool, thanks, I did it a lot faster with this method.

Outlining An Object.jpg

Link to comment
Share on other sites

11 hours ago, GarryP said:

....

outline-from-curve.gif

Annotation 2020-01-10 083657.png

The bad here, from a previous curve/vector object, the applied outline selection get's pixel then in APh.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

1 hour ago, MikeW said:

Step 9 is just converting a stroke to an object (Expand Stroke).

True, but in the OP @CrazyInfin8 asked how to outline the stroke in Affinity Photo. Since there is no Expand Stoke feature in AP, one of the suggested methods would have to be used. :( 

 

2 hours ago, CrazyInfin8 said:

@R C-R I don’t suppose I can take the outline of an fx and turn it into an editable curve right?

Not unless you have Affinity Designer, Adobe Illustrator, or some other app that can expand the stroke like Mike suggested. But if you want the outline to always follow the shape of your curve, the outline  ƒx method will do that.

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

4 minutes ago, haakoo said:

create curve,duplicate make smaller,blend mode erase, group

How do you make a curve smaller in AP & still retain its shape?

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

19 minutes ago, R C-R said:

True, but in the OP @CrazyInfin8 asked how to outline the stroke in Affinity Photo. Since there is no Expand Stoke feature in AP, one of the suggested methods would have to be used. :( 

 

Not unless you have Affinity Designer, Adobe Illustrator, or some other app that can expand the stroke like Mike suggested. But if you want the outline to always follow the shape of your curve, the outline  ƒx method will do that.

If the OP wants do emulate AI, then they should be using AD...

But, I failed to read the first paragraph properly. Else I suspect I wouldn't have posted...

Link to comment
Share on other sites

2 hours ago, CrazyInfin8 said:

I guess to be more specific I kinda want to do what is shown in step nine on this page https://m.wikihow.com/Create-an-Outline-in-Adobe-Illustrator. Don’t know if it’s possible in Affinity as yet.

@GarryP this is close to what I want but I didn’t want to make a pixel layer. I wanted the outline to be a vector shape so it can still be edited.

@R C-R I don’t suppose I can take the outline of an fx and turn it into an editable curve right?

The things showed here so far will not preserve a vector shape then and instead give you a pixel based shape outline. With APh alone it's difficult to get the vector outline you want, especially if you don't have a companion vector tool (AD, Ai, Inkscape etc.) or some tracer helpertool as a workaround.

aph_trace.jpg.7ddb90d666865fb840dcac14a31322ee.jpg

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

4 minutes ago, CrazyInfin8 said:

shoot... I meant Affinity Designer sorry

Well, that's another story then and easy to do, aka vector to vector.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

1 minute ago, v_kyr said:

@CrazyInfin8Just do what MikeW showed above for Ai, Affinity Designer has too an Appearence panel for such multiple strokes.

Yeah i could puts strokes on top of strokes but wanted to if I could have the outline become a shape

I guess one reason to do this is I could take a line or a curve that isn't really "closed" and turn it into a shape that is "closed"

But i'm not sure if it is possible to do similar to how Ai can do it

Link to comment
Share on other sites

9 minutes ago, CrazyInfin8 said:

I kinda was wondering if there was a way to do this

In AD, expand stroke does that but because the expand stroke algorithm is (to put it kindly) somewhat less than what one might hope for, it tends to produce a hugely excessive number of nodes:

1265452702_ADexpandstroke.jpg.b10f176bc69fa0d9ffbb705e7778ea78.jpg

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

Just now, R C-R said:

In AD, expand stroke does that but because the expand stroke algorithm is (to put it kindly) somewhat less than what one might hope for, it tends to produce a hugely excessive number of nodes:

  1265452702_ADexpandstroke.jpg.b10f176bc69fa0d9ffbb705e7778ea78.jpg

Oh actually that was exactly was I was searching for

so Outline Stroke from Adobe is the same or similar Expand Stroke in AD

Thanks!

 

Link to comment
Share on other sites

46 minutes ago, haakoo said:

Unless you do it in the 1.8 beta ;)

The latest Mac beta handles that much better but unfortunately, at least on my iMac, it has some serious stability & usability issues that make it unsuitable for anything other than some quick & careful tests. :(

It would not be so bad except that when it hangs it can take several minutes for the Mac Force Quit function to actually quit the app, during which it remains on screen & interferes with anything else I am trying to do. 

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

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.