Create a Facebook, Twitter & RSS Button in Photoshop (Free PSD)
Today we’ll be learning how to create sleek & professional Facebook, Twitter & RSS Buttons/ Icons using Adobe Photoshop. We’ll be using basic methods to create these buttons including shapes, blending options and various useful techniques.
Resources
Final Result
1. Create a new document that’s 600×600 pixels with a white background. Select the Rounded Rectangle Tool (10px Radius) and draw the main button shape. Double click into Blending Options and put in the following for the Facebook button:
2. While holding down the CTRL Key, click on the layer thumbnail (circled below) Â to bring up the marquee around the button.
3. Create a new layer and select a medium sized soft edged brush in white. Brush on the sides of the button for some highlights and set the opacity to 16% for a subtle effect. To get out of the marquee, select the marquee tool and click any where on the canvas.
4. Next select the Line Tool (1px) and draw a line across the top of the button while holding down the Shift Key (to keep the line straight). Click on the Add Layer Mask icon (circled below). Next click on the mask layer, select a black soft edged brush and erase the edges of the line. If you’ve made a mistake change the black to white and brush on the mistake area to bring the line back.
5. Next open up the Social Icons PSD format and drag the facebook icon onto the canvas. Place the icon on the button, double click into Blending Options and put in the following below:
6. Using the Line Tool again, draw a white vertical line like below & set the Opacity to 25%. Draw another vertical line but in Black like below and set the Opacity to 46%. While holding down the CTRL Key, select the 2 vertical lines and drag them to the Folder icon to place in a folder. Click on the Add Layer Mask icon again (like step 4) and erase the top & bottom part of the line folder to make a nice divider.
7. Using any font you want, write out the button information. Double click into Blending Options and put in the same options as step 5.
8. While holding down the Shift Key, select the first button layer and then the last to select all of the layers and drag them to the new folder icon. Duplicate the folder 2 time for the Twitter & RSS buttons. Replace the Facebook icons with a Twitter & RSS icon, and change the text titles.
9. Put in the following Blending Options for the Twitter button. With the Twitter Logo & Text make the inner shadow colour #0d6286 in Blending Options.
10. Put in the following Blending Options for the RSS button. With the RSS Logo & Text make the inner shadow colour #c36200 in Blending Options.
Final Result
