Calvin’s Hub

One time I was asked to create a flowchart diagram. I don’t have Visio which would make things a whole lot easier. I thought about doing it in Adobe Fireworks because it’s easy to create all sorts of boxes and move them around as compared to doing it in Photoshop.

The problem with Fireworks is the built-in Arrow vector. It’s tricky to play around those different points to adjust an arrow’s properties to make it look like an arrow suitable for diagrams.

Good thing there’s also an easier way to create those simple arrow lines needed for your flowchart. Here’s a different method that you can try.

1. First let’s create a couple of boxes with some text. Fireworks has all sorts of boxes available (Rounded, Ellipse, Polygons).

Better group (Ctrl + G) a box and its text so you can move them around easily.

2. Create a line in-between your boxes using the Line Tool (N).

Hold shift so that your line will be straight. Also leave space for the arrowhead.

3. To create the arrowhead, select your line and go to Commands > Creative > Add Arrowhead.

4. Select the side you want the arrowhead to appear. In our case, it will only be at the end. There are 17 types of arrowhead available, I will be using #2 which is smaller. Click Ok when you’re satisfied with your arrowhead.

5. And there you go! Feel free to move the position of the arrow. If you want to color the arrow, you need to ungroup the arrow (Ctrl + Shift + G) before change its color fill.

It’s a crude way to do flowchart but if you’re stuck without Visio then this will do.

Holy crap! After doing this guide and capturing all these screenshots, I just found out that it’s easier to do a flowchart diagram in MS Powerpoint! Aarrrgghh! Why am I so ignorant with the most basic of things?

Hahaha. Oh well. Fireworks decided to put those arrowheads out there for a reason.

• How to Create Sunbursts Using Fireworks
• How to create speech bubbles with Fireworks
• How to create the sticker peel effect in Fireworks
• Creating a Web 2.0 Shiny Text in Fireworks

Filed under: Fireworks Tutorials