Design a RSS subscribe button in Photoshop

In this tutorial we’re going to use Adobe Photoshop to create a sleek and modern RSS feed subscribe button using various tools in Photoshop.

Step 1

Create a new document. I used sizes 640 by 300 pixels. Download a texture (Lost & Taken is my favourite site for free textures). Go to File > Place, locate your texture and select it to place it into your document. Reduce the size of the file and decrease the opacity. I ended up with the below image to start working with.

Step 2

Select the Rounded Rectangle Tool and set the corner radius (found in the top toolbar) to 5px. Draw a shape similar to the one seen below.

Step 3

Right-click on your new shape layer and select Blending Options from the menu. Once open, select the gradient overlay tab to apply a gradient to your shape. As orange is associated with RSS feeds due to the RSS icon, that is what we’re going to be using. Change the angle of your gradient to 90 degrees and then click on your gradient bar/editor. Select a dark to medium orange.

Step 4

Now select the drop shadow tab. Change the distance to 0px and the size to 5px. Decrease the opacity to 50% and click OK.

Step 5

Create a new layer above your shape layer (Layer > New Layer). Whilst holding the Cmd-key (Ctrl-key on Windows) click on your shape layers thumbnail in the layers panel. This will create a selection of your shape, as seen below.

Step 6

With the selection still selected on the new layer, go to Edit > Stroke. Apply a 2px white stroke to the inside of your selection and click OK.

Step 7

Reselect the selection and create another new layer (above your previous new layer). Go to Edit > Stroke once more and apply a 1px black stroke to the inside of your selection. Click OK.

Step 8

You should have something like the following image…

Step 9

Change your layer names to something suitable; I used ‘White Stroke’ and ‘Black Stroke’. Select your white stroke layer and change the blending mode to soft light, and the opacity to 75%. This will allow the orange beneath it to show through, creating a nice highlighted effect.

Step 10

Select the black stroke. Change the opacity of this layer to 40%, leaving the blending mode set to normal.

Step 11

Download another texture and then go to File > Place. Locate your texture and place it into your document. Go to Edit > Free Transform and reduce the size of your texture so that it covers your button but not much else, like below. Recreate the selection of your shape layer, and then go to Select > Inverse (or Right-click > Select Inverse). This creates an inverted selection, selected everything but the shape layer.

Step 12

With the new texture layer selected, hit the Delete-key. You should end up with something similar to the following.

Step 13

Change the blending mode of the new texture layer to hard light and the opacity to 8%. We only want this texture to make a subtle change to our button.

Step 14

Duplicate your original shape layer and remove the layer style by Right-clicking and selecting Clear Layer Style. Also browse the net for an RSS button and place this into your document (File > Place). Resize and reposition it into the right side of your button.

Step 15

Change the colour of your new shape layer to white. Right-click on the layer and select Rasterize Layer to turn it into pixels. Select the Rectangular Marquee Tool and create a selection over a large portion of the left side of your button. Hit the Delete-key; you should be left with a white square similar to below.

Step 16

Reduce the opacity of your white square to around 5-25%. Experiment with this as it varies depending on your gradient overlay colours and your texture. Right-click on your RSS icon layer and select Blending Options. Select the drop shadow tab and apply a drop shadow with an opacity of 25%, distance of 0px and size of 10px.

Step 17

Zoom right into the right side of your button using the Zoom Tool. Select the Pencil Tool and change your current selected colour to white. Draw a line next to your white shape layer. Be sure to draw this line onto your already existing ‘White Stroke’ layer that we used earlier.

Step 18

Select the Type Tool and add some white text to your button. I used the phrase ‘Subscribe to our RSS Feed’. Open up the Blending Options for the layer and apply a drop shadow to your text. I used a -90 degree angle, 2px size and a 0px distance. We’re all done!