Bookmark Button

We'll begin this tutorial, by creating a new canvas at a size of 281 x 129. Next, select the "Rounded Rectangle Tool". Draw a rectangle as illustrated below with a radius of 5 pixels and color 1f3347. Name this layer "Button".

Now right click on the "Button" layer and select, "Blending Options...". Now click on "Outer Glow".

Do not click "OK" yet. Still more to do.

Now click on "Stroke".

You may now click OK.

You should now have the below image.

Next, select the "Custom Shape Tool" and select the "Five point star frame" shape found in the drop down in the option palette as illustrated below. Make sure the Foreground color is a2c8e0 and draw your shape. Name this layer "Star".

You should now have the below image.

Now right click on the "Star" layer and select, "Blending Options...". Now click on "Inner Shadow".

Do not click "OK" yet. Still more to do.

Now click on "Gradient Overlay".

You may now click OK.

You should now have the below image.

Next, duplicate the "Button" layer and clear the layer style by right clicking on the layer in the layers palette and selecting "Clear Layer Style". Then change the color to White. Name this layer "Gloss" and drag it up above the "Star" layer in the Layers Palette.

We will then need to move the bottom anchor points of the "Gloss" layer. To do this, select the "Direct Selection Tool" and select the bottom anchor points as I have done below by dragging over top of these anchor points. Now, using the up arrow key and "Shift" key on your keyboard, move these anchor points up three times as illustrated below.

Now "Ctrl" click the "Button" layer to create a selection around it and go to "Selection" then "Modify" and lastly "Contract" by 1. Then go to the main menu once again and click on "Select" and lastly "Inverse". Now rasterize the "Gloss" layer, then go to "Edit" and lastly "Cut".

Then turn the Fill down to 18%.

Next, select the "Rounded Rectangle Tool" again and draw a rectangle as illustrated below with a radius of 5 pixels and color 1f3347. Name this layer "Title bar".

Now we will create a anchor point to the shape as illustrated below. Select the "Add Anchor Point Tool" and place a new anchor on the top.

Next, select the "Direct Selection Tool" and select the new anchor point as I have done below. Now, using the up arrow key on your keyboard, move that anchor point up seven times as illustrated below.

You should now have the below image.

The Results!!!

Use the same style as was used in steps 2 and 3. For the text, use a2c8e0 as the color.