Jump to content

Recommended Posts

Hi GuyM,

 

Welcome to the forums.

 

Affinity Designer has an Arrow Tool as part of the Quickshapes flyout panel, it also has nodes for you to adjust the layout of the arrow shape.

Share this post


Link to post
Share on other sites

Also, "Arrow head line styles" are on the Affinity Designer feature roadmap, so while that does not answer the "when" question it means we will get that feature ... eventually.


Affinity Photo 1.7.1 & Affinity Designer 1.7.1; 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.0.135 & Affinity Designer 1.7.0.9 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

can you tell me where to find the quickshapes flyout? I am new to affinity and only on a trial at the moment while i assess it's suitability. Best Regards, Guy M. 

Share this post


Link to post
Share on other sites

The shapes flyout is the 15th tool down from the top. right under the rounded square. There are about 20  predefined shapes, with hundreds variations possible. The arrow shape has at least 40 variants.


iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Share this post


Link to post
Share on other sites

Thank you that advice. my gosh thats a clumsy tool to use to draw arrows! I need to be able to draw a line and select an arrowhead one end and maybe a dot or line or another arrow at the other. I appreciate your support and help none the less.

Share this post


Link to post
Share on other sites

Thank you that advice. my gosh thats a clumsy tool to use to draw arrows! I need to be able to draw a line and select an arrowhead one end and maybe a dot or line or another arrow at the other. I appreciate your support and help none the less.

 

Yeah, its an element that lots of people need/want. The topic has cropped up repeatedly. As I recall, this thread has a member's workable add on: https://forum.affinity.serif.com/index.php?/topic/3723-arrow-brush/?hl=%2Barrow+%2Bbrush


iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Share this post


Link to post
Share on other sites

Thank you that advice. my gosh thats a clumsy tool to use to draw arrows! I need to be able to draw a line and select an arrowhead one end and maybe a dot or line or another arrow at the other. I appreciate your support and help none the less.

 

A lot of people are looking for this, and they don't realize it's right under their noses. You can create your own vector brush as long as you export it as an image file with a black background and then import it in the Brushes tab as a "Textured Intensity Brush." Just export and then import the arrow smart shape. (Make sure you export it with a black background before importing it back in.)

 

Credit goes to Ronny .


The website is still a work in progress. The "Comics" and "Shop" sections are not yet ready. Feel free to connect with me and let me know what you like or what can be improved. You can contact me here, on my contact page, YouTube channel, or Twitter account. Thanks and have a great day!

Share this post


Link to post
Share on other sites

While we wait for a proper arrowhead tool, can we please have an option to gang the left and right parameters in the arrow shape generator?

 

Currently, you have to adjust one end and then tediously copy and paste the values into the other.  Why?

 

 

arrowEnds.png

Share this post


Link to post
Share on other sites

How do you make an arrow with a dashed line segment?
I tried this, but the arrowhead also gets dashed, resulting in a big mess.

Btw. quite a strange way to set up arrows. The options to style the arrow are quite good, but it's very non-intuitive.

 

Schermafbeelding 2017-12-08 om 17.44.53.png

Share this post


Link to post
Share on other sites

Hello, could you tell me how you managed to get it to just draw a line with an arrow on it in the 1st place? I would be most grateful for your advice.

Share this post


Link to post
Share on other sites

A file to look over. Work around techniques for now.

 

WorkAroundFun.afdesign


iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Share this post


Link to post
Share on other sites

Another possibility is to define some in SVG, then import the SVG text file and make a reusable custom asset category out of these.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400px" height="210px">
	<line stroke="#000" stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" stroke-width="2"/>
	<path d="M0,10 L10,5 L10,15 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" stroke-width="2"/>
	<path d="M0,30 L10,25 L10,35 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" stroke-width="2"/>
	<path d="M0,50 L10,45 L10,55 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" stroke-width="2"/>
	<path d="M0,70 L10,65 L10,75 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" stroke-width="2"/>
	<path d="M0,90 L10,85 L10,95 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" stroke-width="2"/>
	<path d="M0,110 L10,105 L10,115 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" stroke-width="2"/>
	<path d="M0,130 L10,125 L10,135 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" stroke-width="2"/>
	<path d="M0,150 L10,145 L10,155 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" stroke-width="2"/>
	<path d="M0,170 L10,165 L10,175 z" fill="#000" />
	<line stroke="#000" stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" stroke-width="2"/>
	<path d="M0,190 L10,185 L10,195 z" fill="#000" />
</svg>

Screenshot-2017-12-9.png.f11a2e5b18015f25148809a0a9727f6e.png


☛ Affinity Designer 1.7.0 ◆ Affinity Photo 1.7.0 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites
6 hours ago, gdenby said:

A file to look over. Work around techniques for now.

 

WorkAroundFun.afdesign

 

Thanks. What is creating the arrowhead on that curved line? I don't see it defined anywhere.

 

Quote

Another possibility is to define some in SVG

 

Cool. Where in that SVG are the arrowheads specified?

Share this post


Link to post
Share on other sites
20 minutes ago, v_kyr said:

Another possibility is to define some in SVG, then import and make a reusable asset category out of these.

That works pretty well: v_kyr's arrows.afassets

 

EDIT: but it is a bit of a challenge if the path needs to be bent. :/


Affinity Photo 1.7.1 & Affinity Designer 1.7.1; 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.0.135 & Affinity Designer 1.7.0.9 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

Share this post


Link to post
Share on other sites

The first line:

<line stroke="#000" stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" stroke-width="2"/>

...defines the line style, aka stroke color, dasharray type, positioning and length (x1,y1 to x2,y2) and the stroke thickness.

The second line:

<path d="M0,10 L10,5 L10,15 z" fill="#000" />

...draws an arrow head -> moveto x,y, lineto x,y, lineto x,y, and z=closepath, fill color=black.

So the arrow head is defined here via an path element command. - Of course there can also be defined/drawn other different looking arrow heads.


☛ Affinity Designer 1.7.0 ◆ Affinity Photo 1.7.0 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

The w3school and some other sites have quite good online tutorials where you also can immediately try out the code and play around with certain SVG commands here. - Though all you need is a command reference, a text editor and a webbroser (FF, Chrome etc.) in order to try out things locally. - I recall that Inkscape also offers a lot of useful things here, since it highly uses the SVG format too.


☛ Affinity Designer 1.7.0 ◆ Affinity Photo 1.7.0 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites

Thanks. I tried Inkscape years ago because, on the Mac, there weren't any other alternatives to Illustrator; Illustrator is essentially defunct, and so crippled by design flaws (like the inability to set the selection mode to "only objects fully contained by the marquee") that I would run Corel Draw in a Windows VM just to avoid it.

 

But in the end I didn't want to install all of Inkscape's dependencies. I don't know if they've done anything about that or not.

 

I bought Designer right away after seeing that it doesn't suffer from that glaring Illustrator defect, but I'm baffled at some of the things that are still missing and other problems that should never have been conceived, let alone shipped.

Share this post


Link to post
Share on other sites

Related to Inkscape, if you mean it's XQuartz dependency, no it looks like it sadly hasn't changed at all in that way and still needs it. ADesigner well there is still much room for improvements here too!


☛ Affinity Designer 1.7.0 ◆ Affinity Photo 1.7.0 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites
7 hours ago, Stokestack said:

 

Thanks. What is creating the arrowhead on that curved line? I don't see it defined anywhere.

 

 

Look at the pressure profile for the stroke. Changing the pressure graph allows the appearance of dynamic strokes. Also, as in this case, adding a geometric shape at one end. Manipulating the graph can be fussy, because it is so small, but after some work, the stroke shapes can be saved as styles.


iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Share this post


Link to post
Share on other sites
12 minutes ago, gdenby said:

Manipulating the graph can be fussy, because it is so small

 

It would be great to be able to float the pressure graph window and resize it. I’m sure this is already in a feature request thread somewhere.


Alfred online2long.gif
Affinity Designer 1.7.0.367 • Affinity Photo 1.7.0.367 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.7.0.135 • Affinity Designer for iPad 1.7.0.9 • iOS 12.3.1 (iPad Air 2)

Share this post


Link to post
Share on other sites

I think that the Inkscape installation via MacPorts or Homebrew do already take care of the needed dependencies here.

Beside that there are also some other quick turnaround SVG tools available which allow to draw stuff, like:


☛ Affinity Designer 1.7.0 ◆ Affinity Photo 1.7.0 ◆ OSX El Capitan

Share this post


Link to post
Share on other sites
1 hour ago, owenr said:

The current Inkscape for macOS just requires you to download and run the XQuartz installer first. 

And probably log out & back into your user account, not that that is a big deal. But XQuartz does install a lot of files (I think about 200 MB for the current version), & some users may not want to devote that much file space to something they probably won't use with much besides Inkscape. 


Affinity Photo 1.7.1 & Affinity Designer 1.7.1; 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.0.135 & Affinity Designer 1.7.0.9 for iPad; 6th Generation iPad 32 GB; Apple Pencil; iOS 12.3.1

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

×