Create RSS Subscribe buttons using photoshop

Today, in this tutorial i will tell you how to make a cute RSS subscribe buttons for your website using Adobe photoshop.

Steps:

Open a new document in adobe photoshop and make a new folder and name it as “RSS“.

Create a new layer in to RSS folder and name it as “RSS button“.

Draw a square shape using the rectangle tool with corner radius of  5px and apply some gradient color effects to the shape as your desire.

Button shape

Using Direct selection tool and select the shape. After selection, focus to the top right corner of the shape and so you can see the two node points which makes curved corner.

Corner Nodes

Now select the pen tool and get the mouse over any one of the node points at the top right corner and delete one node point.

Then by selecting the Direct selection tool, press ctrl + alt keys and get the mouse over the top right corner node of the rectangle shape. When getting mouse over the node by holding the keys, you can watch the cursor type changed like an inverted ‘v’. By pressing the keys, left click over the top right corner node and drag the mouse slightly to have a arc like structure like shown on the below image.

Node stretch

By using direct selection tool, move and place the top right node at where you can get like a “D” shape.

Node placement

Create a new folder named “rings“ and should also be inside the folder “RSS“. Then draw three circles inside folder rings with your favorite colors over the “RSS button” layer with a stroke width of 7px. By selecting each layers of the rings, set the Fill percentage at zero. These rings should be over the rss shape like shown below

RSS rings

I have given a metallic gradient for the inner circle.

Now we will give some shadow effects to the two outer most circles. Double click one of the rings layer,  select the “inner shadow” check box at the pop up window and set the values as show in the image below.

Shadow settings

After applying inner shadow for one of the circles, copy the layer style by right clicking the layer and select “Copy Layer Style“. Then paste the layer style to the another outer circle. So the image result should be like

Rings shadows

By selecting rings folder as whole, draw a square selection using Rectangular marque tool. This selection should cover a portion of the circles like in the image shown below.

Square selection

Without deselecting the selection, goto Layers => Layer Mask => Reveal Selection. So you can have the selected areas of the selection should only be visible and remaining parts will be invisibe.

RSS waves

Lets make a shadow effect for the RSS button. Create a new layer  over Background layer and outside the RSS folder. Draw a circle shape with radius of little larger than the RSS button and background color dark Grey.
Go to Filter => Blur => Gaussian Blur, set the radius as 4px and apply. Repeat the process again and once again repeat the same with radius of 6px.

Now by selecting the Move tool, reduce the height of the circle like shown in the image.

Shadow stretch

Reduce the shadow layer’s opacity at 85% and move the shape just upwards so its most part covered behind the rss button.

Shadow placement

Now lets, we go to make the button reflection.
Collapse the RSS folder and duplicate it and name it as RSS reflection. Right click over the folder RSS reflection and select “Group into New Smart Object”. Again right click over the new smart object and select “Rasterize Layer”.

By selecting the Move tool select the RSS reflection layer and flip it vertically.

Shape flip

Take the Eraser tool with brush radius: 118px, hardness: 2px, opacity: 100% and erase the bottom half of the flipped shape. Again, set the brush opacity at 77% and erase few more area of the shape.

Reflection

Then as a last step, set the RSS reflection layer’s opaicty at 28% and you have got a cute stylish RSS subscribe icon for your website.