RSS Buttons Preview

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;

Inkscape 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

Draw the shapes outline

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

Make the edges curved

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

Change outline 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 gradient

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;

gradient editor

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

button gradient

Step 5:- add shadow

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

Duplicate the shape that we have created

then change is stroke and fill to solid black;

Set color to black and blur

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.

Move Blurred layer to bottom

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

The button is really starting to take shape now

Step 6:- Text, arrow and divider

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

Divider

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;

Create down arrow using construction lines

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

Changing the font in inkscape

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;

Button with it

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;

Editing the gradient direction in inkscape

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