Best WordPress Themes, Plugins and Blogging Resources Blog Perfume The Best WordPress Themes, WordPress Plugins and Blogging Resources

Web Icons

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

Bookmark Box for Your Blog - Photoshop Tutorial

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.

Rounded Rectangle Tool

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

Rounded Rectangle Tool Settings

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

rounded-rectangle-canvas.jpg

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

After Applying Stroke Layer Style

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:

Duplicate Layer Adjustments Made

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).

Basic Heart Shape Adobe Illustrator Screenshot

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.

Plus Sign Added to Heart Shape

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:

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

Heart Shape After Layer Styles Added

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.

“Bookmark” Text Added

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.

Drop Shadow Added to 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.

Bookmark Heart and Text Sized Down

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.

Arial Text Added

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).

Social Bookmarking Sites Added

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.

RSS Feed Text Added

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.

RSS Feed Icon Added

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
Eli is a young and aspiring web designer from South Australia.

Readers Comments

A beautiful tutorials! This is perfect for me to get inspired for some designs I’ve been working on. Thanks for the tut, and I look forward to seeing more :)

Nice overview on how to design the box. A nice follow up tutorial would be coding it out for wordpress :)

Nice tutorial for a layman like me …using this i can do some thing …

Thanks a lot for wonderful tutorial

I completly agree with Mike Smith. That plus a tutorial with the code could be perfect.

Cheers for the comments. It’s a good idea (making a second part for WordPress). Since I’m no coder, maybe the owner of Blog Perfume will be able to hire someone else to do that part!

gurcharan singh sandhu

ya it is realy very good………….i like it.

Like it, love it, will try it.

This is such a great tutorial! I’ll get started on making one of this for my site. =D

Oh yeah, you got another suscriber!

Hey is a nice idea but i have this one make befor you make a tutorial ;)

Can i translate it to german an post of my Homepage ?

[...] commonly done. But sometimes the readers will more likely pay less attention to it. We just found a great tutorial to create a unique, and professional-styled bookmark/promote box for your personal Blog, or [...]

Tutorial is simply amazing …Good to see this step wise tutorials

Thanks a lot for sharing with us

-Adidas

[...] at BlogPerfume wrote a simple and nice article on how you can design a simple and nice Share box box (they call it [...]

Great tutorial!

I’m wondering though… how would I go about exporting this to put on my blog?

[...] There’s nothing like seeing a huge peak in traffic then an influx of new subscribers to your Blog! http://www.blogperfume.com/photoshop-tutorial-designing-a-unique-bookmark-box/ [...]

Sly from SlyVisions:

Obviously you’ll want to code the base of the box using xHTML and CSS to start with, without the text, then incorporate the text and links. What you should do is find a plugin such as Sociable for WordPress and get the bookmarking code for each link you want to use in your box.

I hope this helps, after all I am no good at programming.

Thanks for the help Eli, but I really don’t know how to even start. Do you have any step-by-step directions?

[...] for your blog. To create this bookmark box, you can check out the photoshop tutorial by folks at BlogPerfume. I have created mine and you can see it at the end of this [...]

[...] at BlogPerfume wrote a simple and nice article on how you can design a simple and nice Share box box (they call it [...]

[...] at BlogPerfume wrote a simple and nice article on how you can design a simple and nice Share box box (they call it [...]

I agree with Mike in both aspects, great tutorial, and a follow up tute on how to integrate the social networking links dynamically would be awesome! Just a thought tho :)

Keep up the great work!

Great Tutorial! Thanks

great tutorial

I love this one

thanks

[...] Designing a Unique Bookmark Box | WordPress Blogging | Blog Perfume – [...]

[...] 设计一个独一无二的书签盒 [...]

This is a great tutorial. Very well written and easy to follow. Thanks for posting it.

[...] Designing a Unique Social Bookmark Box Produce a professional bookmark/promote box for your blog. [...]

Jamiel Sharief

Fantastic – its fresh, elegant yet simple – great post.

Hello,
No doubt it is a very nice tutorial, but it seems I am committing mistake somewhere I am not getting what should be last result. I have seen many tutorials but you have explained all the steps in a very easy to understand way. Thx. I encourage you to put more like this one.

great article, easy to understand

Very nice tutorial and inspiration. Thank’s!

I will use it on site relaunch.

greetings
Sabine

[...] at BlogPerfume wrote a simple and nice article on how you can design a simple and nice Share box box (they call it [...]

[...] at BlogPerfume wrote a simple and nice article on how you can design a simple and nice Share box box (they call it [...]

Great and useful tutorial, thanks.

Nice tutorial! Hopefully it will help me at work. Slumberg (aka Turtles Slumberg)

really nice, thank you! :)

Rakesh Pathak

Nice tutorial! Hopefully it will help me at work.

[...] 14. Photoshop Tutorial: Designing a Unique Bookmark Box [...]

[...] 14. Photoshop Tutorial: Designing a Unique Bookmark Box [...]

[...] Designing a Unique Bookmark Box [...]

I agree with Mike in both aspects, great tutorial, and a follow up tute on how to integrate the social networking links dynamically would be awesome! Just a thought tho

[...] 14. Photoshop Tutorial: Designing a Unique Bookmark Box [...]

[...] 14. Photoshop Tutorial: Designing a Unique Bookmark Box [...]

[...] Designing a Unique Social Bookmark Box Produce a professional bookmark/promote box for your blog. [...]

The Heart symbol is very effective

I completly agree with Mike Smith. That plus a tutorial with the code could be perfect.

The Heart symbol is very effective

I completly agree with Mike Smith. That plus a tutorial with the code could be perfect.

The Heart symbol is very effective

[...] 14. Photoshop ??: ???????????? [...]

thank you everybody .This very important blog

I completly agree with Mike Smith. That plus a tutorial with the code could be perfect.

[...] 14. Photoshop ??: ???????????? [...]

The Heart symbol is very effective

Thanks a lot for the wonderful information

[...] 14. Photoshop Tutorial: Designing a Unique Bookmark Box [...]

[...] 17.Design A Unique Bookmark Box [...]

Nice tutorial for a layman like me …using this i can do some thing …

Thanks a lot for wonderful tutorial

[...] Designing a Unique Social Bookmark Box [...]

I agree with Mike in both aspects, great tutorial, and a follow up tute on how to integrate the social networking links dynamically would be awesome! Just a thought tho…

Medyum Niyazi

Nice overview on how to design the box. A nice follow up tutorial would be coding it out for wordpress

very nice posted thanks blogperfume

very nice posted thanks blogperfume

Designing a Unique Bookmark Box

Great post.Nice tutorial desing.Thank you.

There are plenty of ways to create Effect in Photoshop. Now I can play around in Photoshop a little bit and try to make some myself. Thanks

[...] at BlogPerfume wrote a simple and nice article on how you can design a simple and nice Share box box (they call it [...]

very goood site. thank you.

[...] Photoshop Tutorial: Designing a Unique Bookmark Box [...]

[...] 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. Visit: How to Design a Unique Bookmark Box [...]

[...] 17.Design A Unique Bookmark Box [...]

[...] 14. Photoshop ??: ???????????? [...]

Nice tutorial, i will try.
Thanks for sharing.

I agree with Mike in both aspects, great tutorial, and a follow up tute on how to integrate the social networking links dynamically would be awesome! Just a thought tho… Medyum O?uz


Leave a Comment