2

I'm attempting to create a stylized breadcrumb (below) but am botching the arrow. enter image description here

Is there a more precise and 'economical' method of creating this type of arrow? Preferably one where I retain control of the stroke width and corner radius.

The way I've typically created this arrow is by:

  1. Creating a line via the Line Tool
  2. Rotating my line (appox. 45º clockwise)
  3. Duplicating that line Flipping my new line vertically

  4. Nudging the lines until they touch

  5. Merging the two lines into a new shape
  6. Creating a clipping mask
  7. Then, vertically aligning my new shape within my clipping mask

I'm increasingly having to create these 'modern' arrows for carousels and other UI scenarios and I'm never 100% happy with how they come out. Thanks in advance for your help.

1

Draw a rectangle.

Use the Pen Tool to add an anchor to one side.

Hold down the Option/Alt and click the anchor point again (with the Pen Tool still). This will convert the new anchor to a corner point rather than a smooth point. This ensures the paths remain straight rather than curved.

Use the Direct Selection Tool (white arrow) to select and drag that anchor outward forming the arrow.

Choose Edit > Define Custom Shape

enter image description here

In the future, all you need do is draw your custom shape and apply a mask (if needed) and color to it.

The angle of the arrow can always be altered by simply grabbing the Direct Selection tool again and editing the custom shape you've drawn.

  • Thanks Scott, is there a way to 'distribute the vertical centers' of anchors so they're aligned equidistantly or am I stuck eyeballing it? – Wilhelm Sep 26 '14 at 17:01
  • 1
    You would have to eyeball or manually measure. But the good news is you'd only have to do that once, during the initial set up. – Scott Sep 26 '14 at 18:41
  • Drag a ruler down there. – Preston Sep 27 '14 at 4:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.