In this tutorial, I am going to show you how to create a slick download button in Photoshop and then use it as a button sprite. We will also cover some basic CSS techniques to make this design fully functional.
Preview
This is the result that we are going to create. The button will have three conditions, normal, hover, and active. Click here or click image below to see its demo.
Needed Resource
To follow this tutorial, you will need to grab this resource:
- 26 Repeatable Pixel Patterns from PSDfreemium
Step 1: Preparing Background
Start creating a new file with size 400 x 300 px. In Layers panel, click New Layer icon. Click Edit - Fill. Select #314052 for its color.
Double click layer to open Layer Style dialog box. Add Layer Style Inner Glow and Pattern Overlay to add some noise. For the pattern, use one of the pixel patterns from PSDfreemium. Make sure to reduce its Opacity to 5%.
Here's the result after adding Layer Style.
Step 2: Make Normal Button
Activate rounded rectangle tool and set its radius to 30 px. Draw a rounded rectangle with color #131c27.
Double click layer shape and add following Layer Styles.
This is the result.
Step 3
Duplicate layer shape we have just created in Step 1 by pressing Ctrl + J. Change its color to #213143. Activate move tool. Hit up arrow 5 times to nudge it 5 pixels up.
Step 4
Next, let's add some shadows under the button. In Layers panel, Ctrl-click original layer shape to create a new selection based on its shape.
Fill selection with black. Remove selection by pressing Ctrl + D. Soften the shadow by adding Gaussian Blur, click Filter - Blur - Gaussian Blur.
Step 5
Ctrl-click top most layer shape. Create new group and then click Add Layer Mask icon. We will add highlights inside this group. Because we have add layer mask, everything we paint here will always stay inside the button.
Use a big and soft brush to paint white on top of the button. Reduce its Opacity to 10%.
Step 6
Activate pencil tool and set its brush size to 1 px. Paint 1 px white line on top of the button. Delete both its edges using a big and soft eraser tool.
Repeat same porcess on its lower part.
Step 7
Add text DOWNLOAD. Set its color to #dce4eb and add Drop Shadow.
Step 8: Make Hover Condition
Let's organize the layer structure. Put all layers that created the button into a new group and name it normal. Duplicate group layer normal by Alt-dragging it. Rename the new group layer to hover. Change top shape color to #13202e.
Step 9: Make Active Condition
Duplicate normal group layer by Alt-dragging it again.. Nudge top shape 3 px down by activating mve tool and then press down arrow 3 times.
Step 10: Make Sprite Button
Hide all layers except normal group layer. Hit Ctrl + A to select all. Copy all pixels by pressing Ctrl + Shift + C.
Step 11
Create new file in Photoshop. Don't change the canvas size. Photoshop will automatically set new canvas size to the pixels we have just copied.
Step 12
Click Image - Canvas Size. Set Height to 300 percent.
Step 13
Hit Ctrl + V to paste the normal button. Place it on top of the canvas. Repeat this process for the other conditions. Make sure to sort place them just as in picture below.
Step 14
Hide Background by clicking on eye icon in front of it. Click File - Save For Web and Devices. Make sure to select file type PNG-24 and check Transparency option. PNG-24 format allows you to store transparency and also store more color informations better than GIF.
Step 15: Background
Use zoom tool to see the background details. Use rectangular marquee tool to create a 6 x 6 px selection. Save it to clipboard by pressing Ctrl + Shift + C.
Step 16
Create new file with size 6 x 6 px.
Paste the image, Ctrl + V. Save it as a PNG-24 file and name it background.png.
Final Result
Below is the end result. I hope you learn something new from this basic web design tutorial. Thank you for reading.
