Return to Firewoiks

Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5 / CSS3 by UI developer, .

How to Create Circular Arrows

Posted: July 06 2008

A user in the Fireworks Support forum wanted to know how to create circular arrows. Well here goes…

Circular Arrows

  1. Create a new 300x300 document
  2. In the centre, draw a 200x200 solid circle with no stroke
  3. Clone the circle
  4. Numeric Transform (Ctrl+Shift+T)
  5. Rotate 120 degrees
  6. Zoom in to the node on the bottom right
  7. Drag out two guides that intersect the node. Because of the pixel grid, they may be slighgtly off
  8. Delete the circle
  9. Select the original circle
  10. Clone it again
  11. Numeric Transform (Ctrl+Shift+T)
  12. Resize to 160x160
  13. Select both circles
  14. Modify > Combine Paths > Punch to create a doughnut
  15. Zoom out to 100%.
  16. Draw a large rectangle that covers the left side of the circle. You may want to change its fill colour and zoom in to line up the edge with the central nodes of the doughnut
  17. Select both objects
  18. Modify > Combine Paths > Punch to create half a doughnut
  19. Draw another large rectangle
  20. Numeric Transform (Ctrl+Shift+T)
  21. Rotate 120 degrees
  22. Position the rectangle so that its top edge intersects the guides, and covers the bottom of the doughnut
  23. Select both objects
  24. Modify > Combine Paths > Punch to create a third of a doughnut
  25. Draw a 36x36 rectangle
  26. Position against the top edge of the doughnut, so that 8 pixeld extend from the top and bottom
  27. Select the Subselection tool
  28. Select the top-right node
  29. Press Delete
  30. Numeric Transform (Ctrl+Shift+T)
  31. Rotate 45 degrees
  32. Nudge it against the doughnut shape's edge
  33. Select both objects
  34. Modigy > Combine Paths > Union
  35. Set the gradient to Linear
  36. Move the gradient's start node to the centre of the arrow head
  37. Move the gradient's end node to the centre of the bottom edge of the path
  38. Set the gradient's colours to be Red to White
  39. Clone the path
  40. Numeric Transform (Ctrl+Shift+T)
  41. Rotate by -120 degrees
  42. Position the new path so the back of it sits inline with the back of the other path's arrowhead.
  43. Press Ctrl+Down to Send it Backwards
  44. Change its first fill colour to Blue
  45. Clone the path
  46. Numeric Transform (Ctrl+Shift+T)
  47. Rotate by -120 degrees
  48. Position the new path so the back of it sits inline with the back of the other path's arrowhead.
  49. Press Ctrl+Down to Send it Back
  50. Change its first fill colour to Green
  51. Clone the path
  52. Press Ctrl+Shift+Up to Bring it to the front
  53. Add the Red arrow to the selection
  54. Modify > Combine Paths > Punch to cut out the arrow head from the end of the Red arrow.
  55. Hide the guides and you're done

Download the original Fireworks PNG (68Kb)