Photoshop Tutorials

Micro buttons are a popular addition to many websites nowadays, and are very useful for sprucing up search engines, navigation systems, etc. Thankfully for us, they are also simplicity itself to create, and can be easily customized to individual requirements. Here’s how you make your own:

Step 1: Create a new document around 200px by 200px in size with a white background. Create a new transparent layer on top and make it active. Select the Rectangular Marquee Tool and use it to make a rectangle 60px wide and 11px tall. Select Edit > Fill from the menu and fill it with a nice light grey – I used #F2F2F2.

Step 2: Choose

Layer > Layer Style > Drop Shadow from the menu and enter in the settings on the left. Don’t press OK until the end of step 5.

NB. All settings that are not shown should be left at their defaults – I just cropped them out to save space.

Step 3: Go to the Inner Shadow subsection and enter these settings. Seems easy? I told you they were simplicity itself to create!

Step 4: Progress onto the Bevel And Emboss subsection and duplicate these settings – you’ll notice that your button now looks almost complete in the background. Only one final step to go…

Step 5: Go to the often-neglected Stroke subsection and enter in the settings on the left. The fill colour is best left at a dark grey because black is far too strong. I chose #616161. Now press OK and look at the neat little button you have made!

Step 6: Default windows fonts often have problems with writing this small, so download a pixel font from one of the internet’s many font websites and enter some text onto your buttons. Deleting the edge pixels from your buttons can give them a rounded appearance, or you can go that bit further and create little jigsaw pieces. Just experiment and have fun!

24 Responses to “Photoshop Micro Buttons”