Vector RSS Buttons

Blogs first post, So please excuse the messy theme . Recently I was working on a plugin for an open source project and found some images that I wanted to use as part of that project, I wanted the license the plugin as GPL but the images were licensed under Creative Commons 3 (rats). So I needed to create My own Icons, this is what I came up with;

They are also available in PNG and SVG format;

PNG Format
RSS Feed Buttons in SVG format

You should be able to open the SVG version in Adobe illustrator for editing. The following video shows the basics of how they were created. I was rushed in the video to try and keep the time down but I go on to explain in more detail how they were made in the tutorial below the video;

You can get the windows version of inkscape free of charge here;

For linux, use your packager manager to install inkscape.

In case there was anything that you couldn’t see properly in the video, these are the steps that I took to create the buttons, in a little more detail;

Step 1 :- setup construction lines;

The first step is to setup construction lines in inkscape. to do this go to the edge of the canvas, press and hold the left mouse button, then drag the to the right.

Step 2 :- Draw initial shape

Use the construction lines that you setup in the last step to draw the shape of the button. then remove the construction lines by dragging them out of the canvas area. Then right click of the shape and select “Fill and stroke” from the menu, select “stroke style” and then sett the width higher and set to curved corners.

Step 3 :- outline curves

to make the curved edges, left click hold and move the mouse on the center of the diagonal sections that we created earlier, using the “Edit by paths” button (highlighted in green) see the above image.

Step 4:- Change colors

Changing the stroke colors is done by dragging the color selector over to the right, under the “stroke paint” tab in stroke and fill, The next thng we want to do is to add a gradient to the inside of the shape;

Select Fill > The gradient button > Edit, this takes you to the gradient editor, from here you can set the colors that will be used in your gradient;

Set the colors to two shades of the same color. when you are done your button should look something like this;

Step 5:- add shadow

To add the shadow, you need to duplicate the shape that we have already created, right click and select duplicate;

then change is stroke and fill to solid black;

Now all you have to do is set the blur on the shape, so that it is just slightly blurred, ones to are happy with the blur you have to put this new black shape behind the original shape that we created.

Once you have done that you should be left with something that looks like this;

Step 6:- Text, arrow and divider

Now all that’s left to do, is to add the text and white divider line;

To create the divider, use the square tool (highlighted in green), set the square to no stroke (using the button highlighted in red) and the fill color to white, make sure that the square does not have curved edges. Next we have to add the down arrow, use the construction line technique from before;

Next add the font using the button highlighted in green and change the font using the button highlighted in red;

Once you have choose the font you want to use, change it’s color to white and place it on your button. Your button should look similar to this now;

Step 7 Manipulate button gradient

This is the last step, all you ave to do is select the the button/layer that has the gradient and change the direction of the gradient to vertical;

Use the node tool, highlighted in red, to manipulate the gradient line highlighted in green. In the above example I used a construction line to ensure that the gradient it straight.

Summary

Well that’s it folks, I hope you liked this tutorial, feel free to comment, I would like to get some feed back and wouldn’t mind answering any questions you have about this tutorial.

Lee