In this Adobe Photoshop tutorial we’ll be learning how to create a unique, and professional-styled bookmark/promote box for your personal Blog, or maybe even your website. Having a promote or a bookmark section at the bottom of your articles can be a great boost in traffic for your Blog, especially if your Blog is new and you’re looking for more ways to get traffic.

There’s nothing like seeing a huge peak in traffic then an influx of new subscribers to your Blog!

Final Image Preview

Step 1

Let’s start by creating a new document in Photoshop, or you can open up a template that you were working with earlier. For this I will just be working with a small size, something around 800 x 600 pixels should do fine. Leave the Resolution alone at 72 dpi.

Leave the background color as white.

Step 2

Now we should create the base of our subscribe box, for this you can either use the rectangular marquee tool (and get square edges), or you can use the rounded rectangle tool to get some nice rounded edges for your box.

After you get the rounded rectangle tool out, make sure your settings are set accordingly:

These settings are shown at the top of Photoshop once you have selected the tool. Draw a rectangle on your canvas.

Fill this shape with a very light-grey color (#f4f4f4) then apply a simple 1px Stroke layer style with a darker color.

Now what we want to do is:

1. Duplicate your rounded rectangle layer
2. Move it down about 40 pixels
3. Place the layer below your original
4. Fill your duplicate layer with a much darker color (#4a4a4a)
5. Apply a similar Stroke layer style

Alright, if you followed all of the steps correctly, you should have something like this:

Hopefully you have followed it all correctly, and now we can move on. Remember, if you’re new to Photoshop, please feel free to download the PSD file at the end of the page and inspect each of the layers!

Step 3

Now we’re going to design a basic heart with a plus sign on it, this is so people will understand what the subscribing box is for. For this I actually used Illustrator, but it was very easy to do, so I’m sure it’s doable in Photoshop.

Start by making the heart shape using the Pen Tool, then fill it with the appropriate red color (#da3128).

As you can see in the above screenshot, I used Adobe Illustrator to create the heart. Now, using either Illustrator or Photoshop, add a plus to the heart. For this you can either use a font (very easy), or you can make your own using a path and applying a stroke to it.

OK, easy enough! After this I ported it over to my Photoshop document and added some simple adjustments. Here are some layer styles you can add to your heart shape in Photoshop:

• Drop Shadow
• Inner Shadow

Alright, so now our heart should be looking like this:

Next thing to do is create some accompanying text for our heart. Get the Type Tool (T) out, and write something like “Bookmark?” on the canvas, to the right of your heart.

The font used in the above image is called Delicious, and you can download it completely free of charge from the Delicious homepage. It’s using the Bold Italic weight of the typeface. After you’re all done with the text, copy the Drop Shadow from the heart that you used before and paste it onto your text layer.

Now, after making a copy of these layers, merge them all together and size them down so they fit in your bookmark box.

Step 4

In this step we’ll mostly be adding text. Start by getting out the Type Tool (T), and using Arial 12pt, write out a little message to the right of your heart/bookmark bit.

OK, next we need to add in some social bookmarking site names. This is the reason we have that darker area underneath the main rectangle, it’s for the links to social bookmarking sites and also for the RSS feed on the right side.

Using Arial 14pt, write out the names of some social websites in white (#ffffff).

Easy! Now, using Arial 12pt, bold, write out RSS feed on the right side. Obviously this isn’t important, but it’s a good idea to use some extra space.

Head on over to the Feed Icons website and download the icons pack, select the appropriate size and place it to the left of the RSS Feed text.

Alrighty, looks like we’re done! If you have anything else to add, feel free to! Add something that goes with the theme of your personal Blog or website.

Download PSD + Subscribe
Thanks for reading this Photoshop tutorial, I hope you found it helpful! If you have any questions, please leave a comment below, or of course you can download and inspect the PSD file for free.

Download the PSD file.

If you don’t want to miss any Blog Perfume articles like this, and many others about WordPress and design, subscribe to our RSS feed via a feed reader, or via email updates.

About the Author
This tutorial was written by Eli Burford, the previous owner and tutorial writer of PhotoshopStar. Eli now spends his days blogging on Design Blurb, a website with unique Photoshop and Illustrator tutorials, as well as plenty of freebies.