Design a facebook side tab button using Photoshop

In this step-by-step tutorial, we will design a Facebook rollover side tab button you can use on your website.

Create a new Photoshop document, size 76 x 100 and Transparent background.

Drag a guide to the middle of a document (see picture).

Just click the ruler and drag the line to the middle of a document. If you don't see any rulers, press Ctrl + R to make them visible.

Set 2d598e color code as a new foreground color.

Just double click the color icon and enter the code into # field.

Choose the Rounded Rectangle Tool.

Set Radius to 5 px.

And draw a rounded rectangle the same way I did.

Click here to download png file you will need in the steps to follow.

Open the file and choose Rectangular Marquee Tool.

Select facebook and press Ctrl + C to copy selection.

Go back to your document and press Ctrl + V to paste your selection.

Press Ctrl + T, right click the selection and choose Rotate 90 CCW

Click and move selection to the left (see picture).

Press Enter.

Select both layers and set Opacity to 80%.

Hold Ctrl key to select more then one layers at a same time.

Now go Dreevoo_com_facebook_tag.png file again, choose the Rectangular Marque Tool, select the mouse pointer and press Ctrl + C.

Go back to you original document, press Ctrl + V to paste the mouse pointer and move it to the same position as I did.

Right click the new mouse pointer layer and choose Drop Shadow...

Choose the same settings as I did and click OK.

Choose the Rounded Rectangle Tool.

Draw a rounded rectangle on the right half of your document (see picture) ...

... press Ctrl + T, right click the new rectangle and choose Rotate 180.

Now choose the Facebook layer and press Ctrl + J to duplicate the layer.

Click the new duplicated layer and drag it to the top of the layers.

Click the facebook and drag it to the middle of the right side of the document (see picture).

Choose the top two layers (duplicated facebook and right rectangle layer) and set Opacity to 90%.

Hold the Ctrl key to select more then one layer.

Now choose the right side rectangle layer, right click it, choose Blending Options and the choose Gradient Overlay.

Set Blend Mode to Screen, Opacity to 90%, angle to 180 and click the Gradient (see picture).

Click and drag the bottom left slider to the right, exactly as I did (see picture).

Now choose Stroke on the left.

Choose the same settings as I did and click OK.

Do the same Stroke effect for the left rectangle layer as well, only to set the Opacity to 80%.

And you are done! this is how it looks like on a white background.

Click here to learn how to apply the tab button onto a website. By default it will look like the button on the left, on a mouse rollover the button turns into a button you see on the right side of your document. So stay tuned!

If you want the Photoshop .psd source document of the Facebook tab button from this tutorial, click here to download it.