Today I'll be showing you how to design a somewhat different, yet very pretty button in Photoshop. Though it might look pretty simple it still has something other buttons lack; it's a dropdown button. You ready? Here we go!
Step 1: Button Beginnings
Launch Photoshop. Create a new document, I'll be using a document that's 600x350px.
Select the "Rounded Rectangle Tool" and use a Radius of 2. This will give the button a sharp look with a clean round edge. How big you choose to do it doesn't really matter, however, make sure you don't have it too big as it might end up looking out of place. My button is 104px in width & 30px in height.
Step 2: Adding Pop
Now let's add some styling to the button. We'll start with the "Gradient Overlay" to give it some dimension. Here's the setting we will be using:
Continue on to add a "Stroke" to it, we'll need to give it some sort of frame to emphasize it. Use these settings and the color #F8F8F8 to make it pop.
Now we'll be adding an "Inner Glow" for some minor polishing of the button. Use these settings:
Here's how the button should look, after adding a bit of text:
Step 3: The Dropdown Tab
Let's have a look at the blue dropdown tab, this step is more complicated as we'll be using the "Pen Tool" to customize the shape a bit. If you're not familiar with the "Pen Tool", read carefully so you don't miss anything.
You could either copy the button layer or create a new layer. I'll be creating a new layer with the same tool as before (Rounded Rectangle Tool). However, this time it should be a tad smaller than before, preferably not wider than 100px as we want this shape to tuck under the button itself. Fill this layer with the color #57A0FA. Here's what you should have now:
Step 4: Guides
Let's move on to the "Pen Tool" and customize the shape a bit. Make sure you're using the "Add Anchor Point Tool" and select the layer. To make things easier for beginners I'll be using guides to get the placing just right. You want to make sure you have one guide in the center of the button, then place an additional guide on either side of it. Here's how it should look:
Step 5: Handle
Now zoom in and select the most recent layer with the "Add Anchor Point Tool" and place the anchor points at the guides. Grab the center anchor and drag it down to your desired size. Just a few pixels will do as we want it to be a subtle effect.
To make the dropdown tab even prettier we'll be adding a hole in it (stay zoomed in as it's easier to see where to place the hole). To do this just click "Add Layer Mask" at the most recently created layer and select the "Elliptical Marquee Tool" to make a selection. Hit backspace and delete that part from the tab. Here's how it should look.
Step 6: Dropdown Styling
To help the tab look pretty and match the button we'll now be adding some styling to it. Start with the "Stroke" and use these settings:
Move on to the "Inner Shadow" and use the following settings to clean it up a bit and to bring some depth into the tab:
If everything is done correctly you should have a result that looks like this, if not, then you must have done something wrong!
Step 7: Hover
To create the "hover" dropdown just duplicate the normal state, increase its height and use the same techniques as before. Add some text and you're done!
Step 8: Color Variations
Here's how the Dropdown Button looks in various colors, feast your eyes upon these goodies!
Conclusion
Rapid and straight-forward, I hope you enjoyed this design Quick Tip!
