Wired Marketing Master Class: Week 3 How to create sophisticated buttons in Photoshop
How to create stylish call to action buttons in Photoshop
1. Start off with a new document with a canvas size 200px by 50px. Use the rounded rectangle tool with 5px rounded corners, and draw a rectangle a bit smaller than the canvas size. The colour does not matter at this point.
2. Right click on the rectangle layer and select blending options. Select gradient overlay and set the left colour as #42a4e0 and the right colour as #70c8fe. Then set the colour midpoint to 30% so that the light blue gets a larger portion of space than the dark blue.
3. Next set the inner glow. Follow the screenshot below for the values to set.
4. Now set the stroke. Use #2ea4ec for the colour. Use the screen shot below to get the other values.
5. Finally put a drop shadow on it. Use #888888 for the colour. The rest of the values can be found in the screenshot below.
6. Let’s add some text on the button. I am going to use read more, you can use whatever suits your need. Create a new layer and select the text tool. Click on the button and type your text. I used the Segoe UI font and set the size to 12px.
7. Right click on your text layer and select blending options. Add a drop shadow to the text. Use #136ca2 for the shadow colour. Use the rest of the values from the screenshot below. Then click ok.
8. Hold ctrl and click on the thumbnail of the shape on the rectangle layer. This will select the outline of the shape. Select the rectangular marquee tool. And then in the top left, below file, there are 4 small square buttons, choose the third one: subtract from selection.
Then select the area containing your text using the marquee tool as shown below. This will unselect that portion of your button and leave the portion we will be changing.
9. Create a new layer above the rectangle layer and fill that selection with a colour. It is not important what colour to use here.
10. Hold ctrl and press “D” this will de-select your selection. Then right click on the original rectangle and select copy layer style. Then right click on your new shape and select paste layer style. Then click on the hide layer style next to the drop shadow on your new shape.
11. Right click on the new shape layer and select blending options. Change the inner glow size to 3px. Then change the gradient overlay so that the gradient is reversed.
12. Choose the custom shape tool (it might be hidden, if so hold down the left button on the shape tool and the pop-out menu should appear, it will be in there. Then choose an arrow shape.
With white as the colour, draw a small arrow over the new shape. Then copy the layer style from the text layer and paste it onto the arrow layer. There you have your snazzy new button, ready for people to click on.
I hope you enjoyed the tutorial. For those of you with no time to do a bit of D.I.Y, we have the buttons created in a Photoshop file for you to download. So download them and feel free to use the buttons in your next marketing campaign. Download them here.
John is the Frontend Designer for Wired Marketing and specialises in email marketing design and PhotoShop.