Inkscape is a truly amazing Vector Drawing program. It is available for free using the Open Source License. . The latest pre-release version is available in the form of a self installing .exe file and can be downloaded Here.This version has some really wonderful new features, some of which I have mentioned in another Hub about the new importing features which enable you to import Corel Draw Files.

This Hub is about creating Web Graphics using Inkscapes new Filters. First install Inkscape and then open the Program. If you have never used Inkscape before I highly recommend the free online manual available Here. You can also visit my own training web site www.inkscapetutorials.net for more free training.

Now you have opened the program create some text as I have done in the third Image from the top of the page. I used a nice solid block type face and gave it a fill of Red.

Make sure you have the text selected with the Selection tool. From the main menu choose Filters > Bevels > Pressed steel. Your Image should look like the image fourth from the top.

You will notice that the Image of the text does not look very sharp. Don't worry about this, it is only the preview that is not sharp. We will export the text as a .png (Portable Network Graphics) file and you will seel the real quality of the Image.

With the filtered Text Selected choose File > Export Bitmap from the main menu. You will see the dialog as the Image above called 'exporting finished artwork' . In this dialog you must set the file name, the file resolution and the file destination. I have set the resolution at 150dpi, but for the Web I suggest 72dpi or 96dpi. When you have set the parameters click the Export button. Png files are perfect for the Web, they are small in size, have a transparent background but have very high clear quality.

You can Import the file back into Inkscape by choosing File > Import from the main menu and choose the file you have just exported. You will immediately see the high quality of the created file.

For the second Blue Text Image at the top of the page I used the Bevel Filter called Glossy Jelly Backlit. I exported the Image and then Imported it. To create the reflection I did the following. Right click on the Image and choose Duplicate from the pop up menu to make a copy of the Image. The copy will be placed on top of the original. Drag the new image below the original and choose Object > Flip vertical from the main menu. Using the Selection Tool you can highlight the copy and use the Scew handles to scew the Image.

From the main menu you can then choose Object > Fill and Stroke to bring up the dialog. Because the Object is a Bitmap, you can't change its Fill or Outlne, but you can change its transparency by moving the Transparency slider at the bottom of the dialog. Now you have created text and a reflection you can select them both and export them as a png file ready for the Web.

There are lots of new and exciting filters that apply to Bitmaps and Vector images like the text we originally created. You can apply these filters to any shape. Fabulous stuff, have a fiddle and experiment with the filters. There is a more in-depth tutorial on filters at my Web Site Inkscape tutorials.

Cheers - May the Graphics be with you!