Dreevoo.com | Online Learning and Knowledge Sharing
Home | Programs | Adobe Photoshop | Drawing | Design a facebook side tab button using Photoshop
Click to view your profile

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.

  Author: mat | Version: CS5 | 25th March 2012 |  

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.

  Please login to post a comment
  Click to open user profile  
betbhai9, 19th Jan 2023, 10:51 PM
Agr apko online betting karke paise kamana hai to apko betbhai 9 platform par ana pdega ur wha akar apko kuch paise spent karne padege. Fir apko bidding karning padegi wha par, dekna padega ki kaha apko fayda ho rha hai ur kaha ni ye apko khud dhyan rkna pdega. But betbhai 9 me apke kafi chance hote hai ki paise jeetne ke, to aj he ap betbhai9 login id le ur betting suru kare. Best of luck. For more info. visit at: https://betbhai9.app/
online learning made for people