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

Creating a "Stroke" outline


Recommended Posts

I'm trying to transition from Photoshop (CS4) which I'm quite comfortable with for general editing, but I find it hard to relearn many tasks that I've regularly done with Photoshop.

One of them is creating an "outline" (for instance, creating a circle or rectangle around a part of an existing image in order to point attention to it). In Photoshop I simply create a Marquee where I want it, then go to the "Edit"-"Stroke" menu to actually create it. See my screenshot below which I've done in Photoshop. How do I do this in Affinity Photo?
 

stroke_photoshop.png

Link to comment
Share on other sites

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

  • 3 weeks later...

Thanks to both of you. It worked great! It was very cool to see that if I wanted to draw more outlines in the same photo I could just select a shape, and the stroke width and transparent (none) fill was already in place. Very nice!!

Adjusting/changing years worth of workflow from Photoshop is tricky, but of course doable if one perseveres. I'm sure there are many people in this forum who have gone from Photoshop to Affinity Photo (and never looked back). This is probably worth starting a new thread about though, and I'm going to see if there have already been threads written on the subject.

Edited by Chroma
Link to comment
Share on other sites

  • 1 month later...

Since I no longer edit photos daily I had to look up this thread again when needing to do this again. 

Contrary to remembering all the steps, is there an easier and more intuitive way to do this? Perhaps adding a menu item (as in Photoshop for doing this), creating a macro or something similar (I'm not familiar enough with Affinity Photo to know what's possible yet)?

Link to comment
Share on other sites

7 minutes ago, Chroma said:

Since I no longer edit photos daily I had to look up this thread again when needing to do this again. 

Contrary to remembering all the steps, is there an easier and more intuitive way to do this? Perhaps adding a menu item (as in Photoshop for doing this), creating a macro or something similar (I'm not familiar enough with Affinity Photo to know what's possible yet)?

You could create some different frames and add them to the Assets panel. After that you could simply drag the frames you want from the panel onto your image whenever you need it.

Link to comment
Share on other sites

35 minutes ago, Chroma said:

creating a macro

is certainly possible. Here's a quick dirty version I created a while back to stroke a marquee

StrokeSelection.afmacro

Microsoft Windows 11 Home, Intel i7-1360P 2.20 GHz, 32 GB RAM, 1TB SSD, Intel Iris Xe
Affinity Photo - 24/05/20, Affinity Publisher - 06/12/20, KTM Superduke - 27/09/10

Link to comment
Share on other sites

12 hours ago, iconoclast said:

You could create some different frames and add them to the Assets panel. After that you could simply drag the frames you want from the panel onto your image whenever you need it.

I had no clue what an asset was, but looked it up, and managed to create a few useful ones! I also figured out that you can add stuff you make (like strokes) to the assets by right-clicking and selecting "Create style". So now I have them readily available at any time! Very useful, so thank you for suggesting this to me!
500746155_ScreenShot2022-02-28at21_31_40.png.90735e800cd0b20afa397b42e2b39881.png

 

11 hours ago, David in Яuislip said:

is certainly possible. Here's a quick dirty version I created a while back to stroke a marquee

StrokeSelection.afmacro 1.25 kB · 1 download

This would be great to try out. Thanks.
I suppose I need to place it in a specific folder first. I'll look it up and give it a go.
UPDATE: I found out how to add the macro file here, but I'm not sure how to use it...

Link to comment
Share on other sites

11 hours ago, Chroma said:

UPDATE: I found out how to add the macro file here, but I'm not sure how to use it...

Open the Library Studio Panel (you'll find it in the "View" menu under "Studio"). In german it's called "Bibliothek", so I think it will be called "Library" in english. In this panel you should find the Macro if you added it right. Open it's category and click on it. That should make it do its work.

Edit: Macros don't belong to the "Assets" panel. You have to import it into the "Library" panel. For recording your own Macros, there is also a "Macros" panel. But to execute Macros, you need the "Library".

Link to comment
Share on other sites

  • 9 months later...

hi.

 

This makes no sense.  I have a blank new document.  Nothing on it.

I grab the marquee tool thing, and draw a rectangle.  I want to have a border around that rectangle.  HOW is this done?  In Photoshop, which I'm starting to think is a FAR superior program than this noise, I simply choose "edit" then "stroke".  Done.  This dopy program?  No clue.

...and I love the way you guys reference these deep menus - because any new user doesn't know what these menus are or even how to display them!  "Library Studio Panel"?  What is that?  Where do I even FIND that. 

I really wanna get away from the whole Adobe thing, but I'm really starting to think that I wasted $40 on this 'program'.

Link to comment
Share on other sites

7 hours ago, jakdracula said:

HOW is this done?

Exactly as stated in the previous posts.

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

7 hours ago, jakdracula said:

"Library Studio Panel"?  What is that?  Where do I even FIND that. 

The Interface Visual Reference in Affinity Help will help you get acquainted with the Affinity UI:
https://affinity.help/photo2/en-US.lproj/pages/Workspace/interface.html
 Hover mouse over different areas (or tap) to see what they're called.

Studio panels are accessed in Window in the menu bar.

Link to comment
Share on other sites

7 hours ago, jakdracula said:

This makes no sense.  I have a blank new document.  Nothing on it.

I grab the marquee tool thing, and draw a rectangle.  I want to have a border around that rectangle.  HOW is this done? 

The marquee tool is one of several pixel selection tools. It will have no effect on a blank document since it has no pixel layers to select anything from.

To do what you want, you could use the Rectangle Tool to create a rectangle object layer, which will be a vector object. You can then give it a stroke of whatever size you want & if desired give it a fill color as well. Since it is a vector object, you can at any time change the stroke or fill however you want.

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

There is a resistance to Affinity Photos world of workarounds when people come from the indoctrinated world of Photoshopism, the ism aggravates the mind and creates cognitive dissonance, people want Affinity Photo to be the same as Adopey Photoshop so they can carry on without the need for change in their world other than to not pay a monthly subscription and move to a more sedate "versions subscription"; didn't think of it like that did ya 😉 

 

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

16 hours ago, jakdracula said:

but I'm really starting to think that I wasted $40 on this 'program'.

Why would you wasted money unnecessarily on something? After all, you first thoroughly test the application to see if it suits you and does exactly what you require, and only then do you buy it.

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

17 hours ago, jakdracula said:

I grab the marquee tool thing, and draw a rectangle.  I want to have a border around that rectangle.  HOW is this done?

Well the marquee tool is just one of the selection tools ...

sel-tools.jpg.8f0ed34a841660b043daaf9138112915.jpg

... and so none of shape tools at all.

Just use one the shape tools (rectangle, circle/oval ... etc.) instead ...

shape-tools.jpg.249d688fdcf215929da9d9cd5c7134af.jpg

... and draw a rect, ellipse, or whatever around the screen portion you want to have a border around. Then adjust it's stroke (border line thickness) & color, apply no fill color that's all to it! -- It's pretty easy once you've familiarized with it.

☛ 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

I didn't think there was a simpler or more intuitive means of doing what's required than using one of the shape tools, as suggested above.

All I would add is to consider using the 'Scale with object' option if the outline shape is to be copied and pasted to a larger or smaller photo.

outline.png

Link to comment
Share on other sites

As a side note:
Unless you are working in 72 ppi resolution or its multiple, in Photo you may want to disable Preferences > User Interface > Show Lines In Points, so that your stroke unit is pixels. Otherwise you may often end up with non-integer stroke widths, resulting in antialiasing. 
(I only just realized this a few minutes ago while editing a photo that I once took with my old Olympus µ-mini camera which has a default ppi of 314 for some weird reason, and noticing that those 1pt stroke vector shapes I added are antialiased…)

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

20 hours ago, jakdracula said:

I really wanna get away from the whole Adobe thing, but I'm really starting to think that I wasted $40 on this 'program'.

You know how to use Photoshop. How did you learn to use Photoshop? As you're seeing Affinity is not Photoshop. The UI resembles PS, that's just so folks like you, will feel just a little more at ease with Affinity. The caveat is you have to learn to use Affinity.

Affinity Photo 2.4..; Affinity Designer 2.4..; Affinity Publisher 2.4..; Affinity2 Beta versions. Affinity Photo,Designer 1.10.6.1605 Win10 Home Version:21H2, Build: 19044.1766: Intel(R) Core(TM) i7-5820K CPU @ 3.30GHz, 3301 Mhz, 6 Core(s), 12 Logical Processor(s);32GB Ram, Nvidia GTX 3070, 3-Internal HDD (1 Crucial MX5000 1TB, 1-Crucial MX5000 500GB, 1-WD 1 TB), 4 External HDD

Link to comment
Share on other sites

4 hours ago, Ron P. said:

The caveat is you have to learn to use Affinity.

It also helps if you learn the difference between vector & raster (pixel) object types & which tools work with each of them.

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

^ Especially if you're coming from Schmotophop where working with vectors is a major p.i.t.a.…

MacBookAir 15": MacOS Ventura > Affinity v1, v2, v2 beta // MacBookPro 15" mid-2012: MacOS El Capitan > Affinity v1 / MacOS Catalina > Affinity v1, v2, v2 beta // iPad 8th: iPadOS 16 > Affinity v2

Link to comment
Share on other sites

  • 10 months later...
On 12/22/2021 at 9:28 AM, GarryP said:

There will be lots of ways to do what you want but the simplest is to probably draw a shape – rectangle, ellipse, etc. - and give it a Stroke outline of a few pixels and a Fill of None – see attached video. The shape can then be moved/modified as you require.

This illustration would be helpful except it does not show how to get to the screen with the stroke options. None of the options shown are visible to me.

I used the Freehand Selection Tool to select some pixels. 

How on earth do I get to a dialog that allows adding a stroke to those pixels?

As an advanced user of Photoshop (with decades of experience), I feel that something this simple should not be so hard. 🙂

The paradigm shift here is frustrating to say the least. Can anyone help an old dog learn new tricks?

Link to comment
Share on other sites

8 minutes ago, Doug Joseph, Design8Studio said:

None of the options shown are visible to me.

Screenshot?

 

8 minutes ago, Doug Joseph, Design8Studio said:

I used the Freehand Selection Tool to select some pixels. 

How on earth do I get to a dialog that allows adding a stroke to those pixels?

Freehand or any "Selection" Tool doesn't include options for Stroke settings - it's a selection tool, not a drawing tool. What Garry is showing is the Shape tool, which of course has a Stroke setting.

Edited by Pšenda

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

See previous post - Hand (and Selection) Tool is not used for drawing and therefore does not have Stroke setting option.

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

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.