Graphics & Design · August 27, 2007 6

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 Rectangle Tool icon to draw a rectangle.

Rectangular base for the arrow.

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.

Square above the Rectangle

HintInstead 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 Select Tool icon click on the square twice. The selection will change to rotation and skewing mode.

Skew and Rotation 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.

Sqaure rotated through 45 degrees

Step 4

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

Convert the Square to a Path

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

Symmetric Triangle

This will give you a symmetric Triangle.

Step 5

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

Selected Square and Triangle

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

Triangle moved 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.

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.

Arrow filled with colours and with a shadow

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

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

Glossy Arrow

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 …

Download Link using the Arrow

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.