How to Make a Sexy Button with Photoshop
Buttons are a huge part of first impression marketing and getting your online customers to do something on your site, whether that be download an article, buy your newest item or even to just subscribe to an email list. There is a fantastic article written by Cameron Chapman on Honkiat.com Here that goes into a lot more detail on the uses and effects of a good button. Its fine knowing who you can use them, but Carl Is going to teach you on how to make that sexy button!
Here is what we are going to make
Here is how to make it
- Open Photoshop and create a new document 220px width and 100px height (note we are using 72px/inch)
- We are going to use the rounded rectangle tool. It is a nice tool as it allows you to specify how rounded you want the edges. First select the tool from the tool bar and on the properties bar at the top change the radius to 6px. Next draw a rounded rectangle 205px by 60px towards the top of the document. Leave some space at the bottom for the reflection effect we will add later.
- Next we want to apply the nice gradient overlay. You can choose your own colours but we used an inviting orange. To add a gradient overlay, first choose your foreground as #f4a007 and your background colour to #ffd11f. Right click on the new shape later and go to Blending Options then Gradient Overlay. Once there click on the gradient in the middle of the panel and select the top left one; this will be your current Foreground to Background colours. Click okay and you`ll see a nice feel your button appear already.
- Now we want to have a nice glow effect on the button as thought it is lighted from the boarders. Again back to Blending Options, by left clicking on the shape later and going to Inner Glow. Add the following effects:
- Lets add a simple background so we can see our hard work. Add the colour #6daf03 as the background colour using the Paint Bucket Tool.
- Next we want to add a nice border that actually flows with the button. Rather than just putting a solid colour around it, the stroke (border) will have it’s own gradient giving a much more realistic feel. First lets set our colours: foreground #bb7900 and background #d5ac0a then Right click > Blending Options > Stroke and then use the following settings:
- Now time for the pattern effect on the button. To do this we will make our own custom pattern and then apply that to the shape. First do File > New and use a size of 16p by 16px with a transparent background. Next choose from custom shapes the shape below:It is important to make the shape bigger than the actual canvas so you don`t see any joins later.
- To define your own custom shape, just goto Edit > Define Pattern and name it Stripes.
- Time to apply our custom pattern to the button, go back to the tab with your button on it. Now lets select the area we want to apply the new patter, we do this by first holding Ctrl (Cmd for Macs) and clicking on the shape layer ( you need to click directly on the little box showing the actual shape, not the colour and not the layer name). Create a new layer, select the Marquee tool and then right click and Fill. Turn the opacity down to about 30% and now you have a nice texture.
- Lets get the glow, to do this we use a simple radial gradient and then make it fit the shape of the button. Select white as your foreground, choose the gradient tool and then from the properties bar choose the white to transparent (look for the checkered boxes, that means transparent i.e no colour) and then choose radial gradient (thats the second from the left icon on the properties bar). Make a new layer and then draw your glow so that it is not too big as below. Click Ctrl and T to then resize it and reduce the height a little.
- After press enter to confirm the transformation. We’re ready to make it fit the shape and then change the blending mode it give a real shiny effect. Again, holding down Ctrl, click on the shape of the button, this will select it and you will see a dashed line appear. With the new gradient layer selected click on the Layer Mask at the bottom of the layers panel. Lastly, change the Blending mode to Overlay and you are done!
- Time for text. To give our text that nice stamped feel we will be using a clever trick with the shadow. Add your text (about 30px and you choose the font) and then add the following shadow settings under Blending Options: The 1px, normal white shadow with 1px distance gives the illusion of the text being stamped into the button, easy and quick to do.
- To finish our masterpiece of button sexiness we just need a nice reflection. To do this, we simply copy our button and then transform and flip it. First we must make a copy of it. Select all the layers and then click Ctrl and E, this will merge them all into one later. Next press Ctrl and A to select all, Ctrl and C to copy and then, this is where it gets a little weird, do Edit > Undo until you have all your layers back. Now you can, with confidence click Ctrl and V to paste your button. You should have two lovely buttons one on top of the other.
- Click Ctrl and T to then transform and move the new button down so it looks upside down. Next we need to give it a fade effect so we click on the new button layer and add another layer mask. Select your gradient tool and make sure that it is Black to White (this is important as you may have it still set from when we made our glow effect). Draw your your gradient so that it makes the upside down button fade out.
- Congratulations! You did it!
The great thing about this is that you can change the colours, add a different pattern or just add different text and you`ll always have a sexy button to attract your users to your calls to action.
Hope you enjoyed this and if you have any questions or requests for other tutorials let us know in the comments section below
Free SEO Guide
- An interview with Atikun, our new team member!
- Tutorial – Geometric Design Tool
- 10 ways to track time of your projects
- Some incredibly useful inspiration websites for designers and developers
- How to Install Custom Font on Your Website
- Tutorial: How to Create Your Own Custom Brushes in Illustrator
- 9 Ways to Keep your Website Running Smooth