How to create a Web 2.0 style Arrow using Inkscape

Ever come across those neat graphics of directional arrows and wished you could have them on your site? They can be used for anything from grabbing attention to indicating download links.

Look no further. Here is a step-by-step tutorial that should get you on track, and enable you to create custom graphical arrows.

The tutorial is based on Inkscape, which is an open source vector graphics editor. But that doesn’t mean that the creation process is limited to Inkscape only. You should be able to follow this simple tutorial with other vector graphics editors too.

Step 1

Use the Rectangle Tool to draw a rectangle.

Step 2

Using the same tool, you will need to draw a square – a perfect square that is a little bit wider than the first rectangle.

Instead of fighting with the Rectangle Tool in order to get the perfect square, hold down the [Ctrl] button while drawing the square. The length and height will snap to the same size.

Step 3

Next task is to rotate the square through 45 degrees. With the Select Tool click on the square twice. The selection will change to rotation and skewing mode.

Hold down the [Ctrl] key and use the corner rotate icon to rotate the square in chunks of 15 degrees. Holding down the [Ctrl] keys lets you make snapped rotations. If you do not use the [Ctrl] key, the rotation is free form and through an arbitrary degree.

Step 4

Convert the rotated square to a path, by selecting Path > Object To Path.

Use the Edit Node Tool and select the rotated square shape. Then select the lower node and delete it.

This will give you a symmetric Triangle.

Step 5

Select both the shapes, and choose Align and Distribute Objects option. Next, Center Align them both over the Vertical Axis .

Select only the triangle and move it down over the rectangle.

Select both the shapes and perform a Union operation. This can be done by either pressing down [Ctrl] and [+] keys or through Path > Union. What you have now is a basic arrow shape.

You can apply several vector effects to this and customize it according to your needs. For example, give the arrow shape a fill color, and a darker outline color. Then copy the shape, place it below the first, move it a bit, and turn on the blur. This gives you a fancy shadow effect.

Here’s a short video showing you how to do that.

Or you can also go on to give it a nice glossy look.

This uses the same basic shape to give a solid fill color, and a copy to give the gradient of dark to light from top to bottom. Another copy of the same arrow, combined with a free form shape transformation gives that glossy look on the side.

Here is an example of how you can use the illustration for your website …

Let me know how useful this has been, and also if you would like to learn something else.

Happy vectoring!

Vyoma aka K. Mahesh Bhat dabbles in vector art as a hobby and runs his own arts and graphics design blog titled KalaaLog. This is his first appearance as a guest blogger at Chaos Laboratory.