Photoshop Web Layouts - Pink Heart Shaped Buttons

In this Photoshop Tutorial I will show you how to create Pink Heart Shaped Buttons. These buttons would work great on a personal web page. These hearts are very simple to make. We will create the first button, then we will duplicate the rest of them. I will explain this tutorial in detail so the new Photoshop users can do it too. Please see the image that I have provided to see the ending results.

How to Create Pink Heart Shaped Buttons in Photoshop

Open Photoshop and let it load. Click File > New to create a new canvas. Create it about 400 pixels by 400 pixels. Set the background color to white and click OK.

Create a new layer. Press F7 if you do not see your Layers Panel. Click the icon in the bottom of the Layers Panel that looks like a sheet of paper. That will create a new layer.

Click your Shape Tool in the toolbar and hold it down until the box drops down. Then click Custom Shape Tool. At the top of your Photoshop window you will see a drop down box beside the word Shape. Drop that box down and click the little arrow on the right. When the menu drops down, click on Shapes and that will load the heart shape in your box. Click on the heart shape and draw a heart on the canvas. You can draw it the size that you want.

Left click on your Shape Layer to highlight it. Then right click on it and click Rasterize Layer from the pop up menu. Right click on it again and click Blending Options from the pop up menu. Apply the following Effects to the heart.

Drop Shadow

Blend Mode - Multiply
Color - # 8a8989
Opacity - 75
Angle - 120
Distance - 5
Spread - 0
Size - 5
Contour - Linear
Anti-aliased - Unchecked
Noise - 0

Satin

Blend Mode - Lighten
Color - White
Opacity - 50
Angle - 129
Distance - 27
Size - 40
Contour - Gaussian
Anti-aliased - Unchecked
Invert -Checked

Color Overlay

Blend Mode - Normal
Color - # ff00ea
Opacity - 100

Stroke

Size - 1
Position - Outside
Blend Mode - Normal
Opacity - 100
Fill Type - Color
Color - # 9b0a81

Click OK on your Blending Options window.

Now we have created our first button. Next we will duplicate the buttons to create more. Right click on the Shape Layer and click Duplicate Layer from the pop up menu. When the dialog box pops up, click OK. Your duplicated button will be on top of your original button. Grab your Move Tool from the toolbar and drag the button below the top button. Please see the image that I have provided if you don't understand where to drag them. Repeat this step to create however many buttons you need.

After you have created your buttons, you can add the text to each button. I used the following font options.

Font - AucoinExtBol
Font Size - 16
Font Color - White

If you have any problems with this Photoshop Tutorial, please feel free to contact me using the contact button at the top of this page.